Dive into Dojo Data

Dojo Data makes it possible to quickly create web application interfaces and then easily plug-in any data source. It provides an abstraction layer between the user interface and the underlying data source. This allows the user interface developer to focus on the UI without having to worry about database drivers, service endpoints, and unique data formats.

In this example, we will populate a dojox.grid.DataGrid with a JsonRestStore. Then, we’ll replace the JsonRestStore with an XmlStore to show the flexibility of decoupling the UI and your data source.

The data is represented in this JSON-like format:

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":"21 million", "area": "15,928,294 sq km" },
    { "id": "EU", "name":"Europe", "type":"continent", 
      "population":"56 million", "area": "25,928,294 sq km" },
    { "id": "NA", "name":"North America", "type":"continent", 
      "population":"100 million", "area": "90,928,294 sq km" },
    { "id": "SA", "name":"South America", "type":"continent", 
      "population":"102 million", "area": "78,928,294 sq km" },
    { "id": "AN", "name":"Antarctica", "type":"continent", 
      "population":"998", "area": "102,928,294 sq km" }
];

Tip: You may validate your JSON at jsonlint.org.

JsonRestStore interfaces with a data service. For this example we’ll create a mock service. Notice “query” is a parameter but for simplicity, we are ignoring it and just returning all data items regardless of the query.

var mockService = function(query){
	var d = new dojo.Deferred();
	d.fullLength = dataItems.length;
	d.callback(dataItems);
	return d;
};

Next, we’ll create the JsonRestStore, giving it a service function and target URL. Again, for this example we’ll ignore the “target” parameter. It is important when later developing with real RESTful services, but not for this simple example.

jsonStore = new dojox.data.JsonRestStore({
	service: mockService,
	target: '/some/url'
});

JsonRestStore is well-suited for larger data sets where you don’t want to (or can’t) efficiently transfer the entire data set to the client. JsonRestStore does great server-side interaction.

Finally, let’s declare a dojox.grid.DataGrid where we’ll 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>	

datagrid

We can also use the same JsonRestStore to populate a dijit.form.ComboBox:

<input dojoType="dijit.form.ComboBox" store="jsonStore" searchAttr="name"></input>

combobox

It’s that easy to put the same data into different UI widgets!

Next, we’ll switch out the JsonRestStore for an XmlStore to show how easy it is to change data formats. The data file:

<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, we create the XML data store;

xmlStore = new dojox.data.XmlStore({
	url: 'continents.xml',
	label: 'name'
});

XmlStore is an “in-memory” store for reading XML data sources. It is provided by Dojo and is contained in the DojoX project. XmlStore is a read and write interface to basic XML data, a common data interchange format. The XmlStore is quite useful in that it can work with fairly generic XML documents. The store is designed so that you can override certain functions to get specific custom behaviors to occur when performing reads and saves.

Finally, plug it into 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>

Also, update the ComboBox:

<input dojoType="dijit.form.ComboBox" store="xmlStore" searchAttr="name"></input>

Both the Grid and ComboBox continue to work without any code changes to them. The only change needed was to declare the data source and specify it as the input to the grid. There were no issues with retrieving, parsing, and managing the data. The data store API did all the work!

There are many additional ready-to-use data stores, including CsvStore, FileStore, FlickrStore, JsonQueryRestStore, PersevereStore, ServiceStore, WikipediaStore, and more! See the dojox.data directory for a complete listing.

Dojo Data is a powerful, flexible tool. Data stores make it possible to fairly easily switch out both front-end components and back-end implementations without having to change much code. It can be just as easy to switch an existing Dijit with a new one, using the same data store. Multiple Dijits, charts, and grids on a page may also be powered by the same data store instance.

Additional related resources:

Learn more about how SitePen can be your partner.

SitePen is a strategic consultancy committed to achieving technical objectives, solving critical business problems and helping our customers build web applications the right way, the first time.
Share This