jueves, 2 de septiembre de 2010

Eclipse Helios & Apache Click

Para este ejemplo estoy usando Ubuntu 10.04, Eclipse Helios, Tomcat V6 y Apache Click versió 2.2.0

Primeramente vamos a descargar click-2.2.0.zip de http://click.apache.org/docs/downloads.html



Descomprimimos el archivo en algun lugar directorio de nuestro computador.

Hecho esto abrimos Eclipse y creamos un nuevo Dynamic Web Project, para mi caso lo voy a llamar ProyectoClick.

Ahora, voy a configurar el proyecto para que tenga soporte para Click. Para esto doy click con el boton derecho del mouse sobre el proyecto y selecciono la opción Import y luego nuevamente la opción Import.
Luego selecciono General/File System y doy click en Next.

Ahi doy click en Browse y busco el directorio en el cual se extrajo Apache Click 2.2.0 y selecciono el directorio dist.
Luego marco click-2.2.0.jar y click-extras-2.2.0.jar.
En Into folder doy click sobre browse y elijo la ruta ProyectoClick/WebContent/WEB-INF/lib, ya que estas librerias deberán guardarse en el directorio lib de WEB-INF.



Finalmente doy click en Finish

Con esto tengo listo el ambiente para usar click en Eclipse.

Nota: Tenemos que tener claro un concepto en Click y es la correspondencia entre las clases y las páginas.Por ejemplo una pagina llamada pagina1.htm, tiene correspondecia con la clase Pagina1Page. una página llamada informacion, tiene correspondencia con la clase InformacionPage.

El primer paso para poder usar Click es indicarle al aplicativo Web que tiene que usar las clases de Click, para esto abro web.xml y agrego las siguientes definiciones del Servlet de Click, con lo que web.xml, nos quedará como:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
<display-name>ProyectoClick</display-name>
<servlet>
<servlet-name>ClickServlet</servlet-name>
<servlet-class>org.apache.click.ClickServlet</servlet-class>
<load-on-startup>0</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>ClickServlet</servlet-name>
<url-pattern>*.htm</url-pattern>
</servlet-mapping>

<welcome-file-list>
<welcome-file>inicio.htm</welcome-file>
</welcome-file-list>
</web-app>


Realizado este cambio tenemos que crear click.xml en el directorio WEB-INF. En este archivo colocamos diferente información de configuración para Click, por ejemplo el paquete en el cual se encuentran las clases que corresponderán con las páginas. En este ejemplo colocaremos las clases en el paquete com.ejemplo.paginas Con lo cual click.xml queda de la siguiente manera:
<?xml version="1.0" encoding="UTF-8"?>
<click-app>
<pages package="com.ejemplo.paginas"/>
</click-app>


El siguiente paso es crear una clase. Para este ejemplo vamos a crear una clase llamada InicioPage en el paquete com.ejemplo.paginas con el siguiente código:
package com.ejemplo.paginas;
import org.apache.click.Page;
public class InicioPage extends Page {
protected String mensaje="Esta es una prueba de Apache Click";
public InicioPage() {
addModel("message", mensaje);
}
}

Luego de esto tenemos que crear una página llamada inicio.htm en WebContent. Esta página tiene el siguiente código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Apache Click</title>
</head>
<body>
<p>$mensaje</p>
</body>
</html>

Hecho esto, ejecutamos nuestro proyeco y tenemos la siguiente salida:



Ahora compliquemos un poco más la cosas. Vamos a crear un formulario, para esto vamos a crear:
informacion.htm junto con InformacionPage.java
mostrarInformacion.html junto con MostrarInformacionPage.java


InformacionPage.java

package com.ejemplo.paginas;

import org.apache.click.Page;
import org.apache.click.control.Form;
import org.apache.click.control.Submit;
import org.apache.click.control.TextField;


public class InformacionPage extends Page{
public Form formulario = new Form();
private TextField txtNombre;
private TextField txtTelefono;
private TextField txtEmail;

public InformacionPage() {
formulario.setLabelsPosition(Form.POSITION_TOP);
txtNombre = new TextField("Cual es tu nombre?:");
txtTelefono=new TextField("Cual es tu telefono?:");
txtEmail=new TextField("Cual es tu email?:");
formulario.add(txtNombre);
formulario.add(txtTelefono);
formulario.add(txtEmail);
formulario.add(new Submit("Submit", this, "funcionSubmit"));
}

public boolean funcionSubmit(){
MostrarInformacionPage pagina2 = (MostrarInformacionPage)getContext().createPage("/mostrarInformacion.htm");
pagina2.setNombre(txtNombre.getValue());
pagina2.setTelefono(txtTelefono.getValue());
pagina2.setEmail(txtEmail.getValue());
setForward(pagina2);
return false;
}
}





MostrarInformacionPage.java
package com.ejemplo.paginas;

import org.apache.click.Page;

public class MostrarInformacionPage extends Page {
private String nombre;
private String telefono;
private String email;

public void setNombre(String nombre) {
this.nombre = nombre;
}
public void setTelefono(String telefono) {
this.telefono = telefono;
}
public void setEmail(String email) {
this.email = email;
}
@Override
public void onInit()
{
super.onInit();
if (nombre != null && telefono!=null && email!=null)
{
addModel("nombre",nombre);
addModel("telefono",telefono);
addModel("email",email);
}
}
}



Informacion.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Apache Click</title>
</head>
<body>
$formulario
</body>
</html>


mostrarInformacion.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Apache Click</title>
</head>
<body>
<b></>Tu nombre es:</b>$nombre<br/>
<b></>Tu telefono es:</b>$telefono<br/>
<b></>Tu email es:</b>$email<br/>
</body>
</html>

1 comentario:

  1. Muy buen post y muy util !!

    Dejo más info en :

    http://emanuelpeg.blogspot.com/2010/09/apache-click-y-dobleclick.html

    ResponderEliminar