Réalisé un template JSF/Primeface avec la possibilité de ne rafraichir que la partie centrale.

**evine** · 19/09/2015, 09h49

Bonjour à Tous,
Je cherche à réalisé un POC en JSF/Primefaces 5 sur une petite navigation.
J'ai réalisé pour cela un temlate ayant : L'entête, le bas de pied, la partie gauche pour une navigation, et une partie centrale qui est composée d'une barre de menus en haut et d'une zone pour afficher les différentes pages.
Ceux que je souhaite c'est lorsque je clique sur un onglet de la barre de menu, seule la partie contenu et la barre de Menu se rafraichissent et non tous les composants, mais je n'y arrive pas. Merci par avance de votre aide.

Ci-dessous mon code:

Pour le template:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html" 
   xmlns:ui="http://java.sun.com/jsf/facelets"
   xmlns:f="http://java.sun.com/jsf/core"
   xmlns:p="http://primefaces.org/ui"
   lang="#{languageBean.language}">
 
   <h:head>
             <style type="text/css">
                .middlePanelClass   .ui-widget-content{
                  font-size: 12px;
                  background-color: #00698B;
                  font-family: 'Lucida Sans Unicode',Verdana,Arial,Helvetica,sans-serif;
               }
               .footerPanelClass {
                  font-size: 8px;
                  text-align: right;
                  background-color: #00698B;
                  font-family: 'Lucida Sans Unicode',Verdana,Arial,Helvetica,sans-serif;
               }
            </style>         
    </h:head>
 
   <h:body style="background-color: #00698B">      
           <p:layout fullPage="true">
                    <p:layoutUnit position="north" size="110" 
                        styleClass="middlePanelClass" style="background-color: aqua">
                        <ui:insert name="header" >            
                            <ui:include src="/pages/header.xhtml" />
                        </ui:insert>                 
                    </p:layoutUnit>
 
                    <p:layoutUnit position="center"  style="background-color: aqua">
                        <ui:insert name="tab" >                                    
                              <ui:include src="/tabMenu.xhtml" />
                         </ui:insert>
                    <ui:insert name="contentTab">             
                        <ui:include src="/pages/common/page1.xhtml" />        
                    </ui:insert>                                
                    </p:layoutUnit>
 
                    <p:layoutUnit position="west" size="200" header="BookMark" resizable="true" 
                                 closable="true" collapsible="true"   
                                 styleClass="middlePanelClass" style="background-color: aqua">
                        <ui:insert name="bookMark" >                            
                        <ui:include src="/pages/leftMenu.xhtml" />
                         </ui:insert>    
                    </p:layoutUnit>
 
                     <p:layoutUnit position="south" size="45" header="Header"
                         styleClass="footerPanelClass" style="background-color: aqua">
                     <ui:insert name="footer" />        
                    </p:layoutUnit>                 
            </p:layout>
   </h:body>
 
</html>

Pour les Tab Menu:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html xmlns:h="http://java.sun.com/jsf/html"
       xmlns:p="http://primefaces.org/ui"
       xmlns:f="http://java.sun.com/jsf/core"
        xmlns:ui="http://java.sun.com/jsf/facelets" >
   <h:head></h:head>
   <body>
    <ui:composition>
        <h:form> 
            <p:tabMenu activeIndex="#{param.activeTab}">
                <p:menuitem value="#{dico.page1}" url="/pages/page1.xhtml"  icon="ui-icon-star" update=":form">
                    <f:param name="activeTab" value="0" />
                </p:menuitem>
                <p:menuitem value="#{dico.page2}" url="/pages/page2.xhtml" icon="ui-icon-document" update=":form">
                    <f:param name="activeTab" value="1" />
                </p:menuitem>                        
            </p:tabMenu>
        </h:form>
    </ui:composition>
   </body>
</html>

Pour le header:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">
 
        <h:head>
             <style type="text/css">
                     .titleFieldCss {
                         font-size: 30px;
                         color: #FEF1EC;
                         font-family: 'Lucida Sans Unicode',Verdana,Arial,Helvetica,sans-serif;
                         margin-left: 10px;
                         margin-right: 20px;
                     }
                     .myProfilCss {
                         font-size: 12px;
                         color: #FEF1EC;
                         font-family: 'Lucida Sans Unicode',Verdana,Arial,Helvetica,sans-serif;
                         margin-left: 10px;
                         margin-right: 20px;
                     }
                     .panelGridCenter {
                        margin: 0 auto;
                        text-align: center;
                    }
 
                     .panelGridRight {
                        margin: 0 auto;
                        font-size: 12px;
                        color: #FEF1EC;
                        text-align: center;
                        margin-left: 70px;                
                    }
 
             </style>
        </h:head>
        <h:body>    
        <h:form prependId="false">
                    <h:panelGrid columns="6" styleClass="panelGridCenter" style="color: #FEF1EC" >
                       <h:graphicImage  library="images" name="scor.png" width="130"/>               
                       <h:outputLabel   styleClass="titleFieldCss"   value="#{dico.title}" />
                       <h:graphicImage library="images" name="java.png" width="45"/>
 
                       <h:panelGrid columns="1"  styleClass="panelGridRight">               
                           <h:outputLabel   value="#{dico.welcome}" style="color: #FEF1EC"  />
 
                           <h:outputLink value="/scor2bs/pages/common/authentification.xhtml" styleClass="myProfilCss">
                             <h:outputText value="Login" style="color: #FEF1EC"/>
                        </h:outputLink> 
 
                        <h:outputText value="#{dico.underconstruction}"  style="color: red" />                                      
                    </h:panelGrid>                    
 
                    <h:commandButton action="#{languageBean.changeLanguage('fr')}"    image="/resources/images/iconeFr.png"/>                    
                    <h:commandButton action="#{languageBean.changeLanguage('en')}" 
                            Value="English" 
                            image="/resources/images/iconeUs.png"
                            type="submit" 
                            alt="English mode" 
                            size="15"/>
 
                  </h:panelGrid>
        </h:form>
        </h:body>
</html>

Exemple de code d'affichage d'une page:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<ui:composition xmlns="http://www.w3.org/1999/xhtml" 
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                   xmlns:h="http://java.sun.com/jsf/html"                                    
                xmlns:p="http://primefaces.org/ui"
                template="/pages/template.xhtml">
   <h:head>
        <h:outputStylesheet library="css" name="common-style.css" />
    </h:head>  
    <ui:define name="bodyContent">   
          Coucou demo  page X   
       </ui:define>
</ui:composition>

Merci par avance pour votre aide.

Bien à tous,
DD

Réalisé un template JSF/Primeface avec la possibilité de ne rafraichir que la partie centrale.

JSF Java

Mode arborescent

Discussions similaires

Partager

Partager