Dojo1.6 new feature: HTML 5 ongoing (1)

In recent years, HTML5 has attracted more and more attention. Although this specification is still in full swing, I believe that many HTML5 concepts are familiar to everyone. For example, canvas with powerful plotting functions and video (vedio) audio (audio) that is expected to replace Flash players) tags, enhanced form elements, Web Storage designed to provide big data Storage, unified tag custom attribute design, and built-in drag and drop functions. These new features will undoubtedly provide users with a cooler user experience and a broader platform for Web developers.

As one of the oldest JavaScript libraries, Dojo has never stopped its application of various new technologies and its integration with new standards in recent years. Maybe you have been using dojo for a long time, but have you ever noticed HTML5 applications in dojo? This article will introduce some HTML5 features used in Dojo!

◆ Supports dojo. parser for HTML5 Custom Attributes

◆ Dojox. gfx and dojox. charting of HTML Canvas are supported.

◆ Supports the HTML5 indexed Database Object Store API's dojo. store API

◆ Dojox. storage. LocalStorageProvider Based on HTML5 localstorage

◆ Dojox. form. Uploader that supports HTML5 multiple file input

◆ Supports dojo. parser for HTML5 Custom Attributes

How can I set a custom attribute for a node on the page to determine whether the node can be dragged or dropped? In the face of this problem, we may add a "draggable" attribute to the node without thinking about it. However, we often ignore this point: Will this "draggable" attribute conflict with other attributes? Our experience tells us no. Indeed, before HTML5, we often use this method to implement the drag and drop function. Unfortunately, in HTML5, "draggbale" is already one of the standard attributes, which means that modifying the "draggable" attribute will modify the browser behavior of the node, this is not necessarily what you want.

In fact, in versions earlier than dojo1.5, we have been using such risky custom attributes. Let's look at how we declare a commonly used dojo Button control dijit. form. Button using tags:

 
 

  
  
<button id="button1" dojoType="dijit.form.Button">Button1</button> 
 
 

Although dojoType is not too likely to be one of the standard HTML attributes, it is undeniable that it is not an elegant implementation method.

HTML5 already has a specification for custom attributes. All custom attributes must be prefixed with data. In this way, you can easily distinguish HTML standard attributes from custom attributes, which not only provides code readability but also avoids the risk of conflicting with standard attributes.

In dojo1.6, the HTML5 specification is also improved accordingly. You can find a series of standard-compliant custom attributes in dojo1.6, which can be correctly identified by dojo. parser:

◆ Data-dojo-config: replaces the original dojoConfig to configure parameters of the dojo library.

◆ Data-dojo-type: replaces the original dojoType attribute to specify the type of the dojo object used

◆ Data-dojo-props: replaces the Custom Attributes of all the previously initialized dojo controls.

The usage of data-dojo-config and data-dojo-type is no different from that of the original dojoConfig and dojoType. Data-dojo-props greatly beautifies the property configuration code when the control is initialized.

When using non-HTML5 standard attributes, to declare a simple CheckBox, we may need to set five attribute values for the node separately:

 
 

  
  
<input name="cb1" id="cb1" value="foo"   
  
  
    dojoType="dijit.form.CheckBox"   
  
  
    onClick="console.log('clicked cb1')"> 
 
 

After using the HTML5 standard attribute data-dojo-props, we only need to set three attributes:

 
 

  
  
<input id="cb1" data-dojo-id="cb1" data-dojo-type="dijit.form.CheckBox"   
  
  
    data-dojo-props='name:"cb1", value:"foo",   
  
  
    onClick:function(){ console.log("clicked cb1") }'/>  
 
 

It is worth noting that such a declaration method is very similar to creating a CheckBox dynamically using JavaScript:

 
 

  
  
new dijit.form.CheckBox({  
  
  
id: "cb1",  
  
  
name: "cb1",  
  
  
value: "foo",  
  
  
onclick: function(){console.log("clicked cb1")},  
  
  
}, "cb1"); 
 
 

This is because dojo. parser uses the content in data-dojo-props as a hash parameter table to initialize the control. This maximizes the consistency between the tag and code initialization code.

It can be seen that HTML5 custom attributes are fully utilized in dojo, bringing good results. However, in dojo1.6, such custom attributes cannot be used on the controls in the dojox. mobile package. However, in future versions, the controls in the dojox. mobile package will also support this practical feature.

