Sample Dojo Widget

Without a sample it can take a fair amount of debug effort to work out all the moving parts to create a Dojo Widget programmatically. This posting builds on the guidance on the Dojo site based on my own experiences and frequently-asked-questions of others.

Key things to remember:

  • Careful which widgets you subclass – some of them require inside knowledge and can cause a lot of pain. Try and use dijit._Widget if you can.
  • You need a constructor to get hold of the HTML attributes of your widget from the markup and create the fields on your widget class so they get found by the template. That stumped me for a while, the attributes aren’t mixed into the widget by default.
  • Be sure to set templateString to an empty string.
  • All Dojo attachPoint does is create a variable with the name you specify pointing to the particular node in the template. Just means you don’t have to lookup by ID within the widget, you can just use the variable direct. This is described in the Dojo book but I found that it made things seem a lot more complicated than they actually are.
  • attachPoints to widgets give you the widget handle, not the DOM node.

The JavaScript

Here’s the JavaScript for the Widget. It periodically emits a publication to a topic to which things to be refreshed on the UI subscribe.

dojo.provide("com.ibm.sample.ui.RefresherWidget");

dojo.require("dijit._Widget");
dojo.require("dijit._Templated");

dojo.declare(
	"com.ibm.sample.ui.RefresherWidget",
	[dijit._Widget, dijit._Templated],
	{
		templatePath: dojo.moduleUrl("com.ibm.sample.ui","templates/RefresherWidget.html"),
		templateString: '',
		widgetsInTemplate: true,
		replaceVars: true,

		id: "",
		minimum: "2",
		maximum: "30",
		value: "10",

		timeout: null,

		constructor: function(args) {
			this.id = args.id;
			this.minimum = args.minimum;
			this.maximum = args.maximum;
			this.value = args.value;
		},

		postCreate: function() {
		   this.checkbox.slider = this.slider;
		   this.checkbox.widget = this;
		   this.checkbox.onChange = function () {
			   this.slider.setDisabled(!this.checked);
			   this.widget.notifyChange(this.checked);
		   };

		   this.link.href = 'javascript: dojo.publish("ibm/sample/widgets/refresher/'+this.id+'", []);';

		   this.inherited("postCreate", arguments);
		},

		notifyChange: function(autoFlag) {
			if (autoFlag) {
				if (this.timeout == null) {
					this.automaticRefresh();
				}
			} else {
				if (this.timeout != null) {
					window.clearTimeout(this.timeout);
					this.timeout = null;
				}
			}
		},

		automaticRefresh: function() {
			var funcString = "dojo.publish('ibm/sample/widgets/refresher/"+this.id+"', []); dijit.byId('"+this.id+"').automaticRefresh();";
			this.timeout = window.setTimeout(funcString, this.slider.getValue()*1000);
		}
	}
);

The HTML

Here is the HTML:

<div dojoAttachPoint="containerNode">
	<table border="0" cellpadding="0" cellspacing="0">
		<tr>
			<td>
				<input dojoAttachPoint="checkbox" dojotype="dijit.form.CheckBox"
        		   value="refresh"
		           type="checkbox">
		    </td>
		    <td width="5"></td>
		    <td><span class="lotusInlinelist">Automatic refresh</span></td>
		</tr>
		<tr>
			<td colspan="3" height="5px;"></td>
		</tr>
	</table>
	<div dojoAttachPoint="slider" dojoType="dijit.form.HorizontalSlider"
		minimum="${minimum}" maximum="${maximum}" value="${value}" intermediateChanges="true"
		showButtons="false"
		style="padding-top: 5px; height: 20px; width: 150px;">
	</div>
	<ul class="lotusInlinelist">
		<li class="lotusFirst"><a onClick=";" dojoAttachPoint="link" class="lotusAction" href="javascript:;">Refresh now</a></li>
	</ul>
</div>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s