Post on 28-Feb-2018
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/trunk7/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