afficher un arbre lorsqu'on clique sur un onglet

**caro_caro** · 19/05/2009, 13h45

Bonjour la liste,

J'ai une page web qui a 2 balises div div1 et div2.
div1 contient une liste d'onglets "onglet1", "onglet2" et "onglet3".

div2 affiche un arbre en fonction de l'onglet choisi ( "onglet1", "onglet2" et "onglet3").

Je ne sais comment m'y prendre dans le code des onglets pour effectuer cela.

Si quelqu'un a une idée, merci beaucoup d'avance.

**joseph_p** · 19/05/2009, 16h01

hum, je ne suis pas sûr de bien comprendre la question

en utilisant des onglets "à la sauce wicket", chaque onglet a son propre panel, du coup là on peut y faire ce que l'on veut. Par exemple réutiliser le même composant avec différentes données...

Si j'ai tapé à côté, ne pas hésiter à me le dire

++

**caro_caro** · 19/05/2009, 16h14

Envoyé par ZedroS

hum, je ne suis pas sûr de bien comprendre la question

en utilisant des onglets "à la sauce wicket", chaque onglet a son propre panel, du coup là on peut y faire ce que l'on veut. Par exemple réutiliser le même composant avec différentes données...

Si j'ai tapé à côté, ne pas hésiter à me le dire

++

Non tu n'as pas tapé à côté. J'ai fait cet exemple et il marche.

Ce que je n'arrive pas à faire:
Modifier cet exemple de telle sorte que lorqu'on clique sur un onglet "onglet1", ça affiche un arbre "arbre1". Si on clique sur un onglet "onglet2", ça affiche un arbre "arbre2"

Merci beaucoup d'avance.

**joseph_p** · 19/05/2009, 16h25

re

tu utilises un panel différent pour chaque onglet ? si oui, donnes tu un modèle différent à ton arbre à chaque fois ?

**caro_caro** · 19/05/2009, 16h50

Envoyé par ZedroS

re

tu utilises un panel différent pour chaque onglet ? si oui, donnes tu un modèle différent à ton arbre à chaque fois ?

oui j'utilise un panel différent à chaque fois (c'est ce qui est fait dans l'exemple).

Mon code est le suivant :

Code :

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

1
2
3
4
5
6
7
8
9
10
 List tabs = new ArrayList();
		    tabs.add(new AbstractTab(new Model("Onglet1"))
			{
				public Panel getPanel(String panelId)
				{
					return new TabPanel1(panelId);
				}
 
			});
                    .....

Le code de la classe TabPanel1

Code :

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

1
2
3
4
5
6
private static class TabPanel1 extends Panel {
		   public TabPanel1(String id)
			{
				super(id);
			}
	}

.

J'ai un bloc div sur ma page web. Et j'aimerais afficher un arbre dans ce bloc une fois qu'un onglet est sélectionné. Le code de cet arbre est le suivant

Code :

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

1
2
3
4
5
6
7
8
9
10
11
//Construction du noeud racine.
		    DefaultMutableTreeNode myRoot = new DefaultMutableTreeNode("Racine arbre");
 
		    //Construction des différents noeuds de l'arbre.
		    DefaultMutableTreeNode chap = new DefaultMutableTreeNode("Noeud1");
		    myRoot.add(chap);
 
		    chap = new DefaultMutableTreeNode("Noeud2");
		    myRoot.add(chap);
// Construction du modèle de l'arbre.
		    DefaultTreeModel myModel = new DefaultTreeModel(myRoot);

Merci beaucoup d'avance.

**joseph_p** · 19/05/2009, 17h11

re

Il faudrait que tu ajoutes le Tree dans chacun de tes panels.

en gros, cela donnerait :

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
 
