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.
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.
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.
Cap comentari:
Publica un comentari a l'entrada