Vous êtes sur la page 1sur 19

Java EE : couche prsentation

JavaServer Faces

2015/2016 Java Entreprise Edition 7 1

Plan
Introduction JSF
FacesServlet et faces-config.xml
Pages et composants web
Moteurs de rendu
Convertisseurs et validateurs
Backing bean et navigation
Interface web
Historique
Jsp 2.2 EL 2.2 et JSTL 1.2
Nouveauts de JSF 2.0, JSF 2.2
Exemple dApplication web

2015/2016 Java Entreprise Edition 7 2

1
JSF : Rappel
WWW (World Wide Web) a t, initialement conu pour partager des
documents crits en HTML (hypertext Markup Language).

Le protocole HTTP(Hypertext Transfer Protocol) est utilis pour vhiculer ces


documents qui taient statiques (le contenu nvoluait pas beaucoup au cours
du temps: pages HTML pur avec des graphiques (JPG, PNG,)).

Les pages dynamiques sont gnres en temps rel partir de donnes


calculs partir des informations fournies par lutilisateur.

Pour crer un contenu dynamique, on analyse les requtes HTTP et on cre


des rponses dans un format que le navigateur saura traiter.

LAPI des servlets simplifie ce processus en HTTP (HttpRequest,


HttpResponse, ) mais il tait de trop bas niveau et cest pour cette raison
quon utilisait JSP (Java Server Pages) pour simplifier la cration des pages
dynamiques.
2015/2016 Java Entreprise Edition 7 3

JSF : Rappel
Or une JSP nest dautre quune servlet crite essentiellement en HTML
avec un peu de java pour effectuer les traitements.

Do la cration de JSF (JavaServer Faces ou simplement Faces) pour


combler les limitations de JSP et utiliser un autre modle consistant
porter des composants graphiques vers le web.

Tout comme Swing, et dautres frameworks graphiques, JSF permet de


penser en termes de composants, dvnements, de beans grs et de
leurs interactions plutt quen termes de requtes, de rponses et de
langages marqueurs.

JSF pour but de faciliter et dacclrer le dveloppement des applications


web en fournissant des composants graphiques (zones de texte, les listes,
les onglets et les grilles) afin dadopter une approche RAD (Rapid
Application Development)

2015/2016 Java Entreprise Edition 7 4

2
Introduction JSF
Les applications JSF sont des applications web classiques qui
interceptent HTTP via la servlet Faces et produisent du HTML.

Larchitecture JSF en figure ci-dessous permet de greffer nimporte


quel langage de dclaration de page (PDL), de lafficher sur des
dispositifs diffrents (navigateur, terminaux mobiles, ) et crer des
pages au moyen dvnements, dcouteurs et de composants,
comme en Swing.

JSF fournit un ensemble de widgets standard (boutons, cases


cocher,) et facilite son extension par lajout de composants tiers.

2015/2016 Java Entreprise Edition 7 5

Introduction JSF
La figure ci-aprs reprsente les parties importantes de larchitecture
JSF qui est riche et souple :

2015/2016 Java Entreprise Edition 7 6

3
Introduction JSF
Larchitecture JSF est forme des parties importantes suivantes :
FacesSevlet et faces-config.xml : FacesServlet est la sevlet principale de
lapplication et peut ventuellement tre configure par un fichier descripteur
faces-config.xml.
Pages et composants :JSF permet dutiliser plusieurs PDL (Presentation
Description Language), comme JSP ou Facelets.
Moteurs de rendu (renderer) : ils sont responsables de laffichage dun
composant et de la traduction de la valeur saisie par lutilisateur en valeur pour le
composant.
Convertisseurs : ils effectuent les conversions entre les valeurs de composants
(Date, boolean, etc.) et les valeurs de marqueurs (String), et rciproquement.
Validateurs : ils garantissent que la valeur saisie par lutilisateur soit correcte.
Backing bean et navigation : la logique mtier seffectue dans des backing
beans (managed bean en JEE6) qui contrlent aussi la navigation entre les pages.
Support dAjax : JSF reconnait nativement Ajax.
2015/2016 Java Entreprise Edition 7 7

FacesServlet et faces-config.xml
JSF utilise le patron de conception MVC (Modle-Vue-Contrleur) comme la
plupart des frameworks.

