Encapsuler des widgets dans une classe dojo ? [Résolu]

[andlio]

Bonsoir c'est encore moi. (référence à mon précédent post)

J'ai créé une classe dojo. Cette classe est censée transformer un formulaire "classique" en formulaire "ajax".
En fait elle converti les <button> en widget form.button. (je suis nouveau avec Dojo, donc je n'utilise peut-être pas le bon vocabulaire).

Quand je débug avec firebug, les widgets sont bien créés dans ma classe. Mais lorsque que la page s'affiche, les boutons s'affichent sans les icones et les évènements ne correspondent pas à ceux indiqués dans ma classe...

J'avais déjà essayé ce script sans créer de classe et ça fonctionnait.

voici ma classe :

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
dojo.declare('lib.forms.ContributorForm', null, {
	container: null,
	contributorType:"",
	viewPanel:null,
	editPanel:null,
	editButton:null,
	cancelButton:null,
	saveButton:null,
	url:"",
	constructor : function(container, contributorType) {
		if(contributorType != "applicant" && 
				contributorType != "controller" &&
				contributorType != "authority"){
			this.log("constructor", "invalid contributor type : " + contributorType);
		}
		this.container=dojo.byId(container);
		if(null == this.container){
			this.log("constructor", "invalid container : " + container);
			return;
		}
 
		// Create the panels
		this.editPanel = dojo.byId(contributorType + "EditPanel");
		this.viewPanel = dojo.byId(contributorType + "ViewPanel");
 
		// Create the buttons
		this.editButton = new dijit.form.Button({
	        label: "Edit",
	        //onClick: this.editHandler,
	        iconClass:"dijitEditorIcon dijitEditorIconPaste",
	        showLabel: false,
	    }, dojo.query(".edit", this.container));
 
		this.saveButton = new dijit.form.Button({
	        label: "Save",
	        onClick: this.saveHandler,
	        iconClass:"dijitEditorIcon dijitEditorIconSave",
	        showLabel: false,
	    }, dojo.query(".save", this.container));
 
		this.cancelButton = new dijit.form.Button({
	        label: "Cancel",
	        onClick: this.cancelHandler,
	        iconClass:"dijitEditorIcon dijitEditorIconCancel",
	        showLabel: false,
	    }, dojo.query(".cancel", this.container));
 
		// Startup the buttons
		this.editButton.startup();
		this.saveButton.startup();
		this.cancelButton.startup();
	},
	cancelHandler:function(){
 
		// Toggle panels
		this.togglePanels();
	},
	editHandler:function(){
 
		// Toggle panels
		this.togglePanels();
	},
	saveHandler:function(){
 
		// Toggle panels
		this.togglePanels();
	},
	togglePanels:function(){
		if(dojo.style(this.editPanel, "display") == "none"){
			dojo.style(this.editPanel, "display", "inline");
	        dojo.style(this.viewPanel, "display", "none");
		} else {
	    	dojo.style(this.editPanel, "display", "none");
	    	dojo.style(this.viewPanel, "display", "inline");
		}
	},
	log:function(funcName, message){
		console.log("[forms.ContributorForm:"+funcName+"] " + message);
	},
});

[emmanuel.remy]

Salut,

Pour tes icones, je ne vois pas trop le souci, cela devrait fonctionner à partir du moment que tu importes bien un thème dojo.

Pour ton code, il est faux (désolé ).

Quand tu écris

Code :

1
2
3
4
5
6
7
8
 
onClick: this.saveHandler,
...
	saveHandler:function(){
 
		// Toggle panels
		this.togglePanels();
	},

alors au moment du clic la fonction saveHandler va bien se déclencher mais le this de la fonction fera référence non pas à ta classe mais à l'objet dijit.form.button. Question de gestion du this par javascript. Tu devrais plutôt inscrire:

Code :

1
2
 
onClick: dojo.hitch(this, "saveHandler"),

Pour être clair, ce code:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
    
a= {qui:" world",
        doAlert: function () {
                  alert('hello ' + this.qui);
                 }
       };
    
       a.button=  new dijit.form.Button({
                    label: "Save",
                    onClick: a.doAlert,
                    iconClass:"dijitEditorIcon dijitEditorIconSave",
                       showLabel: false},dojo.body());

va afficher "Hello undefined' alors que celui-la:

Code :

1
2
3
4
5
6
7
8
9
10
11
    a= {qui:" world",
        doAlert: function () {
                  alert('hello ' + this.qui);
                 }
       };
    
        a.button=  new dijit.form.Button({
                    label: "Save",
                    onClick: dojo.hitch(a, "doAlert"),
                    iconClass:"dijitEditorIcon dijitEditorIconSave",
                       showLabel: false},dojo.body());

Hello world.

[andlio]

Merci pour ce petit cours. Je ne connaissais pas et je pense que ça m'aurais posé problème tôt ou tard.

Par contre j'ai vraiment l'impression que le problème vient du fait que mon "button" n'est pas converti en widget.
J'ai installé le plugin Dojo pour firebug. Tous mes contentPane apparaissent, mais les button n'apparaissent pas...

J'ai remplacé

Code :

onClick: dojo.hitch(this, "saveHandler"),

par

Code :

onClick: function(){alert("hello world");},

(donc pas ne problème de contexte). La boite de dialogue ne s'affiche pas et la page se recharge...

Je viens de penser à une chose. Le formulaire est chargé via xhr. En cas de succès j'exécute la fonction "displayRequirement()" (pas de classe cette fois-ci). Cette function a pour rôle de remplacer le contenu de la div container par le résultat de la requête et de le convertir en objet ContributorForm :

Code :

1
2
3
4
5
6
7
8
function displayRequirement(htmlData){
	// Display html in the div
	dijit.byId("div_form_requirement").setContent(htmlData);
 
	// Create the form
	new lib.forms.ContributorForm("formSelectApplicant", "applicant");
	new lib.forms.ContributorForm("formSelectController", "controller");
};

Je me suis dit que comme j'ai créé l'objet dans la fonction
mais que je ne l'ai pas sauvegardé dans une variable, il était automatiquement détruit en sortant de displayRequirement()...
J'ai alors remplacé par le code suivant :

Code :

1
2
3
4
5
6
7
8
9
10
var formApplicant = null;
 
function displayRequirement(htmlData){
	// Display html in the div
	dijit.byId("div_form_requirement").setContent(htmlData);
 
	// Create the form
	formApplicant = new lib.forms.ContributorForm("formSelectApplicant", "applicant");
	new lib.forms.ContributorForm("formSelectController", "controller");
};

Mais cela ne change rien

[emmanuel.remy]

Quel est le type de widget "div_form_requirement" ?

[andlio]

div_form_requirement est de type dijit.layout.ContentPane... Pourquoi ?

[andlio]

Lorsque je debuggue avec Firebud, les widgets apparaissent bien mais en tant que "Detached widgets" (cf.pj). Est-ce que ça peut avoir un rapport ?

[andlio]

Je viens de résoudre mon problème grâce à #tommyjr sur le channel #dojo d'IRC. Je m'empresse de vous donner la solution, ça peut être utile.

Le problème vient du fait que dojo.query retourne un tableau. Il suffit donc de remplacer

Code :

dojo.query(...)

par

Code :

dojo.query(...)[0]

Merci pour votre aide !