Login Register

Creating a Widget Without a Skeleton

Widgets can also be declared programatically. This is good for heavily dynamic pages, where you don't know what widgets you want at the time the the page is downloaded.

createWidget()

For example, say that you want to create an editor when the user presses a button.

You would first create the widget:

	var editor = dojo.widget.createWidget("Editor2", { });

And then you would insert the widget's dom node into the document:

	document.body.appendChild(editor.domNode);

Now let's say that you had a widget that takes parameters. The button widget has a label parameter, and a disabled parameter too. So we could do:

	var btn = dojo.widget.createWidget("Button", 

{ label: "Press me", disabled: false });

How about a widget that takes inner HTML? A dialog widget will likely have some text inside of it. That's the third argument to createWidget():

	var srcNode = document.createElement("div");

srcNode.innerHTML="This is my content";

var btn = dojo.widget.createWidget("Dialog", {}, srcNode);

addChild()

Some widgets work in a hierarchical fashion. For example, a Menu is composed of MenuItems

That's where addChild() (and removeChild()) come in. They let you mark one widget as the child of another.

	var menu = dojo.widget.createWidget("PopupMenu2", {targetNodeIds: ["test1", "test2", "testwithindiv"]});

menu.addChild(dojo.widget.createWidget("MenuItem2", {caption: "MENU 1"}));

menu.addChild(dojo.widget.createWidget("MenuItem2", {caption: "MENU1-Item 1"}));

menu.addChild(dojo.widget.createWidget("MenuItem2", {caption: "MENU1-Item 2"}));