Novedades en la versión previa para desarrolladores de Ext GWT 3.0

Se encuentra disponible desde hace unas semanas una versión previa de Ext GWT 3.0. Ext GWT, también conocido como GXT, es la implementación en GWT de ExtJs. Esta versión esta actualmente en desarrollo, pero nos permite ver que vamos a encontrar en ella. Requiere al menos GWT 2.3.0. para funcionar.

Aquellos que conocéis ExtJS y Ext GWT ya sabéis la potencia que la librería nos ofrece a la hora de generar interfaces para nuestras aplicaciones web de forma sencilla, dinámica y segura. La librería cuenta con un enorme repertorio de objetos y métodos que podemos utilizar en nuestros proyectos. La gran ventaja de Ext GWT, es que puedes crear aplicaciones ExtJS sin escribir apenas JavaScript, todo con Java. Aunque esto es una opinión personal, pues a mi personalmente JavaScript no me gusta nada. Lo veo caótico y dificil de mantener. Pero para gustos, colores.

Las novedades mas importantes que podremos encontrar son las siguientes:

XTemplates

En versiones anteriores, GXT usaba el mismo código que Ext JS. Ahora, se ha implementado por completo en Java. Poéis leer mas sobre esto en esta entrada en el blog de Sencha.

Gráficas

Al igual que han hecho en ExtJS 4, las gráficas ya no se implementan en flash, sino mediante SVG y VML. Un gran avance en mi opinión, ya que no dependemos de ningún plugin de terceros para visualizarlas.

Eventos y sus manejadores (event handlers)

En esta versión, se ha sustituido el propio sistema de eventos de GXT en favor de la nueva Event handler API de GWT. Ahora los componentes de GXT aceptan manejadores y disparadores de eventos de la misma manera que los widgets de GWT:

Button btn = new Button();
btn.addSelectHandler(new SelectHandler() {
  @Override
  public void onSelect(SelectEvent event) {
    //respond to click
  }
});

Apariencia

En la versión 2, los widgets son responsables de crear su propia estructura DOM directamente. Esto se puede hacer o bien manualmente o usando un fragmento de HTML para el elemento o componente. El HTML para este, se crea enlazando elementos del DOM, mediante una cadena o a partir de un XTemplate. El problema, es que la vista de un componente esta embebida en este y el nombre de la clase CSS esta metido dentro del widget. Esto, aunque funcione, crea varios problemas. Se hace muy dificil cambiar el DOM del componente, ya que esta embebido en el widget. Con el CSS ocurre algo parecido, es dificil cambiar la apariencia del widget porque el CSS forma parte de este.

Para solucionar esto, lo que han hecho, es cambiar por completo la forma en la que se renderiza la vista y se aplican estilos. Se han basado en un patrón de diseño de google: Appearance Pattern. Un Appearance es básicamente una clase que controla la estructura HTML y el estilo de la implementación de un widget. Podéis profundizar sobre esto en este artículo de Sencha Blog. Sino, podéis esperar a mi próximo artículo sobre este tema. Quiero comentarlo en profundidad una vez saquen la versión estable de GXT.

Datos

Por desgracia, de momento GWT no soporta introspection en tiempo de ejecución. La instropección nos permite obtener información de un objeto. Usando instropección, podemos preguntar a un objeto por su clase, por sus métodos, propiedades, etc...

En versiones anteriores de GXT, hay dos maneras de conseguir la introspección:

Primero usando mapas clave-valor para las propiedades de un objeto. Pero esto nos fuerza a extender las clases base de Ext GWT, como com.extjs.gxt.ui.client.data.BaseModel. Como podéis observar, hay un constructor que recibe un mapa como entrada:
```

  /** 
   * Creates a new base model. 
   *  
   * @param properties the initial values 
   */  
  public BaseModel(Map properties) {  
    this();  
    setProperties(properties);  
  }  
```
Disponemos de setters y getters para establecer y obtener los valores de la propiedad respectivamente en tiempo de ejecución:
```

  public  X set(String name, X value);
  public  X get(String property);
```
El segundo método, consiste en hacer uso de GWT Deferred binding. Esto se hace mediante el BeanModel API. Podéis ver un ejemplo aquí.

En esta nueva versión, los chicos de Sencha, se han replanteado por completo la manera de conseguir runtime introspection. El objetivo en Ext GWT 3.0 es soportar cualquier POJO o Autobean en cualquier sitio donde necesitemos datos, como los stores, templates o los data widgets. Es parecido a usar el BeanModel, los métodos para acceder a las propiedades se preparan en tiempo de ejecución, pero solo se crean cuando se piden mediante GWT.create().

Las propiedades se manejan mediante ValueProvider, donde T es el tipo del Bean y V el tipo de la propiedad. Los datos tambien puedes ser obtenidos mediante una clave, usando ModelKeyProvider que extiende el interfaz com.google.gwt.view.client.ProvidesKey de GWT y nos permite especificar una clave única para un objeto de tipo T.

public class Person {
  public String getSSN() {...}
  public String getName() {...}
  public void setName(String name) {...}
  public List getChildren(){...}
  public void setChildren(Listchildren) {...}
}
public interface PersonProperties extends PropertyAccess {
  ModelKeyProvider ssn();
  ValueProvider name();
  ValueProvider> children();
}

Explicaré todo esto mas en profundidad cuando saquen una Beta.

Mas información: Sencha Blog ¦ Descarga Ext GWT 3.0 Developer Preview 1