Ecouter un event "onclick" sur un bouton avec Dojo 1.7

Version imprimable

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:

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:

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

27/12/2011, 11h51
andlio
Je me suis rappelé d'une phrase que Emmanuel Remy m'a dit dans ce post :

Citation:

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:

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

par

Code:

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

Maintenant ça fonctionne !
28/12/2011, 01h51
emmanuel.remy
Oui c 'est bien cela :D

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:

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