[Primefaces]actions sur les menusitem

**rolls** · 26/06/2013, 10h17

Bonjour la communauté,
Encore une question sur primefaces(que je continu à découvrir)

Pour créer mon écran principal, j'ai utilisé le composant layout reparti en cinq zones.

Dans la zone MENU HORIZONTAL(voir pièce jointe), j'ai placé un menu.
Jusque la tout se passe bien

.
Je voudrais maintenant gérer les évènements sur les items du menu.
En fait j'ai une page saisie.xhtml qui contient un formulaire j'aimerai que lorsque l'utilisateur cliquera sur le menuitem saisie, que le contenu de la page saisie.xhtml s'affiche dans la zone CORPS DE LA PAGE

Merci d'avance

**johnlobs** · 26/06/2013, 14h37

bonjour je ne vois pas vraiment ce que tu veux faire mais si c'est lier une action a un element du menu tu dois normalement aller dans le code html de ta page jsf et mettre l'action correspondante{#.....}
http://www.developpez.net/forums/d59...vers-page-jsf/
ca pourra peut etre t'aider

**ahmedpa** · 26/06/2013, 17h56

pour faire je pense avec attribut url

**rolls** · 26/06/2013, 19h59

Mon idée c'est d'utiliser une seule page qui sera ma page d'accueil.
même si l'utilisateur clique sur un élément du menu, il reste toujours sur la même et la ressource demandée s'affiche dans le panel central(un peut comme les client riches en VB6).

**ahmedpa** · 26/06/2013, 21h56

ah ok il faut que tu utilise l'attribut rendered il permet d'afficher un panel lors d'un clique utilisateur.donc il te suffit de faire le design de tout le menu avec tous les panneaux ensuite tu utilise pour chaque panel cette attribut qui prend une valeur booléenne tel que lors de clique on affiche et ainsi de suite sur la même page

**rolls** · 27/06/2013, 10h43

Envoyé par ahmedpa

ah ok il faut que tu utilise l'attribut rendered il permet d'afficher un panel lors d'un clique utilisateur.donc il te suffit de faire le design de tout le menu avec tous les panneaux ensuite tu utilise pour chaque panel cette attribut qui prend une valeur booléenne tel que lors de clique on affiche et ainsi de suite sur la même page

Je te donne mon code.

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<?xml version="1.0" encoding="UTF-8"?>
<!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:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pe="http://primefaces.org/ui"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:display="http://displaytag.sf.net">
 
    <f:view contentType="text/html">
        <h:head>
            <f:facet name="first">
                <meta http-equiv="X-UA-Compatible" content="EmulateIE8" />
                <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
                <title>EasyHT</title>
            </f:facet>
 
           <!--   <link type="text/css" rel="stylesheet" href="#{request.contextPath}/css/default.css" />
            <link type="text/css" rel="stylesheet" href="#{request.contextPath}/css/syntaxhighlighter/syntaxhighlighter.css" />-->
            <style type="text/css">
                .ui-layout-north {
                    z-index:20 !important;
                    overflow:visible !important;;
                }
 
                .ui-layout-north .ui-layout-unit-content {
                    overflow:visible !important;
                }
            </style>
        </h:head>
 
 
        <h:body>
 
 
            <p:layout fullPage="true"  style="margin:0px; cellpading:0;padding:0px; background-color:#FF0000" >
                <p:layoutUnit id="top" position="north" resizable="true"  rendered="true"  >
                	<h:form>
	                <p:menubar autoDisplay="false" style="height:24px; font-size:12px; font-family:'Times New Roman';  font-weight:bold; cellspacing:0px; cellpading:0px"   >
	                        <p:submenu label="Fichier" icon="ui-icon-document" style="height:20px; "  >
	                            <p:submenu label="Nouveau" icon="ui-icon-contact">
	                                <p:menuitem value="Etudiants" rendered="true" action="#{LayoutBean.setName('creerEtudiant.xhtml')}" update=":center" />
	                                <p:menuitem value="Professeurs" url="/Login.jsp" />
	                            </p:submenu>
	                            <p:menuitem value="Quitter" url="#" />
	                        </p:submenu>
 
	                        <p:submenu label="Aide" icon="ui-icon-help" style="height:20px; " >
	                            <p:menuitem value="Contents" url="#" />
	                            <p:menuitem value="A propos de EasyHT" url="#" onclick="dlg_aide_apropos.show();" />
	                        </p:submenu>
	                    </p:menubar>
	                    </h:form>
 
                    <p:toolbar style="height:20px">  
					    <p:toolbarGroup align="left" style="height:20px">  
					        <p:commandButton type="button" title="New" icon="ui-icon-document" style="height:20px" />					  
					        <p:commandButton type="button" title="Open" icon="ui-icon-folder-open" style="height:20px" />  					  
 
 
					        <p:commandButton type="button" title="Save" icon="ui-icon-disk" style="height:20px"/>  
					        <p:commandButton type="button" title="Delete" icon="ui-icon-trash" style="height:20px"/>  
					        <p:commandButton type="button" title="Print" icon="ui-icon-print" style="height:20px"/>  
					    </p:toolbarGroup> 					  
					 </p:toolbar>
 
                </p:layoutUnit>
 
                <p:layoutUnit id="bottom" position="south" size="60"  rendered="true" >
 
                </p:layoutUnit>
 
                <p:layoutUnit id="left"  rendered="true"   position="west" size="250" resizable="true" closable="true" collapsible="true" header="Options" maxSize="250" minSize="200"  style="height:24px; font-size:12px; font-family:'Times New Roman';  font-weight:bold; cellspacing:0px; cellpading:0px"  >
 
                     <p:accordionPanel>
                        <p:tab title="Menu 1">                            
                            <p:calendar mode="inline" navigator="none"/>
                        </p:tab>
 
                        <p:tab title="Menu 2">
                            <h:outputText value="Menu 2 Content" />
                        </p:tab>
 
                        <p:tab title="Menu 3">
                            <h:outputText value="Menu 3 Content" />
                        </p:tab>
                    </p:accordionPanel>  
                </p:layoutUnit>
 
                <p:layoutUnit  rendered="true"  id="right" position="east" size="250" header="Gallery" resizable="true" closable="true" collapsible="true"
                              style="height:24px; font-size:12px; font-family:'Times New Roman';  font-weight:bold; cellspacing:0px; cellpading:0px"  >
 
                    <p:lightBox style="text-align:center;margin-top:20px;">
                        <h:outputLink value="#{request.contextPath}/images/nature1.jpg" title="Nature 1" style="margin-bottom:5px;">
                            <h:graphicImage value="/images/nature1_small.jpg"/>
                        </h:outputLink>
 
                        <h:outputLink value="#{request.contextPath}/images/nature2.jpg" title="Nature 2" style="margin-bottom:2px;">
                            <h:graphicImage value="/images/nature2_small.jpg"/>
                        </h:outputLink>
 
                        <h:outputLink value="#{request.contextPath}/images/nature3.jpg" title="Nature 3" style="margin-bottom:2px;">
                            <h:graphicImage value="/images/nature3_small.jpg"/>
                        </h:outputLink>
 
                        <h:outputLink value="#{request.contextPath}/images/nature4.jpg" title="Nature 4" style="margin-bottom:2px;">
                            <h:graphicImage value="/images/nature4_small.jpg"/>
                        </h:outputLink>
                    </p:lightBox>
 
 
 
                </p:layoutUnit>
 
                <p:layoutUnit id="center" position="center"   rendered="true" >
                     <h:form>
 
                    	<!-- JE VEUX QUE LE CONTENU S'affiche ICI -->                    	
                    </h:form>
 
                </p:layoutUnit>
 
            </p:layout>
 
        </h:body>
 
    </f:view>
</html>

[Primefaces]actions sur les menusitem

JSF Java

Vue hybride

Discussions similaires

Partager

Partager