MVC permet de dcouper la vue (la page) et le modle (les donnes affiches
dans la vue). Le contrleur prend en charge les actions de lutilisateur qui
pourraient impliquer des modifications dans le modle et dans les vues. En
JSF, ce contrleur est la servlet FacesServlet.

Toutes les requtes de lutilisateur passent par cette servlet, qui les examine et
appelle les diffrentes actions correspondantes du modle en utilisant les
backing beans.

FacesServlet est intgre JSF et on peut la configurer avec des annotations.


Jusqu JSF 1.2, on utilisait le fichier faces-config.xml. partir de JSF 2.0 ce
fichier est facultatif et il est remplac par les annotations.

2015/2016 Java Entreprise Edition 7 8

4
Pages et composants
Un framework doit envoyer une page sur le dispositif de sortie du client
(navigateur) et exige donc une technologie daffichage appele PDL
(langage de dclaration de page).
Une application JSF peut utiliser plusieurs technologies pour son PDL,
comme JSP ou Facelets. Le PDL par dfaut des versions JSF 1.2 et avant
tait JSP. partir de JSF 2.0 prfre Facelets.
JSP et Facelets sont tous les deux forms dune arborescence de
composants (widgets ou contrles) fournissant des fonctionnalits
spcifiques pour interagir avec lutilisateur(champ de saisie, boutons,).
JSF dispose dun ensemble standard de composants et permets de crer
facilement nos composants.
Pour grer larborescence de composants, une page passe par un cycle de
vie complexe (initialisation, vnements, affichage, etc.)

2015/2016 Java Entreprise Edition 7 9

Exemple de page Facelets en XHTML

2015/2016 Java Entreprise Edition 7 10

5
Pages et composants
Les marqueurs JSF : xmlns:h="http://xmlns.jcp.org/jsf/html"
affiche un formulaire avec des champs de saisie (lISBN et le titre dun
livre) et un bouton.

Cette page est compose de plusieurs composants JSF :


Sans apparence visuelle : lentte (<h:head>), le corps(<h:body>)
ou le formulaire (<h:form>).
Avec reprsentation graphiques et affichent : un label
(<h:outputLabel>), un champ de saisie (<h:inputText>) ou un
bouton (<h:commandButton>)

La page contient aussi des marqueurs HTML pur (<table>, <tr>)

2015/2016 Java Entreprise Edition 7 11

Moteurs de rendu (renderer)


JSF utilise deux modles de programmation pour afficher les composants :
implmentation directe et implmentation dlgue.

Le modle direct : les composants doivent eux-mmes sencoder vers une


reprsentation graphique et rciproquement.

Le modle dlgu : ces oprations sont confies un moteur de rendu, ce qui


permet aux composants dtre indpendants de la technologie daffichage
(navigateur, terminal mobile,) et donc avoir plusieurs reprsentations
possibles.

Un moteur de rendu soccupe dafficher un composant et de traduire la saisie


dun utilisateur en valeur de composant.
Cest un traducteur plac entre le client et le serveur :il dcode la requte
utilisateur pour initialiser les valeurs du composant et encode la rponse pour
crer une reprsentation du composant que le client pourra comprendre et
afficher
2015/2016 Java Entreprise Edition 7 12

6
Convertisseurs et validateurs
Une fois la page est affiche, lutilisateur peut sen servir pour entrer des
donnes.
Comme il n y a pas de contraintes sur les types, un moteur de rendu ne peut
pas prvoir laffichage de lobjet.
Cest pourquoi les convertisseurs existent : ils traduisent un objet (Integer,
Date, Enum, Boolean, ) en chaine afin quil puisse safficher et inversement,
construisent un objet partir dune chaine qui a t saisie.
JSF fournit un ensemble de convertisseurs pour les types classiques dans le
paquetage javax.faces.convert. On peut aussi dvelopper les notre.
Les donnes doivent tre valides avant dtre traites par le back-end : cest
le rle de validateurs.
un composant est associ un ou plusieurs validateurs qui garantissent que
les donnes saisies soient correctes.
JSF fournit quelques validateurs (LengthValidator, RegexValidator, etc.) et on
peut crer nos propres validateurs avec les annotations.
2015/2016 Java Entreprise Edition 7 13

Backing Beans et navigation


