Friday, October 5, 2012

Trabajando organizado en GWT

Los que seguro hemos empezado con GWT nos damos cuenta que es un framework que se utiliza bastante, es desarrollado por el equipo de Google y basicamante lo que hace es convertir codigo java a javascript y es muy comodo porque no tienes que tener conocimientos de javascript, ademas existen muchas bibliotecas para basadas en GWT.

Lo intersante del tema es que cuando empecé me encontre con un problema de desorganización en el codigo, y buscando información sobre el tema en google encontré un framework que desarrollaba una arquitectura basada en el patrón MVP (Model-View-Presenter) y su nombre es MVP4G.

Hoy les quiero compartir el como trabajar con este framework.Para integrar Mvp4g en su proyecto, se necesitan los pasos siguientes:

  1. —Agregar la biblioteca necesitada a su proyecto o agregar una dependencia de Maven.
  2. —Modificar el archivo de configuración de GWT (*. gwt.xml).
  3. —Configurar el punto de entrada (Entry Point).
  4. —Crear EventBus, Presentadores y las Vistas.
  5. —Configurar para el uso de Mvp4g APT (optativo). 
1. Las bibliotecas asi como unos ejemplos pueden ser descargados de la siguiente url:

Las bibliotecas necesarias de GIN:  Desargar aqui
Mvp4g: Descargar aqui

para los usuarios que usan maven las Dependencias de Maven son:
<dependency>
       <groupId>com.googlecode.mvp4g</groupId>      
       <artifactId>mvp4g</artifactId>        
       <version>1.4.0</version>
</dependency>

Mvp4g está disponible en el repositorio central de Maven.



2. agregarle al fichero de configuracion de GWT la siguiente linea:
<inherits name='com.mvp4g.Mvp4gModule'/>


3. Para configurar el punto de entrada o entry point

Si se quiere usar dentro del RootPanel:
Poner a Mvp4g Entry Point como el punto de entrada modificando el fichero de configuración de GWT:

<entry-point class='com.mvp4g.client.Mvp4gEntryPoint'/>

O poniendo las siguientes lineas y solo estas lineas dentro de el punto de entrada de la aplicación:

Mvp4gModule module = (Mvp4gModule)GWT.create( Mvp4gModule.class ); module.createAndStartModule(); RootPanel.get().add( (Widget)module.getStartView() );



4. El Bus de eventos

La meta principal de Mvp4g es permitirle crear un Bus de Eventos y Eventos fácilmente sin crear clases e interfaces para cada evento. Otra meta es ver que Presentador maneja fácilmente cada evento. 
 
Un evento se define por: 
 
    su nombre (o tipo) 
    los objetos que pueden dispararse con él.  
 
Todo lo que usted tiene que hacer para crear un Bus de Eventos es crear una interfaz EventBus y definir un método para cada evento. Una implementación de esta interfaz se generará automáticamente por el framework y se inyectará a cada ponente. Un patrón Singleton se usa para crear el Bus de Eventos.




Para crear el Bus de Eventos se necesita:

Crear una interfaz que extiende de com.mvp4g.client.event.EventBus

Anótelo con @Events
 
La anotación @Events tiene los atributos siguientes: 
 
startView (obligatorio) y startViewName (optativo), vea StartView. 
historyOnStart (optativo, por defecto falso). 
module (optativo, por defecto Mvp4gModule), se usa en caso del multi-módulo. 
ginModules (optativo).

@Events(startView = MainView.class)
public interface MainEventBus extends EventBus { ... }


Crear un Evento se necesita:

Crear un método en la interfaz del Bus de Eventos. Este método no debe devolver nada y puede tener los tantos parámetros como usted desee. 

Anótelo con @Event.

@Events(startView = MainView.class)
public interface MainEventBus extends EventBusWithLookup {

    @Event(...)
    public void goToCompany();

    @Event(...)
    public void changeBody(Widget newBody);

    ...
}

La anotación @Event tiene muchos atributos, pero nos centramos en el mas importante:
handlers: Nombre de los presentadores que van manipular el evento. Solo presentadores y Eventos puede manipular eventos.

@Event(handlers=CompanyListPresenter.class)
public void companyDeleted(CompanyBean newBean);

