panel qui reste fixe

**couse1** · 11/07/2011, 15h27

Bonjour,

Voila j'ai une page avec sur la gauche : un arbre et sur la droite un panel avec des détails qui apparaissent lorsque je clique sur un noeud.

Ce que je voudrais c'est simple : que le panel de la partie détail ne bouge pas lorsque je parcours mon arbre en descendant l'ascenseur de ma page. voila!

Si qqn à des pistes, je suis preneur!

infos : JSF 2.0 et richfaces 4

Merci par avance
couse1

**DevServlet** · 11/07/2011, 18h02

Ton souci est au niveau css, c'est bien ca? tu veux pouvoir fixer le panel du milieu quelque soit la profondeur d'ouverture de ton arbre?

**couse1** · 12/07/2011, 09h27

Tout à fait je voudrais que ce panel reste visible, car, actuellement lorsque je parcours mon arbre vers le bas, évidemment la page descend et le panel disparait étant donné que ce dernier est en haut de la page.

**DevServlet** · 12/07/2011, 11h55

J'avais déjà eu ça comme souci, eh ben ca va te demander une petite connaissance css. Moi j'avais mis les composants dans les blocs div, et avec la position à absolute ca me resolvait mon pb.fais nous ta page xhtml.

**couse1** · 12/07/2011, 16h08

Tout d'abord merci pour tes réponses.
Voici ma page xhtml :

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
 
<!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:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">
<h:outputStylesheet name="panel.ecss"/>
 
<h:head></h:head>
	<h:body>
		<f:facet name="header">Mon arbre</f:facet>
 
		<h:form>
			<h:panelGrid columns="2" columnClasses="top,top" width="100%">
				<rich:tree id="tree" nodeType="#{node.type}" var="node"
					value="#{refItemController.myTree}" toggleType="client"
					selectionType="ajax"
					selectionChangeListener="#{refItemController.selectionChanged}">
 
					<rich:treeNode id="arbo" type="arbo" iconCollapsed="/images/tree/RefBati.png"
						iconExpanded="/images/tree/RefBati.png"
						iconLeaf="/images/tree/RefBati.png">
						<a4j:outputPanel layout="block">
						<rich:dropTarget acceptedTypes="leaf" dropValue="CF" render="tree" />
						<h:outputText value="#{node.name}" />
						</a4j:outputPanel>
					</rich:treeNode>
 
					<rich:treeNode type="bati" iconCollapsed="/images/tree/Maison.png"
						iconExpanded="/images/tree/Maison.png"
						iconLeaf="/images/tree/Maison.png">
						<a4j:outputPanel layout="block">
							<rich:dragIndicator id="ind" draggingClass="rf-ind-drag">
								<h:outputText value="#{node.name}" />
							</rich:dragIndicator>
							<h:outputText title="#{batimentController.building.batiType(node.id_batimenttype).libelle}" value="#{node.name}" style="#{batimentController.building.batiTypeStyle(node.id_batimenttype)}" />
							<rich:dragSource type="leaf" dragValue="#{node}" dragIndicator="ind" />
						</a4j:outputPanel>
					</rich:treeNode>
				</rich:tree>
 
				<!-- ****  Ensemble du panelGroup ci dessous doit rester fixe	**** -->
				<h:panelGroup rendered="true">
					<a4j:outputPanel ajaxRendered="true" layout="block">
						<rich:collapsiblePanel
							header="#{refItemController.currentSelection.name}"
							switchType="client">
							<h:panelGrid columns="2" columnClasses="bold" width="100%" rendered="#{refItemController.currentSelection.type.equals('bati')}">
								<h:outputText value="Adresse :" />
								<h:outputText value="#{refItemController.currentSelection.numero} #{refItemController.currentSelection.bis} #{refItemController.currentSelection.rue}" />
								<h:outputText value="" />
								<h:outputText value="#{refItemController.currentSelection.codepostal} #{refItemController.currentSelection.commune}" />
								<h:outputText value="Statut :" />
								<h:outputText value="#{batimentController.building.batiType(refItemController.currentSelection.id_batimenttype).libelle}" />
								<h:outputText value="Remarques :" />
								<h:outputText value="#{refItemController.currentSelection.remarques}" escape="false" />
							</h:panelGrid>
							<h:panelGrid columnClasses="bold" width="100%" rendered="#{refItemController.currentSelection.type.equals('bati')}">
								<a4j:commandButton value="Ajouter une remarque" action="#{refItemController.changeBool(refItemController.remarquesBool)}" reRender="ajoutRemarques" />
								<a4j:outputPanel id="ajoutRemarques">
									<h:panelGroup>
									<h:inputTextarea value="#{refItemController.remarques}" rendered="#{refItemController.remarquesBool}" cols="60" rows="4" />
									<a4j:commandButton value="Maj" action="#{refItemController.majBatiment}" rendered="#{refItemController.remarquesBool}" style="top:100%" />           
									</h:panelGroup>
								</a4j:outputPanel>
							</h:panelGrid>
						</rich:collapsiblePanel>
 
						<rich:collapsiblePanel header="CARNET DE SANTE" expanded="false"
							switchType="client" rendered="#{refItemController.currentSelection.type.equals('bati')}">
							<h:dataTable id="tabCarnet" value="#{refItemController.listeStructure}" var="structure">
								<h:column>
									<h:outputText value="#{structure.basName}" />
								</h:column>
								<h:column>
									<h:inputText value="#{refItemController.listeCarnet[1]}" />
								</h:column>
							</h:dataTable>
						</rich:collapsiblePanel>
 
						<rich:collapsiblePanel header="COLBERT" expanded="false"
							switchType="ajax">
							<h:panelGrid columns="2" columnClasses="bold" width="100%">
								<h:outputText value="Code objet :" />
								<h:outputText
									value="#{refItemController.currentSelection.refexterne}" />
							</h:panelGrid>
						</rich:collapsiblePanel>
					</a4j:outputPanel>
				</h:panelGroup>
 
			</h:panelGrid>
		</h:form>
	</h:body>