Les applications web sont gnralement formes de plusieurs pages et doivent
raliser un traitement mtier (en appelant une couche EJB).
Le passage dune page lautre, linvocation dEJB et la synchronisation des
donnes avec les composants sont pris en charge par les backing beans.
Un backing bean est une classe Java spcialise qui synchronise les valeurs
avec les composants, traite la logique mtier et gre la navigation entre pages.
On associe un composant une proprit ou une action spcifique dun
backing bean en utilisant EL(Expression Language) :
<h:inputText value="#{bookController.book.isbn}"/>
<h:commandButton value="Create"
action="#{bookController.doCreateBook}"/>
La premire ligne lie directement la valeur du champ de saisie la proprit
book.isbn du backing bean bookContoller. Cette valeur est synchronise avec la
proprit du backing bean. Un backing bean peut traiter des vnements.

2015/2016 Java Entreprise Edition 7 14

7
Backing Bean et navigation
<h:commandButton value="Create"
action="#{bookController.doCreateBook}"/> :
associe un bouton de soumission de formulaire une action : lorsquon aura
cliqu sur ce bouton, celui-ci dclenchera un vnement sur le backing bean,
qui va excuter une mthode couteur ici doCreateBook().
@Named //@ManagedBean ds JEE6
@RequestScoped
BookController est une classe
annote @Named et possde une
public class BookController {
proprit book synchronis avec
@Injected //@EJB ds JEE6
la valeur du composant de la
private BookEJB bookEJB;
page.
private Book book = new Book(); La mthode doCreateBook()
public String doCreateBook() { invoque un EJB sans tat et
book= bookEJB.createBook(book); renvoie une chaine permettant de
return "listBooks.xhtml"; naviguer entre les pages.
}
// getters, setters
} 2015/2016 Java Entreprise Edition 7 15

Support dajax
La vesion JSF 2.2 supporte Ajax sous forme dune bibliothque
JavaScript (jsf.js) dfinie dans la spcification et une balise <f:ajax>.

Exemple : utiliser la fonction request pour soumettre un formulaire de


faon asynchrone

<h:commandButton value="Create a book"


action="#{bookController.doCreateBook}">
<f:ajax execute="@form" render=":booklist"/>
</h:commandButton>

2015/2016 Java Entreprise Edition 7 16

8
Interface web : histoire
Au dbut du web, les pages taient statiques.
Augmentation de lactivit commerciale sur le web, force fournir un contenu
dynamique.
CGI (Common Gateway Interface) avec HTML et des scripts CGI crits dans
diffrents langages tait la premire solution fournir un contenu dynamique.
Cette solution avec les CGIs est de trop bas niveau
Netscape avait cr JavaScript sexcutant dans les navigateurs et permet de
crer un contenu dynamique mais incompatible avec tous les navigateurs.
Les servlets taient une alternative aux scripts CGI avec des bibliothques de
plus haut niveau.
JSP sont considres comme une amlioration du modle servlets mais les
JSP mlangeaient du java avec HTML.
Depuis plusieurs framewoks ont vu le jour : struts, tapestry, Wicket, pour
combler les lacunes prcdentes.

2015/2016 Java Entreprise Edition 7 17

JSF 2.2 et les Frameworks


JSF 2.2 est le standard du web pour Java EE 7.

Elle est en concurrence avec Struts et Tapestry dans


l'espace Java.

Rails et Grails sont en concurrence avec JSF sur le


web, du mme sens que Java qui est en
concurrence avec Ruby ou Groovy.

Google Web Toolkit (GWT), Flex, JavaFX et peuvent


tre considrs comme complmentaire JSF.

2015/2016 Java Entreprise Edition 7 18

9
JSF 2.0 : JSP 2.2, EL 2.2 et JSTL 1.2
Les JSP sont une abstraction de haut niveau des servlets

JSTL (JSP Standard Tag Library)

En 2006, JSP 2.1 a t ajoute java EE 5 et a facilit lintgration


entre JSF et JSP en introduisant un langage dexpression (EL) unifi.

Avec Java EE 6, JSP et EL sont passs la version 2.2.

En 2006 JSF 1.2 a t ajoute dans Java EE 5 pour prserver la


compatibilit et intgrer JSP avec EL.
Malgr lunification dexpression, JSF et JSP ne fonctionnent pas trs
bien ensemble do lintroduction des Facelets comme alternative
aux JSP.

