Facelets i JSF 2.0 - Creació d'un formulari - Part VI - Llenguatge EL

El llenguatge d'expressió unificat EL (Expression Language) permet als creadors de pàgines web utilitzar una senzilla sintaxi per accedir a les dades de forma dinàmica a través d'objectes JavaBeans És aquest llenguatge el que emprarem per vincular els camps html del nostre formulari amb les propietats o atributs del bean que vàrem crear en l'anterior post. JavaServer Faces utilitza el llenguatge EL per:

• Evaluar de manera diferida o immediata les expressions EL.
• Establir i/o obtenir dades.
• Invocar métodes.

Resumint, EL proporciona una manera senzilla de llegir dades d'aplicacions emmagatzemades en objectes de tipus JavaBean. També permet l'escriptura, per exemple, de dades introduïdes per l'usuari a través d'un formulari , en un objecte JavaBean. Permet també l'execució de métodes invocats per esdeveniments. Per utilitzar el llenguatge EL hem d'escriure la sintaxi entre els símbols #{ d'inici i el símbol } de tancament. Veiem-ne un exemple:

En el següent codi (de l'arxiu inici.xhtml), el text introduït per  l'usuari en un camp de text serà emmagatzemat en la propietat corresponent de l'objecte JavaBean.

<h:inputText id="nom" value="#{bean.nom}">
Fixeu-vos que l'expressió EL l'escrivim dins l'atribut value del component. El primer paràmetre fa referència al nom del JavaBean i el segon, a la propietat nom (de tipus string) també del JavaBean.
Bé, doncs això hem de fer-ho per cadascun dels camps d'entrada de text del nostre formulari. Veiem una imatge amb el codi acabat.

Cada caixa de text (nom, cognoms, etc) té l'atribut value associat amb una propietat dins l'objecte JavaBean. 

Un altre detall molt important és l'atribut action del botó d'enviament del formulari. Vàrem dir que un botó pot tenir un atribut action i/o un atribut actionListener. Aquest últim l'emprarem per invocar métodes dins el JavaBean (ho veurem en properes entrades). L'atribut action l'utilitzarem per a navegar entre pàgines. En versions anteriors a JSF 2.0 calia declarar el que s'anomena regles de navegació  per a poder moure't entre diferents pàgines. En la versió actual això ja no és necessari (que no vol dir que no s'utilitzi). Amb JSF 2.0 existeix el que s'anomena navegació ímplicita, és a dir, JSF cerca una pàgina xhtml amb exactament el mateix nom que el definit en l'atribut action del botó (en aquest cas cercaria resultat.xhtml).

El que volem fer ara és mostrar les dades introduïdes per l'usuari en una nova pàgina. Per tant, crearem un nou arxiu de tipus Facelets Template Client que hereti de la plantilla original i li donarem el nom resultat.

Dins la secció content de la nova pàgina crearem una taula de dues columnes utilitzant el component panelGrid i mostrarem les dades entrades per l'usuari en l'atribut value del component outputText emprant el llenguatge EL. Per exemple:

 <h:outputText value="#{bean.nom}">

El codi de la pàgina resultat.xhtml quedaria així:

Bé, això podria ser un exemple senzill. Ara bé, calen certs retocs per a que esdevingui  un millor formulari. Per exemple, cal comprovar que l'usuari no es deixa cap camp en blanc o bé que el text introduït tingui una mínima longitud. Però això ho veurem un altre dia.

Gràcies.

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

Bé, ja sabem què és un JavaBean (o managed bean). Sabem que és un objecte Java que conté unes propietats o atributs i uns métodes. Sabem que podem enllaçar aquests atributs amb cadascun dels camps del formulari en la pàgina web. També sabem que el managed bean pot ser creat en quatre diferents àmbits dins l'aplicació en funció de la necessitat que tinguem de mantenir les dades introduïdes en els camps del formulari.

Hem vist la teoria, anem ara a veure la pràctica. Obrim el nostre projecte.

1. Per crear un JavaBean o JSF ManagedBean  farem un clic amb el botó secundari del ratolí sobre el nom del projecte (esfera blava) i seleccionarem Nuevo. Escullim JSF Managed Bean.
2. El següent quadre de diàleg ens demana el nom i la ubicació de la classe Bean. Introduirem un nom (per exemple, formBean) i l'ubicarem dins d'un paquet (és altament recomanable ubicar tots els arxius o classes de l'aplicació en diferents paquets segons la seva funció) que li direm web.beans.
3. En la part inferior del quadre de diàleg podem configurar un nom pel bean per referir-nos a ell des del codi de la plana web. Podem utilitzar el mateix nom que hem definit en el pas anterior o posar-ne un altre. Per veure la diferència li donarem el nom de bean.
4. A continuació del quadre de text del nom tenim l'àmbit o Scope del bean. Per aquest exemple escullirem de la llista desplegable l'opció Request.
5. Fem clic a Terminar.
6. S'ha creat la classe formBean de tipus managed bean ubicada dins el paquet web.beans i dins la carpeta Sources Packages del nostre projecte. S'obre la pestanya de la classe bean que acabem de crear. Fixem-nos en el codi : tenim un constructor sense paràmetres, un parell d'imports de llibreries, i el que s'anomena annotations, dues línees de codi precedides pel símbol @. En versions anteriors de JSF (versió 1.2) calia definir els beans en un arxiu de configuració anomenat faces-config.xml. En la versió 2.0 això ja no és necessari ja que s'utilitzen les anotacions. La primera anotació, @ManagedBean(name="bean") és la que defineix la classe java com a un objecte JavaBean i li atorga un nom (el que hem definit en el pas 3). L'altre anotació defineix l'àmbit d'actuació del bean, @RequestScoped. Si vulguessim canviar-lo per un àmbit de sessió, només hauriem de borrar aquesta línea i escriure @SessionScoped.
7. Bé, ara hem de crear els atributs del bean. En el nostre formulari tenim un camp nom, cognoms, telèfon, sexe i país. Tots aquests camps emmagatzemaran valors de tipus alfanúmeric (fins i tot el camp telèfon), per tant els atributs del bean han de ser de tipus string.
8. És molt senzill crear els atributs del bean. Escriurem just a sota del constructor: private String nom;  àmbit de l'atribut, tipus i nom. Farem el mateix per la resta de camps.
9. Un cop tinguem definits tots els atributs, cal escriure els seus métodes accesors (get i set). Per fer-ho apretem la tecla Alt + Insert i cliquem a l'opció Getter y Setter. Seleccionem els atributs i fem clic a Generar. Això ens crea automàticament tots els métodes get i set per a cada atribut. Recordem que per poder llegir i modificar els valors del camps del formulari en el bean és imprescindible que s'hagin definit aquests métodes.
10. Ja gairebé tenim el bean acabat. Ara cal enllaçar els camps del formulari amb els atributs del JavaBean. Per fer-ho necessitem conèixer el llenguatge JSF EL (Expression Language). Aprendem una mica d'aquest llenguatge en una propera entrada. Per avui deixem-ho aquí.

Gràcies.