Dans cet exemple, on va montre comment afficher les details d'une ligne séléctionné dans tableau jsf.
Les details seront afficher dans un dialogue.
Tout d'abord voici le code de l'objet employe.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| package exemple.model; | |
| public class Employe { | |
| int code; | |
| String nom; | |
| String titre; | |
| int age; | |
| Departement departement; | |
| public Employe(int code, String nom, String titre, int age, | |
| Departement departement) { | |
| this.code = code; | |
| this.nom = nom; | |
| this.titre = titre; | |
| this.age = age; | |
| this.departement = departement; | |
| } | |
| public Departement getDepartement() { | |
| return departement; | |
| } | |
| public void setDepartement(Departement departement) { | |
| this.departement = departement; | |
| } | |
| public Employe(int code, String nom, String titre, int age) { | |
| this.code = code; | |
| this.nom = nom; | |
| this.titre = titre; | |
| this.age = age; | |
| } | |
| public int getCode() { | |
| return code; | |
| } | |
| public void setCode(int code) { | |
| this.code = code; | |
| } | |
| public String getNom() { | |
| return nom; | |
| } | |
| public void setNom(String nom) { | |
| this.nom = nom; | |
| } | |
| public String getTitre() { | |
| return titre; | |
| } | |
| public void setTitre(String titre) { | |
| this.titre = titre; | |
| } | |
| public int getAge() { | |
| return age; | |
| } | |
| public void setAge(int age) { | |
| this.age = age; | |
| } | |
| } |
La classe departement.chaque employe appartient à un departement.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| package exemple.model; | |
| import java.util.List; | |
| public class Departement { | |
| int id; | |
| String libelle; | |
| List<Employe> listemploye; | |
| public Departement(int id, String libelle) { | |
| this.id = id; | |
| this.libelle = libelle; | |
| } | |
| public int getId() { | |
| return id; | |
| } | |
| public void setId(int id) { | |
| this.id = id; | |
| } | |
| public String getLibelle() { | |
| return libelle; | |
| } | |
| public void setLibelle(String libelle) { | |
| this.libelle = libelle; | |
| } | |
| public List<Employe> getListemploye() { | |
| return listemploye; | |
| } | |
| public void setListemploye(List<Employe> listemploye) { | |
| this.listemploye = listemploye; | |
| } | |
| } |
La classe ServiceBean qui est le managedBean:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| package exemple.service; | |
| import java.util.ArrayList; | |
| import java.util.List; | |
| import javax.faces.bean.ManagedBean; | |
| import javax.faces.bean.SessionScoped; | |
| import exemple.model.Departement; | |
| import exemple.model.Employe; | |
| @ManagedBean | |
| @SessionScoped | |
| public class ServiceBean { | |
| private Employe selectedEmploye; | |
| private List<Employe> listEmploye=new ArrayList<Employe>(); | |
| public ServiceBean() { | |
| Departement departmentdev = new Departement(1, "Developpement"); | |
| Departement departmenttech =new Departement(2, "Technique"); | |
| Employe emp1 = new Employe(2, "jean","directeur",42,departmentdev); | |
| Employe emp2 = new Employe(3, "sondes","sous directeur",46,departmentdev); | |
| Employe emp3 = new Employe(4, "ali","directeur",35,departmenttech); | |
| Employe emp4 = new Employe(5, "wael","chef service",35,departmenttech); | |
| listEmploye.add(emp1); | |
| listEmploye.add(emp2); | |
| listEmploye.add(emp3); | |
| listEmploye.add(emp4); | |
| } | |
| public List<Employe> getListEmploye() { | |
| return listEmploye; | |
| } | |
| public void setListEmploye(List<Employe> listEmploye) { | |
| this.listEmploye = listEmploye; | |
| } | |
| public Employe getSelectedEmploye() { | |
| return selectedEmploye; | |
| } | |
| public void setSelectedEmploye(Employe selectedEmploye) { | |
| this.selectedEmploye = selectedEmploye; | |
| } | |
| } |
finalement la page web :
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html xmlns="http://www.w3.org/1999/xhtml" | |
| xmlns:h="http://java.sun.com/jsf/html" | |
| xmlns:f="http://java.sun.com/jsf/core" | |
| xmlns:ui="http://java.sun.com/jsf/facelets" | |
| xmlns:p="http://primefaces.org/ui"> | |
| <h:head> | |
| <title>login</title> | |
| </h:head> | |
| <h:body > | |
| <p:layout fullPage="true" > | |
| <p:layoutUnit id="top" position="center" size="150"> | |
| <h:form id="form"> | |
| <p:dataTable value="#{serviceBean.listEmploye}" var="employe"> | |
| <f:facet name="header"> | |
| List des employes | |
| </f:facet> | |
| <p:column headerText="Code"> | |
| <h:outputText value="#{employe.code}" /> | |
| </p:column> | |
| <p:column headerText="Titre"> | |
| <h:outputText value="#{employe.titre}" /> | |
| </p:column> | |
| <p:column style="width:24px"> | |
| <p:commandLink update=":form:panel" oncomplete="PF('documentDialog').show()" title="View Detail" styleClass="ui-icon ui-icon-search"> | |
| <f:setPropertyActionListener value="#{employe}" target="#{serviceBean.selectedEmploye}" /> | |
| </p:commandLink> | |
| </p:column> | |
| </p:dataTable> | |
| <p:dialog id="dialog" header=" Detail employe" showEffect="fade" widgetVar="documentDialog" width="400" height="200"> | |
| <p:outputPanel id="panel"> | |
| <p:panelGrid columns="2" > | |
| <h:outputLabel for="name" value="Nom " /> | |
| <h:outputText id="name" value="#{serviceBean.selectedEmploye.nom}" style="font-weight:bold" /> | |
| <h:outputLabel for="age" value="Age: " /> | |
| <h:outputText id="age" value="#{serviceBean.selectedEmploye.age}" style="font-weight:bold" /> | |
| <h:outputLabel for="departement" value="Departement: " /> | |
| <h:outputText id="departement" value="#{serviceBean.selectedEmploye.departement.libelle}" style="font-weight:bold" /> | |
| <h:outputLabel for="Titre" value="Titre: " /> | |
| <h:outputText id="Titre" value="#{serviceBean.selectedEmploye.titre}" style="font-weight:bold" /> | |
| </p:panelGrid> | |
| </p:outputPanel> | |
| </p:dialog> | |
| </h:form> | |
| </p:layoutUnit> | |
| <p:layoutUnit id="bottom" position="south" size="60"> | |
| </p:layoutUnit> | |
| <p:layoutUnit id="top1" position="north" size="150"> | |
| </p:layoutUnit> | |
| </p:layout> | |
| </h:body> | |
| </html> |
No comments:
Post a Comment