4. Création des Interfaces Graphiques▲
Cette application sera constituée de sept pages Web :
- page Authentification ;
- Page Entête ;
- page Menu ;
- page Service ;
- page Personnel ;
- page Équipement ;
- page Interventions.
4-A. Page Authentification▲
h:outputTexth:inputSecreta4j:commandButtonnputSecreth:inputTextRich :panel
<%--
Document : Authentification
Created on : 25 janv. 2010, 21:30:57
Author : jihed
--%>
<%@taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<f:view>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Authentification</title>
</head>
<body >
<rich:spacer height="200px"></rich:spacer>
<center >
<rich:panel style="background-image:url(#{facesContext.externalContext.requestContextPath}/images/ajax/userauth.png);
background-repeat:no-repeat;background-position:-35px -15px;
;width:400px;" header="Authentification" styleClass="panel_3">
<h:panelGrid columns="3">
<h:outputText value="Login:" />
<h:inputText id="log" value="" required="true" requiredMessage="champs obligatoire" />
<rich:message for="log" style="color: red"/>
<h:outputText value="Mot de passe :" />
<h:inputSecret id="mdp" value="" required="true" requiredMessage="champs obligatoire" />
<rich:message for="mdp" style="color: red"/>
</h:panelGrid>
<rich:spacer height="30px"></rich:spacer>
<a4j:commandButton value ="Connexion" />
</rich:panel>
</center>
</body>
</html>
</f:view>4-B. Page Entête▲
La page entête sera incluse dans les pages : service, interventions, équipement et personnel
<%--
Document : Entete
Created on : 25 janv. 2010, 21:47:07
Author : jihed
--%>
<%@taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<h:panelGrid columns="10" >
<h:outputText id="dtjr" value="" styleClass="titre_gris"/>
<rich:spacer width="275px"/>
<h:outputText id="cnum" value="" styleClass="titre_bleu"/>
<rich:spacer width="6px"/>
<h:outputText value=" | " styleClass="titre2"/>
<rich:spacer width="6px"/>
<h:outputText id="nomuser" value="" styleClass="titre_bleu"/>
<rich:spacer width="275px"/>
<h:outputText value="" styleClass="titre_gris"/>
<h:form>
<h:panelGrid columns="3">
<a4j:commandButton image="/images/ajax/home.gif">
<rich:toolTip showDelay="500">
Acceuil
</rich:toolTip>
</a4j:commandButton>
<rich:spacer width="2px"/>
<a4j:commandButton id="dec_btn" image="/images/ajax/lock.gif">
<rich:toolTip showDelay="500">
Déconnexion
</rich:toolTip>
</a4j:commandButton>
</h:panelGrid>
</h:form>
</h:panelGrid>
</h:form> </h:panelGrid>4-C. Page Menu▲
La page menu sera incluse dans les pages : service, interventions, équipement et personnel
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<rich:toolBar itemSeparator="line" height="20px">
<rich:dropDownMenu>
<f:facet name="label">
<h:panelGrid cellpadding="0" cellspacing="0" columns="5"
style="vertical-align:middle">
<h:outputText value="Services"/>
</h:panelGrid>
</f:facet>
<rich:menuItem submitMode="none" value="Gestion service"
onclick="document.location.href='/TP-JSF/faces/Service.jsp'"/>
</rich:dropDownMenu>
<rich:dropDownMenu>
<f:facet name="label">
<h:panelGrid cellpadding="0" cellspacing="0" columns="5"
style="vertical-align:middle">
<h:outputText value="Personnel" />
</h:panelGrid>
</f:facet>
<rich:menuItem submitMode="none" value="Gestion Personnel"
onclick="document.location.href='/TP-JSF/faces/Personnel.jsp'"/>
</rich:dropDownMenu>
<rich:dropDownMenu>
<f:facet name="label">
<h:panelGrid cellpadding="0" cellspacing="0" columns="5"
style="vertical-align:middle">
<h:outputText value="Equipements" />
</h:panelGrid>
</f:facet>
<rich:menuItem submitMode="none" value="Gestion Equipements"
onclick="document.location.href='/TP-JSF/faces/Equipement.jsp'"/>
</rich:dropDownMenu>
<rich:dropDownMenu>
<f:facet name="label">
<h:panelGrid cellpadding="0" cellspacing="0" columns="1"
style="vertical-align:middle">
<h:outputText value="Interventions" />
</h:panelGrid>
</f:facet>
<rich:menuItem submitMode="none" value="Gestion Interventions"
onclick="document.location.href='/TP-JSF/faces/Interventions.jsp'"/>
</rich:dropDownMenu>
</rich:toolBar>4-D. Page Services▲
<%--
Document : Service
Created on : 12 déc. 2009, 23:46:35
Author : jihed
--%>
<%@taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<f:view>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<LINK rel="stylesheet" type="text/css" href="commun_styles.css"/>
<title>Service</title>
</head>
<body>
<h:form id="formservice">
<a4j:include viewId="Entete.jsp"/>
<a4j:include viewId="menu.jsp"/>
<rich:spacer height="50px" />
<h:outputText id="infomsg" value="" styleClass="valid_message"/>
<center>
<rich:tabPanel style="width:500px;">
<rich:tab label="Services">
<h:panelGrid width="450px" columns="1">
<rich:panel header="Liste Services" >
<rich:dataTable
onRowMouseOver="this.style.backgroundColor='#B5CEFD'"
onRowMouseOut="this.style.backgroundColor='#{org.richfaces.SKIN.tableBackgroundColor}'"
onRowClick="this.style.backgroundColor='#F1F1F1'"
rows="8" width="100%" id="tbl" value="" var="serv">
<rich:column>
<f:facet name="header">
<h:outputText value="Code" />
</f:facet>
<h:outputText value="" />
</rich:column>
<rich:column width="230px">
<f:facet name="header">
<h:outputText value="Libellé" />
</f:facet>
<h:outputText value="" />
</rich:column>
<rich:column style="text-align:center">
<f:facet name="header">
<h:outputText value="Modifier" />
</f:facet>
<a4j:commandLink >
<h:graphicImage style="border:0"url="/images/ajax/edit16.png" />
</a4j:commandLink>
</rich:column>
<rich:column style="text-align:center">
<f:facet name="header">
<h:outputText value="Supprimer" />
</f:facet>
<a4j:commandLink onclick="if(confirm('Voulez-vous confirmer la suppression ?') == false ) return false;" >
<h:graphicImage style="border:0" url="/images/ajax/delete16.png" />
</a4j:commandLink>
</rich:column>
<f:facet name="footer">
<rich:datascroller />
</f:facet>
</rich:dataTable>
</rich:panel>
<rich:panel header="Informations générales">
<h:panelGrid columns="2" width="350" >
<h:outputText value="Code Service : " />
<h:inputText id="codserv" value=""size="25" maxlength="30">
</h:inputText>
<h:outputText value="Libellé : " />
<h:inputText value="" id="libserv" size="25" maxlength="30" />
<h:outputText value="Description : " />
<h:inputText id="descrserv" value="" size="25" maxlength="50" />
</h:panelGrid>
</rich:panel>
</h:panelGrid>
<h:panelGrid id="crud_panel" columns="5">
<a4j:commandButton id="nouvserv" value="Nouveau" style="width:85px"/>
<a4j:commandButton id="modifserv" value="Modifier" style="width:85px"/>
<a4j:commandButton id="suppserv" value="Supprimer" style="width:85px"/>
<a4j:commandButton id="validserv" value="Valider" style="width:85px"/>
<a4j:commandButton id="annulserv" value="Annuler" style="width:85px"/>
</h:panelGrid>
</rich:tab>
</rich:tabPanel>
</center>
</h:form>
</body>
</html>
</f:view>4-E. Page Personnel▲
<%--
Document : Personnel
Created on : 25 janv. 2010, 23:50:10
Author : jihed
--%>
<%@taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<f:view>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<LINK rel="stylesheet" type="text/css" href="commun_styles.css"/>
<title>Personnel</title>
</head>
<body>
<h:form id="formpersonnel">
<a4j:include viewId="Entete.jsp"/>
<a4j:include viewId="menu.jsp"/>
<rich:spacer height="50px" />
<h:outputText id="infomsg" value="" styleClass="valid_message"/>
<center>
<rich:tabPanel style="width:500px;">
<rich:tab label="Personnel">
<h:panelGrid width="450px" columns="1">
<rich:panel header="Liste Personnel" >
<rich:dataTable
onRowMouseOver="this.style.backgroundColor='#B5CEFD'"
onRowMouseOut="this.style.backgroundColor='#{org.richfaces.SKIN.tableBackgroundColor}'"
onRowClick="this.style.backgroundColor='#F1F1F1'"
rows="8" width="100%" id="tbl" value="" var="pers">
<rich:column>
<f:facet name="header">
<h:outputText value="Nom" />
</f:facet>
<h:outputText value="" />
</rich:column>
<rich:column >
<f:facet name="header">
<h:outputText value="Prénom" />
</f:facet>
<h:outputText value="" />
</rich:column>
<rich:column >
<f:facet name="header">
<h:outputText value="Login" />
</f:facet>
<h:outputText value="" />
</rich:column>
<rich:column >
<f:facet name="header">
<h:outputText value="Droit" />
</f:facet>
<h:outputText value="" />
</rich:column>
<rich:column style="text-align:center">
<f:facet name="header">
<h:outputText value="Modifier" />
</f:facet>
<a4j:commandLink >
<h:graphicImage style="border:0"url="/images/ajax/edit16.png" />
</a4j:commandLink>
</rich:column>
<rich:column style="text-align:center">
<f:facet name="header">
<h:outputText value="Supprimer" />
</f:facet>
<a4j:commandLink onclick="if(confirm('Voulez-vous confirmer la suppression?') == false ) return false;" >
<h:graphicImage style="border:0" url="/images/ajax/delete16.png" />
</a4j:commandLink>
</rich:column>
<f:facet name="footer">
<rich:datascroller />
</f:facet>
</rich:dataTable>
</rich:panel>
<rich:panel header="Informations générales">
<h:panelGrid columns="2" width="350" >
<h:outputText value="Nom : " />
<h:inputText id="nompers" value="" size="25" maxlength="30">
</h:inputText>
<h:outputText value="Prénom : " />
<h:inputText value="" id="prepers" size="25" maxlength="30" />
<h:outputText value="Login : " />
<h:inputText id="logpers" value="" size="25" maxlength="50" />
<h:outputText value="Password : " />
<h:inputSecret id="pwdpers" value="" size="25" maxlength="50" />
<h:outputText value="Droit : " />
<h:selectOneRadio id="drpers" value="" disabled="">
<f:selectItem itemLabel="Utilisateur" itemValue="user" />
<f:selectItem itemLabel="Administrateur" itemValue="admin" />
</h:selectOneRadio>
<h:outputText value="Service : " />
<rich:comboBox id="servpers" defaultLabel="Entrez une valeur"
value="" required="true">
</rich:comboBox>
</h:panelGrid>
</rich:panel>
</h:panelGrid>
<h:panelGrid id="crud_panel" columns="5">
<a4j:commandButton id="nouvpers" value="Nouveau" style="width:85px"/>
<a4j:commandButton id="modifpers" value="Modifier" style="width:85px"/>
<a4j:commandButton id="supppers" value="Supprimer" style="width:85px"/>
<a4j:commandButton id="validpers" value="Valider" style="width:85px"/>
<a4j:commandButton id="annulpers" value="Annuler" style="width:85px"/>
</h:panelGrid>
</rich:tab>
</rich:tabPanel>
</center>
</h:form>
</body>
</html>
</f:view>4-F. Page Equipements▲
<%--
Document : Equipement
Created on : 25 janv. 2010, 23:50:10
Author : jihed
--%>
<%@taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<f:view>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<LINK rel="stylesheet" type="text/css" href="commun_styles.css"/>
<title>Equipement</title>
</head>
<body>
<h:form id="formequipement">
<a4j:include viewId="Entete.jsp"/>
<a4j:include viewId="menu.jsp"/>
<rich:spacer height="50px" />
<h:outputText id="infomsg" value="" styleClass="valid_message"/>
<center>
<rich:tabPanel style="width:500px;">
<rich:tab label="Equipement">
<h:panelGrid width="450px" columns="1">
<rich:panel header="Liste Equipement" >
<rich:dataTable
onRowMouseOver="this.style.backgroundColor='#B5CEFD'"
onRowMouseOut="this.style.backgroundColor='#{org.richfaces.SKIN.tableBackgroundColor}'"
onRowClick="this.style.backgroundColor='#F1F1F1'"
rows="8" width="100%" id="tbl" value="" var="equip">
<rich:column>
<f:facet name="header">
<h:outputText value="Libellé" />
</f:facet>
<h:outputText value="" />
</rich:column>
<rich:column >
<f:facet name="header">
<h:outputText value="Etat" />
</f:facet>
<h:outputText value="" />
</rich:column>
<rich:column >
<f:facet name="header">
<h:outputText value="Service" />
</f:facet>
<h:outputText value="" />
</rich:column>
<rich:column style="text-align:center">
<f:facet name="header">
<h:outputText value="Modifier" />
</f:facet>
<a4j:commandLink >
<h:graphicImage style="border:0"url="/images/ajax/edit16.png" />
</a4j:commandLink>
</rich:column>
<rich:column style="text-align:center">
<f:facet name="header">
<h:outputText value="Supprimer" />
</f:facet>
<a4j:commandLink onclick="if(confirm('Voulez-vous confirmer la suppression ?') == false ) return false;" >
<h:graphicImage style="border:0" url="/images/ajax/delete16.png" />
</a4j:commandLink>
</rich:column>
<f:facet name="footer">
<rich:datascroller />
</f:facet>
</rich:dataTable>
</rich:panel>
<rich:panel header="Informations générales">
<h:panelGrid columns="2" width="350" >
<h:outputText value="Libellé : " />
<h:inputText id="libquip" value="" size="25" maxlength="30">
</h:inputText>
<h:outputText value="Description : " />
<h:inputTextarea value="" id="descrequip" rows="3" />
<h:outputText value="Etat : " />
<h:selectOneRadio id="etatequip" value="" >
<f:selectItem itemLabel="Fonctionnel" itemValue="1" />
<f:selectItem itemLabel="En Panne" itemValue="0" />
</h:selectOneRadio>
<h:outputText value="Service : " />
<rich:comboBox id="servequip" defaultLabel="Entrez une valeur"
value="" required="true">
</rich:comboBox>
</h:panelGrid>
</rich:panel>
</h:panelGrid>
<h:panelGrid id="crud_panel" columns="5">
<a4j:commandButton id="nouvequip" value="Nouveau" style="width:85px"/>
<a4j:commandButton id="modifequip" value="Modifier" style="width:85px"/>
<a4j:commandButton id="suppequip" value="Supprimer" style="width:85px"/>
<a4j:commandButton id="validequip" value="Valider" style="width:85px"/>
<a4j:commandButton id="annulequip" value="Annuler" style="width:85px"/>
</h:panelGrid>
</rich:tab>
</rich:tabPanel>
</center>
</h:form>
</body>
</html>
</f:view>4-G. Page Interventions▲
<%--
Document : Intervention
Created on : 25 janv. 2010, 23:50:10
Author : jihed
--%>
<%@taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<f:view>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<LINK rel="stylesheet" type="text/css" href="commun_styles.css"/>
<title>Intervention</title>
</head>
<body>
<h:form id="formintervention">
<a4j:include viewId="Entete.jsp"/>
<a4j:include viewId="menu.jsp"/>
<rich:spacer height="50px" />
<h:outputText id="infomsg" value="" styleClass="valid_message"/>
<center>
<rich:tabPanel style="width:500px;">
<rich:tab label="Intervention">
<h:panelGrid width="450px" columns="1">
<rich:panel header="Liste Interventions" >
<rich:dataTable
onRowMouseOver="this.style.backgroundColor='#B5CEFD'"
onRowMouseOut="this.style.backgroundColor='#{org.richfaces.SKIN.tableBackgroundColor}'"
onRowClick="this.style.backgroundColor='#F1F1F1'"
rows="8" width="100%" id="tbl" value="" var="interv">
<rich:column>
<f:facet name="header">
<h:outputText value="Equipement" />
</f:facet>
<h:outputText value="" />
</rich:column>
<rich:column >
<f:facet name="header">
<h:outputText value="Intervenant" />
</f:facet>
<h:outputText value="" />
</rich:column>
<rich:column >
<f:facet name="header">
<h:outputText value="Date" />
</f:facet>
<h:outputText value="" >
<f:convertDateTime pattern="dd/MM/yyyy" />
</h:outputText>
</rich:column>
<rich:column style="text-align:center">
<f:facet name="header">
<h:outputText value="Modifier" />
</f:facet>
<a4j:commandLink >
<h:graphicImage style="border:0"url="/images/ajax/edit16.png" />
</a4j:commandLink>
</rich:column>
<rich:column style="text-align:center">
<f:facet name="header">
<h:outputText value="Supprimer" />
</f:facet>
<a4j:commandLink onclick="if(confirm('Voulez-vous confirmer la suppression ?') == false ) return false;" >
<h:graphicImage style="border:0" url="/images/ajax/delete16.png" />
</a4j:commandLink>
</rich:column>
<f:facet name="footer">
<rich:datascroller />
</f:facet>
</rich:dataTable>
</rich:panel>
<rich:panel header="Informations générales">
<h:panelGrid columns="2" width="350" >
<h:outputText value="Equipement : " />
<rich:comboBox id="eqpinterv" defaultLabel="Entrez une valeur" value="" required="true">
</rich:comboBox>
<h:outputText value="Intervenant : " />
<rich:comboBox id="persinterv" defaultLabel="Entrez une valeur" value="" required="true">
</rich:comboBox>
<h:outputText value="Date intervention : " />
<rich:calendar id="foFiscal" value="" popup="true" datePattern="dd/MM/yyyy"
cellWidth="24px" cellHeight="22px" />
</h:panelGrid>
</rich:panel>
</h:panelGrid>
<h:panelGrid id="crud_panel" columns="5">
<a4j:commandButton id="nouvinterv" value="Nouveau" style="width:85px"/>
<a4j:commandButton id="modifinterv" value="Modifier" style="width:85px"/>
<a4j:commandButton id="suppinterv" value="Supprimer" style="width:85px"/>
<a4j:commandButton id="validinterv" value="Valider" style="width:85px"/>
<a4j:commandButton id="annulinterv" value="Annuler" style="width:85px"/>
</h:panelGrid>
</rich:tab>
</rich:tabPanel>
</center>
</h:form>
</body>
</html>
</f:view>





