Configurar Workspace para Desktop en Flex 3

Hola veamos como configurar un workspace (espacio de trabajo) dentro de Adobe Flex 3 para un ambito de tipo Desktop (escritorio).

Si quieres ver como se configura un workspace en modo WEB, ve este otro tutorial

Deberas haber cubierto alguno de los 2 tutoriales de instalación de Adobe Flex 3, que anteriormente escribimos.

Buscamos nuestro ejecutable o acceso directo y le damos doble clic:

Icono Flex Builder
Icono Flex Builder

Nos preguntara por un directorio donde se alojaran los archivos del workspace:

Definir carpeta del Workspace
Definir carpeta del Workspace

Luego de tener el Adobe Flex 3, nos iremos al menu NEW (nuevo), escogeremos FLEX PROJECT (proyecto de flex):

Nuevo Proyecto de Flex
Nuevo Proyecto de Flex
  • Le pondremos como nombre ejemplosAIR.
  • Quitamos la palomita de USE DEFAULT LOCATION y crearemos una carpeta en C: de nombre flex3 y la escogeremos.
  • En APPLICATION TYPE escogeremos DESKTOP APPLICATION (aplicacion de escritorio para Adobe AIR).
  • En APPLICATION SERVERT TYPE escogeremos NONE y ya con esos parametros daremos clic en NEXT:
Nombre y tipo de Proyecto
Nombre y tipo de Proyecto

Nos pregunta donde estaremos trabajando los archivos binarios para el DEBUG, la opcion por default BIN-DEBUG, es la indicada, daremos clic en NEXT:

Carpeta de los binarios para el Debug
Carpeta de los binarios para el Debug

La lengüeta de SOURCE PATH, nos sirve para incluir codigo fuente (MXML), dentro de nuestro proyecto, aun cuando este este fuera de la carpeta o del workspace:

Archivos fuente externos al proyecto
Archivos fuente externos al proyecto

La lengüeta de LIBRARY PATH, nos sirve para incluir codigo fuente pre.compilado o compilado -como ustedes gusten llamarles, es lo mismo- son archivos SWC, y estos pueden o no estar dentro de nuestro workspace. Hay tambien abajo 3 opciones mas:

  • Tambien nos presenta el MAIN SOURCE FOLDER, que es donde colocaremos nuestros archivos fuentes principales.
  • La opción deMAIN APPLICATION FILE, nos dice el nombre de nuestra aplicación principal dentro de nuestro proyecto.
  • Y por ultimo tenemos el APPLICATION ID, que es el ID (identificador UNICO), con el cual será indentificada nuestra aplicación en el SO.

Daremos clic en FINISH y Adobe Flex comenzara a crear los archivos necesarios:

Archivos de librerias (swc) externos al proyecto
Archivos de librerias (swc) externos al proyecto

Nos muestra el codigo fuente de nuestra aplicacion asi como el nodo principal: WINDOWEDAPPLICATION, la declaracion de los name spaces: XMLNS:MX y la url donde buscara estos, en caso de existir conflicto, por ultimo tiene la propiedad LAYOUT en absolute. Cuando tengamos codigo de AS3, y utilicemos la palabra reservada THIS, en este caso hara referencia a WINDOWEDAPPLICATION.

Vista de Codigo en Flex 3
Vista de Codigo en Flex 3

Si le damos clic en el boton de DESIGN, nos mostrara la perspectiva de DISEÑO, la cual incluye por default algunas vistas como son la de los STATES, PROPERTIES, COMPONENTS, que estaban ocultas en la perpectiva de SOURCE:

Vista de Diseño en Flex 3
Vista de Diseño en Flex 3

Volveremos a la vista de SOURCE dando clic en el boton del mismo nombre, nos colocaremos en medio de las etiquetas de la WindowedApplication y teclearemos el caracter: < Al hacer esto, Eclipse mostrara el CODE HITTING. Cabe señalar que solo mostrara las opciones disponibles de donde nos encontremos.

El code hitting en Flex es sensitivo
El code hitting en Flex es sensitivo

Ahora tecleamos: la Al hacer esto creara un filtro de todas las opciones que antes existian, escogeremos LABEL:

Filtrado del code hitting en Flex 3
Filtrado del code hitting en Flex 3

Tecleamos un ESPACIO y luego tecleamos: te Al hacer esto nos volvera a mostrar el filto, escogeremos text y dentro de las comillas dobles tecleamos: Hola Toño desde Flex 3 Por ultimo tecleamos: /> Para cerrar la etiqueta:

Filtrado acorde al nodo actual del mxml
Filtrado acorde al nodo actual del mxml

Ahora buscaremos la propiedad ABSOLUTE del LAYOUT, y la cambiaremos por VERTICAL. Luego procedemos a salvar pulsando la combinacion: CONTROL + S (la tecla ctrl y la tecla s al mismo tiempo), La configuracion por default de Adobe Flex 3 es en modo de Compilador Automatico, es decir, al momento de guardar, compilara dentro del bin-debug. Nuestro codigo completo quedara como el siguiente:

Codigo completo del ejemplo
Codigo completo del ejemplo

Buscamos una tecla de color verdecito con un icono parecido al homologado PLAY, pero el nuestro es para darle RUN…

Ejecutar, invocar o correr la aplicación actual
Ejecutar, invocar o correr la aplicación actual

Nos abrira nuestra ventana desde el archivo creado con el bin-debug:

Nuestro primer hijo en Flex
Nuestro primer hijo AIR en Flex

Y eso era todo, sencillo, no?

Espero que sea de utilidad, es para los muy polluelos, pero necesario para realizar los jutsus mas avanzados de Adobe Flex Builder 3.

Acuerdense que es importante solo tener 1 proyecto a la vez abierto, si tienen mas de 1 proyecto flex abierto, el compilador puede desde tardarse más, hasta tener problemas para compilar los archivos, y en maquinas no muy potentes, me ha tocado ver que hasta puede provocar un “crash” y cerrarse el eclipse.

Para estar al pendientes de nuevos tutoriales, pues ahi tienen mi cuenta de twitter: http://twitter.com/profesorAntonio y para quejas, pues a otro lado, porque nadie te obligo a leer este blog, feliz codigo y gracias.

(Todas las imagenes mostradas aqui son con FINES EDUCATIVOS, cualquier otro uso pidanle un chance a Adobe).

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *