Facelets i JSF 2.0 - Creació d'un formulari - Part I

Seguint el fil de l'última entrada en la qual parlavem de la utilització del framework Facelets amb la tecnologia JavaServer Faces, avui veurem una mica més les característiques de JSF 2.0 i Facelets.

Utilitzarem l'ide Netbeans en la versió 6.8 que incorpora el framework Facelets per defecte.

Bé, iniciarem l'ide i crearem un nou projecte:

1. Archivo - Proyecto nuevo o bé utilitzant el botó.
2. Escullim Java Web i Web application. 
3. Li donem un nom al projecte, per exemple, formulari.
4. Deixem la configuració del servidor tal i com està. 
5. És aquí on hem de seleccionar un framework o marc de treball. Seleccionarem la casella JavaServer Faces. Al fer-ho ens apareixem dues pestanyes en la part inferior del quadre de dialeg. Hem d'assegurar-nos que la llibreria per defecte és JSF 2.0. En la pestanya Configuration veiem que el llenguatge preferit serà Facelets i el patró de la url /faces/*
6. Fem clic a Terminar.
7. Ja tenim el projecte creat. El que hem de fer tot seguit és importar una plantilla de Facelets que serà la que utilitzarem per configurar l'aspecte visual de la pàgina web. Continuem ..
8. Fem clic a Archivo - Archivo nuevo.
9. En Categorias cliquem JavaServer Faces i en Tipos de archivo (a la dreta) cliquem a Facelets Template. Molt important assegurar-se que el nou arxiu es crearà dins el projecte formulari (part superior del quadre de dialeg, Proyecto). Fem clic a siguiente.
10. El quadre de dialeg que ens apareix ens permet triar una plantilla i donar-li un nom. Fixeu-vos que tenim vuit tipus diferents de plantilla. Escullim la que més ens agradi, li donem un nom i cliquem el botó de Terminar.

Bé, ja tenim la plantilla, ara hem de crear un nou arxiu que hereti la disposició visual d'aquesta. Per fer-ho simplement hem de repetir els passos anteriors 8 i 9 però en el pas 9 hem de seleccionar el tipus d'arxiu Facelets Template Client. El següent quadre de dialeg ens permet donar-li un nom a l'arxiu i ens alerta de que hem de seleccionar la plantilla de la qual volem heretar. 

Doncs, fem un clic a Browse en l'apartat del Template i seleccionem la plantilla que hem creat anteriorment (plantilla.xhtml). Li posem un nom a l'arxiu i cliquem a Terminar.

Si executessim ara el projecte veuriem que la plantilla que havíem escullit no s'està aplicant. Per què? Doncs molt senzill, hem de especificar quin serà l'arxiu o plana web inicial. Com ho fem?.

L'estructura bàsica d'un projecte Java Web és de la següent manera:

Tenim sis carpetes principals. De moment ens fixarem en la carpeta Web Pages. Aquesta carpeta alhora està formada per dues carpetes més: WEB-INF i resources. Dins la carpeta resources, com el seu nom indica i podem desar els recursos que emprarem en el nostre projecte (imatges, arxius css, etc). A continuació de la carpeta resources ens trobem amb els arxius o planes web del nostre projecte. 

Ara dirigirem la mirada cap a la carpeta WEB-INF i més concretament cap a l'arxiu web.xml. Aquest arxiu és fonamental. És l'arxiu de configuració de l'aplicació.Farem doble clic per obrir-lo. 

Per ara, només ens fixarem en la pestanya Pages on hi trobarem un apartat per a establir la pàgina de benvinguda o Welcome Files. Desplegarem aquest apartat i en lloc de faces/index.xhtml i posarem faces/nomdelaplantillaclient.xhtml, és a dir, en el meu cas, faces/inici.xhtml. És molt important mantenir el context o patró de la url (faces/). Guardem els canvis i executem el projecte. El resultat en el nostre navegador hauria de ser com la següent imatge.

En el següent post començarem a dissenyar el formulari que ubicarem en la part central de la plana (content). 

Posarem una capçalera (top) i un peu de pàgina (bottom).

Gràcies.

Facelets

Facelets és un framework que ens permet utilitzar plantilles en pàgines creades amb la tecnologia JSF.

Aquest framework ens atorga la possibilitat de crear una estructura de pàgina bàsica o plantilla que pot ser utilitzada per tantes pàgines com desitgem en el nostre lloc web. És a dir, tenim un template original i una o unes template clients que hereten la seva estructura i composició. El template original crea una estructura de pàgina i defineix unes seccions. El template client utilitza aquesta template original i pot reemplazar el contingut de les seccions.

Un exemple de plantilla bàsica seria el següent:

