Création d'un custom menu

**stephane92400** · 17/09/2007, 14h29

Bonjour à tous,

J'aimerais faire mon propre menu en me basant sur ce 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
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
 
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
 
<%@page import="org.dom4j.Document"%>
<%@page import="org.dom4j.Element" %>
<%@page import="org.apache.commons.lang.StringUtils"%>
<%@page import="java.util.List"%>
<jsp:useBean id="user" class="com.acticall.leclerc.bean.User" scope="session" />
<% 
if(user.getUser_name()==null){
  FacesContext fc = FacesContext.getCurrentInstance();
  Controleur bean = (Controleur) fc.getApplication().createValueBinding("#{controleur}").getValue(fc);
  user.setUser_name(bean.getUser().getUser_name());
  user=(User) UserDao.getInstance().getVerifUsers(user.getUser_name());
  session.setAttribute("user", user);
}
 if (session.getAttribute("nav_idx") == null)  session.setAttribute("nav_idx", "1.x");
 Document dom = (Document) getServletContext().getAttribute("navigation");
 String[] idx = StringUtils.split((String) session.getAttribute("nav_idx"), ".");
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<%@page import="javax.faces.context.FacesContext"%>
<%@page import="controleur.Controleur"%>
<%@page import="com.acticall.leclerc.bean.User"%>
<%@page import="com.acticall.leclerc.dao.UserDao"%>
<html>
<head> 
 <link href="<%=request.getContextPath() %>/static/css/base.css" type=text/css rel=stylesheet>
 <link href="<%=request.getContextPath() %>/nav/ressources/menu.css" type=text/css rel=stylesheet>
 <style type=text/css>
 #Level2Container {
	background-color: #437FAD
	/*old : #437FAD*/
 }
 td.tabOn {
	background-color: #437FAD
 }
 td.tabOff A:hover {
	background-color: #98BDDA
 }
 td.tabOn {
	BORDER-bottom: #437FAD 1px solid
 }
 .spacer {
	COLOR: white
 }
 </style>
</head>
 
<body>
<div id="TabbedMenu">
 
<table cellSpacing="0" cellpadding="0">
<tbody>
<tr>
 <td><img height="1" src="<%=request.getContextPath() %>/nav/ressources/trans.gif" width="245"></td>
 <td style="width: 100%"></td>
</tr>
<tr>
 <td style="padding-left: 15px;"><img src="<%=request.getContextPath() %>/static/img/client.gif"/></td>
 <td style="padding-right: 15px">
  <div style="padding-bottom:10px"><%= user.getUser_id() %> &nbsp; | &nbsp; <a href="<%=request.getContextPath()%>/index.jsp" class="blue">Se déconnecter</a></div>
  <div id="Level1Container">
   <table cellSpacing="0" cellpadding="0" width="100%">
   <tbody>
   <tr>
    <td><img height="30" src="<%=request.getContextPath() %>/nav/ressources/trans.gif" width=1></td>
    <td><div id="Level1Title" style="text-align:center;width:100%"><span>ELeclerc</span></div></td>
   </tr>
   <tr>
    <td style="padding-right: 10px; padding-left: 10px; padding-bottom: 0px; padding-top: 0px" colSpan=3>
      <table cellSpacing="0" cellpadding="0">
      <tbody>
      <tr>
      <% 
      List level1 = dom.selectNodes("//profil[@id="+user.getProfil_id()+"]/tab");  
      for (int i=0; i<level1.size(); i++) {
        Element tab = (Element) level1.get(i);
        out.println("<td class=\""+(tab.attributeValue("id").equals(idx[0])?"tabOn":"tabOff")+"\"><a href=\""+request.getContextPath()+"/nav/redirect.jsp?nav_idx="+tab.attributeValue("id")+".0\">"+tab.attributeValue("libelle")+"</a></i></td>");
      } 
      %>
      </tr>
      </tbody>
      </table>
    </td>
   </tr>
   </tbody>
   </table>
  </div>
 </td>
