Manual Flex 3yp6h

  • ed by: Katina Baker
  • 0
  • 0
  • January 2023
  • PDF

This document was ed by and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this report form. Report r6l17


Overview 4q3b3c

& View Manual Flex as PDF for free.

More details 26j3b

  • Words: 11,272
  • Pages: 63


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

12.1. 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

Adobe Flex SDK y Flex Builder 3

Universidad de Cádiz

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 = "http://www.google.es"; 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, itiendo 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

Adobe Flex SDK y Flex Builder 3

Universidad de Cádiz

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 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: <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" 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

Adobe Flex SDK y Flex Builder 3

Universidad de Cádiz

public function setTexto(texto:String):void { areaTexto.text = texto; } private function cerrar():void { PopUpManager.removePopUp(this); } ]]>

Ahora nos vamos al componente chat1, debemos añadir un botón que lance un evento que nos permita ver el histórico, por lo que añadimos un botón justo al lado del de envío de mensajes, tal como muestra la siguiente imagen:

Ilustración 24: Componente chat1.mxml modificado

Ahora editamos el método “send()” del componente de forma que escriba en un SharedObject el mensaje enviado más la fecha actual, de forma que tengamos algo parecido a lo mostrado a continuación: private function send():void{ var message:IMessage = new AsyncMessage(); message.body.chatMessage = msg.text; producer.send(message); var msgAux:String = msg.text; msg.text = ""; // Escribimos el mensaje en el historial var soHistorico:SharedObject = SharedObject.getLocal("historico"); if(soHistorico.data.conversaciones != null)

53

Adobe Flex SDK y Flex Builder 3

Universidad de Cádiz

{ soHistorico.data.conversaciones += msgAux + " enviado el " + (new Date()).toDateString() + "\n"; soHistorico.flush(); } else { soHistorico.data.conversaciones = msgAux + " enviado el " + (new Date()).toDateString() + "\n"; soHistorico.flush(); } }

Ahora nos vamos al nuevo botón del componente y le añadimos un evento “click” al que asignaremos un método “verConversaciones()”, cuyo código es el siguiente: private function verConversaciones():void { var soHistorico:SharedObject = SharedObject.getLocal("historico"); var his:Historico = Historico(PopUpManager.createPopUp(this, Historico, false)); PopUpManager.centerPopUp(his); his.setTexto(soHistorico.data.conversaciones); }

El método “verConversaciones()” lee del SharedObject en el que hemos escrito previamente, crea un objeto “Historico” mediante el gestor de “popups”, de forma que se muestre como una ventana emergente, y le asigna el contenido leído. Podemos probar el chat modificado y comprobar cómo las conversaciones se guardan a pesar de haber el navegador o incluso después de reiniciar el servidor.

14.

Adobe AIR

Adobe AIR es una extensión de Flex SDK que nos permite crear aplicaciones de escritorio. Funciona de forma similar a las aplicaciones flash para la web, pero en este caso se utiliza un reproductor diferente al flash player, el reproductor Adobe AIR, que puede descargarse de la siguiente página: http://get.adobe.com/es/air/ Las aplicaciones se construyen de forma similar a las aplicaciones Flex, pero con la particularidad de que podemos acceder al sistema de ficheros de nuestro ordenador, además cada aplicación Adobe AIR puede acceder a su base de datos SQLite. El principal problema que presenta Adobe AIR es su incapacidad para comunicarse directamente con otras aplicaciones del sistema, aunque actualmente se están desarrollando soluciones para paliar esta deficiencia, no son especialmente sencillas ni eficientes.

14.1. Creando una aplicación con Adobe AIR Vamos a crear una sencilla aplicación con Adobe AIR, un editor de texto que nos permita guardar y cargar nuestros ficheros de texto. Para ello vamos a crear un nuevo proyecto Adobe AIR. Hacemos clic en File\New\Flex Project y marcamos “Desktop Application”:

54

Adobe Flex SDK y Flex Builder 3

Universidad de Cádiz

Ilustración 25: Ventana de creación de proyecto Adobe AIR

