Nicolás Bortolotti versión:1.1
Interfaz de usuario sobre GWT Programando la UI En esta actividad vamos a trabajar en el desarrollo de la UI1 en GWT2 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 Para el desarrollo de nuestra actividad diseñaremos una UI que respecte el diseño de la Fig. 1.
1User
Interface Web Toolkit Parte del programa "Preguntale al experto de cloud" CC3 2Google
Nicolás Bortolotti versión:1.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 Parte del programa "Preguntale al experto de cloud" CC3
Nicolás Bortolotti versión:1.1 ●
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. ... ...
Demostración UI Programático
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(); Parte del programa "Preguntale al experto de cloud" CC3
Nicolás Bortolotti versión:1.1 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); Parte del programa "Preguntale al experto de cloud" CC3
Nicolás Bortolotti versión:1.1 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.
Parte del programa "Preguntale al experto de cloud" CC3
Nicolás Bortolotti versión:1.1
Fig 2 - Visualización final de la actividad - Pueden consultar el video de implementación. - Puenden consultar la presentación resumen.
Parte del programa "Preguntale al experto de cloud" CC3
