Calling Methods

Previously I talked about the widget object, that you can get access to like this:

var myButton = dojo.widget.byId("foo");

If you create a widget programatically you automatically get a pointer to the widget object:

var myButton = dojo.widget.CreateWidget("Button", {caption: "click me"});

What is myButton useful for? Calling methods on the button. For example:

myButton.setCaption("Don't press me!!");

Note that doing the following won't work, because the myButton object doesn't know that the caption variable has been changed:

myButton.caption="this won't do anything";

Also note that to disable/enable a widget, call disable()/enable(), rather than setting the disabled attribute directly. People often make that mistake.

Read only Variables

There are some read-only variables, however, that are useful to access. Two of the most important ones are:

• domNode - points to the node that replaced your original markup (the [button] tag in the example above)
• containerNode - points to the node that contains the contents of the original markup ("Click me" in the example above)

That reminds me. In the above example of programmatic creation, you also need a line like this:

form1.appendChild(myButton.domNode);

Events

Consider the markup below:

<button dojoType="Button" onClick="alert('hello world')">

It looks familiar, but it's actually quite different than the normal onclick handler on the dom node.

onClick() is a method in the Button widget object. It's got a similar name to DOM node's onclick (but not identical; there's a capitalization difference). However, it's not the same. As another example, consider

<input type="Slider"

	onValueChanged="alert('new value is ' + arguments[0]);">...

In this case, we are using a function of the widget called onValueChanged(newValue), that has no direct equivalent in the dom world.

Attaching vs. Overriding

in the case above, the specified code will be run in addition to the widget's original onValueChanged() method. It works the same way as dojo.event.connect(). On the other hand, if you just specify a function name like this:

<input type="Slider"

	onValueChanged="doit">...

Then you are overriding the widget's onValueChanged() funtion w/your own.

Usually, the widget will provide an empty function stub, so it won't matter if you connect to it or override it.

Using dojo.event.connect directly

You can also do something like this, although it seems more difficult than the method above:

dojo.event.connect(myButton, onValueChanged, function(x){

	alert("new val is " + x);

});

Show and Hide

Widgets all can be hidden (made invisible) and shown:

• myButton.show() - display
• myButton.hide() - make invisible
• myButton.toggleShowing() - switches between show() and hide()
• isShowing() - is widget currently displayed?

For show and hide, there are 4 transitions available, that you set at widget creation time:

• plain
• fade
• wipe
• explode

They are set like this:

<div dojoType="FloatingPane" toggle="fade" toggleDuration="250">

The explosion effect (often used for tooltips) also requires a point/square from which the element explodes out of, or implodes back into. This is set automatically when using the Toggler or TaskBar widgets.