dojo.data, stores and
      widgets

Tobias von Klipstein - klipstein@uxebu.com

     uxebu Consulting Ltd. & Co. KG
dojo.data?
• uniform and consistent data access layer
• hides the underlying data structure
  (JSON, XML, CSV)
• a set of ...
The big picture
                                Stores                      Widgets
        API
   dojo.data.Read       do...
Terminology
dojo.data             Database Term
datastore             cursor
data source           database
item          ...
dojo.data APIs

• dojo.data.api.Read
• dojo.data.api.Write
• dojo.data.api.Identity
• dojo.data.api.Notification
dojo.data.api.Read
•                           •
    determine the APIs          testing any object, if it
    that a data...
dojo.data.api.Write

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


• identify items by unique key
dojo.data.api.Notification

 •   implemented in conjunction with Write API

 •   provides notifications for:

     •   item ...
Available stores
•   dojo.data

    •   ItemFileReadStore

    •   ItemFileWriteStore

•   dojox.data

    •   QueryReadSt...
More stores
          (dojox.data)
• AndOrReadStore      • ItemExplorer
• AndOrWriteStore     • JsonQueryRestStore
• AppSt...
ItemFileReadStore
• reading JSON
 • from an http endpoint (url attribute)
 • in-memory JavaScript-object (data attr.)
• de...
ItemFileReadStore
       compatible json data

{'identifier': 'abbr',
  'label': 'name',
  'items': [
   { 'abbr':'ec', 'n...
dojo.data fetch (1)
var store = new SomeStoreName({ /* store config data */);
store.fetch({
  start: 0,     // from where?...
dojo.data fetch (2)

var onCompleteHandler = function(itemsArr, request){
  dojo.forEach(itemsArr, function(item){
  conso...
Widgets using stores
•                                 •
    dijit.form.ComboBox               dojox.form.FilePickerTextBo...
ComboBox / FilteringSelect
Tree
Grid
Charting
Slideshow
ThumbnailPicker
FilePicker
Pager
Roller
RollingList
SortList
DataGrid

•   Supports incremental data fetch/render and sort

•   Provides highly flexible layouts...

    •   Locked colu...
Thank you!
Tobias von Klipstein, klipstein@uxebu.com
Upcoming SlideShare
Loading in …5
×

dojo.data, stores and widgets

14,718 views
14,499 views

Published on

Describing the conecpt of dojo.data and stores and how you can use the stores with provided widgets.

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
14,718
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
229
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide





























  • dojo.data, stores and widgets

    1. 1. dojo.data, stores and widgets Tobias von Klipstein - klipstein@uxebu.com uxebu Consulting Ltd. & Co. KG
    2. 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. 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. 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. 5. dojo.data APIs • dojo.data.api.Read • dojo.data.api.Write • dojo.data.api.Identity • dojo.data.api.Notification
    6. 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. 7. dojo.data.api.Write • provides functions for: • creating new items • modifiying items • deleting items
    8. 8. dojo.data.api.Identity • identify items by unique key
    9. 9. dojo.data.api.Notification • implemented in conjunction with Write API • provides notifications for: • item creation (onNew) • item modification (onSet) • item deletion (onDelete)
    10. 10. Available stores • dojo.data • ItemFileReadStore • ItemFileWriteStore • dojox.data • QueryReadStore • CsvStore • HtmlTableStore • ServiceStore • XmlStore
    11. 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. 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. 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. 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. 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. 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. 17. ComboBox / FilteringSelect
    18. 18. Tree
    19. 19. Grid
    20. 20. Charting
    21. 21. Slideshow
    22. 22. ThumbnailPicker
    23. 23. FilePicker
    24. 24. Pager
    25. 25. Roller
    26. 26. RollingList
    27. 27. SortList
    28. 28. DataGrid • Supports incremental data fetch/render and sort • Provides highly flexible layouts... • Locked columns • Cell formatters • Complex row definitions • Paging via scrolling
    29. 29. Thank you! Tobias von Klipstein, klipstein@uxebu.com

    ×