Template AJAX avec PrimeFaces

**Reisors** · 19/11/2013, 11h47

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 :

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
 
<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 :

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
 
@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 :

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

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

**ghiwani80** · 19/11/2013, 13h00

tu dois utiliser les facletes

voici un exemple

http://www.mkyong.com/jsf2/jsf-2-tem...elets-example/

**Reisors** · 19/11/2013, 13h57

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 ?

**ghiwani80** · 21/11/2013, 12h52

si tu vx faire avec les facelet:

tu définis un templateBase.xhtml

Code :

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

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 :

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

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

**Reisors** · 23/11/2013, 12h38

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 :

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

1
2
 
<p:menuitem value="nomDeTonMenu" outcome="nomDeTaPageVersLaquelTuVeuxAller" />

c'est tout pas besoin d'actionListener et d'un action !

**Alkhan** · 25/11/2013, 10h54

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...

**ghiwani80** · 26/11/2013, 10h42

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

**Reisors** · 30/11/2013, 17h43

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 :

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
 
<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

Template AJAX avec PrimeFaces

JSF Java

Discussions similaires

Partager

Partager