La syntaxe programmatique est légèrement plus complexe que la syntaxe déclarative mais apporte une grande souplesse et un grand contrôle de ce qui est fait.

Principe

Comme dans tout langage objet, il faut commencer par créer une nouvelle instance d'un widget. On lui attribue ses propriétés puis on le place à l'endroit désiré du DOM.

Utilisation

La création d'un widget se fait via la commande "new" :

1

var btn  = new dijit.form.Button();

1

dojo.require("dijit.form.Button");

• (facultatif) Les propriétés du widget (sous forme d'objet)
• (facultatif) Le noeud DOM qui va être remplacé par le widget.

Les propriétés sont sous la forme d'objet :

1
2
3
4

var props= {
    label:" mon test",
    id:"btnTest"
}

Ainsi pour créer un bouton qui aura le label "test" et qui sera placé dans le div "divtest" :

1
2
3
4
5

var props= {
    label:"mon test",
    id:"btnTest"
}
var btn  = new dijit.form.Button(props, dojo.byId("divtest"));

la méthode startup

Un grande majorité des widgets terminent leur initialisation par une méthode startup(). Cette méthode est appelée de manière invisible lorsque vous utilisez la syntaxe déclarative. En revanche en syntaxe programmatique, il faut le faire manuellement :

1
2
3
4
5
6

var props= {
    label:"mon test",
    id:"btnTest"
}
var btn  = new dijit.form.Button(props, dojo.byId("divtest"));
btn.startup();

• Dans le cas ou votre widget est ajouté à un widget de type layout (exemple : BorderContainer, StackContainer, etc...) en utilisant leur méthode addChild(). Celle-ci se charge d'exécuter le startup().
• De même lorsque votre widget est ajouté à un contentPane via la méthode setContent(). Celle-ci se chargera aussi d'effectuer le startup() (Mais attention, uniquement si djConfig contient l'instruction "parseOnLoad:true" !)

D'une syntaxe à l'autre

Pour passer de la syntaxe déclarative à la syntaxe programmatique, il suffit donc de retranscrire les attributs en objet javascript et de bien penser au startup().
Exemple :

1

<div jsId="_button" dojoType="dijit.form.Button" label="mon test"></div>

1

<div id="btntest"></div>

1
2
3
4
5

var props= {
    label:" mon test"
}
var btn  = new dijit.form.Button(props, dojo.byId("btntest"));
btn.startup();