Gimenoblog

Voy a responder a alguno de los comentarios de el post titulado Aplicaciones web vs aplicaciones escritorio

Cierto, me olvidé de Open Laszlo. Que es muy similar a Flex. Pero con el añadido de que es Open Source y además no sólo genera interfazes Flash sino que también genera interfaces DHTML. Sin duda un producto a tener en cuenta.

Hablaba en el otro post sobre que sería interesante que las aplicaciones Java se comunicasen de forma más sencilla con el servidor. Con esto me refería a que en Flex es muy sencillo, por ejemplo, rellenar una tabla con datos obtenidos del servidor.

Rellenando la tabla con XML y HTTPService

Tenemos la siguiente interfaz gráfica (las interfaces en Flex se definen en XML).

	<mx:HTTPService id="srv" url="catalog.jsp"/>
	<mx:DataGrid dataProvider="{srv.lastResult.catalog.product}" width="100%" height="100%"/> 
	<mx:Button label="Get Data" click="srv.send()"/>

Creamos un objeto HTTPService (similar a XMLHttpRequest en JavaScript). Luego creamos una tabla (DataGrid) y luego un botón. Al hacer click en el botón se envía la solicitud HTTP y la tabla se rellena. La solicitud se hace a una página JSP ("catalog.jsp"). Así podría ser la página JSP.

<?xml version="1.0" encoding="utf-8"?>
<catalog>
<%
	ProductService srv = new ProductService();
	List list = srv.getProducts();
	Product product;
	for (int i=0; i<list.size(); i++)
	{
		product = (Product) list.get(i);
%>	
    <product productId="<%= product.getProductId()%>">
        <name><%= product.getName() %></name>
        <description><%= product.getDescription() %></description>
        <price><%= product.getPrice() %></price>
        <image><%= product.getImage() %></image>
        <category><%= product.getCategory() %></category>
    </product>
<%
	}
%>
</catalog>

El XML es totalmente inventado por nosotros. No sigue ningún Schema ni DTD. La "magia" está en que la tabla se rellena sola de forma "inteligente". En el XML previo habíamos definido la tabla con un "dataProvider" con este valor "srv.lastResult.catalog.product". Esto es, "srv" es el objeto HTTPService, "lastResult" es el resultado de la petición, que es un documento XML dentro de el cual tenemos un tar raíz "catalog" y varios elementos "product". Pues bien, cada elemneto "product" será una fila de la tabla, y los elementos hijos serán las celdas de cada fila. Así de sencillo.

Así es como se ve la interfaz gráfica en el navegador

Rellenando la tabla con un WebService

También se puede usar un Web Service de forma muy sencilla. Por ejemplo:

	<mx:WebService id="srv" wsdl="http://coenraets.org/services/ProductWS?wsdl" showBusyCursor="true"/>
	
	<mx:DataGrid dataProvider="{srv.getProducts.lastResult}" width="100%" height="100%">
		<mx:columns>
			<mx:DataGridColumn dataField="productId" headerText="Product Id"/>
			<mx:DataGridColumn dataField="name" headerText="Name"/>
			<mx:DataGridColumn dataField="price" headerText="Price"/>
		</mx:columns>
	</mx:DataGrid>
	
	<mx:Button label="Get Data" click="srv.getProducts()"/>

Sencillamente genial .

Rellenando la tabla con un RemoteObject

Y luego también puedes utilizar "Remote Objects", es decir, coges un POJO Java y lo puedes utlizar desde ActionScript como si estuviera en local, como si estuvieses utilizando RMI. Por ejemplo:

	<mx:RemoteObject id="srv" destination="product"/>
	<mx:DataGrid dataProvider="{srv.getProducts.lastResult}" width="100%" height="100%"/> 
	<mx:Button label="Get Data" click="srv.getProducts()"/>

En este caso definimos un RemoteObject de nombre "srv". El atributo "destination" lo podemos considerar un alias. Este alias se define en un archivo de configuración "remoting-config.xml". Este es un pedazo de ese fichero:

    <destination id="product">
        <properties>
            <source>flex.testdrive.store.ProductService</source>
        </properties>
    </destination>

Donde flex.testdrive.store.ProductService es la clase de nuestro POJO. En el ejemplo se ve que podemos usar los métodos de nuestro POJO. Al hacer click en el botón se llama a getProducts() que es un método de nuestro POJO. Este POJO sería una cosa así...

public class ProductService {

	public List getProducts() { /* ... */ }

}

El método getProducts() devuelve una lista de objetos Product. La clase Product podría ser una cosa así:

public class Product {

	private int productId;
	private String name;
	private String description;
	private String image;
	private String category;
	private double price;

	/* métodos get y set */
}

En fin, no soy un experto ni mucho menos de Flex, pero me están gustando muchas de las ideas que aporta. Seguiré investigando

Todos estos ejemplos los he sacado de Flex Test-Drive for Java Developers.

Actualizado: bueno, ahora se me ocurre que en Java no sería nada complicado hacer un par de TableModels que permitiesen esta facilidad. Por ejemplo:

TableModel tableModel = new HttpTableModel(new URL("http://.../catalog.jsp"), "catalog", "product");

El primer parámetro sería la URL a la que solicitar los datos, y el resto sería un varargs indicando el nivel de anidamiento que buscar. En este caso cada elemento "product", hijo del elemento "catalog" sería una fila.

También se podría hacer un TableModel que obtuviese los datos de un Web Service.

TableModel tableModel = new WebServiceTableModel(new URL("http://coenraets.org/services/ProductWS?wsdl"), "getProducts");

El primer parámetro sería la URL donde se localiza el WSDL, el segundo parámetro sería el nombre del método, y luego habría un varargs de objetos que se utilizaría si el método del Web Service tuviese parámetros.

Quién se anima a implemnetar estos TableModels? :P