Appel de fonction javascript avec un tableau en paramètre

**AnneB** · 25/07/2007, 09h36

Salut à tous!

J'ai un petit souci :
J'essaye de faire un menu contextuel (à la seule différence que le menu apparait sur double clic gauche). Jusque là pas de pb : le seul souci c'est que mon constructeur prend en paramètre un array (qui contient en fait le label/lien/image de chaque item du menu)

En fait j'appel la fonction javascript suivante depuis du java dans du jsp :
code jsp (java dans le jsp) :

Code :

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

out.print("<tr onmouseover=\"menuEvent()\">");....

code js :

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
function menuEvent()
 {
 	return new Menu_Contextuel(
	 	// Tableau des items
	 	[
			 {
			 'ItemName': 'Page précédente',
			 'Action': 'history.go(-1)',
			 'Image': null
			 }
	 	,
			 {
			 'ItemName': 'Page suivante',
			 'Action': 'history.go(1)',
			 'Image': null
			 }
	 	,
			 {
			 'ItemName': null
			 }
	 	,
			 {
			 'ItemName': 'Heure courante',
			 'Action': 'var date=new Date();alert(date.toLocaleString());',
			 'Image': null
			 }
	 	,
			 {
			 'ItemName': 'Envoyer Mail a XXXXX',
			 'Action': 'document.location=\'mailto:XXXXX\'',
			 'Image': null
			 }
	 	]
 	,
 		// Liste des options du menu
		 {
		 'focusOn':{'background':'#316AC5', 'color':'#ffffff'},
		 'focusOff':{'background':'#ffffff', 'color':'#000000'},
		 'menu_color':{'background':'#ffffff', 'shadow':'#9D9DA1'},
		 'separator':{'size':'1', 'color':''},
		 'shadow_padding':'3'
		 }
 	);
 }

