Desarrollando con GWT

Aplicando Estilos - Parte I

2012-10-29T19:00:00.000-07:00

Ubicación de los archivos de estilos (CSS)

En el artículo anterior, Composite Widgets, Composite Widgets, se describió paso a paso la construcción de un widget propio utilizando los widgets provistos por GWT. El resultado fue un widget básico en el que no se utilizaron estilos propios para darle otra apariencia al widget sino que se utilizó uno estándar proporcionado por GWT. Generalmente un proyecto GWT utiliza un archivo estándar de estilos definido en el descriptor del proyecto (proyecto.gwt.xml). Este archivo de estilos no es más que un archivo CSS (Cascading Style Sheets) de los cuatro temas estándar que GWT 2.4 provee: Clean, Standard, Chrome y Dark.

Ya es hora de darle un estilo o una apariencia propia a su proyecto para que adquiera una personalidad bien definida dentro del mundo de las aplicaciones web.

Para entender un poco mejor como GWT selecciona el estilo para su proyecto, entre a Eclipse, abra el proyecto Login que desarrollamos en Composite Widgets y abra el archivo Login.gwt.xml dentro del paquete com.example.login:

<?xml version="1.0" encoding="UTF-8"?>

<inherits name='com.google.gwt.user.theme.clean.Clean'/>

<entry-point class='com.example.login.client.Login'/>

</module>

Preste especial atención a la sección Inherit the default GWT style sheet:

<inherits name='com.google.gwt.user.theme.clean.Clean'/>

Este es un archivo XML y por lo tanto sigue las especificaciones para crear archivos de este tipo. Recuerde que dentro de un archivo XML los comentarios se definen entre los símbolos <!— y -->.

Como podrá observar, el único tema de estilos habilitado para este proyecto es el definido como com.google.gwt.user.theme.clean.Clean. Los demás temas están encerrados entre los símbolos de definición de comentarios, es decir, están deshabilitados.

Revise la definición de este archivo:

Desde Eclipse y dentro del proyecto CompositeLogin, abra la carpeta war, luego la carpeta login y por último la carpeta clean. Allí encontrará el archivo clean.css. Abra este archivo y observe las definiciones de estilos estándar que GWT ofrece.

No es necesario que sea un experto en CSS, sin embargo, algunas definiciones requerirán de algún análisis de su parte.

Es importante que no haga modificaciones sobre estos archivos estándar de GWT, aunque no hay ninguna restricción, la mejor alternativa, si es que ninguno de los otros temas es de su preferencia, es crear su propio archivo de estilos CSS e incluirlo en el proyecto. Recuerde que en el momento de crear el proyecto, GWT genera un archivo básico CSS, cuyo nombre es dado por el nombre del proyecto y la extensión css. Este archivo puede ser editado y cambiado de acuerdo con sus preferencias de estilos. Por ejemplo, en el proyecto CompositeLogin, GWT creó el archivo Login.css.

La siguiente figura muestra la ubicación de los archivos de estilos dentro de su proyecto:

Ahora se estará preguntando, ¿Qué pasa si deseo incluir un nuevo archivo de estilos? o ¿Cómo se remplaza un archivo CSS existente? Estas preguntas pueden surgir porque usted ya tiene definidos sus propios estilos utilizados en proyectos anteriores o que consiguió a través de terceros y por lo tanto no desea invertir tiempo en la composición de estilos nuevos.

Bien, el archivo Login.css es asociado a su proyecto en la página host HTML, en este caso, Login.html.

Abra la página host Login.html:

<!doctype html>

<html>

<head>

<link type="text/css" rel="stylesheet" href="Login.css">

<title>Login Composite</title>

</head>

<body>

Observe la línea resaltada. Incluya la definición de los otros archivos de estilos que tenga a disposición para que sean utilizados en el proyecto. Salve el archivo y no olvide copiar los archivos de sus propios estilos dentro de la estructura de carpetas o directorios del proyecto.

Tip: Si incluye un nuevo archivo de estilos en su proyecto y los aplica a los widgets de las interfaces en el código fuente Java, es conveniente refrescar la página web en ejecución así haya reiniciado la ejecución del proyecto. De esta manera se asegura que la página HTML y el descriptor GWT están utilizando el nuevo archivo de estilos.

Probando Otros Estilos Estándar de GWT

Si el tema estándar de estilos Clean no es de su preferencia, pase a probar los otros temas estándar de GWT. Por ejemplo, pruebe la aplicación utilizando el tema Standard. Abra el archivo descriptor Login.gwt.xml y cambie los símbolos de comentarios de la siguiente manera:

<inherits name='com.google.gwt.user.theme.standard.Standard'/>

De este modo, Clean se ha deshabilitado para dar paso al tema Standard. Salve al archivo. Pruebe de nuevo la aplicación y observe las diferencias.

Utilizando el tema Clean:

Utilizando el tema Standard:

Si ya hizo el cambio y aun sigue viendo la interface de usuario con el mismo tema Clean, entonces quiere decir que no leyó el tip de este artículo.

Si usted es curioso, probará los restantes temas estándar Chrome y Dark ofrecidos por GWT.

En el siguiente artículo veremos cómo crear estilos propios y como aplicarlos a los widgets de nuestros proyectos.

Composite Widgets

2012-05-30T18:54:00.003-07:00

En la publicación anterior Panels y Widgets en GWT vimos que GWT provee una gran variedad de widgets que permiten diseñar una interface de usuario de acuerdo con especificaciones propias de la aplicación. Sin embargo, a medida que vaya utilizando nuevas técnicas de desarrollo con GWT, encontrará la necesidad de manejar un grupo de widgets como si fuera uno solo. Es aquí cuando comenzará a construir sus propios widgets basados en otros existentes. Estos nuevos widgets se denominan composite widgets.

Composite widgets no son más que una colección de widgets, ya sea provistos dentro del conjunto de paquetes de GWT o que hayan sido creados por otros usuarios o compañías expertas en este campo. Normalmente un composite widget agrupa otros widgets pero se comporta como si fuera una sola entidad que ofrece una funcionalidad específica. Por ejemplo, un composite widget muy común corresponde a una interface de login, la cual requiere como entrada un usuario y una contraseña para ingresar a un sistema en particular. Además sus componentes tienen la capacidad de disparar eventos de acuerdo a las acciones hechas sobre ellos y aprueba o desaprueba la transición a otro estado de la página o a otra página de la aplicación. Esta interface de usuario se construye utilizando widgets tales como Labels, TextBoxes, Buttons, Images y Panels que facilitarán la distribución de los widgets. La interface también podrá realizar algunos efectos como desplegar un mensaje de error cuando el usuario ha entrado un usuario o contraseña inválidos, es decir, aquí habrá implementado un efecto sobre la interface.

GWT ofrece la facilidad de construir componentes de usuario de tal suerte que esto ha permitido que otras compañías construyan librerías completas que se pueden integrar a sus proyectos. De manera que anímese para crear las suyas y así obtener un ingreso adicional.

Estos nuevos componentes se construyen de tres maneras diferentes:

· Creando un widget conteniendo widgets existentes. Este es un composite widget.

· Creando un nuevo widget escrito completamente en Java.

· Creando un widget que contiene JavaScript utilizando métodos de JSNI (JavaScript Native Interface).

En este artículo solamente cubriremos la primera forma para crear widgets: composite widgets.

Construyendo un Composite widget

La construcción de un composite requiere que la nueva clase extienda la clase Composite, la cual es tiene la capacidad de contener otros widgets escondiendo los métodos del widget contenido.

Típicamente un composite se conforma de un panel que a su vez contiene otros panels y widgets. Algunos de los widgtes proporcionados por GWT son en realidad composites. Por ejemplo, TabPanel es un composite compuesto de un TabBar y un DeckPanel.

El siguiente ejemplo que he denominado LoginComposite, es una aplicación que ilustra paso a paso el procedimiento para crear un composite. Construiremos una interface de login para acceder a alguna aplicación. El contenedor principal será un DialogBox, que a su vez contendrá un VerticalPanel que permitirá ubicar los demás widgets en una sola columna. Los botones los pondremos dentro de un HorizontalPanel para ubicarlos uno al lado del otro en la misma línea. El HorizontalPanel también será parte del VerticalPanel. Es recomendable que diseñe primero su aplicación en papel o utilizando la tableta de su preferencia, esto facilitará la labor de codificación y visualizará con anticipación los panesl y widgets que se ajustarán a su diseño. Con estas indicaciones pasemos entonces a crear el proyecto.

Cree un nuevo proyecto GWT

Desde el menú principal de Eclipse seleccione:

File à New à Web Application Project

Deje la opción Sample Code activa para generar la estructura de un proyecto cliente/ servidor, aunque tan sólo utilizará la aplicación del cliente, facilitará la tarea de crear las clases y la página html desde el principio. También tendrá que cambiar parte del código generado por el wizard de GWT con su propio código.

En el navegador de Eclipse observe la estructura del proyecto:

Los archivos resaltados son los principales archivos que se utilizarán para crear la interface. Tan solo queda pendiente crear la clase de usuario que extenderá la clase Composite.

Cree una clase Entry Point

Abra la aplicación Login.java, borre el código original y copie el siguiente:

package com.example.compositelogin.client;

import com.google.gwt.core.client.EntryPoint;

import com.google.gwt.user.client.ui.RootPanel;

import com.google.gwt.user.client.ui.HTML;

