Easy Exploration of Dojo Data Stores

By on January 14, 2009 2:01 pm

Dojo 1.3 includes a new tool for working with data stores. The Dojo data API is a pervasive part of Dojo; there are a variety important widgets that use the API and numerous data stores that implement the API. However, often data stores are only accessible through the application that is being built, and developers are dependent on working UIs (that are constantly under development) for store interaction. The StoreExplorer is a new development tool built by Ben Hockey and I, designed to debug and interact directly with data stores to make it easier to understand the data provided by the stores, directly interact with that data, and thereby pinpoint issues in the widget-store stack.

Using the StoreExplorer module is intended to be very simple to hook up to a data store. Generally you would create a simple test page that you can use for store interaction. You create your store and then you can simply connect to it with the StoreExplorer:


The StoreExplorer utilizes the Dojo grid and tree widgets to view your data. The grid is automatically configured with appropriate columns for you data, and the tree can be used for view individual attributes of each item in the store and easily edit the values in place. The StoreExplorer also provides an interface for easily entering queries for the data store, and the grid provides sorting as well.

The tree part of the StoreExplorer allows you to introspect individual attributes of an item, and with hierarchical data stores, one can drill down into the nested items. Multiple values can also be viewed from the store as well as various other JavaScript data types like nested objects, dates, and functions. You can also modify data in the items from the tree view. Click on an attribute to change its value with the property editor. The property editor allows you to enter any type of JSON or JavaScript value, including strings, numbers, dates, arrays, etc. The editor also allows you define a value to a reference to another item in the store. Back in the tree view, you can right click on attributes in the tree to delete or add new attributes.

In the DojoX data tests directory (/dojox/data/tests/stores/) there is an explorer that is connected to an ItemFileWriteStore. You can use this as a starting template for connecting to your own data store.

It should be noted that connecting a tree directly to a data store will appear much different than the tree in the StoreExplorer. The tree in the StoreExplorer is not a per-item tree, but rather is a view of the attributes of each item, similar to the way that Firebug and other debuggers give you a view of the properties of an object. StoreExplorer is a developer tool. Also, the tree view is actually a self-contained module itself called the ItemExplorer. This could be used standalone to introspect a single store item.

Here is an example of using the StoreExplorer to interact with the ItemFileWriteStore:
ItemFileWriteStore

Persevere’s Database Explorer

One of our other projects, Persevere, is now using the StoreExplorer as its foundation for its database explorer for inspecting tables and their data and metadata, complete with the ability to create complex deeply hierarchical objects, arrays, and even functions:

persevere1.png

Front-end for Databases

The StoreExplorer provides a great base for developing a user interface to databases, particular databases with hierarchical capabilities. The StoreExplorer would make an excellent foundation for other databases as well. The StoreExplorer uses a self-configuring grid with a familiar table-like view of the data and has intuitive in-place editing for modifying data. This new module provides a great web-based database front-end, with a view of data that precisely aligns with the API that is available to developers through the corresponding Dojo Data store.

Store Explorer is another tool available for rapidly developing robust data-driven applications using Dojo’s data infrastructure. This tool can help test and interact with your data stores to help modularize the task of application development with the Dojo data framework.

Comments

  • cs44

    This is great news! Well done!

  • Very nice work. However the Persevere page doesn’t work for me, I get a 404 error:

    Error: Unable to load /Class/ status:404 status=404

  • @Shane: Should be fixed now. Some late night work on gzipping issue on the server had apparently left things in bad state…

  • I can’t get it to load the Store Explorer with a regular dojo release build. Also, it doesn’t load the data if the widget isn’t visible. Is there a way to procedurally force a reload? (this happens when I resize the browser window, for example).

  • @Gavin: The Store Explorer will not work with the release dijit code, it is tied to some fixes in trunk, so you need to use a nightly build or svn checkout.
    You should be able to force a reload by calling setStore.

  • Conar

    how did you set the grid up so it automatically configures your rows and columns based on your data?

  • @Conar: If you look at the setStore method (line 110 -170) in:
    http://archive.dojotoolkit.org/nightly/checkout/dojox/data/StoreExplorer.js
    You can see the code that reads the items and creates the layout based on the available attributes.

  • Conar

    I have been working for a while now trying to get my DataGrid to be self-configurable due to the fact that the headers are constantly changing depending on the data, so this will be great if i can get it to work for me. I am fairly new to dojo so this might be a task but i am going to get started on it right away.

  • I instantly dropped my jaw reading this, and especially after looking at the screenshots!

    Store Explorer…… really f****ing COOL thing. + Dojo which is bliss :)

  • Kris

    Hi Kris Zyp,

    Great solution. I’m very interested to know the data backing this example that you’ve shown. Is it possible for you to post the JSON data backing the grid. Thanks much, Kris.

  • @import “js/dojoroot/dijit/themes/tundra/tundra.css”;
    @import “js/dojoroot/dojo/resources/dojo.css”

    dojo.require(“dojox.data.JsonRestStore”);
    dojo.require(“dojox.data.StoreExplorer”);
    dojo.require(“dojo.parser”);
    store = new dojox.data.JsonRestStore({target:”rest/businessFunctions”, idAttribute:”id”});

    Business Functions

    here’s my page. It seems I have some problem of LookAndFeel / css

  • Pingback: Introducing Pintura | SitePen Blog()

  • Chris

    The store explorer demo is not working for me. Is it still functional?

  • Pingback: Dive into Dojo Data | SitePen Blog()

  • Tom

    This would be a great widget for the accounting app I am trying to build. But, I’m having a problem opening two storeExplorers in the same app. When I try, I get the following message in Firefox

    Tried to register widget with id==contextMenu but that id is already registered
    [Break On This Error] window[(typeof (djConfig)!=”undefined”…d.cell_markupFactory,_4cc))………..

    I think there must a hardwired id in the storeExplorer code. Is there anyway of specifying that id?

    Tom

  • LeslieM