sachant que cela mis avec le code suivant : ca marche

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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
 //
 // Librairie by The Rubik's Man
 // © 2005-2006
 //
 
 /*==================================================================================================================*/
 /*==================================================================================================================*/
 /*===> -------------------------------------------------------------------------- <====*/
 /*===> | Librairie Menu Contextuel par The Rubik's Man | <====*/
 /*===> -------------------------------------------------------------------------- <====*/
 /*===> -- 2 Methodes provenant de la librairie open source " prototype.js " : Class.create() et Function.prototype.bind() <====*/
 /*===> <====*/
 /*===> -- Installation d'un menu contextuel personnalise tres simple avec ou sans image ( a droite ou a gauche ) <====*/
 /*===> <====*/
 /*===> © The Rubik's Man © <====*/
 /*===> <====*/
 /*===> Plan du fichier : 1) Extrait de la librairie "prototype" (2 fonctions) (ligne 28 -> 42) <====*/
 /*===> 2) Librairie de creation du menu contextuel (ligne 56 ->221) <====*/
 /*===> <====*/
 /*==================================================================================================================*/
 /*==================================================================================================================*/
 
 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 // Extrait de la librairie PROTOTYPE //
 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 // Permet avec la syntaxe " var maClasse = Class.create() " d'instancier une nouvelle classe et d'appeler la methode " initialize() " de cette classe
 // la methode " initialize() " est considere comme le constructeur de la classe
 var Class = {
 create: function() {
 return function() {
 this.initialize.apply(this, arguments);
 }
 }
 }
 // Permet de contrer le moteur javascript dans un bug de reference de fonction
 // Generalement utilisee dans les methodes onComplete... onLoad... etc pour faire reference a l'objet en cours
 Function.prototype.bind = function(object) {
 var __method = this;
 return function() {
 return __method.apply(object, arguments);
 }
 }
 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 // Fin Extrait de la librairie PROTOTYPE //
 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
 
 
 //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 ///////////////////////////////////// Debut librairie principale Menu_Contextuel ///////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 /* Contextuel Menu javascript creation
 * Copyright (c) 2006 Peter BUGAN ( alias The Rubik's Man) <ocbslim@tiscali.fr>
 * Free but protected by the Apache License 2.0
 */
 var Menu_Contextuel = Class.create();
 Menu_Contextuel.prototype = {
 // Constructeur du menu contextuel
 initialize : function (itemArray,options) {
 // Enregistrement du tableau des elements du menu
 this.items = itemArray;
 
 // Enregistrement des parametres de style //
 // Style de la boite principale
 this.menu_style = 'z-index:500;'+
 'position:absolute;'+
 'width:200px;'+
 'border:1px solid '+options.menu_color.shadow+';'+
 'background-color:'+options.menu_color.background+';'+
 'font-family:Microsoft sans serif;'+
 'font-size:12px;'+
 'cursor:default;'+
 'visibility:hidden;'+
 'padding:3;';
 // Style de la boite ombree
 this.shadow_style = 'z-index:400;'+
 'position:absolute;'+
 'width:200px;'+
 'border:1px solid '+options.menu_color.shadow+';'+
 'background-color:'+options.menu_color.shadow+';'+
 'font-family:Microsoft sans serif;'+
 'font-size:12px;'+
 'color:'+options.menu_color.shadow+';'+
 'cursor:default;'+
 'visibility:hidden;'+
 'padding:3;';
 // Style des items lors du focus
 this.focusOn_style = 'background:'+options.focusOn.background+';'+
 'color:'+options.focusOn.color+';';
 // Style des items lors du non focus
 this.focusOff_style = 'background:'+options.focusOff.background+';'+
 'color:'+options.focusOff.color+';';
 // Style des lignes de separation
 this.separator_style = 'size='+options.separator.size+' '+
 'color='+options.separator.color+' ';
 // Valeur de la profondeur de l'ombre
 this.shadow_padding = options.shadow_padding;
 // ----------------------------------------------------------- //
 
 this.create_html(); // Creation du code HTML du menu contextuel
 this.set_listener(); // Instanciation des ecouteurs de mouvement, de clic gauche et droit de la souris
 },
 
 // Fonction permettant de capturer les coordonnees de la souris sur tous les navigateurs
 mousePositionCapture: function(e) {
 var event = typeof window.event != 'undefined' ? window.event : e;
 var Xfen, Xdoc, Yfen, Ydoc, el, scrollL, scrollT;
 if ( document.documentElement.scrollLeft != 0 ) scrollL = document.documentElement.scrollLeft;
 else if ( document.body.scrollLeft != 0 ) scrollL = document.body.scrollLeft;
 else scrollL = 0;
 if ( document.documentElement.scrollTop != 0 ) scrollT = document.documentElement.scrollTop;
 else if ( document.body.scrollTop != 0 ) scrollT = document.body.scrollTop;
 else scrollT = 0;
 Xfen = event.clientX;
 Xdoc = Xfen + scrollL;
 Yfen = event.clientY;
 Ydoc = Yfen + scrollT;
 
 this.mouse_x = Xdoc;
 this.mouse_y = Ydoc;
 },
 
 // Fonction permettant d'ouvir le menu contextuel lors d'un clic droit de la souris
 open: function() {
 document.getElementById("menu_contextuel_div").firstChild.style.top = this.mouse_y+'px';
 document.getElementById("menu_contextuel_div").firstChild.style.left = this.mouse_x+'px';
 document.getElementById("menu_contextuel_shadow_div").style.top = this.mouse_y+parseInt(this.shadow_padding)+'px';
 document.getElementById("menu_contextuel_shadow_div").style.left = this.mouse_x+parseInt(this.shadow_padding)+'px'
 document.getElementById("menu_contextuel_div").firstChild.style.visibility = "visible";
 document.getElementById("menu_contextuel_shadow_div").style.visibility = "visible";
 return false;
 },
 
 // Fonction permettant de fermer le menu contextuel
 close: function() {
 document.getElementById("menu_contextuel_div").firstChild.style.top = 0;
 document.getElementById("menu_contextuel_div").firstChild.style.left = 0;
 document.getElementById("menu_contextuel_shadow_div").style.top = 0;
 document.getElementById("menu_contextuel_shadow_div").style.left = 0;
 document.getElementById("menu_contextuel_div").firstChild.style.visibility = "hidden";
 document.getElementById("menu_contextuel_shadow_div").style.visibility = "hidden";
},
 
 // Fonction permettant de creer le code html du menu contextuel
 create_html: function() {
 // Generation du code HTML des 2 div
 var html_code_ombre = '<div id="menu_contextuel_shadow_div" style="'+this.shadow_style+'">';
 var html_code_item = '';
 var background_focusOn = this.focusOn_style.split(';')[0].split(':')[1];
 var background_focusOff = this.focusOff_style.split(';')[0].split(':')[1];
 var color_focusOn = this.focusOn_style.split(';')[1].split(':')[1];
 var color_focusOff = this.focusOff_style.split(';')[1].split(':')[1];
 
for(var i=0;i<this.items.length;i++) {
 if (this.items[i].ItemName != null) {
 var imageLeft = this.items[i].Image == null ?
 '' : (this.items[i].Image.position == 'right' ?
'' : '<img valign=bottom style="position:absolute;left:1px;" src="'+this.items[i].Image.url+'" height="15" width="15">'
 );
 var imageRight = this.items[i].Image == null ?
 '' : (this.items[i].Image.position == 'left' ?
'' : '<img valign=bottom style="position:absolute;right:1px;" src="'+this.items[i].Image.url+'" height="15" width="15">'
 );
 html_code_item += '<div style="padding-left:15px;padding-right:7px;'+this.focusOff_style+'">'+imageLeft+this.items[i].ItemName+imageRight+'</div>';
 html_code_ombre += '<div style="padding-left:15px;padding-right:7px;">&nbsp;</div>';
 }
 else {
 html_code_item += '<hr '+this.separator_style+'>';
 html_code_ombre += '<hr '+this.separator_style+'>';
}
 }
 html_code_item += '</div>';
 // Fin de generation du code HTML
 
 // Integration du code html dynamiquement dans le document en cours
// On cree l'element
 var tempDiv = document.createElement('div');
 tempDiv.id = 'menu_contextuel_div';
 tempDiv.innerHTML = '<div style="'+this.menu_style+'">'+html_code_item+html_code_ombre+'</div>';
 
  // Si le container existe deja alors on le supprime
 if (document.getElementById('menu_contextuel_div')) document.body.removeChild(document.getElementById('menu_contextuel_div'));
 // Puis on integre le nouveau menu contextuel a la suite du code courant de la page
 document.body.appendChild(tempDiv);
 
 var i = 0;
 var divItem = null;
 while (divItem = document.getElementById('menu_contextuel_div').firstChild.childNodes[i++]) {
 divItem.onmouseover = function(){
 this.style.background = background_focusOn;
 this.style.color = color_focusOn;
 }
 divItem.onmouseout = function(){
 this.style.background = background_focusOff;
 this.style.color = color_focusOff;
 }
 eval('divItem.onclick = function(){'+
 'document.onclick();'+
 this.items[i-1].Action+
 '}'
 );
 }
 },
 
	set_listener: function() {
		if(document.getElementById('stopEventUpdate').style.display=='block'){
			document.onmousemove = this.mousePositionCapture.bind(this);
			document.getElementById('divAuthorizedClick').ondblclick = this.open.bind(this);
 
	 		// OnClick
	 		var oldOnClick = document.onclick;
	 		var addedFunc = this.close.bind(this);
			if (typeof (document.onclick) != 'function') document.onclick = addedFunc;
		 	else {
			 	document.onclick = function(e) {
				 	oldOnClick(e);
				 	addedFunc(e);
			 	}
		 	}
		 }
	}
 };
 //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 /////////////////////////////////////// Fin librairie principale Menu_Contextuel ///////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
 //
 // Librairie by The Rubik's Man
 // © 2005-2006

Ca marche bien pour l'instant parce que le tableau des items menu est construit direct dans le javascript....
Mais je ne sais pas du tout comment je pourrais faire pour construire mes item de menu dynamiquement (nb d'item variable selon la ligne sur laquelle l'utilisateur clique, ...)

Ce que je voulais faire c'est de passer en paramètre une liste ou un tableau dans la fonction javascript genre de faire dans la jsp :

Code :

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

1
2
Array menuItems = ...... // construction du tableau contenant les items du menu
out.print("<tr onmouseover=\"menuEvent("+menuItems+")\">");....

Mais ca ne marche pas trop....ou alors c'est que je sais pas comment récupérer le param sous forme d'un tableau en js.....

Galère....

Quelqu'un saurait me donner une piste svp???

**_Mac_** · 25/07/2007, 10h03

C'est quoi le rapport avec Struts ?

Bref, tu peux utiliser et constuire un Array Java (côté serveur), mais tu ne peux pas le passer directement en paramètre JavaScript (côté client). Il faut passer une représentation compatible JavaScript ("string" ou vrai tableau) de cet Array. Donc il faut certainement passer par une boucle pour parcourir ton Array et générer le code HTML/JavaScript qui va bien.

Ton truc, c'est principalement du JavaScript et pas du Java, donc mets d'abord en place une mécanique JavaScript souple facilement intégrable avec une génération côté serveur puis passe au Java. Travaille donc d'abord avec un bête fichier HTML "statique" que tu édites avec ton éditeur de texte préféré et que tu ouvres ensuite dans IE ou FF pour tester.

Appel de fonction javascript avec un tableau en paramètre

Struts 1 Java

Discussions similaires

Partager

Partager