Este documento describe los pasos para crear una aplicación Flex que se comunica con código Java a través de RemoteObjects. Inicialmente, se crea un proyecto Flex en Eclipse y se configura un servidor J2EE. Luego, se crea una clase Java con un método que retorna un String y se define un destino en el archivo remoting-config.xml. Finalmente, en el archivo MXML se agrega un RemoteObject y un botón para invocar el método Java y mostrar el resultado.

1. Hello World!! con Flex, BlazeDS, RemoteObject
y Java
Jonathan A. Galdames Loaiza
11 de mayo de 2008
1

2. ´
Indice
1. Creando el Primer Proyecto Flex en Eclipse 3
1.1. New Flex Project . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.2. Project Name . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.3. Configure J2EE Server . . . . . . . . . . . . . . . . . . . . . . . . 3
1.4. Finish . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.5. Properties Flex Server . . . . . . . . . . . . . . . . . . . . . . . . 5
2. Java 7
2.1. New Class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.2. M´todo getString . . . .
e . . . . . . . . . . . . . . . . . . . . . . . 9
2.3. Creando “detination” en remoting-config.xml . . . . . . . . . . . 9
2.4. MXML y RemoteObject . . . . . . . . . . . . . . . . . . . . . . . 11
2.5. Corriendo la Aplicaci´n
o . . . . . . . . . . . . . . . . . . . . . . . 11
2

3. 1. Creando el Primer Proyecto Flex en Eclipse
1.1. New Flex Project
Abrimos el Eclipse configurado con Flex Builder (como se explic´ en el doc-
o
umento de instalaci´n) y abrimos la perspectiva de flex1 (destacado en rojo)
o
vamos a la pesta˜a de Flex Navigator (en amarillo) y haces click con bot´n
n o
derecho sobre el ´rea blanca y luego click en New->Flex Project como se mues-
a
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 (para
este ejemplo: HelloWord) y nos aseguramos que los campos est´n seleccionados
e
como se muestra en la Figura 2. Luego click en el bot´n Next (en azul)
o
1.3. Configure J2EE Server
En la siguiente ventana configuramos el servidor J2EE de la siguiente forma
apoy´ndose en la Figura 3:
a
1 Si no aparece, haces click en el icono marcado con verde en la Figura 1 y lo agregas
3

4. Figura 2: Nombre del proyecto y algunas configuraciones
1. En Target runtime (en rojo) seleccionamos el server Apache Tomcat que
hemos configurado en la instalaci´n.
o
2. En Flex WAR file (en verde) hacemos click en Browse... para buscar el
archivo blazeds.war 2
3. Luego hacemos click en el bot´n Next
o
1.4. Finish
Tenemos finalmente una ultima ventana (Figura 4) donde podemos cambiar
´
algunos 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) y
la carpeta de salida en la URL (en verde). Para este ejemplo s´lo hacemos click
o
en el bot´n Finish (en rojo).
o
Con esto, como vemos en la Figura 5 se crea el ´rbol de directorios (en azul)
a
y se abre el mxml principal (en verde).
2 Este archivo se adjunta en el directorio de descargas. B´ squelo donde lo guard´.
u o
4

5. Figura 3: Configurando J2EE
Figura 4: Finalizando la Creaci´n del Proyecto Flex
o
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 en
Properties (en rojo) como se muestra en la Figura 6.
5

6. Figura 5: Proyecto Flex Creado
Figura 6: Properties del Proyecto
Una vez dentro de las propiedades del proyecto (ver Figura 7), vamos a la
subsecci´n Flex Server haciendo click sobre el ella (en rojo). Despu´s de ingresar
o e
a esta subsecci´n nos dirigimos al label Context root (en verde) y cambiamos lo
o
6

7. escrito por, en nuestro caso, /HelloWord 3 , el directorio contenedor del proyecto.
Figura 7: Configurando Flex Server
Click en el bot´n OK y listo, hemos terminado de configurar lo necesario
o
para que Flex funcione en nuestro proyecto.
2. Java
Realizando los pasos de la Secci´n 1 nos encontramos en condiciones de crear
o
nuestro c´digo Java.
o
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 a
New->Class (en rojo) para crear nuestra nueva clase.
En la ventana New Java Class (ver Figura 9) asignamos un paquete (en
amarillo) y un nombre (en verde). Despu´s de ´sto hacemos click en el bot´n
e e o
Finish (en rojo).
7

8. Figura 8: Creando Nueva Clase de Java
Figura 9: Nueva Clase
3 Ojo!!, HelloWord, que es el nombre del proyecto que hemos creado, HolaPalabra traducido
al espa˜ol. Es s´lo un juego de palabras con el t´
n o ıpico HelloWorld :) para decir en “palabras”
Hola Mundo
8

