Configurar Workspace para Web en Flex 3

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

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

Deberas haber cubierto alguno de los 2 tutoriales de instalación de Adobe Flex 3, que anteriormente escribimos. Asi como el tutorial de instalacion de AppServ o EasyPHP. Cualquiera de los 2 que estes ejecutando, debera estar “arriba” o lo que es lo mismo, levantado el servicio.

Vamos a crear una carpeta dentro de www (En mi caso estoy usando easyphp, tu deberas buscar la adecadua), que llamare flex3:

Crear carpeta en www para trabajar en web
Crear carpeta en www para trabajar en web

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

Icono del Adobe Flex Builder
Icono del Adobe 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 ejemplosWEB.
  • Quitamos la palomita de USE DEFAULT LOCATION y utilizaremos la carpeta con el nombre flex3 que creamos anteriormente y la escogeremos.
  • En APPLICATION TYPE escogeremos WEB APPLICATION (aplicacion web para Adobe Flash Player).
  • En APPLICATION SERVERT TYPE escogeremos PHP y ya con esos parametros daremos clic en NEXT:
Nombre y tipo de Proyecto
Nombre y tipo de Proyecto

Vamos a configurar el servidor PHP:

  • En WEB ROOT escogeremos la carpeta que creamos al principio.
  • En ROOT URL ponemos la direccion http://127.0.0.1/flex3/ ó http://localhost/flex3/ (son iguales, pero si a un parametro le ponemos localhost a TODOS los demas que pidan URL, se les debe de poner igual, si no, marcara un error de SANDBOX). Le estamos poniendo /flex3/ porque asi se llama la carpeta que creamos, si utilizastes otro nombre, debes poner el que utilizastes.
  • Le damos clic en VALIDATE CONFIGURATION y nos debe poner arriba: “THE WEB ROOT FOLDER AND ROOT URL ARE VALID” Significa que si encontro que coinciden ambos.
  • La ultima opcion nos pregunta donde estaremos trabajando los archivos binarios para el DEBUG, la opcion por default BIN-DEBUG, es la indicada, daremos clic en NEXT:
Ubicación de la carpeta web y url de acceso
Ubicación de la carpeta web y url de acceso

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 de MAIN APPLICATION FILE, nos dice el nombre de nuestra aplicación principal dentro de nuestro proyecto.
  • Y por ultimo tenemos la ruta URL para nuestra aplicacion, que no es otra cosa, mas que agregarle a la ruta URL que pusimos en la ventana anterior, el folder del DEBBUG asi http://127.0.0.1/flex3/bin-debug/ si pusiste en la ventana anterior localhost, aqui tambien tiene que ser igual: http://127.0.0.1/flex3/bin-debug/ asi que abusados.

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: APPLICATION, 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 APPLICATION.

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 Application 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 el navegador por defecto del SO, y nos mostrarra el archivo creado en el bin-debug (si te llega a aparecer un error 404 -archivo no encontrado-, pusistes mal algun parametro o el servidor apache no esta “arriba”):

Nuestro primer hijo web en Flex
Nuestro primer hijo web 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 *