Introduccin a GWT

1. Instalacin de GWT.
1.1. Instalacin y Creacin de Proyectos en Netbeans.
Para poder desarrollar aplicaciones con GWT sigue estos pasos: 1. Obtn la ltima versin del complemento (plugin en ingls) para desarrollar dentro de Netbeans. a. Descrgalo de http://java.net/projects/gwt4nb. Si recibes una alerta de que el certificado no corresponde al sitio, observa que este sea para el sitio www.java.net y acepta continuar. b. En el costado izquierdo de la pgina se encuentra el enlace downloads, que te permite acceder a las descargas. Selecciona la versin ms nueva. El nombre del archivo es algo como org-netbeansmodules-gwt4nb-2.10.0.nbm. 2. Instala el archivo nbm en Netbeans. a. En la barra de men selecciona el men Herramientas (Tools en ingls). b. Selecciona la opcin Complementos (Plugins en ingls). c. Se abre un cuadro de dilogo. Selecciona la pestaa Descargado y haz clic en el botn Agregar plugins.... d. Selecciona el archivo que descargaste en el punto anterior y haz clic en el botn Instalar. e. Abre un dilogo donde indica que va a instalar GWT4NB. Haz clic en Siguiente. f. Lee la licencia y acepta los trminos. Haz clic en Instalar. g. Si indica que el plugin no est firmado haz clic en Continuar. h. Cuando haya terminado haz clic en Terminar. 3. Descarga la ltima versin del SDK de GWT. a. Entra a http://code.google.com/gwt y haz clic en el botn Descarga Google Web Toolkit. b. Hay varias opciones de descarga. Selecciona la que dice Download GWT SDK. Al momento de escribir este texto, es el ltimo botn, pero puede cambiar. c. Descomprime el archivo descargado, de preferencia en C:\. 4. Crea un proyecto para registrar el SDK en Netbeans. a. Crear un proyecto web normal sobre el servidor web que desees, pero al llegar al ltimo paso, que se llama Frameworks, selecciona Google Web Toolkit. b. En el campo GWT SDK Installation Folder Haz clic en el botn Browse y selecciona la carpeta del SDK. c. En el campo GWT Module introduce el nombre del mdulo. Normalmente empieza con el paquete y termina con el nombre del mdulo; por ejemplo gwt1.Gwt1. Haz clic en Terminar. 5. Si usas un SDK 2.3 o posterior, ajusta el CLASSPATH del proyecto. a. Selecciona el proyecto y muestra su men contextual, por ejemplo haciendo clic en el botn derecho del ratn. b. Selecciona Opciones. Copyright 2011. Gilberto Pacheco Gallegos. Todos los derechos reservados. 1/1

Introduccin a GWT c. Aparece un cuadro de dilogo. Selecciona la categora Libraries. d. De la pestaa Compile haz clic en el botn Add JAR/Folder y selecciona los archivos validation-api-1.0.0.GA-sources.jar y validation-api-1.0.0.GA.jar que se localizan en la carpeta del SDK de GWT. e. Deshabilita las casillas de verificacin de estos archivos. Solo debe quedar verificada la casilla del archivo gwt-servlet.jar. f. Haz clic en Aceptar. 6. Prueba el proyecto. a. Selecciona el proyecto y muestra su men contextual, por ejemplo haciendo clic en el botn derecho del ratn. b. Selecciona la opcin GWT Dev Mode w/o a JEE server. c. Aparece una ventana con ttulo GWT Development Mode. d. Se abre la ventana del navegador predeterminado. Este debe ser: Para Windows: Internet Explorer, Firefox o Chrome. Para Linux: Firefox. Para Mac: Safari.

e. Si no tienes instalado el plugin de desarrollo, el navegador trata de abrir una pgina para que lo descargues. En caso de que ya lo tengas descargado pero no instalado, lo puedes instalar de las siguientes formas: Internet Explorer: ejecuta el archivo gwt-dev-plugin-x86.msi. Tienes que cerrar el navegador y volver a abrirlo. Firefox: arrastra el archivo gwt-dev-plugin.xpi a las pestaas del navegador. Chrome: arrestra el archivo gwt-dev-plugin.crx a las pestaas del navegador.

