Universidad de Cádiz. Adobe Flex SDK y Flex Builder 3

Transcripción

1 Adobe Flex SDK y Flex Builder 3 Álvaro Martínez del Val 23/03/2010

2 Contenido 1. Adobe Flex SDK y Flex Builder Adobe Flex SDK Flex Builder Primera aplicación MXML vs AS Modo de depuración Creando un formulario Creando un componente complejo Creando el modelo en el cliente Visualización de datos (DataGrid) Programando con eventos Arquitectura de una aplicación web con Adobe Flex SDK Cliente Servidor Comunicación cliente servidor (Intefaz Http) BlazeDS Productor Consumidor (Message Service) Objeto Remoto (Remoting Service) Proxy Service Localización de aplicaciones Paso de parámetros http a un swf Creación de un html que envuelva a el swf Paso de variables Otras características de Adobe Flex SDK Comunicación con interfaces externas (javascript) SharedObjects Adobe AIR Creando una aplicación con Adobe AIR Anexo I: Instalación de Adobe Flex SDK Anexo II: Creando y compliando una aplicación AIR con Adobe Flex SDK

3 Tabla de ilustraciones Ilustración 1: Entorno Flex Builder... 4 Ilustración 2: Editor de texto MXML... 5 Ilustración 3: Editor visual de mxml... 5 Ilustración 4: Ventana de creación de proyecto (Flex Builder)... 6 Ilustración 5: Flex Builder, perspectiva de depuración... 7 Ilustración 6: Proyecto FormularioVehiculos... 8 Ilustración 7: Ventana de creación de nuevo componente (Flex Builder)... 9 Ilustración 8: Editor textual MXML Ilustración 9: Editor visual Ilustración 10:Ventana de componentes Ilustración 11: Formulario de inserción de coches Ilustración 12: Ejemplo de formulario Ilustración 13: Formulario + Datagrid (1) Ilustración 14: Formulario + DataGrid (2) Ilustración 15: Ventana de propiedades A-Z de un componente (Flex Builder) Ilustración 16: Ejemplo inserción de datos (1) Ilustración 17: Ejemplo inserción de datos (2) Ilustración 18: Buscador de Yahoo de prueba Ilustración 19: Proyecto Flex con BlazeDS Ilustración 20: Proyecto Flex con BlazeDS Ilustración 21: Ventana de propiedades de compilación (Flex Builder) Ilustración 22: Ventana de propiedades de archivo (Flex Builder) Ilustración 23: Vista de diseño del componente Historico.mxml Ilustración 24: Componente chat1.mxml modificado Ilustración 25: Ventana de creación de proyecto Adobe AIR Ilustración 26: Prueba del editor de texto

4 1. Adobe Flex SDK y Flex Builder 1.1. Adobe Flex SDK Adobe Flex SDK es un framework opensource de Adobe que nos permite crear complejas aplicaciones cliente con ActionScript, además nos permite crear aplicaciones escritorio utilizando Adobe AIR. Es gratuito y funciona en Windows, Linux y Mac. Instalación de Flex SDK: 1.2. Flex Builder Flex Builder es un entorno de desarrollo integrado (IDE) basado en Eclipse y desarrollado por Adobe. Nos permite crear proyectos utilizando Flex SDK, tal como Eclipse hace con otros lenguajes. Las principales ventajas que ofrece son: Reconocimiento dinámico de errores. Detección de librerías. Edición de archivos ActionScript y mxml Interfaz visual para el diseño de componentes, utilizando la extensión MXML de Flex SDK, que consiste en un lenguaje XML en el que definir un conjunto de componentes Flex, permitiendo añadir código ActionScript. El principal problema es que Flex Builder es una herramienta de pago, aunque es posible conseguir una licencia para educación en la página de Adobe, proporcionando una identificación que nos acredite como estudiantes o profesores. En la ilustración inferior se puede ver el entorno Flex Builder: Ilustración 1: Entorno Flex Builder Editor de texto para archivos MXML: 4

5 Ilustración 2: Editor de texto MXML Vista de diseño (visual) para el archivo MXML: Ilustración 3: Editor visual de mxml 2. Primera aplicación Para crear un nuevo proyecto hacemos clic en File/New/Flex Project Se nos abrirá una ventana en la que introducir el nombre del proyecto y en la que podremos elegir el tipo: 5

6 Web application (Funciona con Flash Player) Desktop application (Funciona con Adobe Air) Para empezar crearemos una aplicación Web, por defecto. Introducimos un nombre para el proyecto, por ejemplo Prueba, y pusamos Finish : Ilustración 4: Ventana de creación de proyecto (Flex Builder) 3. MXML vs AS En un proyecto Flex podemos añadir clases ActionScript o componentes MXML. Las clases ActionScript son como cualquier clase de un lenguaje orientado a objetos, permiten herencia, definir interfaces, etc. Las clases ActionScript son principalmente utilizadas para definir el modelo de la aplicación, si bien es posible utilizar ActionScript para crear directamente vistas, no es lo más indicado, ya que las clases ActionScript no pueden ser visualizadas con el editor gráfico de Flex Builder. Por otro lado, los componentes MXML son ficheros XML que siguen una determinada sintaxis basada en etiquetas con los nombres de los elementos de Flex SDK, es algo parecido a un fichero html pero mucho más potente y en el que se puede incorporar código ActionScript. La principal ventaja de los ficheros MXML es que pueden ser visualizados con el editor gráfico de Flex Builder, pudiendo crear interfaces fácilmente. Los componentes MXML son utilizados para definir la vista de la aplicación. Más adelante veremos ejemplos de uso de unos y otros. 6

7 4. Modo de depuración Flex Builder tiene, al igual que Eclipse, perspectiva de depuración, a la que se accede a través del botón Open perspective en la parte superior izquierda: Ilustración 5: Flex Builder, perspectiva de depuración El modo de depuración nos permite añadir breakpoints al código y añadir el comando trace() a nuestro código ActionScript, que imprime cualquier cadena de caracteres que le pasemos como parámetro, y la muestra por la consola de depuración. 5. Creando un formulario Vamos a crear un primer proyecto en el que construiremos un formulario simple utilizando MXML. Primero creamos un proyecto con Flex Builder. Pulsamos File\New\Flex Project y le damos el nombre FormularioVehiculos. Pulsamos Finish : 7

8 Ilustración 6: Proyecto FormularioVehiculos Vamos a añadir un componente MXML al proyecto, por lo que pulsamos File\New\MXML Component: 8

9 Ilustración 7: Ventana de creación de nuevo componente (Flex Builder) Si nos fijamos, en la parte inferior de la ventana que se abre tenemos tres atributos: Filename Nombre del componente Base don Es el elemento gráfico en el que estará basado el componente, por defecto es Canvas, que representa un fondo vacío en el que se pueden añadir libremente elementos, como veremos a continuación. Alternativas similares a Canvas son HBox, que es parecido pero limitando la colocación de los elementos de forma horizontal; VBox, limita la colocación de los objetos pero de forma vertical, o Panel, que es como Canvas pero con una barra de título, etc. Width y Height Anchura y altura iniciales. Como nombre introducimos FormularioCoche, y dejamos las demás opciones por defecto. Se nos abrirá directamente el editor textual del MXML: 9

10 Ilustración 8: Editor textual MXML De momento no nos interesa, ya que vamos a construir un formulario simple, por lo que podemos utilizar directamente el editor visual; pulsamos la pestaña Design en la parte superior del editor: Ilustración 9: Editor visual Podemos ver el elemento Canvas en el centro, vacío de momento, y a la derecha la ventana de propiedades; si no se ve debemos hacer clic en Windows\Flex Properties. Vamos a añadir los elementos necesarios para construir un formulario que nos permita insertar coches, para ello debemos tener abierta la pestaña de componentes Components, si no la vemos debemos hacer clic en Window\Components, y aparecerá algo como lo mostrado en la imagen inferior: 10

11 Ilustración 10:Ventana de componentes Los componentes que nos interesan son TextInput, que es como su nombre indica un campo de texto y el componente Label, que es una etiqueta de texto. Añadimos los elementos hasta tener algo parecido a lo mostrado en la siguiente imagen: 11

