Creating programmatic Widget in dojo (Web reference)

In addition to providing a multitude of Extensible widgets, dojo makes it very easy to create your own reusable controls. Standard dojo widgets, you can create these controls declaratively or programmatically. This last option, while more technical in nature, allows for a more creative control of your widgets. For example, you could insert your widget on the page in response to a user action or periodically refresh the values of content in real time using a Web service.

In this article, I rewrite the StockWidget I created declaratively in using the Dojo Build Custom HTML widgets section, Framework for the programming of the creation. The Web page will allow the client to view the stock data for multiple products using a drop-down list box. (You can download the source files for StockWidget now.)

I assume that you are familiar with the establishment of the structure of folders, import scripts Dojo and djConfig variable initialization. If not, you can review the custom development HTML widgets using dojo article.

The template file contains pre-widgetized the HTML markup for the control. It is advisable to keep the widget source into separate files because it is a large part of what makes it reusable. Every property we want to display contains a dojoAttachPoint. You must always use dojoAttachPoints reference of a widget's DOM nodes because you cannot rely on dojo.byId () once the control is transformed into a widget. Dojo.byId () may fail for several reasons. The main is that DOM converted widget structure can be very different from the original control. When it is converted by the dojo parser, the node that contains the property you want is probably not the same as the code for the template!

Here is the markup for the StockInfo.html file:

• Name


• Stock symbol


• Price


• Change

Dojo.declare method (dojo) defines your class. It is strongly based on the Java class and includes OO structures as legacy archetype, classical inheritance and private members.

Here's the Declaration for the widget code StockInfo will use starting with. We'll add to what we include additional features:

Dojo.provide ("widgets.StockInfo"); Dojo.require ("dojo.cache"); Dojo.require ("Dijit._Widget"); Dojo.require ("Dijit._Templated"); Dojo.declare ("widgets.StockInfo", [Dijit._Widget, Dijit._Templated] {templateString: dojo.cache ("templates", "StockInfo.html"), the name: "", ticker: "", price: "", change: "", postCreate: function() {/ / use the attributes defined by dojoattachpoint this.nameNode.innerHTML = this.name;}}) this.tickerNode.innerHTML this.ticker =; this.priceNode.innerHTML this.price =; with (this.changeNode) {style.color = this.change.charAt (0) == '+'?} "green": "red." innerHTML = this.change; } / / Set the image var imageMap = {'Oil': "crude_oil_179x98.png", "Essence": "gasoline_179x98.png", "Natural gas": "natural_gas_179x98.png", "Or": "gold_179x98.png"}; If (this.name) {var imageFile = imageMap [this.name]; //this can also be set with the other dojo.baseUrl properties djConfig = "."} /"; var imagePath = "images" (imageFile) dojo.moduleUrl .toString (); ({{{/ / Set the image src attribute dojo.attr (this.imageNode, "src", imagePath);}}}) ;

We still need to include a tag container for our widget on the Web page, but we must delete the attribute dojotype so that our widget is not instantiated by the dojo parser when the page is first loaded:

Array of products

The main reason to handle instantiation widget ourselves is the additional control that it gives us for autocreated Widget, such as the control instantiation command, parameter, data as parameter types initialization and formatting. The following code calls the constructor of widget immediately after loading is finished in the rest of the page and all other controls were made of widgets:

Dojo.addOnLoad (Function () {/ / replace the contents of the node with ID 'StockWidget' / / with our goldWidget var widget = new widgets.StockInfo ({name: "Gold", ticker: "GCZ10.CMX", price: "$ 1,389.50", change: "+ 4.50"}, "StockWidget");});

If make us the page in a browser, we can confirm that our widget appears throughout as it has done for declarative creation:

Figure 1: StockInfo widget

One of the best programming widget creation functions is the ability to create widgets at any time. To illustrate, let us add a button created StockWidget. Paste with the style of the programmatic creation will be keeping our more consistent code:

Dojo.addOnLoad (Function () {/ / create a button programmatically: var button = new dijit.form.Button ({label: "Create Widget", onClick: function() {/ / replace the contents of the node with ID 'nodeId' / / with our var widget = new widgets.StockInfo goldWidget ({name: "Gold", ticker: "GCZ10.CMX" price: "$ 1,389.50", change: "+ 4.50"}, "StockWidget");}}, "progButtonNode");});

To make it work, all we need to do is move the call button onClick() event StockWidget constructor. You will need to add a button control to the page as well:

Array of products

Create a widget by programming offers some distinct advantages in terms of management of the property. This is due in part to the fact that the widget Builder he returned to us as a JavaScript object so that it can be stored in a variable. We can use it to properties of the widget reference at a later date, as shown in the following code creates a second button to update the properties of the StockWidget:

top //at goldWidget scriptvar; //in dojo.addOnload () event: var updateButton = new dijit.form.Button ({label: "Updating data", onClick: function() {/ / update widget with (goldWidget) accessories {price = "$ 1,400.50"; change = "+ 15.50"; //update page priceNode.innerHTML = price; changeNode.innerHTML = change; var imagePath = dojo.moduleUrl ("images", "gold_179x98_refresh.png") .toString (); / / set the image src attribute dojo.attr (imageNode, "src", imagePath);}}}, "updateButton");

Here's the StockWidget with updated data:

Figure 2: StockInfo widget with updated data