public class Login implements EntryPoint {

@Override

public void onModuleLoad() {

// TODO Auto-generated method stub

RootPanel.get().add(new LoginComposite());

}

Esta clase implementa la interface EntryPoint y será la clase a invocarse desde la siguiente línea de la página Login.html:

La clase Login.java declara RootPanel como el contenedor principal de la aplicación. A través del método get(), RootPanel consigue donde insertar la interface dentro de la página HTML. Si la página HTML define una etiqueta div con un identificador, el método get(“id”) de Rootpanel accede a esa sección de la página y posiciona allí la interface construida en LoginComposite. La siguiente línea de código se encarga de hacer todo este trabajo:

RootPanel.get().add(new LoginComposite());

A continuación creará la clase que implementará la interface. Seleccione el paquete com.example.login.client, click derecho y seleccione New à Class.

Entre el nombre LoginComposite:

Click en Finish.

Abra el archivo LoginComposite.java e inserte la siguiente línea de código después de la sentencia de definición del paquete:

import com.google.gwt.user.client.ui.Composite;

Esta clase se utilizará en la declaración de la clase LoginComposite, tal y como se muestra en la siguiente línea de código.

public class LoginComposite extends Composite {

Ahora incluya las sentencias para instanciar los panels y widgets que se utilizarán en la interface. Después de la línea de identificación de la clase, defina las siguientes variables:

private DialogBox dbLogin = new DialogBox();

private VerticalPanel vpContainer = new VerticalPanel();

private Label lblError = new Label("Usuario o Contrase\u00F1a inv\u00E1lidos");

private HorizontalPanel hpError = new HorizontalPanel();

private Button btnEntrar = new Button("Entrar");

private Button btnCancel = new Button("Cancelar");

private Label lblUsr = new Label("Usuario:");

private Label lblPasswd = new Label("Contrase" + "\u00F1" + "a:");

private TextBox txtUsr = new TextBox();

private PasswordTextBox txtPasswd = new PasswordTextBox();

private HorizontalPanel hpButtons = new HorizontalPanel();

El editor de Eclipse notará que los tipos de las variables declaradas no han sido importados. Para solucionar este inconveniente, importe las siguientes clases a la clase LoginComposite:

import com.google.gwt.user.client.ui.DialogBox;

import com.google.gwt.user.client.ui.VerticalPanel;

import com.google.gwt.user.client.ui.HorizontalPanel;

import com.google.gwt.user.client.ui.Button;

import com.google.gwt.user.client.ui.Label;

import com.google.gwt.user.client.ui.TextBox;

import com.google.gwt.user.client.ui.PasswordTextBox;

import com.google.gwt.user.client.Window;

import com.google.gwt.event.dom.client.ClickHandler;

import com.google.gwt.event.dom.client.ClickEvent;

La clase DialogBox, la cual es un derivado de la clase Panel, definirá el marco de referencia de la interface de usuario. Este panel tiene la propiedad setText que permite definir un título a la interface. Agregue el título “Entrada al Sistema” o sustitúyalo por otro de su preferencia:

dbLogin.setText("Entrada al Sistema");

Es hora de indicarle a la clase Composite, cuál es el widget que contendrá la totalidad de la interface:

initWidget(dbLogin);

initWidget es un método de la clase Composite que permite al panel dbLogin ser envuelto (wrapped) por esta clase. Debe incluirse en el constructor de la clase y antes de invocar otro widget o panel. Utilice initWidget solamente una vez dentro de la clase.

dbLogin será el contenedor del panel vertical vpContainer en donde se ubicarán los widgets y panels que conformarán la interface.

El label lblError se ha declarado previamente con el mensaje “Usuario o contraseña inválidos”, se utilizará como primer elemento del contenedor vertical vpContainer. Asigne el valor false a la propiedad setVisible del label para que la interface no lo despliegue cuando se cargue por primera vez en el navegador de internet:

vpContainer.setSpacing(4);

vpContainer.add(lblError);

lblError.setVisible(false);

Ahora incluya los labels, cajas de texto y los botones en el panel vertical vpContainer:

vpContainer.add(lblUsr);

vpContainer.add(txtUsr);

vpContainer.add(lblPasswd);

vpContainer.add(txtPasswd);

hpButtons.setSpacing(12);

hpButtons.add(btnEntrar);

hpButtons.add(btnCancel);

vpContainer.add(hpButtons);

Se ha creado el panel horizontal hpButtons como contenedor de los botones btnEntrar y btnCancel, así quedarán posicionados horizontalmente en la misma línea o fila. El panel hpButtons se alineará verticalmente dentro del panel vpContainer.

Los botones responden a los eventos que actúan sobre ellos. Inserte el código que implementa los manejadores de eventos. La clase Button hereda de la clase FocusWidget el método addClickHandler el cual procesa los eventos sobre los botones. En principio, incluya el código en el botón btnEntrar:

//Manejadores de click

btnEntrar.addClickHandler(new ClickHandler() {

@Override

public void onClick(ClickEvent event) {

onbtnEntrarClick();

}

});

El anterior fragmento de código hará que se ejecute el método onbtnEntrarClick() cuando el usuario de un click sobre el botón btnEntrar.

Como ejercicio cree el código para el botón btnCancel.

Por último, adicione el código para el método onbtnEntrarClick(). En él se analizará si la combinación usuario/contraseña es válida.

Por ahora el usuario y la contraseña serán valores estáticos dentro de la aplicación, aunque no es la mejor forma de autenticación, el ejemplo ilustra cómo implementar el código en respuesta a los eventos. En este caso, el usuario admin y la contraseña admin serán los valores para una correcta autenticación. Si la autenticación es válida, la interface desplegará una ventana de bienvenida, en caso contrario hará visible el label lblError:

void onbtnEntrarClick() {

if (txtUsr.getText().equalsIgnoreCase("admin") && txtPasswd.getText().equalsIgnoreCase("admin")) {

lblError.setVisible(false);

Window.alert("Hola, Bienvenido a mi aplicaci\u00F3n!");

} else {

lblError.setVisible(true);

}

Una vez haya terminado los anteriores pasos, el código completo de la clase LoginComposite se verá así:

package com.gwt.tests.client;

import com.google.gwt.user.client.ui.Composite;

import com.google.gwt.user.client.ui.DialogBox;

import com.google.gwt.user.client.ui.VerticalPanel;

import com.google.gwt.user.client.ui.HorizontalPanel;

import com.google.gwt.user.client.ui.Button;

import com.google.gwt.user.client.ui.Label;

import com.google.gwt.user.client.ui.TextBox;

import com.google.gwt.user.client.ui.PasswordTextBox;

import com.google.gwt.user.client.Window;

import com.google.gwt.event.dom.client.ClickHandler;

import com.google.gwt.event.dom.client.ClickEvent;

public class LoginComposite extends Composite {

private DialogBox dbLogin = new DialogBox();

private VerticalPanel vpContainer = new VerticalPanel();

private Label lblError = new Label("Usuario o Contrase\u00F1a inv\u00E1lidos");

private Button btnEntrar = new Button("Entrar");

private Button btnCancel = new Button("Cancelar");

private Label lblUsr = new Label("Usuario:");

private Label lblPasswd = new Label("Contrase" + "\u00F1" + "a:");

private TextBox txtUsr = new TextBox();

private PasswordTextBox txtPasswd = new PasswordTextBox();

private HorizontalPanel hpButtons = new HorizontalPanel();

public LoginComposite() {

dbLogin.setText("Entrada al Sistema");

initWidget(dbLogin);

vpContainer.setSpacing(4);

vpContainer.add(lblError);

lblError.setVisible(false);

vpContainer.add(lblUsr);

vpContainer.add(txtUsr);

vpContainer.add(lblPasswd);

vpContainer.add(txtPasswd);

hpButtons.setSpacing(12);

hpButtons.add(btnEntrar);

hpButtons.add(btnCancel);

vpContainer.add(hpButtons);

//Manejadores de click

btnEntrar.addClickHandler(new ClickHandler() {

@Override

public void onClick(ClickEvent event) {

onbtnEntrarClick();

}

});

dbLogin.setWidget(vpContainer);

}

void onbtnEntrarClick() {

if (txtUsr.getText().equalsIgnoreCase("admin") && txtPasswd.getText().equalsIgnoreCase("admin")) {

lblError.setVisible(false);

Window.alert("Hola, Bienvenido a mi aplicaci\u00F3n!");

} else {

lblError.setVisible(true);

}

Modifique la página HTML

El proyecto se creó activando la opción que genera código de ejemplo. Por esta razón, el código de la clase Entry Point se remplazó por uno propio. Del mismo modo la página Login.html debe ser modificada.

En primer lugar remplace el título:

<title>Web Application Starter Project</title>

Por:

<title>Login Composite</title>

Borre la línea:

<h1>Web Application Starter Project</h1>

Y borre también las etiquetas que crean la siguiente tabla:

<tr>

<td colspan="2" style="font-weight:bold;">Please enter your name:</td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

Al final, el código completo de la página Login.html lucirá así:

<!doctype html>

<html>

<head>

<title>Login Composite</title>

</head>

<body>

Your web browser must have JavaScript enabled

in order for this application to display correctly.

</div>

</noscript>

</body>

</html>

Es tiempo de probar la aplicación.

Pruebe la aplicación

Abra la clase Login.java y desde el menú principal seleccione:

Run à Run As à Web Application

Copie el URL que aparece en el tab Development Mode:

http://127.0.0.1:8888/Login.html?gwt.codesvr=127.0.0.1:9997

Abra una página en el navegador de internet de su preferencia y pegue el URL. Presione enter. Si no hay errores de codificación en la aplicación la siguiente página se desplegará en el navegador de Internet:

En el campo usuario entre el nombre cathy y como contraseña la palabra cathy123. Click en el botón Entrar. El label lblError se hará visible en la parte superior de la interface mostrando el mensaje de error:

Ahora pruebe de nuevo la aplicación entrando los valores admin, admin en cada campo. La respuesta será la ventana de bienvenida a la aplicación:

En una aplicación ya terminada, en lugar de la ventana de bienvenida, tendría que aparecer la página principal de su aplicación.

Como podrá observar, la interface ha tomado los estilos definidos por defecto en el archivo descriptor Login.gwt.xml. Pero con seguridad usted querrá crear y aplicar sus propios estilos a la interface para darle un toque más personalizado. Por ejemplo, El título de de la interface podría ser más grande, con otro color. Por otra parte, el mensaje de error podría aparecer enmarcado, con letras de color rojo y con un fondo amarillo.

En la siguiente publicación se describirá el procedimiento para aplicar estilos a los widgets, panels y composites utilizados en su aplicación.

Panels y Widgets en GWT

2012-03-20T20:17:00.002-07:00

Panels y widgets son la esencia de las interfaces de usuario en GWT. Son los componentes visibles que un usuario tiene frente a sus ojos y con las que interactúa para activar eventos que propician un comportamiento determinado de la aplicación. No voy a traducir a Español estos componentes, dado que un desarrollador debe estar familiarizado con estos términos que son parte de la jerga de GWT y que al traducirlos crearían más confusión que beneficio.

Widgets

Widgets son los componentes de las interfaces que interactúan con el usuario de su aplicación. Por ejemplo, Label, TextBox y Button permiten diseñar una interface en la que entramos el usuario y la contraseña requeridos para registrarnos en una aplicación. Estos componentes son widgets y tienen asociados manejadores de eventos (event handlers) para proveer una actividad dinámica cuando el usuario realiza alguna acción con el mouse, el teclado o directamente sobre la pantalla cuando ésta es de tecnología touch screen. Además de Label, TextBox y Button, GWT ofrece una amplia variedad de widgets para crear interfaces de usuarios ricas en contenidos. A continuación se ilustra algunos de los widgets más utilizados:

Button

Label

InlineLabel

TextBox

PasswordTextBox

CheckBox

RadioButton

DatePicker

TextArea

DateBox

Tree

ListBox

MenuBar

Estos son apenas ejemplos de widgets, existen muchos más que no se muestran en este artículo pero que serán utilizados en aplicaciones de ejemplo en publicaciones posteriores.

Panels

Panels son contenedores para widgets. Por ejemplo Label, TextBox y Button son posicionados en un lugar determinado dentro de una interface con ayuda de los panels. Los panels también pueden contener otros panels para agrupar widgets por algún criterio especial o simplemente para tener cierta flexibilidad en el posicionamiento de los widgets. Por su misma condición de contenedores, los panels no procesan eventos o alteran la lógica de la aplicación, aunque un desarrollador se puede valer de algunos de sus métodos para aplicar efectos a la interface. Por ejemplo, podemos hacer invisible un panel que contenga widgets y hacelo visible cuando algún evento en particular ocurra. Puede aplicar diferentes apariencias a los panels a través de los estilos CSS y también se pueden cambiar o alterar como consecuencia de un evento. Ejemplos de panels son DecoratorPanel y RootPanel los cuales son utilizados como contenedores principales dentro de la página web. En ellos residen otros panels y widgets que conforman la interface. FormPanel es utilizado para crear formularios de entrada de datos. La lista de panels continúa con AbsolutePanel, FlowPanel, VerticalPanel, HorizontalPanel, SimplePanel, ScrollPanel, etc.

Veamos algunas representaciones de panels:

HorizontalPanel

Permite posicionar la totalidad de los widgets en una sola fila horizontal.

VerticalPanel

Permite posicionar la totalidad de los widgets en una sola columna vertical.

FlowPanel

Distribuye los widgets dentro del panel de acuerdo con algún comportamiento que el usuario quiera seguir. Puede agregar dinámicamente nuevos widgtes definiendo un tamaño y una ubicación determinada.

DockLayoutPanel

Organiza los widgets ajustándolos en cinco regiones: Norte, sur, este, oeste y centro. Cada región puede contener más de un componente y es identificado por una constante correspondiente: NORTH, SOUTH, EAST, WEST y CENTER.

GWT provee otros panels que permiten dar versatilidad y dinamismo a sus páginas web. Entre otros tenemos PopupPanel, StackPanel, VerticalSplitPanel, SplitLayoutPanel, TabPanel, etc.

Panels, widgets y Java

Panels y widgets son clases Java empaquetadas en com.google.gwt.user.client.ui. En cada aplicación usted tendrá que importar el paquete o la clase específica correspondiente al panel o widget que desee utilizar. Por ejemplo, las siguientes líneas de código son requeridas cuando utilice los componentes Button, CheckBox, DateLabel, DockLayoutPanel y FlowPanel:

import com.google.gwt.user.client.ui.Button;

import com.google.gwt.user.client.ui.CheckBox;

import com.google.gwt.user.client.ui.DateLabel;

import com.google.gwt.user.client.ui.DockLayoutPanel;

import com.google.gwt.user.client.ui.FlowPanel;

Para dar vida a un panel o widget requerirá de un constructor de la clase:

//-- Horizontal Panel

HorizontalPanel hp1 = new HorizontalPanel();

//-- VerticalPanel

VerticalPanel vp1 = new VerticalPanel();

//-- Buttons

Button btntest1 = new Button("Bot&oacuten Normal");

Button btntest2 = new Button("Bot&oacuten Deshabilitado");

//--Labels

Label lbltest1 = new Label("Label 1");

Label lbltest2 = new Label("Label 2");

Cada clase de panel y widget posee una serie de métodos para asignarle propiedades a sus componentes o para modificar los existentes. Por ejemplo, para definir un estilo:

lbltest2.setStyleName("blackBackground");

illbltest3.setStyleName("simpleFrame");

fp1.setStyleName("panelFrame");

Estos estilos son definidos en un archivo CSS que también hace parte del proyecto.

Definir su tamaño:

dlp1.setSize("500px", "200px");

lbl22.setSize("50px", "35px");

Ubicarlo dentro de otro widget o panel:

lbltest3.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);

Aplicar un efecto:

lbltest1.setVisible(true);

lbltest1.setVisible(false);

Y muchas otras cosas más dependiendo de las alternativas provistas por cada clase.

Creando sus propios widgets

Aunque GWT provee una gran variedad de widgtes, habrá ocasiones en las cuales usted se verá en la necesidad de crear su propio conjunto de ellos. A esta variedad de widgets se le denomina composite widgets, no son más que una colección de widgets estándar de GWT, distribuidos de manera especial dentro de un panel o widget con capacidad de tener su propia funcionalidad y de operar como si fuera una sola entidad.

De este modo podrá crear sus propias formas para acceso de datos, tablas, manejo de gráficas e imágenes, cargadores de archivos, etc., los cuales podrán ser reutilizados dentro de su aplicación. Es más, puede crear su propio paquete de composite widgets para compartirlos dentro de otros proyectos de su organización.

El procedimiento para crear composite widgets será el tema de un próximo artículo.

Instalando una Aplicación GWT en Apache Tomcat

2012-03-09T23:23:00.002-08:00

Para verificar que su aplicación GWT funciona correctamente, una vez compilada y probada en Modo de Desarrollo, es tiempo de instalarla en un ambiente de producción.

Tomaremos la aplicación que hemos venido trabajando y que compilamos en el artículo anterior Compilando una Aplicación GWT, copiaremos los archivos generados por el compilador y los pegaremos en la carpeta de aplicaciones del servidor web Apache Tomcat. Por último reiniciaremos el servidor web y probaremos la aplicación desde un navegador.

Descargando e Instalando Apache Tomcat

He seleccionado Apache Tomcat para probar la aplicación GWT en Modo de Producción. Tomcat es un servidor web sencillo, de fácil instalación y operación, y provee un contenedor de Java Servlets. Recuerde que GWT define los servicios en Servlets y éstos requieren de un motor para su ejecución. Tomcat se ajusta perfectamente a este requerimiento y por tal razón lo he escogido para instalar la aplicación GWT. Además, hay otra gran ventaja al utilizar Apache Tomcat: es gratuito.

Si no tiene Apache Tomcat instalado en su máquina, descárguelo desde el siguiente enlace: http://tomcat.apache.org/download-60.cgi.

Seleccione la versión que se ajuste a su sistema operativo, descárguelo e instálelo localmente en su máquina. Una vez terminado este proceso, tendrá una estructura de directorios similar a la siguiente:

Probando Tomcat

Inicie Tomcat ejecutando la aplicación startup localizada en la carpeta bin.

La aplicación mostrará una ventana con el resultado de la ejecución:

El último mensaje de esta ventana de ejecución indica que el servidor ha sido ejecutado y que Tomcat está activo y listo para recibir requerimientos HTTP.

Abra una ventana del navegador y acceda al siguiente URL: http://localhost:8080

Tomcat habilita por defecto el puerto 8080 para atender requerimientos HTTP.

Una página similar a la siguiente se desplegará en el navegador:

Está página indica que Tomcat está aceptando, procesando y respondiendo requerimientos HTTP.

Para más información acerca de Tomcat puede consultar sitios web dedicados a este servidor web.

Copiando Archivos

Vamos a nuestra aplicación GWT en Eclipse. En el artículo anterior Compilando una Aplicación GWT se generaron los archivos necesarios para ser instalados en un servidor web. Estos archivos fueron el producto de la compilación con el compilador GWT.

Desde Eclipse, abra el proyecto ejemplo1, abra el directorio war y seleccione las carpetas y archivos que se encuentran allí:

Sobre los archivos seleccionados de click derecho y seleccione Copy.

Dentro de la carpeta webapps de Tomcat cree la carpeta ejemplo1 y pegue los archivos y carpetas seleccionados en Eclipse. Al final tendrá una estructura similar a la siguiente:

Ahora debe reiniciar Tomcat para que al momento de ejecutarse cargue también la aplicación ejemplo1. Para reiniciar Tomcat, simplemente cancele la ejecución que esté en proceso y ejecute de nuevo la aplicación startup de la carpeta bin de Tomcat.

Abra una ventana del navegador y entre el siguiente URL:

http://localhost:8080/ejemplo1/

Voila!!!!

La aplicación GWT se ejecutará y el navegador desplegará la siguiente vista:

Recuerde que ahora su aplicación se está ejecutando en Modo de Producción desde Apache Tomcat. Notará que su ejecución es mucho más rápida porque el código JavaScript se descarga de Tomcat a la página del navegador directamente. En Modo de Desarrollo, se ejecuta el código bytecode de Java y luego se traduce a JavaScript.

Si realiza cambios al código Java de su aplicación, debe volver a repetir todo el proceso: Ejecutar y probar la aplicación en Modo de Desarrollo, compilarla con el compilador GWT, copiar los archivos generados por GWT dentro de la carpeta de aplicaciones webapps de Tomcat, reiniciar Tomcat y ejecutar la aplicación desde un navegador.

Una vez probado en Modo de Producción, puede instalar su aplicación en cualquier servidor web que contenga un motor de ejecución de Java Servlets.

Compilando una aplicación GWT

2012-02-24T23:34:00.005-08:00

Modo de Producción

Si ha completado con éxito las pruebas de la aplicación en modo de desarrollo, proceda a compilarla para generar el código JavaScript, genere un Web Archive (WAR) e instálelo en el servidor web de su preferencia. La aplicación se ejecutará en modo de producción y será equivalente al modo de desarrollo. Es posible que encuentre algunas fallas que no se presentaron en modo de desarrollo, pero no es frecuente que esto suceda.

Ejecutar su aplicación en modo de producción permite probar la aplicación como si ya hubiese sido instalada en el servidor web final. Puede realizar pruebas desde diferentes navegadores apuntando al URL en donde reside su aplicación en el computador en donde instaló su servidor web de pruebas.

Desempeño de la aplicación (performance)

El modo de desarrollo de GWT utiliza un motor (engine) especial para ejecutar la aplicación como una mezcla de bytecode de Java y JavaScript, por esta razón la ejecución se notará más lenta a como se ejecuta en modo de producción. Aunque habrá ocasiones en las que complejos algoritmos escritos en Java se ejecutarán mucho más rápido en modo de desarrollo dado que el JVM supera a la mayoría de los motores de JavaScript.

Sin embargo, cuando la aplicación despliega grandes cantidades de datos en un número considerable de Widgets, podrá confirmar que el desempeño será mucho mejor cuando la aplicación haya sido instalada en un servidor web.

Desempeño de la aplicación

GWT ha sido diseñado para proveer soporte en múltiples navegadores, de tal manera que el promedio de los desarrolladores no deben preocuparse por cómo acondicionar la aplicación a cada navegador. Pero si crea nuevos Widgets o si utiliza librerías JavaScript de terceros, debe confirmar que estos componentes operan correctamente en cada navegador en donde se ejecutará la aplicación.

Apariencia en diferentes navegadores

Como los Widgets de GWT usan los componentes nativos DOM de cada navegador, la apariencia de la aplicación puede cambiar de un navegador a otro. Cuando utilice una hoja de estilos (stylesheet) verifique que este estilo funciona correctamente en cada navegador.

Compilador GWT

El compilador es el corazón de GWT, convierte código fuente Java en JavaScript. Soporta la gran mayoría del lenguaje Java. La librería de ejecución GWT (GWT runtime library) emula un subconjunto relevante de la librería de ejecución Java (Java runtime library). Cuando una clase de JRE o un método no es soportado, el compilador emitirá un error.

El compilador puede ser ejecutado desde la línea de comando del sistema operativo, pero en este caso continuaremos utilizando las bondades de Eclipse Helios.

Utilizaremos como ejemplo el proyecto creado en el blog Instalando Eclipse y GWT.

Para compilar una aplicación, simplemente abra Eclipse, seleccione el proyecto que va a compilar y desde la barra de comandos seleccione el icono de GWT y luego la opción GWT Compile Project:

El compilador mostrará las siguientes opciones de compilación:

Analicemos estas opciones:

Project

Confirme el nombre del proyecto que va a compilar.

Log Level

Define el nivel de detalle de los mensajes que aparecerán en el log de la aplicación. Seleccione una de las siguientes: Error, Warn, Info, Trace, Debug, Spam, All.

Output Style

Define el estilo de presentación en el que será generado del código JavaScript. Obfuscated es el estilo que hace que el código JavaScript luzca como una sopa de letras, el código está comprimido y es muy complicado descifrarlo. Además, ayuda a proteger la propiedad intelectual de su aplicación y reduce el tamaño de los archivos JavaScript convirtiéndose en una ventaja cuando el código deba transportarse del servidor web al navegador del cliente. Pretty genera un código JavaScript mucho más claro y entendible. Detailed mejora la versión Pretty y produce más detalles del código.

Intente probar estos estilos de compilación como ejercicio de comparación del código JavaScript generado.

Entry Point Moules

GWT identificará el punto de entrada (entry point) de su proyecto. Sin embargo verifique que el que aparece en esta ventana de opciones es el mismo que se ha definido en el archivo descriptor.

Cuando haya identificado estas opciones, de click en Compile.

Observe los mensajes que aparecen en la vista Console de Eclipse:

Desde el explorador de proyectos de Eclipse, abra el proyecto ejemplo1, abra el directorio war y luego el directorio ejemplo1. Observe los archivos que se han generado allí como producto del proceso de compilación. El número de archivos HTML corresponde al número de permutaciones hechas por el compilador (ver vista Console de Eclipse).

Abra uno de estos archivos HTML para observar el código JavaScript generado. Compile de nuevo el proyecto cambiando una de las opciones de Output Style y revise el nuevo código JavaScript para que observe las diferencias. Cuando vaya a compilar la aplicación para ser instalada en un servidor web, es recomendable que genere el código en estilo Obfuscated para que los archivos sean más compactos y sean de difícil interpretación para quienes intenten copiar el código sin autorización.

Analicemos algunos de los archivos creados por el compilador GWT:

Ejemplo1.html

Es la página principal de la aplicación (host page) y la que los visitantes a su servidor web podrán ver primero. En esta página serán cargados el resto de los archivos de la aplicación. El archivo HTML debe contener una etiqueta <script> en donde se referencia el archivo de arranque (bootstrap):

src="ejemplo1/ejemplo1.nocache.js"></script>

Archivo de arranque (bootstrap) ejemplo1.nocache.js

Este archivo es responsable de seleccionar la correcta versión de su aplicación para ser cargada por el cliente dependiendo del navegador y los parámetros de ubicación (locale).

Archivos de la aplicación (.cache.html)

Es el conjunto de archivos generados más importantes. Representan una versión de su aplicación ajustada a un navegador específico. Estos archivos son seleccionados por el archivo de arranque (bootstrap) después que ha identificado el navegador desde el cual se está ejecutando la aplicación.

Archivo RPC (.gwt.rpc)

Este archivo es requerido si se está utilizando RPC en la aplicación. Soporta la interface de serialización para tipos de datos transferidos a través de RPC.

Recursos Públicos

Todos los recursos públicos tales como archivos de imágenes, estilos, o archivos XML pueden ubicarse en cualquier parte dentro del subdirectorio war

Depurando una aplicación GWT

2012-02-20T11:07:00.002-08:00

Modos de ejecución

Hay dos modos de ejecución de una aplicación GWT. El primer modo se denomina Modo de Desarrollo (Development Mode), el cual se realiza utilizando las bondades de un IDE (Integrated Development Environment) o directamente desde la línea de comando de su sistema operativo. En este blog utilizaremos Eclipse Helios. En versiones iniciales de GWT, el modo de desarrollo se conocía como Modo Hospedado (hosted mode) y proporcionaba algunas herramientas adicionales que permitía probar la aplicación desde un navegador hecho exclusivamente para este propósito. En las versiones recientes de GWT las aplicaciones pueden ser probadas desde el navegador de su preferencia.

El segundo modo se denomina Modo de Producción (Production Mode) anteriormente llamado Modo Web (web mode). En este modo el código Java será compilado y traducido a JavaScript y la aplicación GWT se ejecutará de la misma manera como se ejecuta cuando ha sido instalada en un servidor web,

Depurando en Modo de Desarrollo

Una aplicación GWT puede ser ejecutada en modo de desarrollo desde un IDE. Los programas Java son compilados a bytecode de Java y los componentes son desplegados en un navegador a través de los mecanismos provistos por GWT. Por lo tanto, las facilidades de depuración (debugging) del IDE están disponibles para depurar tanto las aplicaciones cliente como servidor.

Como ya se explicó en el blog Ejecutando una aplicación GWT, para ejecutar su aplicación abra Eclipse, de click en el botón derecho del ratón y desde el menú de opciones seleccione Run As --> Web Application. Otra manera de ejecutar la aplicación es seleccionando el proyecto y desde el menú principal seleccione las opciones Run --> Run As --> Web Application. Copie el URL que aparece en la vista de tareas de Eclipse y cópielo en el navegador para probar la aplicación.

Este proceso lo realizará infinitas veces hasta que su aplicación este completada y suficientemente probada para ser puesta en producción.

Sin embargo, en ocasiones es necesario detener la aplicación en algún lugar determinado, en donde se está presentando un error o en donde la aplicación se comporta de manera distinta a lo esperado. Bien, aquí debemos depurar o en inglés debug. Desde Eclipse abra su proyecto, de click sobre el botón derecho del ratón, seleccione Debug As --> Web Application. La aplicación se ejecutará de manera similar a como si se hubiera ejecutado seleccionando Run As --> Web Application.

También puede iniciar la depuración desde el menú principal, Run --> Debug As --> Web Application, o simplemente dando click al ícono con figura de escarabajo o insecto (bug) de la barra de comandos de Eclipse.

Para detener la ejecución en un lugar específico, ubique la línea en donde va a detener la ejecución y en la barra izquierda del editor de doble click.

Una pequeña esfera aparecerá allí indicando el lugar en donde la ejecución se detendrá. Esto se conoce como un breakpoint o punto de ruptura.

Ejecute nuevamente la aplicación en modo depuración, copie el URL de la vista Development Mode de Eclipse y péguelo en el navegador para probar la aplicación. Eclipse mostrará un mensaje advirtiendo que la perspectiva de Eclipse cambiará para mostrar las vistas que despliegan información relacionada con la depuración de la aplicación:

Click en Yes.

La ejecución de la aplicación se detendrá en la línea en donde se definió el breakpoint.

Observe las vistas adicionales que Eclipse ofrece.

La vista Debug muestra la clase y el método en donde la aplicación se ha detenido.

La vista Variables muestra el estado de cada variable hasta ahora puestas en memoria. Aquí puede consultar el valor de cada una.

La vista con el código Java de la aplicación muestra la línea en donde se ha detenido.

La vista outline es una referencia para indicar la posición de la ruptura del programa dentro de todo el proyecto.

La vista Console, en la parte inferior de Eclipse, hace parte de las vistas de tareas. Aquí puede ver salidas o mensajes que el programador ha puesto directamente dentro del programa. Por ejemplo, la salida del método System.out.println o los mensajes enviados utilizando la utilidad GWT.log.

Para continuar con la ejecución utilice las opciones disponibles para debugging que Eclipse ofrece. Vaya al menú principal, seleccione Run y una de las opciones disponibles:

Puede continuar la ejecución del programa línea por línea pulsando F5, o si ha puesto varios breakpoints dentro de su programa, pulse F8 para que la ejecución continúe y se detenga en el próximo breakpoint.

Para retornar a la perspectiva del ambiente de desarrollo de Java de Eclipse, vaya a la parte superior derecha de Eclipse y de click sobre el ícono Java:

Refrescando el Modo de Desarrollo

Puede realizar cambios en el código de la aplicación y reiniciar la ejecución. No es necesario que termine o detenga completamente la ejecución, puede simplemente refrescar el navegador para que el nuevo código cargue y se ejecute.

Si ha modificado aplicaciones del servidor, es conveniente que reinicie el servidor Jetty que viene integrado a Eclipse. Simplemente de un click sobre el ícono de flechas amarillas de la vista Development Mode:

Mensajes de Depuración con GWT.log

GWT provee una utilidad para generar mensajes desde su programa a la vista Development Mode de Eclipse. Haciendo llamados al método GWT.log() podrá generar mensajes de depuración que le indicarán el sitio y el estado de su aplicación.

Por ejemplo inserte un par de líneas con llamados a GWT.log:

public void onModuleLoad() {

GWT.log("Comenzando la ejecucion de la aplicacion...", null);

final Button sendButton = new Button("Enviar");

final TextBox nameField = new TextBox();

nameField.setText("Usuario GWT");

final Label errorLabel = new Label();

// We can add style names to widgets

sendButton.addStyleName("sendButton");

// Add the nameField and sendButton to the RootPanel

// Use RootPanel.get() to get the entire body element

GWT.log("Obteniendo elementos de la pagina web", null);

RootPanel.get("nameFieldContainer").add(nameField);

RootPanel.get("sendButtonContainer").add(sendButton);

RootPanel.get("errorLabelContainer").add(errorLabel);

Salve la aplicación, refresque el navegador y observe los mensajes que aparecen en la vista Development Mode de Eclipse:

Los mensajes enviados desde GWT.log se mezclan son los mensajes generados por GWT. A medida que la aplicación se vuelva más compleja, inserte en el mensaje la ubicación en donde éste se genera, por ejemplo:

GWT.log("Ejemplo1:onModuleLoad():Comenzando la ejecucion de la aplicacion...", null);

De ese modo podrá identificar sus propios mensajes y rastrear fácilmente el flujo de la aplicación.

También puede utilizar la salida estándar más popular de Java: System.out.println. Como ejercicio inserte una línea con algún mensaje que facilite la depuración y observe la salida del mensaje en la vista Console.

Estructura de un Proyecto GWT

2012-02-03T21:08:00.002-08:00

Prerequisitos

Antes de entrar a detallar la composición de un proyecto GWT, es conveniente saber el significado de módulo.

Módulo (Module)

Un módulo GWT es simplemente una encapsulación de funcionalidad. El concepto comparte algún parecido a un paquete Java (Java package) pero no es la misma cosa. Se nombran del mismo modo separando los nombres de los subdirectorios o subcarpetas con punto. Por ejemplo, la mayoría de los módulos estándar de GWT están subordinados a com.google.gwt.

Modulo	Contenido
com.google.gwt.user.User	Núcleo de la funcionalidad de GWT; requerido en cada proyecto
com.google.gwt.http.HTTP	Librería de comunicaciones HTTP de bajo nivel
com.google.gwt.i18n.I18N	Soporte para internacionalización
com.google.gwt.json.JSON	Creación e interpretación de estructuras JSON
com.google.gwt.junit.JUnit	Framework para pruebas e integración JUnit
com.google.gwt.xml.XML	Creación e interpretación de documentos XML

Un módulo es definido por un archivo descriptor XML terminado con la extensión .gwt.xml. El nombre de este archivo determina el nombre del módulo. En nuestro ejemplo, creamos un proyecto llamado ejemplo1. Internamente GWT crea el descriptor src/com/gwt/ejemplo1/Ejemplo1.gwt.xml, creando a su vez el módulo com.gwt.ejemplo1. El contenido del archivo .gwt.xml especifica una lista precisa de las clases Java y otros recursos que son incluidas en el módulo GWT.

En otras palabras, un módulo GWT agrupa todas las propiedades de configuración que su proyecto necesita, entre ellas podemos destacar las siguientes:

· Lista de módulos heredados. Por ejemplo, com.google.gwt.user.User debe estar definido en cada módulo, por ser el núcleo de GWT.

· El nombre de la clase Java que se utilizará como punto de entrada (entry point). Esta es la clase que se instanciará al comienzo, invocando el método EntryPoint.onModuleLoad(), cuando el módulo sea cargado.

· Ubicación de los subpaquetes fuentes a ser compilados y traducidos a JavaScript.

· Ubicación de los subpaquetes públicos a ser compilados y traducidos a Javscript. Aquí debe incluirse el URL completo de la ubicación de estos subpaquetes.

· Además, puede agregar propiedades adicionales para la compilación y traducción de los fuentes en Javascript.

Estructura de un Proyecto GWT

Tomando como referencia el proyecto ejemplo1 creado en el blog anterior, observamos que hay cinco grandes elementos definidos allí. Los dos primeros corresponden a carpetas de programas fuentes, los dos siguientes son contenedores de librerías y el último elemento corresponde a la carpeta que incluirá la aplicación web cuando esté lista para ser puesta en producción.

Cuando creamos este proyecto, en el asistente seleccionamos la opción Sample Code (código ejemplo), por esta razón, el proyecto contiene archivos adicionales a los que inicialmente teníamos previstos. El asistente ha creado aplicaciones tanto para el lado del cliente como del servidor. Más adelante revisaremos esta funcionalidad basada en RPC. Por ahora revisemos la estructura creada por el asistente:

Paquetes para código fuente:

Paquete	Propósito
com.gwt.ejemplo1	Paquete raíz del proyecto. Contiene el archivo descriptor XML:Ejemplo1.gwt.xml.
com.gwt.ejemplo1.client	Archivos fuentes y subpaquetes del lado del cliente: Ejemplo1.java, GreetingService.java y GreetingServiceAsync.java
com.gwt.ejemplo1.server	Archivos fuentes y subpaquetes del lado del servidor: GreetingServiceImpl.java
com.gwt.ejemplo1.shared	Recursos que pueden ser compartidos tanto del lado del cliente como del servidor

Paquete para aplicaciones de prueba:

Paquete	Propósito
com.gwt.ejemplo1	Paquete vacío en el cual podrá crear aplicaciones para probar sus aplicaciones del proyecto.

Librerías del SDK (Software Development Kit) de GWT

Librería	Propósito
gwt-user.jar	Contiene la gran mayoría de fuentes Java que componen GWT. Incluye las clases que generalmente utilizamos en nuestro propio código. Por ejemplo todas las clases de widgets (componentes gráficos), animación, manejo de eventos, etc.
gwt-dev.jar	Contiene clases que soportan la ejecución del proyecto en modo de desarrollo (development mode)
validation-api-1.0.0.GA-sources.jar	Contiene los fuentes Java de un sistema de validación para la integración entre cliente y servidor
validation-api-1.0.0.GA.jar	Contiene las clases Java de un sistema de validación para la integración entre cliente y servidor

Librerías del sistema JRE (Java Runtime Environment)

Librería	Propósito
resources.jar	Clases JRE de propósito general para la ejecución de clases Java
rt.jar	Runtime clases Java
jsse.jar	Clases para seguridad de sockets (Java Secure Socket Extension)
jce.jar	Clases para codificación (Java Cryptography Extension)
charsets.jar	Clases para conversión de caracteres
dnsns.jar	Clases para representar direcciones IP.
dns_sd.jar	Clases para DNS auto descubrimiento (DNS Self Discovery)
localedata.jar	Clases para localización, tales como formatos de fechas, números, moneda, zona horaria, etc.
sunjce_provider.jar	Clases para codificación (Java Cryptography APIs)

Web Archive (war)

Archivo	Propósito
war/WEB-INF/lib/gwt-servlet.jar	Provee en el lado de el servidor las clases requeridas para implementar los mecanismos de GWT RPC (Remote Procedure Call)
war/WEB-INF/web.xml	Archivo de configuración de Servlets
war/Ejemplo1.css	Archivo de definición de estilos. (Cascading Style Sheets)
war/Ejemplo1.html	Archivo HTML en el cual la aplicación GWT será cargada.

Archivos del Proyecto GWT

Ejemplo1.gwt.xml

Abra este archivo en Eclipse y revise su contenido. Como ya vimos, este es el archivo descriptor, un documento XML que contiene propiedades especificas para este proyecto. Hereda paquetes GWT como com.google.gwt.user.User:

Define también las clases que se utilizarán para definir el tema de composición en CSS (Cascading Style Sheets). El asistente deja disponible la clase:

Como ejercicio puede volver esta linea un comentario y habiliar alguna de last res opciones adicionales que contiene este archivo descriptor:

El punto de entrada (entry point), indica la clase Java que se instanciará cuando se ejecute el proyecto:

<entry-point class='com.gwt.ejemplo1.client.Ejemplo1' />

El archivo descriptor también especifica la ubicación de los archivos fuentes de Java que se compilarán y se traducirán en Javascript:

¿Por qué no se incluye aquí los archivos Fuentes para el servidor? La respuesta es porque las aplicaciones del servidor se ejecutan como clases de Java y no como Javascript.

Ejemplo1.java

Este es el archivo principal de su proyecto. Aquí se alojarán los componentes que se desplegarán en la página web.

Contiene el método onModuleLoad() el cual es el primer método a ejecutarse cuando se instancia esta clase. Desde este punto comienza a tener vida su aplicación.

GreetingService.java

Esta interface hace parte de la implementación RPC que hará posible el diálogo entre el cliente y el servidor. Extiende RemoteService de GWT y define la lista de los métodos RPC que tendrán una implementación en el servidor.

@RemoteServiceRelativePath("greet")

public interface GreetingService extends RemoteService {

String greetServer(String name) throws IllegalArgumentException;

}

GreetingsServiceAsync.java

Esta es una interface asincrónica del servicio creado en GreetingService y es invocada desde el lado del cliente.

public interface GreetingServiceAsync {

void greetServer(String input, AsyncCallback<String> callback)

throws IllegalArgumentException;

}

Observe que esta interface contiene un método con el mismo nombre dado en GreetingService.java. La diferencia radica en los parámetros dados. El parámetro de tipo AsyncCallback nos ayudará a implementar el servicio bajo las características de AJAX. Se hace el llamado al servicio y la ejecución de la aplicación no se detiene a esperar una respuesta. La ejecución continúa y el resultado se procesa tan pronto como llegue de regreso del servidor. Por esta razón se denomina un servicio asincrónico.

GreetingServiceImpl.java

Esta clase define el servicio RPC en si. Extiende RemoteServiceServlet e implementa la interface asociada que define los servicios. Observe que la implementación del servicio no se hace sobre la versión asincrónica de la interface:

public String greetServer(String input) throws IllegalArgumentException {

¿Cómo determinar esto? Bueno, observe los parámetros de los métodos. La implementación del método greetServer(String input) corresponde al método definido en la interface GreetingService.java.

En realidad esta clase es un Java Servlet, que no extiende la típica clase HTTPServlet que se encarga de entablar un diálogo cliente-servidor utilizando el protocolo HTTP, sino que extiende la clase GWT RemoteServiceServlet, que realiza una serialización automática de los datos transmitidos entre el cliente y el servidor e invoca el método correspondiente en la implementación de este servicio.

Cabe destacar que esta clase residirá en el lado del cliente.

FieldVerifier.java

Esta clase hace parte del paquete com.gwt.ejemplo1.shared. Es una clase que puede ser compartida entre el cliente y el servidor. Normalmente aquí se crean clases que se utilizarán como herramientas o utilitarios para soportar el proceso general del proyecto. Rutinas de validación, rutinas para realizar cálculos, para manipular cadenas de caracteres, etc., son implementadas aquí.

Ejemplo1.css

Define los estilos utilizados para personalizar los componentes de la página web. Aquí puede definir estilos propios dando rienda suelta a su creatividad si tiene buenos conocimientos de CSS.

Ejemplo1.html

Esta es la página principal del proyecto. Es la página que se invoca cuando se ejecuta su aplicación. Ya hemos visto como modificar este archivo en el blog anterior Ejecutando una Aplicación GWT.

Ejecutando una aplicación GWT

2012-02-03T20:49:00.002-08:00

Tomando como referencia el proyecto creado en el blog anterior Instalando Eclipse y GWT, inicie Eclipse, abra el proyecto ejemplo1 y proceda a ejecutarlo.

Hay varias formas para ejecutar su aplicación.

De click derecho sobre el nombre del proyecto. Desde este menú de opciones seleccione Run As --> Web Application.

Otra manera para ejecutar su proyecto es seleccionando el proyecto en el Explorador de Eclipse, y desde el menú principal seleccione las opciones: Run --> Run As --> Web Application.

O la más fácil, simplemente de click en el botón verde Run de la barra de herramientas en la parte superior de Eclipse.

Espere unos segundos mientras GWT prepara el ambiente de ejecución de su aplicación.

GWT instalará su aplicación en el servidor web Jetty, el cual es iniciado desde Eclipse. Este será su ambiente web de pruebas durante el proceso de desarrollo.

En Eclipse podrá configurar compilación automática cada vez que haga modificaciones al código fuente. Para ello seleccione del menú principal de Eclipse las siguientes opciones: Project --> Build Automatically.

Si no desea una compilación automática, remueva esta selección, y cada vez que quiera compilar su aplicación seleccione Project --> Build All o simplemente presione las teclas Ctrl+B:

Podrá probar su aplicación desde un navegador tan pronto como haya sido instalada en Jetty. Si el proceso de compilación e instalación ha sido exitoso, Eclipse le indicará el URL desde donde su aplicación podrá ser accesible.

Revise la vista de tareas en la parte inferior de Eclipse. Seleccione la pestaña (tab) Development Mode:

Copie el URL que aparece en el panel, abra una nueva ventana del navegador y pegue el URL en la barra de direcciones:

Presione Enter.

Espere unos segundos mientras la aplicación es descargada en el navegador:

Entre un nombre y de click en el botón Send. Espere unos segundos. En el navegador aparecerá:

Se preguntará de dónde aparecieron los componentes de esta página. Recuerde que cuando se creó el proyecto ejemplo1, se eligió la opción Sample Code. Este código generado automáticamente por GWT nos permitirá examinar un proyecto completo de GWT, incluyendo tanto los componentes del cliente como del servidor, así como también los mecanismos que implementan Remote Procedure Call (RPC) para la comunicación entre estos dos niveles. La funcionalidad general de este proyecto se analizará en detalle en un próximo blog.

Por ahora, puede comenzar realizando pequeños cambios en la presentación.

Por ejemplo, cambie el tema del estilo de apariencia de los componentes de la página. En el Explorador de Proyectos (Project Explorer) de Eclipse, seleccione el proyecto ejemplo1, abra la carpeta src y abra el paquete com.gwt.ejemplo1. Allí encontrará el archivo Ejemplo1.gwt.xml. Este es un documento XML que corresponde al descriptor del proyecto. Este archivo se explicará ampliamente en el próximo blog. Por ahora podemos decir que en este archivo se definen algunas opciones del proyecto, como la clase que se instanciará cuando se ejecute el proyecto, los paquetes de GWT que se incluirán en las aplicaciones, la ubicación de los programas Java que serán traducidos a JavaScript, etc.

La versión 2.4 de GWT provee cuatro temas de estilos para la presentación de los componentes del cliente: Clean, Standard, Chrome y Dark.

Inicialmente la aplicación tiene definido el tema Clean tal y como podrá observar en la siguiente línea del descriptor:

Para cambiar el tema Clean a Standard, ponga entre comentarios la línea anterior tal y como se muestra a continuación:

El tema Standard esta entre comentarios:

Remueva los comentarios para habilitar esta línea en el descriptor:

Salve el proyecto, reinicie la aplicación, vaya al browser y de click en refrescar. Entre el nombre y de click en Send:

Notará que los tonos de color gris han cambiado a tonos de color azul.

Como ejercicio, intente cambiar los temas de estilos a chrome y dark. De ese modo podrá escoger un tema preferido para sus próximas aplicaciones.

Archivo HTML

Una aplicación GWT se inicia cargando el archivo HTML con el mismo nombre de la clase Java definida como punto de entrada (entry point) en el archivo descriptor (Ejemplo1.gwt.xml):

<entry-point class='com.gwt.ejemplo1.client.Ejemplo1' />

La clase Ejemplo1 es el punto de entrada del proyecto. Esta clase será compilada y traducida a JavaScript. Este código JavaScript será cargado desde la página Ejemplo1.html que se encuentra dentro del directorio war/WEB-INF. Abra este directorio en el Explorador de Eclipse y abra el archivo Ejemplo1.html.

Cambie el título de su aplicación de Web Application Starter Project a GWT – Ejemplo1, o escriba un título relacionado con su proyecto inicial.

El titulo esta definido como:

<title>Web Application Starter Project</title>

Cámbielo a:

<title>GWT – Ejemplo1</title>

La página muestra el siguiente encabezado:

<h1>Web Application Starter Project</h1>

Cambie este encabezado a “GWT – Aplicación de Ejemplo”

<h1>GWT – Aplicación de Ejemplo</h1>

Puede cambiar también la etiqueta que indica en donde entrar su nombre:

<tr>

<td colspan="2" style="font-weight: bold;">Please enter your name:</td>

</tr>

Por:

<tr>

<td colspan="2" style="font-weight: bold;">Por favor entre su nombre:</td>

</tr>

Salve el archivo HTML, vaya al navegador, refresque la página y observe los resultados:

Bien, ya ha hecho los primeros cambios a su aplicación desde la página HTML. Ahora apliquemos algunos cambios a la clase en donde residen los componentes GWT.

Archivo Java

En el explorador de Eclipse abra la carpeta scr y el paquete com.gwt.ejemplo1.client. Encontrará tres archivos: la clase Ejemplo1.java y las interfaces GreetingService.java y GreetingServiceAsync.java. Las interfaces definen la manera como cliente y servidor se comunican, y la clase Ejemplo1.java contiene el código Java que será traducido a JavaScript y desplegado en la página HTML.

Abra la clase Ejemplo1.java.

Observe el nombre del paquete al cual pertenece esta clase:

package com.gwt.ejemplo1.client;

También revise las clases importadas. Estas pertenecen a paquetes Java de GWT:

import com.gwt.ejemplo1.shared.FieldVerifier;

import com.google.gwt.core.client.EntryPoint;

import com.google.gwt.core.client.GWT;

import com.google.gwt.event.dom.client.ClickEvent;

import com.google.gwt.event.dom.client.ClickHandler;

import com.google.gwt.event.dom.client.KeyCodes;

import com.google.gwt.event.dom.client.KeyUpEvent;

import com.google.gwt.event.dom.client.KeyUpHandler;

import com.google.gwt.user.client.rpc.AsyncCallback;

import com.google.gwt.user.client.ui.Button;

import com.google.gwt.user.client.ui.DialogBox;

import com.google.gwt.user.client.ui.HTML;

import com.google.gwt.user.client.ui.Label;

import com.google.gwt.user.client.ui.RootPanel;

import com.google.gwt.user.client.ui.TextBox;

import com.google.gwt.user.client.ui.VerticalPanel;

La clase Ejemplo1 implementa la clase GWT EntryPoint, lo que indica que éste será el punto de entrada (entry point) del proyecto. Recuerde la definición y propósito del archivo descriptor Ejemplo1.gwt.xml.

El método onModuleLoad() es el primero en ser ejecutado. Aquí se define la gran mayoría de los componentes desplegados en el navegador.

Comience realizando cambios sencillos antes de agregar nuevos componentes. Por ejemplo cambie la etiqueta Send del botón a Enviar y el texto GWT User a Usuario GWT:

Código original:

public void onModuleLoad() {

final Button sendButton = new Button("Send");

final TextBox nameField = new TextBox();

nameField.setText("GWT User");

final Label errorLabel = new Label();

Código nuevo:

public void onModuleLoad() {

final Button sendButton = new Button("Enviar");

final TextBox nameField = new TextBox();

nameField.setText("Usuario GWT");

final Label errorLabel = new Label();

Salve la aplicación. Si ha configurado la opción Build Automatically no tendrá que recompilarla, vaya al browser y refresque la página:

Experimente con otros cambios tanto en la página Ejemplo1.html como en la clase Ejemplo1.java, salve, compile y refresque el navegador, poco a poco se irá familiarizando con este ambiente de desarrollo.

Instalando Eclipse y GWT

2012-01-30T20:18:00.002-08:00

¿Qué es Eclipse?

Eclipse es una comunidad de código abierto, cuyos proyectos se centran en la construcción de una plataforma de desarrollo abierta compuesta por marcos (frameworks) extensibles, herramientas y plataformas de ejecución para el desarrollo, la puesta en producción y la gestión de software a través del todo el ciclo de vida del software. La Fundación Eclipse es una organización sin ánimo de lucro, que alberga los “Proyectos Eclipse” y ayuda a cultivar tanto una comunidad de código abierto y un ecosistema de productos y servicios complementarios.

Si desea saber más acerca de Eclipse y sus proyectos, vaya a la página:

http://www.eclipse.org/org/

Descargue e Instale Eclipse

Para nuestras pruebas descargaremos la versión Helios de Eclipse. Vaya a la página de descargas de Eclipse:

http://www.eclipse.org/downloads/index-helios.php

Seleccione el sistema operativo sobre el cual esta trabajando:

Seleccione la opción: Eclipse IDE for Java EE Developers, 206 MB.

Seleccione la versión de su sistema operativo. En este caso, instalaremos Eclipse Helios en Windows 7 Professional (64 bits).

Sea paciente, dependiendo de la velocidad de su conexión a Internet esta operación tardará algunos minutos.

Cree un directorio y copie allí el paquete descargado de Eclipse:

Este es un archivo empaquetado, generado con WinZip. Debe extraer todos los archivos contenidos en él dentro del directorio que usted acaba de crear.

Click en el botón derecho del mouse sobre el archivo y seleccione “Extract All”

Click en Extract

Eclipse se instalará en el subdirectorio C:\Eclipse-Helios-64\Eclipse. Una vez que haya terminado la extracción de todos los archivos, la instalación se verá de la siguiente manera:

Ejecute la aplicación eclipse dando doble click sobre este archivo.

En primer lugar, Eclipse le pedirá que defina un subdirectorio en donde va a alojar sus proyectos.

En este caso elegiremos C:\Eclipse-Helios-64\workspace:

Click en OK.

Eclipse presentará una página de bienvenida desde la cual podrá explorar las bondades de esta magnífica herramienta de desarrollo de software. Después podrá cerrar esta página para entrar en Eclipse.

Así lucirá su área de trabajo:

Actualice Eclipse

Ahora revise si hay actualizaciones para esta versión de Eclipse.

Seleccione las opciones: HelpàCheck for Updates

Eclipse buscará y traerá las últimas actualizaciones para su versión instalada:

Click en Next >

Revise y confirme las actualizaciones:

Click en Next >

Acepte la licencia:

Click en Finish para terminar la actualización.

Este proceso puede tardar algunos minutos.

Al finalizar tendrá que reiniciar Eclipse para que la actualización tome efecto:

Click en Restart Now.

Instalando el Plugin de GWT

Una vez completada la instalación y actualización de Eclipse Helios en su computador, proceda a descargar el plugin de GWT para su versión de Eclipse.

Entre a la página de descargas de GWT:

http://code.google.com/eclipse/docs/download.html

Copie el URL correspondiente a la versión de Eclipse:

http://dl.google.com/eclipse/plugin/3.6

En Eclipse seleccione HelpàInstall New Software

Copie el URL en el campo Work with.

Click en Add…

Entre un nombre para definir este plug-in:

Eclipse mostrará los paquetes disponibles para GWT:

Click en Select All para seleccionarlos todos.

Click en Next >

Espere mientras se descargan y verifican los paquetes. Eclipse mostrará los ítems a ser instalados:

Click en Next >

Acepte los términos de la licencia:

Click en Finish

Esto puede tardar algunos minutos.

Es posible que Windows lo alerte por la instalación de algún componente en especial. Permita que estos componentes se instalen, pues vienen de una fuente bien conocida.

Al finalizar, Eclipse le pedirá que se reinicie:

Click en Restart Now

Reinicie Eclipse y estará listo para escribir su primera aplicación web utilizando GWT.

Para confirmar que el plugin de GWT ha sido instalado, seleccione las siguientes opciones:

Seleccione HelpàAbout Eclipse

Click en Installation Details.

Click en el tab Plug-ins y en la columna Plug-in Name busque los nombres de Google y GWT:

Observe la versión del SDK instalado: 2.4.0

Su Primer Proyecto con GWT

Intente ahora crear un proyecto utilizando GWT.

Seleccione: FileàNewàOther

Abra la carpeta Google y seleccione el wizard (asistente) Web Application Project

Click en Next >

Esta opción ejecutará un asistente que nos llevará paso a paso para crear el framework de su primer proyecto.

Project Name (Nombre del proyecto)

Entre el nombre su proyecto. En este caso hemos dado el nombre de: ejemplo1

El wizard (asistente) nos da una alerta de que debemos configurar el SDK de Google App Engine. Ya lo revisaremos más adelante.

Package (Paquete)

Entre un nombre para crear el paquete de su primer proyecto. Recuerde que las aplicaciones Java normalmente se distribuyen en paquetes dentro de archivos .jar (Java Archive). Aquí hemos dado el nombre: com.gwt.ejemplo1.

Location (Ubicación)

El asistente crea por defecto un subdirectorio con el mismo nombre del proyecto dentro del workspace definido durante la instalación de Eclipse. En este caso: C:\Eclipse-Helios-64\workspace\ejemplo1.

Google SDKs

La opción Use Google Web Toolkit ha sido seleccionada por defecto al igual que la última versión de GWT. Deje estas mismas opciones. En caso de que haya instalado una nueva versión de GWT o si requiera utilizar versiones anteriores, seleccione la opción Use specific SDK y luego la versión requerida.

Puede también confirmar que la versión que va a utilizar es la 2.4.0. Click en Configure SDKs…:

Aquí podrá confirmar la versión con la cual va a generar su nuevo proyecto.

Click en OK.

Este proyecto va a ser muy sencillo y por lo tanto no vamos a necesitar de diálogos con aplicaciones en el servidor, por lo tanto no elegiremos la opción Use Google App Engine. Al no elegirla, la alerta que obtuvimos al comienzo desaparecerá. Además, más adelante podremos utilizar cualquier servidor web y un manejador de base de datos distinto al proporcionado por Google App Engine sin tener que sortear conflictos de librerías.

Google Apps Marketplace

No utilizaremos esta opción por ahora.

Sample Code

Seleccione esta opción. GWT nos proveerá de unas líneas de código de ejemplo que nos permitirán explicar algunos de los componentes generados por el asistente. Además, seleccionando esta opción hace que GWT cree automáticamente una estructura cliente/servidor que facilitará la labor de incluir uno por uno los componentes requeridos para que aplicación funcione correctamente.

Click en Finish.

Espere unos segundos mientras el asistente crea los archivos requeridos.

Expanda el proyecto ejemplo1 para ver los componentes generados:

Con esta lista de componentes terminamos esta sesión.

En el próximo blog Ejecutando una Aplicación GWT analizaremos estos componentes y comenzaremos a modificar el código obtenido para personalizar nuestro primer proyecto.

Defina su Proyecto y Equipo de Trabajo

2012-01-29T21:14:00.000-08:00

Defina su Proyecto, Alcance y Fecha de Culminación

Si ha seleccionado GWT como su herramienta principal para generar sus páginas web e intercambiar datos con un servidor, es conveniente que defina detalladamente el proyecto que va a emprender.

Podría leer varios libros de GWT, la documentación ofrecida por Google y revisar múltiples aplicaciones de ejemplo, pero es factible que llegado el momento en el que deba comenzar a escribir sus aplicaciones en GWT haya olvidado lo que aprendió al comienzo. Es importante que antes de escribir su primera línea de código sepa muy bien qué es lo que desea como producto final para que concentre su esfuerzo de aprendizaje en lograr su objetivo.

En primer lugar, defina su proyecto. GWT está orientado para desarrollar aplicaciones del lado del cliente. Sin embargo, GWT ofrece alternativas para que escriba cortas aplicaciones en el servidor y así mismo le ofrece los mecanismos para que su aplicación cliente mantenga un diálogo de intercambio de datos con las aplicaciones del servidor.

Defina el proyecto con un propósito específico, por ejemplo una aplicación que permita administrar un sistema complejo existente, que provea opciones para crear usuarios y perfiles, que suministre reportes o que ofrezca consultas relativas a la actividad del sistema en general.

Puede definir su propia red social, un servicio de consulta de música, videos, películas, series de televisión, libros, o para crear álbumes de fotografías, o compartir recetas de cocina, etc. Su imaginación no tendrá límite. Mucho mejor si usted ha sido contratado para realizar un proyecto por el cual recibirá un pago.

Una vez definido su proyecto, establezca su alcance inicial y una fecha tentativa para terminarlo. Si no establece una fecha final, su proyecto se convertirá en una historia sin final y nunca cumplirá el objetivo. Es cuestión de pura disciplina. Establezca un cronograma con tiempos justos para que pueda dar cumplimiento a cada actividad.

Siga una metodología. Revise sus apuntes en administración de proyectos, tome de allí lo más relevante para que lo aplique a lo largo del desarrollo.

Revise otras metodologías de desarrollo de software y administración de proyectos. Por ejemplo, Agile o Scrum.

Inicialmente en este blog no se define un proyecto en sí, es posible que lo haga mas adelante pero por ahora el propósito de este blog es proveer algunas recomendaciones para el uso de GWT.

Defina Recursos

Revise cuidadosamente los recursos con los que cuenta y los que posiblemente necesitará durante toda su implementación. Si los define desde un comienzo evitará demoras en la ejecución del proyecto mas adelante.

Cuántos computadores posee, cuáles utilizará como servidores, cuáles serán utilizados para desarrollo y cuáles para pruebas. Estos interrogantes son su punto de partida.

Defina el software adicional que va a utilizar. Las aplicaciones cliente son exigentes en cuanto a componentes visuales se refiere y requieren que sean vistosas, que tengan logos bien definidos, claros, con una combinación de colores coherente para que le den personalidad a su aplicación. De manera que necesitará otras herramientas de software para diseñar componentes gráficos como el logo, iconos para las opciones, imágenes para representar productos, etc. Si no cuenta con uno de estos productos, en muchas ocasiones es preferible que contemple la posibilidad de contratar a un diseñador gráfico. Es preferible que este tipo de arte sea realizado por alguien más con suficiente experiencia y mucha creatividad.

Si ya tiene experiencia utilizando algún servidor web (Tomcat, JBoss, GlassFish, WebSphere, Weblogic, etc.) no tendrá ningún problema en instalar los Servlets generados con GWT.

Del mismo modo, su experiencia en base de datos será fundamental para definir un modelo relacional consistente y confiable.

Defina una hora del día para estudiar, realizar una prueba con algún componente y para que lo implemente en su proyecto.

Defina un equipo de trabajo

El producto de su trabajo se verá beneficiado si su proyecto es desarrollado por un equipo de colaboradores. La distribución de responsabilidades de acuerdo con alguna especialidad es fundamental para que el proyecto avance conforme al cronograma establecido.

Si no cuenta con un equipo de trabajo y usted es un desarrollador ‘todero’ tendrá que enfrentar muchos desafíos en cada nivel de sus aplicaciones. Se verá obligado a ser mucho más organizado, documentar cada módulo y cada etapa del cronograma. Su memoria no dará a basto para recordar cada detalle de los miles de líneas de código que tendrá que escribir. Así mismo tendrá que documentar sus programas fuentes, escriba comentarios que expliquen las rutinas que esta escribiendo. Estos facilitaran el entendimiento de las rutinas aun meses después de haber sido escritos.

Defina Estándares

Es muy importante que también defina varios estándares antes de comenzar a escribir sus aplicaciones.

Por la cantidad de componentes y clases a las que se verá enfrentado, es recomendable que siga un estándar para nombrar clases, métodos y variables. De ese modo facilitará la lectura y comprensión de su propio código tiempo después de haber sido escrito.

Puede basarse en la codificación húngara (http://es.wikipedia.org/wiki/Notaci%C3%B3n_h%C3%BAngara). Por ejemplo, Defina su proyecto con un par de letras. Si su proyecto es de administración de usuarios, puede utilizar las letras au_ como prefijo para definir sus clases e interfaces.

au_loginView.java: Nombre de la clase con los componentes gráficos de su página de login.

au_newUserView: Nombre de la clase con los componentes gráficos de la página que desplegará la forma para entrar los datos de un nuevo usuario.

Los siguientes son ejemplos de algunos prefijos para la definición de variables y clases:

Prefijo	Tipo	Ejemplo
ft	FlexTable	ftLoginBox
fp	FormPanel	fpLoginForm
lbl	Label	lblUser
txt	Text	txtUser
pw	PasswordTextBox	pwPasswd
btn	Buttone	btnSav
lb	ListBox	lbCountries
b	boolen	bFlag
s	String	sLanguage
i	int	iIndex
l	long	lCode

Defina un Repositorio y un sistema de contingencia

Si terminó la versión 1.0 de su proyecto, guarde este código antes de comenzar a realizar correcciones para liberar la versión 1.1. Es importante mantener el código original de la versión que va liberando. De ese modo es posible volver un paso atrás cuando sea necesario.

Una forma sencilla de hacerlo es crear un directorio en un servidor por cada versión liberada, pero esto no le garantiza que alguien más pueda alterar el código original. Si ya ha liberado la versión 1.7 y desea revisar la versión 1.5, nadie la garantiza que la versión 1.5 sea la versión deseada.

Este problema se resuelve utilizando un producto de repositorio de código fuente y control de versiones. Tortoise puede ser una opción.

Defina Documentación

Lleve un registro de su trabajo diario. Si, ya sé que no es nada grato escribir comentarios y llevar un documento con anotaciones acerca del progreso de su desarrollo. Pero es lo más aconsejable, mucho más cuando usted trabaja solo. Los documentos escritos serán su propia memoria.

Es aconsejable que mantenga un documento de ‘consejos y trucos’ (tips and tricks). Escriba y copie allí todas aquellas rutinas, parámetros de configuración, enlaces interesantes, ejemplos, etc., que le hayan ayudado a resolver complejas situaciones en su proyecto.

Porqué seleccionar GWT?

2012-01-21T18:14:00.001-08:00

Antecedentes

En el año 2007 emprendí la tarea de desarrollar un sitio web durante mi tiempo libre. Era un reto personal y profesional, y hasta ese momento no tenía claro cuál sería el tema central del proyecto, tan sólo quería aprender un poco más acerca de cómo construir aplicaciones web utilizando la arquitectura tradicional Cliente/Servidor, con un Cliente que operara en forma interactiva y teniendo en el lado del servidor dos niveles independientes pero integrados: middleware y base de datos.

Después de casi veinte años de experiencia profesional en tecnología informática, me di cuenta que tenía las bases para emprender mi proyecto pero no eran suficientes para desarrollar un sitio web completo. Había trabajado con varios lenguajes de programación en diferentes sistemas operacionales, tenía experiencia en middleware, un conocimiento básico de servidores de aplicaciones web de diversos distribuidores y había trabajado en bases de datos con las que había batallado por largas temporadas escribiendo queries robustos en sentencias SQL, pero nunca había tenido la oportunidad de hacer una simple página web y mucho menos sabía cómo hacerla interactiva. Comencé por aprender HTML. Primero escribiendo el código en un simple editor como notepad, luego utilizando editores como NetBeans, Eclipse, Microsoft FrontPage, hasta llegar a Dreamwaver. La jornada fue larga y agotadora. En cada etapa del desarrollo tuve que aprender otras tecnologías para hacer las páginas un poco más atractivas. JavaScript fue uno de mis grandes retos para aprender a manipular los componentes de la página, enviar datos al servidor y recibir, transformar y desplegar las respuestas. Tuve que adentrarme en CSS para dar formato a ciertos componentes de la página y, en esto último, Dreamweaver fue un gran asistente porque a través de una interface gráfica podía agregar componentes y realizar cambios y la herramienta generaba el código por mí. Más adelante evalué algunas librerías de Javascript como JQuery, YUI y Dojo. Opté por Dojo por su sencillez pero encontré algunos bugs que le restaron sueño a mis noches. Llegué también a utilizar Flash para adicionarle a las páginas componentes de animación, como aquel famoso carrusel, que sirvió para darle un poco más de vida a la página. Poner todo junto a funcionar requirió de gran esfuerzo y dedicación. De otro lado, seleccioné Tomcat como el servidor de mis aplicaciones web y allí instalé varios Servlets escritos en Java, que a su vez integraban un paquete también escrito en Java que accedía a la base de datos en MySQL 5.1. Con todo esto construí una plataforma que me permitió mantener un sitio web divertido.

Para escoger el tema del sitio web pensé en compartir artículos relacionados con literatura, o experiencias de viajes, o experiencias de actividades deportivas, o trucos de programación, o video juegos. Al final recordé mi afición por los comics en mis años de adolescente y decidí crear uno propio. Así surgió www.usertoons.com, un sitio web en el cual publicaba una tira cómica semanal. Sus personajes eran los miembros de una familia tradicional, padre, madre, dos hijos adolescentes y una abuela, a los que poco a poco sus hábitos del diario vivir iban cambiando por el influjo de la tecnología. Una vez la plataforma estuvo instalada en un hosting, el reto pasó a ser otro: crear una historia semanal que debía encajarse en tres cuadros. Una sobrina de mi esposa dibujaba cada escena y mi esposa les adicionaba las burbujas con los diálogos en cada cuadro. Pare ello utilizaban productos de Adobe. Es importante mencionar que es muy importante el trabajo en equipo por el grado de especialidad que puede tener cada colaborador, el esfuerzo se distribuye y el proceso de desarrollo se agiliza un montón.

Después de casi dos años de trabajo, con gran tristeza tuve que cerrar el sitio web porque cambié de empleo, no me quedaba mucho tiempo libre para crear las historias, mantener el sitio web y rastrear los pocos hits diarios que recibía el sitio. Pese a los esfuerzos de promoción en múltiples medios, al análisis de resultados de la información obtenida con Google Analytics y de presentar la tira cómica tanto en Inglés como en Español, el sitio web no logró la popularidad esperada y por consiguiente no generó ningún beneficio económico. De todos modos dejó una gran experiencia.

Sin embargo tenía en mente continuar con el proyecto, pero de otro modo. Decidí construir otro sitio web cuyo tema aun mantengo en la reserva para proteger la idea y porque todavía esta en proceso de diseño y desarrollo.

Esta vez me puse en la búsqueda de un producto que me ayudara a simplificar mi trabajo inicial sin que tuviera que incluir tantos componentes disímiles del lado del cliente, pero que eventualmente me diera la oportunidad de hacerlo, en otras palabras, que fuera abierto para integrarse con otras tecnologías. Necesitaba seleccionar una herramienta que me permitiera elaborar las páginas de manera ágil, sin tener que recurrir a la investigación de tantas tecnologías cambiantes y de buscar la manera de integrarlas para obtener como resultado un producto estable que no generara errores durante su ejecución, especialmente cuando se utilizaran diferentes navegadores. Además, con el auge de los dispositivos móviles, la herramienta debería tener la facilidad de generar código que funcione sobre estos. No es de extrañar que el resultado de este proceso de selección haya sido Google Web Toolkit (GWT). He buscado información en Español sobre GWT pero en realidad no hay mucho en la web. De manera que mientras desarrollo mi proyecto secreto, a partir de este momento intentaré compartir mi experiencia utilizando GWT.

El servidor y la base de datos escogidos para mi segundo proyecto web continúan siendo los mismos: Tomcat y MySQL.

Criterios de Selección

Los criterios de selección de la herramienta de desarrollo de las páginas web fueron los siguientes:

· Costo

· Licencias

· Mínima curva de aprendizaje

· Simplicidad

· Estabilidad

· Soporte

Tal vez haya muchos más criterios de selección que aquí no he considerado, pero esta no ha sido una decisión corporativa, fue una decisión personal basada en mis propias motivaciones, expectativas y recursos, en especial, teniendo en cuenta la poca disponibilidad de tiempo libre.

Costo

Tener un presupuesto limitado para un proyecto de tecnología es un gran obstáculo. Software, hardware, libros, clases, conferencias, desplazamientos, litros de café, etc., son esenciales cuando se emprende un nuevo proyecto de desarrollo de software. Hay muchas herramientas gratis disponibles en Internet pero no todas ellas son confiables, especialmente porque no cuentan con un gran equipo de gurús detrás del producto para soportarlo. Por otra parte, si se compra un producto sin previa evaluación, esto puede convertirse en un gran fracaso desde el principio por la necesidad de invertir una enorme cantidad de tiempo en el aprendizaje de la herramienta y de su propio lenguaje de programación. Además, suele ocurrir que mientras se aprende la versión X del producto sale a la venta la versión Y por la que habrá que pagar por la actualización y, lo más inquietante, el código desarrollado hasta el momento habrá que ser ajustado a la nueva versión consumiendo más tiempo del esperado y retrasando la salida de su proyecto en producción.

Si usted tiene gran experiencia en Microsoft .NET o en productos Adobe puede optar por continuar trabajando en estas plataformas, son sencillas, poseen un gran número de asistentes que facilitan las tareas y hay documentación suficiente en la web para responder a sus preguntas. Si no desea adquirir un producto por el cual deba pagar por su licencia, puede acudir a las diferentes opciones gratis disponibles en internet. La lista es interminable, pero recuerde que es muy importante conseguir un producto que cuente con un gran equipo de trabajo que respalde su desarrollo y evolución. Si tiene la intención de cambiarse a una plataforma abierta, entonces este blog podrá ser de gran utilidad.

Licencias

La evolución de internet ha traído la facilidad para conseguir herramientas de desarrollo gratuitas. Simplemente se descarga del sitio web, se procede a instalar, se lee y acepta la licencia de uso, se ajustan algunos parámetros de instalación y listo, puede dar rienda suelta a su creatividad. Algunas veces es indispensable registrarse primero antes de proceder a descargar el producto. Así se consigue GWT, la licencia es gratuita y no tiene límites en el uso del producto.

Mínima curva de aprendizaje

Si ya tiene cierta experiencia en un lenguaje de programación, en este caso Java, no tendrá que preocuparse por aprender un nuevo lenguaje o script para desarrollar su proyecto. Al menos al comienzo, antes de adentrarse en un proceso de integración con otras tecnologías. Básicamente tendrá que aprender a conocer la disponibilidad de las clases, interfaces y métodos de GWT para utilizarlas a su antojo y darle vida a su idea. La mejor forma de utilizar GWT es a través de Eclipse, el ambiente integrado de desarrollo o IDE por su sigla en inglés (Integrated Development Environment), esta es la suite de programación por excelencia para quienes trabajamos con herramientas de desarrollo gratuitas. El plugin de GWT para Eclipse está disponible en Google y su instalación es un proceso sencillo. Eclipse está disponible para Windows, Linux y MAC, lo mismo sucede con el plugin de GWT. De manera que el ambiente de desarrollo se puede instalar en cualquiera de estas plataformas. Sin embargo, si usted prefiere trabajar con otro IDE no hay problema, cada distribuidor de IDE ha generado su propio plugin para albergar GWT.

El código de GWT está escrito en Java y todo lo que usted hará lo codificará en este lenguaje de programación. Una vez escrito el código, salve la copia, compile la aplicación, ejecútela y pruebe la página desde el navegador de su predilección. Por ser GWT un producto de Google, su aplicación lucirá mucho mejor en Google Chrome. Sin embargo, el gran mérito de GWT es que el producto resultante del proceso de compilación es un conjunto de funciones de JavaScript las cuales se generan de manera simultánea en varias versiones para cada uno de los distintos navegadores de Internet.

GWT Designer provee la facilidad de mostrar su diseño de la página en un ambiente GUI. No es de la calidad de Dreamweaver, pero le brinda una idea de cómo distribuir los widgets dentro de la página. Desde aquí también podrá crear documentos CSS, adicionar, modificar y visualizar en forma gráfica los efectos de cada propiedad.

Google provee un gran volumen de documentación de GWT. En Google Video hay muchas conferencias de GWT en sus distintas versiones. Desafortunadamente la gran mayoría de estos videos están en inglés, pero con un poco de esfuerzo podrá entender lo que los gurús del producto desean compartir con su audiencia. Una desventaja que he visto, es que la documentación no está muy ligada a la versión que actualmente se descarga de la página de GWT. Por eso algunas veces la documentación que se encuentra en una determinada consulta puede pertenecer a clases que ya están obsoletas (deprecated). Profundizando un poco más en la consulta, puede llegar a encontrar la documentación sobre la versión más actualizada o al menos de la versión con la que está desarrollando su proyecto.

En general, Java es todo lo que usted necesita saber para comenzar a desarrollar su proyecto. Desde luego tendrá que tener una idea general de cómo funciona una aplicación web, de la estructura de una página HTML, DOM, XML y CSS. A medida que vaya avanzando en el desarrollo de su proyecto, encontrará tal vez la necesidad de incluir otros productos o tecnologías.

Simplicidad

Si ya tiene experiencia desarrollando aplicaciones con Java en Eclipse, no le será difícil comprender como funciona GWT. Escribir el código en Java y compilarlo para obtener código Javascript que será ejecutado desde su browser es una tarea simple para probar su código. Si selecciona en Eclipse la opción Build Automatically, entonces no tendrá que compilar su aplicación cada vez que realice un cambio. Además dejará de lado la preocupación de tener que escribir un código diferente para cada navegador de Internet.

Estabilidad

Hasta el momento no he visto mayores contratiempos ejecutando el código generado con GWT. Actualmente la versión 2.4 ha corregido la gran mayoría de bugs reportados en versiones anteriores y las librerías de Widgets y de AJAX han madurado notablemente, y la comunicación entre Cliente y Servidor es confiable. Quizás encuentre algunos tropiezos durante la integración de su aplicación GWT con otros frameworks como Spring o Hibernate, o con productos de Adobe, o con otras librerías Javascript, pero estoy casi seguro que todas ellas tienen una solución, ya que hasta ahora la coexistencia ha sido satisfactoria. Desde Luego debo resaltar que GWT está orientado para proyectos del lado del cliente y ha ido evolucionando para que se integre a un servidor instalado en la nube de Google (se conoce en inglés como Google Cloud) en donde reside Google Application Engine (motor de aplicaciones Google).

Soporte

Google provee una comunidad a donde recurrir en caso de dudas, aclaraciones, recomendaciones o si ha avanzado en su investigación también puede colaborar con el mejoramiento del producto. Esta comunidad se denomina Google Web Toolkit developer community y aunque no he visto información en Español, es posible que atiendan sus requerimientos. De otro lado, el propósito de este blog es compartir información acerca del progreso que tengamos con el uso de esta gran herramienta.

Enlaces

A continuación, algunos enlaces (links) de interés:

Desarrollando con GWT

Aplicando Estilos - Parte I

Composite Widgets

Panels y Widgets en GWT

Instalando una Aplicación GWT en Apache Tomcat

Compilando una aplicación GWT

Depurando una aplicación GWT

Estructura de un Proyecto GWT

Ejecutando una aplicación GWT

Instalando Eclipse y GWT

Su Primer Proyecto con GWT

Defina su Proyecto y Equipo de Trabajo

Defina su Proyecto, Alcance y Fecha de Culminación

Defina Recursos

Defina un equipo de trabajo

Defina Estándares

Defina un Repositorio y un sistema de contingencia

Defina Documentación

Porqué seleccionar GWT?

Antecedentes

Criterios de Selección

Costo

Licencias

Mínima curva de aprendizaje

Simplicidad

Estabilidad

Soporte

Enlaces

Google Web Toolkit página principal

Documentación:

Communidad:

Grupo: