Using the Dojo Framework to Build Custom HTML Widgets | 4 | WebReference

Using the Dojo Framework to Build Custom HTML Widgets | 4


Setting Properties via DojoAttachPoints

Setting the templateString will display the contents of the StockInfo.html file on the page, but it won't fill in the property values. To do that, we need to include a dojoAttachPoint for each property that we wish to display. DojoAttachPoints are used to refer to a widget's DOM nodes directly. You might think you could just reference the IDs in the HTML template using dojo.byId(), but there are a couple of good reasons why this can fail. One reason is that if two or more widget instances are created, they'll all have the same IDs. Another is that the DOM structure of the converted widget can be vastly different from the original control's. When converted by the Dojo parser, the node that contains the property you want is likely not the same one as the template code would suggest!

The value that you assign to the dojoAttachPoint attribute is the name that will be used in code to reference it. Here is the StockInfo.html template markup again, including dojoAttachPoints for each property.

A good time to display properties is in the postCreate() event, which fires immediately after the widget has been written to the browser. The properties have also been initialized during construction of the widget by the Dojo parser. The values of HTML attributes that match the property names are assigned to the property and overwrite the defaults. Simple text values can be written using this.[dojoAttachPoint name].innerHTML = this.[property name] (e.g. this.nameNode.innerHTML =;). I included some additional logic to set the change property to either green or red, according to whether the direction is positive or negative. The changeNode's color is accessible via the style.color property.

Setting the image is a more complex process because it is linked to the name of the commodity being displayed. An imageMap stores the image file names for each type. The dojo.moduleUrl() method is used to retrieve a Dojo._Url object relative to a module defined within the modulePaths object. To fetch the URL string from the Dojo._Url object, we need to apply toString() on it. The dojo.attr() setter method is then used to set the <img> tag's src attribute to the full imagePath:

Displaying the Widget in the Page

Since we are using declarative widget creation we need to include a tag for our widget in the containing page. The dojotype should include the full name (package + name) of our widget, which is widgets.StockInfo. We can assign values to our four properties by including attributes that match their JavaScript names. Note that using the declarative style, we are limited to the string data type. However, we can convert them later in code:

If we bring up the stockWidget.html page in a browser, we can confirm that our widget displays as it should and produces no errors:

Figure 2: StockInfo Widget Without Formatting

The last step is to pretty up the appearance of our widget using CSS. If you look closely at the HTML in the template file, you'll notice that the DOM nodes have class names assigned to them. We can refer to them in the CSS to position and style each component how we want. Here's some code to do that:

What a difference a little formatting makes!

Figure 3: StockInfo Widget with Formatting

Here are the project source files (minus the Dojo libraries).


Dojo makes it quite easy to create your own reusable widgets. In fact, what we saw here is only a sampling of what you can do. Using programmatic widget creation, we could insert our widget into the page at any time. We could also periodically refresh the values with real-time content using a Web service. The trouble there is that Ajax calls are limited to the server, which served the Web page. For that reason, you couldn't fetch the data directly from a Yahoo Finance service. You'd have to retrieve the data from the server and pass it along to the browser. Needless to say, that functionality is beyond the scope of this article. We'll get to that another time, after we've tackled programmatic widget creation.

Have a suggestion for an article topic? Do you have a product or service that you'd like reviewed? Email it to Rob .

resides in Ottawa, Canada, and is the founder of Rob has built systems for Intelligence-related organizations such as Canada Border Services, CSIS as well as for numerous commercial businesses. Rob to receive a free estimate on your software project. Should you hire Rob and his firm, you'll receive 15% off for mentioning that you heard about it here!

In his spare time, Rob has become an accomplished guitar player, and has released several CDs. His former band, Ivory Knight, was rated as one Canada's top hard rock and metal groups by Brave Words magazine (issue #92).

Rob uses and recommends MochaHost, which provides Web Hosting at $3.10 per month, 2 LifeTime Free Domains, and 6 Months Free!

Original: December 3, 2010