Yo he sido el encargado de estrenar el blog, por lo que todavía está un poco vacío, pero día a día vamos a ir comentando un montón de temas interesantes. Tanto es así que he creído conveniente hacer una referencia a dicho blog porque creo que es un feed al que todos deberíamos de estar suscrito :). Sin más rodeos aquí dejo el link http://www.masterdlabs.es.

Espero que os guste

Saludos!!

1.- Crear una clase que extienda de la clase Loader en la cual nos declaramos un bitmap que puede estar formado por cualquier tipo de imagen (una forma poligonal que nos ofrece la API de Flex, un logo, una combinación de ambos, etc., etc.) Dentro de esta clase trataremos de representar el progreso de descarga como queramos (dibujando un rectángulo, haciendo que un logo se vaya iluminando de izquierda a derecha, …) esto ya queda en la imaginación de cada uno

2.- Crear otra clase que extienda de la clase DownloadProgressBar, dentro de la cual monitorizaremos todos los eventos de carga de la aplicación (inicialización, progreso, error, finalización, etc.) y a través de la información que nos proporcionan dichos eventos, representaremos la información de la carga en la clase del punto anterior. Una vez creadas ambas clases, en la propiedad preloader de nuestra aplicación principal, especificaremos la clase que hemos creado en este segundo paso para indicarle a la aplicación que este va a ser nuestro preloader.

Como todo esto se ve mucho mejor con código, podéis descargaros este ejemplo de lo que acabo de contar. Al ejecutar la aplicación da un error. Este error está puesto a posta para que se pueda ver la barra de progreso personalizada. Podéis ver el ejemplo aquí.

 Saludos!!

Primero habrá que cargar la imagen que queremos que sea nuestro icono en el área de notificación. Para ello utilizaremos la clase Loader. Además monitorizaremos el evento que queremos que sea el que haga aparecer el icono en el área (En el ejemplo se captura el evento de minimizar la ventana). Para ello escribiremos:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

[Bindable] 
private var iconoMinimizado:BitmapData; 
 
private function creationComplete():void{ 
    //Cargamos el icono de la bandeja de notificacion y monitorizamos el evento de minimizar 
    var loader:Loader = new Loader(); 
    loader.contentLoaderInfo.addEventListener(Event.COMPLETE, inicializarSystray); 
    loader.load(new URLRequest("assets/icon.png")); 
    this.addEventListener(NativeWindowDisplayStateEvent.DISPLAY_STATE_CHANGE, stateChanging); 
} 
 
private function stateChanging(event:NativeWindowDisplayStateEvent):void{ 
    event.preventDefault(); 
    if(event.afterDisplayState == NativeWindowDisplayState.MINIMIZED){ 
        //Ocultamos la aplicacion y mostramos el icono del systray 
        stage.nativeWindow.visible = false 
        NativeApplication.nativeApplication.icon.bitmaps = [iconoMinimizado]; 
    } 
}

En la función que hemos indicado que queremos que sea la que se ejecute cuando se cargue la imagen (inicializarSystray), inicializaremos el menú del icono, el evento click sobre él (en nuestro caso será para restaurar la aplicación) y el tooltip que se mostrará.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

private function inicializarSystray(event:Event):void { 
    iconoMinimizado = event.target.content.bitmapData; 
    if(NativeApplication.supportsSystemTrayIcon){ 
        SystemTrayIcon(NativeApplication.nativeApplication.icon).tooltip = "Ejemplo de Systray"; 
        SystemTrayIcon(NativeApplication.nativeApplication.icon).addEventListener(MouseEvent.CLICK, restaurarAplicacion); 
 
        //Creamos su menu y lo añadimos 
        var menu:NativeMenu = new NativeMenu(); 
        var restaurarNativeMenuItem:NativeMenuItem = new NativeMenuItem("Restaurar"); 
        var maximizarNativeMenuItem:NativeMenuItem = new NativeMenuItem("Maximizar"); 
        var salirNativeMenuItem:NativeMenuItem = new NativeMenuItem("Salir"); 
 
        //Manejador de cada uno de los items del menu 
        restaurarNativeMenuItem.addEventListener(Event.SELECT, restaurarAplicacion); 
        maximizarNativeMenuItem.addEventListener(Event.SELECT, maximizarAplicacion); 
        salirNativeMenuItem.addEventListener(Event.SELECT, cerrarAplicacion); 
 
        //Añadimos los menuitems al menu, y el menu al icono 
        menu.addItem(restaurarNativeMenuItem); 
        menu.addItem(maximizarNativeMenuItem); 
        menu.addItem(new NativeMenuItem("",true)); //Esto es un separador 
        menu.addItem(salirNativeMenuItem); 
        SystemTrayIcon(NativeApplication.nativeApplication.icon).menu = menu; 
    } 
} 
 
