[Primefaces]actions sur les menusitem

Version imprimable

26/06/2013, 10h17
rolls

1 pièce(s) jointe(s)

[Primefaces]actions sur les menusitem

Bonjour la communauté,
Encore une question sur primefaces(que je continu à découvrir):mrgreen:
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:D.
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
26/06/2013, 14h37
johnlobs

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
26/06/2013, 17h56
ahmedpa

pour faire je pense avec attribut url
26/06/2013, 19h59
rolls

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).:calim2:
26/06/2013, 21h56
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

Citation:

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:

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>

28/06/2013, 11h26
ellix86

Bonjour,

Je vous suggère d'utiliser les templates de JSF.
Voici un lien expliquant les possibilités [Lien]

Cordialement
28/06/2013, 12h31
rolls

Citation:

Envoyé par ellix86

Bonjour,

Je vous suggère d'utiliser les templates de JSF.
Voici un lien expliquant les possibilités [Lien]

Cordialement

Merci pour le lien.
Je tiens à utiliser le composant layout. tout simplement parce que je veux implémenter plutard le drag and drop sur certain composant.

:cry: j'ai essayé pas mal de solutions proposées à cet effet mais toujours rien:cry:
28/06/2013, 13h54
ellix86

Citation:

Envoyé par rolls

Merci pour le lien.
Je tiens à utiliser le composant layout. tout simplement parce que je veux implémenter plutard le drag and drop sur certain composant.

:cry: j'ai essayé pas mal de solutions proposées à cet effet mais toujours rien:cry:

L'un n’empêche pas l'autre il me semble.

Dans un template.xhtml, on y défini les composant layout avec une zone d'inclusion dans le composant du centre et quand vous appelez creerEtudiant.xhtml (qui utilise le template.xhtml) vous ne modifiez que le centre du layout, le reste est pareil pour toutes les pages.
04/07/2013, 16h54
rolls

Citation:

Envoyé par ellix86

L'un n’empêche pas l'autre il me semble.

Dans un template.xhtml, on y défini les composant layout avec une zone d'inclusion dans le composant du centre et quand vous appelez creerEtudiant.xhtml (qui utilise le template.xhtml) vous ne modifiez que le centre du layout, le reste est pareil pour toutes les pages.

J'ai regardé et je pense que ça fait mon affaire.
Merci:ccool: