JAVA - Accés als membres d'una classe - Part II - package i private

Continuant amb els modificadors d'accessibilitat als membres d'una classe, ens restava per veure els nivells d'accés package i private.

Nivell package. Quan no s'especifíca un modificador d'accessibilitat a un membre, aquest només és accessible per altres subclasses dins el seu propi paquet de classes.Aquest nivell d'accés és més restrictiu que el protected.
Veiem-ne un exemple:


public class SuperClassA {

int superclassVarA;
void superclassMetodeA(){

...

}

}


En aquest exemple, la variable superclassVarA i el métode superclassMetodeA han estat declarats sense el modificador, per tant, només seràn accessibles dins del mateix paquet. Té restricció de paquet.

Nivell private. És el més restrictiu de tots els nivells d'accessibilitat. Els membres privats només són accessibles per altres membres de la mateixa classe.  Els membres amb modificador private no són heretats per la subclasse. En el següent exemple veiem que tant superclassVarA com superclassMetodeA tenen el nivell d'accés private, per tant, no són accessibles des de qualsevol lloc que no sigui la mateixa classe.


public class SuperClassA {

private int superclassVarA;
private void superclassMetodeA(){

...

}

}


JAVA - Accés als membres d'una classe - Part I - public i protected

Una classe pot controlar l'accés als seus membres (métodes o atributs) per part d'altres classes.

És a dir, pot determinar quina informació és accessible i quina no ho és. Hi ha quatre nivells diferents d'accessibilitat:

• public
• protected
• default (també anomenat package)
• private         

Si no s'especifica cap nivell, el membre, per defecte,  té accessibilitat de paquet o default.

Nivell public. És el menys restrictiu de tots els nivells. Un membre públic és accessible des de qualsevol lloc, ja sigui des del mateix paquet que conté la classe o des d'altres on aquesta classe és visible.

Nivell protected. Un membre protected és accessible en totes les classes dins del mateix paquet i per totes les subclasses de la classe en qualsevol paquet des d'on sigui visible aquesta. És a dir, classes no heretades en altres paquets no poden accedir a membres protected.

Una subclasse en un altre paquet només pot accedir a membres protected de la superclasse a través de referències del seu propi tipus o subtipus. Veiem un exemple:

// fitxer SuperClasseA.java
public class SuperClasseA {      // En el paquet packageA

protected int variableClasseA;  // membre protegit
protected void metodeClasseA () { ...}  // membre protegit

}

// fitxer subClasseB.java
package packageB;
import packageA.*;

public class subClasseB extends SuperClasseA {   // En el paquet packageB

SuperClasseA objRefA = new SuperClasseA();
void subMetodeClasseB (subClasseB objRefB){

objRefB.metodeClasseA();   // OK
objRefB.variableClasseA = 15;  // OK
objRefA.metodeClasseA();             // NO OK
objRefA.variableClasseA = 20;      // NO OK

}
}

Un membre protected d'una superclasse només és accessible per una subclasse que estigui en un altre paquet, a través de l'herència.

Facelets i JSF 2.0 - Creació d'un formulari - Part VII - Validació del formulari

Tal i com vàrem dir en l'anterior post , l'aplicatiu que estem dissenyant ha de poder validar o comprovar que l'usuari ha introduït correctament les dades en els camps del formulari. És a dir, cal un mecanisme que no permeti l'enviament del formulari fins que tots els camps (o almenys aquells que siguin expressament requerits) hagin estat omplerts i de forma correcte.

Hi ha diverses maneres de duu a terme aquesta tasca: podriem crear un métode en el nostre managed bean que, vinculat al camp corresponent del formulari, s'encarregués de comprovar i validar les dades que si han introduït. Per exemple, el típic camp que ens demana que introduïm una adreça de correu electrònic, hauria de tenir un métode que comprovés si realment hem escrit una adreça de correu (comprovar l'existència del símbol @).

En aquest cas hauriem de crear el que s'anomena un validador, una classe o bé un métode que compara les dades introduïdes amb un determinat patró.

D'altra banda, existeix un mecanisme molt senzill per comprovar que l'usuari no ha deixat cap camp en blanc i impedir que les dades del formulari siguin enviades i processades: la propietat required. Aquesta propietat forma part del conjunt de propietats que podem assignar a un component HTML d'entrada de dades com per exemple una caixa de text. Aquesta propietat accepta un valor de tipus booleà. Si el valor és true, es duu a terme la comprovació pel camp al qual hem assignat aquesta propietat. Quan l'usuari premi el botó d'enviament del formulari, si hi ha cap camp en blanc ens apareixerà un missatge avisant-nos de  que és necessari un valor per aquest camp. Un exemple podria ser el següent:

