Programmatic Widget Creation in Dojo | 4

[prev]

Using programmatic widget creation, we are no longer limited to working with strings as we are with declarative declaration. This comes in handy for a variety of data types, including numbers, currency, and dates, which should be stored sans formatting. As the following code demonstrates, setting the price to a number is simply a matter of initializing the property to a number in the widget declaration and calling the constructor with the same data type:

Displaying Formatted Properties

Storing raw data in the properties makes them far easier to deal with in code by removing all formatting from the equation until it is time to display them to the user. At that point, we can use a Dojo locale-aware function to do the work for us, such as dojo.currency.format(). There are similar functions for numbers and dates as well.

The dojo.currency.format() function includes the functionality of dojo.number to use the appropriate syntax, following conventions associated with a particular currency and locale, such as the number of decimal places typically used, rounding, and the currency symbol. It accepts a number parameter and an object specifying the currency according to its three-letter ISO-4217 symbol. A symbol of "USD" for "US Dollar" will prepend a $ symbol when used in the United States, but that would be ambiguous in Canada, so US$ is used there instead.

Dojo also allows you to override the node property getters and setters by including a function named _get\set<Property name>Attr. It is important to distinguish the node property versus the internal widget object property; the Attr refers to the HTML markup and does not update the object's stored value of the property.

Although there is no property for setting the image src directly, we can still implement a setter for internal use. Widgets all share a property called statics, which is for properties that you want available to all instances. It is an ideal place to store the imageMap:

statics: {
              imageMap: {
                    'Crude Oil'   : "crude_oil_179x98.png",
                    'Gasoline'    : "gasoline_179x98.png",
                    'Natural Gas' : "natural_gas_179x98.png",
                    'Gold'        : "gold_179x98.png"
              }
            },
name   : "",
ticker : "",
price  : 1326.8,
_setPriceAttr: function(p){
  this.priceNode.innerHTML = dojo.currency.format(p, {currency: "USD"});
},
change : "",
_setChangeAttr: function(ch){
  with (this.changeNode) {
    innerHTML = ch;
    style.color = this.change.charAt(0) == '+' ? 'green' : 'red';
  }
},
_setImageSrcAttr: function(stockName) {
    var imageFile = this.statics.imageMap[stockName];
    var imagePath = dojo.moduleUrl("images", imageFile).toString();
    // Set the image 'src' attribute
    dojo.attr(this.imageNode, "src", imagePath);
},
postCreate : function() {
    // Using the attributes defined via dojoattachpoint
    this.nameNode.innerHTML   = this.name;
    this.tickerNode.innerHTML = this.ticker;
    this.set('price', this.price);
    this.set('change', this.change);
    // Set the image
    this.set("ImageSrc", this.name);

Positioning the Widget Using Widget.placeAt()

Dijit includes an extremely useful function for placing widgets on the page called placeAt(). It's an instance function that provides a shorthand mechanism to put an existing or newly created widget somewhere in the DOM, and allow chaining. Here's more information on its syntax and parameters:

placeAt: function( String|DomNode|_Widget reference, String?|Int? position)

reference: The String id of a domNode, a domNode reference, or a reference to a Widget possessing an addChild() method
position: If a string or domNode reference was passed, the position argument accepts a string of "first", "last", "before", or "after".

If passed a _Widget reference and that widget reference has an addChild() method, it will be called passing this widget instance into that method, supplying the optional position index passed.

Removing the id parameter from the constructor call and placing the widget on the page using the Widget.placeAt() method causes the new widget to be appended after the last widget in the container. Hence, the following code:

...produces the following on successive button clicks:

Figure 3: Appended StockInfo Widget

Creating Multiple Widget Instances

The previous example created copies of the original widget, keeping a reference to the latest one. Here's some code that creates different widgets using a dropdown list:

The only modifications required to our class is the inclusion of a variable to hold references to the widgets and a switch statement in the listbox's onChange() event handler that sets the widget's properties based on the list selection. There is also code to prevent the same widget from being displayed twice. Here are the results in the browser:

Figure 4: Multiple StockInfo Widgets

Source Code Download

Here are the source files for the project.

Conclusion

In this article, you saw how programmatic widget declaration allows for more creative control over your widgets than the declarative style. It really is quite amazing how much you can accomplish with relatively little code. Next time, I'll be sharing a new version of my Universally Related Popup Menus (chained Select lists) from a few years back, using Dojo widgets. You won't believe how much simpler the code is now!

Have an 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 GravelleConsulting.com. 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 16, 2010