Introduction JSF
JSF + Spring (CrudRepository)
UP ASI
Bureau E204
© 2020-2021 – ESPRIT – Module Architecture des SI II (Spring + JavaEE) – JSF + Spring CrudRepository 1
Plan
– Ajouter un Employé (h:form, h:outputText, h:inputText,
h:inputSecret, h:commandButton, h:selectBooleanCheckbox)
– Gérer les employés (h:selectOneMenu, f:selectItems)
– Récupérer la liste des Employés (h:dataTable)
– Supprimer un Employé
– Modifier un Employé
– Navigation (h:link)
© 2020-2021 – ESPRIT – Module Architecture des SI II (Spring + JavaEE) – JSF + Spring CrudRepository 2
AJOUTER UN EMPLOYÉ ([Link])
• Le travail est fait directement sur le TP timesheet, sur lequel vous
avez déjà fait le TP d’authentification avec JSF et Spring :
• Pour commencer :
• Mettre à jour l’entité [Link] : Remplacer private Boolean isActif; par :
private boolean actif;
• Ajouter les getter et setter du nouveau attribut. Mettre à jour les constructeurs de
[Link]
• Supprimer toutes les tables de la base de données. Faites un Run as Spring Boot
App pour régénérer les tables de nouveau.
© 2020-2021 – ESPRIT – Module Architecture des SI II (Spring + JavaEE) – JSF + Spring CrudRepository 3
AJOUTER UN EMPLOYÉ ([Link])
• Ajouter l’attribut private Employe authenticatedUser; dans [Link]
, et Ajouter son getter et son setter
• Changer les lignes :
• Employe employe=[Link](login, password);
• if (employe != null && [Link]() == [Link]) {
• Par :
• authenticatedUser=[Link](login, password);
• if (authenticatedUser != null && [Link]() ==
[Link]) {
• Dans [Link], remplacer
• <h:outputText value="Bonjour #{[Link]}" />
• Par :
• <h:outputText value="Bonjour #{employeController. [Link]} #{employeController.
[Link]}" />
• Ceci nous permettra de séparer l’utilisateur connecté, de l’employé que nous souhaitons
manipuler (CRUD).
© 2020-2021 – ESPRIT – Module Architecture des SI II (Spring + JavaEE) – JSF + Spring CrudRepository 4
AJOUTER UN EMPLOYÉ ([Link])
• Essayer de coder le formulaire suivant, en utilisant les tags
<h:outputText <h:inputText (voir page suivante) :
© 2020-2021 – ESPRIT – Module Architecture des SI II (Spring + JavaEE) – JSF + Spring CrudRepository 5
AJOUTER UN EMPLOYÉ ([Link])
Ajouter dans [Link] :
<h:panelGroup columns="2"><h:form><table>
<tr><td><h:outputText value="Login (Email)"></h:outputText></td><td><h:inputText
value="#{[Link]}"></h:inputText></td></tr>
<tr><td><h:outputText value="Mot de Passe"></h:outputText></td>
<td><h:inputSecret value="#{[Link]}"></h:inputSecret></td></tr>
<tr><td><h:outputText value="Nom"></h:outputText></td>
<td><h:inputText value="#{[Link]}"></h:inputText></td></tr>
<tr><td><h:outputText value="Prenom"></h:outputText></td>
<td><h:inputText value="#{[Link]}"></h:inputText></td></tr>
<tr><td><h:outputText value="Actif / Inactif"></h:outputText></td>
<td><h:selectBooleanCheckbox
value="#{[Link]}"></h:selectBooleanCheckbox></td></tr>
<tr><td colspan="2"> <h:commandButton value="Ajouter Employé"
action="#{[Link]()}" /></td></tr>
</table></h:form></h:panelGroup>
© 2020-2021 – ESPRIT – Module Architecture des SI II (Spring + JavaEE) – JSF + Spring CrudRepository 6
AJOUTER UN EMPLOYÉ (ControllerEmployeImpl)
Ajouter les attributs et la méthode suivante dans ControllerEmployeImpl,
private String prenom; private String nom; private String email;
private boolean actif; private Role role;
public void addEmploye() {
[Link](new Employe(nom, prenom, email, password, actif, role));
}
// N’oubliez pas les getters & setters de tous les attributs
Ajouter la méthode suivante dans [Link] (Mettre à jour l’interface aussi),
@Override
public int addOrUpdateEmploye(Employe employe) {
[Link](employe);
return [Link]();
}
Puis Tester l’Ajout dans la base de données.
PS : (L’attribut role sera null pour l’instant. Il sera géré dans les slides suivants : liste déroulante)
© 2020-2021 – ESPRIT – Module Architecture des SI II (Spring + JavaEE) – JSF + Spring CrudRepository 7
AJOUTER UN EMPLOYÉ (ENUM)
• L’Enum est déjà créé [Link] :
public enum Role
{ CHEF_DEPARTEMENT, ADMINISTRATEUR, INGENIEUR, TECHNICIEN }
• L’attribut role est déjà présent dans [Link] :
@Enumerated([Link]) private Role role;
• Mettre à jour [Link] :
public Role[] getRoles() { return [Link](); }
• Mettre à jour [Link] :
<tr>
<td><h:outputText value="Role"></h:outputText></td>
<td><h:selectOneMenu value="#{[Link]}">
<f:selectItem itemLabel="Choisir le Role" itemValue="#{null}" />
<f:selectItems value="#{[Link]}" />
</h:selectOneMenu></td>
</tr>
• Tester l’ajout d’un employé avec un rôle.
© 2020-2021 – ESPRIT – Module Architecture des SI II (Spring + JavaEE) – JSF + Spring CrudRepository 8
Récupérer la liste des Employés (Data Table)
© 2020-2021 – ESPRIT – Module Architecture des SI II (Spring + JavaEE) – JSF + Spring CrudRepository 9
Récupérer la liste des Employés ([Link])
Mettre à jour [Link] :
<h:panelGroup columns="2">
<h:form>
<h:dataTable value="#{[Link]}" var="employe" border="1">
<h:column><f:facet name="header"><h:outputText value="Login (Email)" /></f:facet>
<h:outputText value="#{[Link]}" /></h:column>
<h:column><f:facet name="header"><h:outputText value="Prenom" /></f:facet>
<h:outputText value="#{[Link]}" /></h:column>
<h:column><f:facet name="header"><h:outputText value="Nom" /></f:facet>
<h:outputText value="#{[Link]}" /></h:column>
<h:column><f:facet name="header"><h:outputText value="Role" /></f:facet>
<h:outputText value="#{[Link]}" /></h:column>
<h:column><f:facet name="header"><h:outputText value="Actif" /></f:facet>
<h:outputText value="#{[Link] == true ? 'Oui' : 'Non'}" /></h:column>
</h:dataTable>
</h:form>
</h:panelGroup>
© 2020-2021 – ESPRIT – Module Architecture des SI II (Spring + JavaEE) – JSF + Spring CrudRepository 10
Récupérer la liste des Employés
Mettre à jour [Link] et [Link] :
// [Link] :
private List<Employe> employes; // ajouter le getter et le setter
public List<Employe> getEmployes() {
employes = [Link]();
return employes;
}
// [Link] :
@Override
public List<Employe> getAllEmployes() {
return (List<Employe>) [Link]();
}
© 2020-2021 – ESPRIT – Module Architecture des SI II (Spring + JavaEE) – JSF + Spring CrudRepository 11
Supprimer un Employé
• Voir les indications dans la page suivante :
© 2020-2021 – ESPRIT – Module Architecture des SI II (Spring + JavaEE) – JSF + Spring CrudRepository 12
Supprimer un Employé
• Indications : Dans le tableau qui affiche la liste des employés (voir slide précédent), au
niveau de la colonne Action (Voici le code à associer avec le Bouton « Supprimer »
dans la JSF [Link] et dans le bean géré [Link]) :
• [Link] :
<h:column>
<f:facet name="header"><h:outputText value="Action" /></f:facet>
<h:commandButton action="#{[Link]([Link])}"
value="Supprimer" />
</h:column>
• [Link] :
public void removeEmploye(int employeId)
{
[Link](employeId);
}
© 2020-2021 – ESPRIT – Module Architecture des SI II (Spring + JavaEE) – JSF + Spring CrudRepository 13
Modifier un Employé
• Voir les indications dans les pages suivantes :
© 2020-2021 – ESPRIT – Module Architecture des SI II (Spring + JavaEE) – JSF + Spring CrudRepository 14
Modifier un Employé – Créer les Boutons
• Indication :
• Dans le tableau qui affiche la liste des employés (voir slide précédent) : Au niveau
de la colonne Action (Voici le code à associer avec le Bouton « Afficher » dans la
JSF, juste à côté du bouron « Supprimer ») :
<h:commandButton action="#{[Link](employe)}"
value="Afficher" />
• Au niveau du Bouton « Mettre à Jour » (juste à côté du bouton « Ajouter ») :
<h:commandButton value="Mettre A jour Employé"
action="#{[Link]()}" />
© 2020-2021 – ESPRIT – Module Architecture des SI II (Spring + JavaEE) – JSF + Spring CrudRepository 15
Modifier un Employé – Remplir le Formulaire
• Indication : Pour modifier un employé, on l’affiche tout d’abord:
• En cliquant sur Afficher, les données sont affichées comme suit, pour nous
permettre de les modifier :
• Dans [Link], ajouter :
private Integer employeIdToBeUpdated; // Ajouter getter et setter
public void displayEmploye(Employe empl)
{
[Link]([Link]());
[Link]([Link]());
[Link]([Link]());
[Link]([Link]());
[Link]([Link]());
[Link]([Link]());
[Link]([Link]());
}
© 2020-2021 – ESPRIT – Module Architecture des SI II (Spring + JavaEE) – JSF + Spring CrudRepository 16
Modifier un Employé – Mettre à jour dans la base
• Dans [Link] :
public void updateEmploye()
{ [Link](new Employe(employeIdToBeUpdated, nom,
prenom, email, password, actif, role)); }
• Dans [Link], la méthode addOrUpdate sera utilisée.
© 2020-2021 – ESPRIT – Module Architecture des SI II (Spring + JavaEE) – JSF + Spring CrudRepository 17
Modifier un Employé – Mettre à jour dans la base
• Attention : Il faut un constructeur avec en paramètre le “id” pour faire la mise à
jour de l’employé avec un “id” précis :
public Employe(int id, String prenom, String nom, String email, String
password, boolean actif, Role role) {
super();
[Link] = id;
[Link] = prenom;
[Link] = nom;
[Link] = email;
[Link] = password;
[Link] = actif;
[Link] = role;
}
© 2020-2021 – ESPRIT – Module Architecture des SI II (Spring + JavaEE) – JSF + Spring CrudRepository 18
Navigation (Voir code Slide Suivant)
[Link]
[Link] [Link]
© 2020-2021 – ESPRIT – Module Architecture des SI II (Spring + JavaEE) – JSF + Spring CrudRepository 19
Navigation ([Link])
Les chemins doivent etre relatifs a webapp
© 2020-2021 – ESPRIT – Module Architecture des SI II (Spring + JavaEE) – JSF + Spring CrudRepository 20
Introduction JSF
Si vous avez des questions, n’hésitez pas à nous
contacter :
Département Informatique
UP ASI
Bureau E204
© 2020-2021 – ESPRIT – Module Architecture des SI II (Spring + JavaEE) – JSF + Spring CrudRepository 21