dojo.data provides a uniform data access layer that hides underlying data structures and sources. It includes APIs for reading, writing, identity, and notification. Stores like ItemFileReadStore and QueryReadStore implement these APIs to provide data access from different sources to widgets like ComboBox, Tree, and DataGrid. The DataGrid in particular supports incremental fetching, sorting, and paging of large data sets.

1. dojo.data, stores and
widgets
Tobias von Klipstein - klipstein@uxebu.com
uxebu Consulting Ltd. & Co. KG

2. dojo.data?
• uniform and consistent data access layer
• hides the underlying data structure
(JSON, XML, CSV)
• a set of APIs/interfaces for writing data
stores
• unique way to handle data with widgets

3. The big picture
Stores Widgets
API
dojo.data.Read dojo.data.ItemFileReadStore dijit.form.ComboBox
dojo.data.Identity dijit.form.FilteringSelect
dojox.data.QueryReadStore
dijit.Tree
dojox.data.CsvStore
dojox.grid.DataGrid
dojo.data.Write dojo.data.ItemFileWriteStore
...
...
dojo.data.Notification

4. Terminology
dojo.data Database Term
datastore cursor
data source database
item row
attribute column
value -
reference (foreign key)
identity primary key
query WHERE clause of SQL Select
dojo.data APIs JDBC or ODBC
request SQL Select

5. dojo.data APIs
• dojo.data.api.Read
• dojo.data.api.Write
• dojo.data.api.Identity
• dojo.data.api.Notification

6. dojo.data.api.Read
• •
determine the APIs testing any object, if it
that a datastore is an item of a store
implements
• lazy-loading of items
• determine attributes
• searching for items
of each data item
that match a query
• getting values of
• sorting
attributes
• paging
• testing, if a specific
•
value is contained in filtering (using query
an attribute and wildcards: *, _)

7. dojo.data.api.Write
• provides functions for:
• creating new items
• modifiying items
• deleting items

8. dojo.data.api.Identity
• identify items by unique key

9. dojo.data.api.Notification
• implemented in conjunction with Write API
• provides notifications for:
• item creation (onNew)
• item modification (onSet)
• item deletion (onDelete)

10. Available stores
• dojo.data
• ItemFileReadStore
• ItemFileWriteStore
• dojox.data
• QueryReadStore
• CsvStore
• HtmlTableStore
• ServiceStore
• XmlStore

11. More stores
(dojox.data)
• AndOrReadStore • ItemExplorer
• AndOrWriteStore • JsonQueryRestStore
• AppStore • JsonRestStore
• AtomReadStore • KeyValueStore
• CouchDBRestStore • OpenSearchStore
• CssClassStore • OpmlStore
• CssRuleStore • PersevereStore
• FileStore • PicasaStore
• FlickrRestStore • RailsStore
• FlickrStore • S3Store
• GoogleFeedStore • SnapLogicStore
• GoogleSearchStore • StoreExplorer
• HtmlStore • WikipediaStore

12. ItemFileReadStore
• reading JSON
• from an http endpoint (url attribute)
• in-memory JavaScript-object (data attr.)
• deserialization of values (typeMap attr.)
• implements Read/Identity API (read-only!)
• using a predefined JSON structure

13. ItemFileReadStore
compatible json data
{'identifier': 'abbr',
'label': 'name',
'items': [
{ 'abbr':'ec', 'name':'Ecuador', 'capital':'Quito' },
{ 'abbr':'eg', 'name':'Egypt', 'capital':'Cairo' },
{ 'abbr':'sv', 'name':'El Salvador', 'capital':'San Salv.' },
{ 'abbr':'gq', 'name':'Equatorial Guinea','capital':'Malabo'},
...
}

14. dojo.data fetch (1)
var store = new SomeStoreName({ /* store config data */);
store.fetch({
start: 0, // from where?
count: 1000, // how many, tops?
query: {
// store specific!
},
sort: [
{ attribute: “attrName”, descending: true },
// ...
],
onBegin: function(numberFetched, request){ /* ... */ },
onComplete: function(itemsArr, request){ /* ... */ },
onError: function(errObj, request){ /* ... */ },
});

15. dojo.data fetch (2)
var onCompleteHandler = function(itemsArr, request){
dojo.forEach(itemsArr, function(item){
console.debug(
store.getValue(item, “someAttributeName”);
store.getIdentity(item); // returns the identity attr
store.getLabel(item);
};
}

16. Widgets using stores
• •
dijit.form.ComboBox dojox.form.FilePickerTextBox,
dojox.widget.FilePicker
• (dojox.data.FileStore)
dijit.form.FilteringSelect
•
• dojox.widget.Pager
dijit.Tree
•
• dojox.widget.Roller
dojox.grid.DataGrid
•
• dojox.widget.RollingList
dojox.charting
•
• dojox.widget.SortList
dojox.image.SlideShow
• dojox.image.ThumbnailPicker

17. ComboBox / FilteringSelect

18. Tree

19. Grid

20. Charting

21. Slideshow

22. ThumbnailPicker

23. FilePicker

24. Pager

25. Roller

26. RollingList

27. SortList

28. DataGrid
• Supports incremental data fetch/render and sort
• Provides highly flexible layouts...
• Locked columns
• Cell formatters
• Complex row definitions
• Paging via scrolling

29. Thank you!
Tobias von Klipstein, klipstein@uxebu.com