Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

dojo.data, stores and widgets

15,210 views

Published on

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

Published in: Technology
  • Follow the link, new dating source: ❤❤❤ http://bit.ly/36cXjBY ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating direct: ♥♥♥ http://bit.ly/36cXjBY ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×