Crosstab con ICEfaces

Una de las cosas que se hace bastante uso en las aplicaciones de gestión es la elaboración de tablas para presentar datos, y entre muchos casos que se me han presentado a veces es necesario generar tablas en la cual tanto las filas como las columnas van creciendo a esta situación se le denomina Crosstab en inglés.

Últimamente en mi trabajo los recientes proyectos los he estado realizando mediante ICEfaces que me ha reducido considerablemente el tiempo desarrollo gracias a su implementación de Ajax y por el lado de los usuarios que obtienen aplicaciones mucho mas parecidas como si fueran de escritorio como están acostumbrados.

Antes que comenzar a desarrollar el proyecto necesitamos tener una base de datos, para este caso utilizare derby que ya esta embebido con Netbeans, así no tengo que obligar a mi lectores instalar ya sea MySQL, PostgreSQL u Oracle.

Mi base de datos le llame crosstab y la estructura de las tablas es la siguiente:

create table producto (
id int not null primary key generated always as identity,
descripcion varchar(20) not null
)

create table periodo (
id int not null primary key generated always as identity,
inicio date not null,
fin date not null
)

create table precio (
id int not null primary key generated always as identity,
valor double not null,
fk_producto int not null,
fk_periodo int not null,
constraint precio_producto foreign key(fk_producto) references producto(id),
constraint precio_periodo foreign key(fk_periodo) references periodo(id)
)


Nota: Es necesario agregarle registros, la aplicación que se desarrollara no tendrá ninguna validación en cuanto si en la tabla se encuentran datos nulos en la tabla Precio. Adjuntare el código fuente del proyecto con el respectivo script SQL de la estructura de la base de datos que puede ser descargado al final de este post.

Pues bien ahora es el momento de echarle mano al desarrollo de la aplicación, en mi caso me gusta crear mis Entity Class como un proyecto de librería de Java para tener separada la lógica del negocio con la interfaz web mi proyecto se llamara JavaCrosstab.

La forma para generar Entity Class con JPA ya fue tratado a anteriormente, así que en el proyecto se agregara nada mas una Clase llamada Control.

Nota: Hay que recordar que habrá que agregar posteriormente las librerías TopLink y derbyClient al Tomcat, por que el proyecto web lo hare con este servidor.

Ahora el ejemplo que desarrollare estará hecho con Facelets, no entrare en detalles como crear un proyecto Facelets ya que esto ya lo he hecho, pues nada mas me centrare en la forma de crear la tabla mediante ICEfaces y JPA.

Pues procedemos a crear un proyecto Web con Netbeans con los frameworks ICEfaces y Facelets llamado WebCrosstab, deberemos agregar el proyecto donde se encuentra nuestros Entity Class creado anteriormente llamado JavaCrosstab luego crear un Managed Bean llamado ConversorDolares, a este Bean deberá tener la siguiente estructura:

Este Managed Bean hereda de la clase "AbstractPageBean" para poder acceder a los métodos "getValue" y obtener el valor de la columna y fila actual cuando se este generando la tabla en la pagina template-client.xhtml.

Ahora editaremos la página template-client.xhtml con el siguiente contenido:


Hecho esto nada mas bastara iniciar la base de datos crosstab de derby en Netbeans, realizar deploy al proyecto WebCrosstab y acceder a la ruta http://localhost:8084/WebCrosstab.


Adjunto el código fuente del proyecto WebCrosstab y la estructura de la base de datos.

Comentarios (6)

Uso de Facelets y ICEfaces en Netbeans 6.5

Hace unos días una amiga me mencionaba que le hicieron de la comparación entre Struts y JSF algo muy curioso que me contó fue que le dijeron que Struts es mucho mas rápido que JSF, que tan cierto sea esto no me consta, ojala alguien pueda confirmarlo, pero de todas formas como informático siempre tengo la misión de buscar la eficiencia en mis aplicaciones aún cuando la tecnología que estoy usando de por si sea de las más veloces, así que por esa razón he decidido utilizar Facelets en mis proyectos del trabajo, en lugar de JSP convencionales.

¿Pero en realidad que es Facelets?, para entenderlo enumerare sus características:
  • Es un framework para trabajar con plantillas.
  • Creación de componentes personalizados.
  • Utilización de etiquetas lógicas.
¿Pero que diferencia Facelets de los JSP?
  • JSP son etiquetas para plantillas que al compilarse generan servlets.
  • Facelets es un lenguaje de plantillas para construir un árbol de componentes, no un servlet.
  • Por otra parte Facelet fue creado para cumplir con el ciclo de vida de JSF, al contrario de los JSP que el ciclo de vida de los servlet producidos es independiente al de JSF.
Como aquí no solo se trata de solamente conocer la tecnología al estilo del Sr Byte (no se vayan a molestar compas, recuerden que soy fiel lector suyo), así que como es costumbre en este su espacio curvilíneo desarrollare un ejemplo practico de como utilizar Facelets, ICEfaces y Netbeans 6.5 de forma muy simple.

Lo primero es tener instalado el plugin de ICEfaces, luego debemos instalar el plugin de Facelets, esto es muy sencillo, se hace mediante el menú "Tools" de Netbeans, la ruta es Tools -> Plugins, en la pantalla de plugins nos posicionamos en la pestaña de "Available plugins" buscamos el que se llama Facelets Support, lo marcamos y procedemos a instalarlo.

Ya teniendo instalado los respectivos plugins, procedemos a crear un proyecto Web, en este ejemplo le pondré de nombre EjemploFacelets y ocupare como servidor Tomcat 6.0.18 que ya viene integrado con Netbeans.


Al dar siguiente seleccionaremos los frameworks ICEfaces y Facelets, notamos que al posicionarnos sobre el framework Facelets, en la parte de abajo aparece las propiedades de configuración del framework, para este debemos ubicarnos en la pestaña "Libraries" y en la propiedad "Register Libraries" seleccionamos la opción Facelets ICEfaces Run-Time 1.7.2 y damos clic en finalizar.


Luego de creado veremos que se nos abrirá un jsp llamado welcomeJSF.jsp ese no lo utilizaremos así que yo siempre procedo a borrarlo, la estructura del proyecto quedará de la siguiente manera:

Vemos que solamente hay un jsp, ese lo editaremos como página de inicio en web.xml ya que este redireccionara a nuestra pagina template-client, ahora lo curioso y nuevo aquí es que aparecen dos archivos xhtml, que apartir de ahora allí trabajaremos nuestras etiquetas y estos por así decirlo se traducirán a jps.

Procedemos a abrir el archivo forward.jsp y lo editamos para que en la etiqueta donde redirecciona la página destino nada mas cambiamos la extensión de la página a donde se redireccionara de jsf a jspx.

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<jsp:forward page="template-client.jspx"/>

Ahora abrimos el archivo web.xml en vista XML y en el tag de welcome-file-list debe quedar así:


<welcome-file-list>
<welcome-file>forward.jsp</welcome-file>
</welcome-file-list>


Lo guardamos y podemos hacerle deploy al proyecto y accedemos mediante la ruta http://localhost:8084/EjemploFacelets aparecera el siguiente contenido:

Hasta el momento no se ha utilizado nada de ICEfaces haremos un calculo sencillo de colones salvadoreños a dolares estadounidenses, y para ello será necesario crear un ManagedBean de nombre ConversorDolares y tipo Request, para ello hacemos clic en el botón New File de la barra de herramientas de Netbeans, en la lista de Categorías de la nueva ventana seleccionamos "JavaServer Faces" y en la parte derecha "JSF Managed Bean" y damos clic en el botón siguiente.

Ahora le colocaremos el nombre que habíamos mencionado antes al Managed Bean y que sea de tipo request, en el campo package escribimos el paquete donde estará alojado nuestro managed bean en mi caso coloque org.dani.ejemplo.facelets


Hecho esto hacemos clic en finalizar, abrimos nuestro Managed Bean y creamos la siguiente propiedad y método.

Ahora editamos el código del archivo template-client.xhtml y se verá así


Realizamos el respectivo deploy accedemos a la misma dirección anteriormente mencionada y veremos lo siguiente:

Comparto el proyecto EjemploFacelets para que puedan estudiarlo mas detenidamente.

Nota: No copie el texto del código ya que no se mira muy bien en blogger y poder ver las tabulaciones es de mucha ayuda para entender los ejemplos.

Comentarios (6)

Hasta la victoria siempre

Dejando de lado ICEFaces,programación, trabajo y más mierdas informáticas, hoy es momento de dedicarle al pueblo salvadoreño la fiesta de triunfo sobre el combinado mexicano, después de haber sido ofendidos por un comentarista deportivo en la cual una cadena de televisión que se considero seria por mucho tiempo cree que la mejor manera de subir niveles de audiencia es que crea sensacionalismo y enemistad esta dejando mucho que desear.

Nuestros muchachos de clubes nacionales (FAS, Nejapa, Vista Hermosa, Alianza, Firpo, etc...) enfrentaron honorablemente a "personajes de la farándula" en lo cual la humildad, el respeto y la disciplina tuvo justicia.

Felicito a todos mis compatriotas en todos los rincones del mundo y saludo a la hermana república de México por esta gran fiesta deportiva y que no dejen que personas como el "pseudo comentarista" de una mala imagen de ustedes.

Ahora que ya escribí me iré de regreso con los compas a seguir poniéndome una súper talega en celebración.

Comentarios (0)

Agrupando columnas con Icefaces

Se que bien de repente me estoy adelantando a algunos temas con respecto a ICEfaces y mas aún en lo que concierne a tablas, pero es que para ver esos puntos es bueno remitirse al tutorial de componentes oficial de Icefaces y me decidí a escribir esta entrada ya que no me dejaba muy claro la cuestión de agrupar columnas, en este post no se tocara nada de funcionalidad ajax, pues por que la forma de agrupar columnas es un poco diferente a la de woodstock y me parecio importante explicarlo.

Primeramente hay que crear un proyecto Web a través de Netbeans, claro que hay que tener instalado el plugin de Icefaces, a mi me gusta utilizar como contenedor para mis aplicaciones Tomcat lo mas que me sea posible y selecciono el framework "Visal Web ICEfaces". No explicare la creación del proyecto porque eso es muy intuitivo.

Lo primero que haremos en crear nuestra lista de java beans que seran los que se desplegaran en la tabla. Para no hacer muy largo el tutorial explicando como pegarse a la base de datos y demás bla, bla simulare que mis java beans los utilizare como objetos de persistencia obtenidos a través de JPA, asi que crearemos la siguiente clase:

"Hacer clic en la imagen para ver mas grande"

Hasta aqui ya tenemos definida nuestra estructura y un metodo estatico para obtener un arreglo de "Personas", pero falta definir los getter y setter para los campos de la clase para que puedan ser accedidos por los componentes de ICEfaces, a través de Netbeans es muy sencillo hacer esto en lugar de hacerlo a pie:

Damos clic derecho sobre cualquier parte de la clase "Persona" y damos clic y vamos a la opción "Insert code".


En la ventana "Generate" seleccionamos "Getter and Setter..."


Marcamos todas las propiedades y automáticamente generara nuestros getter y setter en nuestra clase.

Ahora simplemente en nuestra página jsp necesitamos agregar una propiedad privada de tipo arreglo de personas e inicializarla por medio del método estatico de la clase Persona.

private Persona[] personas=Persona.getPersonas();

Luego en la clase del jsp debemos crear el getter y setter del campo privado al igual como lo hicimos en la clase Persona, en mi caso mi jsp se llama Page1.jsp asi que en el java code de esa página generamos el getter y setter.

Ahora la parte mas importante es el código jsp de nuestra página, si bien Netbeans provee de un diseñador visual no esta demás entender los tags de ICEfaces ya que se pueden crear cosas muy interesantes por la flexibilidad de estos componentes.

Adjunto el código jsp de la página con su respectiva explicación y sus bindings hacia las propiedades de Page1, este código puede ser colocado ya sea en un PanelGrido o en una simple tabla HTML dentro del código jsp.

"Hacer clic en la imagen para ver mas grande"

Luego de esto corremos nuestra aplicación para ver su resultado, la ruta de la aplicación sería http://localhost:8084/Tablas/Page1.jspx

"Hacer clic en la imagen para ver mas grande"

Comparto el proyecto elaborado en Netbeans para que puedan probarlo:
Tablas.tar.gz

Bueno compas despues de haber realizado este post me dispongo a abastacerme de bebidas embriagantes para ver el juego El Salvador vs México, que primero Dios logremos celebrar en la noche la victoria de nuestro combinado nacional y cerrarle el hocico al bocón de David Faitelson.

Comentarios (0)