f. Si no aparece la aplicacin en el navegador, puedes recargar la pgina. Otra opcin es usar la ventana GWT Development Mode y en la pestaa Development Mode haz clic en Launch Default Browser. g. Es posible hacer cambios en el cdigo HTML y GWT. Para ver los cambios solo hay que recargar la pgina en el navegador. h. Para la depuracin. Cierra la ventana GWT Development Mode. En Netbeans, en la barra de men seleccionar Depurar y luego Finalizar sesin del depurador. 7. Para ejecutar el proyecto, desplegar su men contextual y seleccionar Ejecutar (Run en ingls). Para ejecutar, todo el cdigo del sub paquete client del mdulo se compila a JavaScript en la carpeta gwt1.Gwt1 de la carpeta de despliegue. La compilacin puede tardar y luego se ejecuta la aplicacin sin la necesidad de los plugins dentro del navegador web. El proyecto generado tiene la siguiente estructura: Web Pages META-INF (Solo para Tomcat.)

Copyright 2011. Gilberto Pacheco Gallegos. Todos los derechos reservados.

2/2

Introduccin a GWT context.xml (Solo para Tomcat.) WEB-INF web.xml (Con la definicin de la pgina inicial.) welcomeGWT.html Source Packages gwt1 Gwt1.gwt.xml (Configuracin del mdulo.) Gwt1EntryPoint.java (Punto de entrada.)

1.2. Funcionamiento del Proyecto Base de Netbeans.

Copyright 2011. Gilberto Pacheco Gallegos. Todos los derechos reservados.

3/3

Introduccin a GWT Al hacer clic en Click me! se obtiene:

Al volver a hacer clic en el botn, se vuelve a mostrar el mensaje.

1.3. Archivo web.xml

1 <?xml version="1.0" encoding="UTF-8"?> 2 <web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"> 3 <session-config> 4 <session-timeout> 5 30 6 </session-timeout> 7 </session-config> 8 <welcome-file-list> 9 <welcome-file>welcomeGWT.html</welcome-file> 10 </welcome-file-list> 11 </web-app> 12

1.4. Archivo Gwt1.gwt.xml

Este archivo configura el comportamiento del mdulo GWT. Configura entre otras cosas los mdulos a utilizar, la apariencia y la clase inicial, conocida como entry point.
1 <?xml version="1.0" encoding="UTF-8"?> 2 3 <!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 1.7.0//EN" "http://google-web-toolkit.googlecode.com/svn/tags/1.7.0/distro-source/core/src/gwtmodule.dtd"> 4 5 <module> 6 <inherits name="com.google.gwt.user.User"/> 7 8 <!-- Inherit the default GWT style sheet. You can change --> 9 <!-- the theme of your GWT application by uncommenting --> 10 <!-- any one of the following lines. -->

Copyright 2011. Gilberto Pacheco Gallegos. Todos los derechos reservados.

4/4

Introduccin a GWT
11 <!-- <inherits name='com.google.gwt.user.theme.standard.Standard'/> --> 12 <!-- <inherits name="com.google.gwt.user.theme.chrome.Chrome"/> --> 13 <!-- <inherits name="com.google.gwt.user.theme.dark.Dark"/> --> 14 15 <entry-point class="gwt1.client.Gwt1EntryPoint"/> 16 17 <!-- Do not define servlets here, use web.xml --> 18 </module> 19

1.5. Archivo Gwt1EntryPoint.java

Clase inicial de la aplicacin. Cuando se ejecuta una aplicacin, lo primero que sucede es que se crea una instancia de esta clase y se invoca el mtodo onModuleLoad.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 /* * To change this template, choose Tools | Templates * and open the template in the editor. */ package gwt1.client; import import import import import import com.google.gwt.core.client.EntryPoint; com.google.gwt.user.client.ui.Button; com.google.gwt.user.client.ui.Label; com.google.gwt.user.client.ui.RootPanel; com.google.gwt.event.dom.client.ClickEvent; com.google.gwt.event.dom.client.ClickHandler;

/** * Main entry point. * * @author Gilito */ public class Gwt1EntryPoint implements EntryPoint { /** * Creates a new instance of Gwt1EntryPoint */ public Gwt1EntryPoint() { } /** * The entry point method, called automatically by loading a module * that declares an implementing class as an entry-point */ public void onModuleLoad() { final Label label = new Label("Hello, GWT!!!"); final Button button = new Button("Click me!"); button.addClickHandler(new ClickHandler() { public void onClick(ClickEvent event) { label.setVisible(!label.isVisible()); } }); RootPanel.get().add(button); RootPanel.get().add(label); }

Copyright 2011. Gilberto Pacheco Gallegos. Todos los derechos reservados.

5/5

Introduccin a GWT
42 } 43