</tr>
<tr>
 <td colspan="2">
 <div id="Level2Container">
 <%
 List level2 = dom.selectNodes("//profil[@id="+user.getProfil_id()+"]/tab[@id="+idx[0]+"]/link");
 for (int i=0; i<level2.size(); i++) {
   Element section = (Element) level2.get(i);
   if (section.attributeValue("disabled") == null) 
  	 out.println("<a "+(section.attributeValue("id").equals(idx[1])?"class=\"SectionOn\"":"")+" href=\""+request.getContextPath()+"/nav/redirect.jsp?nav_idx="+idx[0]+"."+section.attributeValue("id")+"&nextp="+section.attributeValue("href")+"\">"+section.getText()+"</a></li>");
   else
    out.println("<span><font color=\"#dddddd\"><i>"+section.getText()+"</font></i></span>"); 
   if (i < level2.size()-1) 
     out.println("<span class=spacer>&nbsp; | &nbsp;</span>");
 }    
 %>
 </div>
 </td>
</tr>
</tbody>
</table>
 
</div>
</body>
</html>

Vue que j'ai jamais fais de customisation,j'aimerais savoir par ou commencer.

Voici ce que j'ai fait pour l'instant,je sais que c'est long,dsl

MuPanelRenderer.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
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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
 
package component;
 
import java.io.IOException;
import java.util.List;
 
import org.apache.commons.lang.StringUtils;
import org.dom4j.Document;
import org.dom4j.Element;
 
import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.context.ResponseWriter;
 
import com.ibm.ws.i18n.context.util.Dom;
import com.sun.faces.renderkit.html_basic.GroupRenderer;
 
public class MuPanelRenderer extends GroupRenderer {
 