</html>

C'est donc le premier panelGroup qui doit rester fixe. Etant donné que je débute dans ce langage, les commentaires sont bienvenus.

Cordialement
couse1

**DevServlet** · 12/07/2011, 16h44

Envoyé par couse1

Tout d'abord merci pour tes réponses.
Voici ma page xhtml :

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
<!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:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">
<h:outputStylesheet name="panel.ecss"/>

<h:head></h:head>
	<h:body>
		<f:facet name="header">Mon arbre</f:facet>
	
		<h:form>
<div id="treeBloc" >
			<h:panelGrid columns="2" columnClasses="top,top" width="100%">
				<rich:tree id="tree" nodeType="#{node.type}" var="node"
					value="#{refItemController.myTree}" toggleType="client"
					selectionType="ajax"
					selectionChangeListener="#{refItemController.selectionChanged}">
					
					<rich:treeNode id="arbo" type="arbo" iconCollapsed="/images/tree/RefBati.png"
						iconExpanded="/images/tree/RefBati.png"
						iconLeaf="/images/tree/RefBati.png">
						<a4j:outputPanel layout="block">
						<rich:dropTarget acceptedTypes="leaf" dropValue="CF" render="tree" />
						<h:outputText value="#{node.name}" />
						</a4j:outputPanel>
					</rich:treeNode>
					
					<rich:treeNode type="bati" iconCollapsed="/images/tree/Maison.png"
						iconExpanded="/images/tree/Maison.png"
						iconLeaf="/images/tree/Maison.png">
						<a4j:outputPanel layout="block">
							<rich:dragIndicator id="ind" draggingClass="rf-ind-drag">
								<h:outputText value="#{node.name}" />
							</rich:dragIndicator>
							<h:outputText title="#{batimentController.building.batiType(node.id_batimenttype).libelle}" value="#{node.name}" style="#{batimentController.building.batiTypeStyle(node.id_batimenttype)}" />
							<rich:dragSource type="leaf" dragValue="#{node}" dragIndicator="ind" />
						</a4j:outputPanel>
					</rich:treeNode>
				</rich:tree>