Supports dojox. gfx and dojox. charting of HTML Canvas.

Among the many HTML5 features, Canvas may be one of the most impressive ones. Many Canvas-based applications fully demonstrate its powerful drawing functions. The basic drawing process is as follows:

 
 

  
  
// Obtain the canvas Element
  
  
Var canvasElement = document. getElementById ("canvas ");
  
  
// The default browser supports Canvas and obtains the 2D context corresponding to the canvas element.
  
  
Var canvasContext = canvasElement. getContext ("2d ");
  
  
If (canvasContext ){
  
  
CanvasContext. fillStyle = "# 1433FF"; // set the fill color of the drawing.
  
  
CanvasContext. strokeStyle = "# FF1500"; // set the line color of the drawing.
  
  
CanvasContext. lineWidth = 1; // set the line width of the drawing.
  
  
CanvasContext. fillRect (10, 10,110,110); // draw a solid rectangle
  
  
CanvasContext. strokeRect (10,230,110,110); // draw a hollow rectangle
  
  
}
 
 

In addition, canvasContext provides a complete set of APIS for drawing line, text, shadows, and images. These contents are far beyond the scope of this article, so we will not repeat them one by one.

For such a powerful Canvas, dojo has already integrated it into its own graphics module. Because the dojox. gfx. canvas module under the dojox. gfx package encapsulates the drawing interface of the HTML5 Canvas API, there is no difference between the canvas drawing interface VML and SilverLight drawing of dojox. gfx. You don't need any Canvas API experience. You just need to set the graphic rendering mode to canvas in the configuration options of dojo:

 
 

  
  
<script type="text/javascript" data-dojo-config="gfxRenderer:'canvas'"  src="dojo.js"></script> 
 
 

With the help of dojox. gfx, all charts under dojox. charting also support the canvas mode for interfaces that have been used in various drawing modes. You only need to set the rendering mode to canvas, and you get a set of chart libraries completely based on the HTML5 Canvas API.

In addition, you can configure alternate options for gfxRenderer to enable dojox. gfx to automatically use other Renderer in environments that do not support HTML5. If the following code is used, HTML5 Canvas is used for graphic rendering first. If the browser does not support canvas, svg and vml are used for rendering in sequence.

 
 

  
  
<script type="text/javascript" data-dojo-config="gfxRenderer:'canvas,svg,vml'"    
  
  
    src="dojo.js"></script> 
 
 

Supports the HTML5 indexed Database Object Store API's dojo. store API

In HTML5, a data storage API based on key-value pairs is proposed. Users can query, update, add, and delete stored data in simple and transparent ways:

◆ Get (index): obtain data based on the index value.

◆ Put (value,/* optional */index): updates data records.

◆ Add (value,/* optional */index): add data records. If the index pointing to a location already exists, the addition fails.

◆ Remove (index): removes data records based on the index value.

The dojo. store in dojo 1.6 implements this interface well, which simplifies the data storage API provided by the original dojo. data Package. The dojo. store package has three types of implemented stores:

◆ Memory: simple and lightweight store, suitable for processing small datasets.

◆ JsonRest: A store dedicated to the rest api service, suitable for processing large datasets.

◆ DataStore: used to provide the object store api store for the store under the original dojo. data Package

Although the three store initialization methods and use cases are different, the get, put, and remove methods that comply with the HTML5 standard are provided (besides DataStore, The add method is also provided ). You can perform convenient operations on these stores through the following process:

 
 

  
  
// Obtain records with an index of some-id.
  
  
Var record = store. get ("some-id ");
  
  
// Modify the bar field of the retrieved record
  
  
Record. bar = newValue;
  
  
// Update the record
  
  
Store. put (record );
  
  
// Create a new record
  
  
Var newRecord = {id: "some-new-id ",
  
  
Bar: "bar ",
  
  
Foo: "foo"
  
  
};
  
  
Store. add (newRecord );
 
 

We can see that using the object store API implemented by the dojo. store package for data management is just as convenient as managing common JavaScript objects. Then we will see that this set of APIS is perfectly applied to the implementation of HTML5 localstorage-dojox. storage. LocalStoragePovider.