Interfaz de Usuario Sobre GWT - Programando La UI
-
Upload
nicolas-bortolotti -
Category
Documents
-
view
230 -
download
0
description
Transcript of 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
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 2/6
Tutor: Nicolás Bortolotti
Estado: Preliminar - Tipo: Focus Topic
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.
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 3/6
Tutor: Nicolás Bortolotti
Estado: Preliminar - Tipo: Focus Topic
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;
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 4/6
Tutor: Nicolás Bortolotti
Estado: Preliminar - Tipo: Focus Topic
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.
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.
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 5/6
Tutor: Nicolás Bortolotti
Estado: Preliminar - Tipo: Focus Topic
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.
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.
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 6/6
Tutor: Nicolás Bortolotti
Estado: Preliminar - Tipo: Focus Topic
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…