2015/2016 Java Entreprise Edition 7 19

JSF 2.0
JSF 2.0 est une volution de JSF 1.2 et les facelets sont prfres aux JSP.
Parmi les ajouts de JSF 2.0 :
Une autre technologie de prsentation que JSP, reposant sur Facelets;
Un nouveau mcanismes de gestion des ressources (pour les images, les
scripts JavaScript,);
Des portes supplmentaires (porte vue et porte de composant);
Le dveloppement est plus simple grce aux annotations pour les backing
beans, les moteurs de rendu, les convertisseurs, les validateurs,
La rduction de la configuration XML en exploitant les annotations et la
configuration par exception (faces-config.xml est facultatif);
Le support dajax
Le dveloppement de composant facilit
Mojarra (famille de poisson), est limplmentation de rfrence open-source
de JSF2.0

2015/2016 Java Entreprise Edition 7 20

10
JSF 2.2 : nouveauts
JSF 2.2 est une volution de JSF 2.0 .
Parmi les ajouts de JSF 2.2 :
La possibilit d'crire la vue en HTML pur, mais JSF peut ajouter toutes les
fonctionnalits supplmentaires en arrire plan.
HTML5 nous permet d'utiliser un attribut id pour chaque type d'lment
Faces flow : amlioration majeure en JSF2.2. On utilise une srie d'crans
tels que les assistants, les multi-crans, rservations, etc.
Contrle de la file d'attente pour les requtes AJAX: Si plusieurs requtes
arrivent, seule la plus rcente est envoye au serveur.
Injection dans tous les artefacts de JSF: Dans JSF 2.2 linjection est possible
partout (convertisseurs, validateurs, composants, etc.)
aller vers les CDI (context and dependency injection): Avec JSF 2.2, les CDI
ont remplacs les anciens beans grs JSF et supportent aussi les portes
(javax.faces.bean deviendra est obsolte).

2015/2016 Java Entreprise Edition 7 21

JSF 2.2 : application CD-Bookstore


Dans le cadre de lapplication CD-Bookstore, nous allons dvelopper deux
pages web :
newBook.xhtml : affiche un formulaire afin de pouvoir crer un livre.
listBooks.xhtml : numre tous les livres prsents dans la base.
Les deux pages utilisent un backing bean BookController pour stocker les
proprits ncessaires et pour la navigation.
JPA est utilis pour la persistance et lEJB pour la logique mtier. Le backing
bean dlgue tous les traitements mtier BookEJB qui contient deux
mthodes : - createBook() :stocke un livre dans une base de donnes
- findBooks() :rcupre tous les livres.
BookEJB : un bean session sans tat utilise lAPI EntityManager pour
manipuler une entit Book.
La navigation est simple : lorsquun livre est cre, on affiche la liste. Un lien sur
la page de liste permet de revenir ensuite la page newBook.xhtml et de
crer un autre livre.
2015/2016 Java Entreprise Edition 7 22

11
JSF 2.2 : application CD-Bookstore
La figure ci-joint montre linteraction des composants de cette
application. Lapplication est assemble sous un fichier war et utilise
une bases de donnes Derby.

2015/2016 Java Entreprise Edition 7 23

JSF 2.2 : application CD-Bookstore


Cette application utilise la structure de rpertoires de Maven, les
classes, les fichiers et les pages web doivent tre placs dans les
rpertoires suivants :
src/main/java : contient lentit Book, lEJB BookEJB et le backing
bean BookController
src/main/ressources : contient le fichier persistence.xhtml utilis pour
associer lentit la base de donnes.
src/webapp : contient les deux pages web newBook.xhtml et
listBooks.xhtml.
src/webapp/WEB-INF :contient web.xml qui dclare la FacesServlet.
pom.xml : est un fichier POM (Project Object Model) de Maven
dcrivant le projet, ses dpendances et ses extensions.

2015/2016 Java Entreprise Edition 7 24

12
JSF 2.2 : application CD-Bookstore
Book : lentit Book doit tre associe un fichier persistence.xml.
@Entity
@NamedQuery(name = "findAllBooks", query = "SELECT b FROM Book b")
public class Book {
@Id @GeneratedValue
private Long id;
@Column(nullable = false)
private String title;
private Float price;
@Column(length = 2000)
private String description;
private String isbn;
private Integer nbOfPage;
private Boolean illustrations;
// constructeurs, getters, setters
}
2015/2016 Java Entreprise Edition 7 25

