[Taglib] tree dynamique

Version imprimable

23/01/2006, 18h39
pmartin8

[Taglib] tree dynamique

Bonjour

Je veux faire un arbre en JSP completement dynamique: lorsque j'expand un noeud de mon arbre, un appel se fait a au serveur et genere les noeuds qui sont enfants.

Quelqu'un a deja fait ca? ou a une idée comment je pourrais implementer ca?

Merci beaucoup
23/01/2006, 20h06
agougeon

Salut, j'ai deja realisé ça... regarde ici, je m'en suis inspirer pour faire ma propre taglib...
http://www.guydavis.ca/projects/oss/tags/

J'effectuer la meme méthode sauf que j'effectue des requetes sur la base a chaque ouverture de lien... j'avais placer cette arbre dans une iframe histoire d'eviter trop de rechargement de page.. mais avec du recule, je pense qu'avec ajax ça devrai encore etre plus jolie ;)
23/01/2006, 20h26
pmartin8

ok merci

C'est drole parce que jetais justement en train d'implanter cette solution avec guydavis aussi! :)

As-tu toujours les sources de ton projet?? J'aimerasi voir comment tu fais pour "augmenter" ton arbre lors d'un click

Merci !

p.s. Je vais laisser tomber AJAX parce que la seule chose dasn ma page c'est mon arbre et que je n'ai pas trop de souci de performance.

Bon je vais essayer de t’expliquer… c’est pas la solution la plus propre mais elle marche bien… mais si tu as deja un peu tester cette lib tu vas gagner du temps…
Je charge en memoire mon objet complet… c'est-à-dire mon arbre.
Il est composé de la façon suivante :

Je fais dans une classe indépendante :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
termes = new Hashtable();
ResultSet rs1 = outilsBD.search("arbre","SELECT * FROM arbre");
ResultSet rs2 = outilsBD.search("lien","SELECT * FROM lien");
 
while(rs1.next()){
	Mot mot = new Mot();
	mot.setString(rs1.getString("terme"));
	mot.setID(rs1.getInt("numterme"));
	termes.put(rs1.getInt("numterme"),mot);
} //PS Mot est un objet contenant un String et un int
 
// La je crée l’arbre avec les liens :
 
while(rs2.next()){
		 ((Mot)termes.get(rs2.getInt("NUMTERMEPERE"))).setFils((Mot)termes.get(rs2.getInt("NUMTERMEFILS")));
		 ((Mot)termes.get(rs2.getInt("NUMTERMEFILS"))).addDepth(((Mot)termes.get(rs2.getInt("NUMTERMEPERE"))).getDepth());
		 ((Mot)termes.get(rs2.getInt("NUMTERMEFILS"))).setMotsPere((Mot)termes.get(rs2.getInt("NUMTERMEPERE")));
}

Bon c’est un peu babarbar mais du coup j’ai tous mon arbre dans un object… ceci peut être mis dans le construcuteur de celui-ci…
Bon ensuite
Voivi mon doStart du ma tag :

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
 
