03 JSF

JAVA SERVER FACES
Cours JEE - Master 2
Universit de Marne-la-Valle
1
dimanche 7 novembre 2010
RAPPEL DARCHITECTURE
Persistance des donnes
2
PROBLMATIQUE
Comment afcher des donnes en respectant le modle MVC, simplement, rapidement et srement ?
3
JSF
framework respect bas
en Java
du modle MVC
sur des composants
4
COMPOSANTS GRAPHIQUES
classes classes classes classes classes classes
Java qui codent le comportement et ltat de rendu qui traduisent la reprsentation graphique qui dnissent les balises personnalises qui modlisent la gestion des vnements qui prennent en comptent les Converteurs qui prennent en comptent les Validators
Persistance des donnes Universit de Marne-la-Valle
5
COMPOSANTS GRAPHIQUES
Pour utiliser les composants JSF on utilise des balises personalises !
6
BALISES HTML

description graphique dun JSF ensemble ni de composants graphiques (dautres librairies...) 25 composants proposs classis en quatre catgories :

Composants de saisies nots I Composants de sorties nots O Composants de commandes nots C Composants de regroupement nots R
7
DTAILS DES BALISES

Une
balise est constitue de trois types dattributs attributs de description attributs de description de prsentation (HTML)
des des des
attributs de description de prsentation dynamique (DHTML)
Selon la balise le nombre dattributs va varier !

Cours JEE - Master 2 Persistance des donnes Universit de Marne-la-Valle
8
ATTRIBUTS DE DESCRIPTION
id:
identiant du composant masque ou non le composant CSS appliquer au composant
rendered: styleClass: value:
valeur du composant nom de la classe pour une conversion des donnes nom de la classe pour une validation des donnes
converter: validator:
9
ATTRIBUTS HTML
Modication de lapparence du composant:

alt: texte dans le cas o le composant ne safche pas border: bordure du composant disabled: dsactive un composant de saisie ou un bouton maxlength: maximum de caractres pour du texte size: taille dun champ texte et bien dautres encore...
10
ATTRIBUTS DHTML
Aspect dynamique aux composants JSF:
onblur: onClick: onfocus:
le composant perd le focus clique de souris focus sur le composant touche clavier presse puis relche & onkeyup: touche clavier enfonce et relche
onkeypress: onkeydown onselect:

texte est selectionn dans un champ texte

11
COMPOSANTS DE SAISIES
inputHidden inputSecret inputText inputTextArea selectBooleanCheckbox selectManyCheckbox selectManyListbox selectManyMenu selectOneMenu selectOneRadio
12
INPUTHIDDEN: EXEMPLE
<h:inputHidden id="hidden">Hidden</h:inputHidden>
Voyons ce que lon obtient...

13
INPUTTEXT: EXEMPLE
<h:inputText id="test" />

14
INPUTTEXTAREA: EXEMPLE
<h:inputTextarea id="testAreaText" value="test deja present" title="test text area" />

15
LES SLECTIONS
selectOneRadio
dlments
& selectOneMenu grent un ensemble
Ces
lments sont peupls par : afche un seul lement afche plusieurs lments
<f:selectItem>:
<f:selectItems>:
16
SELECTONERADIO: EXEMPLE
<h:outputText value="Fruit : " /> <h:selectOneRadio layout="pageDirection"> <f:selectItem itemLabel="Banane" /> <f:selectItem itemLabel="Orange" /> <f:selectItem itemLabel="Clementine" /> <f:selectItem itemLabel="Pomme" /> <f:selectItem itemLabel="Framboise" /> </h:selectOneRadio>

17
SELECTITEM
spcication les
dun seul lment dune slection
principaux attributs de cette balise sont: active ou non litem
itemDisabled: itemLabel: itemValue: value:

le texte afcher la valeur retourne au serveur
la valeur qui pointe vers un objet SelectItem

18
CONSTRUCTEURS SUR SELECTITEM