</div>
				<!-- ****  Ensemble du panelGroup ci dessous doit rester fixe	**** -->
				<h:panelGroup rendered="true">
					<a4j:outputPanel ajaxRendered="true" layout="block">
						<rich:collapsiblePanel
							header="#{refItemController.currentSelection.name}"
							switchType="client">
							<h:panelGrid columns="2" columnClasses="bold" width="100%" rendered="#{refItemController.currentSelection.type.equals('bati')}">
								<h:outputText value="Adresse :" />
								<h:outputText value="#{refItemController.currentSelection.numero} #{refItemController.currentSelection.bis} #{refItemController.currentSelection.rue}" />
								<h:outputText value="" />
								<h:outputText value="#{refItemController.currentSelection.codepostal} #{refItemController.currentSelection.commune}" />
								<h:outputText value="Statut :" />
								<h:outputText value="#{batimentController.building.batiType(refItemController.currentSelection.id_batimenttype).libelle}" />
								<h:outputText value="Remarques :" />
								<h:outputText value="#{refItemController.currentSelection.remarques}" escape="false" />
							</h:panelGrid>
							<h:panelGrid columnClasses="bold" width="100%" rendered="#{refItemController.currentSelection.type.equals('bati')}">
								<a4j:commandButton value="Ajouter une remarque" action="#{refItemController.changeBool(refItemController.remarquesBool)}" reRender="ajoutRemarques" />
								<a4j:outputPanel id="ajoutRemarques">
									<h:panelGroup>
									<h:inputTextarea value="#{refItemController.remarques}" rendered="#{refItemController.remarquesBool}" cols="60" rows="4" />
									<a4j:commandButton value="Maj" action="#{refItemController.majBatiment}" rendered="#{refItemController.remarquesBool}" style="top:100%" />           
									</h:panelGroup>
								</a4j:outputPanel>
							</h:panelGrid>
						</rich:collapsiblePanel>
						
						<rich:collapsiblePanel header="CARNET DE SANTE" expanded="false"
							switchType="client" rendered="#{refItemController.currentSelection.type.equals('bati')}">
							<h:dataTable id="tabCarnet" value="#{refItemController.listeStructure}" var="structure">
								<h:column>
									<h:outputText value="#{structure.basName}" />
								</h:column>
								<h:column>
									<h:inputText value="#{refItemController.listeCarnet[1]}" />
								</h:column>
							</h:dataTable>
						</rich:collapsiblePanel>
						
						<rich:collapsiblePanel header="COLBERT" expanded="false"
							switchType="ajax">
							<h:panelGrid columns="2" columnClasses="bold" width="100%">
								<h:outputText value="Code objet :" />
								<h:outputText
									value="#{refItemController.currentSelection.refexterne}" />
							</h:panelGrid>
						</rich:collapsiblePanel>
					</a4j:outputPanel>
				</h:panelGroup>
				
			</h:panelGrid>
		</h:form>
	</h:body>
</html>

C'est donc le premier panelGroup qui doit rester fixe. Etant donné que je débute dans ce langage, les commentaires sont bienvenus.

Cordialement
couse1

et dans ta page css, tu t'amuses avec les attributs de positionement d'un bloc div (position absolute, margin-width, etc...)
Là c'est pas un souci de framework mais de css.

**herison** · 19/07/2011, 16h39

Je suis de même avis que DevServlet

C'est un pb de css mais pas du JSF.

Dans la ligne 43 du code dans DevServlet's quote, essayer de mettre un deuxième div pour ton deuxième panel et personnaliser le pour qu'il reste fixe.

panel qui reste fixe

JSF Java

Discussions similaires

Partager

Partager