Utilizando Robotlegs para el desarrollo de aplicaciones Flex




Robotlegs es una microarquitectura escrita completamente en AS3 para el desarrollo de aplicaciones Flex, Flash y Air, cuyo principal objetivo es interconectar las diferentes partes de la aplicación y proveer un mecanismo para que se comuniquen, en este caso utiliza el sistema de mensajería nativo de Flex.

El framework viene con una implementación de referencia basada en el patrón MVC+S que sirve de guía para estructurar la aplicación, que incluye las clases Mediator, Command y Actor (denominadas los actores del framework), y aunque no es obligatorio su uso constituye un punto de comienzo. La inyección de dependencias la realiza a través de la biblioteca SwiftSuspenders, aunque deja abierta la posibilidad de usar otras, los puntos de inyección de dependencias se indican declarativamente a través de metadata.

Principio de funcionamiento

La clase Context es el corazón del framework, sirve como un bus centralizado de eventos y permite que las implementaciones de las diferentes partes de la arquitectura se comuniquen entre sí. Es el mecanismo de arranque que inicializa la inyección de dependencias y otras utilidades del framework. El contexto define ámbito, los actores del framework viven dentro de un contexto y se comunican con otros que viven dentro del mismo ámbito de ese contexto. En una aplicación pueden existir varios contextos, y éstos pueden comunicarse entre sí, lo cual es muy útil para el desarrollo de aplicaciones modulares que requieren comunicación entre módulos.

La capa controladora se representa por la clase Command. Los comandos son objetos de corta vida, sin estado, que representan acciones individuales a ejecutar por la aplicación, comúnmente como respuesta a interacciones con el usuario pero su uso no está limitado a esto. Estos objetos pueden enviar eventos que pueden ser recibidos por mediadores para ejecutar acciones sobre las vistas, o que pueden desencadenar la ejecución de otros comandos.

La capa de la vista es representada por la clase Mediator. Las clases que heredan de Mediator se utilizan para controlar la interacción de los actores del framework con los componentes visuales. Los mediadores escuchan los eventos despachados por los actores del framework y en consecuencia modifican el estado del componente visual que representan, registran escuchadores de los eventos generados por el componente visual que representan y despachan además eventos como respuesta éstos. Esto permite poner la lógica del componente visual en el mediador y desacoplarlo al máximo de la aplicación, permitiendo su reutilización y modificación con el menor costo.

Para implementar la capa del modelo y de los servicios el framework ofrece la clase Actor. Cualquier clase que herede de Actor tiene la funcionalidad de comunicarse con el resto de los actores del framework.

El funcionamiento a través de un ejemplo

Para ejemplificar el funcionamiento de Robotlegs desarrollaremos un pequeño ejemplo en el que tendremos una vista compuesta por un botón y una tabla, al oprimir el botón recuperaremos un conjunto de datos en formato XML a través de una solicitud HTTP y los mostraremos en la tabla. Utilizaremos Flash Builder 4 y Robotlegs 1.1.1. Aunque el ejemplo es muy simple nos servirá para explorar cómo interactúan las diferentes partes de una aplicación que utilice Robotlegs.

Comenzaremos descargando el archivo robotlegs-framework-v1.1.1.zip de http://www.robotlegs.org y creando un proyecto Flex con las siguientes características:

1

Una vez creado el proyecto copiamos en la carpeta libs de proyecto el archivo “robotlegs-framework-v1.1.1.swc”, que se encuentra en la carpeta bin del archivo previamente descargado; y creamos la siguiente estructura en el proyecto:

2

A continuación procederemos a crear el único componente visual de la aplicación, al cual llamaremos CountryListView y se creará en la carpeta views del proyecto:

3

El código queda así:

[mxml]










[/mxml]

Cuando se oprime el botón se despachará un evento que será atrapado por el mediador de este componente, el cual como respuesta despachará otro evento que desencadenará la ejecución de un comando.

