JSF2: Introduction
PRÉSENTÉE PAR:
EQUIPE JAVAEE ESPRIT
© 2019/2020 – ESPRIT
© 2019 – ESPRIT
Plan
–Introduction aux applications WEB
–Notion du SERVLET
–Présentation du modèle MVC1
–Introduction aux JSP
–Introduction à la spécification JSF
–Présentation du modèle MVC2
TP Premier projet JSF (Authentification), avec Managed Bean et Templating
–TP
© 2019 – ESPRIT
Architecture N-Tiers
© 2019 – ESPRIT
Architecture 4-Tiers
© 2019 – ESPRIT
SERVLET
• Un(e) servlet est une classe Java qui permet de créer dynamiquement des données au sein d'un serveur HTTP.
• Ces données sont présentées au format HTML
• Il s’agit du Contrôleur du design pattern MVC
• Exemple :
© 2019 – ESPRIT
SERVLET
public class Convertisseur extends HttpServlet {
public Convertisseur() { }
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String maVue = "/[Link]";
RequestDispatcher dispatcher = getServletContext().getRequestDispatcher
getRequestDispatcher(maVue);
[Link](request,response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String valCelsius = [Link]("celsius");
TemperatureService temperatureService = new TemperatureService(valCelsius);
TemperatureService
[Link]("ts", temperatureService);
String maVue = "/[Link]";
RequestDispatcher dispatcher = getServletContext().getRequestDispatcher
getRequestDispatcher(maVue);
[Link](request,response);
}
}
© 2019 – ESPRIT
JSP
• JSP (Java Server Pages)
ages) est une technique basée sur du Java, qui nous permet des créer des pages web dynamiques.
• Extension *.jsp
• <%-- Voici un commentaire JSP --%>
• <% nombreVisites++; // Code Java %>
• <%= variable %> Affiche le contenu de la variable dans la JSP
© 2019 – ESPRIT
JSP
<!-- [Link] -->
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[Link]
"[Link]
<%@ page isELIgnored="false"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Calculateur</title>
<link rel="stylesheet« href="${[Link]}/css/[Link]"
/[Link]" />
</head>
<body>
<p> Calculateur la température en Fahrenheit °F =( °C x 1,8 ) + 32 <br> Entrer la valeur de la température en Celsius : <br> </p>
<hr /> <form method="POST" action="${[Link]}/Convertisseur"
/Convertisseur">
<p> <b>Température en Clsius: </b> </p>
<input type="text" size="20" name="celsius" required /> <br /> <input
ype="submit" value="CalculerFahrenheit" />
</form> <hr />
</body> </html>
© 2019 – ESPRIT
[Link]
[Link] permet la redirection de la JSP vers la SERVLET :
<web-app>
<display-name>Archetype Created Web Application</display-name>
<servlet>
<servlet-name>Convertisseur</servlet-name>
<display-name>Convertisseur</display-name>
<description></description>
<servlet-class>[Link]</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Convertisseur</servlet-name>
<url-pattern>/Convertisseur</url-pattern>
</servlet-mapping>
</web-app>
© 2019 – ESPRIT
MVC1
• MVC est un motif de conception (“Design Pattern”) : Model – View – Control.
• Un Design Pattern est une solution standard à une problématique récurrente, reconnue comme une bonne pratique
(Singleton, DAO, …).
• Le MVC mène à une organisation rigoureuse et logique du code
– séparation/indépendance des couches
– définition de règles permettant de savoir où ajouter une fonctionnalité
– simplification de la maintenance et de l’évolutivité de chacune
– clarté indispensable pour les gros projets : gain de temps
© 2019 – ESPRIT
MVC1
• Le MVC sépare :
• Données : Modèle [DAO + SERVICE]
• IHM : Vue [WEB]
• Actions, coordonnées par des Contrôleurs [PRESENTATION]
• Une application Web JavaEE classique utilise les couches Web – Presentation – Service – DAO.
• Le Design Pattern DAO est venu pour épauler le Design Pattern MVC, et séparer clairement la couche accès à la
base de données de la couche de traitement.
© 2019 – ESPRIT
MVC1
© 2019 – ESPRIT
JSF
• JSF (Java Server Faces)) est une technologie utilisée côté serveur dont le but est de faciliter le développement de
l'interface utilisateur en séparant clairement la partie «interface» de la partie «métier».
• La spécification JSF définit le mode de fonctionnement.
• JSF possède une implémentation de référence qui s’appelle mojarra.
• La version 1.0 de Java Server Faces, développée sous la JSR-127
JSR (Java Specification Requests), a été validée en
mars 2004.
• La version stable JSF 2.2 est sortie en 2013.
© 2019 – ESPRIT
JSF - MVC2
• JSF se base sur la notion des composants :
<h:commandButton action="#{navigationController.moveToPage1}"
"#{navigationController.moveToPage1}" value="Page1" />
• Il se base sur le Design Pattern MVC :
– View : Les Facelets (.xhtml, .faces, .jsf)
– Control : [Link]
– Model : Les Managed Bean
© 2019 – ESPRIT
JSF - MVC2
© 2019 – ESPRIT
TP Premier Projet JSF
• TP - Authentification
• Utiliser un projet qui a été créé à partir de l’archetype wildfly-javaee7-webapp-ear-blank-archetype.
wildfly
• Exemple : ProjetUniversite ou UniversiteServeur
• Créer la structure suivante et Coder la fonctionnalités de login (suivre les slides suivants) :
• Ce TP introduira les notions de TEMPLATING et de MANAGED BEAN.
BEAN
JSF
Vue Globale
© 2019 – ESPRIT
EnseignantService (Projet UniversiteServeur-ejb)
UniversiteServeur
@Stateless
@LocalBean
public class EnseignantService implements EnseignantServiceRemote {
@PersistenceContext(unitName = "UniversiteServeur-ejb")
EntityManager em;
@Override
public Enseignant getEnseignantByEmailAndPassword(String email,, String password) {
TypedQuery<Enseignant> query =
[Link]("SELECT e FROM Enseignant e WHERE [Link]=:email
=:email AND [Link]=:password ", [Link]);
[Link]("email", email);
[Link]("password", password);
Enseignant enseignant = null;
try { enseignant = [Link](); }
catch (Exception e) { [Link]("Erreur : " + e); }
return enseignant;
}
© 2019 – ESPRIT
Managed Bean LoginBean
N’oubliez pas les getters et les setters des différent attributs
@ManagedBean
@SessionScoped
public class LoginBean implements Serializable {
private String login; private String password; private Enseignant enseignant;
enseignant private Boolean loggedIn;
@EJB
EnseignantService enseignantService;
public String doLogin() {
String navigateTo = "null";
enseignant = [Link](login,, password);
if (enseignant!= null && [Link]() == [Link]) {
navigateTo = "/pages/admin/welcome?faces-redirect=true"; loggedIn = true;
true }
else {
[Link]().addMessage("form:btn", new FacesMessage("Bad
FacesMessage Credentials"));}
return navigateTo; }
public String doLogout() {
[Link]().getExternalContext().invalidateSession(); ();
return "/login?faces-redirect=true"; }
© 2019 – ESPRIT
[Link]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" //EN" "[Link]
<ui:composition xmlns="[Link]
xmlns:f="[Link] xmlns:h="[Link]
"[Link]
xmlns:ui="[Link] template="/template/[Link]
[Link]">
<ui:param name="page_name" value="Connexion" />
<ui:define name="menu">
<h:form id="form">
<h1>Connexion</h1>
<h:panelGrid columns="2">
<h:outputText value="Login" /> <h:inputText value="#{[Link]}" }" />
<h:outputText value="Mot de passe" /> <h:inputSecret value="#{[Link]
[Link]}" />
<h:commandButton id="btn" value="Connexion" action="#{[Link]
[Link]()}" />
<h:message for="btn"/>
</h:panelGrid>
</h:form>
</ui:define>
</ui:composition>
© 2019 – ESPRIT
[Link]
<ui:composition xmlns="[Link]
xmlns:f="[Link]
xmlns:h="[Link]
xmlns:ui="[Link]
template="/template/[Link]">
<ui:param name="page_name" value="Accueil" />
<ui:define name="content">
<h:panelGroup>
<h:form>
<h:outputText value="Bonjour #{[Link]} #{[Link]
[Link]}" /> |
<h:commandLink value="Déconnexion" action="#{[Link]()}"
()}" />
</h:form>
</h:panelGroup>
</ui:define>
</ui:composition>
© 2019 – ESPRIT
[Link]
<ui:composition xmlns="[Link]
xmlns:f="[Link] xmlns:h="[Link]
"[Link]
xmlns:ui="[Link]
<h:panelGroup>
<b>Pied de Page</b>
</h:panelGroup>
</ui:composition>
© 2019 – ESPRIT
[Link]
<ui:composition xmlns="[Link]
xmlns:f="[Link]
xmlns:h="[Link]
xmlns:ui="[Link]
<h:panelGroup>
<b>En-tête</b>
</h:panelGroup>
</ui:composition>
© 2019 – ESPRIT
[Link]
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
//EN"
"[Link]
<html xmlns="[Link]
xmlns:h="[Link]
xmlns:f="[Link]
xmlns:ui="[Link]
<head>
<title>#{page_name}</title>
</head>
<body>
<ui:include src="/template/[Link]" />
<ui:insert name="menu" />
<ui:insert name="content" />
<ui:include src="/template/[Link]" />
</body>
</html>
© 2019 – ESPRIT
[Link]
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="[Link] xmlns="[Link]
xmlns
xsi:schemaLocation="[Link]
"[Link] [Link]
[Link] version="2.5">
<display-name>UniversiteServeur-web</display-name>
<welcome-file-list>
<welcome-file>[Link]</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>[Link]</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>
</web-app>
© 2019 – ESPRIT
AutoComplete
© 2019 – ESPRIT
Test du TP Premier Projet JSF
• Déployer votre projet sur Wildfly et tester
• Assurez vous que votre base de données tourne et que vous avez un utilisateur dans la table (email et
password doivent être renseignés).
• Lancer l’URL : [Link]
• (Vous pouvez ajouter un CSS pour améliorer l’affichage).
© 2019 – ESPRIT
Test du TP Premier Projet JSF
• Page de Login :
Page d’accueil après authentification :
© 2019 – ESPRIT
Dossier de déploiement
© 2019 – ESPRIT
Prochain Cours
• Finaliser la création de la page de login et la redirection selon le login et le mot de passe saisis
• CRUD en utilisant JSF
• Assurer les autres traitements (affectations, etc.) en utilisant JSF.
© 2019 – ESPRIT