Interfaz de Usuario Sobre GWT - Programando La UI

5/8/2018 Interfaz de Usuario Sobre GWT - Programando La UI - slidepdf.com

http://slidepdf.com/reader/full/interfaz-de-usuario-sobre-gwt-programando-la-ui 1/6

Tutor: Nicolás Bortolotti

Estado: Preliminar - Tipo: Focus Topic

versión:1.0

ProgramaPregúntale al experto de Cloud

Interfaz de usuario sobre GWT - Programando la UI IntroducciónSeleccionando los widgets a incluir en la UI Seleccionando los paneles y la organización de widgets en los mismos .Añadir la aplicación de UI en la página principal Implementar los widgets y paneles

Realizar la instancia de cada widget y panel Organizar los widgets en los paneles correspodientesAsociar el RootPanel al panel contenedor principal

Trabajar con el foco de los widgetsPrueba de la Aplicación

Pregúntale al experto de Cloud

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)

1User Interface2Google Web Toolkit





versión:1.0

Los paneles contienen los widgets y otros paneles y se encargan de la organización en lapresentació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.

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.





versión:1.0Seleccionando 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.

<html>

<head>

...

</head>

<body>

...<h1>Demostración UI Programático</h1>

<div id="interfaceDemo"></div>

</body>

</html>

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;





versión:1.0

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 enel 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.


{

//Ensamblando los widgets al panel vertical

mainPanel.add(nombreRegistro);

mainPanel.add(aceptarRegistro);

mainPanel.add(descripcionRegistro);

}

Code 3 - Ensamblando los widgets al panel vertical.





versión:1.0Asociar el RootPanel al panel contenedor principal

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


{





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.


{





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.





versión:1.0Prueba 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.

Ver Implementación

Espero les sea de utilidad…

http://www.youtube.com/watch?v=BPl_kc7lVI4



Documents

Interfaz de Usuario Sobre GWT - Programando La UI