Deux
constructeurs sont disponibles:
SelectItem(Object
value): une valeur afcher et la mme valeur retourner ct serveur value, String label): une valeur retourner ct serveur et un libell afcher
SelectItem(Object
19
SELECTITEM
Alourdit Adapte
lcriture des diffrents composantes dune slection pour un nombre rduit dlments dune slection
<f:selectItems> permet dallger lcriture puisquil ny aura quune seule occurence la place de toute les occurences de <f:selectItem> !
20
SELECTITEMS: EXEMPLE
<h:outputText>Civilites</h:outputText> <h:selectOneRadio> <f:selectItems value="#{civilityBean.civilities}" /> </h:selectOneRadio>

21
COMPOSANTS DE SORTIES
column message outputFormat
et messages
outputLink graphicImage
dataTable outputText
22
OUTPUTTEXT: EXEMPLE
<h:outputText value="Sympa?" />

23
DATATABLE
visualisation utilisable column
de donnes sur plusieurs lignes et colonnes
quand le nombre dlments afcher est inconnu
dnit une nouvelle colonne de la balise:
attributs value: var:
une collection de donnes
nom de la variable manipule chaque ligne CSS

rowClasses, headerClass:
24
EXEMPLE: DATATABLE
<h:dataTable value="#{flowScope.listAuthor}" var="author" border="1" cellspacing="4" width="60%" > <h:column> <h:outputText value="#{author.firstname}"/> </h:column> <h:column> <h:outputText value="#{author.lastname}"/> </h:column> </h:dataTable>

25
DATATABLE SUITE...

facet permet de modier les en-ttes et pieds de page facet permet deffectuer une liation entre deux composants association entre le conteneur du facet et le contenu du facet trois types de liation possible spcie via lattribut name:

footer: liation entre la table et un nom header: liation entre un titre de colonne et un nom
caption: liation
entre le titre de la table est un nom

26
<h:dataTable value="#{flowScope.listAuthor}" var="author" border="1" cellspacing="4" width="60%" > <h:column> <f:facet name="header"> <f:verbatim>Prenom</f:verbatim> </f:facet> <h:outputText value="#{author.firstname}"/> </h:column> <h:column> <h:outputText value="#{author.lastname}"/> </h:column> </h:dataTable>
EXAMPLE: DATATABLE

27
DATATABLE
Le composant de liation <f:facet> doit absolument tre un composant JSF !
28
MAQUILLER UNE DATATABLE

Les
attributs modier: style CSS pour len-tte de la table
headerClass: footerClass: rowClasses: rowClasses
style CSS pour le pied de la table style CSS pour les lignes de la table
permet de dnir un pattern de style CSS le pattern ? row1CSS, row2CSS, row2CSS

Quafchera
29
COMPOSANTS DE COMMANDES
commandLink commandButton
30
COMMANDLINK: EXEMPLE
<h:commandLink id="hum" action="consulter" value="TEST"/>

31
COMMANDBUTTON: EXEMPLE
<h:commandButton id="consulter" action="consulter" type="submit" value="Consultation" style="font:bold;" styleClass="none;" />

32
COMPOSANTS DE REGROUPEMENTS
form panelGrid panelGroup
33
PANELGRID

dnie lagencement des composants dans une page conteneur dont lorganisation des enfants sous forme dune grille les composants enfants sont ajouts dans le corps Principaux attributs:

columns: nombre de colonnes de la grille cellpading, cellspacing: espacement entre les cellules border: bord autour de la grille
34
EXEMPLE: PANELGRID
<h:panelGrid cellspacing="25" columns="2" > <h:outputText value="Nom : " /> <h:panelGroup> <h:inputText size="15" required="true" /> <h:inputText /> </h:panelGroup> <h:outputText value="Mot de passe : " /> <h:inputSecret /> </h:panelGrid>

35
Mais... Comment avoir des donnes dynamiques et non pas statiques ?
36
BEAN: PRINCIPES
Un
Bean est une classe Java particulire: constructeur public sans argument proprits sont accessibles via des mthodes getXXX proprits sont modiables via des mthodes setXXX
un ses ses
37
ET DANS JSF...
Lutilisation
des Beans dans JSF permettent: des donnes provenant de la couche mtier
lafchage le la
stockage des valeurs dun formulaire validation des valeurs
Cest lattribut value dans les composants JSF...

38
Et dans notre contexte...
39
CONTEXTE
navigation action cycle
gre via SpringWebow
gre via SpringWebow
de vie des Beans gr via Spring
JSF nous fournie au nal que des composants graphiques pour raliser nos vues !
40
Utilisez le squelette fournie pour le TD3 !
41

03 JSF

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

03 JSF

Transféré par

Droits d'auteur :

Formats disponibles

JAVA SERVER FACES

Cours JEE - Master 2

Cours JEE - Master 2

Persistance des donnes

Cours JEE - Master 2

Persistance des donnes

sur des composants

Cours JEE - Master 2

Persistance des donnes

Cours JEE - Master 2

Pour utiliser les composants JSF on utilise des balises personalises !

Cours JEE - Master 2

Persistance des donnes

Cours JEE - Master 2

DTAILS DES BALISES

des des des

attributs de description de prsentation dynamique (DHTML)

Selon la balise le nombre dattributs va varier !

identiant du composant masque ou non le composant CSS appliquer au composant

rendered: styleClass: value:

Cours JEE - Master 2

onkeypress: onkeydown onselect:

texte est selectionn dans un champ texte

Cours JEE - Master 2

Persistance des donnes

Voyons ce que lon obtient...

<h:inputText id="test" />

Voyons ce que lon obtient...

<h:inputTextarea id="testAreaText" value="test deja present" title="test text area" />

Voyons ce que lon obtient...

& selectOneMenu grent un ensemble

Cours JEE - Master 2

Persistance des donnes

Voyons ce que lon obtient...

dun seul lment dune slection

principaux attributs de cette balise sont: active ou non litem

itemDisabled: itemLabel: itemValue: value:

le texte afcher la valeur retourne au serveur

la valeur qui pointe vers un objet SelectItem

CONSTRUCTEURS SUR SELECTITEM

constructeurs sont disponibles:

Cours JEE - Master 2

Persistance des donnes

<h:outputText>Civilites</h:outputText> <h:selectOneRadio> <f:selectItems value="#{civilityBean.civilities}" /> </h:selectOneRadio>

Voyons ce que lon obtient...

Cours JEE - Master 2

Persistance des donnes

<h:outputText value="Sympa?" />

Voyons ce que lon obtient...

de donnes sur plusieurs lignes et colonnes

quand le nombre dlments afcher est inconnu

dnit une nouvelle colonne de la balise:

attributs value: var:

une collection de donnes

nom de la variable manipule chaque ligne CSS

Voyons ce que lon obtient...

entre le titre de la table est un nom

Voyons ce que lon obtient...

Cours JEE - Master 2

Cours JEE - Master 2

Persistance des donnes

MAQUILLER UNE DATATABLE

attributs modier: style CSS pour len-tte de la table