jueves, 1 de julio de 2010

GWT & Netbeans

Google Web Toolkit
Para este ejemplo estoy usando Netbeans 6.8, Glassfish V3, GWT 2.0.3 y Ubuntu 10.0.4
Primeramente abrimos Netbeans 6.8

Luego vamos a Tools/Plugins y buscamos GWT4NB, lo marcamos y damos click en Install

Damos click sobre Next
Aceptamos la Licencia
Descargamos e instalamos el plugin
Luego tenemos que crear un nuevo proyecto, para este caso un Web Application
Le damos el nombre ProyectoGWT
Seleccionamos el server en este caso Glassfish V3
Y marcamos Google Web Toolkit, seleccionamos la ruta de instalacion de GWT(lo podemos descargar y descomprimir de http://code.google.com/webtoolkit/download.html), además damos la ruta de paquetes
Se nos abrira web.gwt.xml, que es un archivo de configuracion para gwt
Si ejecutamos el proyecto nos saldrá una pantalla de ejemplo:
GWT genera tres archivos importantes:
xxx.gwt.xml: Que es un archivo de configuración XML.
xxxEntryPoint: Que es la clase main
welcomeXXX: Que es una pagina web con una llamada a JavaScript que es el encargado de devolver el codigo HTML que se mostrará en pantalla:

La programación de los elementos de HTML es similar a la que hacemos cuando trabajamos con SWING o AWT. Esto lo hacemos por código y usamos contenedores como tablas y paneles para distribuir nuestros elementos. Además tambien llamamos a Handlers que nos permitiran usar los diferentes eventos de los elementos.
La programación se la realiza en la funcion onModuleLoad de xxxEntryPoint, para este ejemplo estoy creando un control que se encargara de agregar nombres a una lista, este es el código fuente de la clase:

package com.ejemplo2.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.KeyPressEvent;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
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.KeyPressHandler;
import com.google.gwt.i18n.client.DateTimeFormat;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;

/**
* Main entry point.
*
* @author santiago
*/
public class webEntryPoint implements EntryPoint {

/**
* Creates a new instance of webEntryPoint
*/
private HorizontalPanel panelAgregar = new HorizontalPanel();
private VerticalPanel panel = new VerticalPanel();
private FlexTable tablaDatos = new FlexTable();
private TextBox txtNombre = new TextBox();
private Button agregar = new Button("Agregar");
private Label lblNombre = new Label("Nombre:");
private List listado = new ArrayList();

public webEntryPoint() {
}

/**
* The entry point method, called automatically by loading a module
* that declares an implementing class as an entry-point
*/
public void onModuleLoad() {
tablaDatos.setText(0, 0, "Numero");
tablaDatos.setText(0, 1, "Nombre");
tablaDatos.setText(0, 2, "Fecha Creación");
tablaDatos.setText(0, 3, "Retirar");

panelAgregar.add(lblNombre);
panelAgregar.add(txtNombre);
panelAgregar.add(agregar);

panel.add(panelAgregar);
panel.add(tablaDatos);
RootPanel.get().add(panel);

txtNombre.setFocus(true);

//MANEJO DE EVENTOS
//CLICK DE BOTON
agregar.addClickHandler(new ClickHandler() {

public void onClick(ClickEvent event) {
agregar();
}
});

//TECLA ENTER
txtNombre.addKeyPressHandler(new KeyPressHandler() {

public void onKeyPress(KeyPressEvent event) {
if (event.getCharCode() == KeyCodes.KEY_ENTER) {
agregar();
}
}
});
}

private void agregar() {
final String nombre = txtNombre.getText().toUpperCase();
if (listado.contains(nombre)) {
Window.alert("Ya existe ese nombre ingresado");
return;
}
int numeroFila = tablaDatos.getRowCount();
listado.add(nombre);
tablaDatos.setText(numeroFila, 0, numeroFila+")");
tablaDatos.setText(numeroFila, 1, nombre);
tablaDatos.setText(numeroFila, 2, DateTimeFormat.getFormat("dd/mm/yyyy hh:mm:ss").format(new Date()));

Button quitar = new Button("x");
quitar.addClickHandler(new ClickHandler() {

public void onClick(ClickEvent event) {
int indice = listado.indexOf(nombre);
listado.remove(indice);
tablaDatos.removeRow(indice + 1);
}
});
tablaDatos.setWidget(numeroFila, 3, quitar);
}
}

La salida del app es: