Mastering the Dojo Toolkit, part 6th: Advanced Application of Dojo Widgets

The Dojo widget is an extremely important part of dojo, so you should also strengthen your mastery of the Dojo widget after you have a thorough understanding of it.

Two ways to create Dijit

Dojo provides two ways for system developers to use the Dijit they provide (Dijit is the abbreviation for the Dojo Widget). The first approach is to implement the Dijit using a label that is statically written directly in the page with the Dijit attribute, and the second method is to dynamically generate Dijit in the current page using Javascript statements.

The first method is called static creation Dijit, while the second method is called dynamic creation Dijit.

Static Create Dijit

Static creation of Dijit is the way to introduce Dijit into the page through HTML tag attributes. Therefore, the method of static creation of Dijit is simple and convenient, and there is no cognitive difficulty for novice users. When the page needs to use Dijit, the static creation Diijt often becomes its first choice.

The static creation Dijit is divided into three steps to complete.

The first step is to determine the name of the object to use Dijit. For example, if you want to use the Dijit button, its object name is all called Dijit.form.Button.

The second step is to introduce the Dijit module that will be used between the "

Listing 1. Static Create Dijit sample

<script　type="text/javascript">
　dojo.require("dojo.parser");
　dojo.require("dijit.form.Button");
　</script>

Dojo.require ("Dijit.form.Button") represents the introduction of a Dijit button module in a page. Dojo.require ("Dojo.parser") represents a feature module that introduces parsing Dijit tag properties in a page.

The Dijit label attribute used by the static creation Dijit is not standard HTML and cannot be parsed directly by the browser. It is therefore necessary to dojo.parser all Dijit tag properties of the entire page after the page is loaded, and convert them to tags that the browser can recognize.

In the third step, you need to use the Dijit location in the page to write the Dijit tag properties. For example, if you use the Dijit button, the <div dojotype= "Dijit.form.Button" >OK</div>.

Dynamically Create Dijit

The static creation Dijit is simple to use, but the flexibility is poor, cannot satisfy the changeable request in the actual situation. Therefore, in most cases, it is more necessary to create Dijit dynamically.

For example, you need to dynamically create a certain number of Dijit depending on the user's choice, or create a Dijit dynamically after the page is generated based on the results of the background operation.

Dynamic Create Dijit is also divided into three steps to complete.

The first step is to identify the name of the object that dynamically creates the Dijit.

The second step is to introduce the Dijit module that will be used. For example, if you want to use the Dijit button, you need to introduce the Dijit button module in the Head section of the page.

Listing 2. Dynamic Create Dijit Example 1

<script　type="text/javascript">
　dojo.require("dijit.form.Button");
　</script>

It is to be noted that Dojo.require ("Dojo.parser") is not introduced in Listing 2. The conversion to HTML is done automatically during the dynamic creation of the Dijit.