viernes, 23 de abril de 2010

Tutorial GWT : Creacion de una aplicacion utilizando GAE/J 1era Parte

Desarrollo con GWT sobre GAE/J Este es un pequeño tutorial donde muestra como desarrollar una aplicación utilizando el GWT (Google Web Toolkit) para ser alojado en la Google AppEngine. Este es el diagrama de Clases de nuestro dominio.
Este es el diagrama que denominaremos GWT, donde se muestra como será la organización de nuestros paquetes, clases e interfaces. Por ahora para administrar los usuarios así como su autenticación en la aplicación.
Primero configuraremos el eclipse. Instalaremos el Plugin para eclipse así como el SDK del App Engine. Para eso vamos a al Mena Help -> Install New Software. Piquen en el Boton Add y en el cuadro que te aparece digita la dirección http://dl.google.com/eclipse/plugin/3.5 esto es en mi caso xq estoy usando la versión Galileo de Eclipse.
Bueno ahora ya tenemos configurado nuestro entorno de trabajo. Ahora pasaremos a crear nuestro proyecto.
Luego de esto tendremos un proyecto en eclipse que se vería de esta manera:
Ahora vamos a crear un paquete llamado login dentro del paquete client, que sera donde ubicaremos nuestra interfase para el formulario de autenticacion. Con lo que nuestro proyecto en el IDE debiera verse asi:
Ahora crearemos un archivo llamado LoginGui.java, que sera donde definiremos nuestra GUI. El Codigo se encuentra a continuacion y esta comentado para su facil compresion.
package gob.pe.dnj.client.login;

import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.DecoratorPanel;
import com.google.gwt.user.client.ui.Grid;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.PasswordTextBox;
import com.google.gwt.user.client.ui.TextBox;

/**
* 
* @author dair
* @version 0.0.1
* 
* Al heredar de Composite expresamos que la clase sera un widget o componente personalizado
* Dibuja la interfase para el acceso a la aplicacion
*  
*/
public class LoginGui extends Composite{

public LoginGui(){

/**
* Creamos los input text
**/

final TextBox txtUser=new TextBox();
final PasswordTextBox txtPwd=new PasswordTextBox();

/**
* Crearemos un Label donde podremos mostrar los mensajes
* de error que pueda arrojar el evento autenticar
**/

final Label statusMsg=new Label();

/**
* vamos a darle algo de estilo
* esto lo hacemos agrengadole un nombre de estilo
* que no es mas que agregarle una clase
* algo como hacer un class="miEstilo"
**/

statusMsg.addStyleName("inline_message");

/**
* lo vamos a hacer invisible hasta que lo necesitemos
**/

statusMsg.setVisible(false);

/**
* Creamos una grilla donde colocarremos los elementos
* Grid layout=new Grid(numero_filas,numero_columnas);   * 
**/

Grid layout=new Grid(4,2);

/**
* Colocamos las etiquetas de Usuario y Password
* setWidget(fila, columna, widget)
* los valores fila y columna empiezan en 0
**/

layout.setWidget(0, 0, new Label("Usuario"));
layout.setWidget(1, 0, new Label("Password"));

/**
* Colocamos los input
* setWidget(fila, componente, widget)
**/  

layout.setWidget(0, 1, txtUser);    
layout.setWidget(1, 1, txtPwd);

/**
* Creamos y agregamos los botones
* para crear un boton por lo general se utiliza
* Button boton=new Button();
* en este caso hemos creado directamente el Button sin asignarlo
* a alguna variable y le hemos agregado el manejador del evento click
* esto es posible porque existe un constructor del tipo
* new Button(texto_del_boton, ManejadordeEventoClick)
**/

layout.setWidget(2, 0, new Button("Aceptar", new ClickHandler() {

/**
* (non-Javadoc)
* @see com.google.gwt.event.dom.client.ClickHandler#onClick(com.google.gwt.event.dom.client.ClickEvent)
* al crear un nuevo MaenjadordeEventoClick debemos implementar
* el metodo onClick
**/

@Override
public void onClick(ClickEvent event) {

/**
* aqui haremos llamada al funcion autenticar
* y le pasaremos como parametros los valores de los input
**/    

 autenticar(txtUser.getValue(), txtPwd.getValue());
 }
}));

layout.setWidget(2, 1, new Button("Cancelar", new ClickHandler() {

 @Override
 public void onClick(ClickEvent event) {
  txtUser.setText("");
  txtPwd.setText("");    
 }
}));

/**
* agregamos el statusMsg creado arriba
**/

layout.setWidget(3, 0,statusMsg);

/**
* Creamos un Widget denominado DecoratedPanel
* que no es mas que un panel con los bordes coloreados
* y las esquinas redondeadas
* Claro que esto se puede hacer desde CSS3 pero aun no hay 
* un metodo estandar para todos los navegadores
**/

DecoratorPanel dp=new DecoratorPanel();
dp.add(layout);

/**
* es importante poner esta sentencia que indica que se inicialice todos los componentes
* como argumento pasaremos el contenedor de todos los componentes
* para nuestro caso sera "layout"
**/  

 initWidget(dp);

}

 protected void autenticar(String user, String pwd) {

  /**
  * llamamos a la funcion autenticar del lado del servidor
  * utilizando el servicio LoginService 
  **/

               loginService.validate(user, pwd, new AsyncCallback() {
   
   @Override
   public void onSuccess(Boolean result) {
    dnjperuGui.setModule(1);
   }
   
   @Override
   public void onFailure(Throwable caught) {
    statusMsg.setText(caught.getMessage());    
   }
       
  });
  
  statusMsg.setText("validando ..." + Resources.IMAGES.loadinfo().getHTML()); }

}
Hasta ahora solo hemos creado el widget mas aun no puede ser visto, para eso necesitamos agregarlo a nuestra clase EntryPoint.De forma simple diremos que una clase EntryPoint es una clase que define un punto de entrada. He aqui el codigo para eso:
import gob.pe.dnj.client.login.LoginGui;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

/**
* Entry point classes define onModuleLoad()
**/
public class Dnjperu implements EntryPoint {

@Override
public void onModuleLoad() {
/*
* Cargaremos la interfase Login
* para esto instanciamos un objeto de la clase LoginGui
* y la agregamos al RootPanel
*/
  LoginGui loginGui=new LoginGui();

  RootPanel.get("MainPanel").add(loginGui);
 }

}
Este código va en en el archivo Dnjperu.java, el código esta auto explicado. Hasta ahora hemos hecho la parte del codigo pero nos falta una cosa mas para ejecutar la aplicacion. Esto es que en tus archivos .gwt.xml que esta ubicado en el paquete base de tu aplicacion, en mi caso hay un archivo Dnjperu.gwt.xml en gob.pe.dnj, al editar ese archivo debiera haber una linea como la siguiente:
  
De manera similar hay que ubicar que exista esta linea en el archivo web.xml ubicado en la carpeta war del proyecto

  
  
    Dnjperu.html
  

Por ultimo si queremos darle algo de estilo a la aplicacion entonces debemos primero editar nuestro archivo Dnjperu.html, el mio luce asi:


Administracion de Proyectos de la DNJ

He obviado el codigo autogenerado por GWT. Por ultimo para los estilos esta es mi magina de estilos, en este caso la creada por defecto llamada Dnjperu.css
#loginForm, .loginForm{
 display: block;
 width: 300px;
 margin: 0 auto 0 auto;
}

#cabecera{
 background-color:#323232;
 height:3em;
 margin:0; padding:1em;
}

#MainPanel{
 background-color:#FFFFFF;
}

También he obviado algunas lineas autogeneradas. Bueno, por ultimo compilamos nuestra aplicacion la compilamos con . Y luego le damos Ctrl + F11 o la opcion Run. Esto iniciara el Servidor embebido, en un siguiente post explicaremos un poco mas de la configuracion de esto. Al ejecutar la aplicacion aparecera en el IDE algo similar a esto:
 Tal como se ve en la figura hay que copiar la URL y pegarla en la barra de direccion del navegador, por ahora solo he visto plugins para Firefox y Chrome (no he probado sobre otros navegadores).
Y listo nuestra aplicacion se vera asi

Esta es la primera parte del tutorial luego le agregaremos los eventos y la llamada al servidor.
 
Powered by Blogger