Learn more about Dojo Data

Learn more about Dojo Data

--Translation from http://www.sitepen.com/blog/2010/10/13/dive-into-dojo-data/

Using dojo data helps you quickly create a Web application interface and easily embed a variety of data sources. It provides a layer of abstraction between the user interface and the underlying data, enabling user interface developers to focus on UI development without worrying about the uniqueness of databases, servers, or data formats.

In the next example, we will use a jsonreststore to provide data for the DataGrid. We will then replace the Jsonreststore with a xmlstore to show the convenience of decoupling the UI and data sources.

The data is represented in JSON:

Dataitems = [{"id": "AF", "name": "Africa", "type": "Continent", "Population": "900 million", "area": "30,221,532 sq km" }, {"id": "as", "name": "Asia", "type": "Continent", "Population": "1 billion", "area": "25,428,192 sq km"}, {"id": "OC", "Name": "Oceania", "type": "Continent", "population": "Million", "area": "15,928,294 sq km"}, {"id": "EU", "name": "Euro PE "," type ":" Continent "," population ":" Million "," area ":" 25,928,294 sq km "}, {" id ":" NA "," name ":" North America "," t Ype ":" Continent "," population ":" Million "," area ":" 90,928,294 sq km "}, {" id ":" SA "," name ":" South America "," type ":" Continent "," Population ":" 102 million "," area ":" 78,928,294 sq km "}, {" id ":" A "," name ":" Antarctica "," type ":" Continent "," Population ":" 998 "," area ":" 102,928,294 sq km "}];
Tip: You can verify the correctness of the JSON format to jsonlint.org. The

Jsonreststore needs to be connected to a data service. In this case, we only create a mock service. Note For the sake of simplicity, we will omit the "query" parameter and return all the data items.

var mockservice = function (query) {var d = new Dojo. Deferred (); D.fulllength = Dataitems.length; D.callback (Dataitems); return D; };

Next, we use a service function and a target URL to create the Jsonreststore. Again, for this example we will omit the "target" argument. This residual water is important for future development of real rest services, but it is not needed for the time being.
Jsonstore = new Dojox.data.JsonRestStore ({service:mockservice, target: '/some/url '}); The

Jsonreststore applies to larger datasets. For this dataset, you often do not want (or simply cannot) efficiently transfer it completely to the client. Jsonreststore can handle interactions with the server side well.

Finally, let's declare a dojox.grid.DataGrid. We'll use it to display the data.
<table jsid= "grid" store= "Jsonstore" query= "{name: ' * '}" dojotype= "Dojox.grid.DataGrid" class= "Grid" > < thead> <tr> <th field= "name" width= "Auto" >Name</th> <th field= "Population" width= "Auto" > population</th> <th field= "area" width= "Auto" >Area</th> </tr> </thead> </table>

The same jsonreststore can also provide data for a dijit.form.ComboBox:
<input dojotype= "Dijit.form.ComboBox" Jsonstore "searchattr=" name ></input>

Look, it is simple to use the same data for different UI widgets.

Next, we use a xmlstore to replace the Jsonreststore to see how easy it is to transform the data format. The data file is as follows:

<continents> <continent> <name>Africa</name> <population>900 million</population > <area>30,221,532 sq km</area> </continent> <continent> <name>Asia</name> <population>1 billion</population> <area>25,428,192 Sq km</area> </continent> < continent> <name>Oceania</name> <population>21 million</population> <area> 15,928,294 sq km</area> </continent> <continent> <name>Europe</name> <population >56 million</population> <area>25,928,294 Sq km</area> </continent> <continent> < Name>north america</name> <population>100 million</population> <area>90,928,294 Sq km< /area> </continent> <continent> <name>south america</name> <population>102 million </population> <area>78,928,294 sq km</area> </continent> <continent> <name>Antarctica</name> <population>998</population> <area>102,928,294 sq km </area> </continent> </continents>

Then, create the XML data storage:

Xmlstore = new Dojox.data.XmlStore ({url: ' continents.xml ', Label: ' Name '});

Xmlstore is a client-side data store that is used to read XML data sources. It is provided by the official dojo and is included in the Dojox subproject. Xmlstore provides a read/write interface for basic XML data (a common Data interchange format). Xmlstore can be used for generic XML documents and is therefore useful. Memory is designed so that you can customize the behavior of read/write data by overwriting some of its methods.

Finally, give it to the DataGrid.

<table jsid= "Grid" store= "Xmlstore" dojotype= "Dojox.grid.DataGrid" class= "grid" > <thead> <tr> < Th field= "name" width= "Auto" >Name</th> <th field= "Population" width= "Auto" >Population</th> < Th field= "area" width= "Auto" >Area</th> </tr> </thead> </table>

At the same time, update ComboBox:

<input dojotype= "Dijit.form.ComboBox" store= "Xmlstore" searchattr= "name" ></input>

We don't need to change any code about grid and ComboBox to keep them working. The only change you need to make is to declare a data source and set it as input to the grid. We don't have to worry about anything about  parsing, and management, and the API for data storage does all the work.

In addition, there are many other useful data storage, including Csvstore,filestore,flickrstore,jsonqueryreststore,perseverestore,servicestore, Wikipediastore, wait. If you need a complete list, see the Dojox.data directory

Dojo data is a powerful and flexible tool. Data storage makes it easy to switch front-end components and back-end implementations without needing to change a lot of code. So we can easily replace the front-end Diji parts for the same data storage, and the same data memory can be used simultaneously by multiple Dijit parts, graphs, or grid on the page.

More related resources: RESTful JSON + Dojo Data easy exploration of the dojo data Stores Web Service to Dojo.data Store in 4 easy Steps