@Event(handlers={CompanyListPresenter.class, CompanyDisplayPresenter.class})
public void companyCreated(CompanyBean newBean);

Para lanzar un evento solamente hacemos uso de la siguiente línea de código, que no es mas que llamar a los métodos definido en la interfaz:

eventBus.companyCreated(new CompanyBean("company"));

El usuario no tiene que manejar creación del eventbus y la implementación, el framework lo hará para usted. También lo inyectará  automaticamente a todos sus presentadores.


Start View: Cada módulo necesita definir una Vista de Inicio. La Vista de Inicio es la vista que se agrega al RootPanel o RootLayoutPanel cuando la aplicación se inicia.  Para definir una start view, usted necesita especificar el atributo 'startView' de la anotación @Events de la interfaz del Bus de eventos.

Start Event: Cuando la aplicación empieza, se puedes querer disparar un evento automáticamente para que las acciones que se necesitaran al principio puedan ejecutarse. Para definir un Evento de Inicio, se necesita anotarlo con @Start. Usted puede tener sólo un Evento de Inicio por modulo.

@Events(...)
public interface OneEventBus extends EventBus {

     @Start
     @Event(...)
     void start();

}

Mvp4g define principalmente 3 tipos de elementos:

Presenter (o Manejador de Evento): Este elemento permite el manejo de los eventos, la interacción con la Vista y Manejo de los Servicios. 
View: Este elemento permite la creación de los objetos visuales.
Services: Este elemento permite la interacción con el servidor


Crear a un Presentador:
 
Extender de BasePresenter <V,E>: 
        V: el tipo de la vista que se inyectará en el Presentador
        E: el tipo de la interfaz del Bus de Eventos.  
 
Usted también debe sobrescribir el método Bind para enlazar la vista a su Presentador. 

Tener un constructor sin parámetros o compatible con GIN.  

Anotarlo con @Presenter y establecer el atributo ‘view'. Este atributo debe definir la clase de la vista que implementa la interfaz de vista asociada al presentador.


@Presenter( view = WestView.class )
public class WestPresenter extends BasePresenter<WestPresenter.IWestView, CpanelEventBus> {   
public interface IWestView {       
    public Panel getViewWidget();   
}   
public void onStart() {       
    eventBus. goToCompany();   
}   
public void bind() {   
    view.getNewerButton().addClickHandler( new ClickHandler() {       
             public void onClick( ClickEvent event ) {                   
                 eventBus. companyCreated(newBean);           
    }} );
}

Injectando servicios:

Con GIN, se puede inyectar muy facilmente gracias la anotación @Inject:

@Presenter(view=OneView.class)
public class OnePresenter extends BasePresenter<IOneView, OneEventBus>{

ServiceAsync service = null;

@InjectService
public void setService(ServiceAsync service) {
    this.service = service;
}
}

Las Vistas:

@Singleton
public class WestView extends Composite implements WestPresenter.IWestView {   
private Panel westPanel;   

@Inject   
public WestView() {       
    initWidget();   
}   
@Override   
public Panel getViewWidget() {       
    return westPanel;   
}


Realmente MVP4G es un framework que esta bien realizado y viene a hacernos la vida mucho mas facil a la hora de desarrollar nuestros proyectos de GWT, es muy facil de usar, para profundizar un poco mas se puede visitar la pagina del proyecto: Proyecto en Google pero además se pueden descargar los ejemplos que se encuentran en la pagina de descarga para obtener una mejor visión de su funcionamiento lo que si es importante destacar la organización que se logra en nuestros proyectos a la hora de organizar nuestro código esero que le hay servido de algo a aquellas personas que esten empesando con GWT y quieran conocer las mejores practicas.

5. Configurando Mvp4g APT

Por defecto, todos los errores debido a una mala configuración de Mvp4g se descubre cuando se empieza la recopilación de GWT o el GWT dev-mode. Gracias a Mvp4g APT se pueden descubrir la mayoría de estos errores directamente en el IDE. Puede visitar el siguiente enlace para mas información: http://code.google.com/p/mvp4g/wiki/APT














Mi primer Post

Este es el primer post que realizo en mi blog, espero poder estar activo y publicar información de las notas sobre mis desarrollos con los diferentes lenguajes de programación y que estos le sirvan a la comunidad, aportando mi granito de arena a esta causa.