Flex 4.6 Mobile – Hello World

Posted by Javier Vazquez in Adobe Flex, Android

Como indicamos en el capítulo anterior, vamos a desarrollar una aplicación sencilla para dispositivos móviles con Adobe Flash Builder 4.6.

Si no lo tenemos instalado, ver capítulo Flex 4.6 – Instalación.
Comencemos abriendo Flash Builder.

 

Una vez en dentro de Flash Builder crearemos un nuevo proyecto móvil, para ello pulsaremos en File > New > Flex Mobile Project

 

A continuación, deberemos configurar el proyecto mediante una serie de pantallas.

Lo primero de todo es seleccionar un nombre para nuestro proyecto, en esta ocasión lo llamaremos HelloWorld.
Project location indica el directorio que contendrá los archivos del proyecto y Flex SDK version es la SDK que utilizaremos. Dejaremos los valores por defecto.

 

En el siguiente paso, seleccionaremos las plataformas móviles deseadas y la plantilla de nuestra aplicación, para nuestro ejemplo basta con seleccionar la plataforma Google Android y como plantilla dejar la que viene seleccionada View-Based Application. El resto de opciones, podemos dejarlas con sus valores por defecto.

 

Llegados a este punto, podemos pulsar en Finish para crear finalmente el proyecto (saltar las dos siguientes imagenes) o pulsar en Next para continuar con el resto de configuraciones.

Al pular en Next, se muestra la siguiente pantalla en la cual se configura la tecnología del servicio y el directorio de publicación. En este ejemplo, no será necesario seleccionar una tecnología pues no se utilizará ningún servicio.

 

En el último paso, se indica cual será el directorio principal del código (Main source folder), archivo principal (Main) e identificador de la aplicación (Application ID).

Esto es un ejemplo de prueba y podemos poner el nombre que deseemos como Application ID, pero si deseamos que nuestra aplicación salga al mercado necesitaremos dar un ID con la siguiente estructura com.example.appname.

Esta pantalla también permite añadir bibliotecas para ser utilizadas por nuestra aplicación si se diese el caso. En este ejemplo, no será necesario configurar nada más, así todo comentar que una vez creado el proyecto se podrá acceder a esta pantalla para modificar cualquier cosa salvo el Application ID.

 

Flash Builder ha creado un proyecto Flex Mobile el cual a generado una serie de archivos como podemos observar en la siguiente imagen.

• HelloWorld.mxml: Este es el archivo principal de la aplicación, y en él se detalla cual será la vista principal del proyecto: firstView=view.HelloWorldHomeView.mxml.
• HelloWorldHomeView.mxml: Este archivo representa la pantalla o vista (view) inicial del proyecto. Flash Builder coloca el archivo en un paquete llamado views, aunque nosotros podemos modificar su nombre o estructura si lo deseamos.

 

A continuación, añadimos al archivo HelloWorldHomeView.mxml las siguientes lineas:

<s:VGroup height="100%" width="100%" verticalAlign="middle" horizontalAlign="center">
<s:Label text="Hello World!" />
</s:VGroup>

Quedándonos el archivo como se muestra en la siguiente imagen:

 

Una vez modificado el archivo, configuraremos un emulador para poder probar la aplicación. Para ello pulsamos botón derecho encima del proyecto > Run As > Run Configurations…
Seleccionaremos Google Android como plataforma y a continuación el modelo de dispositivo que deseemos, en nuestro caso hemos seleccionado Google Nexus S.

Si deseamos depurar la aplicación, debemos configurar un emulador de igual manera, pero seleccionando en el menú del botón derecho > Debug As > Debug Configurations…

 

Pulsamos en Run y observamos el resultado.

 

Ya tenemos nuestra primera aplicación móvil desarrollada.

Bien, si ahora deseamos instalar la aplicación en un dispositivo real, debemos generar el archivo .apk encargado de realizar dicha acción.

Para ello, debemos dirigirnos a Project > Export Release Build…

 

En la siguiente pantalla, seleccionaremos la plataforma Google Android y si lo deseamos, indicamos un directorio (Export to folder) donde depositar el .apk que generaremos.

 

En la siguiente pantalla, observamos el error No certificated selected. Esto es debido a que la aplicación debe ser firmada y aún no se ha seleccionado ningún certificado para ello.

 

Para este ejemplo, crearemos nuestro certificado de prueba. Pulsamos en la pestaña Digital Signature > Cretae… y a continuación en la ventana que nos aparece debemos rellenar al menos los campos Publisher name, Password y Confirm password.

Podemos guardar el certificado para posteriores pruebas, evitando así crear nuevos.

 

Por último, repetimos el passworld que hayamos selecionado a la hora de crear el certificado y pulsamos en Finish.

 

Una vez terminado el proceso, se habrá generado el archivo .apk en la ruta expecificada (Export to folder).

Finalmente, ya podemos instalar nuestra aplicación en un dispositivo real. Simplemente necesitaremos pasar el archivo .apk a nuestro dispositivo mediante USB, Bluetooth.. o la forma que deseemos y ejecutar dicho archivo para comenzar con la instalación.

Aunque Adobe nos permite desarrollar aplicaciones para Android de forma sencilla gracias a Flash Builder 4.6, no todos los móviles soportan estas aplicaciones.
Ver enlace dispositivos certificados por Adobe.