Composite Widgets

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:

<script type="text/javascript" language="javascript" src="login/login.nocache.js"></script>

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:

<table align="center"> <tr> <td colspan="2" style="font-weight:bold;">Please enter your name:</td> </tr> <tr> <td id="nameFieldContainer"></td> <td id="sendButtonContainer"></td> </tr> <tr> <td colspan="2" style="color:red;" id="errorLabelContainer"></td> </tr> </table>

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

<!doctype html> <!-- The DOCTYPE declaration above will set the     --> <!-- browser's rendering engine into                --> <!-- "Standards Mode". Replacing this declaration   --> <!-- with a "Quirks Mode" doctype is not supported. --> <html>   <head>     <meta http-equiv="content-type" content="text/html; charset=UTF-8">     <!--                                                               -->     <!-- Consider inlining CSS to reduce the number of requested files -->     <!--                                                               -->     <link type="text/css" rel="stylesheet" href="Login.css">     <!--                                           -->     <!-- Any title is fine                         -->     <!--                                           -->     <title>Login Composite</title>         <!--                                           -->     <!-- This script loads your compiled module.   -->     <!-- If you add any GWT meta tags, they must   -->     <!-- be added before this line.                -->     <!--                                           -->     <script type="text/javascript" language="javascript" src="login/login.nocache.js"></script>   </head>   <!--                                           -->   <!-- The body can have arbitrary html, or      -->   <!-- you can leave the body empty if you want  -->   <!-- to create a completely dynamic UI.        -->   <!--                                           -->   <body>     <!-- OPTIONAL: include this if you want history support -->     <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>         <!-- RECOMMENDED if your web app will not function without JavaScript enabled -->     <noscript>       <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">         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.