ICEfaces: Incluir dropdown List (combos) en tablas

El día de ayer el compañero Hugo me manifestaba su inquietud de como incluir un combo (SelectOneMenu) dentro de una tabla con ICEfaces a su vez que este combo tuviera seleccionado el elemento correspondiente a cada registro de tabla para posteriormente poder modificarlo.

Pues bien me parecio buena idea desarrollar la solución al problema planteado anteriormente, pues para el ejemplo que expondre a continuación se utilizaran las siguiente herramientas:

• IDE Netbeans 6.7
• Facelets
• ICEfaces
• Apache Derby
• Java Persistence API
  

Antes de iniciar cabe aclara que siempre es fundamental utilizar Convertidores personalizados a la hora de utilizar SelectOneMenu y JavaBeans pues resuelven la vida muchisimo.

Paso Uno

Crear un proyecto de Persistencia de datos para la base de datos Sample en Derby que viene con Netbeans, pero lo principal es a clase "Dao" que es donde obtengo todos mis Entity Class:


Paso Dos

Crear nuestro proyecto Web utilizando los frameworks ICEfaces y Facelets, y crear nuestro Convertirdor para el objeto Manufacturer y posteriormente registrarlo en faces-config.xml

Registro del convertidor en faces-config.xml

Paso Tres

Ahora creamos nuestro Managed Bean que le llamaremos TemplateClient al igual que la página template-client.xhtml, nada mas para efectos de saber que corresponde a ese xhtml y será de tipo request.


Paso Cuatro

Nada mas debemos diseñar nuestro página xhtml que es la template-client.xhtml


Ahora solo debemos ejecutar la aplicación que se verá de la siguiente manera

Adjunto el proyecto para efectos de estudio.

ICEfaces: Custom Converter

Ya hace un buen rato Hugol me preguntaba de como poder obtener un objeto seleccionado a través de un componente SelectOneMenu con ICEfaces, ya que siempre le tocaba obtener el valor del id y despues volver a reconstruir el objeto y esa tarea es super tediosa, entonces alli surge la necesidad de utilizar "Converter", ¿que es esto? el mecanismo es el de conversión y está definido por el interfaz javax.faces.convert.Converter y sus múltiples implementaciones. Las conversiones aseguran que el tipo de un dato introducido en un formulario JSF sea el correcto.

Como es de costumbre en este blog desarrollare un pequeño ejemplo de como crear un Custom Converter, para un conjunto de objetos de tipo Product generado a través de JPA con Netbeans 6.7 y Apache Derby en un SelectOneMenu (dropdown List).

Lo primero es crear una clase que implemente la interfaz javax.faces.convert.Converter y desarrollar los métodos getAsString y getAsObject. El primero convierte el valor de la cadena del item seleccionado al objeto que queremos obtener, el según convierte el objeto ya convertido en cadena para colocarlo en el value de la etiqueta Option que genera ICEfaces.

Mi clase ConvertidorProducto quedó así:



Creamos nuestro managed bean de tipo request en mi caso lo llame TemplateClient al igual que el xhtml de la siguiente manera:



Luego se debe registrar nuestro convertidor en faces-config.xml de nuestro proyecto quedando así:


Luego desarrollamos el archivo, en mi caso, template-client.xhtml de la siguiente manera

Y por ultimo deployamos el proyecto que se verá así:


Adjunto el proyecto para que pueda ser estudiado.

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.

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.

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.

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.

Empecemos con IceFaces

Desde hace un montón que quería escribir sobre IceFaces, este es un framework Java encargado de los componentes web de la interfaz de usuario para JSF (Java Server Faces), actualmente el framework por defecto que se utiliza con JSF en Netbeans es WoodStock, he leido muchos comentarios que Icefaces puede ser el sustituto oficial de Woodstock ya que la característica principal de Icefaces es que es full Ajax, no es necesario configurar algo adicional ni estar tratando con varios archivos xml de configuración solamente es necesario instalar el plugin para Netbeans o Eclipse, para este ultimo haré un post aparte para trabajar con Eclipse y Icefaces, pero me centrare mas en Netbeans ya que se integra mejor con JSF y Icefaces.

Recomiendo escuchar el podcast sobre Icefaces de Javahispano.

Para muchos amigos que no disponen de una conexión a internet se puede descargar el plugin para Netbeans ya sea la versión 6.5 o 6.5.1, hay que prestar mucha atención con la versión de Icefaces que descargaremos por que sino dará problemas al abrir el proyecto en otro Netbeans que no tenga la misma versión de Icefaces las que se encuentran son 1.8 y 1.7.2.

Es recomendable registrarse en la página de Icefaces, para tener acceso a los demos y tutoriales sobre Icefaces que están muy buenos, también desarrollare algunos ejemplos sobre el uso de los componentes para que la mara pueda aclara algunas dudo sobre su utilización.