private function restaurarAplicacion(event:Event):void { 
    //Ponemos la aplicacion visible y la maximizamos 
    stage.nativeWindow.visible = true; 
    stage.nativeWindow.restore(); 
 
    //Eliminamos el icono del systray 
    NativeApplication.nativeApplication.icon.bitmaps = []; 
} 
 
private function maximizarAplicacion(evt:Event):void { 
    //Ponemos la aplicacion visible y la maximizamos 
    stage.nativeWindow.visible = true; 
    stage.nativeWindow.maximize(); 
 
    //Eliminamos el icono del systray 
    NativeApplication.nativeApplication.icon.bitmaps = []; 
} 
 
private function cerrarAplicacion(event:Event):void{ 
    this.close(); 
}

Con este código, cada vez que minimicemos la aplicación, en lugar de estar en la parte inferior, nos aparecerá un icono en el área de notificación y dándole un click normal, restauraremos la aplicación, y dándole un click con el botón derecho, nos aparecerá un menú de restaurar, maximizar o cerrar.

Para más comodidad os podéis descargar el proyecto AIR con el código fuente para verlo con más calma :). Espero que sirva de ayuda. Saludos!!

Tras dos días de plena investigación, encontré mucha documentación sobre BlazeDS acerca de unos tags <cluster>, unos ficheros jgroups-tcp.xml y jgroups-udp.xml, etc., etc. Tras probar todo esto, de todas las formas posibles, el error seguía manteniéndose y no había forma de hacer una llamada remota. Finalmente haciendo pruebas ya a la desesperada, probamos a marcar las clases Java que son llamadas como objeto remoto como Serializables.

Para nuestra sorpresa y alegría, con esto ya se podían hacer llamadas remotas con la aplicación en el servidor ejecutándose en cluster, así que si alguna vez os veis en la necesidad de marcar una aplicación como <distributable />, para que las llamadas funcionen sólo tenéis que marcar los RO como Serializables y todo funcionará con total normalidad.

¡Saludos! (PD: Creo que es el post más chorras que he escrito, pero os estoy ahorrando horas y horas de pruebas :D)

El único problema que he tenido haciendo pruebas, es que me tope con un bug reconocido por Google. Este bug consiste en que cuando quieres codificar una dirección a un objeto de LatLng (latitud/longitud) para mostrarlo en el mapa, si codificas una misma dirección 2 veces, a la segunda vez te salta un error en la ejecución. Este error, por suerte, se puede corregir si cada vez que hacemos una codificación con la instrucción Geocoder.geocode() colocamos inmediatamente antes la isntrucción Geocoder.resetCache(). Esto hace que antes de hacer una búsqueda limpiemos la caché de búsquedas, y así evitar el error antes comentado.

Por si alguien quiere ver un ejemplo de todo esto, me he picado este ejemplo de uso. Si alguien se quiere descargar el código fuente, le puede dar con el botón derecho al programa y darle a download source, o descargarse directamente el proyecto para Flex Builder 3.

Saludos!!

(Nota: Hay veces que el ejemplo no carga bien el segundo mapa. Si esto pasa hay que recargar la página en el navegador una o dos veces. La verdad es que no sé porque ocurre esto, sólo pasa con el segundo mapa :S )

Una vez instalado el servidor, ya podemos empezar a realizar aplicaciones que utilicen Streaming de vídeo y audio. En mi caso, he realizado el típico chat, pero en este caso con audio y vídeo utilizando webcam y micrófono. Para ello habrá que programar la lógica del servidor y el cliente Flex que se conecta al servidor.

Para la parte del servidor utilizaremos el siguiente código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

application.onAppStart = function(){ 
    application.listaUsuarios = SharedObject.get("listaUsuarios", 
                                                                false); 
}    
 
application.onConnect = function(client, name, identifier){ 
    client.identifier = identifier; 
    application.listaUsuarios.setProperty(identifier, name); 
    application.acceptConnection(client); 
}    
 
application.onDisconnect = function(client){ 
    if( client.identifier != undefined ){ 
        application.listaUsuarios.setProperty(client.identifier, 
                                                         null); 
    } 
}

En este códido lo que le estamos indicando al servidor es que cuando arranque la aplicación cree un objeto compartido (más adelante veremos como utilizarlo) llamado listaUsuarios, que contendrá todos los usuarios que están haciendo uso del chat, que cuando un cliente se conecte, lo añada a la lista de usuarios y acepte la conexión y que cuando un cliente se desconecte, lo elimine de la lista de usuarios.

