Ejecutando una aplicación GWT

Tomando como referencia el proyecto creado en el blog anterior Instalando Eclipse y GWT, inicie Eclipse, abra el proyecto ejemplo1 y proceda a ejecutarlo.

Hay varias formas para ejecutar su aplicación.

De click derecho sobre el nombre del proyecto. Desde este menú de opciones seleccione Run As --> Web Application.

Otra manera para ejecutar su proyecto es seleccionando el proyecto en el Explorador de Eclipse, y desde el menú principal seleccione las opciones: Run --> Run As --> Web Application.

O la más fácil, simplemente de click en el botón verde Run de la barra de herramientas en la parte superior de Eclipse.

Espere unos segundos mientras GWT prepara el ambiente de ejecución de su aplicación.

GWT instalará su aplicación en el servidor web Jetty, el cual es iniciado desde Eclipse. Este será su ambiente web de pruebas durante el proceso de desarrollo.

En Eclipse podrá configurar compilación automática cada vez que haga modificaciones al código fuente. Para ello seleccione del menú principal de Eclipse las siguientes opciones: Project --> Build Automatically.

Si no desea una compilación automática, remueva esta selección, y cada vez que quiera compilar su aplicación seleccione Project --> Build All o simplemente presione las teclas Ctrl+B:

Podrá probar su aplicación desde un navegador tan pronto como haya sido instalada en Jetty. Si el proceso de compilación e instalación ha sido exitoso, Eclipse le indicará  el URL desde donde su aplicación podrá ser accesible.

Revise la vista de tareas en la parte inferior de Eclipse. Seleccione la pestaña (tab) Development Mode:

Copie el URL que aparece en el panel, abra una nueva ventana del navegador y pegue el URL en la barra de direcciones:

Presione Enter.

Espere unos segundos mientras la aplicación es descargada en el navegador:

Entre un nombre y de click en el botón Send. Espere unos segundos. En el navegador aparecerá:

Se preguntará de dónde aparecieron los componentes de esta página. Recuerde que cuando se creó el proyecto ejemplo1, se eligió la opción Sample Code. Este código generado automáticamente por GWT nos permitirá examinar un proyecto completo de GWT, incluyendo tanto los componentes del cliente como del servidor, así como también los mecanismos que implementan Remote Procedure Call (RPC) para la comunicación entre estos dos niveles. La funcionalidad general de este proyecto se analizará en detalle en un próximo blog.

Por ahora, puede comenzar realizando pequeños cambios en la presentación.

Por ejemplo, cambie el tema del estilo de apariencia de los componentes de la página. En el Explorador de Proyectos (Project Explorer) de Eclipse, seleccione el proyecto ejemplo1, abra la carpeta src y abra el paquete com.gwt.ejemplo1. Allí encontrará el archivo Ejemplo1.gwt.xml. Este es un documento XML que corresponde al descriptor del proyecto. Este archivo se explicará ampliamente en el próximo blog. Por ahora podemos decir que en este archivo se definen algunas opciones del proyecto, como la clase que se instanciará cuando se ejecute el proyecto, los paquetes de GWT que se incluirán en las aplicaciones, la ubicación de los programas Java que serán traducidos a JavaScript, etc.

La versión 2.4 de GWT provee cuatro temas de estilos para la presentación de los componentes del cliente: Clean, Standard, Chrome y Dark.

Inicialmente la aplicación tiene definido el tema Clean tal y como podrá observar en la siguiente línea del descriptor:

<inherits name='com.google.gwt.user.theme.clean.Clean' />

Para cambiar el tema Clean a Standard, ponga entre comentarios la línea anterior tal y como se muestra a continuación:

<!-- <inherits name='com.google.gwt.user.theme.clean.Clean' /> -->

El tema Standard esta entre comentarios:

<!-- <inherits name='com.google.gwt.user.theme.standard.Standard'/> -->

Remueva los comentarios para habilitar esta línea en el descriptor:

<inherits name='com.google.gwt.user.theme.standard.Standard'/>

Salve el proyecto, reinicie la aplicación, vaya al browser y de click en refrescar. Entre el nombre y de click en Send:

Notará que los tonos de color gris han cambiado a tonos de color azul.

Como ejercicio, intente cambiar los temas de estilos a chrome y dark. De ese modo podrá escoger un tema preferido para sus próximas aplicaciones.

Archivo HTML

Una aplicación GWT se inicia cargando el archivo HTML con el mismo nombre de la clase Java definida como punto de entrada (entry point) en el archivo descriptor (Ejemplo1.gwt.xml):

<!-- Specify the app entry point class. --> <entry-point class='com.gwt.ejemplo1.client.Ejemplo1' />

La clase Ejemplo1 es el punto de entrada del proyecto.  Esta clase será compilada y traducida a JavaScript. Este código JavaScript será cargado desde la página Ejemplo1.html que se encuentra dentro del directorio war/WEB-INF. Abra este directorio en el Explorador de Eclipse y abra el archivo Ejemplo1.html.

Cambie el título de su aplicación de Web Application Starter Project a GWT – Ejemplo1, o escriba un título relacionado con su proyecto inicial.

El titulo esta definido como:

<title>Web Application Starter Project</title>

Cámbielo a:

<title>GWT – Ejemplo1</title>

La página muestra el siguiente encabezado:

<h1>Web Application Starter Project</h1>

Cambie este encabezado a “GWT – Aplicación de Ejemplo”

<h1>GWT – Aplicación de Ejemplo</h1>

Puede cambiar también la etiqueta que indica en donde entrar su nombre:

<tr>                 <td colspan="2" style="font-weight: bold;">Please enter your name:</td> </tr>

Por:

<tr>                 <td colspan="2" style="font-weight: bold;">Por favor entre su nombre:</td> </tr>

Salve el archivo HTML, vaya al navegador, refresque la página y observe los resultados:

Bien, ya ha hecho los primeros cambios a su aplicación desde la página HTML. Ahora apliquemos algunos cambios a la clase en donde residen los componentes GWT.

Archivo Java

En el explorador de Eclipse abra la carpeta scr y el paquete com.gwt.ejemplo1.client. Encontrará tres archivos: la clase Ejemplo1.java y las interfaces GreetingService.java y GreetingServiceAsync.java.  Las interfaces definen la manera como cliente y servidor se comunican, y la clase Ejemplo1.java contiene el código Java que será traducido a JavaScript y  desplegado en la página HTML.

Abra la clase Ejemplo1.java.

Observe el nombre del paquete al cual pertenece esta clase:

package com.gwt.ejemplo1.client;

También revise las clases importadas. Estas pertenecen a paquetes Java de GWT:

import com.gwt.ejemplo1.shared.FieldVerifier; import com.google.gwt.core.client.EntryPoint; import com.google.gwt.core.client.GWT; import com.google.gwt.event.dom.client.ClickEvent; import com.google.gwt.event.dom.client.ClickHandler; import com.google.gwt.event.dom.client.KeyCodes; import com.google.gwt.event.dom.client.KeyUpEvent; import com.google.gwt.event.dom.client.KeyUpHandler; import com.google.gwt.user.client.rpc.AsyncCallback; import com.google.gwt.user.client.ui.Button; import com.google.gwt.user.client.ui.DialogBox; import com.google.gwt.user.client.ui.HTML; import com.google.gwt.user.client.ui.Label; import com.google.gwt.user.client.ui.RootPanel; import com.google.gwt.user.client.ui.TextBox; import com.google.gwt.user.client.ui.VerticalPanel;

La clase Ejemplo1 implementa la clase GWT EntryPoint, lo que indica que éste será el punto de entrada (entry point) del proyecto.  Recuerde la definición y propósito del archivo descriptor Ejemplo1.gwt.xml.

El método onModuleLoad() es el primero en ser ejecutado. Aquí se define la gran mayoría de los componentes desplegados en el navegador.

Comience realizando cambios sencillos antes de agregar nuevos componentes. Por ejemplo cambie la etiqueta Send del botón a Enviar y el texto GWT User a Usuario GWT:

Código original:

public void onModuleLoad() {             final Button sendButton = new Button("Send");             final TextBox nameField = new TextBox();             nameField.setText("GWT User");             final Label errorLabel = new Label();

Código nuevo:

public void onModuleLoad() {             final Button sendButton = new Button("Enviar");             final TextBox nameField = new TextBox();             nameField.setText("Usuario GWT");             final Label errorLabel = new Label();

Salve la aplicación. Si ha configurado la opción Build Automatically no tendrá que recompilarla, vaya al browser y refresque la página:

Experimente con otros cambios tanto en la página Ejemplo1.html como en la clase Ejemplo1.java, salve, compile y refresque el navegador, poco a poco se irá familiarizando con este ambiente de desarrollo.