<h:inputText value="#{bean.nom}" id="nom" required ="true"/>

Una altra propietat que va unida amb la required és la requiredMessage i ens permet definir un missatge personalitzat que informi a l'usuari de l'error que s'ha produït.

<h:inputText value="#{bean.nom}" id="nom" required="true" requiredMessage="És necessari omplir aquest camp"/>

Resumint, per assegurar-nos que tots els camps han estat omplerts correctament, hauriem d'incloure la propietat required (establerta a true, obviament) a cadascun d'ells. En properes entrades aprofundirem una mica més en aquest aspecte i coneixerem altres formes de  validació.

Gràcies.

Facelets i JSF 2.0 - Creació d'un formulari - Part VI - Llenguatge EL

El llenguatge d'expressió unificat EL (Expression Language) permet als creadors de pàgines web utilitzar una senzilla sintaxi per accedir a les dades de forma dinàmica a través d'objectes JavaBeans És aquest llenguatge el que emprarem per vincular els camps html del nostre formulari amb les propietats o atributs del bean que vàrem crear en l'anterior post. JavaServer Faces utilitza el llenguatge EL per:

• Evaluar de manera diferida o immediata les expressions EL.
• Establir i/o obtenir dades.
• Invocar métodes.

Resumint, EL proporciona una manera senzilla de llegir dades d'aplicacions emmagatzemades en objectes de tipus JavaBean. També permet l'escriptura, per exemple, de dades introduïdes per l'usuari a través d'un formulari , en un objecte JavaBean. Permet també l'execució de métodes invocats per esdeveniments. Per utilitzar el llenguatge EL hem d'escriure la sintaxi entre els símbols #{ d'inici i el símbol } de tancament. Veiem-ne un exemple:

En el següent codi (de l'arxiu inici.xhtml), el text introduït per  l'usuari en un camp de text serà emmagatzemat en la propietat corresponent de l'objecte JavaBean.

<h:inputText id="nom" value="#{bean.nom}">
Fixeu-vos que l'expressió EL l'escrivim dins l'atribut value del component. El primer paràmetre fa referència al nom del JavaBean i el segon, a la propietat nom (de tipus string) també del JavaBean.
Bé, doncs això hem de fer-ho per cadascun dels camps d'entrada de text del nostre formulari. Veiem una imatge amb el codi acabat.

Cada caixa de text (nom, cognoms, etc) té l'atribut value associat amb una propietat dins l'objecte JavaBean. 

Un altre detall molt important és l'atribut action del botó d'enviament del formulari. Vàrem dir que un botó pot tenir un atribut action i/o un atribut actionListener. Aquest últim l'emprarem per invocar métodes dins el JavaBean (ho veurem en properes entrades). L'atribut action l'utilitzarem per a navegar entre pàgines. En versions anteriors a JSF 2.0 calia declarar el que s'anomena regles de navegació  per a poder moure't entre diferents pàgines. En la versió actual això ja no és necessari (que no vol dir que no s'utilitzi). Amb JSF 2.0 existeix el que s'anomena navegació ímplicita, és a dir, JSF cerca una pàgina xhtml amb exactament el mateix nom que el definit en l'atribut action del botó (en aquest cas cercaria resultat.xhtml).

El que volem fer ara és mostrar les dades introduïdes per l'usuari en una nova pàgina. Per tant, crearem un nou arxiu de tipus Facelets Template Client que hereti de la plantilla original i li donarem el nom resultat.

Dins la secció content de la nova pàgina crearem una taula de dues columnes utilitzant el component panelGrid i mostrarem les dades entrades per l'usuari en l'atribut value del component outputText emprant el llenguatge EL. Per exemple:

 <h:outputText value="#{bean.nom}">

El codi de la pàgina resultat.xhtml quedaria així:

Bé, això podria ser un exemple senzill. Ara bé, calen certs retocs per a que esdevingui  un millor formulari. Per exemple, cal comprovar que l'usuari no es deixa cap camp en blanc o bé que el text introduït tingui una mínima longitud. Però això ho veurem un altre dia.

Gràcies.

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

Bé, ja sabem què és un JavaBean (o managed bean). Sabem que és un objecte Java que conté unes propietats o atributs i uns métodes. Sabem que podem enllaçar aquests atributs amb cadascun dels camps del formulari en la pàgina web. També sabem que el managed bean pot ser creat en quatre diferents àmbits dins l'aplicació en funció de la necessitat que tinguem de mantenir les dades introduïdes en els camps del formulari.