Le damos como nombre Editor. En la casilla “Application server type”, debemos tener puesto “none”. Pulsamos “Finish”. Como un editor de texto consta de una interfaz muy simple, podemos añadir directamente los elementos en nuestro fichero “Editor.mxml”. Añadimos un componente VBox que ocupe todo el espacio (altura y anchura al 100%), y dentro un HBox y un TextArea, de forma que nos quede así:

55

Adobe Flex SDK y Flex Builder 3

Universidad de Cádiz

Añadimos tres botones al HBox, uno para guardar, otro para “guardar como” y otro para abrir:

56

Adobe Flex SDK y Flex Builder 3

Universidad de Cádiz

A los botones les llamaremos: botonGuardar, botonGuardarComo y botonAbrir y al TextArea, areaTexto. De forma que el código nos quede así: <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:VBox x="0" y="0" width="100%" height="100%"> <mx:HBox width="100%"> <mx:Button label="Abrir" id="botonAbir"/> <mx:Button label="Guardar" id="botonGuardar"/> <mx:Button label="Guardar como" id="botonGuardarComo"/> <mx:TextArea width="100%" height="100%" id="areaTexto"/>

Si arrancamos nuestra aplicación y vemos el resultado hasta ahora. Vamos a crear una nueva clase ActionScript, denominada EntradaSalida, para gestionar la lectura y escritura de nuestros ficheros en el sistema. Pulsamos File\New\ActionScript class. Primero vamos a crear dos atributos en nuestra clase EntradaSalida, un atributo “buffer” de tipo String y un atributo “fichero” de tipo File y sus correspondientes get y set:

57

Adobe Flex SDK y Flex Builder 3

Universidad de Cádiz

package { import flash.filesystem.File; public class EntradaSalida { private var buffer:String = null; private var fichero:File = null; public function EntradaSalida() { } public function getBuffer():String { return this.buffer; } public function setBuffer(buffer:String):void { this.buffer = buffer; } public function getFichero():File { return this.fichero; } public function setFichero(fichero:File):void { this.fichero = fichero; } } }

Ahora crearemos el método para “guardar como”: public function guardarComo(texto:String):void { var file:File = File.desktopDirectory; file.browseForSave("Guardar como:"); buffer = texto; file.addEventListener(Event.SELECT, manejadorGuardarComo); }