Como vemos, este componente visual está totalmente desacoplado de la aplicación (no tiene enlaces –bindings- al modelo, etc.) y puede ser reutilizado y modificado sin incurrir en cambios en el código. Por supuesto que en un escenario real el componente seguramente será mucho más complejo, pero la idea es la misma.

El mediador será una clase que herede de la clase Mediator del framework y cuya responsabilidad será comunicarse con el resto de los actores de la aplicación e interactuar con el componente visual para actualizar su estado.

[as]
package views
{
import events.CountryListEvents;

import flash.events.Event;

import model.CountryListModel;

import org.robotlegs.mvcs.Mediator;

public class CountryListMediator extends Mediator
{
[Inject]
public var view:CountryListView;

[Inject]
public var applicationModel:CountryListModel;

public function CountryListMediator()
{
super();
}

override public function onRegister():void{
addViewListener(“LOAD_DATA”, sendRequest);
addContextListener(CountryListEvents.COUNTRY_DATA_LOADED, dataLoadedHandler);
}

private function sendRequest(event:Event):void{
dispatch(new Event(CountryListEvents.LOAD_COUNTRY_DATA));
}

private function dataLoadedHandler(event:Event):void{
view.country_dg.dataProvider = applicationModel.countryList;
}
}
}
[/as]

En el método “onRegister”, el mediador registra los escuchadores tanto para los eventos despachados por el componente visual como para los eventos despachados por el resto de los actores del framework. El metadata “[Inject]” indica que el framework suministrará a las variables “view” y “applicationModel” referencias válidas de objetos de tipo “CountryListView” y “CountryListModel” respectivamente.

Cuando el mediador atrapa el evento despachado por el componente visual (LOAD_DATA), despacha el evento LOAD_COUNTRY_DATA, lo cual provoca que se ejecute el método “execute” del comando asociado a ese evento.
El comando, representado por la clase “LoadCountryData”, hereda de la clase Command del framework y es responsable de obtener los datos del archivo XML. Para este ejemplo se creó un servicio HTTP (CountryDataService) utilizando la funcionalidad de Data Centric Development de Flash Builder. El framework inyecta una referencia válida del servicio y el modelo cuando se crea un objeto de la clase “LoadCountryData”.

[as]
package commands
{
import model.CountryListModel;

import mx.collections.ArrayCollection;
import mx.rpc.CallResponder;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;

import org.robotlegs.mvcs.Command;

import services.countrydataservice.CountryDataService;

import valueObjects.Country_list;

public class LoadCountryData extends Command
{
[Inject]
public var applicationModel:CountryListModel;

[Inject]
public var service:CountryDataService;

public function LoadCountryData()
{
super();
}

private var responder:CallResponder = new CallResponder();

override public function execute():void{

responder.addEventListener(ResultEvent.RESULT, resultHandler);
responder.token = service.getCountryData();
}

private function resultHandler(event:ResultEvent):void{
applicationModel.countryList = (responder.lastResult as Country_list).country;
}

}
}
[/as]

Cuando el servicio retorna (en el método “resultHandler”) se actualiza la lista de países en el modelo, lo cual provoca que se despache el evento COUNTRY_DATA_LOADED, el cual es atrapado por el mediador y este, en respuesta, actualiza el componente visual.

El modelo está representado en la clase “CountryListModel”, que almacena los datos de la aplicación, ésta hereda de la clase Actor del framework, la cual añade la funcionalidad básica para comunicarse con el resto de los actores.

[as]
package model
{
import events.CountryListEvents;

import flash.events.Event;

import mx.collections.ArrayCollection;

import org.robotlegs.mvcs.Actor;

public class CountryListModel extends Actor
{
public function CountryListModel()
{
super();
}

private var _countryList:ArrayCollection;

public function get countryList():ArrayCollection
{
return _countryList;
}

public function set countryList(value:ArrayCollection):void
{
_countryList = value;
dispatch(new Event(CountryListEvents.COUNTRY_DATA_LOADED));
}

}
}
[/as]

Nótese que cuando se modifica la variable “countryList”, que almacena la lista de países, se despacha un evento (COUNTRY_DATA_LOADED), que es atrapado por el mediador, el cual en respuesta, actualiza el componente visual.

