Tutor: Nicolás Bortolotti Estado: Preliminar - Tipo: Focus Topic versión:1.0 Programa Pregúntale al experto de Cloud Taller Interfaz de usuario sobre GWT - Utilizando GWT Designer , simplificando el diseño 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 Pregúntale al experto de Cloud Tecnologí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 Designer http :// 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
11
Embed
Interfaz de usuario sobre GWT - Utilizando GWT Designer, simplificando el diseño
Guía de trabajo utilizando los conceptos de creación de UI sobre la tecnología GWT Designer en Eclipse.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
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
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.
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.
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”.
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);
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'>
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