Tutor: Nicolás BortolottiEstado: Preliminar - Tipo: Focus Topic

versión:1.0

ProgramaPregúntale al experto de Cloud

TallerInterfaz de usuario sobre GWT - Utilizando GWT Designer, simplificando el diseño

Generar el EntryPoint de la aplicaciónGenerar la página principal de la solución utilizando (UiBinder o Java UI)Diseñar una región de UI para alguna funcionalidad específica

Pregúntale al experto de CloudTecnología utilizada - Entorno de desarrollo Eclipse Helios:http://www.eclipse.org/ - GAE y GWT:http://code.google.com/webtoolkit/http://code.google.com/appengine/ -GWT Designerhttp://code.google.com/intl/es-ES/webtoolkit/tools/download-gwtdesigner.html

Taller

Interfaz de usuario sobre GWT - Utilizando GWT Designer, simplificando el diseño En esta actividad nos vamos a introducir al mundo de GWT Designer para operar de forma avanzada la UI en GWT.Como requerimiento de esta actividad tendremos que instalar el GWT Designer como primera medida, luego comenzaremos a visualizar sus partes interesantes.Para trabajar en esta actividad utilizaremos los siguientes pasos:

● Generar el EntryPoint de la aplicación● Generar la página principal de la solución utilizando (UiBinder o Java UI)● Diseñar una región de UI para alguna funcionalidad específica● Incrustar esta nueva región en la página principal

Tutor: Nicolás BortolottiEstado: Preliminar - Tipo: Focus Topic

versión:1.0

Fig. 1 Menu de opciones que propone GWT La Fig. 1 muestra un proyecto GWT tradicional donde se han eliminado todos sus componentes, en este punto lo que realizaremos en generar el entrypoint utilizando Java UI.

Generar el EntryPoint de la aplicación

Tutor: Nicolás BortolottiEstado: Preliminar - Tipo: Focus Topic

versión:1.0

Fig. 2 Creación del EntryPoint

package ar.com.comunidadxcloud.nbortolotti.client; import com.google.gwt.core.client.EntryPoint; public class Principal implements EntryPoint {

public void onModuleLoad() {RootPanel rootPanel = RootPanel.get();

} }

Code 1 Código generado luego de la creación del entrypoint

Generar la página principal de la solución utilizando (UiBinder o Java UI)El siguiente paso puede tomar varios caminos, se puede generar el entrypoint como la UI que organice los widgets de la aplicación deseada, o bien se puede optar por hacer una llamada a un UI que organice toda la aplicación, en este punto se podría utilizar o UiBinder o Java UI.

Tutor: Nicolás BortolottiEstado: Preliminar - Tipo: Focus Topic

versión:1.0 Vamos a utilizar UiBinder para hacer de organizador de todo el UI.

Fig 2 - A muestra la opción para generar una UI por medio de Java UI

Tutor: Nicolás BortolottiEstado: Preliminar - Tipo: Focus Topic

versión:1.0

Fig 2 - B muestra la opción para generar una UI por medio de UiBinder

Como muestra la Fig 2 se puede tomar la opción de seleccionar cualquiera de las opciones para seguir adelante en el desarrollo de la UI, solo tenemos que tener en cuenta que para nuestro objetivo tendrá que ser un “Composite”.

Tutor: Nicolás BortolottiEstado: Preliminar - Tipo: Focus Topic

versión:1.0

Fig. 3 Generación de una UI mediante UiBinder con el nombre de “General”.

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"><ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder' xmlns:g='urn:import:com.google.gwt.user.client.ui'>

<ui:style>.panel {

background-color: ivory;}

</ui:style>

<g:FlowPanel styleName="{style.panel}"/></ui:UiBinder>

Code 2 - Código generado en el marco XML

package ar.com.comunidadxcloud.nbortolotti.client; import com.google.gwt.core.client.GWT;

Tutor: Nicolás BortolottiEstado: Preliminar - Tipo: Focus Topic

versión:1.0

import com.google.gwt.uibinder.client.UiBinder;import com.google.gwt.user.client.ui.Composite;import com.google.gwt.user.client.ui.Widget; public class General extends Composite {

private static final Binder binder = GWT.create(Binder.class);

interface Binder extends UiBinder<Widget, General> {}

public General() {

initWidget(binder.createAndBindUi(this));}

}

Code 3- Código adjunto al marco XML

Tutor: Nicolás BortolottiEstado: Preliminar - Tipo: Focus Topic

versión:1.0

Fig. 4 - Entorno de Diseño de la UI mediante GWT designer

Diseñar una región de UI para alguna funcionalidad específicaPara esta sub actividad diseñaremos una nueva UI mediante UiBinder que pueda contener un listado de noticias como ejemplo.

Fig. 5 - Interfaz grafica que maneja solo noticias.

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"><ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder' xmlns:g='urn:import:com.google.gwt.user.client.ui'>

<ui:style>.panel {

background-color: ivory;}

</ui:style>

Tutor: Nicolás BortolottiEstado: Preliminar - Tipo: Focus Topic

versión:1.0

<g:FlowPanel styleName="{style.panel}"/>

</ui:UiBinder>

Code 4

package ar.com.comunidadxcloud.nbortolotti.client; import com.google.gwt.core.client.GWT;import com.google.gwt.uibinder.client.UiBinder;import com.google.gwt.user.client.ui.Composite;import com.google.gwt.user.client.ui.Widget; public class Noticias extends Composite {

private static final Binder binder = GWT.create(Binder.class);

interface Binder extends UiBinder<Widget, Noticias> {}

public Noticias() {

initWidget(binder.createAndBindUi(this));}

}

Code 5

Tutor: Nicolás BortolottiEstado: Preliminar - Tipo: Focus Topic

versión:1.0

Fig. 6 - Diseñador GWT con el manejo de noticias

Vamos a agregar un widget para el listado propuesto.

Tutor: Nicolás BortolottiEstado: Preliminar - Tipo: Focus Topic

versión:1.0

Fig. 7 Diseño de la interfaz gráfica por medio del editor de GWT Finalmenta vamos a incrustar esta UI de noticias en la UI General. Les dejo la implementación en el siguiente vídeo

Ver Implementación

Espero les sea de utilidad…