public int doStartTag() throws JspException {
 
	JspWriter out = pageContext.getOut();
 
	try {
 
		int name = total.getRoot().id;
		out.println("<table border=\"0\" cellspacing=\"2\" cellpadding=\"0\"><tr>\n");
		out.println("<td width=\"25\"></td>\n");
		out.print( "<td nowrap=\"1\" align=\"left\" width=\"25\"><img src=\"/web/tree-menu/book_close.gif\" border=\"0\" /></td>" );
		if(style.equals("gestion"))
		out.print( "<td nowrap=\"1\"><a class=\"menu\" href=\"#\" onClick=\"afficherPopup8('gererTerme.do?numTerme=1&leaf=false&terme=TERME&idPere=0');\">TERME</a></td>" );
			else
				out.print( "<td nowrap=\"1\">TERME</td>" );
			out.print( "\n</tr></table>\n" );    		
 
			ajouterFils(total.getRoot(), out);
 
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
 
 
		return SKIP_BODY;
	}

Ok, c’est l’indigestion et je fini par la fonction recursive ajouterFils :

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
 
 public void ajouterFils(Mot mot, JspWriter out){
      	try {
 
	      for(int i = 0 ; i < mot.getNbFils() ; i++){
	      	Mot fils = new Mot();
	      	fils = mot.getFils(i);
	      	boolean present = false;
	      	for(int j = 0 ; j < list.size() ; j++)
	      		if(Integer.parseInt(list.get(j)) == fils.id)
	      			present = true;
 
 
	               int name = fils.id;
 
	               out.println("<table border=\"0\"cellspacing=\"2\"cellpadding=\"0\"><tr>\n");
 
	            for (int j = 0; j < fils.getDepth(); j++)
	            	out.println( "<td nowrap=\"1\" width=\"25\">&nbsp;</td>\n" );
 
	            if (fils.isLeaf()) 
	            	out.println( "<td nowrap=\"1\" width=\"25\">&nbsp;</td>\n" );
	            else {
	            	if(present){
	            	out.println("<a name=\""+fils.id+"\"></a>");
	            	out.println( "<td nowrap=\"1\" width=\"25\"><img id=\"img" + name + "\" src=\"/web/tree-menu/mac_open_arrow.gif \" border=\"0\" " );
	            	out.println( "onClick=\"location.href='replierTerme.do?id="+ name +"#"+fils.id+"'\"></td>\n");
	            		}
	            		else {
	            		out.println("<a name=\""+fils.id+"\"></a>");
	            		out.println( "<td nowrap=\"1\" width=\"25\"><img id=\"img" + name + "\" src=\"/web/tree-menu/mac_closed_arrow.gif \" border=\"0\" " );
	            		out.println( "onClick=\"location.href='deplierTerme.do?id="+ name +"#"+fils.id+"'\"></td>\n");  
	            		}
	            	}
 
	            	if(style.equals("gestion"))
	            		out.print( "<td>" + "<a class=\"menu\" href=\"#\" onClick=\"afficherPopup8('gererTerme.do?numTerme="+fils.id+"&leaf="+fils.isLeaf()+"&terme="+fils.mot+"&idPere="+fils.getMotsPere().id+"');;\">" + fils.mot + "</a></td>");
	            	else
	            	out.print( "<td>" + "<a class=\"menu\" href=\"#\" onClick=\"ajouterTerme('"+ fils.mot +"','" + fils.id +"');\">" + fils.mot + "</a></td>");
	            	out.print( "\n</tr></table>\n" );
 
	            	if (!mot.isLeaf()){
	            	out.println( "<span id=\"span" + name + "\" class=\"clsShow\">\n");
	    	      	if(present)
	    	      		ajouterFils(fils, out);
	            	}
	            	if(mot.isLeaf())
	            		out.print("</span>");	
	      		}
	      		out.println("</span>");
		} catch (IOException e) {
			e.printStackTrace();
		}
    }

Enfin voici mes actions pour deplier et replier les termes :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
	public ActionForward execute(
		ActionMapping mapping,
		ActionForm form,
		HttpServletRequest request,
		HttpServletResponse response) {
 
		String target = new String("success");		
 
		HttpSession session = request.getSession();
 
		LoadTerme termeC= (LoadTerme)session.getAttribute("termeC");
		ArrayList<String> termes =(ArrayList<String>)session.getAttribute("termes");
 
		String id = request.getParameter("id");
		termes.add(id);
		request.setAttribute("termeC", termeC);
		request.setAttribute("termes", termes);
		request.setAttribute("id", id);
 
		return(mapping.findForward(target));
	}

J’ai un tableau qui contient tout les numéro des fils déplié…et pour replier je le supprime de mon tableau… bon ok si y avais un trophée du code moche je serai vainqueur, mais bon des fois le lapse de temps fait que….
Bon pour resumé j’ai deux objet de session, un contenant tous mon arbre (termesC) et un autre contenant la liste des fils deplié…
Voilou ;)
euhh désolé pour la presentation, mais j'ai eu un peu de mal :roll:
Pose des questions si tu as des pb

