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

Save this PDF as:
 WORD  PNG  TXT  JPG

Tamaño: px
Comenzar la demostración a partir de la página:

Download "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: 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" key='titulo')" fontweight="bold" fontsize="15"/> <mx:hbox x="10" y="42" width="100%"> <mx:textinput id="palabrasclave"/> <mx:button key='buscar')" click="buscar()"/> </mx:hbox> <mx:hbox x="10" y="72" width="100%" backgroundcolor="#6f98f4"> <mx:label 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 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 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

Gambas: Basic para Linux

Gambas: Basic para Linux LinuxFocus article number 329 http://linuxfocus.org Gambas: Basic para Linux by Jonàs Alvarez About the author: Jonàs Alvarez ha trabajado como programador de aplicaciones en entornos

Más detalles

Tema 2. Entorno de desarrollo integrado (IDE) de VS.NET

Tema 2. Entorno de desarrollo integrado (IDE) de VS.NET Tema 2. Entorno de desarrollo integrado (IDE) de VS.NET La página de inicio del entorno de desarrollo integrado (IDE) Desde esta página podremos acceder a: nuestros proyectos recientes, noticias relacionadas

Más detalles

INTRODUCCIÓN. paco@portadaalta.es

INTRODUCCIÓN. paco@portadaalta.es INTRODUCCIÓN paco@portadaalta.es Índice Entorno de desarrollo Estructura de un proyecto Android Componentes de una aplicación Android Ejemplos: Mi primera aplicación Divisas 2 actividades Contador de cafés

Más detalles

Google Sites. Universidad de Deusto Unidad Técnica de Innovación y Calidad aulatic, Enero 2013

Google Sites. Universidad de Deusto Unidad Técnica de Innovación y Calidad aulatic, Enero 2013 Google Sites 1 1. Qué es Google Sites? 2. Cómo empezar a utilizarlo? 3.Primeros pasos 4.Interfaz de Usuario 5. Cómo añadir contenido al sitio 6. Creación de nuevas páginas 7. Gestión y administración del

Más detalles

UNIVERSIDAD TÉCNICA DEL NORTE

UNIVERSIDAD TÉCNICA DEL NORTE UNIVERSIDAD TÉCNICA DEL NORTE FACULTAD DE INGENIERÍA EN CIENCIAS APLICADAS CARRERA DE INGENIERÍA EN SISTEMAS COMPUTACIONALES MANUAL DE INSTALACIÓN AUTOR: CHRISTIAN FELIPE REINOSO CHAMBA DIRECTOR: ING.

Más detalles

DreamWeaver. CS5 y CS6. Cursosindustriales. Curso de DreamWeaver CS6 1

DreamWeaver. CS5 y CS6. Cursosindustriales. Curso de DreamWeaver CS6 1 DreamWeaver CS5 y CS6 Cursosindustriales. Curso de DreamWeaver CS6 1 DREAMWEAVER CS5. ENTORNO DE DESARROLLO. Dreamweaver es una aplicación propietario que facilita la labor del desarrollador Web y le permite

Más detalles

5.2.1 La Página Principal

5.2.1 La Página Principal 5.2 Las Páginas WEB Una página Web es un documento electrónico escrito en un lenguaje de ordenador llamado HTML, o Hypertext Markup Language (lenguaje de marcación de hipertexto). Como ya hemos dicho,

Más detalles

Taller Práctico Creación de un LO IMS/SCORM

Taller Práctico Creación de un LO IMS/SCORM Taller Práctico Creación de un LO IMS/SCORM Madrid 2005 Por: Jorge Dieguez Cobo (xml_pro@hotmail.com) Índice: - Introducción - Paso 1: Copiar los ficheros - Paso 2: Crear el Paquete SCORM - Paso 3: Crear

Más detalles

Hands-On Lab. Windows Azure: Java, Eclipse y Azure. Última Actualización: 16/12/2011

Hands-On Lab. Windows Azure: Java, Eclipse y Azure. Última Actualización: 16/12/2011 Hands-On Lab Windows Azure: Java, Eclipse y Azure Última Actualización: 16/12/2011 1 Contenido INTRODUCCIÓN... 3 Objetivos 3 Prerequisitos 4 PREPARANDO EL ENTORNO... 5 Instalar Windows Azure Toolkit para

Más detalles

CENTRO DE INVESTIGACIÓN CIENTÍFICA Y DE EDUCACIÓN SUPERIOR DE ENSENADA, BAJA CALIFORNIA Departamento de Cómputo / Dirección de Telemática ÍNDICE

CENTRO DE INVESTIGACIÓN CIENTÍFICA Y DE EDUCACIÓN SUPERIOR DE ENSENADA, BAJA CALIFORNIA Departamento de Cómputo / Dirección de Telemática ÍNDICE HOJA 1 DE 17 ÍNDICE 1 Interfaz Web... 2 1.1 Acceso a la nube CICESE utilizando la interfaz Web.... 2 1.2 Pantalla principal de la interfaz Web.... 3 2 Administrar archivos desde la interfaz Web... 5 2.1

Más detalles

Crear una Activity en Android. Paso por paso

Crear una Activity en Android. Paso por paso 19-03-2014 Crear una Activity en Android. Paso por paso Una breve descripción de qué hacer cuando las herramientas de desarrollo de Android se convierten en nuestros enemigos. A veces, puede pasar que

Más detalles

Lo que necesitaremos para programar en Java, será un editor de texto o IDE y la JDK.

Lo que necesitaremos para programar en Java, será un editor de texto o IDE y la JDK. Introducción Java surgió en 1991 dentro de la empresa Sun Microsystems como un lenguaje de programación sencillo y universal destinado a electrodomésticos. La reducida potencia de cálculo y memoria de

Más detalles

Formación del Usuario Manual de Windows XP

Formación del Usuario Manual de Windows XP Formación del Usuario Manual de Windows XP Índice ÍNDICE... 2 1. INTRODUCCIÓN... 3 2. PANTALLA... 3 2.1. TEMAS... 3 2.2. ESCRITORIO... 4 2.3. PROTECTOR DE PANTALLA... 4 2.4. APARIENCIA... 5 2.5. CONFIGURACIÓN...

Más detalles

ATLAS MANUAL DE USUARIO ARBOL ACCESIBLE

ATLAS MANUAL DE USUARIO ARBOL ACCESIBLE ATLAS MANUAL DE USUARIO ARBOL ACCESIBLE Versión 1.3 Área de Aplicaciones Especiales y Arquitectura de Software Hoja de Control Título Documento de Referencia Responsable Manual de Usuario del NORMATIVA

Más detalles

Manual de creación de Interfaces de Usuario en Netbeans

Manual de creación de Interfaces de Usuario en Netbeans Three Headed Monkey Manual de creación de Interfaces de Usuario en Versión 2.0 Jesús Omar Álvarez Márquez Miércoles, 14 de Abril de Contenido Introducción... 2 Propósito del documento... 2 Programas necesarios...

Más detalles

1. El entorno de desarrollo Eclipse

1. El entorno de desarrollo Eclipse Índice 1. El entorno de desarrollo Eclipse 1 1.1. Qué es Eclipse?........................................................ 1 1.2. Trabajando con Eclipse....................................................

Más detalles

Conceptos generales. Introducción. Front-end.

Conceptos generales. Introducción. Front-end. Conceptos generales 4: Conceptos generales 4 Introducción. Una vez realizada la instalación de Joomla! en nuestro servidor, observemos detenidamente lo que hemos conseguido, y así poder ir entendiendo

Más detalles

CS3. Jorge A. Villa Saravia 2011. www.jalbertovsa.net 1

CS3. Jorge A. Villa Saravia 2011. www.jalbertovsa.net 1 DREAMWEAVER CS3 Jorge A. Villa Saravia 2011 www.jalbertovsa.net www.jalbertovsa.net 1 1. INTRODUCCIÓN A DREAMWEAVER CS 3... 2 1.1. FLUJO DE TRABAJO DE DREAMWEAVER PARA LA CREACIÓN DE SITIOS WEB... 2 1.2.

Más detalles

PRÁCTICA 1 MANUAL BÁSICO DE ECLIPSE

PRÁCTICA 1 MANUAL BÁSICO DE ECLIPSE PRÁCTICA 1 MANUAL BÁSICO DE ECLIPSE Facilidades de eclipse para el uso de ant y JUnit Tabla de contenidos 1. Qué es Eclipse?... 2 2. Crear un proyecto en Eclipse... 2 3. Utilizar Ant en nuestro proyecto

Más detalles

- 1 - Página 1 de 52 Abril 2014 Revisión 5

- 1 - Página 1 de 52 Abril 2014 Revisión 5 1-1 - Página 1 de 52 2-2 - Página 2 de 52 Índice 1. Qué son las MicroWebs... 3 1.1. MicroWebs de Entidad UPV y MicroWebs de contenido... 4 1.2. Cómo empezar... 4 2. Gestión de las MicroWebs de Entidad...

Más detalles

Configuración de un sitio local

Configuración de un sitio local Configuración de un sitio local Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí, con un diseño similar o un objetivo común. Es necesario diseñar y planificar el sitio web antes

Más detalles

BPEL. Nota: Esta guía está basada en el tutorial http://www.adictosaltrabajo.com/tutoriales/introduccion-bpel-openesb/#modelarconbpel

BPEL. Nota: Esta guía está basada en el tutorial http://www.adictosaltrabajo.com/tutoriales/introduccion-bpel-openesb/#modelarconbpel BPEL 1 Definición proyecto En este tutorial vamos a aprender a crear procesos BPEL practicando con un ejemplo: un proceso de negocio de venta online de libros. (Los pasos descritos en el tutorial deben

Más detalles

INSTALACIÓN DE SIESTTA 2.0 EN UN HOSTING (Ejemplo para Guebs.com)

INSTALACIÓN DE SIESTTA 2.0 EN UN HOSTING (Ejemplo para Guebs.com) INSTALACIÓN DE SIESTTA 2.0 EN UN HOSTING (Ejemplo para Guebs.com) A modo de post, vamos a complementar la documentación con una guía visual a través de la cual conseguiremos instalar SIESTTA 2.0 en un

Más detalles

CÓMO CREAR NUESTRO CATÁLOGO