Todo esto irá en un fichero llamado main.asc, y para añadirlo al servidor tendremos que desplazarnos al directorio de instalación del servidor y dentro del directorio applications crear un nuevo directorio con el nombre de nuestra aplicacion (en el ejemplo videoconferencia) en el cual pegaremos el fichero main.asc. En el caso de que tengamos el servidor arrancado, deberemos reiniciarlo para que lo reconozca.

Ahora ya podemos programar el cliente Flex. Lo único que deberemos hacer será conectarnos con el servidor al iniciar la aplicación y sincronizarnos con el objeto remoto listaUsuarios para que cuando haya algún cambio en él, recibamos su nuevo valor y podamos realizar las operaciones que creamos oportunas. El código necesario es el siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

var nc:NetConnection ; 
public function conectar():void{ 
    //Creamos el objeto de conexion 
    nc= new NetConnection(); 
    nc.objectEncoding = ObjectEncoding.AMF0;   
 
    //Añadimos el manejador del evento de estado e intentamos conectarnos 
    nc.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler); 
    nc.client = this; 
    nc.connect("rtmp://localhost:1935/videoconferencia", "", ""); 
}   
 
public function netStatusHandler(event:NetStatusEvent):void{ 
    switch( event.info.code ) { 
        case "NetConnection.Connect.Success": //Conexion OK 
            obtenerObjetoCompartido(); 
            break; 
        case "NetConnection.Connect.Failed": //Error 
            Alert.show("Error al conectarse al servidor"); 
    } 
}   
 
public function obtenerObjetoCompartido():void{ 
    SharedObject.defaultObjectEncoding  = flash.net.ObjectEncoding.AMF0; 
    listaUsuarios = SharedObject.getRemote("listaUsuarios", nc.uri, false); 
    //Añadimos el manejador del evento de sincronización, así cuando el objeto cambie se 
    //llamará a la función sincronizacionObjetoRemoto 
    listaUsuarios.addEventListener(SyncEvent.SYNC, sincronizacionObjetoCompartido); 
    listaUsuarios.connect(nc); 
}   
 
public function sincronizacionObjetoCompartido(event:SyncEvent):void{ 
    var usuarios:Object= event.target.data;//Ya tenemos el objeto listaUsuarios actualizado 
    //A partir de aqui realizamos las tareas que creamos oportunas 
}

En la primera función realizamos la petición de conexión con el servidor y le añadimos el manejador del evento NET_STATUS, cuyo código se encuentra en la segunda función. Por otro lado tenemos en la tercera función el código para obtener un objeto compartido (SharedObject) y el manejador del evento SyncEvent.SYNC, que es la cuarta función. Cada vez que en el servidor el objeto compartido listaUsuarios cambie, se ejecutará el código de la cuarta función. Podemos tener tantos objetos compartidos como queramos, todos ellos se pueden ver en la consola de administración del Flash Media Server.

Como todo esto es mucho mejor verlo con un programa en acción, he preparado este ejemplo de chat por videoconferencia. (Nota: El ejemplo empieza a dar problemas a partir de que un cuarto usuario se conecte. Esto puede ser debido a que el servidor de desarrollo gratuito que nos ofrece adobe tengas ciertas limitaciones, o que alguna configuración del servidor esté mal definida).

Espero que sirva de ayuda. Saludos!!

Para hacer que nuestra aplicación compruebe si es la versión más reciente, no hay más que seguir los siguientes pasos:

1.- Comprobar que la aplicación en ejecución es la más reciente: Aquí los de Adobe nos han dejado esto un poco a nuestra elección. Es decir, no hay manera de comprobar la versión de un archivo .air (sí que podemos obtener la versión de la aplicación en ejecución), por lo que el sistema está dentro de la imaginación de cada uno. Yo en mi caso esto lo he hecho dejando un archivo muy simple xml en el servidor de la siguiente manera:

<version>X.X</version>

Desde la aplicación hago una llamada a la URL donde se encuentra este archivo, obtengo el valor de la etiqueta version, y la comparo con la versión de la aplicación en ejecución. Para obtener la versión de la aplicación no hay más que utilizar estas tres líneas:

1
2
3

var appXML:XML = NativeApplication.nativeApplication.applicationDescriptor; 
var air:Namespace = appXML.namespaceDeclarations()[0]; 
var version:String = appXML.air::version;

Para obtener la versión del servidor utilizaremos el siguiente código:

1
2
3
4
5
6
7
8
9
10
11
12

