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

**Cafeinoman** · 19/09/2015, 11h21

Alors, déjà, utilise les balises pour ton code, c'est plus lisible.

Externalise tes css aussi, ce sera plus propre.

Ensuite, ne mélange pas insert et include. C'est include pour tout, sauf ton centre.

Dans les parties que tu inclus, tu vire les head, body etc. Ils ne servent pas, tu n'inclut qu'une partie de page. Et surtout pas de composition!

Dans ta parti centrale, pareil, sauf qu'il te faut la composition, et une référence vers ton template.

Ensuite, tu sort ta form des page insérées et tu lui fait encadrer ton insert. Et tu met pour ton insert

Code :

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

1
2
 
<ui:insert name=#{tonBean.pageCentrale} />

ce qui te permet d'avoir un insert dynamique, tout en évitant d'avoir à répliquer ta balise form dans chaque page.

Pour ton menu, tu fait des menuItem comme ça :

Code :

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

1
2
 
<p:menuItem value="le nom de page" actionListener="#{tonBean.setPageCentrale('le nom de ta page')}" ajax=true update=:form/>

Et tu devrais avoir un update en Ajax de ta page centrale.

Après c'est de mémoire, donc il y a peut-être une erreur...

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

JSF Java

Vue hybride

Discussions similaires

Partager

Partager