private static class TabPanel1 extends Panel {
		   public TabPanel1(String id)
			{
				super(id);
//Construction du noeud racine.
		    DefaultMutableTreeNode myRoot = new DefaultMutableTreeNode("Racine arbre");
 
		    //Construction des différents noeuds de l'arbre.
		    DefaultMutableTreeNode chap = new DefaultMutableTreeNode("Noeud1");
		    myRoot.add(chap);
 
		    chap = new DefaultMutableTreeNode("Noeud2");
		    myRoot.add(chap);
// Construction du modèle de l'arbre.
		    DefaultTreeModel myModel = new DefaultTreeModel(myRoot);
		     add(new LinkTree("treeId", myModel);
			}
	}

et bien sûr il te faudra un TabPanel1.html avec

Code :

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

1
2
3
4
5
6
 
<html>
      <body>
            <div wicket:id="treeId"/>
      </body>
</HTML>

(NB : pseudo code powa, j'tape tout sans mon ide de prédilection

)
est ce plus clair pour toi ?

A propos, te sens tu à l'aise avec les panel ? L'usage qui en est fait ici est assez standard, dans le sens où ils permettent d'encapsuler joliment d'autres composants wicket.

++

**caro_caro** · 20/05/2009, 11h06

Envoyé par ZedroS

re

Il faudrait que tu ajoutes le Tree dans chacun de tes panels.

en gros, cela donnerait :

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
 
private static class TabPanel1 extends Panel {
		   public TabPanel1(String id)
			{
				super(id);
//Construction du noeud racine.
		    DefaultMutableTreeNode myRoot = new DefaultMutableTreeNode("Racine arbre");
 
		    //Construction des différents noeuds de l'arbre.
		    DefaultMutableTreeNode chap = new DefaultMutableTreeNode("Noeud1");
		    myRoot.add(chap);
 
		    chap = new DefaultMutableTreeNode("Noeud2");
		    myRoot.add(chap);
// Construction du modèle de l'arbre.
		    DefaultTreeModel myModel = new DefaultTreeModel(myRoot);
		     add(new LinkTree("treeId", myModel);
			}
	}

et bien sûr il te faudra un TabPanel1.html avec

Code :

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

1
2
3
4
5
6
 
<html>
      <body>
            <div wicket:id="treeId"/>
      </body>
</HTML>

(NB : pseudo code powa, j'tape tout sans mon ide de prédilection

)
est ce plus clair pour toi ?

A propos, te sens tu à l'aise avec les panel ? L'usage qui en est fait ici est assez standard, dans le sens où ils permettent d'encapsuler joliment d'autres composants wicket.

++

Bonjour Zedros,

J'ai essayé ton exemples mais la ligne

Code :

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

add(tree);

me produit l'erreur

Code :

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

1
2
3
4
  WicketMessage: The component(s) below failed to render. A common problem is that you have added a component in code but forgot to reference it in the markup (thus the component will never be rendered).
Root cause:
 
org.apache.wicket.WicketRuntimeException: The component(s) below failed to render. A common problem is that you have added a component in code but forgot to reference it in the markup (thus the component will never be rendered).

alors que les id présents dans le code JAVA le sont aussi dans le html.

Merci beaucoup d'avance.

**joseph_p** · 20/05/2009, 11h46

hum, j'ai été un peu vite dans mon exemple TabPanel1.html :

Code :

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

1
2
3
4
5
6
 
<html>
      <body>
            <div wicket:id="treeId"/>
      </body>
</HTML>

aurait dû être :

Code :

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

1
2
3
4
5
6
7
8
 
<html>
      <body>
            <wicket:panel>
                    <div wicket:id="treeId"/>
            </wicket:panel>
      </body>
</HTML>

si cela ne résoud pas le souci, pourrais je voir ton code et ton html ?

++

**caro_caro** · 25/05/2009, 10h04

Envoyé par ZedroS

hum, j'ai été un peu vite dans mon exemple TabPanel1.html :

Code :

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

1
2
3
4
5
6
 
<html>
      <body>
            <div wicket:id="treeId"/>
      </body>
</HTML>

aurait dû être :

Code :

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

1
2
3
4
5
6
7
8
 
<html>
      <body>
            <wicket:panel>
                    <div wicket:id="treeId"/>
            </wicket:panel>
      </body>
</HTML>

si cela ne résoud pas le souci, pourrais je voir ton code et ton html ?

++

Merci Zedros,

Je parviens actuellement à afficher l'arbre, mais le problème est qu'il s'affiche dans la même zone que mes onglets. Je ne parviens pas à l'afficher un peu plus en bas (j'ai utilisé en vain une feuille de style avec la balise "div").

Le code java corrrespondant au 1er onglet est :

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
public class Tab1Panel extends Panel {
 
	private static final long serialVersionUID = 1L;
 
	   public Tab1Panel() {
	   	   super(TabbedPanel.TAB_PANEL_ID);
	   	   add(new LinkTree("treeId", createTreeModel1()));
	   }
 
	   protected static DefaultTreeModel createTreeModel1(){
 
		    //Construction du noeud racine.
		    DefaultMutableTreeNode myRoot = new DefaultMutableTreeNode("Racine");
 
		    //Construction des différents noeuds de l'arbre.
		    DefaultMutableTreeNode chap = new DefaultMutableTreeNode("Noeud1");
		    myRoot.add(chap);
 
		    chap = new DefaultMutableTreeNode("Noeud2");
		    myRoot.add(chap);
 
		    chap = new DefaultMutableTreeNode("Noeud3");
		    myRoot.add(chap);
 
		    // Construction du modèle de l'arbre.
		    DefaultTreeModel myModel = new DefaultTreeModel(myRoot);
		    return myModel;
	 }
 
 
}

Le code html correspondant au 1er onglet est :

Code :

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

1
2
3
4
5
6
7
<html>
  <body>
    <wicket:panel>
      <div wicket:id="treeId"></div>
 </wicket:panel>
  </body>
</html>

Merci beaucoup d'avance.

**caro_caro** · 27/05/2009, 11h23

Envoyé par caro_caro

Merci Zedros,

Je parviens actuellement à afficher l'arbre, mais le problème est qu'il s'affiche dans la même zone que mes onglets. Je ne parviens pas à l'afficher un peu plus en bas (j'ai utilisé en vain une feuille de style avec la balise "div").

Le code java corrrespondant au 1er onglet est :

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
public class Tab1Panel extends Panel {
 
	private static final long serialVersionUID = 1L;
 
	   public Tab1Panel() {
	   	   super(TabbedPanel.TAB_PANEL_ID);
	   	   add(new LinkTree("treeId", createTreeModel1()));
	   }
 
	   protected static DefaultTreeModel createTreeModel1(){
 
		    //Construction du noeud racine.
		    DefaultMutableTreeNode myRoot = new DefaultMutableTreeNode("Racine");
 
		    //Construction des différents noeuds de l'arbre.
		    DefaultMutableTreeNode chap = new DefaultMutableTreeNode("Noeud1");
		    myRoot.add(chap);
 
		    chap = new DefaultMutableTreeNode("Noeud2");
		    myRoot.add(chap);
 
		    chap = new DefaultMutableTreeNode("Noeud3");
		    myRoot.add(chap);
 
		    // Construction du modèle de l'arbre.
		    DefaultTreeModel myModel = new DefaultTreeModel(myRoot);
		    return myModel;
	 }
 
 
}

Le code html correspondant au 1er onglet est :

Code :

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

1
2
3
4
5
6
7
<html>
  <body>
    <wicket:panel>
      <div wicket:id="treeId"></div>
 </wicket:panel>
  </body>
</html>

Merci beaucoup d'avance.

Salut Zedros,

Tu as une idée comment je peux faire pour afficher l'arbre dans div2 et non dans div1(bloc où se trouve les onglets).

Merci beaucoup d'avance.

**joseph_p** · 27/05/2009, 22h48

Hum, à priori il s'agit là de quelque chose de simple : il suffit de mettre ton arbre en dessous du panel ou dans un autre panel. Par exemple :

Code :

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

1
2
3
4
5
6
7
 
<html>
  <body>
      <div wicket:id="panelId"></div><br/>
      <div wicket:id="treeId">
  </body>
</html>

Ensuite, pour ton arbre, il faut que son modèle change ou que tu affiches un arbre différent en fonction du panel sélectionné. Pour cela, il faudrait que tu associes l'info "panel affiché" à un modèle et que tu décides de la visibilité de tes arbres en fonction de cet état. L'idéal est de faire ça en surchargeant isVisible() de chacun de tes arbres, avec par exemple qqchose du genre :

Code :

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

1
2
3
4
5
6
7
public boolean isVisible(){
if (labelStateModel.getObject().equals(LabelState.Panel1)){
return true; 
}
return false;
}
}

Je dois avouer que cela me semble assez simple à faire, du coup j'ai du mal à saisir ton problème. Serais tu faire cela avec un autre élément qu'un arbre ? Ou l'arbre te pose t il un problème particulier ?

++

**caro_caro** · 28/05/2009, 14h19

Envoyé par ZedroS

Hum, à priori il s'agit là de quelque chose de simple : il suffit de mettre ton arbre en dessous du panel ou dans un autre panel. Par exemple :

Code :

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

1
2
3
4
5
6
7
 
<html>
  <body>
      <div wicket:id="panelId"></div><br/>
      <div wicket:id="treeId">
  </body>
</html>

Ensuite, pour ton arbre, il faut que son modèle change ou que tu affiches un arbre différent en fonction du panel sélectionné. Pour cela, il faudrait que tu associes l'info "panel affiché" à un modèle et que tu décides de la visibilité de tes arbres en fonction de cet état. L'idéal est de faire ça en surchargeant isVisible() de chacun de tes arbres, avec par exemple qqchose du genre :

Code :

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

1
2
3
4
5
6
7
public boolean isVisible(){
if (labelStateModel.getObject().equals(LabelState.Panel1)){
return true; 
}
return false;
}
}

Je dois avouer que cela me semble assez simple à faire, du coup j'ai du mal à saisir ton problème. Serais tu faire cela avec un autre élément qu'un arbre ? Ou l'arbre te pose t il un problème particulier ?

++

Salut Zedros,

Je crains n'avoir pas assimiler le principe de fonctionnement des onglets(AjaxTabbedPanel dans wicket) : Ce que j'ai retenu; Lorsqu'on clique sur un onglet il affiche les infos dans un panneau. Je me trompe?

Par rapport à ta proposition, je ne n'ai pu trouver (après lecture et recherche sur le web) quoi mettre dans le code JAVA pour la prise en compte de la ligne

Code :

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

<div wicket:id="panelId" ></div>

Merci beaucoup d'avance pour ton aide.

**joseph_p** · 31/05/2009, 21h42

salut

je pense que ton souci est plus général que juste les onglets, et concerne en fait de façon plus générale la gestion de ce qui s'affiche.

Avec wicket, les éléments html déclarés via des wicket:id seront gérés côté serveur, par ton code. Ces éléments html seront associés à des composants qui eux mêmes sont associés à des données.

Ce qui est affiché est défini lors de la construction de la page puis réévalué lors de chaque "requestcycle", autrement dit lors de chaque action utilisateur entrainant un traitement côté serveur.

Le cas de l'ajax est un peu différent : au lieu de systématiquement tout recharger, on cherche à gagner en perf en ne réaffichant que le strict nécessaire, d'où la notion de "target" qui permet de définir la "cible" de ce qui sera réaffiché, via target.addComponent(). Dans ce cas précis, seuls les éléments faisant partis de la cible seront réévalués afin de déterminer leur nouvel affichage. Petite restriction à noter : on peut pas ajouter la page à la cible. Dur donc à priori de tout réafficher... sauf si on fait setResponsePage(getPage()) dans la méthode Ajax, qui redirige vers la présente page, qui voit alors tous ces éléments ré évalués et ré affichés.

J'ai donc présenté rapidement comment les composants wicket étaient évalués en vue de leur affichage. Reste à définir deux choses : leurs présences (ou non) et leur données.

Pour leur présence, autrement dit leur visibilité, la meilleure façon de procéder est de surcharger la méthode isVisible au sein des composants dont on veut maitriser la visibilité. Cette méthode est systématiquement appelée à chaque affichage et pilote bien évidemment la présence du composant.

Pour les données, leur ré actualisation dépend en fait du type de modèle associés. Un model "par défaut" (comme pour les label par exemple), voit sa valeur déterminée uniquement lors de la construction du composant. Pour que les données derrière le modèle soient ré évaluées, il faut des PropertyModel, dont les données sont derrière le modèle sont interrogées à chaque fois, ou des LoadableDetachableModel, dont les données derrières le modèle sont ré interrogées une fois en début de chaque RequestCycle.

Ainsi, une méthode isVisible surchargée mais interrogeant des données non rafraichies ne verra pas son état changer.

Enfin, on peut noter la présence de composants pouvant contenir d'autres composants, par exemple les panel ou les webmarkupcontainer. Ces éléments permettent de piloter de façon plus globale la visibilité ou non d'un ensemble de composants. Ils évitent donc d'avoir à surcharger 50 isVisible dans autant de composants, vu qu'on ne le fait que pour le composant parent.

Ces éléments t'aident ils ? Y a t il des parties qui sont floues ? Si oui, n'hésite pas à poser plus de questions.

Concernant ton problème, peux tu m'indiquer en termes "wicket" ce que tu veux faire ? Voir me montrer ton code ? Où et comment comptes tu piloter la visibilité ou le contenu affiché ?

**caro_caro** · 03/06/2009, 11h38

Envoyé par ZedroS

salut

je pense que ton souci est plus général que juste les onglets, et concerne en fait de façon plus générale la gestion de ce qui s'affiche.

Avec wicket, les éléments html déclarés via des wicket:id seront gérés côté serveur, par ton code. Ces éléments html seront associés à des composants qui eux mêmes sont associés à des données.

Ce qui est affiché est défini lors de la construction de la page puis réévalué lors de chaque "requestcycle", autrement dit lors de chaque action utilisateur entrainant un traitement côté serveur.

Le cas de l'ajax est un peu différent : au lieu de systématiquement tout recharger, on cherche à gagner en perf en ne réaffichant que le strict nécessaire, d'où la notion de "target" qui permet de définir la "cible" de ce qui sera réaffiché, via target.addComponent(). Dans ce cas précis, seuls les éléments faisant partis de la cible seront réévalués afin de déterminer leur nouvel affichage. Petite restriction à noter : on peut pas ajouter la page à la cible. Dur donc à priori de tout réafficher... sauf si on fait setResponsePage(getPage()) dans la méthode Ajax, qui redirige vers la présente page, qui voit alors tous ces éléments ré évalués et ré affichés.

J'ai donc présenté rapidement comment les composants wicket étaient évalués en vue de leur affichage. Reste à définir deux choses : leurs présences (ou non) et leur données.

Pour leur présence, autrement dit leur visibilité, la meilleure façon de procéder est de surcharger la méthode isVisible au sein des composants dont on veut maitriser la visibilité. Cette méthode est systématiquement appelée à chaque affichage et pilote bien évidemment la présence du composant.

Pour les données, leur ré actualisation dépend en fait du type de modèle associés. Un model "par défaut" (comme pour les label par exemple), voit sa valeur déterminée uniquement lors de la construction du composant. Pour que les données derrière le modèle soient ré évaluées, il faut des PropertyModel, dont les données sont derrière le modèle sont interrogées à chaque fois, ou des LoadableDetachableModel, dont les données derrières le modèle sont ré interrogées une fois en début de chaque RequestCycle.

Ainsi, une méthode isVisible surchargée mais interrogeant des données non rafraichies ne verra pas son état changer.

Enfin, on peut noter la présence de composants pouvant contenir d'autres composants, par exemple les panel ou les webmarkupcontainer. Ces éléments permettent de piloter de façon plus globale la visibilité ou non d'un ensemble de composants. Ils évitent donc d'avoir à surcharger 50 isVisible dans autant de composants, vu qu'on ne le fait que pour le composant parent.

Ces éléments t'aident ils ? Y a t il des parties qui sont floues ? Si oui, n'hésite pas à poser plus de questions.

Concernant ton problème, peux tu m'indiquer en termes "wicket" ce que tu veux faire ? Voir me montrer ton code ? Où et comment comptes tu piloter la visibilité ou le contenu affiché ?

Merci ZedroS pour toutes ces explications,

En fait je suis en train de construire une application web avec des menus (permettant d'accéder à chaque "fonctionnalité" du système. J'ai cru au départ que je pouvais utiliser le composant TabPanel de Wicket (les onglets) pour le faire mais après recherche sur le web. je pense actuellement que le principe de Markup inheritance est mieux adaptée à ce que je veux faire.

Merci.

**joseph_p** · 03/06/2009, 22h07

en effet, rien de tel que l'héritage de page pour ce genre de choses

je te conseille aussi de regarder du côté de wicket stuff annotation, histoire de pouvoir faire ce genre de choses :
@MountHybrid(redirectOnBookmarkableRequest = true)
@MountPath(path = "/bla/foo")

cf http://wicketstuff.org/confluence/di...uff-annotation

nb : j'espère que mes "explications" ne t'ont pas dérangé. Etait ce déjà limpide pour toi ?

++

**caro_caro** · 04/06/2009, 10h24

Envoyé par ZedroS

en effet, rien de tel que l'héritage de page pour ce genre de choses

je te conseille aussi de regarder du côté de wicket stuff annotation, histoire de pouvoir faire ce genre de choses :
@MountHybrid(redirectOnBookmarkableRequest = true)
@MountPath(path = "/bla/foo")

cf http://wicketstuff.org/confluence/di...uff-annotation

nb : j'espère que mes "explications" ne t'ont pas dérangé. Etait ce déjà limpide pour toi ?

++

ça devient clair au fur et à mesure.
Tes explications ne me dérangent pas, bien au contraire, elles m'aident à surmonter les difficultés que je rencontre.
Merci déjà pour ce que tu fais.En ce qui concerne les annotations, je vais me rendre sur ce lien pour comprendre à quoi ça sert.

afficher un arbre lorsqu'on clique sur un onglet

Wicket Java

Discussions similaires

Partager

Partager