Discussion :

[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 :

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
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 :

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

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 :

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

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

Pour être clair, ce code:

Code :

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

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 :

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

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 :

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

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

par

Code :

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

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 :

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

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 :

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

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 ?