	public void encodebegin(FacesContext context, UIComponent component) throws IOException{
		Document dom = (Document) getServletContext().getAttribute("navigation");
		String []idx = StringUtils.split((String)session.getAttribute("nav_idx","."));
 
 
		ResponseWriter writer = context.getResponseWriter();
		String panel = getPanel(component);		
	  writer.startElement("table", null);
	  writer.writeAttribute("cellSpacing", "0", "table");
	  writer.writeAttribute("cellpadding", "0", "table");
	  writer.startElement("tr",null);
	  writer.startElement("td", null);
	  writer.startElement("img", null);
	  writer.writeAttribute("src","../nav/ressources/trans.gif","img");
	  writer.writeAttribute("width","245", "img");
	  writer.endElement("img");
	  writer.endElement("td");
	  writer.startElement("td",null);
	  writer.writeAttribute("style", "white:100%", "td");
	  writer.endElement("td");
	  writer.endElement("tr");
	  writer.startElement("tr", null);
	  writer.startElement("tr", null);
	  writer.writeAttribute("style", "padding-left: 15px", "td");
	  writer.startElement("img", null);
	  writer.writeAttribute("src","/static/img/client.gif","img");
	  writer.writeAttribute("width","245", "img");
	  writer.endElement("img");
	  writer.endElement("td");
	  writer.startElement("td",null);
	  writer.writeAttribute("style", "padding-right: 15px", "td");
	  writer.startElement("div",null); 
	  writer.writeAttribute("style","padding-bottom:10px",null);
	  writer.writeText("1","div");
	  writer.startElement("a",null);
	  writer.writeAttribute("href","../index.jsp", "a");
	  writer.writeText("Se deconnecter","a");
	  writer.endElement("a");
	  writer.endElement("div");
	  writer.startElement("div",null);
	  writer.writeAttribute("id", "Level1Container", "div");
	  writer.startElement("table", null);
	  writer.writeAttribute("cellSpacing", "0", "table");
	  writer.writeAttribute("cellpadding", "0", "table");
	  writer.startElement("tbody",null);
	  writer.startElement("tr",null);
	  writer.startElement("td", null);
	  writer.startElement("img", null);
	  writer.writeAttribute("src","../nav/ressources/trans.gif","img");
	  writer.writeAttribute("height","30", "img");
	  writer.endElement("img");
	  writer.endElement("td");	  
	  writer.startElement("td", null);
	  writer.endElement("div");
	  writer.startElement("div",null);
	  writer.writeAttribute("id", "level1Title", "div");
	  writer.startElement("span", null);
	  writer.writeText("ELeclerc", "span");
	  writer.endElement("span");
	  writer.endElement("div");
	  writer.endElement("td");
	  writer.endElement("tr");
	  writer.startElement("tr", null);
	  writer.startElement("td", null);
	  writer.startElement("table", null);
	  writer.startElement("tbody",null);
	  writer.startElement("tr", null);
	  List level1 = dom.selectNodes("//profil[@id=1]");
	  for(int i=0;i<level1.size();i++){
	  	Element tab =(Element)level1.get(i);
	  	writer.startElement("td",null);
	  	writer.writeAttribute("class",(tab.attributeValue("id").equals(idx[0])?"tabOn":"tabOff"), "td");
	  	writer.startElement("a",null);
	  	writer.writeAttribute("href", "../nav/redirect.jsp?nav_idx="+tab.attributeValue("id")+".0"+tab.attributeValue("libelle"),"td");
	  	writer.endElement("a");
	  	writer.endElement("td");
	  }
	  writer.endElement("tr");
	  writer.endElement("tbody");
	  writer.endElement("table");
	  writer.endElement("td");
	  writer.endElement("tr");
	  writer.endElement("tbody");
	  writer.endElement("table");
	  writer.endElement("div");  
	  writer.endElement("td");
	  writer.endElement("tr");
	  writer.startElement("tr",null);
	  writer.startElement("td",null);
	  writer.writeAttribute("colspan","2","td");
	  writer.startElement("div", null);
	  writer.writeAttribute("id", "Level2Container", "div");
	  List level2 = dom.selectNodes("//profil{@id=1]/tab[@idx[0]]/link");
	  for(int i=0;i<level2.size();i++){
	  	Element section = (Element) level2.get(i);
	  	if(section.attributeValue("disabled")==null){
	  		writer.startElement("a", null);
	  		writer.writeAttribute("href", "../nav/redirect.jsp?nav_idx="+idx[0]+".", "a");	  		
	  	  writer.endElement("a");
	  	}
	  	else{
	  		writer.startElement("span", null);
	  		writer.startElement("font", null);
	  		writer.writeAttribute("color", "#dddddd", "font");
	  		writer.endElement("font");
	  		writer.endElement("span");
	  		if(i<level2.size()-1){
	  			writer.startElement("span", null);
	  			writer.writeAttribute("class", "spacer", "span");
	  			writer.startElement("$nbsp",null);
	  			writer.endElement("$nbsp");
	  			writer.startElement("$nbsp",null);
	  			writer.endElement("$nbsp");
	  			writer.endElement("span");	  			
	  		}
	  	}
	  }
	  writer.endElement("div");
	  writer.endElement("td");
	  writer.endElement("tr");  
	  writer.endElement("tbody");
	  writer.endElement("table");
	  writer.endElement("div");  
	}
 
 
	public String getPanel(UIComponent component){
		String type= (String) component.getAttributes().get("panel");
		if((type !=null) && (type.equalsIgnoreCase("std") || type.equalsIgnoreCase("default"))){
			return type.toLowerCase();
		}
		return null;
	}
 
 
}

MyHmlPanel .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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
package component;
 
import javax.faces.component.html.HtmlPanelGrid;
import javax.faces.context.FacesContext;
import javax.faces.el.ValueBinding;
 
public class MyHmlPanel extends HtmlPanelGrid{
 
	private String panel;
 
	public String getPanel() {
		if(panel!=null){
			return panel;
		}
		ValueBinding vb =getValueBinding("panel");
		if(vb != null){
			return (String) vb.getValue(getFacesContext());
		}
		return null;
	}
 
