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 = this.name;). 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.
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).
Conclusion
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 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 3, 2010
Find a programming school near you