1.5. Archivo welcomeGWT.html

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <!doctype html> <!-The DOCTYPE declaration above will set the browser's rendering engine into "Standards Mode". Replacing this declaration with a "Quirks Mode" doctype may lead to some differences in layout. --> <html> <head> <meta name='gwt:module' content='gwt1.Gwt1=gwt1.Gwt1'> <title>Gwt1</title> </head> <body> <script type="text/javascript" src="gwt1.Gwt1/gwt1.Gwt1.nocache.js"></script> </body> </html>

2. Fundamentos de GWT.
En este ejemplo el mdulo se llama primero.Primero.

2.1. Funcionamiento

Al hacer clic en Pchale aparece la siguiente alerta:

Copyright 2011. Gilberto Pacheco Gallegos. Todos los derechos reservados.

6/6

Introduccin a GWT

2.2. Archivo welcomeGWT.html

En este ejemplo se activa le tema Standard.
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 <html lang="es"> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 6 <meta name='gwt:module' content='primero.Primero=primero.Primero'> 7 <title>Primero</title> 8 </head> 9 <body> 10 <script type="text/javascript" src="primero.Primero/primero.Primero.nocache.js"> 11 </script> 12 </body> 13 </html>

2.3. Archivo Primero.gwt.xml

En este ejemplo se activa le tema Standard.
1 <?xml version="1.0" encoding="UTF-8"?> 2 <!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.0.0//EN" 3 "http://google-web-toolkit.googlecode.com/svn/tags/2.0.0/distro-source/core/src/gwtmodule.dtd"> 4 <module> 5 <inherits name="com.google.gwt.user.User"/> 6 <inherits name='com.google.gwt.user.theme.standard.Standard'/> 7 <!-- <inherits name="com.google.gwt.user.theme.chrome.Chrome"/> --> 8 <!-- <inherits name="com.google.gwt.user.theme.dark.Dark"/> --> 9 <entry-point class="primero.client.PrimeroEntryPoint"/> 10 </module>

2.4. Archivo PrimeroEntryPoint.java

Clase inicial de la aplicacin. Cuando se ejecuta una aplicacin, lo primero que sucede es que se crea una instancia de esta clase y se invoca el mtodo onModuleLoad.
1 package primero.client; 2 3 import com.google.gwt.core.client.EntryPoint;

Copyright 2011. Gilberto Pacheco Gallegos. Todos los derechos reservados.

7/7

Introduccin a GWT
4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 import import import import import com.google.gwt.event.dom.client.ClickEvent; com.google.gwt.event.dom.client.ClickHandler; com.google.gwt.user.client.Window; com.google.gwt.user.client.ui.Button; com.google.gwt.user.client.ui.RootPanel;