El método guardarComo recibe como parámetro de entrada una cadena de texto y crea un objeto File que nos permite abrir el explorador del sistema para elegir la ubicación donde guardar el fichero. Guardamos el texto en la variable auxiliar “buffer” de la clase y añadimos a nuestra variable “file” un “listener” (manejadorGuardarComo) que escucha cuando el selecciona la ruta donde almacenar el fichero. Ahora debemos implementar el “listener” que se llamará manejadorGuardarComo y que recibe un evento como parámetro: private function manejadorGuardarComo(event:Event):void { //Cogemos el nombre del fichero desde la ruta completa var tmpArr:Array = File(event.target).nativePath.split(File.separator); //Creamos un nuevo fichero con la extensión por defecto

58

Adobe Flex SDK y Flex Builder 3

Universidad de Cádiz

fichero = new File("file:///" + tmpArr.(File.separator)); //Guardamos var stream:FileStream = new FileStream(); stream.open(fichero, FileMode.WRITE); stream.writeUTFBytes(buffer); buffer = null; stream.close(); }

El método manejadorGuardarComo crea un nuevo fichero (en una variable de la clase fichero), lo guarda y a continuación escribe el contenido en el destino elegido. Vamos ahora a implementar el método guardar: public function guardar(texto:String):void { if(this.fichero == null) { guardarComo(texto); } else { //Guardamos var stream:FileStream = new FileStream(); stream.open(this.fichero, FileMode.WRITE); stream.writeUTFBytes(texto); buffer = null; stream.close(); } }

El método “guardar” comprueba si existe un fichero asignado ya en nuestra clase, si lo hay guarda directamente y si no lo hay, llamará al método “guardarComo”. Finalmente crearemos el método “abrir”. El método abrir recibirá como parámetro un “TextArea” que es el área de texto de nuestro editor, para poder cargar allí el contenido el fichero abierto: public function abrir(areaTexto:TextArea):void { // Almacenamos el área de texto this.areaTexto = areaTexto; // Lanzamos el explorador var file:File = new File(); file.browseForOpen("Abrir"); file.addEventListener(Event.SELECT, manejadorAbrir); }

Debido a que necesitamos añadir un listener que escuche cuando el pulse abrir en el explorador, tendremos que crear una variable auxiliar en la clase que almacene nuestra área de texto entre ambas llamadas, ya que no se puede pasar parámetros entre un método y su listener, lo que supone uno de los principales inconvenientes de los eventos. private function manejadorAbrir(event:Event):void { //Cogemos la ruta del fichero y abrimos fichero = new File(File(event.target).nativePath); var stream:FileStream = new FileStream(); // Abrimos el fichero y cogemos su contenido stream.open(fichero, FileMode.READ); // Cargamos el texto leído en el área de texto

59

Adobe Flex SDK y Flex Builder 3

Universidad de Cádiz

areaTexto.text = stream.readUTFBytes(fichero.size); }

Ya tenemos nuestra clase “EntradaSalida” terminada, ahora sólo nos falta asociarla a la vista gráfica de forma que cuando pulsemos los botones seamos capaces de abrir, editar y guardar nuestros ficheros. Abrimos el fichero “Editor.mxml”, y añadimos a cada botón un evento asociado al clic: <mx:Button label="Abrir" id="botonAbir" click="abrir()"/> <mx:Button label="Guardar" id="botonGuardar" click="guardar()"/> <mx:Button label="Guardar como" id="botonGuardarComo" click="guardarComo()"/>

Ahora debemos implementar los métodos asociados a los clic, primero añadimos las etiquetas de script que nos permiten añadir código a nuestro mxml: <mx:Script> <![CDATA[ ]]>

Justo encima de la etiqueta . Dentro creamos una variable “EntradaSalida” y los tres métodos: <mx:Script> <![CDATA[ private var entradaSalida:EntradaSalida = new EntradaSalida(); private function abrir():void { } private function guardar():void { } private function guardarComo():void { } ]]>

Añadimos el contenido a los métodos invocando a nuestra variable “entradaSalida”, de forma que el código completo nos quede de esta forma: <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:VBox x="0" y="0" width="100%" height="100%"> <mx:HBox width="100%"> <mx:Button label="Abrir" id="botonAbir" click="abrir()"/> <mx:Button label="Guardar" id="botonGuardar" click="guardar()"/> <mx:Button label="Guardar como" id="botonGuardarComo" click="guardarComo()"/> <mx:TextArea width="100%" height="100%" id="areaTexto"/> <mx:Script>

60

Adobe Flex SDK y Flex Builder 3

Universidad de Cádiz

<![CDATA[ private var entradaSalida:EntradaSalida = new EntradaSalida(); private function abrir():void { this.areaTexto.text = entradaSalida.abrir(); } private function guardar():void { entradaSalida.guardar(this.areaTexto.text); } private function guardarComo():void { entradaSalida.guardarComo(this.areaTexto.text); } ]]>

Ya tenemos nuestro editor multiplataforma implementado:

Ilustración 26: Prueba del editor de texto

Ahora sólo nos faltaría crear un instalable que nos permita instalarlo en nuestros equipos y configurar las opciones de instalación, como serían asociar una extensión de fichero determinados a nuestro programa, añadir un icono de instalación, etc. Todo esto se puede configurar en el archivo “Editor-app.xml” que se ha creado automáticamente en nuestro proyecto, para más información sobre el fichero de configuración consultar: http://help.adobe.com/en_US/AIR/1.5/devappsflex/WS5b3ccc516d4fbf351e63e3d118666ade 46-7ff1.html 61

Adobe Flex SDK y Flex Builder 3

Universidad de Cádiz

Cuando hayamos añadido todas las características de instalación que queramos, podemos crear un instalable pulsando en “File\Export\Release Build”, aunque sólo nos permitirá instalarlo en sistemas con Adobe AIR previamente instalado.

Anexo I: Instalación de Adobe Flex SDK Flex SDK es opensource, se puede descargar http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex3sdk

en

la

dirección

Lo descargamos y extraemos en una nueva carpeta, por ejemplo “C:\Flex_HOME” Lo primero es configurar Adobe Flex SDK, por lo que añadimos a las variables de entorno el directorio bin (Flex_HOME/bin) Existen dos comandos principales: compc y mxmlc •

mxmlc se utiliza para construir los ficheros .swf, que pueden ser reproducidos por Flash Player. Un ejemplo de compilación podría ser >mxmlc Clase.as (Si se trata de una clase ActionScript) >mxmlc Clase.mxml (Si se trata de un mxml)

Se generará un archivo .swf cada vez que compilemos y que podremos utilizar ya como cliente, ya que se reproducirá con flash player. •

compc se utiliza para construir bibliotecas, obteniendo ficheros .swc

Con Adobe Flex SDK y el comando mxmlc podemos crear cualquiera de los ejemplos del manual, simplemente creando un directorio con los ficheros fuentes y compilando el fichero Main del proyecto.

Anexo II: Creando y compliando una aplicación AIR con Adobe Flex SDK Adobe AIR viene incluido en Adobe Flex SDK, las aplicaciones Adobe AIR se pueden crear utilizando Flex Builder, o creando directamente los proyectos en nuestro equipo y compilando los ficheros de la siguiente forma. Utilizando el comando amxmlc de Flex_HOME\bin podemos compilar nuestros proyectos AIR, por ejemplo: >amxmlc Editor.mxml Se generará un archivo Editor.swf, pero no podremos reproducirlo ya que se trata de un .swf para Adobe AIR. Para reproducirlo o para crear el instalador de la aplicación debemos crear un archivo xml con la definición de los parámetros de la aplicación, en este caso se llamará Editorapp.xml: Editor 0.1 Editor Editor.swf true <systemChrome>none true

62

Adobe Flex SDK y Flex Builder 3

Universidad de Cádiz

<width>400 200


Este archivo básicamente sirve para configurar la aplicación y la instalación de la misma, ya que las aplicaciones Adobe AIR pueden instalarse, es importante que el xml contenga correctamente la referencia al .swf generado. El xml puede configurar más opciones, una descripción se encuentra en: http://help.adobe.com/en_US/AIR/1.5/devappsflex/WS5b3ccc516d4fbf351e63e3d118666ade 46-7ff1.html Para probar nuestra aplicación debemos ejecutar el comando adl de Flex_HOME\bin, de la forma: >adl Editor-app.xml De esta forma se lanzará la aplicación y podremos probarla. Para crear el instalador de nuestra aplicación debemos hacer dos cosas utilizando el comando adt de Flex_HOME\bin: 1. Crear un certificado: >adt -certificate -cn SelfSigned 1024-RSA sampleCert.pfx sample

2. Crear el instalador: >adt -package -storetype pkcs12 -keystore sampleCert.pfx Editor.air Editor-app.xml Editor.swf

63

Related Documents 171j1w

Manual Flex 3yp6h
January 2023 0
Manual De Flex Pendant 182s3j
December 2019 34
Manual Linha 4000 Flex 512j4d
May 2020 19
C216660 Manual Alard Flex 4o3l1j
March 2021 0
Manual Power Flex 40 2e39b
December 2019 64
Manual Dual Flex 5c493b
March 2021 0

More Documents from "Katina Baker" 6c443o

Manual Flex 3yp6h
January 2023 0
Expo Unidad 1 Tema 1.4 Joaquin Rosales 455120
March 2021 0
Ethics And The Conduct Of Business 5th Edition Pdf 7210x
October 2019 123
2c82t
November 2020 0
2c82t
March 2021 0
Sweet Child O Mine Saxophone Quartet i2k67
November 2019 82