var loader:URLLoader = new URLLoader; 
loader.load(new URLRequest("url archivo version.xml"));
 
private function resultEvent(event:Event):void{ 
var loader:URLLoader = event.currentTarget as URLLoader; 
versionServidor = new XML(loader.data).toString(); 
if(versionServidor != version){ 
    versionMasReciente = false; 
}else{ 
    versionMasReciente = true;
} 
}

Si las versiones de la aplicación y del servidor son diferentes, supondremos que en el servidor hay una versión más actual. Esto lo he hecho yo así, cada uno puede hacer el mecanismo que prefiera.

2.- Descargar la versión del servidor: El siguiente paso es descargar  la versión del instalable de la aplicación que hay en el servidor. Esto se hace de la siguiente manera:

1
2
3
4
5

var request:URLRequest = new URLRequest("url archivo instalable .air"); 
var urlStream:URLStream = new URLStream(); 
var instalableBinario:ByteArray = new ByteArray(); 
urlStream.addEventListener( Event.COMPLETE, manejadorEvento); 
urlStream.load(request);

3.- Una vez descargado el instalable hay que almacenarlo en un fichero local. Esto por ejemplo puede hacerse guardando dicho archivo en el escritorio. Una vez se haya actualizado la aplicación podremos borrarlo si queremos. Para escribir el instalable el disco, dentro de la función de manejador del evento COMPLETE del paso anterior realizaremos dicha acción:

1
2
3
4
5
6
7
8
9
10

//Guardamos el instalable en binario en el escritorio 
urlStream.readBytes(instalableBinario, 0, urlStream.bytesAvailable ); 
var instalable:File = File.desktopDirectory.resolvePath("AIRUpdate.air"); 
 
// Escritura del archivo 
var fileStream:FileStream = new FileStream(); 
fileStream.addEventListener(Event.CLOSE, actualizaAplicacion); 
fileStream.openAsync(instalable, FileMode.WRITE); 
fileStream.writeBytes(instalableBinario, 0, instalableBinario.length); 
fileStream.close();

4.- Una vez hayamos terminado de escribir el fichero, se cierra el fileStream. Como hemos añadido un manejador para el evento close de dicho fileStream, dentro de ese manejador llamaremos a la función que actualiza la aplicación, así tenemos todo correctamente encadenado:

1
2

var updater:Updater = new Updater(); 
updater.update(instalable, versionServidor);

Al llamar a esta función, la aplicación directamente se reinstalará y comenzará a ejecutarse ya con la nueva versión instalada.

Como un ejemplo vale más que mil explicaciones aquí dejo un ejemplo con todo el código anterior y el instalable de dicho ejemplo. Si bajáis directamente el instalable y lo ejecutáis, se descargará otra versión del mismo programa que tengo en el servidor y podréis ver como la versión es diferente.

Espero que sirva de ayuda. Si hay alguna duda me mandáis un e-mail a antonio.serrano.guerrero@gmail.com. Un saludo!!

Recientemente he terminado de programar (en mis ratos libres) todas las funcionalidades de búsqueda, así que os dejo los proyectos en flex y air de la aplicación (utilizan el mismo código fuente), para el que le quiera echar un vistazo. Además he estado apurando para terminar de compilarlas con la versión final del Flex Builder 3:

      - Flex:

               - Demostración de la aplicación

               - Descarga del proyecto

               - Descarga del fichero php que utilizo a modo de proxy

       - AIR:

              - Descarga del proyecto

              - Descarga del instalable (archivo .air)

La diferencia entre ambas aplicaciones, es que para la versión flex utilizo una página php a modo de proxy para poder llamar al Servicio Web de MyStrands desde la URL www.antonioserrano.es (problemas de seguridad que sigo sin poder solucionar), mientras que en la aplicación AIR realizo las llamadas al Servicio Web directamente.

Espero que os guste. Un saludo!!

Una vez arrancamos eclipse, nos vamos en la barra de herramientas a view -> show view -> other, y nos aparecerá una ventanita tal que así:

En ella seleccionaremos servers, y en la parte inferior, debajo del editor, nos aparecerá la vista de servidores. Dentro de ella, pulsaremos el botón derecho y diremos new -> server, y nos aparecerá el asistente para añadir servidores externos.

 En el primer paso, desplegaremos la carpeta de Apache, y seleccionaremos, dependiendo del caso, la versión de tomcat de la que dispongamos (en la versión Europa del eclipse existe la posibilidad de elegir un Tomcat versión 6, en mi caso, versión 3.2.2 la última versión es la 5.5).

