Réaliser des pseuo-frames

Version imprimable

27/02/2007, 22h35
fabou3377

Réaliser des pseuo-frames

Bonjour,
je débute en jsf, je viens du monde PHP... J'aimerais savoir de quelle manière je peux réaliser un site en ayant une partie droite (menu) présente sur toutes les pages et une partie gauche(content) variant en fonction d'un paramètre passé par l'Url...

Dois-je travailler avec les fragments de page? de quelle manière puis-je changer ces fragments avec un code central... Je m'explique :

Ma page index.jsp est composé de deux fragments, un fragment menu et un fragment content.. Dans cette page j'aimerais avoir un code style

CASE Page

contact:
include(contact.jspf);
//la page contact s'affiche dans la partie content

photos
include(photos,jspf);

Merci pour votre aide....
28/02/2007, 09h20
Alec6

Je suis pas un prob du web, phb et autres, mais du développement d'application lourdes. Ce qui fait que sans doute mon architecture sera peut etre atypique. D'ailleus ce serait interessant de savoir comment font les autres (des includes paramétrés sans doute...)

Donc j'ai fait une page générale avec les menus, headers et tout le tralala et au centre j'ai le content qui change au cours de la navigation.
Pour faire cela j'ai utilisé le panelStack de tomahawk (c'est comme un panelTab mais sans les onglets).

Ca marche très bien.
28/02/2007, 09h27
fabou3377

Ok.. merci je suis débutant je travail avec Netbeans 5.5... Tu fais comment pour installer ce panelstack?.. N'aurais tu pas un exemple?
28/02/2007, 13h19
Shivan

Alec6 tu peux en dire un peu plus sur ta solution stp. Le fonctionnement du panelStack...

tu modifie "programmatiquement" le contenu du panelStack qui se trouve au centre. tu lui attribut des <f:view> ? Je ne comprend pas comment tu fais exactement.

Pour ma part j'utilise les tiles de strut pour faire du templating pour JSF. Donc j'ai une squelette de page qui contient des includes pour menu, header, body et je leur affecte les pages qu'ils doivent afficher.

Pour faire Cela avec JSF il faut mieux utiliser Facelets à la place de tiles. Il fait du templating à la sauce JSF.

Je te conseil d'utiliser les Tiles, c'est super pratique.
Tu définis une page "modèle" qui fait référence à 1 ou n "morceaux"
Ensuite, dans un fichier de paramétrage, tu affectes (par un nom logique) une page à une cible.
Ce qui est très interressant également, c'est la possibilité de faire de l'héritage sur les fragments...
A voir absolument...

Voici un exemple pour illustrer :

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
 
Le modèle (top, left, body)
=======
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"  errorPage="erreur.jsp"%>
 
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
 
<html:html locale="true">
<head profile="text/css">
    <META http-equiv="Content-Style-Type" content="text/css">
    <META http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
 
<body>
 
<table cellpadding="0" cellspacing="0" width="100%">
<col span="1" width="150">
<tr>
<td colspan="2">
<tiles:insert attribute="top" flush="true"/>
</td>
</tr>
 
<tr>
<td style="vertical-align:top;">
<tiles:insert attribute="left" flush="true"/>
</td>
<td style="padding-left:10px; padding-top:10px; padding-right:10px; vertical-align:top;">
<tiles:insert attribute="body" flush="true"/>
</td>
</tr>
</table>
 
</body>
</html:html>
 
 
La definition Tiles
=============
 
<tiles-definitions>
 <definition name="login" path="/pages/tools/login/main.jsp">
  <put name="top"      value="/pages/tools/login/top.jsp"/>
  <put name="left"     value="/pages/tools/login/left.jsp"/>
  <put name="body"     value="/pages/tools/login/login.jsp"/>
 </definition>
 
<definition name="change.password" extends="login">
  <put name="body" type="page" value="/pages/tools/login/changePassword.jsp"/>
 </definition>

A+

Le panelStack est un composant de tomahawk (myfaces).
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <t:panelStack id="stack" selectedPanel="#{publicStackState.selected}" > <h:panelGroup id="facture"> <f:subview id="subview_facture"> <jsp:include page="facture.jsp"> <jsp:param name="" value="" /> </jsp:include> </f:subview> </h:panelGroup> ... plein d'autres subviews </t:panelStack>
Autour du panel stack j'ai tout le jsf qui correspond aux menus, pub etc tout le tralala propre aux sites internet.

dans panelStack selectedPanel point sur un managed bean qui contient un identifiant de la vue à afficher. Par exemple si c'est facture le composant va afficher le panelGroup facture. Dans le managed bean publicStackState je recoit des évènements de boutons, que j'identifie (par ID par exemple) pour savoir qu'elle identifiant fournir à la propriété du panelStack. Donc si je clique le menu facture , je pose publickStackState.selected=facture --> automatique affichage du panelGroup qui convient.

Le managed bean publicStackState dans mon architecture est devenu un gros mediator au final. Et je n'utilise plus les "action", c'est à dire le système de navigation de JSF. En faite je reste dans une architecture swing.

Je crois que sous netbean il y a un wysiwyg jsf; je fais tout à la main. Beurk les wysinyc ( is not you control) .

moi j'utilise les template de facelets

common.jsp

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!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:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:t="http://myfaces.apache.org/tomahawk">
 
<f:loadBundle basename="applicationMessages" var="msg" />
<head>
<title><ui:insert name="pageTitle">Page Title</ui:insert></title>
<t:stylesheet path="/css/style.css" />
</head>
 
<body>
<ui:insert name="body">Page Body</ui:insert>
 
 
</body>
 
</html>

template navigation.jsp

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
<!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:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">
 
<f:loadBundle basename="applicationMessages" var="msg" />
<ui:composition template="/templates/common.jsp">
	<ui:define name="pageTitle">
		<ui:insert name="pageTitle">Page Title</ui:insert>
	</ui:define>
	<ui:define name="body">
		<div class="blocMenu"><h:form id="formNavigation"
			styleClass="link">
 
			...
			[code menu]
			..
 
		</div>
		<div class="blocContent" align="left"><ui:insert name="content">Page Content</ui:insert></div>
	</ui:define>
</ui:composition>
</html>

et les différentes pages

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
<!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:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">
 
<f:loadBundle basename="applicationMessages" var="msg" />
<ui:composition template="/templates/navigation.jsp">
	<ui:define name="pageTitle">
		<h:outputText value="#{msg.title_application}" />
	</ui:define>
	<ui:define name="pageHeader">
		<h:outputText value="#{msg.title_validation}" id="headerText" />
	</ui:define>
	<ui:define name="content">
		<h:form>
				...
			[code page]
			..
 
		</h:form>
	</ui:define>
</ui:composition>
 
 
</html>

02/03/2007, 08h58
fabou3377

Merci à tous pour votre aide. Je vais essayer...