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.
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.
