Discussion :

[andlio]

Bonjour,

Me revoilà. Je suis face à un mystère.
J'ai une function dans laquelle je voudrais "écouter" le clic sur le bouton de la toolbar de la page.

Je n'ai pas d'erreur, mais rien ne se passe quand je clique sur ledit bouton.

Voici comment je déclare ma toolbar :

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
<div data-dojo-type="dijit.Toolbar">
	<div data-dojo-type="lib.widgets.GroupToggleButton" 
		 data-dojo-props="groupName:'planViewType'"
		 id="toolbar.setViewMode" iconClass="dijitEditorIcon dijitEditorIconCut" showLabel="true">
		View
	</div>
 	<div data-dojo-type="lib.widgets.GroupToggleButton"
		 data-dojo-props="groupName:'planViewType'"
		 id="toolbar.setEditMode" iconClass="dijitEditorIcon dijitEditorIconCut" showLabel="true">
		Edit
	</div>
	<div data-dojo-type="lib.widgets.GroupToggleButton"
		 data-dojo-props="groupName:'planViewType'"
		 id="toolbar.setControlMode" iconClass="dijitEditorIcon dijitEditorIconCut" showLabel="true">
		Control
	</div>
	<div data-dojo-type="dijit.form.Button" id="toolbar.test"
         data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconCut', showLabel:false">Test</div>
</div>

Voici comment je me connecte à l'évènement

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
controllers.PlanController = {
	planTree:null,
	//...
	initUI:function(){
		// Connect the events
		dojo.connect(this.planTree, "onClick", this, function(item, node, evt){
			//...
		});
 
		dojo.connect(dojo.byId("toolbar.setViewMode"), "onClick", this, function(){this.initViewMode();});
		dojo.connect(dojo.byId("toolbar.setEditMode"), "onClick", this, function(){this.initEditMode();});
		dojo.connect(dojo.byId("toolbar.setControlMode"), "onClick", this, function(){this.initControlMode();});
		dojo.connect(dojo.byId("toolbar.test"), "onClick", this, function(){alert("test");});
	},
	//...
}

Le 1er connect fonctionne (dojo.connect(this.planTree...).
Les autres non... rien ne se passe.

Comment cela se fait-il ?

PS : j'utilise Dojo 1.7

[andlio]

Je me suis rappelé d'une phrase que Emmanuel Remy m'a dit dans ce post :

les noms des événements doivent être ceux du DOM, donc sans majuscule (onclick et pas onClick)

Je me suis donc dit qu'il y avait 2 sortes d'évènements :

• Les évènement DOM
• Les évènements dojo (widgets)

Est-ce bien cela ?

J'ai donc remplacé

Code :

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

dojo.connect(dojo.byId("toolbar.setViewMode"), "onClick", this, function(){this.initViewMode();});

par

Code :

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

dojo.connect(dojo.byId("toolbar.setViewMode"), "onclick", this, function(){this.initViewMode();});

Maintenant ça fonctionne !

[emmanuel.remy]

Oui c 'est bien cela

Quand tu fais un dojo.connect sur un élément du DOM tu t'abonnes alors aux events du DOM, comme onclick par exemple.

Quand tu utilises un widget dijit (le bouton par exemple), le concepteur fait lui même le dojo.connect (souvent via le template attachEvent) et délègue ensuite le traitement vers une fonction qu'il a choisie, onClick par exemple.

Conscient de cette "confusion" il a été ajouté à partir de la 1.7 une fonction utile "on" sur les widgets. On peut donc maintenant écrire:

Code :

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

1
2
 
monDijit.on("click", function() {...});

Toutefois méfiance car le code de la function ne s'exécute pas dans le scope du widget... donc dojo.hitch pour y remédier si besoin

ERE