12 Ilustración 11: Formulario de inserción de coches El código es el siguiente: <mx:script> <![CDATA[ import modelo.coche; private var coche:coche; public function getcoche():coche return new Coche(marca.text, modelo.text, combustible.text, parseint(cilindrada.text), parseint(potencia.text), parseint(puertas.int)); ]]> </mx:script> <?xml version="1.0" encoding="utf-8"?> <mx:canvas xmlns:mx=" width="400" height="316"> <mx:label x="82.5" y="19" text="formulario de inserción de coches:" fontweight="bold" fontsize="12"/> <mx:label x="100" y="62" text="marca:"/> <mx:textinput x="150" y="60"/> <mx:label x="92" y="88" text="modelo:"/> <mx:textinput x="150" y="86"/> <mx:label x="62" y="114" text="combustible:"/> <mx:textinput x="150" y="112"/> <mx:label x="74" y="142" text="nº Puertas:"/> 12

13 <mx:textinput x="150" y="140"/> <mx:label x="76" y="168" text="cilindrada:"/> <mx:textinput x="150" y="166"/> <mx:label x="85" y="194" text="potencia:"/> <mx:textinput x="150" y="192"/> </mx:canvas> Ya tenemos nuestro primer componente, pero de poco nos sirve ya que ni siquiera está enlazado con el archivo principal de la aplicación, que se debería llamar FormularioVehiculos.mxml. 6. Creando un componente complejo Ahora vamos a abrir el archivo Main de nuestro proyecto, FormularioVehiculos.mxml y nos colocamos en la vista de diseño (editor visual): Vamos a añadir un componente denominado TabNavigator, que se encuentra en la carpeta Navigators de la ventana Components y lo vamos a colocar en la posición (0,0). Además vamos a asignarle los valores width=100% y height=100% : Le damos el nombre Inserción de coches en el atributo Label de la ventana de propiedades, deberíamos tener algo como esto: 13

14 Ahora vamos a colocarle el formulario que antes hemos creado, nos vamos a la ventana Components y abrimos la carpeta Custom, ahí debe aparecer FormularioCoches ; lo arrastramos dentro: 14

15 Ilustración 12: Ejemplo de formulario Ahora si pulsamos Run en la barra de herramientas resultado. 15 ejecutar podremos ver el Como hemos añadido un componente TabNavigator vamos a aprovechar y a crear una nueva pestaña muy parecida pero en este caso un formulario para motos que llamaremos FormularioMoto, el código es el siguiente: <?xml version="1.0" encoding="utf-8"?> <mx:canvas xmlns:mx=" width="400" height="316"> <mx:label x="100" y="62" text="marca:"/> <mx:textinput x="150" y="60"/> <mx:label x="92" y="88" text="modelo:"/> <mx:textinput x="150" y="86"/> <mx:label x="62" y="114" text="combustible:"/> <mx:textinput x="150" y="112"/> <mx:label x="50" y="142" text="tiene marchas:"/> <mx:label x="76" y="168" text="cilindrada:"/> <mx:textinput x="150" y="166"/> <mx:label x="85" y="194" text="potencia:"/> <mx:textinput x="150" y="192"/> <mx:label x="82.5" y="19" text="formulario de inserción de motos:" fontweight="bold" fontsize="12"/> <mx:combobox x="150" y="140" cornerradius="0"> <mx:array> <mx:string>sí</mx:string>

16 <mx:string>no</mx:string> </mx:array> </mx:combobox> </mx:canvas> Ahora añadimos una nueva pestaña a FormularioVehiculos y añadiremos nuestro nuevo componente: Si volvemos a ejecutar podemos ver que tenemos un pequeño navegador que nos permite viajar entre nuestros dos componentes: El problema es que ahora mismo de poco nos sirve nuestra aplicación. 7. Creando el modelo en el cliente Vamos a crear el modelo de nuestra aplicación, en este caso tenemos dos formularios, uno para la inserción de coches y otro para la inserción de motos. Primero creamos una nueva carpeta denominada modelo dentro de la carpeta src del proyecto. Hacemos clic en File\New\ActionScript class y nombramos a nuestra nueva clase Vehiculo. El código de Vehiculo será así: package modelo public class Vehiculo extends Object public var marca:string; public var model:string; 16

17 public var combustible:string; public var cilindrada:int; public var potencia:int; public function Vehiculo(marca:String, model:string, combustible:string, cilindrada:int, potencia:int) this.marca = marca; this.model = model; this.combustible = combustible; this.cilindrada = cilindrada; this.potencia = potencia; public function getmarca():string return this.marca; public function setmarca(marca:string):void this.marca = marca; public function getmodel():string return this.model; public function setmodel(model:string):void this.model = model; public function getcombustible():string return this.combustible; public function setcombustible(combustible:string):void this.combustible = combustible; public function getcilindrada():int return this.cilindrada; public function setcilindrada(cilindrada:int):void this.cilindrada = cilindrada; public function getpotencia():int return this.potencia; public function setpotencia(potencia:int):void 17

18 this.potencia = potencia; Ahora vamos a crear una nueva clase ActionScript Coche que herede de vehículo y que añada el atributo npuertas de tipo int y sus correspondientes get y set: package modelo public class Coche extends Vehiculo public var puertas:int; public function Coche(marca:String, model:string, combustible:string, cilindrada:int, potencia:int, puertas:int) super(marca, model, combustible, cilindrada, potencia); this.puertas = puertas; public function getpuertas():int return this.puertas; public function setpuertas(puertas:int):void this.puertas = puertas; Finalmente añadimos una clase ActionScript Moto que herede también de vehículo y que añada el atributo tienemarchas de tipo Boolean y sus correspondientes get y set: package modelo public class Moto extends Vehiculo public var marchas:boolean = false; public function Moto(marca:String, model:string, combustible:string, cilindrada:int, potencia:int, marchas:boolean) super(marca, model, combustible, cilindrada, potencia); this.marchas = marchas; public function getmarchas():boolean return this.marchas; public function setpuertas(marchas:boolean):void this.marchas = marchas; 18

19 Como se puede suponer a priori, las clases del modelo se utilizarán para el manejo de los datos. 8. Visualización de datos (DataGrid) Hasta ahora hemos construido dos formularios, uno para coches y otro para motos, el modelo correspondiente y un navegador para viajar entre los dos formularios, pero nuestra aplicación todavía no tiene ninguna utilidad. Para dotarle de utilidad vamos a añadir en FormularioVehiculos a la derecha de cada formulario un DataGrid, que es un componente que muestra un conjunto de datos formateado en forma de tabla. El componente DataGrid se encuentra en la carpeta Controls de la ventana Components. Por defecto el componente DataGrid se nos añadirá en el código de esta forma: <mx:datagrid> <mx:columns> <mx:datagridcolumn headertext="column 1" datafield="col1"/> <mx:datagridcolumn headertext="column 2" datafield="col2"/> <mx:datagridcolumn headertext="column 3" datafield="col3"/> </mx:columns> </mx:datagrid> Pero eso no nos interesa, así que lo dejamos vacío: <mx:datagrid> </mx:datagrid> Establecemos sus propiedades de altura y anchura al 100% y les damos a cada uno un nombre, en el atributo ID de la ventana de propiedades; coches y motos respectivamente. Deberemos tener algo como esto: 19

20 Ilustración 13: Formulario + Datagrid (1) Ilustración 14: Formulario + DataGrid (2) 20