Hem vist la teoria, anem ara a veure la pràctica. Obrim el nostre projecte.

1. Per crear un JavaBean o JSF ManagedBean  farem un clic amb el botó secundari del ratolí sobre el nom del projecte (esfera blava) i seleccionarem Nuevo. Escullim JSF Managed Bean.
2. El següent quadre de diàleg ens demana el nom i la ubicació de la classe Bean. Introduirem un nom (per exemple, formBean) i l'ubicarem dins d'un paquet (és altament recomanable ubicar tots els arxius o classes de l'aplicació en diferents paquets segons la seva funció) que li direm web.beans.
3. En la part inferior del quadre de diàleg podem configurar un nom pel bean per referir-nos a ell des del codi de la plana web. Podem utilitzar el mateix nom que hem definit en el pas anterior o posar-ne un altre. Per veure la diferència li donarem el nom de bean.
4. A continuació del quadre de text del nom tenim l'àmbit o Scope del bean. Per aquest exemple escullirem de la llista desplegable l'opció Request.
5. Fem clic a Terminar.
6. S'ha creat la classe formBean de tipus managed bean ubicada dins el paquet web.beans i dins la carpeta Sources Packages del nostre projecte. S'obre la pestanya de la classe bean que acabem de crear. Fixem-nos en el codi : tenim un constructor sense paràmetres, un parell d'imports de llibreries, i el que s'anomena annotations, dues línees de codi precedides pel símbol @. En versions anteriors de JSF (versió 1.2) calia definir els beans en un arxiu de configuració anomenat faces-config.xml. En la versió 2.0 això ja no és necessari ja que s'utilitzen les anotacions. La primera anotació, @ManagedBean(name="bean") és la que defineix la classe java com a un objecte JavaBean i li atorga un nom (el que hem definit en el pas 3). L'altre anotació defineix l'àmbit d'actuació del bean, @RequestScoped. Si vulguessim canviar-lo per un àmbit de sessió, només hauriem de borrar aquesta línea i escriure @SessionScoped.
7. Bé, ara hem de crear els atributs del bean. En el nostre formulari tenim un camp nom, cognoms, telèfon, sexe i país. Tots aquests camps emmagatzemaran valors de tipus alfanúmeric (fins i tot el camp telèfon), per tant els atributs del bean han de ser de tipus string.
8. És molt senzill crear els atributs del bean. Escriurem just a sota del constructor: private String nom;  àmbit de l'atribut, tipus i nom. Farem el mateix per la resta de camps.
9. Un cop tinguem definits tots els atributs, cal escriure els seus métodes accesors (get i set). Per fer-ho apretem la tecla Alt + Insert i cliquem a l'opció Getter y Setter. Seleccionem els atributs i fem clic a Generar. Això ens crea automàticament tots els métodes get i set per a cada atribut. Recordem que per poder llegir i modificar els valors del camps del formulari en el bean és imprescindible que s'hagin definit aquests métodes.
10. Ja gairebé tenim el bean acabat. Ara cal enllaçar els camps del formulari amb els atributs del JavaBean. Per fer-ho necessitem conèixer el llenguatge JSF EL (Expression Language). Aprendem una mica d'aquest llenguatge en una propera entrada. Per avui deixem-ho aquí.

Gràcies.

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

En l'anterior entrada vam fer el disseny del formulari, afegint camps com ara el nom, cognoms, sexe o país.

Vam veure els 'tags' que representaven caixes de text, radiobuttons, labels, llistes desplegables i botons.

Ara bé, el formulari no és funcional. Perque ho sigui cal desenvolupar la part lógica de l'aplicació. Cal escriure el codi necessari per rebre les dades introduïdes per l'usuari i poder tractar-les. Per fer això necessitem conèixer un nou concepte: l'objecte JavaBean, conegut com a managed bean en JSF,  és un POJO (Plain Old Java Object) és a dir, un objecte simple de java, amb les seves propietats o atributs, métodes i esdeveniments. L'objecte bean ha d'obeïr certes condicions, és a dir, ha de seguir unes convencions de creació i configuració:

• Ha de tenir un constructor sense arguments.
• Les seves propietats  han de ser accessibles a través dels métodes get i set per poder manipular-les.
• Ha de ser serialitzable.

Un JavaBean té la següent estructura:

• Propietats. Els atributs que conté i que s'enllaçaran amb els camps de la plana web.
• Métodes. Accessibles a través dels métodes get i set per a modificar, establir o eliminar valors ens els atributs.
• Esdeveniments. Respondran a crides o esdeveniments sol.licitats per components de la plana web o altres beans en l'aplicació.

Un managed bean pot situar-se en diferents àmbits dins l'aplicació en funció de la necessitat que tinguem de mantenir els valors dels seus atributs o propietats. Aquests àmbits són:

• Request. Els valors només es mantenen en una petició o sol.licitud HTTP. Per exemple, en un login.
• Session. Els valors es mantenen al llarg de la sessió d'un usuari. Per exemple la típica aplicació d'un cistell de la compra.
• Application. Els valors del bean es mantenen durant tot el temps de vida de l'aplicació i estàn disponibles per tots els usuaris.
• View. Els valors del bean es mantenen mentre l'usuari estigui en la mateixa vista o plana web.

Resumint, un JavaBean és un objecte simple de Java que té uns atributs  que poden ser modificats i uns métodes que realitzaran diverses funcions dins el propi objecte (resposta a esdeveniments provocats per components de la plana web, modificació d'atributs del bean, etc). Un JavaBean també es pot configurar en un àmbit d'acció concret en funció de la necessitat que tinguem de mantenir els valors dels seus atributs. Els atributs del JavaBean seràn enllaçats als camps del formulari de la plana web.

En una propera entrada veurem con crear un JavaBean (managed bean) que utilitzarem en la nostra aplicació.

Gràcies.

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

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

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:

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

Facelets

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.

Hola món en JavaServer Faces

Crearem una senzilla aplicació típica d'Hola món utilitzant la tecnologia JavaServer Faces o JSF. Per fer-ho utilitzaré l'ide NetBeans en la versió 6.8. Per descarregar aquest ide podeu fer clic aquí.

Un cop instal.lat l'ide l'executarem i farem un clic en Archivo i Proyecto Nuevo. De les categoríes que ens apareixen seleccionarem Java Web i en proyectos, a la part dreta, Web Application.

A continuació li donarem un nom al nostre projecte, per exemple, projecteweb1 i farem clic a siguiente.

En la configuració del servidor ho deixarem tot tal i com està; en el meu cas tinc com a servidor GlassFish en la versió 3 i Java EE Web en la versió 6. Farem un clic a siguiente. En l'últim pas hem d'escullir el framework que utilitzarem per a la creació de l'aplicació web. Marquem JavaServer Faces, deixem la configuració que ens dona per defecte  i fem un clic a terminar. Aquí teniu una captura de pantalla a mode d'exemple.

Ara ja som a la part on hem d'introduir codi per a dissenyar la interfície web. Simplement el que farem ara serà incloure una etiqueta h2 entre les etiquetes d'obertura i tancament del body.

Fixeu-vos en la línea 4. Aquesta línea ens permetrà la inclusió d'etiquetes comuns d'HTML en la nostra aplicació JSF, com per exemple les dues que ja tenim h:head i h:body. Per incloure etiquetes HTML només hem d'escriure h: precedit del signe més petit (<) i se'ns desplegarà una petita finestra amb tots els tags disponibles.
Ja podem fer clic al botó de Play sota la barra de menú en la part superior del ide i veure el resultat en el nostre navegador.

JavaServer Faces (JSF)

JavaServer Faces és un framework i tecnologia per a aplicacions web que utilitza el llenguatge de programació JAVA. L'ús d'aquesta tecnologia simplifica molt el disseny i construcció d'interfícies d'usuari en aplicacions JAVA EE. Actualment està en la versió 2.0

JSF fa ús del patró MVC (Model Vista Controlador) separant així la capa de presentació de la capa de dades i de la capa de lógica de control.

A grans trets, els objectius de desenvolupament de JSF són els següents:

• Definir un conjunt simple de clases de JAVA vinculades o enllaçades als components de la interfície de l'usuari. Aquestes classes controlarant el cicle de vida de la interfície, controlant l'estat d'un component així com els esdeveniments d'entrada

• Proporcionar un conjunt de components per a la construcció de la interfície d'usuari a més a més dels components comuns d' HTML.

• Proporcionar un model de JavaBeans per enviar peticions o atendre als esdeveniments des de la interfície d'usuari fins al servidor d'aplicacions.

• Construcció d'APIs pròpies per a la validació de components de la interfície d'usuari ja sigui del costat del servidor com del client.

• Internacionalització i localització de la interfície de l'usuari.

Bé, més endavant explicaré com podem utilitzar NetBeans en la versió 6.8 per a crear d'una manera senzilla aplicacions JavaServer Faces. Però això serà en properes entrades.