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

En l'anterior post varem acabar en el camp Telèfon del nostre petit formulari. Avui veurem un element nou de la  llibreria de components html de JSF: el selectOneRadio. Aquest component és el clàssic control RadioButton d'html. És a dir, una sèrie d'opcions que s'exclouen mútuament. Per exemple, una opció que ens permeti escullir el sexe.

Bé, obrirem una etiqueta amb el símbol més petit que (<) i tot seguit escriurem h:selectOneRadio. Si premem la tecla d'espai ens apareixen tot un seguit d'opcions o propietats relacionades amb aquest control. Podem posar un identificador o id per anomenar el component. Tanquem el tag d'obertura amb el símbol > i acceptem l'etiqueta de tancament que l'ide ens suggereix. Ara bé, dins de les etiquetes d'obertura i tancament del component hem d'afegir-hi un nou element, en aquest cas, procedent de la llibreria d'etiquetes del nucli de JSF i que anirà precedit per la lletra f (veure la importació de llibreries de la part superior del codi; s'ha afegit una nova referència). Aquest component és la llista d'opcions que podrem escullir i que seran, recordo, mútuament excloients. Per tant, escriurem:

<f:selectItem itemValue="dona" itemLabel="Dona"/>

<f:selectItem itemValue="home" itemLabel="Home"/>

Recordeu que cal començar  i finalitzar cada linea amb el símbol més petit que i més gran que respectivament.

Un altre component molt utilitzat i pràcticament idèntic a l'anterior és el selectOneMenu. Aquest és l'equivalent  a un quadre de llista desplegable d'html. La manera d'utilitzar-lo és igual que en l'anterior component. Veiem-ne un exemple.

Bé, podriem afegir més components (en veurem d'altres més endavant) però de moment, per veure un petit exemple de formulari, ja en tenim prou. Això sí, falta un dels elements més importants de tot formulari: Un botó que ens permeti enviar les dades i així poder tractar-les. Una altra etiqueta de la llibreria d'html 'dibuixa' un botó. És l'etiqueta h:commandButton. Podeu utilitzar-la així:

<h:commandButton value="Acceptar">

Aquest component té dues opcions que són molt importants i que utilitzarem per 'capturar' l'esdeveniment provocat per l'acció de prémer el botó. Són les propietats action i actionListener que veurem en una propera entrada. Així quedaria el codi i la vista de la plana web.

Cal dir que aquest formulari de moment no és funcional; només hem creat la vista. Ens resta fer la part de lógica que serà l'encarregada de rebre les dades enviades pel formulari i fer-ne ús. Això ho veurem en próximes entrades. Crearem el que s'anomena un Bean i el vincularem amb els camps del formulari de la vista html.

Gràcies.

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

En l'anterior entrada vam veure com podiem escullir una plantilla emprant el framework Facelets i com crear una plana web que heretés l'estructura o composició d'aquesta. Avui veurem alguns components nous que utilitzarem per a dissenyar un petit formulari. Ubicarem aquest formulari en la secció content de la plana web. També crearem un títol i un peu de pàgina per a la plana que situarem en l'arxiu de template.
Important: Omitiré el símbol més petit que  (<)  i més gran que (>) per problemes amb l'editor de blogger.

Bé, obrim l'ide Net Beans 6.8 i el projecte que varem crear anteriorment. Fem doble click per obrir l'arxiu inici.xhtml dins la carpeta Web Pages del projecte. Col.loquem el cursor dins les etiquetes "ui:define" de nom content. Eliminem el text content. Aquí situarem el nostre formulari. El primer que hem de fer és obrir una etiqueta de tipus form: escrivim el símbol més petit que (<) i a continuació h:form. Fixem-nos que en el moment en el que escrivim el símbol més petit que se'ns desplega una llista amb totes les possibles etiquetes de components. A mesura que anem escrivin la cerca es va fent més precisa. Entre les etiquetes d'obertura i tancament del formulari i inclourem els components bàsics Html. Fixem-nos que en la part superior del codi, en l'anomenat taglib, se'ns ha d'haver afegit una linea que és la que possibilita la inserció de components:

El taglib va des de la linea 3 a la 5. El primer taglib fa referència a les etiquetes tipus ui:component propies de Facelets. El segon, a les etiquetes típiques html: botons, quadres de text, formulari, etc. Fixeu-vos que el prefix de l'etiqueta del component ve determinat pel que s'utilitza en la linea del taglib: xmlns:ui o xmlns:h, "ui:define" o "h:form". Sense els taglibs que 'importin' la llibreria no és possible incloure els components d'aquesta. Hem definit un formulari amb les etiquetes "h:form" d'obertura i tancament (lineas 16 i 19) i serà entre aquestes dues etiquetes on hi situarem els components típics de formulari com ara els quadres de text, els quadres de llista desplegables, botons, etc.
Un component força útil és el panel grid, molt semblant al table clàssic d'html. Panel grid ens permet definir una estructura de taula amb un número de columnes. Per utilitzar-lo escriurem "h:panel grid " i al apretar la tecla d'espai se'ns mostrarà una llista de totes les possibles opcions per a aquest component. Escullirem columns i hi posarem 2. El nostre formulari tindrà dues columnes: primera columna, component label, per exemple Nom, i a la seva dreta, en la segona columna, el component del quadre de text. Fixeu-vos també que quan escrivim el símbol més gran que (>) per tancar la linea del component, el mateix ide ens escriu l'etiqueta de tancament de l'element.
Bé, tenim l'etiqueta h:form d'obertura i tancament, i dins d'aquestes l'etiqueta h:panel grid, amb un número específic de columnes, també amb una etiqueta d'obertura i tancament. Doncs entre aquestes dues últimes etiquetes hi afegirem el primer camp del formulari. Utilitzarem ara el component h:output text que és molt semblant al component clàssic html, label. Escriurem h:output text value="Nom:" i tancarem amb el símbol més gran que (>).L'ide ens escriu l'etiqueta de tancament del component. A continuació, ja sigui en la mateixa linea o en una nova, escriurem h:input text value="" (de moment no hi escriurem res a value). Aquest últim element és el quadre de text que emprarem per introduir el nom. A continuació de value="" podem donar-li al component un identificador per poder referir-nos a ell: id="nom". Tanquem l'etiqueta.
Podem fer el mateix per als camps, cognoms i telèfon. Simplement copiem les dues lineas anteriors i canviem els valors. Veiem com està quedant el codi.

Continuarà ...