21 El código de FormularioVehiculos quedaría como se muestra a continuación: <?xml version="1.0" encoding="utf-8"?> <mx:application xmlns:mx=" layout="absolute" xmlns:ns1="*"> <mx:tabnavigator x="0" y="0" width="100%" height="100%" id="navegador"> <mx:canvas label="inserción de coches" width="100%" height="100%"> <ns1:formulariocoche id="formulariocoche"> </ns1:formulariocoche> <mx:datagrid id="coches" x="408" y="0"> </mx:datagrid> </mx:canvas> <mx:canvas label="inserción de motos" width="100%" height="100%"> <ns1:formulariomoto id="formulariomoto"> </ns1:formulariomoto> <mx:datagrid x="408" y="0"> </mx:datagrid> </mx:canvas> </mx:tabnavigator> </mx:application> Ahora vamos a editar nuestros componentes FormularioCoche y FormularioMoto de forma que cada vez que introduzcamos los datos creemos un objeto de tipo Coche y un objeto de tipo Moto respectivamente. Abrimos el componente FormularioCoche y a cada uno de los campos a rellenar le damos el mismo ID que los atributos de la clase coche: <?xml version="1.0" encoding="utf-8"?> <mx:canvas xmlns:mx=" width="400" height="316"> <mx:label x="100" y="62" text="marca:"/> <mx:textinput x="150" y="60" id="marca"/> <mx:label x="92" y="88" text="modelo:"/> <mx:textinput x="150" y="86" id="model"/> <mx:label x="62" y="114" text="combustible:"/> <mx:textinput x="150" y="112" id="combustible"/> <mx:label x="74" y="142" text="nº Puertas:"/> <mx:textinput x="150" y="140" id="puertas"/> <mx:label x="76" y="168" text="cilindrada:"/> <mx:textinput x="150" y="166" id="cilindrada"/> <mx:label x="85" y="194" text="potencia:"/> <mx:textinput x="150" y="192" id="potencia"/> <mx:label x="82.5" y="19" text="formulario de inserción de coches:" fontweight="bold" fontsize="12"/> </mx:canvas> Hacemos lo mismo con el componente FormularioMoto : <?xml version="1.0" encoding="utf-8"?> <mx:canvas xmlns:mx=" width="400" height="316"> <mx:label x="100" y="62" text="marca:"/> <mx:textinput x="150" y="60" id="marca"/> <mx:label x="92" y="88" text="modelo:"/> <mx:textinput x="150" y="86" id="model"/> <mx:label x="62" y="114" text="combustible:"/> 21

22 <mx:textinput x="150" y="112" id="combustible"/> <mx:label x="50" y="142" text="tiene marchas:"/> <mx:label x="76" y="168" text="cilindrada:"/> <mx:textinput x="150" y="166" id="cilindrada"/> <mx:label x="85" y="194" text="potencia:"/> <mx:textinput x="150" y="192" id="potencia"/> <mx:label x="82.5" y="19" text="formulario de inserción de motos:" fontweight="bold" fontsize="12"/> <mx:combobox x="150" y="140" cornerradius="0" id="marchas"> <mx:array> <mx:string>sí</mx:string> <mx:string>no</mx:string> </mx:array> </mx:combobox> </mx:canvas> Ahora vamos a crear en cada uno de los formularios un método que nos devuelva un objeto Coche o Moto respectivamente con los datos de cada uno de los campos. Para añadir código ActionScript a un componente MXML debemos escribir lo siguiente y lo colocamos justo encima de la última etiqueta de cierre del MXML: <mx:script> <![CDATA[ ]]> </mx:script> Dentro podemos añadir código ActionScript. El método que devuelve un coche sería así: <mx:script> <![CDATA[ import modelo.coche; public function getcoche():coche return new Coche(marca.text, model.text, combustible.text, parseint(cilindrada.text), parseint(potencia.text), parseint(puertas.int)); ]]> </mx:script> El método que devuelve una moto sería muy similar: <mx:script> <![CDATA[ import modelo.moto; public function getmoto():moto var marchasaux:boolean = false; if(marchas.selecteditem == "Sí") marchasaux = true; return new Moto(marca.text, model.text, combustible.text, parseint(cilindrada.text), parseint(potencia.text), marchasaux); ]]> </mx:script> 22

23 Para evitar introducir valores no numéricos en los campos numéricos introducimos \0-9\ en el atributo restrict de potencia, cilindrada y puertas: Ilustración 15: Ventana de propiedades A-Z de un componente (Flex Builder) 9. Programando con eventos Ya hemos añadido la gestión con el modelo, pero nos falta la inserción y visualización de datos en el cliente. Para poder insertar los datos vamos a añadir un botón de inserción justo debajo de los formularios de coche y moto, pero no en sus respectivos componentes, sino en FormularioVehiculo : 23

24 Añadiremos un evento clic a cada uno de los botones, de forma que cada vez que pulsemos uno se devuelva un objeto Coche o un Objeto Moto, con los datos del formulario, además añadimos un identificador al componente FormularioCoche y otro a FormularioMoto dentro de FormularioVehiculo, y a cada uno de los DataGrid añadidos: Abrimos el editor de texto de FormularioVehiculo y los cambios a realizar son: <ns1:formulariocoche id="formulariocoche"> </ns1:formulariocoche> <ns1:formulariomoto id="formulariomoto"> </ns1:formulariomoto> <mx:datagrid id="coches" x="408" y="0"> </mx:datagrid> <mx:datagrid x="408" y="0" id="motos"> </mx:datagrid> <mx:button label="insertar" click="insertarcoche()"/> <mx:button label="insertar" click="insertarmoto()"/> El código nos debe quedar así: <?xml version="1.0" encoding="utf-8"?> <mx:application xmlns:mx=" layout="absolute" xmlns:ns1="*"> <mx:tabnavigator x="0" y="0" width="100%" height="100%" id="navegador"> <mx:canvas label="inserción de coches" width="100%" height="100%"> <ns1:formulariocoche id="formulariocoche"> </ns1:formulariocoche> 24

25 <mx:button label="insertar" click="insertarcoche()" x="182" y="233"/> <mx:datagrid id="coches" x="408" y="0"> </mx:datagrid> </mx:canvas> <mx:canvas label="inserción de motos" width="100%" height="100%"> <ns1:formulariomoto id="formulariomoto"> </ns1:formulariomoto> <mx:button label="insertar" click="insertarmoto()" x="180" y="232"/> <mx:datagrid x="408" y="0" id="motos"> </mx:datagrid> </mx:canvas> </mx:tabnavigator> </mx:application> Ahora añadimos la correspondiente etiqueta: <mx:script> <![CDATA[ ]]> </mx:script> Justo encima de </mx:application> y creamos los métodos insertarmoto() e insertarcoche(), de forma que el código nos quede así: <mx:script> <![CDATA[ import mx.collections.arraycollection; import modelo.moto; import modelo.coche; private var arraycoches:array = new Array(); private var arraymotos:array = new Array(); private function insertarcoche():void // Obtenemos una variable coche var coche:coche = this.formulariocoche.getcoche(); // La insertamos en el DataGrid de coches arraycoches.push(coche); coches.dataprovider = arraycoches; ]]> </mx:script> private function insertarmoto():void // Obtenemos una variable moto var moto:moto = this.formulariomoto.getmoto(); // La insertamos en el DataGrid de motos arraymotos.push(moto); motos.dataprovider = arraymotos; Debido a que las clases Coche y Moto heredan de la clase Objeto, sus atributos quedan directamente parseados en el DataGrid correspondiente: 25

26 Ilustración 16: Ejemplo inserción de datos (1) Ilustración 17: Ejemplo inserción de datos (2) Ya tenemos una aplicación cliente, con un modelo asignado y gestión de datos, pero no tenemos conexión con un servidor donde guardar los datos de forma duradera. Como veremos a continuación existen varias formas de crear una aplicación cliente servidor en Flex. 10. Arquitectura de una aplicación web con Adobe Flex SDK La arquitectura de cualquier aplicación web implementada con Adobe Flex SDK es a priori como la de cualquier aplicación web, tenemos un cliente (implementado en shockwave/flash) y un servidor implementado a priori en cualquier lenguaje (esto dependerá también de la tecnología que queramos usar). La principal diferencia es que gracias a Flex SDK y a su tecnología similar a AJAX, podemos gestionar los datos recibidos desde el servidor sin necesidad de estar cambiando de página, incluso podemos definir una compleja estructura basada en objetos con la que gestionar nuestra información y cambiar el estado de nuestra interfaz de forma dinámica en el cliente sin necesidad de invocar a una nueva vista Cliente El cliente estará programado mediante Flex SDK, obteniendo como resultado un objeto swf (shockwave\flash), que actuará como única interfaz, sin necesidad de estar construyendo un conjunto de vistas diferente. El cliente podrá hacer llamadas asíncronas al servidor, con las que actualizar sus datos, estas llamadas se podrán realizar de varias formas, como veremos a continuación. 26

27 10.2. Servidor El servidor se construirá como en cualquier otra aplicación web, excluyendo de su programación cualquier clase de vista, y por lo tanto cualquier redirección a una vista. La programación del servidor se limitará a la recepción, emisión y gestión de datos, ya que la base de datos que utilicemos sólo podrá ser manipulada de esta forma Comunicación cliente servidor (Intefaz Http) La forma más común de acceso al servidor es mediante el uso de la interfaz Http que Flex SDK nos ofrece mediante su clase HttpService. HttpService nos permite realizar llamadas http GET, POST, PUT y DELETE, establecer tanto la cabecera como el cuerpo de la llamada y recibir los datos de respuesta de forma asíncrona. Como ejemplo vamos a construir una pequeña aplicación que consistirá en un sencillo buscador web basado en la API de yahoo Primer, paso, crear la interfaz gráfica: Vamos a crear una sencilla interfaz gráfica con la que poder introducir los parámetros de la búsqueda, la interfaz tendrá los siguientes elementos: 1. Input de texto para introducir las palabras de búsqueda. 2. Lista en forma de combobox con la que seleccionar el número de resultados. 3. Lista en forma de combobox con la que seleccionar el idioma de los resultados. 4. Lista en forma de combobox con la que seleccionar el formato de los resultados. 5. Botón para confirmar la búsqueda. 6. Un elemento DataGrid que se rellenará con los resultados obtenidos. El resultado deberá ser algo como esto: Ilustración 18: Buscador de Yahoo de prueba Una vez que tenemos la interfaz gráfica implementada, tenemos que realizar la llamada al servidor, que en este caso será el servidor de Yahoo. Para ello utilizaremos la interfaz http de Flex SDK, HttpService. Primero, añadimos un evento click al botón de búsqueda, de forma que al pulsar el botón realicemos una llamada: <mx:button label="buscar" click="buscar()"/> 27

28 Ahora implementamos el método buscar: private function buscar():void var servicio:httpservice = new HTTPService(); servicio.url = " Demo"; servicio.method = "GET"; servicio.request = query:palabrasclave.text, laguage:languagecb.text, results:nresultadoscb.selecteditem, format:formatcb.selecteditem ; servicio.resultformat = "xml"; // Añadimos los manejadores para procesar la respuesta servicio.addeventlistener(resultevent.result, manejadorobtener); servicio.addeventlistener(faultevent.fault, manejadorerrorobtener); // Enviamos servicio.send(); En el método buscar estamos realizando dos cosas: 1. Creando un objeto HttpService y asignándole los parámetros de llamada: URL Method GET ResultFormat text/xml 2. Añadiendo dos manejadores, ya que la respuesta es asíncrono y deberemos crear manejadores que estén escuchando hasta que recibamos respuesta: Uno para el resultado: servicio.addeventlistener(resultevent.result, manejadorobtener) Otro para el caso de error: servicio.addeventlistener(faultevent.fault, manejadorerrorobtener) El siguiente paso es implementar los manejadores: El manejador de error es muy sencillo, sólo sirve para indicarnos que se ha producido un error en la llamada: private function manejadorerrorobtener(event:faultevent):void Alert.show("Error al obtener el listado de videos"); El manejador del resultado es algo más complejo, ya que debe recoger la respuesta, en formato XML y procesarla de forma que se muestren los resultados correctamente: private function manejadorobtener(event:resultevent):void var response:string = event.result.tostring(); var xmldoc:xmldocument; try // Comprobamos si el resultado es un XML xmldoc = new XMLDocument(response); 28

29 // Procesamos el XML var decoder:simplexmldecoder = new SimpleXMLDecoder(true); var resultobj:object = decoder.decodexml(xmldoc); resultados.dataprovider = resultobj.resultset.result; catch(error:error) Alert.show("Error en el formato de la respuesta"); Lo que estamos haciendo con este método es capturar la respuesta, que viene en el objeto event de entrada y procesarla como un XML. Por defecto, en ActionScript, cualquier objeto cuyo contenido es un XML es tratado como un Array, en este caso la estructura es: <ResultSet> <Result> </Result> <Result> </Result> </ResultSet> Es decir, tenemos un nodo ResultSet con un conjunto de nodos hijos Result, por lo que si accedemos a resultobj.resultset, lo que nos devuelve es un array de un solo elemento, el nodo ResultSet, y si accedemos a resultobj.resultset.result, lo que obtenemos es un array con tantos elementos como nodos Result existan. De hecho, podríamos recorrerlo de esta forma: for(var i:int = 0; i < resultobj.resultset.result.length; i++) Alert.show(resultObj.ResultSet.Result[i]); El ejemplo de buscador es un caso muy sencillo, pero puede ser extendido a cualquier modelo, pudiendo crear cualquier aplicación web basada en la comunicación entre el cliente y el servidor utilizando objetos HttpService. El principal inconveniente de utilizar HttpService es que el servidor destino debe contener en su directorio raíz un archivo crossdomain.xml como el siguiente: <?xml version="1.0"?> <!DOCTYPE cross-domain-policy SYSTEM " <cross-domain-policy> <site-control permitted-cross-domain-policies="master-only"/> <allow-access-from domain="*" secure="false"/> <allow-http-request-headers-from domain="*" headers="soapaction"/> </cross-domain-policy> Esto es necesarios para que nuestro objeto shockwave/flash pueda recibir las respuestas del servidor y viceversa. Otra funcionalidad que puede ser necesaria en nuestra aplicación cliente-servidor, es la de descarga y subida de archivos, esto se consigue fácilmente mediante la combinación de las clases URLRequest y FileReference, la única particularidad es que el objeto FileReference utilizado debe ser una variable de la clase. 29

30 10.4. BlazeDS BlazeDS es una tecnología opensource desarrollada por Adobe y basada en servidor Java, de hecho utilizada tomcat como base. BlazeDS permite la comunicación de aplicaciones Web y de Escritorio (Adobe AIR) creadas con Flex con un servidor java de cuatro formas distintas: Paso de mensajes (Message Service) Objeto Remoto (Remoting Service) Proxy Service BlazeDS puede descargarse desde la página: Su instalación es como la de cualquier tomcat, sólo hace falta extraerlo en un directorio destino Productor Consumidor (Message Service) La arquitectura productor consumidor se basa en un productor, que envía mensajes (pull) y un consumidor que los recibe (push). Esta estructura es la utilizada para aplicaciones como chats, en las que un consumidor, el servidor, recibe los mensajes de un conjunto de clientes, que son los productores y que a su vez pueden acceder a los mensajes publicados por sus compañeros. Si bien esta estructura puede tener otros usos, siendo el ejemplo más sencillo de modelo productor consumidor un chat, vamos a implementar uno utilizando BlazeDS y Flex Builder. Primero crearemos la parte del servidor: Si accedemos al directorio de BlazeDS, podemos observar que dentro hay una carpeta tomcat. La estructura del tomcat se ha respetado y dentro podremos encontrar la carpeta webapps donde se encuentran nuestras aplicaciones web. En este caso podemos encontrar una carpeta con aplicaciones de ejemplo samples y una carpeta denominada blazeds en la que se encuentra una estructura genérica que define servicios para paso de mensajes, comunicación con objetos remotos y por proxy. En este caso vamos a crear una nueva carpeta dentro de webapps que llamaremos chat. Dentro de esa carpeta copiaremos el contenido del directorio blazeds. Si accedemos a WEB-INF/flex podemos ver cuatro xmls: messaging-config.xml para la definición del servicio de mensajes proxy-config.xml para la definición del servicio de proxy remoting-config.xml para la definición del servicio de objetos remotos services-config.xml para la definición global de servicios En nuestro caso, como queremos crear un servicio de mensajes, ya que vamos a implementar una estructura de comunicación push/pull, deberemos editar los ficheros messagingconfig.xml y services-config.xml. En messaging-config.xml añadimos lo siguiente: <?xml version="1.0" encoding="utf-8"?> <service id="message-service" class="flex.messaging.services.messageservice"> <adapters> <adapter-definition id="actionscript" class="flex.messaging.services.messaging.adapters.actionscriptadapter" default="true" /> 30

31 <!-- <adapter-definition id="jms" class="flex.messaging.services.messaging.adapters.jmsadapter"/> --> </adapters> <default-channels> <channel ref="my-polling-amf"/> </default-channels> <destination id="chat"/> </service> Añadimos la línea <destination id="chat"/> justo encima de la etiqueta </service>. Esta línea indica que el servicio destino se va a denominar chat. En el cliente se deberá especificar el id de destino. El canal de comunicación viene definido en el archivo services-config.xml, en este caso, utilizaremos el definido por defecto. <channel-definition id="my-amf" class="mx.messaging.channels.amfchannel"> <endpoint url=" mf" class="flex.messaging.endpoints.amfendpoint"/> </channel-definition> Ya tenemos la parte del servidor implementada, no necesitamos nada más, ya que de ello se ocuparán las librerías definidas en BlazeDS. Ahora debemos crear la parte del cliente: Para ello creamos un nuevo proyecto con Flex Builder, presionamos File/New/Flex Project: 31

32 Ilustración 19: Proyecto Flex con BlazeDS En Application server type marcamos J2EE y seleccionamos Use remote object Access service y LiveCycle Data Services. Pulsamos Next. Ahora es cuando necesitamos introducir los datos del servidor: 32

33 Ilustración 20: Proyecto Flex con BlazeDS En Root folder introducimos el directorio de blazeds dentro de la carpeta webapps, quedaría BlazeDS_HOME/tomcat/webapps/blazeds. En Roo URL introducimos la URL destino, en este caso, como BlazeDS viene configurado en el puerto 8400, la URL será: Finalmente en Context root introducimos el directorio raiz de la aplicación web, en este caso /blazeds. Pulsamos Finish para terminar. Ahora debemos editar el mxml principal de nuestra aplicación, en este caso chat.mxml. En el que añadiremos lo siguiente: Primero el productor y el consumidor de mensajes: <mx:consumer id="consumer" destination="chat" message="messagehandler(event.message)"/> <mx:producer id="producer" destination="chat"/> En el atributo destination, debemos añadir el destino que anteriormente hemos especificado, en este caso chat. 33

34 Añadimos los controles que nos permitirán crear la interfaz gráfica del chat. Un panel de texto donde visualizar los mensajes enviados. Un input de texto donde escribir nuestros mensajes y un botón para el envío. <mx:panel title="chat" width="100%" height="100%"> <mx:textarea id="log" width="100%" height="100%"/> <mx:controlbar> <mx:textinput id="msg" width="100%" enter="send()"/> <mx:button label="send B" click="send()"/> </mx:controlbar> </mx:panel> En el botón añadimos al evento click el método send() que ahora definiremos, para ello añadiremos al mxml código ActionScript: <mx:script> <![CDATA[ import mx.messaging.messages.asyncmessage; import mx.messaging.messages.imessage; ]]> </mx:script> private function send():void var message:imessage = new AsyncMessage(); message.body.chatmessage = msg.text; producer.send(message); msg.text = ""; private function messagehandler(message:imessage):void log.text += message.body.chatmessage + "\n"; El método send enviará un mensaje asíncrono al servidor (AsyncMessage), por lo que deberemos añadir un manejador para capturar la respuesta (messagehandler) y mostrarla en el área de texto, ya que al ser asíncrono puede llegar en cualquier momento y se la asignaremos al consumidor. El último añadido será la siguiente sentencia creationcomplete="consumer.subscribe(), que deberemos añadir a la etiqueta mx:application, y que suscribe inmediatamente la aplicación como consumidora de datos en el momento en que se crea. Finalmente tendremos que tener un mxml como el que se muestra a continuación: <?xml version="1.0" encoding="utf-8"?> <mx:application xmlns:mx=" layout="absolute" creationcomplete="consumer.subscribe()"> <mx:script> <![CDATA[ import mx.messaging.messages.asyncmessage; import mx.messaging.messages.imessage; ]]> private function send():void var message:imessage = new AsyncMessage(); message.body.chatmessage = msg.text; producer.send(message); msg.text = ""; private function messagehandler(message:imessage):void log.text += message.body.chatmessage + "\n"; 34

35 </mx:script> <mx:consumer id="consumer" destination="chat" message="messagehandler(event.message)"/> <mx:producer id="producer" destination="chat"/> <mx:panel title="chat" width="100%" height="100%"> <mx:textarea id="log" width="100%" height="100%"/> <mx:controlbar> <mx:textinput id="msg" width="100%" enter="send()"/> <mx:button label="send B" click="send()"/> </mx:controlbar> </mx:panel> </mx:application> Ya sólo hace falta probar el chat, para lo que presionamos el botón de ejecución de Flex Builder. Además debemos tener arrancado el servidor tomcat. Para añadir funcionalidad en la parte del servidor, podemos crear una clase java que se subscriba al canal, de forma que podamos modificar los datos en el servidor Objeto Remoto (Remoting Service) Mediante el servicio de objeto remoto (Remoting Service) podemos invocar desde nuestro cliente Flex a objetos java en el servidor, pudiendo llamar a métodos del objeto y pudiendo obtener un tipo primitivo, un array, un objeto, una colección de objetos, etc. Para ello debemos definir una intefaz común del objeto tanto en el cliente como en el servidor. Vamos a observar el ejemplo de BlazeDS en BlazeDS_HOME/tomcat/webapss/samples/inventory en el que desde el cliente invocamos a un objeto Producto, que contiene una serie de atributos (en este caso estáticos, aunque el objeto Producto podría acceder a una base de datos). Primero analizaremos la parte del servidor: Dentro del directorio inventory, abrimos la carpeta WEB-INF/flex y observamos el archivo remoting-config.xml, la parte importante es la siguiente: <destination id="product"> <properties> <source>productservice</source> </properties> </destination> En el XML se ha añadido un destino, al que referenciaremos desde Flex, llamado product y añadimos una propiedad source llamada ProductService, que es una clase java con un conjunto de métodos que utilizan la clase Product. El canal utilizado en este caso está definido en services-config.xml, se utilizará el canal creado por defecto para comunicación de objetos remotos: <channel-definition id="my-amf" class="mx.messaging.channels.amfchannel"> <endpoint url=" mf" class="flex.messaging.endpoints.amfendpoint"/> </channel-definition> Una vez configurado el servidor vamos a analizar la implementación del mismo, tenemos dos clases Product.java y ProductService.java dentro de la carpeta BlazeDS_HOME\tomcat\webapps\samples\WEB-INF\src\flex\samples\product. 35

36 Si abrimos Product.java podemos observar que la clase implementa la interfaz Serializable, esto es necesario debido a que Product.java va a ser un objeto que se va a enviar entre el cliente y el servidor, a través del servicio de objeto remoto. Por otro lado si abrimos ProductService.java podemos ver que contiene un conjunto de métodos públicos, estos métodos podrán ser invocados desde el cliente Flex. Los métodos podrán devolver tipos primitivos, arrays, cadenas de texto o incluso objetos Product y colecciones de objetos Product, para lo que tendremos que definir una clase Product.as equivalente en el servidor. Finalmente necesitamos dos clases auxiliares para la conexión con la base de datos de ejemplo de BlazeDS que no vamos a analizar y que se encuentran en BlazeDS_HOME\tomcat\webapps\inventory\WEB-INF\classes\flex\samples\ : - ConnectionHelper.java - DAOException.java Con todo esto ya está definida por completo la parte del servidor. Ahora vamos a analizar la parte del cliente: Para poder analizar mejor la parte del cliente vamos a crar un proyecto llamado inventory de la siguiente forma. En la pantalla de creación de proyecto, en Application server type marcamos J2EE y seleccionamos Use remote object Access service y LiveCycle Data Services. Pulsamos Next. Ahora es cuando necesitamos introducir los datos del servidor. Introducimos los mismos datos que en la imagen mostrada a continuación, de acuerdo a la configuración de nuestro equipo: 36

37 El código del cliente se encuentra en BlazeDS_HOME\tomcat\webapps\samplesWEB-INF\flexsrc\flex-src.zip. Podemos extraer su contenido en el worspace de Flex Builder, o podemos extraerlo y copiar el contenido de la carpeta inventory dentro de flex-src.zip en nuestro proyecto Flex. En inventory tenemos el siguiente contenido: Directorio assets Contiene un conjunto de imágenes a utilizar en el cliente styles.css Es una hoja de estilo utilizada en el cliente Product.as Es la clase equivalente a Product.java y que utilizaremos para manejar los objetos Product que recibamos del servidor, así como para enviar objetos Product al servidor. Si observamos el código de product podemos ver lo siguiente: package [Bindable] [RemoteClass(alias="flex.samples.product.Product")] public class Product public function Product() 37

38 public var productid:int; public var name:string; public var category:string; public var price:number = 0; public var description:string; public var qtyinstock:int = 0; Hemos añadido una etiqueta [Bindable], lo que conseguimos con esto es que si el objeto Product cambia, todos los demás objetos que lo tengan asociados, estarán escuchando para actualizar también los datos. También se ha añadido una etiqueta [RemoteClass(alias="flex.samples.product.Product")], lo que se consigue con esto es asociar la clase Product.as a la clase Product.java. Lo único que necesitamos es que en ambas clases exista un conjunto de atributos equivalente. Inventory.mxml Es el mxml de la aplicación ProductForm.mxml Es un formulario con un conjunto de campos que permiten visualizar un producto. Vamos a analizar el código de la clase ProductForm.mxml: Vemos que la clase tiene asociada una variable Product con una etiqueta [Bindable] [Bindable] public var product:product; Con esto conseguimos que cuando se realice un cambio sobre la variable Product, se actualice inmediatamente en ProductForm.mxml. private function save():void if (namevalidator.validate().type == ValidationResultEvent.INVALID) return; product.name = productname.text; product.category = category.text; product.price = Number(price.text); product.qtyinstock = parseint(qtyinstock.text); product.description = description.text; if (product.productid > 0) srv.update(product); else srv.create(product); private function createresult(event:resultevent):void product = event.result as Product; label = product.name; private function removeresult(event:resultevent):void parent.removechild(this); En el método save, cogemos los campos del formulario y llamamos a los métodos srv.update(product) ó srv.create(product), siendo srv una referencia a una variable 38

39 RemoteObject, en este caso será un objeto remoto ProductService.java como veremos más adelante, y los métodos create y update, métodos de la interfaz de ProductService.java. También tenemos dos métodos que reciben un evento como parámetro, createresult y removeresult; estos métodos son utilizados cuando se realiza una llamada create o remove sobre el objeto remoto srv (métodos implementados en ProductService.java), de forma que actualicemos el estado del formulario actual. Finalmente, tenemos el objeto remoto: <mx:remoteobject id="srv" destination="product"> <mx:method name="create" result="createresult(event)"/> <mx:method name="remove" result="removeresult(event)"/> </mx:remoteobject> El atributo destination hace referencia al destino que anteriormente habíamos añadido en remoting-config.xml. También se han añadido dos métodos: create y remove, que hacen referencia a los métodos create y remove de ProductService.java, y que tienen asociados dos manejadores de eventos, createresult y removeresult. SearchPopup.mxml Es una lista que muestra de forma dinámica los productos que coinciden con los parámetros de búsqueda, en este caso se ha implementado una búsqueda por nombre. Vamos a analizar el código de SearchPopup.mxml: Básicamente SearchPopup.mxml es un objeto List, que tiene asociado un manejador para tratar los eventos click y keydown: <mx:list xmlns:mx=" dropshadowenabled="true" currentstate="hidden" labelfield="name" keydown="searchkeydownhandler(event)" click="openselecteditem()"> Como anteriormente, también tenemos un objeto remoto con el atributo destination apuntando a product : <mx:remoteobject id="srv" destination="product" result="resulthandler(event)"/> El único método que invoca al objeto remoto es el método público search : public function search(searchstr:string):void dataprovider = null; srv.getproduct(searchstr); if (currentstate == "hidden") currentstate = ""; Lo que se hace aquí es invocar al método getproduct de ProductService.java, y actualizar el contenido del objeto List por medio del manejador resulthandler : private function resulthandler(event:resultevent):void dataprovider = event.result as ArrayCollection; if (dataprovider && dataprovider.length > 0) selectedindex = 0; 39

40 El contenido de la lista se actualiza siempre que actualizamos el atributo dataprovider Proxy Service El servicio de proxy es similar a la interfaz HttpService mostrada anteriormente pero con la ventaja de que el servidor llamado no necesita incluir un archivo crossdomain.xml, esto se soluciona principalmente utilizando un proxy entre la llamada HttpService y el servidor, cosa que se puede hacer fácilmente en cualquier servidor. En BlazeDS tenemos un pequeño ejemplo de utilización del proxy service en la carpeta BlazeDS_HOME/tomcat/webapps/samples/testdrive-httpservice. Vamos a analizarlo. Parte del servidor: Vamos a analizar los archivos de configuración del servidor en WEB-INF\flex. Primero analizaremos el archivo proxy-config.xml, la parte que nos interesa es la siguiente: <destination id="catalog"> <properties> <url>/context.root/testdrive-httpservice/catalog.jsp</url> </properties> </destination> La URL hace referencia a un archivo jsp que se encuentra en el mismo servidor y que llama a la base de datos devolviendo un XML con una lista de productos. La referencia al canal http la encontramos en: <default-channels> <channel ref="my-http"/> <channel ref="my-amf"/> </default-channels> El canal http para la comunicación se encuentra definido en el archivo services-config.xml que es donde se encuentran definidos todos los canales para los diferentes servicios, en este caso el canal http presenta el siguiente aspecto: <channel-definition id="my-http" class="mx.messaging.channels.httpchannel"> <endpoint url=" ttp" class="flex.messaging.endpoints.httpendpoint"/> </channel-definition> Al igual que en el ejemplo anterior se utilizan las clases Product.java que será el modelo, y la clase ProductService.java que contendrá la interfaz del servicio. Ambas clases se pueden encontrar dentro de BlazeDS, en la carpeta: BlazeDS_HOME\tomcat\webapps\samples\WEB-INF\src\flex\samples\product Cliente: El cliente va a consistir en dos archivos, un MXML que muestra la lista de productos utilizando un componente DataGrid y un jsp que como hemos mencionado antes devuelve un XML con los productos que se encuentran en la base de datos. El código del cliente se encuentra en BlazeDS_HOME\tomcat\webapps\samplesWEB-INF\flexsrc\flex-src.zip, en la carpeta testdrive-httpservice. Vamos a crear un proyecto en Flex Builder al que nombraremos testdrive-httpservice. 40

41 En la pantalla de creación de proyecto, en Application server type marcamos J2EE y seleccionamos Use remote object Access service y LiveCycle Data Services. Pulsamos Next. En la siguiente pantalla introducimos los datos tal como aparece en la imagen, pero adaptados a nuestro equipo: Ahora podemos copiar el contenido de la carpeta testdrive-httpservice de BlazeDS_HOME\tomcat\webapps\samplesWEB-INF\flex-src\flex-src.zip en nuestro proyecto o extraerlo en el directorio del mismo. Vamos a analizar el código del cliente: Vemos que hay dos archivos, el jsp (catalog.jsp) que mencionamos antes, cuyo código es: <%@page import="flex.samples.product.productservice, flex.samples.product.product, java.util.list"%> <?xml version="1.0" encoding="utf-8"?> <catalog> <% ProductService srv = new ProductService(); List list = null; list = srv.getproducts(); Product product; 41

42 for (int i=0; i<list.size(); i++) product = (Product) list.get(i); %> <product productid="<%= product.getproductid()%>"> <name><%= product.getname() %></name> <description><%= product.getdescription() %></description> <price><%= product.getprice() %></price> <image><%= product.getimage() %></image> <category><%= product.getcategory() %></category> <qtyinstock><%= product.getqtyinstock() %></qtyinstock> </product> <% %> </catalog> El XML devuelto tiene la estructura: <catalog> <product> </product> <product> </product> </catalog> Es decir, un objeto catalog compuesto por n objetos product. El código archivo MXML (main.mxml) es el siguiente: <?xml version="1.0" encoding="utf-8"?> <mx:application xmlns:mx=" backgroundcolor="#ffffff"> <mx:httpservice id="srv" destination="catalog" useproxy="true"/> <mx:datagrid dataprovider="srv.lastresult.catalog.product" width="100%" height="100%"/> <mx:button label="get Data" click="srv.send()"/> </mx:application> Vemos que sólo está compuesto por un elemento HTTPService (srv), con el atributo destination igual a catalog que como hemos visto antes en el archivo de configuración del proxy proxy-config.xml apunta a catalog.jsp; y el atributo useproxy a true, de forma que no sea necesario un archivo crossdomain.xml en el servidor. El objeto DataGrid se rellena automáticamente debido a que el atributo dataprovider apunta directamente al conjunto de productos en forma de XML devuelto por catalog.jsp: dataprovider="srv.lastresult.catalog.product" Ya que como hemos visto en ejemplos anteriores, el componente Object de ActionScript, al recibir un XML, lo parsea automáticamente, en este caso srv.lastresult devuelve un objeto de tipo Object que se puebla directamente con los datos devueltos por la respuesta Localización de aplicaciones Las aplicaciones creadas con Flex SDK disponen de gestión de localización, es decir, podemos adaptar nuestras aplicaciones a distintos idiomas. Las localizaciones disponibles por defecto son en_us y jp_jp. Si queremos añadir nuevas localizaciones a Flex SDK debemos crear una carpeta con el nombre de la localización en Flex_SDK_HOME\frameworks\locale, en nuestro caso vamos a añadir la carpeta es_es (español de España). 42

43 El siguiente paso es ejecutar el comando copylocale desde Flex_SDK_HOME\frameworks\locale, que se encuentra en Flex_SDK_HOME\bin, de la siguiente forma: >copylocale en_us es_es Una vez que tenemos nuestra carpeta, debemos añadirla a los parámetros de compilación del proyecto en Flex Builder. En este caso vamos a abrir nuestro proyecto yahoo, hacemos clic derecho sobre el proyecto y abrimos la ventana de propiedades, y en la ventana de propiedades nos colocamos en Flex Compiler : Ilustración 21: Ventana de propiedades de compilación (Flex Builder) Podemos ver que en el atributo Additional compiler arguments se ha añadido el parámetro locale en_us, para que a la hora de compilar reconozca el castellano, debemos añadir: es_es -source-path=../locale/locale De forma que nos quede así: 43

44 Nota: Si estamos usando directamente Adobe Flex SDK, cada vez que compilemos con mxmlc debemos pasar los parámetros de localización: >mxmlc locale=en_us,es_es -source-path=../locale/locale Ejemplo.mxml El siguiente paso es crear una carpeta denominada locale en el directorio de nuestro proyecto. En esa carpeta debemos por cada idioma, una carpeta con su nombre, en nuestro caso la estructura sería: >Directorio del Proyecto >locale >en_us >es_es Dentro de cada carpeta de localización debemos añadir un archivo.properties (los dos con el mismo nombre), por ejemplo, mybundle.properties: >Directorio del Proyecto >locale >en_us >mybundle.properties >es_es >mybundle.properties En estos archivo tendremos los mensajes de nuestra aplicación en cada uno de los idiomas, en nuestro caso queremos que los siguiente mensajes aparezcan en ambos idiomas: Buscar, NºResultados, Idioma, Formato, DEMO BUSCADOR DE YAHOO : En la carpeta, es_es editamos mybundle.properties: 44

45 buscar=buscar idioma=idioma nresultados=nºresultados formato=formato titulo=demo BUSCADOR DE YAHOO En la carpeta en_us editamos mybundle.properties: buscar=search idioma=language nresultados=nºresults formato=format titulo=yahoo SEARCH ENGINE DEMO Debemos tener cuidado con la codificación de los archivos de propiedades, ya que puede que no nos reconozca los acentos u otros caracteres especiales, para evitar problemas, nos metemos en las propiedades de cada uno y seleccionamos en Text file enconding UTF-8: Ilustración 22: Ventana de propiedades de archivo (Flex Builder) Ahora debemos añadir a nuestro mxml principal, la siguiente etiqueta, justo debajo de <mx:application>: <mx:metadata> [ResourceBundle("myBundle")] </mx:metadata> El último paso es editar los label de nuestra aplicación para que aparezcan en el idioma adecuado, de forma que sustituyamos el texto de cada una por lo siguiente, por ejemplo para Buscar key='buscar') 45

46 ó para key= idioma ) La archivo de propiedades, key= key ) se utiliza dentro de las etiquetas en un archive mxml, si queremos hacerlo en un archive ActionScript (.as) debemos utilizar los siguiente: resourcemanager.getstring("archivo de propiedades", "key") Si editamos todas nuestras etiquetas, el código resultante es el siguiente: <?xml version="1.0" encoding="utf-8"?> <mx:application xmlns:mx=" layout="absolute" backgroundgradientalphas="[1.0, 1.0]" backgroundgradientcolors="[#d2e0fa, #F1F290]"> <mx:metadata> [ResourceBundle("myBundle")] </mx:metadata> <mx:text x="10" y="10" text="@resource(bundle='mybundle', key='titulo')" fontweight="bold" fontsize="15"/> <mx:hbox x="10" y="42" width="100%"> <mx:textinput id="palabrasclave"/> <mx:button label="@resource(bundle='mybundle', key='buscar')" click="buscar()"/> </mx:hbox> <mx:hbox x="10" y="72" width="100%" backgroundcolor="#6f98f4"> <mx:label text="@resource(bundle='mybundle', key='nresultados')" fontweight="bold"/> <mx:combobox id="nresultadoscb" cornerradius="0"> <mx:array> <mx:string>10</mx:string> <mx:string>20</mx:string> <mx:string>30</mx:string> <mx:string>40</mx:string> <mx:string>50</mx:string> </mx:array> </mx:combobox> <mx:label text="@resource(bundle='mybundle', key='idioma')" fontweight="bold"/> <mx:combobox cornerradius="0" id="languagecb"> <mx:array> <mx:string>es</mx:string> <mx:string>en</mx:string> <mx:string>fr</mx:string> <mx:string>de</mx:string> </mx:array> </mx:combobox> <mx:label text="@resource(bundle='mybundle', key='formato')" fontweight="bold"/> <mx:combobox id="formatcb"> <mx:array> <mx:string>any</mx:string> <mx:string>html</mx:string> <mx:string>msword</mx:string> <mx:string>pdf</mx:string> <mx:string>ppt</mx:string> <mx:string>rrs</mx:string> <mx:string>txt</mx:string> <mx:string>xls</mx:string> </mx:array> 46

47 </mx:combobox> </mx:hbox> <mx:datagrid x="10" y="102" id="resultados" width="100%" height="100%"> </mx:datagrid> <mx:image x="264" y="10" source="img/logoyahoo.png"/> <mx:script> <![CDATA[ import mx.collections.arraycollection; import mx.rpc.xml.simplexmldecoder; import mx.rpc.events.faultevent; import mx.controls.alert; import mx.rpc.events.resultevent; import mx.rpc.http.httpservice; private function buscar():void // Debemos obtener la estructura por http var servicio:httpservice = new HTTPService(); servicio.url = " Demo"; servicio.method = "GET"; var adult_ok:int = 0; servicio.request = query:palabrasclave.text, laguage:languagecb.text, results:nresultadoscb.selecteditem, format:formatcb.selecteditem ; servicio.resultformat = "xml"; // Añadimos los manejadores para procesar la respuesta servicio.addeventlistener(resultevent.result, manejadorobtener); servicio.addeventlistener(faultevent.fault, manejadorerrorobtener); // Enviamos servicio.send(); private function manejadorobtener(event:resultevent):void var response:string = event.result.tostring(); var xmldoc:xmldocument; try // Comprobamos si el resultado es un XML xmldoc = new XMLDocument(response); // Procesamos el XML var decoder:simplexmldecoder = new SimpleXMLDecoder(true); var resultobj:object = decoder.decodexml(xmldoc); resultados.dataprovider = resultobj.resultset.result; catch(error:error) Alert.show("Error en el formato de la respuesta"); 47

48 private function manejadorerrorobtener(event:faultevent):void Alert.show("Error al obtener el listado de videos"); ]]> </mx:script> </mx:application> Si ejecutamos nuestra aplicación, veremos que se muestra en español, esto es debido a que el swf reconoce la región donde nos encontramos. Más adelante, veremos como poder seleccionar el idioma del swf pasándole parámetros http Paso de parámetros http a un swf Un objeto shockwave/flash puede recibir parámetros http por medio del método GET, ya que solamente los puede recibir leyéndolos de la URL por la que es invocado. En nuestro caso vamos a añadir un parámetro lang a nuestra demo de buscador de yahoo con el fin de poder seleccionar el idioma que muestre la aplicación. Vamos a crear un método init dentro de yahoo.mxml que se lance inmediatamente después que la aplicación se haya cargado en el navegador, para ello tenemos que hacer dos cosas: 1. Asociar al evento creationcomplete el método init(). Esto lo hacemos en la etiqueta <mx:application> añadiendo creationcomplete= init(), de forma que tengamos: <mx:application xmlns:mx=" layout="absolute" creationcomplete="init()"> 2. Ahora debemos crear un método init() dentro del espacio para añadir código ActionScript, el método init comprobará que existe un parámetro lang y posteriormente comprobará su valor: private function init():void // Variables flashvars var params:object = this.parameters; // Si nos han pasado un parámetro con el lenguaje if(params.lang) var language:string = params.lang; if(language == "en" language.substr(0,2) == "en") language = "en_us"; else if(language == "es" language.substr(0,2) == "es") language = "es_es"; // Recorremos todos los lenguages que se encuentran en el gestor de recursos for(var i:int = 0; i < resourcemanager.localechain.length; i++) 48

49 // Si el lengauge está contenido dentro de nuestro gestor de recursos if(language == resourcemanager.localechain[i]) // Establecemos el lenguage de la aplicación resourcemanager.localechain = [language]; Las variables recibidas en el swf, llamadas FlashVars, se acceden a través del atributo de la aplicación parameters. Fuera del main podemos acceder a las variables invocando Application.application.parameters. Las variables se devuelven en forma de Object flash, es decir es un objeto con un conjunto de atributos del que no sabemos a priori los nombres. Podríamos obtener los nombres de todas las variables y sus valores de la siguiente forma: var item:string; var arrcoll:arraycollection = new ArrayCollection(); /* Populate the ArrayCollection object with the FlashVars. */ for (item in params) Alert.show("Parámetro: " + item + " Valor: " + params[item]); Este código, añadido al final del método init, muestra en ventanas de aviso, los parámetros recibidos y sus correspondientes valores. Si abrimos directamente el swf del buscador con un navegador y añadimos al final parámetros http, veremos cómo se nos muestran en pantalla. Además, si pasamos un parámetro lang con un valor correcto podremos seleccionar el idioma de la interfaz. Pero esto no es del todo útil, ya que normalmente los objetos shockwave/flash vienen embebidos en archivos html, o archivos jsp, php, etc. En este caso, lo que tenemos que hacer es pasar los parámetros recibidos en el html, a nuestro swf. Esto se consigue capturando las variables a través de código java o php dentro del html que envuelve al swf, como veremos a continuación. 11. Creación de un html que envuelva a el swf El html que envuelve un swf, tiene tres funciones principales: 1. Añadir más contenido a la página. 2. Comprobar si el usuario tiene una versión adecuada de Flash player. 3. Pasar variables al objeto swf. Por defecto, Flex Builder nos genera un html que envuelve el objeto swf generado. El html tiene código javascript que nos permite comprobar si el usuario tiene una versión compatible de Flash player, y en caso de que lo tenga lanza el swf. También tiene código no javascript que permite embeber un swf en un html: <object classid="clsid:d27cdb6e-ae6d-11cf-96b " id="yahoo" width="100%" height="100%" codebase=" lash.cab"> <param name="movie" value="yahoo.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#869ca7" /> <param name="allowscriptaccess" value="samedomain" /> 49

50 <embed src="yahoo.swf" quality="high" bgcolor="#869ca7" width="100%" height="100%" name="yahoo" align="middle" play="true" loop="false" quality="high" allowscriptaccess="samedomain" type="application/x-shockwave-flash" pluginspage=" </embed> </object> El problema de este código html, es que no detecta que no tengamos instalado Flash player o que no tengamos instalada la versión adecuada Paso de variables Como se ha comentado antes, se pueden enviar variables a nuestro objeto shockwave/flash desde el archivo que lo envuelve, si lo hacemos en un archivo html sólo podremos pasarle variables estáticas previamente definidas, pero si lo hacemos en un archivo con capacidades dinámicas, por ejemplo un.jsp o un php, podemos pasarle las variables que queramos, por ejemplo, vamos a crear un.jsp que envie el parámetro lang a nuestro swf: <html> <head> <style> body margin: 0px; overflow:hidden </style> </head> <% String lang = (String) request.getparameter("lang"); %> <body scroll="no"> <object classid="clsid:d27cdb6e-ae6d-11cf-96b " id="yahoo" width="100%" height="100%" codebase=" lash.cab"> <param name="movie" value="yahoo.swf?lang=<%= lang%>" /> <param name="quality" value="high" /> <param name="bgcolor" value="#869ca7" /> <param name="allowscriptaccess" value="samedomain" /> <embed src="yahoo.swf?lang=<%= lang%>" quality="high" bgcolor="#869ca7" width="100%" height="100%" name="yahoo" align="middle" play="true"loop="false" quality="high" allowscriptaccess="samedomain" type="application/x-shockwave-flash" pluginspage=" </embed> </object> </body> </html> Las variables que pasamos a un swf nos pueden servir para configurarlo o para instanciarlo, por ejemplo, si tenemos un reproductor de video flash player, podemos enviarle una variable para indicarle que vídeo debe reproducir, el reproductor se encargará más delante de recuperar el video del servidor y reproducirlo 12. Otras características de Adobe Flex SDK Comunicación con interfaces externas (javascript) Un objeto shockwave/flash puede utilizar código javascript del html que lo envuelve, e invocarlo desde su código, pudiendo enviarle información y recuperarla de la misma forma a través de su interfaz de comunicación. 50

51 Por ejemplo, podemos crear un método javascript que abra un popup y detectar si el navegador lo ha bloqueado o no a través del valor devuelto por el método javascript, todo esto desde nuestro código ActionScript. Este sería el código javascript: function abrirpopup( url ) try var opciones="toolbar=no, Location=no, directories=no, status=no, menubar=no, scrollbars=auto, resizable=yes, fullscreen=yes"; var popup = window.open( url,, opciones ); if ( popup == null ) return false; if ( window.opera ) if (!popup.opera) return false; catch(err) return false; return true; Recibe como parámetro la url a abrir y devuelve un valor verdadero o falso en función de si lo ha podido abrir o no. Vamos a probrarlo en nuestro proyecto yahoo. Añadimos a la imagen o al título un evento clic y le asignamos un método abrirpopup(). El código del método abrirpopup() es el siguiente: private function abrirpopup():void var url:string = " var exito:boolean = ExternalInterface.call("abrirPopup", url, "_self"); if (!exito) Alert.show("Ventana emergente bloqueada, por favor habilite las ventanas emergementes para este sitio en su navegador", "Aviso" ); La llamada ExternalInterface.call es la que se comunica con el código javascript, el primer parámetro es el nombre del método, y los siguientes los parámetros a recibir (tantos como sean necesarios, admitiendo también arrays de datos). 13. SharedObjects Los SharedObjects son objetos parecidos a las cookies, son pequeños archivos en los que se pueden almacenar datos en el equipo del cliente para luego recuperarlos en esa misma sesión o en otra. 51

52 Su tamaño está limitado a 100KB y sólo son accesibles por la aplicación que los creo, si bien, tienen ciertos inconvenientes: 1. Se guardan en una ruta fija, por lo que es fácil encontrarlos. 2. Los datos se guardan en claro, si bien siempre se pueden cifrar en la aplicación antes de escribirlos. Vamos a crear un pequeño ejemplo extendiendo un poco la funcionalidad del chat que hemos creado anteriormente, utilizando un SharedObject que guarde los mensajes que el propio usuario ha ido enviando. Abrimos el proyecto chat1 y creamos un nuevo componente llamado Historico. El componente va a estar basado en un TitleWindow y va a contener un TextArea donde se mostrarán las conversaciones y al que asignaremos el identificador areatexto. Ilustración 23: Vista de diseño del componente Historico.mxml En el TitleWindow establecemos el atributo showclosebutton a true y añadimos y asignamos el evento close a un método llamado cerrar() ; esto nos servirá para cerrar el componente una vez abierto. El código resultante con el método cerrar incluido es el siguiente: <?xml version="1.0" encoding="utf-8"?> <mx:titlewindow xmlns:mx=" layout="vertical" width="400" height="300" title="histórico de conversaciones" showclosebutton="true" close="cerrar()"> <mx:textarea width="100%" height="100%" id="areatexto"/> <mx:script> <![CDATA[ import mx.managers.popupmanager; 52