Setting Properties via
templateString will display the contents of the
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
template markup again, including
dojoAttachPoints for each property.
A good time to display properties is in the
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]
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
Setting the image is a more complex process because it is linked to the name of the commodity being displayed. An
imageMapstores the image file names for each type. The
dojo.moduleUrl()method is used to retrieve a
Dojo._Urlobject relative to a module defined within the
modulePathsobject. To fetch the URL string from the
Dojo._Urlobject, we need to apply
toString()on it. The
dojo.attr()setter method is then used to set the
srcattribute to the full
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
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:
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!
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 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