	public void setPanel(String panel) {
		this.panel = panel;
	}
 
	public void restoreState(FacesContext context, Object state){
		Object values[] = (Object[]) (Object[]) state;
		super.restoreState(context, values[0]);
		panel = (String) values[1];		
	}
 
	public Object saveState(FacesContext context){
		Object[] values = new Object[2];
		values[0] = super.saveState(context);
		values[1] = panel;
		return (Object) values;
	}
}

stephane.taglib.tld

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<facelet-tagliub>
    <namespace>../WEB-INF/stephane.taglib.tld</namespace>
    <tag>
        <tag-name>panel</tag-name>
        <component>
           <component-type>my.component.panel</component-type>
           <render-type>my.renderkit.panel</render-type>
        </component>
    </tag>
</facelet-tagliub>

faces-config.xml

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
 
<faces-config>	 
 
	  <component>
	   <component-type>panel</component-type>
	   <component-class>component.MyHtmlPanel</component-class>	
	  </component>
	  <render-kit>
	    <render-kit-id>HTML_BASIC</render-kit-id> 
	    <renderer>
	      <component-family>javax.faces.Command</component-family>
	      <renderer-type>my.renderkit.panel</renderer-type>
	      <renderer-class>component.MuPanelRenderer</renderer-class>
	    </renderer>
	  </render-kit>
</facers-config.xml>

Page jsp

Code :

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

1
2
3
 
<%@taglib uri="../WEB-INF/stephane.taglib.tld" prefix="panel"%>
<panel trouve rien

Merci de votre aide

**romaintaz** · 17/09/2007, 14h48

Ta demande est vague...
On ne sait pas ce que tu souhaites changer dans ce menu. Difficile de t'aider du coup !

**stephane92400** · 17/09/2007, 14h50

j'ai un menu à la base en jsp que j'ai envi de mettre en jsf.

Ainsi de faire par exemple

<panel:...>

Ainsi de créer directement le menu

Si t'as deja créer un menu en jsf sous forme d'onglet,passe moi ton code,ca pourais toujours m'aider

**stephane92400** · 17/09/2007, 15h30

tu vois ce que j'aimerais faire maintenant?

**romaintaz** · 17/09/2007, 15h36

Moi je te conseille de créer 2 types de composants :
1. Le menuItem. Il s'agit d'une option dans ton menu.
2. Le menu lui même, ne contenant que des éléments de type menuItem.

Après, je pense qu'il n'y a rien de méchant.
Tu te charges de créer le renderer du menuItem qui transforme ton composant dans le HTML adéquat, utilisant les bonnes classes CSS.
Ensuite, tu te charges du renderer du composant menu, qui va créer le HTML "entourant" l'ensemble des menuItems.

Est-ce déjà une bonne piste à suivre pour te lancer dans l'aventure ?

**stephane92400** · 17/09/2007, 15h48

euh ouias mais bon,j'ai jamais fais de menuitem,ca va etre dur de se lancer,vais essayer

Je ne vois pas de menuitem dans http://java.sun.com/jsf/html

**romaintaz** · 17/09/2007, 15h56

Souvent, les menus sont faits en se servant des éléments HTML permettant d'écrire des listes (les balises UL, LI, etc.). Le CSS fait ensuite la transformation de cette bête liste en un joli menu.
Là, c'est pareil.
Ton composant menuItem n'aura donc que le but d'écrire le HTML correspond à un élément de ton menu. Dans mon cas, ce serait d'écrire une ligne LI par exemple. Dans ton cas, il semblerait qu'il s'agisse plutôt d'un tableau...

**stephane92400** · 17/09/2007, 16h10

t'aurais pas un petit exemple que je puisse commecer dans le meme style que je cherche à faire?

**romaintaz** · 17/09/2007, 16h13