9. Con lo anterior se han creado el ´rbol de directorios correspondiente (en
a
verde) y la nueva Clase de Java (en rojo) como se puede apreciar en la Figura
10.
Figura 10: Nueva Clase Creada
2.2. M´todo getString
e
Vamos a crear el m´todo necesario para enviar informaci´n al Objeto Remoto
e o
que recibir´ Flex. Para esto escribimos el m´todo como aparece en la Figura 11.
a e
Con esto el m´todo retorna un objeto String que contiene la frase “Hello World”.
e
2.3. Creando “detination” en remoting-config.xml
Como lo muestra la Figura 12, utilizando la pesta˜a Package Explorer (en
n
amarillo) ingresamos al ´rbol de directorios (en verde) WebContent/WEB-INF/flex/
a
y abrimos el archivo remoting-config.xml (en rojo) haciendo doble click sobre
´l. Con lo cual veremos la pesta˜a de edici´n del c´digo xml4 (en azul).
e n o o
Ahora es necesario escribir la secci´n de c´digo que se aprecia en el rect´ngulo
o o a
rojo de la Figura 13. Con esto definimos un destination con un id, en este caso
4 Si no aparece el c´digo has click sobre Source en la parte inferior derecha (en naranja)
o
9

10. Figura 11: Creando el m´todo getString
e
Figura 12: remoting-config.xml
hola. Luego dentro de la etiqueta properties definimos el source al cual hace
referencia este destination, en nuestro caso, pakage.Main, que es el paquete
contenedor con la clase Java que acabamos de crear.
10

11. Figura 13: detination, properties y source
2.4. MXML y RemoteObject
Como se aprecia en la Figura 14, haciendo click sobre la pesta˜a del archivo
n
mxml (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 de
c´digo estamos agregando un Objeto Remoto con un id “RO” (Remote Object,
o
por poner alg´n nombre) que tiene un destination “hola” que es el que acabamos
u
de definir en el archivo remoting-config.xml con lo cual estamos uniendo el c´digo
o
Java de la clase “Main” con el c´digo de Flex del archivo MXML.
o
Tambi´n agregamos un bot´n con en el cual sobre su label colocaremos el
e o
String que retorna el m´todo getString cuando se haga click sobre ´l. Por ello
e e
las sentencias label y click hacen alusi´n al m´todo getString de la clase Main.
o e
2.5. Corriendo la Aplicaci´n
o
Una vez realizados todos los pasos anteriores estamos en condiciones de
correr la aplicaci´n.
o
5 Como aclar´ con el archivo remoting-config.xml si no aparece c´digo, has click sobre el
e o
bot´n Source (en naranja) de la parte superior izquierda de la pesta˜a.
o n
11

12. Figura 14: Editando el MXML
Figura 15: RemoteObject y Button
Para ello con un click de bot´n derecho sobre el c´digo del archivo Hel-
o o
loWord.mxml vamos a Run As -> Run on Server (en rojo) como se aprecia en
la Figura 16
Luego debemos elegir el servidor sobre el cual correremos la aplicaci´n (ver
o
12

13. Figura 16: Run on Server
Figura 17), elegimos el Tomcat que hemos configurado en la etapa de instalaci´n
o
(en verde) y hacemos click en el bot´n Finish (en rojo).
o
Figura 17: Seleccionando Servidor
En la pesta˜a Servers (en azul) podemos ver el estado del servidor como se
n
13

14. muestra en la Figura 18.
Figura 18: Estado del Servidor
Una vez iniciado veremos algunos mensajes de color rojo en la pesta˜a Con-
n
sole (en amarillo) como se aprecia en al Figura 19.
Despu´s de una peque˜a espera se abrir´ una nueva pesta˜a con un browser
e n a n
interno (en verde) como se aprecia en la Figura 20. La URL es la correspondiente
al archivo mxml (en rojo) pero debemos cambiarla a una extensi´n html como
o
se muestra en rojo en la Figura 21. Para luego presionar la tecla intro o enter
carg´ndose la aplicaci´n en el browser como se muestra en la Figura 22.
a o
Finalmente Si hacemos click sobre el bot´n (en blanco de la Figura 22)
o
aparecer´ el mensaje “Hello World” como se aprecia en las Figura 23.
a
14

15. Figura 19: Consola
Figura 20: Browser Interno
15

16. Figura 21: Cambiando a html
Figura 22: Aplicaci´n Cargada
o
16

17. Figura 23: Fin de la Aplicaci´n
o
17