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.