Tutor: Nicols Bortolotti Estado: Preliminar - Tipo: Focus Topic versin:1.

Programa
Pregntale al experto de Cloud Taller Interfaz de usuario sobre GWT - Utilizando GWT Designer, simplificando el diseo Generar el EntryPoint de la aplicacin Generar la pgina principal de la solucin utilizando (UiBinder o Java UI) Disear una regin de UI para alguna funcionalidad especfica

Pregntale al experto de Cloud

Tecnologa utilizada - Entorno de desarrollo Eclipse Helios: http://www.eclipse.org/ - GAE y GWT: http://code.google.com/webtoolkit/ http://code.google.com/appengine/ -GWT Designer http://code.google.com/intl/es-ES/webtoolkit/tools/download-gwtdesigner.html

Taller
Interfaz de usuario sobre GWT - Utilizando GWT Designer, simplificando el diseo
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 aplicacin Generar la pgina principal de la solucin utilizando (UiBinder o Java UI) Disear una regin de UI para alguna funcionalidad especfica Incrustar esta nueva regin en la pgina principal

Tutor: Nicols Bortolotti Estado: Preliminar - Tipo: Focus Topic versin: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 aplicacin

Tutor: Nicols Bortolotti Estado: Preliminar - Tipo: Focus Topic versin:1.0

Fig. 2 Creacin 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 Cdigo generado luego de la creacin del entrypoint

Generar la pgina principal de la solucin 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 aplicacin deseada, o bien se puede optar por hacer una llamada a un UI que organice toda la aplicacin, en este punto se podra utilizar o UiBinder o Java UI.

Tutor: Nicols Bortolotti Estado: Preliminar - Tipo: Focus Topic versin:1.0 Vamos a utilizar UiBinder para hacer de organizador de todo el UI.

Fig 2 - A muestra la opcin para generar una UI por medio de Java UI

Tutor: Nicols Bortolotti Estado: Preliminar - Tipo: Focus Topic versin:1.0

Fig 2 - B muestra la opcin para generar una UI por medio de UiBinder Como muestra la Fig 2 se puede tomar la opcin 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: Nicols Bortolotti Estado: Preliminar - Tipo: Focus Topic versin:1.0

Fig. 3 Generacin 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 - Cdigo generado en el marco XML package ar.com.comunidadxcloud.nbortolotti.client; import com.google.gwt.core.client.GWT;

Tutor: Nicols Bortolotti Estado: Preliminar - Tipo: Focus Topic versin: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- Cdigo adjunto al marco XML

Tutor: Nicols Bortolotti Estado: Preliminar - Tipo: Focus Topic versin:1.0 Fig. 4 - Entorno de Diseo de la UI mediante GWT designer

Disear una regin de UI para alguna funcionalidad especfica Para esta sub actividad disearemos 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: Nicols Bortolotti Estado: Preliminar - Tipo: Focus Topic versin: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: Nicols Bortolotti Estado: Preliminar - Tipo: Focus Topic versin:1.0

Fig. 6 - Diseador GWT con el manejo de noticias Vamos a agregar un widget para el listado propuesto.

Tutor: Nicols Bortolotti Estado: Preliminar - Tipo: Focus Topic versin:1.0

Fig. 7 Diseo de la interfaz grfica por medio del editor de GWT Finalmenta vamos a incrustar esta UI de noticias en la UI General. Les dejo la implementacin en el siguiente vdeo Ver Implementacin Espero les sea de utilidad