JSF 2.2 : application CD-Bookstore


BookEJB : est un bean session sans tat qui cre et rcupre des livres.
@Stateless
public class BookEJB {
@PersistenceContext(unitName = "chapter10PU")
private EntityManager em;
public List<Book> findBooks() {
Query query = em.createNamedQuery("findAllBooks");
return query.getResultList();
}
public Book createBook(Book book) {
em.persist(book);
return book;
}
}

2015/2016 Java Entreprise Edition 7 26

13
JSF 2.2 : application CD-Bookstore
BookController : un backing bean qui consiste interagir avec les autres
couches de lapplication (couche EJB) ou effectuer des validations.
Lannotation @RequestScoped dfinit la dure de vie du bean (ici il vivra le
temps de la requte).
Le bean contient deux attributs qui seront utiliss par les pages :
bookList : est la liste des livres rcuprs partir de la base de donnes, qui
doit safficher dans la page listBooks.xhtml
book : est lobjet qui sera associ au formulaire (dans la page
newBook.xhtml) et rendu persistant.
Tout le traitement mtier (cration et rcupration des livres) seffectue via
BookEJB. Le backing Bean obtient une rfrence lEJB par injection, via
lannotation @Injected et dispose de deux mthodes qui seront invoques par
les pages : doNew() : permet de naviguer vers newBook.xhtml

2015/2016 Java Entreprise Edition 7 27

JSF 2.2 : application CD-Bookstore


