Dojo1.6 new feature: HTML5 ongoing

DojoAs one of the oldest JavaScript libraries, it has never stopped its application of various new technologies and its integration with new standards in recent years. You may have been using dojo for a long time, but have noticedHTML5?

HTML5 features used in Dojo:

1) supports dojo. parser for HTML5 Custom Attributes

2) support for dojox. gfx and dojox. charting of HTML Canvas

3) supports the HTML5 indexed Database Object Store API's dojo. store API

4) dojox. storage. LocalStorageProvider Based on HTML5 localstorage

5) 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:

1) data-dojo-config: replaces the original dojoConfig to configure parameters of the dojo library.

2) ata-dojo-type: replaces the original dojoType attribute to specify the type of the dojo object used

3) ata-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 the standard attribute data-dojo-props, we only need to set three attributes:

 
 

  
  
<input id="cb1" data-dojo-id="cb1" data-dojotype="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:

1) get (index): get data based on the index value.

2) put (value,/* optional */index): updates data records.

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

4) 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:

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

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

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

Although the initialization methods and application scenarios of these three stores are different, the get, put, and remove methods that comply with the HTML5 standard are also provided in addition to DataStore ). 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.

Dojox. storage. LocalStorageProvider Based on HTML5 localstorage

In terms of data Storage, HTML5 not only provides convenient indexed Database Object Store APIs, but also provides very useful Local Storage. Local Storage is also called Web Storage and Dom Storage. Simply put, it is essentially the Web page information stored by key-value pairs. Like cookies we used in the past, we can save page-related information, even if the user leaves the current page or even closes the browser directly. Compared with cookies, Local Storage can store more information. cookies can only store up to 4 kb of data. At the same time, data in Local Storage will not be transmitted to the server-side cookies and will be sent along with http requests ).

LocalStorage is easy to use. You can obtain a value from LocalStorage through

 
 

  
  
var value = localstorage.getItem("bar"); 
 
 

Or easier

 
 

  
  
localstorage["bar"]; 
 
 

Method. You can write a value to localstorage through

 
 

  
  
localstorage.setItem("bar", "newValue"); 
 
 

Or easier

 
 

  
  
localstorage["bar"] = "newValue"; 
 
 

.

The dojox. storage Package of dojo provides common data storage tools: CookieStorageProvider for cookies, GearsStorageProvider for Google gears, AirDBStorageProvider for Adobe Air, AireFileStorageProvider, AireEncryptedLocalStorageProvider, and so on.

Specifically, dojo provides LocalStorageProvider for the HTML5 local storage feature. LocalStorageProvider is fully compatible with simple Object Store APIs. its interfaces and main functions are as follows:

Put: function (/* string */key,/* object */value,/* function */resultsHandler,/* string? */Namespace)

Used to save a pair of key values. The first parameter is the index of the data to be saved. The second parameter is the data to be saved. The third parameter may fail to be saved in the callback function that processes the data save result ). The last parameter is an optional namespace name. To better manage the storage content, dojo provides the namespace parameter. In essence, it forms the namespace and index into a new index value named "_ namespace_key, the default namespace is "default ".

Get: function (/* string */key,/* string? */Namespace)

Used to obtain the data pointed to by the index under the specified namespace.

The first parameter is the index of the data to be retrieved. The second parameter is an optional namespace name. The default value is "default ".

Remove: function (/* string */key,/* string? */Namespace)

Used to delete the data pointed to by the index under the specified namespace

The first parameter is the index of the data to be retrieved. The second parameter is an optional namespace name. The default value is "default ".

Clear: function (/* string? */Namespace)

Used to clear all data in a specified namespace. The parameter is an optional namespace name. The default value is "default ".

These APIs are not only consistent with other providers in the dojox. storage package, but also compatible with the store object interface provided in the dojo. store package. Therefore, the dojox. storage. LocalStorageProvider and dojo. store packages provide complete support for the HTML5 storage system.

Dojox. form. Uploader that supports HTML5 multiple file input

Various labels are enhanced in HTML5, and there are also some improvements to various HTML controls. The input tag obtains a new attribute named multiple. In the past, the input tag in HTML can only select a single file. With the multiple attribute, you can use the input tag to select multiple files at a time. If there is an input control:

 
 

  
  
<input multiple="multiple" id="uploadfile" type="file" name="uploaddfile"></div> 
 
 

You can click the Browse button to select multiple desired files in the file selection window. You can use the following code to obtain the selected file information:

 
 

  
  
var files = document.getElementById("uploadfile").files; 
 
 

The file selection function of the input tag is often applied to file upload. Dojox. form. uploader in dojo 1.6 makes good use of the new HTML5 feature to implement HTML5-Based Multi-file upload.

First, dojox. form. Uploader checks whether the current browser supports the HTML5 enhanced input tag. If so, dojox. form. Uploader uses the input tag with the multiple attribute.

Dojx. form. Uploader provides the following APIs for HTML5 multi-file upload:

GetFileList: function ()

Used to obtain information about the selected file. In essence, files under the corresponding input tag are obtained for sorting and each file is indexed.

Upload: function (/* Object? */FormData)

Used to upload a specified data file), dojox. form. uploader. plugins. HTML5 implements the HTML5 version of this method, which can be Flash or Iframe, which are implemented by the other two plug-ins respectively ). This method checks whether the current browser supports both FormDataFirefox 4 and Webkit kernels.) If yes, upload is in binary format.

Submit: function (/* form Node? */Form)

When dojox. form. Uploader is in a form, it uploads other information in the file and form at the same time.

Reset: function ()

It is used to clear all selected files. It does not support clearing a single specified file.

With dojox. form. Uploader, you can easily create an HTML5-Based Multi-File Upload control and use its API to control it. Of course, dojo also provides other solutions for browsers that do not support the new HTML5 feature. You can find that in the dojox. form. uploader. plugins package, in addition to HTML5, there are two plug-ins: IFrame and Flash. If the browser does not support the HTML5 multi-file selection function, dojox. form. Uploader automatically tries to use these two plug-ins to upload multiple files. You don't have to spend any effort on cross-platform code.

Summary

Now we can find that in Dojo, HTML5 has already been applied in various aspects, from data storage to graphic rendering, from code style to specific controls. We believe that in future versions, Dojo will continue to integrate various new technologies and be compatible with various new standards to provide a better user experience!