En este ejemplo, por razones de simplicidad, los eventos utilizados son de la clase “Event” de Flex, pero en un escenario real, lo más conveniente sería crear eventos personalizados que llevaran una carga útil de interés para la aplicación.

Finalmente el actor responsable de orquestar todo este trabajo es el contexto, representado por la clase “CountryListContext”, que hereda de la clase “Context” del framework.

[as]
package
{
import commands.LoadCountryData;

import events.CountryListEvents;

import flash.display.DisplayObjectContainer;

import model.CountryListModel;

import org.robotlegs.mvcs.Context;

import services.countrydataservice.CountryDataService;

import views.CountryListMediator;
import views.CountryListView;

public class CountryListContext extends Context
{
public function CountryListContext(contextView:DisplayObjectContainer=null, autoStartup:Boolean=true)
{
super(contextView, autoStartup);
}

override public function startup():void{

injector.mapSingleton(CountryListModel);
injector.mapSingleton(CountryDataService);

commandMap.mapEvent(CountryListEvents.LOAD_COUNTRY_DATA, LoadCountryData);
mediatorMap.mapView(CountryListView, CountryListMediator);
}
}
}
[/as]

En el método “startup”, invocado cuando el dueño de este contexto se añade al stage, se realiza el trabajo de enlazar las diferentes partes de la aplicación.

En este caso, primeramente se indica al mecanismo de inyección que cree un singleton de las clases “CountryListModel” (el modelo) y “CountryDataService” (el servicio), cuyas referencias serán inyectadas en las clases “LoadCountryData” y “CountryListMediator” según sea necesario.

Luego se indica que para el evento LOAD_COUNTRY_DATA se registre el comando LoadCountryData. Esto hará que cuando algún actor del framework (en este ejemplo el mediador) despache un evento de ese tipo, se creará un objeto de tipo “LoadCountryData”, se inyectarán todas sus dependencias y se invocará el método execute.

Por último se indica que se registre como mediador del componente visual CountryListView la clase CountryListMediator. Esto provocará que cuando se añada el componente visual al stage, se creará una instancia de la clase “CountryListMediator”, se inyectarán sus dependencias y se invocará el método “onRegister”.

Finalmente se crea el contexto en la clase Application:

[mxml]





[/mxml]

Cuando ejecutamos la aplicación se obtiene lo siguiente:

4

El archivo XML con los datos se encuentra en la carpeta “data” del proyecto, el que se puede descargar de aquí.

Conclusiones

Robotlegs es un framework muy simple y compacto que ofrece una implementación de referencia del patrón MVC+S, nos permite crear aplicaciones Flex con bajo nivel de acoplamiento, componentes reutilizables y con una estructura que en proyectos grandes resulta de gran utilidad, nos permite aprovechar los beneficios de la Inversión de Control en nuestros proyectos.

6 Comentarios

  1. Pingback: Tweets that mention MadeInFlex » Blog Archive » Utilizando Robotlegs para el desarrollo de aplicaciones Flex -- Topsy.com

  2. Pingback: de la red – 14/07/2010 « Tecnologías y su contexto

  3. Pingback: Robotlegs 101 - Acción | www.riactive.com

  4. Jose Luis

    jejejej ya quedo, disculpa pero como pusiste que el XML venia en el data no me di cuenta que ya era el codigo como tal xD
    Una disculpa¡¡

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Acerca de Made In Flex

Made In Flex es una comunidad de desarrolladores de Apache Flex creada en 2006.

Apache Flex, anteriormente conocido como Adobe Flex, es un SDK (kit de desarrollo de software) para crear aplicaciones enriquecidas - multiplataforma basadas en Adobe Flash donado por Adobe a la fundación Apache in 2011 y promocionado a proyecto de primer nivel en Diciembre de 2012.

Actualmente estamos cambiando muchos aspectos del sitio web para ofrecer un sitio útil para toda la comunidad que tenga en cuenta las necesidades actuales.

Últimas Fotos

Instalador de Apache Flex

Entrar o Registrase