doCreateBook() : cre un livre en invoquant lEJB et en lui passant lattribut
book. Puis elle appelle nouveau lEJB pour obtenir tous les livres de la base
et stocke la liste dans bookList du backing bean. Ensuite, elle renvoie le nom
de la page vers laquelle elle doit naviguer.
@Named //@ManagedBean
@RequestScoped
public class BookController {
@Injected //@EJB
private BookEJB bookEJB;
private Book book = new Book();
private List<Book> bookList = new ArrayList<Book>();
public String doNew() { return "newBook.xhtml;}
public String doCreateBook() { book=bookEJB.createBook(book);
booklist=bookEJB.findBooks(); return listBooks.xhtml";}
// Getters et Setters
}
2015/2016 Java Entreprise Edition 7 28

14
JSF 2.2 : application CD-Bookstore
La page newBook.html est un formulaire permettant lutilisateur de
saisir les informations ncessaires la cration dun livre (ISBN, titre,
prix, description, nombre de pages et illustrations).

2015/2016 Java Entreprise Edition 7 29

JSF 2.2 : application CD-Bookstore


Un clic sur le bouton create a book provoque lappel de la mthode
doCreateBook()du backing bean et lEJB stocke alors le livre dans la base
de donnes.
Dans le code, on dclare lespace de noms h pour les composants HTML et
JSF : pour les utiliser, il faudra donc les prfixer par cet espace de noms
(<h:body>, <h:outputText>, <h:commandButton> , ).
Le langage dexpression EL permet ensuite de lier dynamiquement la valeur
du composant la proprit correspondante du backing bean :
<h:inputText value= "#{bookController.book.isbn}" / > : lie la valeur de
lattribut isbn de book avec le contenu de ce composant inputText lors de la
soumission du formulaire.
bookController tant le nom par dfaut du backing bean et le code
prcdent est quivalent : bookController.getBook().setISBN(" ce qui a
t saisi" )

2015/2016 Java Entreprise Edition 7 30

15
JSF 2.2 : application CD-Bookstore
La page utilise dautres composants graphiques :
<h:form> permet de crer un formulaire dont les valeurs seront
envoyes au serveur lorsquil sera soumis.
<h:outputLabel> affiche un label partir dune chaine fixe (comme
value=" ISBN : " ) ou en liant un bean la proprit.
<h:inputTextarea> affiche une zone de texte et lie sa valeur lattribut
description du livre
<h:selectBooleanCheckbox> affiche une case cocher et la lie
lattribut illustrations (un Boolean).
<h:commandButton> affiche un bouton de soumission de formulaire
qui, lorsquon cliquera dessus, invoquera la mthode doCreateBook()
du backing bean (action= "#{bookController.doCreateBook}" ).

2015/2016 Java Entreprise Edition 7 31

JSF 2.2 : application CD-Bookstore


La page listBooks.xhtml :la mthode doCreateBook() du backing bean est
appele lors du clic sur le bouton de soumission de la page newBook.xhtml;
elle stocke le livre dans la base et si aucune exception na t lance,
renvoie le nom de la page afficher ensuite, listBooks.xhtml, qui affiche tous
les livres de la base.
Un lien sur cette page permet ensuite de revenir newBook.xhtml pour crer
un autre livre.
Le code de la page listBooks.xhtml utilise des composants diffrents, mais le
principe est le mme que celui de la page prcdente.
Le composant le plus important est celui qui affiche les donnes sous forme
dun tableau : <h:dataTable value= "#{bookController.bookList}" var ="bk">
Llment : <h:dataTable > est li lattribut bookList du backing bean (une
ArrayList de livres) et dclare la variable bk qui permettra de parcourir cette
liste. Dans cet lment, on peut ensuite utiliser des expressions comme
#{bk.isbn} pour obtenir lattribut isbn du livre.

2015/2016 Java Entreprise Edition 7 32

16
JSF 2.2 : application CD-Bookstore
Chaque colonne du tableau est dfinie par un lment <h:column>
<h:commandLink > cre un lien, si on clique dessus, appelle doNew()
du backing bean (celle-ci permet de revenir la page newBook.xhtml).

2015/2016 Java Entreprise Edition 7 33

JSF 2.2 : application CD-Bookstore


Le fichier de configuration web.xml : ce fichier est devenu facultatif depuis la
spcification Servlet 3.0. Avec JSF 2.2 on est en Servlet 3.1.
Les applications JSF ont besoin dune servlet nomme FacesServlet qui agit
comme contrleur frontal pour toute lapplication.
Cette servlet et son association doivent tre dfinies dans le fichier web.xml.
Le descripteur de dploiement associe la servlet les requtes dURL se
terminant par .faces, ce qui signifie que toute demande dune page se
terminant par .faces sera traite par FacesServlet.
Compilation et assemblage se font avec Maven 3
Le fichier pom.xml dclare toutes les dpendances ncessaires la
compilation du code (jsf-api, javax.ejb et javax.persistence) et prcise que
cette compilation utilisera JDK 1.7 et JSF 2.2 et faces-config.xml nest pas
obligatoire.

2015/2016 Java Entreprise Edition 7 34

17
JSF 2.2 : application CD-Bookstore
Pour compiler : ouvrir une fentre dos dans le rpertoire contenant pom.xml
et tapez : mvn package
Cette commande cre le fichier chapter10-1.0.war dans le rpertoire cible.
Ce fichier contient lentit Book, le bean BookEJB, le backing bean
BookController, les deux descripteurs (persistence.xml et web.xml) et les
deux pages web (newBook.xhtml et listBooks.xhtml).
Dploiement dans GlassFish 4 :
vrifiez que la base Derby sexcute et coute sur son port par dfaut,
ouvrez une fentre dos, placez vous dans le rpertoire target contenant le
fichier chapter10-1.0.war et entrez la commande :
asadmin deploy chapter10-1.0.war
Si le dploiement russit, la commande suivante devrait renvoyer le nom et
le type de lapplication. Ici on a deux type web et ejb.
asadmin list-components
chapter10-1.0 <ejb, web>
2015/2016 Java Entreprise Edition 7 35

JSF 2.2 : application CD-Bookstore


Excution de lapplication : lorsque lapplication a t dploye, ouvrez
votre navigateur et faites le pointer vers lURL :
http://localhost:8080/chapter10-1.0/newBook.faces
Le fichier point est newBook.faces, pas newBook.xhtml, car avec
lextension .faces JSF sait quil doit traiter la page avant de lafficher
Lorsque la page newBook saffiche, saisissez les informations et
cliquez sur le bouton denvoi du formulaire pour tre redirig sur la
page listBooks

2015/2016 Java Entreprise Edition 7 36

18
JSF 2.2 : application CD-Bookstore

2015/2016 Java Entreprise Edition 7 37

JSF 2.2 : application CD-Bookstore

2015/2016 Java Entreprise Edition 7 38

19