/** Punto de entrada de una aplicacin GWT. Se indicada en el archivo de mdulo, en el * elemento <code>entry-point</code>. Cuando la aplicacin se ejecuta, lo primero que * se hace es crear una instancia de esta clase y se invoca el mtodo * <code>onModuleLoad</code>, que es obligatorio en todas las clases que implementan * la interfaz <code>EntryPoint</code>. */ public class PrimeroEntryPoint implements EntryPoint { /** Primer mtodo que se ejecuta de una aplicacin. */ @Override public void onModuleLoad() { /* Se crea un botn en el Heap y se crea una referencia en el Stack, llamada * <code>botn</code> que apunta al objeto del Heap. */ final Button botn = new Button(); /* Se asigna valor a la propiedad text del botn, que es el letrero del botn. */ botn.setText("Pchale"); /* Conecta el botn con un objeto que es notificado cuando se hace clic en el * botn. El objeto debe implementar la interfaz "ClickHandler"; esto implica que * tenga cdigo para el mtodo "onClick". */ botn.addClickHandler(new ClickHandler() { /** Mtodo que se invoca cada vez que se presiona el botn. El parmetro * <code>event</code> contiene informacin acerca del botn que se presion. */ @Override public void onClick(ClickEvent event) { // El navegador muestra un cuadro de dilogo con el mensaje Hola. Window.alert("Hola."); } }); /* Asigna la propiedad title de la ventana del navegador, que es el texto de la * barra de ttulo. */ Window.setTitle("Primer Ejemplo"); /* "RootPanel" es una clase que implmenta el patrn "Singleton". En este patrn la * clase solo tiene una instancia en toda la ejecucin de la aplicacin. La * referencia de este objeto se recupera en la clase "RootPanel" con el mtodo * "get()". Las instancias de "RootPanel" representan el cuerpo de la pgina. En * esta ocasin se le agrega el botn siguiendo el flujo normal de la pgina. */ RootPanel.get().add(botn); } }

3. Alertas.
En este ejemplo el mdulo se llama alertas.Alertas.

Copyright 2011. Gilberto Pacheco Gallegos. Todos los derechos reservados.

8/8

Introduccin a GWT

3.1. Funcionamiento

Al hacer clic en Confirmar aparece la siguiente alerta:

Al hacer clic en Solicitar aparece la siguiente alerta:

Al hacer clic en Mensaje aparece la siguiente alerta:

Copyright 2011. Gilberto Pacheco Gallegos. Todos los derechos reservados.

9/9

Introduccin a GWT

3.2. Archivo AlertasEntryPoint.java

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 package alertas.client; import import import import import import import com.google.gwt.core.client.EntryPoint; com.google.gwt.event.dom.client.ClickEvent; com.google.gwt.event.dom.client.ClickHandler; com.google.gwt.user.client.Window; com.google.gwt.user.client.ui.Button; com.google.gwt.user.client.ui.Label; com.google.gwt.user.client.ui.RootPanel;

public class AlertasEntryPoint implements EntryPoint { private final Label lbl = new Label(); private final Button btnConfirmar = new Button("Confirmar", new ClickHandler() { @Override public void onClick(ClickEvent event) { confirma(); } }); private final Button btnSolicitar = new Button("Solicitar", new ClickHandler() { @Override public void onClick(ClickEvent event) { solicitar(); } }); private final Button btnMensaje = new Button("Mensaje", new ClickHandler() { @Override public void onClick(ClickEvent event) { mensaje(); } }); @Override public void onModuleLoad() { RootPanel.get().add(new Label("Presione alguno de los botones.")); RootPanel.get().add(btnConfirmar); RootPanel.get().add(btnSolicitar); RootPanel.get().add(btnMensaje); RootPanel.get().add(lbl); } private void mensaje() { // Muestra un cuadro de dilogo con un mensaje. Window.alert("Hola"); } private void confirma() { /* Muestra un cuadrro de alerta con la pregunta "Le vas al Amrica?". Si el * usuario selecciona una opcin afirmativa devuelve true; en otro caso, devuelve * false. */ if (Window.confirm("Le vas al Amrica?")) { Window.alert("No va a calificar."); } else { Window.alert("Tu si sabes."); } } private void solicitar() { /* El mtodo prompt pide un dato. Presenta como mensaje el primer parmetro. El * segundo parmetro es el valor inicial del cuadro de texto que captura el dato * del usuario. Si el usuario presiona un botn afirmativo, devuelve el valor * capturado en el cuadro de texto y devuelve null si el usuario cancela el cuadro

Copyright 2011. Gilberto Pacheco Gallegos. Todos los derechos reservados.

10/10

Introduccin a GWT
58 * de dilogo. */ 59 final String apodo = Window.prompt("Como te dicen tu cuates?", "amigo"); 60 Window.alert("Hola " + apodo); 61 } 62 }

4. Interfaces Grficas.
En este ejemplo el mdulo se llama interfaz.Interfaz.

4.1. Funcionamiento

Al hacer clic en Procesar aparece la siguiente alerta:

4.2. Archivo InterfazEntryPoint.java

Clase inicial de la aplicacin. Cuando se ejecuta una aplicacin, lo primero que sucede es que se crea una instancia de esta clase y se invoca el mtodo onModuleLoad.
1 2 3 4 5 6 7 8 9 package interfaz.client; import com.google.gwt.core.client.EntryPoint; import com.google.gwt.event.dom.client.ClickEvent; import com.google.gwt.event.dom.client.ClickHandler; 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.FlowPanel; import com.google.gwt.user.client.ui.InlineLabel;

Copyright 2011. Gilberto Pacheco Gallegos. Todos los derechos reservados.

11/11

Introduccin a GWT
10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 import com.google.gwt.user.client.ui.Label; import com.google.gwt.user.client.ui.RootPanel; import com.google.gwt.user.client.ui.TextBox; /** Ejemplo de como crear una interfaz grfica. Las interfaces se construyen con * varios Widget que se agrupan en un Composite. En este ejemplo los componentes se * colocan verticalmente. */ public class InterfazEntryPoint extends Composite implements EntryPoint { /** Referencia constante llamada txtNombre que apunta a un cuadro de texto. Cada * objeto de la clase InterfazEntryPoint contiene una referencia txtNombre. Estos * cuadros de texto leen datos <code>String</code>. Para otros tipos de datos se * pueden usar <code>DoubleBox</code>, <code>IntegerBox</code>, * <code>LongBox</code> y <code>DateBox</code>. */ private final TextBox txtNombre = new TextBox(); { // Muestra aproximadamente 10 carcteres. txtNombre.setVisibleLength(10); } /** Referencia constante llamada btnSaludo que apunta a un botn cuyo texto es * "Saludo". El segundo parmetro del constructor conecta con el objeto que recibe * los eventos cada vez que se hace clic en el botn. */ private final Button btnSaludo = new Button("Procesar", new ClickHandler() { @Override public void onClick(ClickEvent event) { procesa(); } }); /** Se ejecuta cada vez que se construye una instancia de InterfazEntryPoint. */ public InterfazEntryPoint() { final FlowPanel distribucion = new FlowPanel(); // coloca el texto "Nombre:" distribucion.add(new InlineLabel("Nombre:")); // coloca txtNombre. distribucion.add(txtNombre); // coloca btnSaludo. distribucion.add(btnSaludo); /* Asigna a distribucin como el componente raz del * Composite. */ initWidget(distribucion); } /** Mtodo invocado cada vez que se hace clic en btnSaludo. */ public void procesa() { /* getText() Devuelve el texto capturado en txtNombre. * trim() Elimina los espacios en blanco al inicio y al final de un texto. * Todos los cuadros de texto, incluido TextBox pueden usar el mtodo "getValue()" * para recuperar un valor del tipo queindica su nombre; por ejemplo, "LongBox" * devuelve "Long". */ final String nombre = txtNombre.getText().trim(); // Obtiene un saludo al concatenar estos dos textos. final String saludo = "Hola " + nombre; // Cambia el texto de txtSaludo. Window.alert(saludo); } @Override public void onModuleLoad() { // Agrega las instrucciones para usar la interfaz. RootPanel.get().add(new Label("Introduzca un nombre y luego presione el botn.")); // Agrega el objeto que ejecuta este mtodo al navegador. RootPanel.get().add(this);

Copyright 2011. Gilberto Pacheco Gallegos. Todos los derechos reservados.

12/12

Introduccin a GWT
69 } 70 }

5. Interfaces Grficas con UiBinder.

En este ejemplo el mdulo se llama uibinder.Uibinder.

5.1. Funcionamiento

Al hacer clic en Enviar aparece la siguiente alerta:

5.2. Archivo Uibinder.gwt.xml

1 <?xml version="1.0" encoding="UTF-8"?> 2 <!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.0.0//EN" 3 "http://google-web-toolkit.googlecode.com/svn/tags/2.0.0/distro-source/core/src/gwtmodule.dtd"> 4 <module> 5 <inherits name="com.google.gwt.user.User"/> 6 <inherits name="com.google.gwt.user.theme.standard.Standard"/> 7 <!-- Se declara una propiedad que ayuda a evitar problemas de inyeccin de 8 cdigo. --> 9 <set-configuration-property name="UiBinder.useSafeHtmlTemplates" value="true" /> 10 <entry-point class="uibinder.client.UibinderEntryPoint"/> 11 </module>

Copyright 2011. Gilberto Pacheco Gallegos. Todos los derechos reservados.

13/13

Introduccin a GWT

5.3. Archivo Interfaz.ui.xml

UiBinder permite programar las interfaces con XHTML y manipularlas con cdigo Java. Para crear estos dos archivos en Netbeans hay que seguir los siguientes pasos. 1. Seleccionar el subpaquete client. 2. En el men Archivo hay que seleccionar Archivo Nuevo.... 3. En la categora Google Web Toolkit hay que seleccionar GWT Uibinder y hacer clic en Siguiente. 4. En el campo Nombre de Clase introducimos el nombre de la interfaz. Para este ejemplo introduce Interfaz (sin las comillas) y haz clic en Terminar.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <!-- El atributo xlmns sirve para importar etiquetas. Se puede usar cualquier Widget de un paquete usando un prefijo. El valor debe empezar con "urn:ui:", seguido del nombre del paquete. --> <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui"> <!-- Declaracin de reglas de estilo nicas para este archivo. --> <ui:style> .forma {background-color: rgb(255, 245, 175)} .lab {background-color: purple; color: white} </ui:style> <!-- HTMLPanel permite mezclar cdigo XHTML y widgets. El atributo styleName permite cambiar el nombre de clase de un widget. Un valor sin llaves toma las definiciones globales de estilo, por ejemplo del archivo HTML que invoca este mdulo. Si el nombre de clases tiene la sintaxis {style.xxx}, se toma el valor definido en el elemento "ui:style". --> <g:HTMLPanel styleName="{style.forma}"> <!-- El atributo class funciona bajo las explicaciones anteriores y se puede definir ms de una clase. --> <div><label class="{style.lab}" style="color:yellow">Nombre:</label></div> <!-- Para los widgets el elemento "addStyleNames" permite agregar ms de una clase sin modificar el estilo principal del elemento. --> <div><g:TextBox ui:field="txtNombre" addStyleNames="{style.lab} texto"/></div> <!-- Los elementos con el atributo "ui:field" se pueden usar desde Java. --> <div><g:Button ui:field="procesar">Enviar</g:Button></div> </g:HTMLPanel> </ui:UiBinder>

5.4. Archivo Interfaz.java

Clase inicial de la aplicacin. Cuando se ejecuta una aplicacin, lo primero que sucede es que se crea una instancia de esta clase y se invoca el mtodo onModuleLoad.
1 2 3 4 5 6 7 8 9 10 11 12 package uibinder.client; import import import import import import import import import com.google.gwt.core.client.GWT; com.google.gwt.event.dom.client.ClickEvent; com.google.gwt.uibinder.client.UiBinder; com.google.gwt.uibinder.client.UiField; com.google.gwt.uibinder.client.UiHandler; com.google.gwt.user.client.Window; com.google.gwt.user.client.ui.Composite; com.google.gwt.user.client.ui.TextBox; com.google.gwt.user.client.ui.Widget;

Copyright 2011. Gilberto Pacheco Gallegos. Todos los derechos reservados.

14/14

Introduccin a GWT
13 public class Interfaz extends Composite { 14 private static InterfazUiBinder uiBinder = GWT.create(InterfazUiBinder.class); 15 /** Define el enlace entre instancias de esta clase y archivos <code>ui.xml</code>. 16 */ 17 interface InterfazUiBinder extends UiBinder<Widget, Interfaz> { 18 } 19 /** Referencia declarada en el archivo <code>Interfaz.ui.xml</code> con el atributo 20 * <code>ui:field</code>. */ 21 @UiField 22 TextBox txtNombre; 23 public Interfaz() { 24 initWidget(uiBinder.createAndBindUi(this)); 25 } 26 /** Procesa el evento <code>onClick</code> del widget <var>procesar</var>, 27 * declarado en el archivo <code>Interfaz.ui.xml</code> con el atributo 28 * <code>ui:field</code>. La clase de la referencia al parmetro <var>event</var> 29 * indica el tipo de evento que se procesa. 30 * @param event describe el evento que se est procesando. */ 31 @UiHandler("procesar") 32 void procesar(ClickEvent event) { 33 final String nombre = txtNombre.getText().trim(); 34 final String saludo = "Hola " + nombre; 35 Window.alert(saludo); 36 } 37 }

5.5. Archivo UibinderEntryPoint.java

Clase inicial de la aplicacin. Cuando se ejecuta una aplicacin, lo primero que sucede es que se crea una instancia de esta clase y se invoca el mtodo onModuleLoad.
1 2 3 4 5 6 7 8 9 10 11 12 13 package uibinder.client; import com.google.gwt.core.client.EntryPoint; import com.google.gwt.user.client.ui.Label; import com.google.gwt.user.client.ui.RootPanel; public class UibinderEntryPoint implements EntryPoint { @Override public void onModuleLoad() { RootPanel.get().add(new Label("Introduzca un nombre y luego presione el botn.")); RootPanel.get().add(new Interfaz()); } }

Copyright 2011. Gilberto Pacheco Gallegos. Todos los derechos reservados.

15/15