Flex
description
Transcript of Flex
Hello World!! con Flex, BlazeDS, RemoteObject
y Java
Jonathan A. Galdames Loaiza
11 de mayo de 2008
1
Indice
1. Creando el Primer Proyecto Flex en Eclipse 31.1. New Flex Project . . . . . . . . . . . . . . . . . . . . . . . . . . . 31.2. Project Name . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31.3. Configure J2EE Server . . . . . . . . . . . . . . . . . . . . . . . . 31.4. Finish . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41.5. Properties Flex Server . . . . . . . . . . . . . . . . . . . . . . . . 5
2. Java 72.1. New Class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72.2. Metodo getString . . . . . . . . . . . . . . . . . . . . . . . . . . . 92.3. Creando “detination” en remoting-config.xml . . . . . . . . . . . 92.4. MXML y RemoteObject . . . . . . . . . . . . . . . . . . . . . . . 112.5. Corriendo la Aplicacion . . . . . . . . . . . . . . . . . . . . . . . 11
2
1. Creando el Primer Proyecto Flex en Eclipse
1.1. New Flex Project
Abrimos el Eclipse configurado con Flex Builder (como se explico en el doc-umento de instalacion) y abrimos la perspectiva de flex1 (destacado en rojo)vamos a la pestana de Flex Navigator (en amarillo) y haces click con botonderecho sobre el area blanca y luego click en New->Flex Project como se mues-tra en la Figura 1
Figura 1: Creando un nuevo proyecto Flex
1.2. Project Name
Una vez realizado el paso anterior asignamos un nombre al proyecto (paraeste ejemplo: HelloWord) y nos aseguramos que los campos esten seleccionadoscomo se muestra en la Figura 2. Luego click en el boton Next (en azul)
1.3. Configure J2EE Server
En la siguiente ventana configuramos el servidor J2EE de la siguiente formaapoyandose en la Figura 3:
1Si no aparece, haces click en el icono marcado con verde en la Figura 1 y lo agregas
3
Figura 2: Nombre del proyecto y algunas configuraciones
1. En Target runtime (en rojo) seleccionamos el server Apache Tomcat quehemos configurado en la instalacion.
2. En Flex WAR file (en verde) hacemos click en Browse... para buscar elarchivo blazeds.war2
3. Luego hacemos click en el boton Next
1.4. Finish
Tenemos finalmente una ultima ventana (Figura 4) donde podemos cambiaralgunos directorios como el del source de Flex (flex src por defecto en amarillo)el nombre del mxml principal de flex ( en este caso HelloWord.mxml en azul) yla carpeta de salida en la URL (en verde). Para este ejemplo solo hacemos clicken el boton Finish (en rojo).
Con esto, como vemos en la Figura 5 se crea el arbol de directorios (en azul)y se abre el mxml principal (en verde).
2Este archivo se adjunta en el directorio de descargas. Busquelo donde lo guardo.
4
Figura 3: Configurando J2EE
Figura 4: Finalizando la Creacion del Proyecto Flex
1.5. Properties Flex Server
Ahora debemos configurar el Context root del Flex Server. Para ello hace-mos click derecho sobre la carpeta del proyecto (en amarillo) y luego click enProperties (en rojo) como se muestra en la Figura 6.
5
Figura 5: Proyecto Flex Creado
Figura 6: Properties del Proyecto
Una vez dentro de las propiedades del proyecto (ver Figura 7), vamos a lasubseccion Flex Server haciendo click sobre el ella (en rojo). Despues de ingresara esta subseccion nos dirigimos al label Context root (en verde) y cambiamos lo
6
escrito por, en nuestro caso, /HelloWord3, el directorio contenedor del proyecto.
Figura 7: Configurando Flex Server
Click en el boton OK y listo, hemos terminado de configurar lo necesariopara que Flex funcione en nuestro proyecto.
2. Java
Realizando los pasos de la Seccion 1 nos encontramos en condiciones de crearnuestro codigo Java.
2.1. New Class
Ahora es tiempo de cambiar la perspectiva (ver Figura 8), cambiamos a Java(en azul). Con click derecho sobre el directorio src (en amarillo) damos click aNew->Class (en rojo) para crear nuestra nueva clase.
En la ventana New Java Class (ver Figura 9) asignamos un paquete (enamarillo) y un nombre (en verde). Despues de esto hacemos click en el botonFinish (en rojo).
7
Figura 8: Creando Nueva Clase de Java
Figura 9: Nueva Clase
3Ojo!!, HelloWord, que es el nombre del proyecto que hemos creado, HolaPalabra traducidoal espanol. Es solo un juego de palabras con el tıpico HelloWorld :) para decir en “palabras”Hola Mundo
8
Con lo anterior se han creado el arbol de directorios correspondiente (enverde) y la nueva Clase de Java (en rojo) como se puede apreciar en la Figura10.
Figura 10: Nueva Clase Creada
2.2. Metodo getString
Vamos a crear el metodo necesario para enviar informacion al Objeto Remotoque recibira Flex. Para esto escribimos el metodo como aparece en la Figura 11.Con esto el metodo retorna un objeto String que contiene la frase “Hello World”.
2.3. Creando “detination” en remoting-config.xml
Como lo muestra la Figura 12, utilizando la pestana Package Explorer (enamarillo) ingresamos al arbol de directorios (en verde) WebContent/WEB-INF/flex/y abrimos el archivo remoting-config.xml (en rojo) haciendo doble click sobreel. Con lo cual veremos la pestana de edicion del codigo xml4 (en azul).
Ahora es necesario escribir la seccion de codigo que se aprecia en el rectangulorojo de la Figura 13. Con esto definimos un destination con un id, en este caso
4Si no aparece el codigo has click sobre Source en la parte inferior derecha (en naranja)
9
Figura 11: Creando el metodo getString
Figura 12: remoting-config.xml
hola. Luego dentro de la etiqueta properties definimos el source al cual hacereferencia este destination, en nuestro caso, pakage.Main, que es el paquetecontenedor con la clase Java que acabamos de crear.
10
Figura 13: detination, properties y source
2.4. MXML y RemoteObject
Como se aprecia en la Figura 14, haciendo click sobre la pestana del archivomxml (en azul) o doble click sobre el archivo correspondiente (en amarillo)podemos comenzar a editarlo (en rojo)5.
Agregamos las lineas encuadradas en rojo de la Figura 15. Con estas lıneas decodigo estamos agregando un Objeto Remoto con un id “RO” (Remote Object,por poner algun nombre) que tiene un destination “hola” que es el que acabamosde definir en el archivo remoting-config.xml con lo cual estamos uniendo el codigoJava de la clase “Main” con el codigo de Flex del archivo MXML.
Tambien agregamos un boton con en el cual sobre su label colocaremos elString que retorna el metodo getString cuando se haga click sobre el. Por ellolas sentencias label y click hacen alusion al metodo getString de la clase Main.
2.5. Corriendo la Aplicacion
Una vez realizados todos los pasos anteriores estamos en condiciones decorrer la aplicacion.
5Como aclare con el archivo remoting-config.xml si no aparece codigo, has click sobre elboton Source (en naranja) de la parte superior izquierda de la pestana.
11
Figura 14: Editando el MXML
Figura 15: RemoteObject y Button
Para ello con un click de boton derecho sobre el codigo del archivo Hel-loWord.mxml vamos a Run As -> Run on Server (en rojo) como se aprecia enla Figura 16
Luego debemos elegir el servidor sobre el cual correremos la aplicacion (ver
12
Figura 16: Run on Server
Figura 17), elegimos el Tomcat que hemos configurado en la etapa de instalacion(en verde) y hacemos click en el boton Finish (en rojo).
Figura 17: Seleccionando Servidor
En la pestana Servers (en azul) podemos ver el estado del servidor como se
13
muestra en la Figura 18.
Figura 18: Estado del Servidor
Una vez iniciado veremos algunos mensajes de color rojo en la pestana Con-sole (en amarillo) como se aprecia en al Figura 19.
Despues de una pequena espera se abrira una nueva pestana con un browserinterno (en verde) como se aprecia en la Figura 20. La URL es la correspondienteal archivo mxml (en rojo) pero debemos cambiarla a una extension html comose muestra en rojo en la Figura 21. Para luego presionar la tecla intro o entercargandose la aplicacion en el browser como se muestra en la Figura 22.
Finalmente Si hacemos click sobre el boton (en blanco de la Figura 22)aparecera el mensaje “Hello World” como se aprecia en las Figura 23.
14
Figura 19: Consola
Figura 20: Browser Interno
15
Figura 21: Cambiando a html
Figura 22: Aplicacion Cargada
16
Figura 23: Fin de la Aplicacion
17