23/01/2006, 21h12
pmartin8
ok merci je vais essayer de my retrouver dans tous ce spagethi.

En attendant, pour te remercier je vais te donner un truc pour faciler ton code.. la prochaine fois.

Avec Java 1.5 tu peux typer tes contenant (comme HashMap)
Code:

1 2 HashMap<Mot> termes = new HashMap<Mot>();
Dans ce cas, tu n'auraus pas besoin de faire un cast des objets que tu obtient de ton contenant.

C'est plus propre, mais aussi plus sécuritaire, car cela empeche que tu places des mauvais objets dasn ton contenant.

Enfin, surmement que tu savais mais que tu avais eu la flemme ;)

Enfin, Je reviens dans les prochains jours avec des questions a propos de ton code

Merci bien!
23/01/2006, 23h02
pmartin8

premiere question:

As-tu redéfinie seulement la methode doStartTag() ou tu a aussi redefini
doStartTag(JspWriter out) aussi?

Que font ces methodes au juste?

deuxieme question:

Qu'est ce que "total"?
23/01/2006, 23h07
agougeon

J'ai redefini cette methode... cette methode sera appler a l'endroit ou tu place ton tag... donc si tu regarde mon code... il va ecrire du code html celon mon abre... c un peu comme une servlet...
23/01/2006, 23h17
pmartin8

ok

1-Qu'est-ce que "total" a lintérieur de ta méthode?

2- est-ce que je peux voir les variables membre de "Mot" ??

Merci encore!

alors total c mon arbre complet....
et voici ma classe Mot

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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
 
public class Mot {
 
	public String mot;
	private int profondeur;
	public int id;
	public Mot motsPere;
	public ArrayList<Mot> motsFils;
 
	/**
         * Constreur par defaut d'un mot
         */
	public Mot(){
		motsPere = null;
		motsFils = new ArrayList<Mot>();
		mot = "";
		profondeur = 0;
		id = 1;
	}
 
	/**
         * Cette méthode permet d'attribuer la valeur du mot
         * @param v chaine de caractere du mot
         */
	public void setString(String v){
		mot = v;
	}
 
	/**
         * Cette méthode permet d'augmenter la profondeur dans l'arborescence
         * de 1
         * @param depth profondeur
         */
	public void addDepth(int depth){
		this.profondeur = depth + 1;
	}
 
	/**
         * Cette méthode permet d'obtenir la profondeur du mot
         * @return la profondeur du mot
         */
	public int getDepth(){
		return this.profondeur;
	}
 
	/**
         * Cette méthode permet d'attribuer la profondeur d'un mot
         * @param l prfondeur du mot
         */
	public void setProfondeur(int l){
		profondeur = l;
	}
 
	/**
         * Cette méthode permet d'obtenir la chaine de caractere du mot
         * @return la chaine de caractere du mot
         */
	public String getString(){
		return mot;
	}
 
	/**
         * Cette méthode permet d'obtenir la profondeur du mot
         * @return la profondeur du mot
         */
	public int getProfondeur(){
		return profondeur;
	}
 
	/**
         * Cette méthode permet d'obtenir l'identifiant du mot
         * @return identifiant du mot
         */
	public int getId(){
		return id;
	}
 
	/**
         * Cette méthode permet d'obtenir un fils par rapport à sa position
         * relative
         * @param i numéro du fils (relatif)
         * @return Mot le fils
         */
	public Mot getFils(int i){
		return (Mot)motsFils.get(i);
	}
 
	/**
         * Cette méthode permet d'obtenir un pere par rapport à sa position
         * relative
         * @return motsPere Mot le père
         */
	public Mot getPere(){
		return (Mot)motsPere;
	}
 
	/**
         * Cette méthode permet de tester si le mot est à la racine de
         * l'arborescence
         * @return true si le mot est à la racine, false sinon
         */
	public boolean isRoot(){
		return (getPere() == null);
	}
 
