Escolar Documentos
Profissional Documentos
Cultura Documentos
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)
3)
Instalacin:
4)
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.
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:
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.get().add(elWidgetQueSea);
<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)
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:
.prueba{
background-color: black; //color de fondo del elemento
font-family: times;//tipo de letra
color: white//color del elemento
}