Writing a Custom Widget Using Dojo 0.3.1

by Alistair Miles

I’ve just written a custom widget using Dojo 0.3.1, it’s called “MoreOrLessText”. It’s not the most amazing thing in the world but it illustrates the general process of writing a custom widget, which might be useful given that the current documentation for Dojo can be a little confusing. Here’s what I did …

File Structure

I created the following file structure (assumed relative to the root of my project) …


index.html
dojo-0.3.1/dojo.js
dojo-0.3.1/src
dojo-0.3.1/src/animation
dojo-0.3.1/src/... etc.
aliman/widget/MoreOrLessText.css
aliman/widget/MoreOrLessText.html
aliman/widget/MoreOrLessText.js

The file index.html is the web page that uses the widget. Everything inside the dojo-0.3.1 directory is copied from the 0.3.1 release of dojo. The file MoreOrLessText.js defines my custom widget. The files MoreOrLessText.html and MoreOrLessText.css define the template for my custom widget.

Using the Widget

The contents of the file index.html are reproduced below …





  

    Dojo Test

    
      var djConfig = {isDebug: true, debugAtAllCosts: false};
    
    
    
      dojo.setModulePrefix("aliman", "../aliman");
      dojo.require("aliman.widget.MoreOrLessText");
    

  
  

    

Defining the Widget

The contents of the MoreOrLessText.js file are reproduced below …


dojo.provide("aliman.widget.MoreOrLessText");

dojo.require("dojo.event.*");
dojo.require("dojo.widget.*");
dojo.require("dojo.lfx.*");

dojo.widget.defineWidget(

	// widget name and class
	"aliman.widget.MoreOrLessText",

	// superclass
	dojo.widget.HtmlWidget,

	// properties and methods
	{
		// widget type
		widgetType: "MoreOrLessText",

		// settings
		isContainer: true,
		templatePath: dojo.uri.dojoUri("../aliman/widget/MoreOrLessText.html"),
		templateCssPath: dojo.uri.dojoUri("../aliman/widget/MoreOrLessText.css"),

		// parameters
		lessText: "",
		moreText: "",
		less: true,

		// DOM nodes
		mainNode: null,
		lessNode: null,
		dotsNode: null,
		moreNode: null,
		toggleMoreNode: null,
		toggleLessNode: null,

		// event handling
		toggleMoreOrLessText: function() {
			if (this.less) {
				dojo.html.removeClass(this.mainNode, "less");
				dojo.html.addClass(this.mainNode,"more");
				this.less=false;
			}
			else {
				dojo.html.removeClass(this.mainNode, "more");
				dojo.html.addClass(this.mainNode,"less");
				this.less=true;
			}
		}
	}

);

Defining the Template

The contents of the file MoreOrLessText.html are below …


${this.lessText} ... ${this.moreText} more less

The contents of the file MoreOrLessText.html are below …


.moreOrLessTextContainer {
	display: block;
}

.lessTextContainer {
	display: inline;
}

.less .dotsContainer {
	display: inline;
}

.more .dotsContainer {
	display: none;
}

.less .moreTextContainer {
	display: none;
}

.more .moreTextContainer {
	display: inline;
}

.less .toggleMoreControl {
	display: inline;
}

.more .toggleMoreControl {
	display: none;
}

.less .toggleLessControl {
	display: none;
}

.more .toggleLessControl {
	display: inline;
}

Notes

You can see it in action here … it’s incredibly simple – if you click on the “more” arrow you see the full text, if you click on the “less” arrow you see only the initial portion of the text.

[N.B. You might want to browse the CVS repository for the latest version of files shown here.]

Advertisements