	/**
         * Cette méthode permet d'obtenir la chaine d'un fils
         * @param i numéro de la position du fils (relatif)
         * @return chaine du fils
         */
	public String getStringFils(int i){
		return ((Mot)motsFils.get(i)).getString();
	}
 
	/**
         * Cette méthode permet d'obtenir le nombre de fils
         * @return nombre de fils
         */
	public int getNbFils(){
		return motsFils.size();
	}
 
	/**
         * Cette méthode permet d'ajouter un fils au mot
         * @param f fils à ajouter
         */
	public void setFils(Mot f){
		motsFils.add(f);
	}
 
	/**
         * Cette méthode permet d'attribuer un identifiant au mot
         * @param id identifiant du mot
         */
	public void setID(int id){
		this.id = id;
	}
 
	/**
         * 
         * @return boolean
         */
	public boolean isLeaf() {
		if( getNbFils() == 0)
			return true;
		else
			return false;
	}
 
	public Mot getMotsPere() {
		return motsPere;
	}
 
	public void setMotsPere(Mot motsPere) {
		//this.motsPere = new Mot();
		this.motsPere = motsPere;
	}
}

merci beaucoup!!

Encore 2 questions

quest-ce que

Code:

1
2
3
4
        if(style.equals("gestion"))
            out.print( "<td nowrap=\"1\"><a class=\"menu\" href=\"#\" onClick=\"afficherPopup8('gererTerme.do?numTerme=1&leaf=false&terme=TERME&idPere=0');\">TERME</a></td>" );
        else
            out.print( "<td nowrap=\"1\">TERME</td>" );

Et total est un objet de quel type??

Merci encore!

Alors voila total :
Code:

1 2 3 4 5 6 public class LoadTerme { private OutilsBD outilsBD; private Hashtable<Mot> termes; et je fais le premier code que j'ai montré... avec la requete dans le constructeur
et pour ta deuxieme question j'utilse le tag de deux façon dans deux jsp differente. Donc pour distinguer les appel j'initialise le parametre comme ça (present dans ma tld) : dans la JSP :
Code:

1 2 3 <montag:terme list="<%=(ArrayList)pageContext.getSession().getAttribute("termes")%>" style="<%= (String)pageContext.getSession().getAttribute("style")%>" total="<%=LoadTermes)pageContext.getSession().getAttribute("termes")%>"> </montag:terme>

Bon je vais me coucher... je te donne la tld pendant qu'on y es:D lollll

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
 
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE taglib PUBLIC "-//Sun Microsystems, Inc.//DTD JSP Tag Library 1.1//EN"
	"http://java.sun.com/j2ee/dtds/web-jsptaglibrary_1_1.dtd">
<taglib>
<tlibversion>1.2</tlibversion>
<jspversion>1.1</jspversion>
<shortname>montag</shortname>
 
<tag>
<name>terme</name>
<tagclass>fr.groupe.termes.TagTerme</tagclass>
<bodycontent>JSP</bodycontent>
      <attribute>
         <name>list</name>
         <rtexprvalue>true</rtexprvalue>
      </attribute> 
 
      <attribute>
      	 <name>total</name>
      	 <rtexprvalue>true</rtexprvalue>
      </attribute> 
 
      <attribute>
         <name>style</name>
         <rtexprvalue>true</rtexprvalue>
      </attribute> 
</tag>
</taglib>

Si tu as des problemes post ici, je reviendrai fair un tour..
bon courage

24/01/2006, 15h57
pmartin8

Bon Matin!

Avant que je n'aille plus loin, je voulais m'assurer que lorsque tu déplies une branche ton arbre réapparait dans la forme a laquel il était avant que tu fasses l'action.

Les branches qui étaient pliées sont toujours pliées et les branches dépliées demeurent dépliées.

Est-ce que ton arbre fait ca?

Merci
24/01/2006, 16h03
agougeon

tout a fais... puisque je sauvegarde les branches depliés dans un tableau... puis j'affiche uniquement ceux deplié apres...
24/01/2006, 16h05
pmartin8

tu gères ! :wink: