1)

Qu es google web Toolkit?

Google Web Toolkit (a partir de ahora GWT) es un framework compuesto por una serie
de clases java que permite programar en dicho lenguaje aplicaciones web, que despus,
a travs de un compilador especializado, son traducidas a Html y Javascript.
2)

Qu necesitas para usarlo?

3)

Instalacin:

4)

Las libreras de GWT: http://code.google.com/intl/esES/webtoolkit/download.html

El entorno de desarrollo Eclipse con los Web Development Tools.
El plugin Cypal Studio: http://code.google.com/p/cypalstudio/downloads/list

Descarga el GWT.
Descarga el Cypal Studio.
Descomprime el Cypal Studio y copia los .jar que hay en la carpeta al
descomprimir en la carpeta Plugins del Eclipse
Arranca el Eclipse
Ve a Windows->Preferences. En la columna de la izquierda te saldr una
columna que pone Cypal Studio.A continuacin pincha en "Browse..."
a la derecha de "GWT Home" y seleccionad la ruta del GWT . Apply y
OK.
Ahora tienes que eliminar el anterior proyecto WWW si lo tienes. Una
vez hecho dale a File->Import. Seleccionad SVN->Ckeckout projects
from SVN. Selecciona la direccin del repositorio ("https://world-warweb.googlecode.com/svn/trunk"), selecciona el proyecto www3 y dale a
Next y/o Finalizar/Finish hasta que te salga la opcin de crear un nuevo
proyecto. Selecciona Web->Dynamic Web Project.
Ponle un nombre al proyecto (por ejemplo WWW). En "Dynamic Web
Module Version" selecciona la 2.4 y en Configuration selecciona
"Cypal Studio for GWT". Dale a Next y sin cambiar nada a Finish.

Estructura de un proyecto en GWT:

Se crean por defecto dos paquetes

El primero contiene los elementos html sobre los que se carga la aplicacin. El segundo
las clases java. Se pueden crear nuevos paquetes sin problema, estos son los que se
crean por defecto.
Los proyectos en GWT se componen de los siguientes mdulos esenciales:

Clase principal: Es la clase similar a la que tiene la funcin main() en java.

Para que sea reconocida y cargada en el navegador debe implementar la clase
EntryPoint y el mtodo OnModuleLoad(). Al cargar la aplicacin se llama a
este mtodo.
Ejemplo:

package es.ucm.is.www.client.GUI.client;
import java.util.ArrayList;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class Root implements EntryPoint {

/**
* Mtodo principal que carga la aplicacin
* @author Javier
*/
public void onModuleLoad() {
Panel1 principal = new Panel1();
RootPanel.get("Root").add(principal);
}

RootPanel: la estructura de una aplicacin en GWT es la siguiente: Paneles de

diversos tipos y propiedades que contienen a su vez otros paneles y
widgets(elementos). El panel principal donde se insertan a su vez todos los
elementos es el RootPanel. Para insertar un elemento (panel o widget) en este
panel se usa la siguiente llamada:

RootPanel.get().add(elWidgetQueSea);

A la funcin RootPanel.get() se le puede pasar un parmetro String que defina el

id html del elemento donde se tiene que insertar el panel.

Fichero nombre_del_proyecto.gwt.xml: Est en el paquete que define la

estructura html.
Este fichero define los mdulos que se van a usar en el proyecto. Ejemplo:

<module>
<!-- Inherit the core Web Toolkit stuff.
-->
<inherits name='com.google.gwt.user.User'/> //esto debe estar
siempre
<!-- Specify the app entry point class.
-->
<entry-point class='es.ucm.is.www.client.GUI.client.Root'/> //la
clase principal. Debe estar siempre

<inherits name="com.google.gwt.user.theme.standard.Standard"/>
//el tema de la aplicacin. Debe estar siempre. Se puede cambiar por
uno de los 2 de abajo
<!-- <inherits name="com.google.gwt.user.theme.chrome.Chrome"/> -->
<!-- <inherits name="com.google.gwt.user.theme.dark.Dark"/> -->
<servlet path="/prueba"
class="es.ucm.is.www.client.GUI.server.ServicioPruebaImpl"/> //ruta de
servlet para hacer depuracin en el tomcat embebido. Mas adelante se
explica
<stylesheet src="Root.css" /> //Hoja de estilos CSS. Se pueden
aadir tantas como se quieran. Debe haber al menos una
</module>

5)

Nombre_del_proyecto.html. Fichero html sobre el que se carga la aplicain.

Se crea por defecto al crear el proyecto. Si definimos elementos del tipo <div
id="Pepito">, podemos insertar los elementos que queramos realizando la
llamada RootPanel.get(pepito).add(loquesea).
Paneles y widgets:

En GWT existen numerosos paneles, es decir, elementos que contienen a su vez nuevos
elementos. Cada tipo de panel tienen unas propiedades. Aqu os voy a poner la
referencia al javadoc de los ms importantes y a una pgina de ejemplos.
Hay una cosa muy importante en GWT. Todo lo que queris hacer se puede hacer de
alguna manera. La solucin consiste en buscar el panel o las combinaciones de
elementos que sean necesarias. Muchas veces es necesario investigar en el Javadoc o en
internet, pero al final las cosas salen como queremos.

Vertical Panel:

Javadoc: http://google-web-toolkit.googlecode.com/svn/javadoc/1.5/index.html?
overview-summary.html
Ejemplo: http://examples.roughian.com/#Panels~VerticalPanel

HorizontalPanel:

Javadoc: http://google-web-toolkit.googlecode.com/svn/javadoc/1.5/index.html?
overview-summary.html
Ejemplo: http://examples.roughian.com/#Panels~HorizontalPanel

FlowPanel:

Javadoc: http://google-web-toolkit.googlecode.com/svn/javadoc/1.5/index.html?
overview-summary.html
Ejemplo: http://examples.roughian.com/#Panels~FlowPanel

 Grid:
Javadoc: http://google-web-toolkit.googlecode.com/svn/javadoc/1.5/index.html?
overview-summary.html
Ejemplo: http://examples.roughian.com/#Widgets~Grid
En la pgina de ejemplos podeis ver los dems.
Otro asunto importante es cmo crear clases que sean a su vez Widgets. Se puede
conseguir de dos maneras:
Extendiendo la clase Widget: de esta clase heredan todos los elementos. No est
recomendado por los desarrolladores del GWT.
Extendiendo la clase Composite: cuando extendemos esta clase, tenemos que
llamar al mtodo initWidget(Widget w) al final de la constructora, el cual
inicializara ese elemento como widget de la
6)

CSS:

CSS nos permite asignar estilos a cada elemento de la aplicacin. Esto se hace de la
siguiente manera:

Se define un estilo en alguno de los archivos .css de nuetra aplicacin:

.prueba{
background-color: black; //color de fondo del elemento
font-family: times;//tipo de letra
color: white//color del elemento
}

Dentro del cdigo del GWT:

Label l = new Label("Hola");//crea un nuevo label

l.setStyleName("prueba");//le asigna el estilo, borrando todos los que
tena

Tambin se pueden realizar las llamadas:

addStyleName(String style): aade un estilo nuevo al elemento.
removeStyleName(String style): elimina un estilo del elemento.
Mirad aqu para mas informacin: http://google-webtoolkit.googlecode.com/svn/javadoc/1.5/index.html?overview-summary.html
Referencia de css con editores para probar vuestros css:
http://www.w3schools.com/CSS/default.asp