7/25/2019 Gua de Google Web Toolkit im.doc

1/4

1) Qu es google web Toolkit?

Google Web Toolkit (a partir de ahora GWT) es un framework compuesto por una serie

de clases a!a "ue permite programar en dicho lenguae aplicaciones web# "ue despus#

a tra!s de un compilador especiali$ado# son traducidas a %tml & 'a!ascript

) Qu necesitas para usarlo?

*as librer+as de GWT, http,--codegooglecom-intl-es.

/0-webtoolkit-downloadhtml

/l entorno de desarrollo /clipse con los Web e!elopment Tools

/l plugin 2&pal 0tudio, http,--codegooglecom-p-c&pal.

studio-downloads-list

3) 4nstalaci5n,

escarga el GWT

escarga el 2&pal 0tudio

escomprime el 2&pal 0tudio & copia los ar "ue ha& en la carpeta al

descomprimir en la carpeta 67lugins8 del /clipse

9rranca el /clipse

:e a Windows.;7references /n la columna de la i$"uierda te saldr< una

columna "ue pone 62&pal 0tudio89 continuaci5n pincha en =>rowse=

a la derecha de =GWT %ome= & seleccionad la ruta del GWT 9ppl& &

@

9hora tienes "ue eliminar el anterior pro&ecto WWW si lo tienes Ana

!e$ hecho dale a 6Bile.;4mport8 0eleccionad 60:C.;2keckout proects

from 0:C8 0elecciona la direcci5n del repositorio (=https,--world.war.

webgooglecodecom-s!n-trunk=)# selecciona el pro&ecto www3 & dale a

CeDt &-o Binali$ar-Binish hasta "ue te salga la opci5n de crear un nue!o

pro&ecto 0elecciona 6Web.;&namic Web 7roect8

7onle un nombre al pro&ecto (por eemplo WWW) /n =&namic Web

Eodule :ersion= selecciona la F & en 2onfiguration selecciona

=2&pal 0tudio for GWT= ale a CeDt & sin cambiar nada a Binish

F) /structura de un pro&ecto en GWT,

0e crean por defecto dos pa"uetes

/l primero contiene los elementos html sobre los "ue se carga la aplicaci5n /l segundo

las clases a!a 0e pueden crear nue!os pa"uetes sin problema# estos son los "ue se

crean por defecto

*os pro&ectos en GWT se componen de los siguientes m5dulos esenciales,

http://code.google.com/intl/es-ES/webtoolkit/download.htmlhttp://code.google.com/intl/es-ES/webtoolkit/download.htmlhttp://code.google.com/p/cypal-studio/downloads/listhttp://code.google.com/p/cypal-studio/downloads/listhttps://world-war-web.googlecode.com/svn/trunkhttps://world-war-web.googlecode.com/svn/trunkhttp://code.google.com/intl/es-ES/webtoolkit/download.htmlhttp://code.google.com/intl/es-ES/webtoolkit/download.htmlhttp://code.google.com/p/cypal-studio/downloads/listhttp://code.google.com/p/cypal-studio/downloads/listhttps://world-war-web.googlecode.com/svn/trunkhttps://world-war-web.googlecode.com/svn/trunk

7/25/2019 Gua de Google Web Toolkit im.doc

2/4

2lase principal, /s la clase similar a la "ue tiene la funci5n 6main()8 en a!a

7ara "ue sea reconocida & cargada en el na!egador debe implementar la clase

6/ntr&7oint8 & el mtodo 6nEodule*oad()8 9l cargar la aplicaci5n se llama a

este mtodo

/emplo,

package es.ucm.is.www.client.GUI.client;

importjava.util.ArrayList;

import com.google.gwt.core.client.EntryPoint;import com.google.gwt.user.client.ui.RootPanel;

/**

*Entrypointclassese!ine"coe#on$ouleLoa%&"/coe#.

*/

publicclassRoot implementsEntryPoint '

/**

*$(tooprincipal)uecargalaaplicacin

*@author+avier */

publicvoidon$ouleLoa%& ' Panel, principal - newPanel,%&; RootPanel.get%Root&.a%principal&;

oot7anel, la estructura de una aplicaci5n en GWT es la siguiente, 7aneles de

di!ersos tipos & propiedades "ue contienen a su !e$ otros paneles &

widgets(elementos) /l panel principal donde se insertan a su !e$ todos los

elementos es el oot7anel 7ara insertar un elemento (panel o widget) en este

panel se usa la siguiente llamada,

RootPanel.get%&.a%el0iget1ue2ea&;

9 la funci5n oot7anelget() se le puede pasar un par

7/25/2019 Gua de Google Web Toolkit im.doc

3/4

"in5eritsname-"com.google.gwt.user.theme.standard.Standard" /#

//el tema de la aplicacin. Debe estar siempre. Se puede cambiar poruno de los 2 de abajo"344 "in5erits name-com.google.gwt.user.t5eme.c5rome.95rome/# 44#

"344 "in5erits name-com.google.gwt.user.t5eme.ar8.:ar8/# 44#"servletpat5-"/prueba"

class-"es.ucm.is.www.client.GUI.server.ServicioPruebaImpl" /# //ruta deservlet para hacer depuracin en el tomcat embebido. Mas adelante seexplica

"styles5eetsrc-"Root.css"/#//oja de estilos !SS. Se puedena"adir tantas como se #uieran. Debe haber al menos una"/moule#

6CombreHdelHpro&ectohtml8 Bichero html sobre el "ue se carga la aplicai5n

0e crea por defecto al crear el pro&ecto 0i definimos elementos del tipo Idi!

idJ=7epito=;# podemos insertar los elementos "ue "ueramos reali$ando lallamada oot7anelget(6pepito8)add(lo"uesea)

K) 7aneles & widgets,

/n GWT eDisten numerosos paneles# es decir# elementos "ue contienen a su !e$ nue!os

elementos 2ada tipo de panel tienen unas propiedades 9"u+ os !o& a poner la

referencia al a!adoc de los m

7/25/2019 Gua de Google Web Toolkit im.doc

4/4

Grid:

'a!adoc, http,--google.web.toolkitgooglecodecom-s!n-a!adoc-1K-indeDhtml?

o!er!iew.summar&html

/emplo, http,--eDamplesroughiancom-LWidgetsMGrid

/n la p