Interfaz de usuario sobre GWT - Programando la UI

En esta actividad vamos a trabajar en el desarrollo de la UI[1] en GWT[2] de una manera programática, esto quiere decir que optaremos por una de las opciones que nos propone la tecnología GWT para diseñar nuestra presentación de la solución.

Introducción

Siempre que diseñemos la UI en GWT tendremos que pensar en dos conceptos fundamentales para la organización de la presentación:

● Widgets

● Paneles

Los widgets definen las entradas y salidas de una aplicación GWT, como ejemplo de este concepto se encuentran:

● Buttons (botones)

● Textbox (cajas de texto)

● Tree (arboles)

● RichTextArea (editores de texto)

Los paneles contienen los widgets y otros paneles y se encargan de la organización en la presentación, como ejemplo de este concepto se encuentran:

● DockPanels

● HorizontalPanel

● TabPanel

● RootPanel

Si quiere ampliar los conceptos puede consultar la siguiente documentación oficial:

http ://code .google .com /intl /es /webtoolkit /doc /1.6/DevGuideUserInterface .html

Para el desarrollo de nuestra actividad diseñaremos una UI que respecte el diseño de la Fig. 1.

Segmento A

Segmento B

Fig. 1 - Diseño de Interface

En la Fig. 1, en el segmento “A”, se puede observar un rootPanel que es quien contiene toda la aplicación GWT y un verticalPanel para una organización vertical de los widgets, luego en el segmento “B” se visualiza un Textbox, un Button y un RichTextArea representados en el verticalPanel.

En este caso particular ya conocemos el diseño porque es lo que propongo en la actividad pero les dejo los simples 4 pasos para trabajar el UI en GWT de forma programática.

● Seleccionar los widgets a incluir en la UI.

● Seleccionar los paneles y su organización.

● Añadir la aplicación diseñada a la página principal.

● Implementar los widgets y paneles.

Seleccionando los widgets a incluir en la UI

En esta actividad estaríamos seleccionando los widgets a utilizar, según nuestra actividad:

● Textbox

● Button

● RichTextArea

Seleccionando los paneles y la organización de widgets en los mismos.

En esta actividad estaríamos analizando los paneles a utilizar y la organización de los mismos junto con los widgets, según nuestra actividad:

● RootPanel

● VerticalPanel

Añadir la aplicación de UI en la página principal

En esta actividad vamos a trabajar dentro de la anatomía de una aplicación GWT en el segmento de “war” para editar la página principal de la aplicación.

Code 1 - Página principal html de la aplicación de ejemplo

Implementar los widgets y paneles

Esta actividad tiene varias tareas para realizarla de una forma controlada.

Realizar la instancia de cada widget y panel

En esta tarea debemos instanciar cada widget y panel, esta programación la realizaremos en el entrypoint de la aplicación como muestra el Code 2.

package ar.com.comunidadxcloud.nbortolotti.client;

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

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

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

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

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

public class Siscti_Cloud_Demotracion implements EntryPoint {

private VerticalPanel mainPanel = new VerticalPanel();

private TextBox nombreRegistro = new TextBox();

private Button aceptarRegistro = new Button();

private RichTextArea descripcionRegistro = new RichTextArea();

public void onModuleLoad()

{

}

Code 2 - Instanciando cada uno de los widgets y panels.

El Code 2 muestra el código fuente de implementación de la instancianción de los widgets y panels segmentando el mismo en partes:

● Parte 1: declaración del paquete donde se está realizando la actividad. (cliente)

● Parte 2: importaciones necesarias para la tarea, esto principalmente utiliza EntryPoint ya que la clase es de ese tipo y lo correspondiente a los widgets y panel.

● Parte 3: el segmento de código sobre el EntryPoint, aún no hemos programado nada en el evento “onModuleLoad”.

Organizar los widgets en los paneles correspodientes

En esta tarea nos centramos en el evento “onModuleLoad”, para organizar los widgets en los paneles. Para el ejemplo de esta actividad solo tenemos un panel vertical.

public void onModuleLoad()

{

//Ensamblando los widgets al panel vertical

mainPanel.add(nombreRegistro);

mainPanel.add(aceptarRegistro);

mainPanel.add(descripcionRegistro);

}

Code 3 - Ensamblando los widgets al panel vertical.

Asociar el RootPanel al panel contenedor principal

En esta actividad se asocia el panel raíz con el panel contenedor principal, para este caso el VerticalPanel que declaramos y ensamblamos en la tarea anterior.

public void onModuleLoad()

{

//Ensamblando los widgets al panel vertical

mainPanel.add(nombreRegistro);

mainPanel.add(aceptarRegistro);

mainPanel.add(descripcionRegistro);

RootPanel.get("interfaceDemo").add(mainPanel);

}

Code 4 - Asociación del RootPanel al panel contenedor principal.

Como muestra el Code 4, se asocia el “VerticalPanel” de nombre “mainPanel” al “RootPanel” solo debemos tener en cuenta que el nombre “interfaceDemo” llega de la declaración utilizada en el html de la página principal.

Trabajar con el foco de los widgets

Esta tarea es opcional pero interesante de realizarla, en este caso le daremos el foco al textbox.

public void onModuleLoad()

{

//Ensamblando los widgets al panel vertical

mainPanel.add(nombreRegistro);

mainPanel.add(aceptarRegistro);

mainPanel.add(descripcionRegistro);

RootPanel.get("interfaceDemo").add(mainPanel);

nombreRegistro.setFocus(true);

}

Code 5 - Trabajo con el foco de los widgets

Como muestra el Code 5, se utiliza el método “setFocus” del widget que seleccionemos para focalizar.

Prueba de la Aplicación

Finalmente hemos terminado de configurar la UI, procederemos a visualizar los resultados.

Fig 2 - Visualización final de la actividad

Les dejo la implementación en el siguiente vídeo.

Espero les sea de utilidad…

[1]User Interface

[2]Google Web Toolkit

Buscar este blog

Nicolas Bortolotti