CÓMO CREAR NUESTRO CATÁLOGO CÓMO CREAR NUESTRO CATÁLOGO Mediante la aplicación (http://www.prensasoft.com/programas/conline) podemos crear nuestros propios catálogos. Para crear un catálogo necesitamos: - Varios productos que mostrar,

Más detalles

PROGRAMACIÓN EN INTERNET Curso 2001-2002 http://www.dlsi.ua.es/asignaturas/pi/ MICROSOFT PERSONAL WEB SERVER 4.0... 2

PROGRAMACIÓN EN INTERNET Curso 2001-2002 http://www.dlsi.ua.es/asignaturas/pi/ MICROSOFT PERSONAL WEB SERVER 4.0... 2 MICROSOFT PERSONAL WEB SERVER 4.0... 2 Introducción... 2 Qué se puede configurar... 6 Menú Avanzada... 7 1 Microsoft Personal Web Server 4.0 Introducción Personal Web Server 4.0 es un servidor de páginas

Más detalles

Tutorial 1 Mapas Mentales con Mindomo

Tutorial 1 Mapas Mentales con Mindomo Tutorial 1 Mapas Mentales con Mindomo Instalación y acceso online...2 Comenzando el mapa...3 Temas o categorías principales...4 Generación de subtemas...5 Grabación del mapa mental...6 Formateo del mapa...6

Más detalles

Manual de gestión de contenidos web en entorno Drupal. Versión sitio maestro para servicios 1.0

Manual de gestión de contenidos web en entorno Drupal. Versión sitio maestro para servicios 1.0 Manual de gestión de contenidos web en entorno Drupal Versión sitio maestro para servicios 1.0 Contenido Gestión de contenidos... 5 Crear contenidos... 5 Tipos de contenido... 5 Página básica o basic

Más detalles

MODULO DE INDUCCIÓN INFORMÁTICA Manejo del Sistema Operativo. Herramientas

MODULO DE INDUCCIÓN INFORMÁTICA Manejo del Sistema Operativo. Herramientas Thunderbird Thunderbird es uno de los mejores clientes de correo electrónico que hay en el mercado, no solo porque es muy potente y sencillo, sino también porque es amigable y gratuito. Thunderbird, y

Más detalles

MANUAL DE USUARIO Joomla 1.5. Parte 2

MANUAL DE USUARIO Joomla 1.5. Parte 2 MANUAL DE USUARIO Joomla 1.5 Parte 2 Página 1 de 26 Tabla de contenido 2. Gestión del contenido... 3 2.1 Gestión de contenido para usuarios del Front-end... 3 2.2 Gestión de contenido para usuarios del

Más detalles

Microsoft Excel. LA HOJA DE TRABAJO El gran área formada por cuadrículas constituye la hoja de trabajo de la hoja de cálculo.

Microsoft Excel. LA HOJA DE TRABAJO El gran área formada por cuadrículas constituye la hoja de trabajo de la hoja de cálculo. Microsoft Excel Diferentes partes de la pantalla Veamos ahora las diferentes partes de la pantalla comenzando por la parte superior. La Barra de Título. La barra azul de arriba muestra el nombre del programa

Más detalles

Subir imágenes TUTORIALES EDITMAKER

Subir imágenes TUTORIALES EDITMAKER Subir imágenes TUTORIALES EDITMAKER Editor de imágenes Editmaker permite incluir imágenes en cada noticia de dos formas: - Menú de posiciones predefinidas - A través de la herramienta Modo visual Menú

Más detalles

" ##$ % & '( % & )*+),$ -##$ -!- $! "-./ - 0WebClass1-2

 ##$ % & '( % & )*+),$ -##$ -!- $! -./ - 0WebClass1-2 ! " ##$ % & '( % & )*+),$ -##$ -!- $! "-./ - 0WebClass1-2!" # 345 637 6$5!!!89 & 5 :8-7 & & ;(< 8 $ + - 8 : #= ' 7= : 0 & 0 &- =.> = ;(("9 &? WebClass - 1@#$% &'A1 ;(< 8- ( ) * *+ " $ % B9 5 5 # :!- WebClass

Más detalles

TUTORIAL DE WORDPRESS

TUTORIAL DE WORDPRESS TUTORIAL DE WORDPRESS Editado por Cristina Alejos. www.pinturayartistas.com ACCESO AL BLOG EDICIÓN Y CREACIÓN DE ENTRADAS CREAR UN ENLACE A OTRA PÁGINA MÁS OPCIONES DEL EDITOR CREACIÓN Y EDICIÓN DE PÁGINAS

Más detalles

WinHIPE: edición, compilación y ejecución de programas; y generación de animaciones web. Manual de usuario.

WinHIPE: edición, compilación y ejecución de programas; y generación de animaciones web. Manual de usuario. WinHIPE: edición, compilación y ejecución de programas; y generación de animaciones web. Manual de usuario. Índice contenido. INTRODUCCIÓN... 1-2 1. ENTORNO DE TRABAJO... 1-2 2. EDICIÓN DE PROGRAMAS...

Más detalles

Pasos para crear un sitio web ASP.Net con el Visual Studio en cualquiera de sus versiones. Unidad 1. Conceptos [ASP.NET EN VISUAL STUDIO]

Pasos para crear un sitio web ASP.Net con el Visual Studio en cualquiera de sus versiones. Unidad 1. Conceptos [ASP.NET EN VISUAL STUDIO] Pasos para crear un sitio web ASP.Net con el Visual Studio en cualquiera de sus versiones Conceptos Lo primero que necesitamos para crear una aplicación o proyecto web es seleccionar el entorno del Visual

Más detalles

Nos dirigimos a la siguiente página web. http://es.openoffice.org/

Nos dirigimos a la siguiente página web. http://es.openoffice.org/ 1. INTRODUCCIÓN A OPENOFFICE IMPRESS 1.1. INTRODUCCIÓN OpenOffice.org es una suite ofimática de software libre y código abierto de distribución gratuita. Está disponible para muchas plataformas: como Microsoft

Más detalles

Manual de ayuda para la utilización del Correo Interno en el Campus Virtual

Manual de ayuda para la utilización del Correo Interno en el Campus Virtual Manual de ayuda para la utilización del Correo Interno en el Campus Virtual Página 1 de 12 Contenido 1. INTRODUCCIÓN... 3 2. CONFIGURACIÓN DEL BLOQUE DE CORREO INTERNO... 3 3. GESTIÓN DEL CORREO... 4 4.

Más detalles

Programación 2 Curso 2013 2014. Guía de desarrollo C/C++ con Eclipse

Programación 2 Curso 2013 2014. Guía de desarrollo C/C++ con Eclipse Programación 2 Curso 2013 2014 Introducción Guía de desarrollo C/C++ con Eclipse Eclipse 1 es un entorno de programación que permite el desarrollo de aplicaciones en diferentes lenguajes. Consta de un

Más detalles

Páginas web ::: Noticias RSS de un sitio web Diseño de materiales multimedia. Web 2.0. 1.12 Noticias RSS de un sitio web

Páginas web ::: Noticias RSS de un sitio web Diseño de materiales multimedia. Web 2.0. 1.12 Noticias RSS de un sitio web 98 1.12 Noticias RSS de un sitio web 99 1.12 Noticias RSS de un sitio web 1.12.1 Qué es un canal RSS? RSS es un término que se refiere a la posibilidad de crear un canal de noticias en un sitio web para

Más detalles

Conectar Flash con Access usando MDM Zinc

Conectar Flash con Access usando MDM Zinc Conectar Flash con Access usando MDM Zinc Con este tutorial pretendo enseñar la conexión básica entre Flash / Actionscript y Microsoft Access mediante MDM Zinc, para poder empezar a crear aplicaciones

Más detalles

Documentación del Terminal

Documentación del Terminal Documentación del Terminal 1. Descripción El Programa de Preventa-Autoventa FacturaPlus está diseñado para su utilización en PDAs incluyendo en este paquete además una aplicación para PC con la que gestionar

Más detalles

Manual de usuario de la aplicación para la presentación de solicitudes de ayudas Acción Estratégica de Economía y Sociedad Digital

Manual de usuario de la aplicación para la presentación de solicitudes de ayudas Acción Estratégica de Economía y Sociedad Digital aplicación para la presentación de solicitudes de ayudas Acción Estratégica de Economía y Sociedad Fecha: 17/01/2014 Versión: 1.01 Índice. 1. Introducción... 3 2. Requisitos para ejecutar la aplicación...

Más detalles

MANUAL DE AYUDA MÓDULO GOTELGEST.NET PREVENTA/AUTOVENTA

MANUAL DE AYUDA MÓDULO GOTELGEST.NET PREVENTA/AUTOVENTA MANUAL DE AYUDA MÓDULO GOTELGEST.NET PREVENTA/AUTOVENTA Fecha última revisión: Septiembre 2014 MANUAL DE AYUDA MÓDULO GOTELGEST.NET PREVENTA/AUTOVENTA MÓDULO GOTELGEST.NET MÓVIL... 3 1. INTRODUCCIÓN A

Más detalles

ELABORACIÓN DE TABLEROS DINÁMICOS DE COMUNICACIÓN CON EL PROGRAMA EDITOR TICO

ELABORACIÓN DE TABLEROS DINÁMICOS DE COMUNICACIÓN CON EL PROGRAMA EDITOR TICO ELABORACIÓN DE TABLEROS DINÁMICOS DE COMUNICACIÓN CON EL PROGRAMA (Tico 2.0) EDITOR TICO La idea principal que motivo este proyecto fue trasladar la definición tradicional de tablero de comunicación en

Más detalles

Programa de Fabricación para Android

Programa de Fabricación para Android Programa de Fabricación para Android Presentación: Este es un programa dirigido a la dirección, planificación, gestión, guardado y presentación de la fabricación, en este caso de una imprenta de generación

Más detalles

Instrucciones del programa para la presentación de solicitudes de ayudas del Plan Nacional de I+D+i 2008-2011

Instrucciones del programa para la presentación de solicitudes de ayudas del Plan Nacional de I+D+i 2008-2011 para la presentación de solicitudes de ayudas del Plan Nacional de I+D+i Marzo 2008 ÍNDICE 1. Introducción... 2 2. Requisitos para ejecutar la aplicación... 2 3. Descarga de la aplicación... 3 4. Funcionamiento

Más detalles

MINI MANUAL PARA CREAR FORMULARIOS CON PHP Marzo 2007

MINI MANUAL PARA CREAR FORMULARIOS CON PHP Marzo 2007 MINI MANUAL PARA CREAR FORMULARIOS CON PHP Marzo 2007 Servicio de Informática y Comunicaciones Para poder diseñar un formulario y que éste nos envíe los resultados a nuestro correo electrónico, necesitamos

Más detalles

Guía del alumno del Campus virtual

Guía del alumno del Campus virtual Guía del alumno del Campus virtual Versión: 2.8 Fecha revisión: Septiembre 2013 Tabla de Contenidos Tabla de Contenidos... 2 Acceso... 3 Autenticación... 4 Viuspace... 4 Información General... 6 Agenda

Más detalles

Índice 1 Instalación de la herramienta 2 Descripción de la herramienta 2 Arranque de la aplicación 3 Proyecto 4 Diagrama de clases 5

Índice 1 Instalación de la herramienta 2 Descripción de la herramienta 2 Arranque de la aplicación 3 Proyecto 4 Diagrama de clases 5 Índice Índice 1 Instalación de la herramienta 2 Descripción de la herramienta 2 Arranque de la aplicación 3 Proyecto 4 Diagrama de clases 5 Crear diagrama de clases 5 Crear elementos 7 Editar elementos

Más detalles

Como configurar el servidor y el cliente de FTP paso a paso

Como configurar el servidor y el cliente de FTP paso a paso Como configurar el servidor y el cliente de FTP paso a paso Suponemos que tenemos descargados en el escritorio los ficheros de instalación tanto del servidor de FTP (Filezilla Server) como el cliente (Filezilla).

Más detalles

gvsig 0.6 Manual de usuario Extension de ArcIMS

gvsig 0.6 Manual de usuario Extension de ArcIMS gvsig 0.6 Manual de usuario Extension de ArcIMS (Versión preliminar) Se permite la copia y distribución de copias literales de este documento, pero no se permiten cambios. 2005 Conselleria de Infraestructuras

Más detalles

Personalización de la Base de Datos

Personalización de la Base de Datos Personalización de la Base de Datos Tabla de contenidos 1.- INTRODUCCIÓN... 3 2.- CREACIÓN DE UNA VENTANA DE ENTRADA (FORMULARIO)... 3 3.- AGREGACIÓN DE UN CONTROL DE BOTÓN PARA ABRIR EL FORMULARIO PROVEEDORES

Más detalles

MIGRACIÓN DEL MOODLE A MESTRE A CASA

MIGRACIÓN DEL MOODLE A MESTRE A CASA MIGRACIÓN DEL MOODLE A MESTRE A CASA En este documento, vamos a explicar cuál es el proceso que debemos de seguir para traspasar los cursos del Moodle actual de Linux Centres al Moodle de Mestre a Casa.

Más detalles

1. Abre un archivo FLA cualquiera. Como hemos hecho en anteriores secciones puedes abrir el archivo natura.fla situado en Curso Flash/ejemplos.

1. Abre un archivo FLA cualquiera. Como hemos hecho en anteriores secciones puedes abrir el archivo natura.fla situado en Curso Flash/ejemplos. Capítulo 15 Diseño multimedia 15.1 Generar un proyector.exe E l archivo producido es un ejecutable que reproduce directamente la película independientemente del entorno de diseño Flash y de que el cliente

Más detalles

2. El Constructor por dentro

2. El Constructor por dentro 2. El Constructor por dentro 1. Introducción Si, después de analizar las características de estas dos grandes herramientas de autor, te has decido por el Constructor, bienvenid@, vamos a empezar un viaje

Más detalles

ÍNDICE WORD 2007. 2da. Parte

ÍNDICE WORD 2007. 2da. Parte ÍNDICE WORD 2007 2da. Parte PÁG. 02 05 08 12 13 15 16 17 18 19 20 22 25 TEMAS 27- Tabla de Ilustraciones 28- Índice 29- Tablas 30- Viñetas 31- Numeraciones 32- Esquemas. Esquemas numerados 33- Secciones.

Más detalles

Kosmo Desktop Manual de desarrollo Instalación y configuración del código fuente de Kosmo en Eclipse

Kosmo Desktop Manual de desarrollo Instalación y configuración del código fuente de Kosmo en Eclipse Kosmo Desktop Manual de desarrollo Instalación y configuración del código fuente de Kosmo en Eclipse Versión 3.0 02/12/2010 2 3 1 Control de versiones VERSIÓN AUTOR FECHA CAMBIO 1.0 SAIG, S.L. 22/03/2007

Más detalles

GUIA DE USO DE PROCITE 5

GUIA DE USO DE PROCITE 5 GUIA DE USO DE PROCITE 5 Qué es Procite y para qué nos puede servir? ProCite es un gestor de referencias bibliográficas que podemos utilizar para: Crear y mantener fácilmente nuestras referencias bibliográficas

Más detalles

Los sistemas operativos

Los sistemas operativos 1. Combinación de correspondencia en LibreOffice Writer En esta práctica crearemos una carta personalizada para diez destinatarios diferentes utilizando la herramienta de combinación de correspondencia.

Más detalles

Descarga Automática. Manual de Usuario. Operador del Mercado Ibérico de Energía - Polo Español Alfonso XI, 6 28014 Madrid

Descarga Automática. Manual de Usuario. Operador del Mercado Ibérico de Energía - Polo Español Alfonso XI, 6 28014 Madrid Descarga Automática Manual de Usuario Operador del Mercado Ibérico de Energía - Polo Español Alfonso XI, 6 28014 Madrid Versión 5.2 Fecha: 2008-10-15 Ref : MU_DescargaAutomática.doc ÍNDICE 1 INTRODUCCIÓN...

Más detalles

Herramientas Informáticas para la Documentación Práctica 1. Introducción al navegador Netscape

Herramientas Informáticas para la Documentación Práctica 1. Introducción al navegador Netscape Herramientas Informáticas para la Documentación Práctica 1. Introducción al navegador Netscape Introducción y objetivos De modo muy resumido Internet es una red que interconecta redes de ordenadores. Conectándose

Más detalles

Tutores e internet. News con Outlook Express MINISTERIO Y CIENCIA SECRETARÍA GENERAL DE EDUCACIÓN Y FORMACIÓN PROFESIONAL

Tutores e internet. News con Outlook Express MINISTERIO Y CIENCIA SECRETARÍA GENERAL DE EDUCACIÓN Y FORMACIÓN PROFESIONAL MINISTERIO DE EDUCACIÓN Y CIENCIA SECRETARÍA GENERAL DE EDUCACIÓN Y FORMACIÓN PROFESIONAL DIRECCIÓN GENERAL DE EDUCACIÓN, FORMACIÓN PROFESIONAL E INNOVACIÓN EDUCATIVA CENTRO NACIONAL DE INFORMACIÓN Y COMUNICACIÓN

Más detalles

Manual del usuario TakePOS

Manual del usuario TakePOS Manual del usuario TakePOS Descarga de la aplicación Muchas gracias por obtener TakePOS. Desde la página oficial http://www.takepos.com puede descargar siempre la última versión. Si dispone de códigos

Más detalles

SIOM-Interfaz AM. Manual de Usuario. Operador del Mercado Ibérico de Energía - Polo Español Alfonso XI, 6 28014 Madrid. Versión 3.10 Fecha: 2010-09-17

SIOM-Interfaz AM. Manual de Usuario. Operador del Mercado Ibérico de Energía - Polo Español Alfonso XI, 6 28014 Madrid. Versión 3.10 Fecha: 2010-09-17 SIOM-Interfaz AM Manual de Usuario Operador del Mercado Ibérico de Energía - Polo Español Alfonso XI, 6 28014 Madrid Versión 3.10 Fecha: 2010-09-17 Ref : MU_InterfazAM_310.doc ÍNDICE 1 INTRODUCCIÓN...

Más detalles

PEDRO REVERTE GÓMEZ SERVICIOS DE RED E INTERNET / IMPLANTACIÓN DE APLICACIONES WEB 2º ASIR

PEDRO REVERTE GÓMEZ SERVICIOS DE RED E INTERNET / IMPLANTACIÓN DE APLICACIONES WEB 2º ASIR PEDRO REVERTE GÓMEZ SERVICIOS DE RED E INTERNET / IMPLANTACIÓN DE APLICACIONES WEB 2º ASIR Actividades con los navegadores (clientes): 1. Visita una Web que utilice HTTPS y comprueba los siguientes datos:

Más detalles

OBJETIVO: Introducción al editor de páginas web Macromedia Dreamweaver.

OBJETIVO: Introducción al editor de páginas web Macromedia Dreamweaver. SEMINARIO DIOCESANO DE CRISTO SACERDOTE TECNOLOGIA EN INFORMATICA GRADO: 11 TEMA: INTRODUCCIÓN A MACROMEDIA DREAMWEAVER OBJETIVO: Introducción al editor de páginas web Macromedia Dreamweaver. 1 Qué es

Más detalles

DISEÑOS DE PÁGINAS WEB CON N.V.U. E INICIACIÓN AL CÓDIGO HTML

DISEÑOS DE PÁGINAS WEB CON N.V.U. E INICIACIÓN AL CÓDIGO HTML DISEÑOS DE PÁGINAS WEB CON N.V.U. E INICIACIÓN AL CÓDIGO HTML Una página web es un documento escrito empleando un lenguaje denominado HTML (Hyper text Markup language; Lenguaje de marcas de hipertexto).

Más detalles

Practica 1 Estructura De Un Proyecto En ANDROID

Practica 1 Estructura De Un Proyecto En ANDROID Área y Sub-área: Informatica/Computacion Educador: _Luis Orozco Ciclo Escolar: 2015 Grado: 5to Secciones: A,B,C y D Practica 1 Estructura De Un Proyecto En ANDROID Seguimos con el Curso de Programación

Más detalles

ATLAS MANUAL DE USUARIO COMPONENTE INPUT IBAN

ATLAS MANUAL DE USUARIO COMPONENTE INPUT IBAN ATLAS MANUAL DE USUARIO COMPONENTE INPUT IBAN Versión 1.1 Área de Aplicaciones Especiales y Arquitectura de Software Hoja de Control Título Documento de Referencia Responsable Manual de usuario Componente

Más detalles

Páginas web ::: Formularios Diseño de materiales multimedia. Web 2.0. 1.9 Formularios

Páginas web ::: Formularios Diseño de materiales multimedia. Web 2.0. 1.9 Formularios 66 1.9 Formularios 67 1.9 Formularios 1.9.1 Qué es un formulario? Un formulario es un conjunto de casillas que se puede añadir a una página y que permite recoger datos que introduce el usuario para luego

Más detalles

InfoPath forma parte del paquete ofimático de Microsoft desde la versión XP (2003).

InfoPath forma parte del paquete ofimático de Microsoft desde la versión XP (2003). Formularios Los Sistemas Informacionales utilizan los datos derivados de los OAS y Transaccionales (nóminas, facturaciones, etc.) para, en su aspecto más básico, generar informes que ayuden a los directivos

Más detalles

El cliente de correo Mozilla Thunderbird es un programa de correo electrónico. Perfiles de usuario:

El cliente de correo Mozilla Thunderbird es un programa de correo electrónico. Perfiles de usuario: El cliente de correo Mozilla Thunderbird es un programa de correo electrónico. Perfiles de usuario: Lo primero que tenemos que hacer es crear una carpeta donde queramos guardar nuestro perfil. Es igual

Más detalles

RUEDA TORRES DULCE CAROLINA 3CM2 HIBERNATE EN UNA APLICACIÓN WEB

RUEDA TORRES DULCE CAROLINA 3CM2 HIBERNATE EN UNA APLICACIÓN WEB 3CM2 HIBERNATE EN UNA APLICACIÓN WEB 8 DE MAYO DE 2012 1. CREACION DE LA BASE DE DATOS Para llevar a cabo esta práctica se utiliza una base de datos MySQL llamada Sakila, una muestra gratis de base de

Más detalles

Laboratorio 6. Creación de sitios Web - Dreamweaver

Laboratorio 6. Creación de sitios Web - Dreamweaver UNIVERSIDAD CARLOS III DE MADRID. ESCUELA DE TURISMO. Informática aplicada al sector turístico Laboratorio 6. Creación de sitios Web - Dreamweaver El objetivo de este laboratorio es aprender a crear sitios

Más detalles

Desarrollo de aplicaciones web con WL Workshop

Desarrollo de aplicaciones web con WL Workshop CC5604 Desarrollo de aplicaciones empresariales con J2EE Guía de Trabajo Desarrollo de aplicaciones web con WL Workshop 1 Objetivos El objetivo de esta guía de trabajo es permitirle adquirir una experiencia

Más detalles

Tema 5: Tecnologías Web

Tema 5: Tecnologías Web Apuntes de Introducción a Internet Tema 5: Tecnologías Web Uploaded by Ingteleco http://ingteleco.webcindario.com ingtelecoweb@hotmail.com La dirección URL puede sufrir modificaciones en el futuro. Si

Más detalles

Manual de usuario de "Asistente Web"

Manual de usuario de Asistente Web Inicio > Construcción > Manuales de usuario > Asistente Web Manual de usuario de "Asistente Web" Qué hace este módulo? Asistente Web es un módulo que permite generar el esqueleto de nuestro sitio web en

Más detalles

GUÍA PARA MANEJAR GOOGLE DRIVE

GUÍA PARA MANEJAR GOOGLE DRIVE GUÍA PARA MANEJAR GOOGLE DRIVE 1 Universidad de Córdoba Grupo de Investigación AVI Ambientes Virtuales Interactivos GOOGLE DRIVE GOOGLE DOCS O GOOGLE DRIVE Google Docs es una sencilla pero potente suite

Más detalles

Ejercicio: Mensajes Alert, Confirm y Prompt

Ejercicio: Mensajes Alert, Confirm y Prompt Ejercicio: Mensajes Alert, Confirm y Prompt Utilizando Javascript podemos crear tres diferentes tipos de mensajes emergentes que se pueden usar para mostrar información, obtener confirmación u obtener

Más detalles

MANUAL DE MANTENIMIENTO PARA LA PÁGINA WEB DE PROYECTO ADL SUBIDA Y PUBLICACION DE DOCUMENTOS PARTE II

MANUAL DE MANTENIMIENTO PARA LA PÁGINA WEB DE PROYECTO ADL SUBIDA Y PUBLICACION DE DOCUMENTOS PARTE II MANUAL DE MANTENIMIENTO PARA LA PÁGINA WEB DE PROYECTO ADL SUBIDA Y PUBLICACION DE DOCUMENTOS PARTE II 1/16 DOCUMENTACION DE SUBIDA DE DOCUMENTOS E IMÁGENES NOTA: Desde el editor de documentos no se pueden

Más detalles

WEB SERVICES CON AXIS

WEB SERVICES CON AXIS WEB SERVICES CON AXIS Introducción Esta guía muestra cómo generar servicios web con AXIS. Se ha tomado como referencia básica el manual que aparece en http://www.eclipse.org/webtools/community/tutorials/bottomupaxis2webservice/bu_tutorial.html

Más detalles

Filezilla, un sencillo y potente programa ftp para Windows, Linux o Mac gratis y fácil de usar. (DV00405A)

Filezilla, un sencillo y potente programa ftp para Windows, Linux o Mac gratis y fácil de usar. (DV00405A) aprenderaprogramar.com Filezilla, un sencillo y potente programa ftp para Windows, Linux o Mac gratis y fácil de usar. (DV00405A) Sección: Divulgación Categoría: Herramientas informáticas Fecha revisión:

Más detalles

Desarrollo de Rich Entreprise Applications con Flex

Desarrollo de Rich Entreprise Applications con Flex Desarrollo de Rich Entreprise Applications con Flex Desarrollo de Rich Entreprise Applications con Flex Aplicaciones empresariales orientadas a web. Qué hemos ganado con las aplicaciones web Total ubicuidad.

Más detalles

Ministerio de Educación. Diseño de Presentaciones en la Enseñanza. Módulo 10: Plantillas y estilos

Ministerio de Educación. Diseño de Presentaciones en la Enseñanza. Módulo 10: Plantillas y estilos Ministerio de Educación Diseño de Presentaciones en la Enseñanza Módulo 10: Plantillas y estilos Instituto de Tecnologías Educativas 2011 Diseño de Presentaciones en la Enseñanza (OpenOffice) Plantillas

Más detalles

DJ Java Decompilar: Manual de usuario

DJ Java Decompilar: Manual de usuario DJ Java Decompilar: Manual de usuario Fecha: 28/09/2007 Referencia: EJIE S.A. Mediterráneo, 3 Tel. 945 01 73 00* Fax. 945 01 73 01 01010 Vitoria-Gasteiz Posta-kutxatila / Apartado: 809 01080 Vitoria-Gasteiz

Más detalles

3.4. Reload Editor ( Guía de Uso).

3.4. Reload Editor ( Guía de Uso). 3.4. Reload Editor ( Guía de Uso). Anterior 3. Lors Management Siguiente 3.4. Reload Editor ( Guía de Uso). 3.4.1. Preguntas básicas sobre Reload Editor. - Qué hace el programa Reload Editor? RELOAD Editor

Más detalles

Edición de Video 2.0 Centro de Formación www.sceu.frba.utn.edu.ar

Edición de Video 2.0 Centro de Formación www.sceu.frba.utn.edu.ar Edición de Video 2.0 Centro de Formación p. 2 Módulo 2: Edición, Render y Exportación Unidad 3: Avidemux (Editor de video) p. 3 Bloques temáticos: Unidad 3: Avidemux (Editor de video). p. 4 Avidemux (Edición

Más detalles

Creación y manejo de documentos PDF

Creación y manejo de documentos PDF Creación y manejo de documentos PDF Compilado por José Mª Vitaller Talayero Departamento de Didáctica y Teoría de la Educación Facultad de Formación de Profesorado y Educación Universidad Autónoma de Madrid

Más detalles

Exporta la construcción para su visualización en Internet, es decir, como applet dentro de una página html.

Exporta la construcción para su visualización en Internet, es decir, como applet dentro de una página html. 13. Applets, JavaScript y XML 13.2 Applets Objetivos GeoGebra permite de una forma muy sencilla incorporar cualquier construcción a una página web, creando así una "miniaplicación" web. Cada una de estas

Más detalles

SSH. El siguiente paso será descargarnos el módulo sshd.wbm.gz de la página www.webmin.com para instalarlo.

SSH. El siguiente paso será descargarnos el módulo sshd.wbm.gz de la página www.webmin.com para instalarlo. SSH Para instalar un servidor SSH en Ubuntu, tendremos que tener el paquete OpenSSH instalador con el gestor de paquetes Sypnatic. El cliente suele estar instalado por defecto. El siguiente paso será descargarnos

Más detalles

SEMANA NO.1. GUIA No.1 INTRODUCCIÓN A DISEÑO WEB CON ADOBE DREAMWEAVER CS3

SEMANA NO.1. GUIA No.1 INTRODUCCIÓN A DISEÑO WEB CON ADOBE DREAMWEAVER CS3 TEMATICA OBJETIVO GUIA No.1 INTRODUCCIÓN A DISEÑO WEB CON ADOBE DREAMWEAVER CS3 Reconocer el ambiente de trabajo de Diseño Web Con Adobe Dreamweaver Cs3 identificando sus herramientas básicas y a través

Más detalles

Conceptos Generales en Joomla 1.7.2.

Conceptos Generales en Joomla 1.7.2. JOOMLA 1.7 CONCEPTOS GENERALES. 1.- Introducción. Una vez realizada la instalación de Joomla! en nuestro servidor, observemos detenidamente lo que hemos conseguido, y así poder ir entendiendo las posibilidades

Más detalles

FRAMEWORK 2 Creación de Servicios Web

FRAMEWORK 2 Creación de Servicios Web Creación de Versión 1.1 Área de Aplicaciones Especiales y Arquitectura de Software Página 1 de 21 Hoja de Control Título Documento Referencia Responsable de Creación de Área de Aplicaciones Especiales

Más detalles

12.1. Definición de un fichero XML

12.1. Definición de un fichero XML XML 12 XML son las siglas de Extensible Markup Language y desde hace unos años se ha convertido en un estándar para el manejo de datos debido a la facilidad con la que los propios usuarios pueden crear

Más detalles

Pasamos ahora a definir brevemente cual es el método de conexión más habitual usando un entorno gráfico.

Pasamos ahora a definir brevemente cual es el método de conexión más habitual usando un entorno gráfico. Clientes de FTP en modo gráfico Introducción Ya vimos en la primera parte de nuestro curso de FTP, que la conexión a servidores inicialmente se realizaba (y aún se sigue haciendo) en modo texto. Aunque

Más detalles

JavaScript toma su sintaxis de los lenguajes de programación más conocidos, fundamentalmente C/C++, aunque también algo de Pascal.

JavaScript toma su sintaxis de los lenguajes de programación más conocidos, fundamentalmente C/C++, aunque también algo de Pascal. 1 JavaScript 1.1 Qué es JavaScript? JavaScript es un lenguaje interpretado. Es idóneo para trabajar en Web, ya que son los navegadores que utilizamos los que interpretan (y por tanto ejecutan) los programas

Más detalles

Windows XP Transferencia de archivos y configuraciones

Windows XP Transferencia de archivos y configuraciones Servicio de Informática Atención al Usuario Windows XP Transferencia de archivos y configuraciones Sección de Atención al Usuario Ultima modificación: 01 de Julio de 2.003 Transferencia de archivos y configuraciones

Más detalles

SUBIR ARCHIVOS CON FTP. TRABAJAR EN UN SERVIDOR REMOTO. CREAR UNA PÁGINA WEB CON PROGRAMACIÓN PHP. (CU00814B)

SUBIR ARCHIVOS CON FTP. TRABAJAR EN UN SERVIDOR REMOTO. CREAR UNA PÁGINA WEB CON PROGRAMACIÓN PHP. (CU00814B) APRENDERAPROGRAMAR.COM SUBIR ARCHIVOS CON FTP. TRABAJAR EN UN SERVIDOR REMOTO. CREAR UNA PÁGINA WEB CON PROGRAMACIÓN PHP. (CU00814B) Sección: Cursos Categoría: Tutorial básico del programador web: PHP

Más detalles

INDICE DEL CURSO APRENDER PROGRAMACIÓN JAVA DESDE CERO. PROGRAMACIÓN ORIENTADA A OBJETOS (CU00601B)

INDICE DEL CURSO APRENDER PROGRAMACIÓN JAVA DESDE CERO. PROGRAMACIÓN ORIENTADA A OBJETOS (CU00601B) APRENDERAPROGRAMAR.COM INDICE DEL CURSO APRENDER PROGRAMACIÓN JAVA DESDE CERO. PROGRAMACIÓN ORIENTADA A OBJETOS (CU00601B) Sección: Cursos Categoría: Curso Aprender programación Java desde cero Fecha revisión:

Más detalles

(http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=openesb-instalarintroduccion)

(http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=openesb-instalarintroduccion) Tutorial de BPEL con OpenESB (I) Indice 1. Tutorial de BPEL con OpenESB (I) 1. Introducción 2. El proceso de negocio 3. Identificar los servicios web requeridos 4. Modelar el proceso de negocio con BPEL

Más detalles