02.11.08
Posted in flex
at 16:02
Una de las cosas que hacen que nuestra aplicación tenga un toque más de profesional, es el utilizar un preloader propio personalizado. Buscando documentación sobre este tema me he encontrado con varias formas de conseguir esto. De todas ellas me he quedado con la siguente opción, la cual se divide en dos pasos:
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!!
Permalink
04.08.08
Posted in flex
at 9:29
Durante esta última semana en el trabajo, a petición de los de sistemas, nos hemos visto en la necesidad de poner todas las aplicaciones para que se puedan ejecutar en cluster. Como nuestros servidores son Java, con poner la etiqueta <distributable /> en el fichero web.xml, era suficiente. Una vez desplegadas las nuevas aplicaciones con dicha etiqueta, nos ponemos a probarlas y vemos que la parte web normal (struts2, etc.) funciona correctamente, pero a la hora de ejecutar una aplicación flex y llamar a un objeto remoto, este no se ejecuta bien, devolviéndonos una excepción enorme.
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)
Permalink
11.07.08
Posted in flex
at 17:21
Hola a todos. Hace ya unas cuantas semanas, google lanzo su api para poder realizar aplicaciones flex que integren Google Maps. Como no he andado muy sobrado de tiempo, todavía no la había podido probar, pero recientemente me he animado y he estado probando alguna de sus funcionalidades. La verdad es que la documentación que proporciona Google está bastante bien, proporcionándo una buena variedad de ejemplos para poder ver el código, creación de mapas paso a paso, etc. Así que animo a todo el mundo a que la utilice ya que su utilidad es grandísima.
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 )
Permalink
21.06.08
Posted in flex
at 15:25
Hola a todos. Tras tanto tiempo sin postear en el blog, he decidido hablar sobre cómo realizar una videoconferencia en una aplicación flex utilizando Flash Media Server. En primer lugar lo que haremos será descargarnos la última versión del Flash Media Server. Le daremos a la opción de descargar el servidor de desarrollo gratuito. Durante el proceso de instalación nos pedirá un número de serie, pero este paso se puede saltar en la versión gratuita, así que le daremos a siguiente. Una vez instalado, para arrancarlo y detenerlo, nos iremos (en Windows) a inicio -> todos los programas -> Adobe -> Flash Media Server. Ahí tenemos las opciones de arrancar y parar el servidor, arrancar y parar el servidor de administración y acceder a la consola de administración en nuestro navegador. Esta consola nos resultará muy útil para ver el estado en el que se encuentran las aplicaciones en todo momento, la cantidad de información que está procesando cada aplicación, los usuarios conectados, etc.
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!!
Permalink
08.03.08
Posted in air, flex
at 13:18
En un post anterior comenté como hacer peticiones REST a un servicio web, más en concreto al servicio web que nos ofrecía MyStrands, desde aplicaciones Flex y AIR. En aquel post comenté la forma de hacer las llamadas y ponía una aplicación de ejemplo, la cual estaba a medio programar.
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!!
Permalink
26.02.08
Posted in flex
at 20:48
Hola a todos. En mi último post comenté como realizar aplicaciones que utilizen BlazeDS. A raíz de ello, se han publicado comentarios, y he recibido unos cuantos e-mails preguntándome cómo hacer correr la aplicación sobre un servidor apache tomcat. Voy a poner unos cuantos pantallazos de como lo hago yo en mi instalación del FlexBuilder 3, más en concreto en el plug-in para eclipse (en mi caso Eclipse 3.2.2) que nos ofrece Adobe Labs.
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!!
Permalink
04.02.08
Posted in flex
at 23:08
El pasado día 1 de Febrero, Adobe sacó la primera release de BlazeDS. Sin duda una gran noticia para la comunidad de programadores Flex, ya que por fín hay una versión estable de la versión OpenSource de FlexDataService. Hasta el momento no había tenido el momento de probar BlazeDS, ya que cuando intentaba crear un nuevo proyecto en mi Flex Builder indicándole como archivo Flex.war el archivo BlazeDS.war, o bien no me dejaba crear el proyecto, o bien me dejaba crearlo, pero luego a la hora de ejecutarlo no arrancaba el tomcat (dependiendo la beta del flex builder y de la versión de eclipse). Con la aparición de la mencionada versión release, pensé que esto estaría solucionado, y que se podría integrar BlazeDS en la creación de un nuevo proyecto sin problema, pero siguen apareciendo los mismos problemas.
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!
Permalink
22.01.08
Posted in flex
at 23:21
En el post anterior publiqué como hacer peticiones REST, más en concreto, al servicio web que nos ofrecía MyStrands. Desarrollando la aplicación en mí casa todo iba muy bien y sin problemas. El verdadero problema surgió cuando subí la aplicación a mi servidor de hosting e intentaba ejecutar la aplicación descargándomela desde el.
La aplicación se iniciaba con normalidad, pero cuando realizaba una petición de información al servicio web de MyStrands me aparecía el siguiente problema: Error #2048. Violación de Seguridad del Sandbox: No se pueden cargar datos del sitio https://mystrands.com…. desde www.antonioserrano.es/…, a lo cual dije ¿¿Pero que coj…..??
Buscando por mil millones de páginas de google, consultándo la documentación de adobe, etc, etc. descubrí que una aplicación descargada desde un sitio web (por ejemplo el mío), no puede ejecutar código que está en otro (por ejemplo el de mystrands). Si buscáis como solucionar este tema os encontraréis mucho con el famoso fichero crossdomain.xml e intrucciones del tipo Security.allowDomain() y Security.allowInsecureDomain(). Estas soluciones están bien si lo que quieres es interactuar con otra aplicación en flex, la cual deberá cargar el fichero de política de accesos (el crossdomain.xml), con la instrucción Security.loadPolicyFile(), y además incluir las instrucciones de Security para permitirnos el acceso.
Pero, ¿Y si no quieres interactuar con otra aplicación flex y quieres invocar un servicio web o algo similar? Pues tras mucho, mucho buscar no he encontrado solución directa. Para el ejemplo anterior lo que tuve que hacer fue incluir en mi servidor una página en php, a la cual yo llamo desde flex y ésta a su vez llama al servicio de mystrands y me devuelve el xml resultante. Es decir, una persona se descarga mi aplicación desde mi servidor, y la única forma de que funcione las llamadas es, realizarlas contra mi servidor, y que mi servidor las realice a mystrands a modo de proxy.
Para mi ejemplo de mystrands, utilicé este archivo php, que me hizo Miguel (un autentico crack, al cual le agradezco mucho su ayuda). Yo utilicé este archivo porque mi servidor es php, pero por ejemplo, se puede utilizar un servlet, página en asp o lo que sea.
Un saludo!! PD: si alguien sabe como resolver el problema sin necesidad de utilizar ninguna pagina de servidor intermedia se lo agradeceré muchísimo
Permalink
20.01.08
Posted in flex
at 18:05
Para aprender el funcionamiento de las llamadas REST en Flex y Air (algo totalmente nuevo para mí), he realizado una aplicación que se conecta con el servicio que nos ofrece MyStrands. Para el que no lo conozca, mystrands en una comunidad, en la que los usuarios puntúan a los artistas, sus discografías, debaten sobre ellos, etc. Dentro de MyStrands, tenemos una sección para desarrolladores, OpenStrands, en la cual se nos ofrece un api para obtener información de discografías, canciones, opiniones de los usuarios, etc. Para poder utilizar dicha api, será necesario registrarse para obtener un subscriberId, es decir, una clave personal de desarrollador para poder efectuar las llamadas al api, y descargarse la documentación para ver cómo realizar dichas llamadas.
Para este ejemplo he utilizado el framework de programación guasax. Dentro de la web de guasax, o en el blog de su autor, Ángel Blesa, podréis ver en detalle las posibilidades que ofrece. El motivo de haberlo utilizado en este ejemplo es para ver los pasos a la hora de realizar las llamadas de una forma mucho más limpia que sin utilizar ningún framework.
Para realizar las llamadas, declararemos los servicios a llamar en el Service Locator de la siguiente manera:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<guasax:ServiceLocator
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:guasax="es.guasax.services.*" >
<mx:HTTPService id="nombre_del_servicio"
url = "url que queremos llamar"
method="get"
contentType="application/x-www-form-urlencoded"
showBusyCursor = "true"
useProxy = "false"
requestTimeout = "120"
result="event.token.resultHandler( event )"
fault="event.token.faultHandler( event )" >
</mx:HTTPService>
</guasax:ServiceLocator> |
Dentro del ServiceLocator, nos definiremos tantos HTTPService como necesitemos. Cada HTTPService tendrá una url para llamar a un servicio u a otro.
Para llamar a los servicios y procesar su respuesta. Cada llamada al servicio constará de tres funciones: una para realizar la llamada, otra para procesar la respuesta en caso de éxito en la llamada, y otra para procesar la respuesta en caso de error en la ejecución del servicio. Esto en guasax se conoce como una action y se implementa de la siguiente manera:
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
|
/**
* Realiza la peticion del servicio
*/
public function llamadaServicio(...):void{
var params : Array = new Array();
params["nombre_parametro"] = "valor_parametro"; //tantos como sean necesarios
ServiceLocator.getInstance().executeService(
"nombre_servicio", //definido en el codigo anterior
"", //Cadena vacia en este caso. Los httpservice en guasax no necesitan este parametro
params, //Parametros que acabamos de definir
llamadaServicioOnResult, //funcion en caso de exito
llamadaServicioOnFault, //funcion en caso de error
this); //Clase que recoge el resultado
}
/**
* Funcion en caso de exito
*/
public function llamadaServicioOnResult(event:ResultEvent):void{
var resultado:XML = event.result as XML
//Parseo del XML
}
/**
* Funcion en caso de error
*/
public function llamadaServicioOnFault(event:FaultEvent):void{
Alert.show(event.message.toString()); //Mostramos el mensaje de error
} |
Para ver mucho mejor todo esto podéis ver el siguiente ejemplo. Esta sin completar, pero para ver el funcionamiento de las peticiones REST es suficiente. En el buscador introducimos el nombre del artista o grupo que queremos buscar, y una vez lo tengamos en la lista de resultados, podemos consultar su discografía y posteriormente la información de cada disco en detalle, con las canciones que lo conforman y demás información.
Este ejemplo ha sido compilado con la beta3 del flex builder. Podéis ver y descargar el código fuente del proyecto pulsando con el botón derecho sobre la aplicación y dándole a view source.
Espero que sirva de ayuda. Saludos!!
Permalink