Je n'ai pas vraiment d'exemple sous la main, c'est juste la façon dont je procéderais pour faire ce que tu cherches à réaliser.
Toutefois, tu peux peut-être t'inspirer de menu proposés par d'autres librairies (RichFaces par exemple).

**stephane92400** · 17/09/2007, 16h46

ouias j'ai deja entendu parler de rich...mais bon ca ne ressemble pas du tout à ceux que j'aimerais faire

C'est une sorte d'onglet,des que tu sélectionne un onglet,des liens apparaits horizontalement en bas

Bref,tu ne connaitrais pas par hasard un livre qui parle de la customisation en jsf si possible en jsf ou bien un tuto bien fait

**romaintaz** · 17/09/2007, 16h50

Là, ce n'est pas vraiment de la customisation. Il s'agit de customisation à partir du moment où tu pars d'un composant existant en JSF et que tu le configures pour qu'il ressemble à ce que tu veux vraiment.
Dans ton cas, il s'agit plutôt de la création de nouveaux composants...

**stephane92400** · 17/09/2007, 16h57

ok,tu ne connaitrais pas un tuto ou un livre exprés sur ce sujet?

**romaintaz** · 17/09/2007, 17h04

Pas vraiment.
Personnellement, j'ai appris à créer mes propres composants par moi-même, avec l'aide du web (en faisant des recherches sur les custom components par exemple), ou des forums. Et beaucoup de tests

**TIFéç** · 17/09/2007, 19h08

Salut,

Si tu veux un exemple tu peux peut etre t'appuyer la-dessus pour comprendre le fonctionnement: http://download-uk.oracle.com/docs/h...2.htm#CEGEGGBB
Maintenant, ils utilisent un composant ADF Oracle et c'est à toi de trouver l'équivalent dans les librairies que tu as choisies.
J'ai utilisé ces technos dans une appli, c'est très pratique. Une fois tes composants déclarés, ajouter, supprimer ou modifier ton système d'onglet ne prend que quelques lignes d'écriture au niveau du face-config. Mais bon y a du travail pour l'adapter.

Bon courage,
Tif

**stephane92400** · 18/09/2007, 13h16

ou trouve t'on les lib de import oracle.adf.view.faces.component.core.nav.CoreCommandMenuItem;

**romaintaz** · 18/09/2007, 13h20

Ici je pense.

**stephane92400** · 18/09/2007, 13h31

merci,pour la page jsp

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
 
<af:panelPage title="#{res['srmanage.pageTitle']}">
  <f:facet name="menu1">
    <af:menuTabs var="menuTab" value="#{menuModel.model}">
      <f:facet name="nodeStamp">
        <af:commandMenuItem text="#{menuTab.label}"
                            action="#{menuTab.getOutcome}"
                            rendered="#{menuTab.shown and
                                       menuTab.type=='default'}"
                            disabled="#{menuTab.readOnly}"/>
          </f:facet>
    </af:menuTabs>

Comment je déclare la balise af....?

**romaintaz** · 18/09/2007, 13h41

Sur cette page , ce serait a priori :

Code :

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

1
2
 
<%@ taglib prefix="af"  uri="http://xmlns.oracle.com/adf/faces/EA13" %>

**stephane92400** · 18/09/2007, 14h09

Code :

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

 ResourceBundle bundle = getBundle();

Il ne trouve pas getBundle(),etant donné que la fonction n'est pas déclarée,donc...?

**romaintaz** · 18/09/2007, 14h29

Il s'agit de rechercher un message via un ResourcesBundle. Il est à mon avis inutile pour l'instant que tu perdes du temps sur ce genre de point...
Focalise toi plutôt sur la création du composant lui-même...

D'ailleurs, je dois dire que je ne comprends toujours pas très bien pourquoi tu n'utilises pas un composant Menu déjà existant que tu paramètrerais toi même, plutôt que de construire ton propre menu...

Création d'un custom menu

JSF Java

Discussions similaires

Partager

Partager