Discussion :

[andlio]

Coucou tout le monde ! C'est encore moi

Je voudrais faire évoluer mon widget (voir ici ou encore ici).
Je voudrais donc mettre en place des templates. Ça m'a l'air quand même bien surpuissant ça. Encore faut-il savoir s'en servir.

Tout ce que j'obtiens pour le moment c'est l'erreur suivante :

dojo.hitch: scope["dojo.hitch(this"] is null (scope="[Widget lib.widgets.ReqContributorSelection, lib_widgets_ReqContributorSelection_0]")

D'où mes 2 questions :

1. Que signifie cette erreur ?
2. Comment affecter les valeur indiquées dans data-dojo-props dans "MonWidget.propriete" ? (la methode postCreate n'a pas l'air d'être appelée)

(J'utilise la version 1.7 de dojo)

Alors voici comment j'ai créé mon widget :

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
dojo.provide("lib.widgets.ReqContributorSelection");
 
//dojo.require...
 
dojo.declare('lib.widgets.ReqContributorSelection', [dijit._Widget, dijit._Templated], {
 
	// Path to template
	templateString : dojo.cache("lib", "widgets/templates/ReqContributorSelection.html"),
	// The widget includes others widgets
	widgetsInTemplate : true,
	// The user
	user:{id:0, fullName:"", responsibility:""},
	// The requirement
	requirement:{id:0},
	// Display the edit button
	showEditButton:true,
	// The members store
	membersStore:null,
 
	/**
	 * Constructor
	 * @param params
	 */
	constructor:function(){
        if(this.user.responsibility != "applicant" && 
        		this.user.responsibility != "controller" &&
        		this.user.responsibility != "authority"){
			this.log("constructor", "invalid contributor type : " + this.user.responsibility);
		}
	},
	postMixInProperties:function() {
 
	},
	postCreate:function(){
		alert("POST CREATE");
		this.log("constructor", "user : " + this.user.id + " - " + this.user.fullName);
        this.contributorId.set("value", this.user.id);
        this.contributorFullName.set("value", this.user.fullName);
	},
	/**
	 * Function called when a user click on the cancel button
	 */
	cancelHandler:function(){
		this.togglePanels();
	},
	/**
	 * Function called when a user click on the edit button
	 */
	editHandler:function(){
		//...
	},
	/**
	 * Function called when a user click on the save button
	 */
	saveHandler:function(){
		//...
	},
	/**
	 * Toggle the visibility of the edit and view panels
	 */
	togglePanels:function(){
		//...
	},
	/**
	 * Write a log message on the console
	 * @param funcName : the function from which we log
	 * @param message : the message to log
	 */
	log:function(funcName, message){
		console.log("[forms.ContributorForm:"+funcName+"] " + message);
	},
});

Et mon template

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
<div>
	<span class="label">Contributor</span>
	<span dojoattachpoint="viewPanel">
		<input type="hidden" dojoattachpoint="contributorId" />
		<input type="text" 
			   data-dojo-type="dijit.form.TextBox"
			   data-dojo-props="disabled:true"
			   dojoattachpoint="contributorFullName"/>
		<button dojo-data-type="dijit.form.Button"
				dojo-data-props="label:'Edit', iconClass:'dijitEditorIcon dijitEditorIconPaste', showLabel:false"
				dojoattachpoint="editButton"
				dojoattaevent="onClick:dojo.hitch(this,'editHandler')">
		</button>
	</span>
	<span dojoattachpoint="editPanel">
		<select data-dojo-type="dijit.form.FilteringSelect"
				data-dojo-props="autoComplete: true, required: false, searchAttr:'fullName'"
				dojoattachpoint="membersList"
				class="input"  >
		</select>
		<button dojo-data-props="label: 'Save', iconClass:'dijitEditorIcon dijitEditorIconSave', showLabel: false"
				dojoattachpoint="saveButton"
				dojoattachevent="onClick: dojo.hitch(this, 'saveHandler')">
		</button>
		<button dojo-data-props="label: 'Cancel', iconClass:'dijitEditorIcon dijitEditorIconCancel', showLabel: false"
				dojoattachpoint="cancelButton"
				dojoattachevent="onClick: dojo.hitch(this, 'cancelHandler')">
		</button>
	</span>
</div>

Et enfin voici comment je l'appelle:

Code :

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

1
2
3
<div data-dojo-type="lib.widgets.ReqContributorSelection" 
	data-dojo-props="user:{id:'10', fullName:'Titi TATA', responsibility:'applicant'}, requirement:{id:12}">
</div>

[andlio]

Bon je m'auto-réponds. J'ai fais une avancée spectaculaire : j'ai résolu les points 1 et 2, par contre je viens de créer un point 3.

Mais d'abord les réponses pour ceux que ça intéresseraient plus tard :

1. il ne faut pas mettre "this.maFunction" dans dojoattachevent, mais "maFunction". Apparemment le "this" est implicite.
2. C'est bien dans postCreate qu'il faut le faire, en résolvant le point 1 la methode postCreate a été appelée

Maintenant j'ai un nouveau problème. Ma textBox "contributorFullName" a bien été créée. Je peux donc faire le code suivant sans problème :

Code :

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

this.contributorFullName.set("value", this.user.fullName);

Par contre ce n'est pas le cas pour mes boutons. Du coup ils sont tout raplapla (cf. image ci-dessous).

[andlio]

Bon voilà ! J'ai résolu tous mes problèmes !

En fait j'avais fait une petite erreur de frappe. J'avais mis "dojo-data-type" au lieu de "data-dojo-type"

Maintenant j'ai une autre question, mais je pense que je vais faire un autre post avec un titre qui convient mieux

[emmanuel.remy]

Suite à ton post, quelques précisions:

Les attributs exacts à utiliser sont ceux-ci:

• dojoAttachPoint
• data-dojo-attach-point
• dojoAttachEvent
• data-dojo-attach-event

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

On évite de mettre un dojoAttachEvent qui appelle directement onClick. On appelle plutôt un _onClick, qui peut si besoin avoir du code dédié au widget, lequel délègue ensuite l'appel à un onClick. Si le développeur qui utilise le widget redéfinit le onClick il n'écrase pas ainsi le code initial (ou alors il lui faut faire un connect ce qui est rare).

Enfin, à partir de la v1.7 on n'attache plus un onclick mais un ondijitclick qui gère à la fois le click mais aussi ENTER et SPACE.

Bon dev,

ERE