Template AJAX avec PrimeFaces

Version imprimable

Bonjour,

Je souhaiterais pouvoir faire changer le contenu de ma page sans que mon menu se rafraîchisse mais je n'y arrive pas.

code du template "commonTempate" :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<p:layoutUnit id="left" position="west" size="250" collapsible="true" header="MENU">
                <h:form>
                    <p:slideMenu style="width: auto;">  
                        <p:submenu label="Société" icon="ui-icon-home" style="margin-bottom: 60px">  
                            <p:menuitem value="Informations"/>
                            <p:menuitem value="Contacts" actionListener="#{templateBean.openPage('/view/contactSociete.xhtml?faces-redirect=true')}" update=":center" />
                        </p:submenu>  
                    </p:slideMenu>
                </h:form>
            </p:layoutUnit>
 
            <p:layoutUnit id="center" position="center">
                    <p:growl sticky="4000" id="commonMessages"/>
                    <ui:include  src="#{templateBean.page}"/>
            </p:layoutUnit>

Code du Bean "TemplateBean.java"

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
@Named
@RequestScoped
public class TemplateBean {
 
    private String page;
 
    public TemplateBean() {
        this.page = "";
    }
 
    public String getPage() {
            return page;
    }
 
    public void setPage(String page) {
        this.page = page;
    }
 
    public void openPage(String src){
        this.page = src; 
    }
 
}

Code de la page "contactSociete.xhtml" à afficher lors du click sur le menuitem "contact"

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">
 
    <body>
          Contact
    </body>
 
 
 
</html>

merci de m'apporter votre aide :)

19/11/2013, 13h00
ghiwani80

tu dois utiliser les facletes

voici un exemple

http://www.mkyong.com/jsf2/jsf-2-tem...elets-example/
19/11/2013, 13h57
Reisors

ajax ?

Oui j'ai déjà vu ce post, le truc c'est qu'avec un <ui:insert /> c'est la page demandé qui appel le Template , donc sa ne peut pas marcher.

Je me trompe ?

si tu vx faire avec les facelet:

tu définis un templateBase.xhtml

Code:

1
2
3
4
5
6
7
8
9
10
11
12
...
<f:view>
     <div id="DIV_MENU" >
           .....
            <p:menuitem value="Contacts" actionListener="ton traitement"  action="REDIRECT_VERS_PAGE_CONTACT"/>
      </div>
      <div id="DIV_CONTENU" >
            <ui:insert name="CONTENU"/>
      </div>

</f:view>

ensuite dans la page contats.xhtml

Code:

1
2
3
4
5
6
7
8
9
10
11
...
     <ui:composition template="templateBase.xhtml">
               <ui:define name="CONTENU">
                    
                    ICI tu ajoute ton text
                    

                </ui:define>
		 
	</ui:composition>

n'oublie pas définir la navigation

23/11/2013, 12h38
Reisors

...
Mais pourquoi vous répondez à mon post sans avoir essayer de comprendre se que je voulais, c'est hallucinant !

1) Dans le titre c'est marqué "Template AJAX ", où est l'ajax dans ce que tu me propose comme solution ! (Et oui si vous le savez pas l'ajax permet de ne pas avoir à rafraîchir le contenu de la page toute entière !)

2) Deuxième ligne de mon post : "Je souhaiterais pouvoir faire changer le contenu de ma page sans que mon menu se rafraîchisse". dans ton exemple tout est en dure, comment on peut avoir un truc dynamique sans EL ?

3) Je suis débutant en J2EE si je vient ici c'est parce que comme tous le monde qui post ici, j'ai tout essayer avant, et que je suis désespérer, dans ton code il y a même pas le Bean correspondant, au secours !

Alors aux lieu de pourrir mon poste arrête juste d’écrire un truc juste pour me répondre sans donnée de solution !

Merci et désolé pour sa mais j'en ai vraiment marre à chaque vois on répond à coté de la plaque, j'ai poster pour trouver une solution pas pour expliquer le fonctionnement de J2EE à chaque reponse !

Pour ton info pour faire une redirection simple avec les facelets sans ajax il faut faire un :
Code:

1 2 <p:menuitem value="nomDeTonMenu" outcome="nomDeTaPageVersLaquelTuVeuxAller" />
c'est tout pas besoin d'actionListener et d'un action !
25/11/2013, 10h54
Alkhan

bonjour,

Première chose on agresse pas quelqu'un qui essai de t'aider, pour la simple et bonne raison que plus personne ne voudra d'aidé si tu es agressif lors que l'on te fourni une réponse qui ne te conviens pas !

Maintenant, revenons a ton problème !

Je commencerais par supprimer "?faces-redirect=true".

et dis moi si c'est mieux...
26/11/2013, 10h42
ghiwani80

Bonjour
Mr Reisors, Je suis très surpris de ta réaction qui dépasse celle d'un d'un "ingénieur" à la recherche de l'aide,

et vue que tu es débutant, je me permet de te rappeler un principe que nous avons appris à l’école et qui me semble que t as oublié déjà, c'est de respecter et savoir accepter les réponses des autres,

si ma réponse ne te convient pas, et si tu trouve que j ai pourri ton poste, je suis désolé, mais sache que je n'ai cherché qu'a t aider.

courage Mr Reisors

Hehehe

Youhou !

Enfin j'ai réussi à faire ce que je voulais !

Pour ceux que sa intéresse :

Il fallait juste entourer l'include d'une balise <h:form/> et mettre l'update du <p:menuItem/> uniquement sur ce formulaire !

Attention : le <p:growl/> ne doit pas être dans le formulaire !

Donc voici le code qui marche :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<p:layoutUnit id="left" position="west" size="250" collapsible="true" header="MENU">
                <h:form> 
                    <p:slideMenu style="width: auto;">  
                        <p:submenu label="Société" icon="ui-icon-home" style="margin-bottom: 60px">
                            <p:menuitem value="Informations" update=":form"/>
                            <p:menuitem value="Contacts" actionListener="#{templateBean.openPage('/view/contactSociete.xhtml')}" update=":form" />
                        </p:submenu>  
                    </p:slideMenu>
                </h:form>
            </p:layoutUnit>
 
 
            <p:layoutUnit id="pppp" position="center">
                <p:growl sticky="4000" id="commonMessages" showDetail="true"/>
                <h:form id="form">
                    <ui:include src="#{templateBean.page}"  />
                </h:form>
            </p:layoutUnit>

Le Bean reste le même