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.
dojo.currency.format() function includes the
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
to the HTML markup and does not update the object's stored value of the
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
which is for properties that you want available to all instances. It is an ideal
place to store the
Positioning the Widget Using Widget.placeAt()
Dijit includes an extremely useful function for placing widgets on the page
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
domNodereference, or a reference to a Widget possessing an
- position: If a string or
domNodereference was passed, the
positionargument accepts a string of "first", "last", "before", or "after".
If passed a
_Widget reference and that widget reference has an
method, it will be called passing this widget instance into that method, supplying
the optional position index passed.
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:
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
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:
Source Code Download
Here are the source files for the project.
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