Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
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
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
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.
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 - 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.
<?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.
<?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
Fig. 6 - Diseador GWT con el manejo de noticias Vamos a agregar un widget para el listado propuesto.
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