Hello World!!

con Flex, BlazeDS, RemoteObject

y Java
Jonathan A. Galdames Loaiza
11 de mayo de 2008

1
Índice
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 . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.3. Creando “detination” en remoting-config.xml . . . . . . . . . . . 9
2.4. MXML y RemoteObject . . . . . . . . . . . . . . . . . . . . . . . 11
2.5. Corriendo la Aplicación . . . . . . . . . . . . . . . . . . . . . . . 11

2
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-
umento de instalación) y abrimos la perspectiva de flex1 (destacado en rojo)
vamos a la pestaña de Flex Navigator (en amarillo) y haces click con botón
derecho sobre el área 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 (para
este ejemplo: HelloWord) y nos aseguramos que los campos estén seleccionados
como se muestra en la Figura 2. Luego click en el botón Next (en azul)

1.3. Configure J2EE Server

En la siguiente ventana configuramos el servidor J2EE de la siguiente forma
apoyándose en la Figura 3:
1 Si 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 que

hemos configurado en la instalación.
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

1.4. Finish
Tenemos finalmente una última 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
en el botón Finish (en rojo).

Con esto, como vemos en la Figura 5 se crea el árbol de directorios (en azul)
y se abre el mxml principal (en verde).

2 Este archivo se adjunta en el directorio de descargas. Búsquelo donde lo guardó.

4
 Figura 3: Configurando J2EE

Figura 4: Finalizando la Creación 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 en
Properties (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 la
subsección Flex Server haciendo click sobre el ella (en rojo). Después de ingresar
a esta subsección nos dirigimos al label Context root (en verde) y cambiamos lo

6
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

para que Flex funcione en nuestro proyecto.

2. Java
Realizando los pasos de la Sección 1 nos encontramos en condiciones de crear
nuestro código 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 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
Finish (en rojo).

7
 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ı́pico HelloWorld :) para decir en “palabras”
Hola Mundo

8
 Con lo anterior se han creado el árbol de directorios correspondiente (en
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

Vamos a crear el método necesario para enviar información al Objeto Remoto
que recibirá Flex. Para esto escribimos el método como aparece en la Figura 11.
Con esto el método 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 pestaña Package Explorer (en
amarillo) ingresamos al árbol de directorios (en verde) WebContent/WEB-INF/flex/
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).

Ahora es necesario escribir la sección de código que se aprecia en el rectángulo

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)

9
 Figura 11: Creando el método getString

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
 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
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,
por poner algún nombre) que tiene un destination “hola” que es el que acabamos
de definir en el archivo remoting-config.xml con lo cual estamos uniendo el código
Java de la clase “Main” con el código de Flex del archivo MXML.
También agregamos un botón con en el cual sobre su label colocaremos el
String que retorna el método getString cuando se haga click sobre él. Por ello
las sentencias label y click hacen alusión al método getString de la clase Main.

2.5. Corriendo la Aplicación

Una vez realizados todos los pasos anteriores estamos en condiciones de
correr la aplicación.
5 Como aclaré con el archivo remoting-config.xml si no aparece código, has click sobre el

botón Source (en naranja) de la parte superior izquierda de la pestaña.

11
 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-
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

12
 Figura 16: Run on Server

Figura 17), elegimos el Tomcat que hemos configurado en la etapa de instalación

(en verde) y hacemos click en el botón Finish (en rojo).

Figura 17: Seleccionando Servidor

En la pestaña 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 pestaña Con-
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
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
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.

Finalmente Si hacemos click sobre el botón (en blanco de la Figura 22)

aparecerá 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: Aplicación Cargada

16
Figura 23: Fin de la Aplicación

17