View
298
Download
1
Category
Preview:
Citation preview
5/8/2018 Interfaz de usuario sobre GWT - Utilizando UiBinder Devfest Mx2011 - slidepdf.com
http://slidepdf.com/reader/full/interfaz-de-usuario-sobre-gwt-utilizando-uibinder-devfest-mx2011 1/7
Nicolás Bortolotti
versión:1.1
Interfaz de usuario sobre GWT -Utilizando UBinder
En esta actividad vamos a trabajar en el desarrollo de la UI en GWT mediante UiBinder, el
objetivo es incrementar la productividad del desarrollo de la UI. UiBinder es un framework de
GWT que permite a los desarrolladores crear UI de una forma declarativa en XML.
UiBinder tiene algunas ventajas con respecto al escenario de desarrollo de UI programático, les
dejo algunas:
● Separación del código de UI del código Java de implementación.● Verificación de la sintaxis en tiempo de compilación.
● Verificación del CSS (estilos) en tiempo de compilación.
Introducción
El objetivo de esta actividad es tomar contacto con el framework UiBinder y construir UI en
GWT de una forma mucho más productiva. La UI que vamos a diseñar tiene algo más de
complejidad que la implementada en el articulo sobre UI programático.
Veamos en primer lugar el diseño en un prototipo de dibujo, como muestra la Fig. 1.
Fig. 1 - Diseño general de la UI a desarrollar.
Parte del programa "Preguntale al experto de cloud"
CC3
5/8/2018 Interfaz de usuario sobre GWT - Utilizando UiBinder Devfest Mx2011 - slidepdf.com
http://slidepdf.com/reader/full/interfaz-de-usuario-sobre-gwt-utilizando-uibinder-devfest-mx2011 2/7
Nicolás Bortolotti
versión:1.1
La teoría de los bloques de construcción sobre la UI siguen el mismo concepto que el
desarrollado en el articulo UI programático, solo que en este caso la implementación es diversalógicamente.
Vamos a trabajar con la receta que utilizamos siempre que tengamos que diseñar una UI en el
marco de GWT.
Ya conocemos el diseño porque es lo que propongo en la actividad veamos:
● 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:
● 2 Textbox (Main)
● Button (Main)
● HTML (Header)
● HTML en lista simulada (West)
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
● HTMLPanel
● VerticalPanel
● DockLayoutPanel
Añadir la aplicación de UI en la página principal
Para esta actividad seguiremos con la típica clase “Entrypoint” y desde ahí añadiremos las UI
haciendo uso de UiBinder.
package ar.com.comunidadxcloud.nbortolotti.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootLayoutPanel;
public class presentacionUI implements EntryPoint {
Parte del programa "Preguntale al experto de cloud"
CC3
5/8/2018 Interfaz de usuario sobre GWT - Utilizando UiBinder Devfest Mx2011 - slidepdf.com
http://slidepdf.com/reader/full/interfaz-de-usuario-sobre-gwt-utilizando-uibinder-devfest-mx2011 3/7
Nicolás Bortolotti
versión:1.1
@Override
public void onModuleLoad()
{principal p = new principal("Aceptar");
RootLayoutPanel.get().add(p);
}
}
Code 1 - Clase EntryPoint
La clase Entrypoint en Code 1 se muestra segmentada en 3 partes:
● Parte 1: paquete donde se desempeña el código fuente
● Parte 2: importaciones de librería necesarias para el desempeño de la clase.
● Parte 3: clase y evento de carga.
Como muestra el Code 1, en este caso utilizaremos la clase “RootLayoutPanel”. Solo se me
solicita que genere una instancia del widget uibinder, esto es el caso de “principal”, en Code 1
remarcado en amarillo y luego agregue este mismo widget a la raíz, remarcado en azul.
Implementar los widgets y paneles
Para implementar los widgets y paneles en primer lugar y para esta simple tarea vamos
agenerar solo una UI UiBinder. Le colocaremos de nombre principal. Se generarán dos
archivos, uno con la parte de UI específica en XML “principal.ui.xml” y otra con el código Java
de interacción “principal.java”.
En primer lugar vamos a analizar el código fuente de la UI, para esta actividad he segmentado
su organización para un mejor estudio.
● Parte 1: propone la declaración de la UIBinder y además se encuentran las
importaciones necesarias para trabajar en la UI.
● Parte 2: contiene los estilos de la UI.
● Parte 3: contienelos paneles y widgets necesarios para la organización de la UI.
En esta parte les comento que tenemos varios elementos a detallar:
● DockLayoutPanel: este panel contiene zonas de trabajo y se hace muy atractivo para un
UI que propone zonas de actividades segmentadas, ejemplo de esta actividad y según
la Fig. 1 necesitamos un zona superior, una zona central y una zona izquierda.● HTMLPanel: este panel lo utilizamos dentro de las zonas, para incorporar contenido
HTML tradicional.
● VerticalPanel: este panel lo utilizamos para organizar los widgets de la zona central.
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
Parte del programa "Preguntale al experto de cloud"
CC3
5/8/2018 Interfaz de usuario sobre GWT - Utilizando UiBinder Devfest Mx2011 - slidepdf.com
http://slidepdf.com/reader/full/interfaz-de-usuario-sobre-gwt-utilizando-uibinder-devfest-mx2011 4/7
Nicolás Bortolotti
versión:1.1
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui"
xmlns:app="urn:import:ar.com.comunidadxcloud.nbortolotti.client">
<ui:style>
.important
{
font-weight: bold;
}
</ui:style>
<g:DockLayoutPanel unit='EM'>
<g:north size="15">
<g:HTMLPanel><h1>Esto es UI por Uibinder</h1>
</g:HTMLPanel>
</g:north>
<g:west size="15">
<g:HTMLPanel>
<ul>
<li>Producto 1</li>
<li>Producto 2</li>
<li>Producto 3</li>
</ul></g:HTMLPanel>
</g:west>
<g:center>
<g:HTMLPanel>
<g:VerticalPanel spacing="5">
<g:TextBox ui:field='usuario'></g:TextBox>
<g:TextBox ui:field='descripcion'></g:TextBox>
<g:Button ui:field='button'></g:Button>
</g:VerticalPanel>
</g:HTMLPanel>
</g:center>
</g:DockLayoutPanel>
</ui:UiBinder>
Code 2 - Análisis del código de UI
Parte del programa "Preguntale al experto de cloud"
CC3
5/8/2018 Interfaz de usuario sobre GWT - Utilizando UiBinder Devfest Mx2011 - slidepdf.com
http://slidepdf.com/reader/full/interfaz-de-usuario-sobre-gwt-utilizando-uibinder-devfest-mx2011 5/7
Nicolás Bortolotti
versión:1.1
Una vez diseñada la UI, pasemos a analizar el código de interacción. También he segmentado
esta clase para un mejor análisis.● Parte 1: paqueteen donde se realiza la operación.
● Parte 2: importaciones necesarias para el desarrollo de las actividades de la clase.
● Parte 3:clase principal, que extiende de “Composite”, resaltado en amarillo podemos
encontrar el mecanismo de uiBinder con la interface, resaltado en azul, podemos
encontrar los widgets con sus correspondientes etiquetas y finalmente resaltado en
anaranjado podemos ver la inicialización de la UI.
package ar.com.comunidadxcloud.nbortolotti.client;
import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.uibinder.client.UiHandler;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.Widget;
public class principal extends Composite{
private static principalUiBinder uiBinder = GWT.create(principalUiBinder.class);
interface principalUiBinder extends UiBinder<Widget, principal>
{
}
@UiField
Button button;
@UiField
TextBox usuario;
@UiField
TextBox descripcion;
Parte del programa "Preguntale al experto de cloud"
CC3
5/8/2018 Interfaz de usuario sobre GWT - Utilizando UiBinder Devfest Mx2011 - slidepdf.com
http://slidepdf.com/reader/full/interfaz-de-usuario-sobre-gwt-utilizando-uibinder-devfest-mx2011 6/7
Nicolás Bortolotti
versión:1.1
public principal(String firstName)
{
initWidget(uiBinder.createAndBindUi(this));button.setText(firstName);
}
@UiHandler("button")
void onClick(ClickEvent e)
{
Window.alert("Hello!");
}
public void setText(String text)
{
button.setText(text);
}
public String getText()
{
return button.getText();
}
}
Code 3 - Código de interacción de la UI.
Prueba de la Aplicación
Finalmente vamos a realizar la ejecución de la actividad que terminamos de implementar.
Parte del programa "Preguntale al experto de cloud"
CC3
5/8/2018 Interfaz de usuario sobre GWT - Utilizando UiBinder Devfest Mx2011 - slidepdf.com
http://slidepdf.com/reader/full/interfaz-de-usuario-sobre-gwt-utilizando-uibinder-devfest-mx2011 7/7
Nicolás Bortolotti
versión:1.1
Fig. 2 - Implementación finalizada 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
Recommended