El siguiente paso es indicarle el nombre que queremos que tenga el servidor, el directorio donde está instalado (el directorio raíz), y el runtime que queremos que utilice (dejaremos la opción que viene por defecto).

En pasos posteriores podemos indicarle sobre que aplicaciones queremos que haga el deploy. Yo estos últimos pasos los ignoro y directamente cuando quiero ejecutar una aplicación pulso con el botón derecho del ratón sobre la carpeta del proyecto y le doy a Run As -> Run on Server, y directamente hace el deploy sobre el tomcat y comienza la ejecución. Algo tal que así:

Si por algún motivo no arranca, es posible que tengáis errores en el web.xml, o si habéis modificado algún archivo como el services-config.xml o alguno de esos. Si todo está correcto debería funcionar a la primera, aunque hay veces que se pone tonto y hay que reiniciar eclipse y hacer deploy y undeploy varias veces.

Espero haber resuelto las dudas que había, y si alguien sigue con problemas que no dude en escribir. Un saludo!!

Entonces, ¿qué hay que hacer para integrar BlazeDS con un proyecto desde el Flex Builder? Pues yo tras mucho trastear he encontrado una posible solución. Seguramente habrá otras soluciones mas sencillas, o incluso alguna otra manera de integrar BlazeDS en la misma creación del proyecto, pero la solución que me he ingeniado es la siguiente:

1: Desde el Flex Builder 3, nos vamos a File -> New -> Project, y seleccionamos un FlexProject y pulsamos Siguiente. En el siguiente paso, daremos nombre al proyecto, y le indicaremos que queremos un servidor con soporte J2EE. Además seleccionaremos la opción de utilizar Live Cycle DataService:

2: En el siguiente paso, en el momento en el que se nos pide indicar la localización del fichero flex.war, haremos referencia al fichero flex.war que nos viene con la instalación de LCDS

3: En el último paso de creación, a la hora de indicar el nombre de la aplicación principal, el nombre del directorio con el codigo fuente, etc., nos iremos a la pestaña de Library Path, y procederemos a eliminar la librería fds.swc, que se nos ha añadido al seleccionar el flex.war en el paso anterior. Al eliminarla, el icono de librería con texto Flex 3(Beta 3) se pondrá con un aspa roja indicando error. Ignoraremos eso y pulsaremos sobre Finish.

4: Una vez se nos ha creado el proyecto, nos vamos al panel izquierdo con la estructura del proyecto, y desplegamos el contenido del directorio WebContent -> WEB-INF, y eliminaremos por completo el contenido de las carpetas lib y flex, dejándolo con un aspecto así:

5: Ahora nos iremos a las propiedades del proyecto y seleccionaremos las opciones de Flex Server. Una vez se nos muestren las opciones pulsaremos sobre el botón Deploy Flex WAR. Aparecerá una ventana de búsqueda, desde la cual seleccionaremos el fichero blazeds.war, de nuestro directorio que contiene la instalación de BlazeDS. Una vez seleccionado pulsaremos OK a todo.

6: Al pulsar sobre OK para cerrar las opciones, se recompilará nuestro proyecto y las carpetas flex y lib que habíamos vaciado anteriormente se habrán regenerado con nuevos contenidos.

7: Finalmente el último paso es modificar el fichero web.xml para que ya no haga referencia a servlets que ya no se van a utilizar. Únicamente nos quedaremos con el tag servlet que hace referencia a la clase MessageBrokerServlet, y con el tag servlet-mapping del servlet anterior. El resto de tags servlet y servlet-mapping los eliminaremos, dejando el fichero web.xml tal que así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<web-app>
    <display-name>MessagingBlaze</display-name>
    <description>LiveCycle Data Services Application</description>
 
    <!-- MessageBroker Servlet -->
    <servlet>
        <servlet-name>MessageBrokerServlet</servlet-name>
        <display-name>MessageBrokerServlet</display-name>
        <servlet-class>flex.messaging.MessageBrokerServlet</servlet-class>
        <init-param>
            <param-name>services.configuration.file</param-name>
            <param-value>/WEB-INF/flex/services-config.xml</param-value>
       </init-param>
        <init-param>
            <param-name>flex.write.path</param-name>
            <param-value>/WEB-INF/flex</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
 
    <servlet-mapping>
        <servlet-name>MessageBrokerServlet</servlet-name>
        <url-pattern>/messagebroker/*</url-pattern>
    </servlet-mapping>
 
    <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>
 
</web-app>

A partir de aquí el resto ya es cosa vuestra. Si alguien conoce una manera mejor de integrar BlazeDS en un proyecto con el Flex Builder 3 estaría agradecido de que me la comentara. Espero ser de ayuda.
Un saludo!