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:- Archivo - Proyecto nuevo o bé utilitzant el botó.
- Escullim Java Web i Web application.
- Li donem un nom al projecte, per exemple, formulari.
- Deixem la configuració del servidor tal i com està.
- É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/*
- Fem clic a Terminar.
- 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 ..
- Fem clic a Archivo - Archivo nuevo.
- 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.
- 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.