Aquesta plantilla està dividida en tres parts: una part superior o top, un contingut central o content i una part inferior o bottom. Veiem una nova etiqueta anomenada "ui:insert". Aquesta etiqueta forma part de la llibreria d'etiquetes de Facelets que ha de ser importada per a poguer-la utilitzar (veure la quarta línea del codi). Aquesta etiqueta "ui:insert" defineix les zones que podràn ser reemplaçades en les pàgines 'clients' que heretin aquesta plantilla. A continuació veurem un exemple d'una pàgina client d'aquesta plantilla:

En aquest codi, el de la pàgina client, veiem dues noves etiquetes o tags: "ui:composition" i "ui:define".
La primera, composition, indica quina és la plantilla de la qual heretem. La segona, define, indica les seccions de la plantilla principal que utilitzarem. Fixem-nos que l'etiqueta define utilitza el nom de la secció definit en la plantilla original. El nom de la propietat name ha de ser el mateix que el de la propietat insert de la plantilla. Si no és el mateix, el framework busca una etiqueta insert amb aquest nom, si no la troba, es visualitzarà el contingut definit per defecte en la plantilla original. És a dir, si el que volem és reemplazar el contingut d'una secció definida en la plantilla principal, hem de utilitzar l'etiqueta define amb el nom d'aquesta secció. Si no l'utilitzem, es mostrarà el contingut predefinit en la plantilla. Això és força útil per exemple si volem que una secció de la plantilla es repeteixi en totes les pàgines del lloc. Simplement omitiriem en les pàgines clients l'etiqueta define amb el nom d'aquesta secció.

En un pròxim post veurem com crear una plantilla utilitzant l'Ide de Netbeans.

Gràcies.

Hola món en JavaServer Faces

Crearem una senzilla aplicació típica d'Hola món utilitzant la tecnologia JavaServer Faces o JSF. Per fer-ho utilitzaré l'ide NetBeans en la versió 6.8. Per descarregar aquest ide podeu fer clic aquí.

Un cop instal.lat l'ide l'executarem i farem un clic en Archivo i Proyecto Nuevo. De les categoríes que ens apareixen seleccionarem Java Web i en proyectos, a la part dreta, Web Application.

A continuació li donarem un nom al nostre projecte, per exemple, projecteweb1 i farem clic a siguiente.

En la configuració del servidor ho deixarem tot tal i com està; en el meu cas tinc com a servidor GlassFish en la versió 3 i Java EE Web en la versió 6. Farem un clic a siguiente. En l'últim pas hem d'escullir el framework que utilitzarem per a la creació de l'aplicació web. Marquem JavaServer Faces, deixem la configuració que ens dona per defecte  i fem un clic a terminar. Aquí teniu una captura de pantalla a mode d'exemple.

Ara ja som a la part on hem d'introduir codi per a dissenyar la interfície web. Simplement el que farem ara serà incloure una etiqueta h2 entre les etiquetes d'obertura i tancament del body.

Fixeu-vos en la línea 4. Aquesta línea ens permetrà la inclusió d'etiquetes comuns d'HTML en la nostra aplicació JSF, com per exemple les dues que ja tenim h:head i h:body. Per incloure etiquetes HTML només hem d'escriure h: precedit del signe més petit (<) i se'ns desplegarà una petita finestra amb tots els tags disponibles.
Ja podem fer clic al botó de Play sota la barra de menú en la part superior del ide i veure el resultat en el nostre navegador.

JavaServer Faces (JSF)

JavaServer Faces és un framework i tecnologia per a aplicacions web que utilitza el llenguatge de programació JAVA. L'ús d'aquesta tecnologia simplifica molt el disseny i construcció d'interfícies d'usuari en aplicacions JAVA EE. Actualment està en la versió 2.0

JSF fa ús del patró MVC (Model Vista Controlador) separant així la capa de presentació de la capa de dades i de la capa de lógica de control.

A grans trets, els objectius de desenvolupament de JSF són els següents:

• Definir un conjunt simple de clases de JAVA vinculades o enllaçades als components de la interfície de l'usuari. Aquestes classes controlarant el cicle de vida de la interfície, controlant l'estat d'un component així com els esdeveniments d'entrada

• Proporcionar un conjunt de components per a la construcció de la interfície d'usuari a més a més dels components comuns d' HTML.

• Proporcionar un model de JavaBeans per enviar peticions o atendre als esdeveniments des de la interfície d'usuari fins al servidor d'aplicacions.

• Construcció d'APIs pròpies per a la validació de components de la interfície d'usuari ja sigui del costat del servidor com del client.

• Internacionalització i localització de la interfície de l'usuari.

Bé, més endavant explicaré com podem utilitzar NetBeans en la versió 6.8 per a crear d'una manera senzilla aplicacions JavaServer Faces. Però això serà en properes entrades.