diff --git a/src/datasource/docs/component.json b/src/datasource/docs/component.json index 9c4e4ebb110..3b5552d7e3a 100644 --- a/src/datasource/docs/component.json +++ b/src/datasource/docs/component.json @@ -9,7 +9,7 @@ "examples": [ { - "name": "datasource_local", + "name": "datasource-local", "displayName": "DataSource.Local", "modules": ["datasource", "dataschema"], "description": "The Local DataSource manages retrieval of in-page data, from JavaScript arrays and objects to DOM elements.", @@ -19,7 +19,7 @@ }, { - "name": "datasource_get", + "name": "datasource-get", "displayName": "DataSource.Get", "modules": ["datasource", "dataschema"], "description": "The Get DataSource, which manages retrieval of data from remote sources via the Get Utility, can be useful for accessing data from cross-domain servers without the need for a proxy.", @@ -29,7 +29,7 @@ }, { - "name": "datasource_io", + "name": "datasource-io", "displayName": "DataSource.IO", "modules": ["datasource", "dataschema"], "description": "The IO DataSource manages retrieval of data from remote sources, via the IO Utility.", @@ -39,7 +39,7 @@ }, { - "name": "datasource_function", + "name": "datasource-function", "displayName": "DataSource.Function", "modules": ["datasource", "dataschema"], "description": "The Function DataSource, which manages retrieval of data from a JavaScript function, provides a highly customizeable mechanism for implementer-defined data retrieval algorithms", @@ -49,7 +49,7 @@ }, { - "name": "datasource_caching", + "name": "datasource-caching", "displayName": "DataSource with Caching", "modules": ["datasource", "dataschema", "cache"], "description": "Use the DataSourceCache plugin to enable caching and reduce server calls to remote sources.", @@ -59,7 +59,7 @@ }, { - "name": "datasource_offlinecache", + "name": "datasource-offlinecache", "displayName": "DataSource with Offline Cache", "modules": ["datasource", "dataschema", "cache"], "description": "The DataSourceCache plugin supports offline caching so that cached data persists across browser sessions.", @@ -69,7 +69,7 @@ }, { - "name": "datasource_polling", + "name": "datasource-polling", "displayName": "DataSource with Polling", "modules": ["datasource"], "description": "Use the Pollable extension to enable polling in your DataSource.", diff --git a/src/datasource/docs/datasource-caching.mustache b/src/datasource/docs/datasource-caching.mustache new file mode 100644 index 00000000000..6722c7ff2e9 --- /dev/null +++ b/src/datasource/docs/datasource-caching.mustache @@ -0,0 +1,83 @@ + + +
+

The DataSourceCache plugin enables caching on any DataSource to reduce high-latency calls to remote sources and to reduce server load. In this example, the Cache's `max` value has been set to `3`. + +

+ +
+ {{>datasource-caching-source}} +
+ +

Use the plug() method to initialize the +DataSourceCache plugin and pass in the configuration value +max to set the maximum size.

+ +``` +YUI().use("datasource", "dataschema", "cache", function (Y) { + var callback = { + success: function (e) { /* output to screen */ }, + failure: function (e) { /* output to screen */ } + }, + + myDataSource = new Y.DataSource.Get({ + source: "https://api.github.com/users/", + + // this is only needed because the query appends the url + // rather than the url's query params + generateRequestCallback: function (guid) { + return '/repos?callback=YUI.Env.DataSource.callbacks.' + guid; + } + }), + + myDataSource.plug(Y.Plugin.DataSourceJSONSchema, { + schema: { + resultListLocator: "data", + resultFields: ["name"] + } + }); + + myDataSource.plug(Y.Plugin.DataSourceCache, { max: 3 }); + + // Adds to cache + myDataSource.sendRequest({ + request : "lsmith", + callback: callback + }); + + // Adds to cache + myDataSource.sendRequest({ + request : "davglass", + callback: callback + }); + + // Retrieves from cache + myDataSource.sendRequest({ + request : "lsmith", + callback: callback + }); +}); +``` + +

Full Example Source Listing

+ +``` + {{>datasource-caching-source}} +``` diff --git a/src/datasource/docs/datasource-function.mustache b/src/datasource/docs/datasource-function.mustache new file mode 100644 index 00000000000..24c9a7f582b --- /dev/null +++ b/src/datasource/docs/datasource-function.mustache @@ -0,0 +1,99 @@ + + +
+

DataSource.Function allows the implementer to define a JavaScript function that returns data values, for maximum customizeability. A DataSchema plugin is used to normalize incoming data into a known format for consistency of usage by other components.

+
+ +
+ {{>datasource-function-source}} +
+ +

Your custom function can return arbitrary data, so use the appropriate schema plugin to normalize the data into a consistent format. Array data would use a DataSourceArraySchema plugin:

+ +``` +YUI().use("datasource-function", "datasource-arrayschema", function(Y) { + var myFunction = function(request) { + return [ + {name:"abc",id:123}, + {name:"def",id:456}, + {name:"ghi",id:789} + ]; + }, + myDataSource = new Y.DataSource.Function({source:myFunction}), + myCallback = { + success: function(e){ + alert(e.response); + }, + failure: function(e){ + alert("Could not retrieve data: " + e.error.message); + } + }; + + myDataSource.plug(Y.Plugin.DataSourceArraySchema, { + schema: { + resultFields: ["name","id"] + } + }); + + myDataSource.sendRequest({callback:myCallback}); +}); +``` + +

Whereas JSON data would use a DataSourceJSONSchema plugin:

+ +``` +YUI().use("datasource-function", "datasource-jsonschema", function(Y) { + var myFunction = function(request) { + return { + "profile":{ + "current":160, + "target":150 + }, + "reference": [ + { + ... + }, + { + "category":"nutrition", + "type":"intake", + "fruit":[ + {"name":"apple", "calories":70}, + {"name":"banana", "calories":70}, + {"name":"orange", "calories":90}, + ], + "vegetables":[ + {"name":"baked potato", "calories":150}, + {"name":"broccoli", "calories":50}, + {"name":"green beans", "calories":30} + ] + } + ], + "program": [ + ... + ] + }; + }, + myDataSource = new Y.DataSource.Function({source:myFunction}), + myCallback = { + success: function(e){ + alert(e.response); + }, + failure: function(e){ + alert("Could not retrieve data: " + e.error.message); + } + }; + + myDataSource.plug(Y.Plugin.DataSourceJSONSchema, { + schema: { + resultListLocator: "reference[1].fruit", + resultFields: ["name","calories"] + } + }); + + myDataSource.sendRequest({callback:myCallback}); +}); +``` + diff --git a/src/datasource/docs/datasource-get.mustache b/src/datasource/docs/datasource-get.mustache new file mode 100644 index 00000000000..1beb582d855 --- /dev/null +++ b/src/datasource/docs/datasource-get.mustache @@ -0,0 +1,39 @@ + + +
+

DataSource.Get uses the Get Utility to retrieve data, even cross-domain resources, via a dynamically created script node. A DataSchema plugin is used to normalize incoming data into a known format for consistency of usage by other components. Please note that your data resource must support a callback mechanism, which is a function wrapper around the returned data. The name of the callback function is passed to the resource via a query string parameter defined by the DataSource.Get attribute `scriptCallbackParam`.

+
+ +
+ {{>datasource-get-source}} +
+ +

Use a DataSourceJSONSchema plugin to parse the data against a schema that you provide:

+ +``` +YUI().use("datasource-get", "datasource-jsonschema", function(Y) { + var myDataSource = new Y.DataSource.Get({ + source: "http://query.yahooapis.com/v1/public/yql?format=json&" + }); + + myDataSource.plug(Y.Plugin.DataSourceJSONSchema, { + schema: { + resultListLocator: "query.results.result", + resultFields: ["title"] + } + }); + + myDataSource.sendRequest({ + request: "q=select%20*%20from%20upcoming.events.bestinplace...", + callback: { + success: function (e) { /* output to screen */ }, + failure: function (e) { /* output to screen */ } + } + }); + +}); +``` + diff --git a/src/datasource/docs/datasource-local.mustache b/src/datasource/docs/datasource-local.mustache new file mode 100644 index 00000000000..50667753028 --- /dev/null +++ b/src/datasource/docs/datasource-local.mustache @@ -0,0 +1,118 @@ +
+

Use DataSource.Local to manage retrieval of local data, from JavaScript arrays and objects to DOM elements. A DataSchema plugin is used to normalize incoming data into a known format for consistency of usage by other components.

+
+ +
+ {{>datasource-local-source}} +
+ +

If you are working with local array data, use the DataSourceArraySchema plugin to normalize and filter the data into a consistent format:

+ +``` +YUI().use("datasource-local", "datasource-arrayschema", function(Y) { + var myData = [ + {name:"abc",id:123,extra:"foo"}, + {name:"def",id:456,extra:"bar"}, + {name:"ghi",id:789,extra:"baz"} + ], + myDataSource = new Y.DataSource.Local({source:myData}), + myCallback = { + success: function(e){ + alert(e.response); + }, + failure: function(e){ + alert("Could not retrieve data: " + e.error.message); + } + }; + + myDataSource.plug(Y.Plugin.DataSourceArraySchema, { + schema: { + resultFields: ["name","id"] + } + }); + + myDataSource.sendRequest({callback:myCallback}); +}); +``` + +

Use the DataSourceJSONSchema plugin to normalize JSON data:

+ +``` +YUI().use("datasource-local", "datasource-jsonschema", function(Y) { + var myData = { + "profile":{ + "current":160, + "target":150 + }, + "reference": [ + { + ... + }, + { + "category":"nutrition", + "type":"intake", + "fruit":[ + {"name":"apple", "calories":70}, + {"name":"banana", "calories":70}, + {"name":"orange", "calories":90}, + ], + "vegetables":[ + {"name":"baked potato", "calories":150}, + {"name":"broccoli", "calories":50}, + {"name":"green beans", "calories":30} + ] + } + ], + "program": [ + ... + ] + }, + myDataSource = new Y.DataSource.Local({source:myData}), + myCallback = { + success: function(e){ + alert(e.response); + }, + failure: function(e){ + alert("Could not retrieve data: " + e.error.message); + } + }; + + myDataSource.plug(Y.Plugin.DataSourceJSONSchema, { + schema: { + resultListLocator: "reference[1].fruit", + resultFields: ["name","calories"] + } + }); + + myDataSource.sendRequest({callback:myCallback}); +}); +``` + +

You can use the DataSourceXMLSchema plugin to work with DOM elements:

+ +``` +YUI().use("datasource-local", "datasource-xmlschema", function(Y) { + var myTable = Y.Node.getDOMNode(Y.one("#myTable")), + myDataSource = new Y.DataSource.Local({source:myTable}), + myCallback = { + success: function(e){ + alert(e.response); + }, + failure: function(e){ + alert("Could not retrieve data: " + e.error.message); + } + }; + + myDataSource.plug(Y.Plugin.DataSourceXMLSchema, { + schema: { + resultListLocator: "tr", + resultFields: [ + {key:"beverage", locator:"td[1]"}, + {key:"price", locator:"td[2]"} + ] + } + }); + + myDataSource.sendRequest({callback:myCallback}); +}); +``` diff --git a/src/datasource/docs/datasource-offlinecache.mustache b/src/datasource/docs/datasource-offlinecache.mustache new file mode 100644 index 00000000000..6fe8d110b75 --- /dev/null +++ b/src/datasource/docs/datasource-offlinecache.mustache @@ -0,0 +1,97 @@ + + +
+

The DataSourceCache plugin enables caching on any DataSource to reduce high-latency calls to remote sources and to reduce server load. The plugin can point to `Y.OfflineCache` to allow cached data to persist across browser sessions in browsers that support HTML5 localStorage.

+ +
+ +
+ {{>datasource-offlinecache-source}} +
+ +

Use the `plug()` method to initialize the DataSourceCache plugin +and point the configuration value `cache` to Y.CacheOffline to enable +offline caching. The configuration value `expires` can be set to +change how soon the data expires.

+ +``` +YUI().use("datasource", "dataschema", "cache", function(Y) { + var callback = { + success: function (e) { /* output to screen */ }, + failure: function (e) { /* output to screen */ } + }, + + myDataSource = new Y.DataSource.Get({ + source: "https://api.github.com/users/", + + // this is only needed because the query appends the url + // rather than the url's query params + generateRequestCallback: function (guid) { + return '/repos?callback=YUI.Env.DataSource.callbacks.' + guid; + } + }), + + myDataSource.plug(Y.Plugin.DataSourceJSONSchema, { + schema: { + resultListLocator: "data", + resultFields: ["name"] + } + }); + + // Enable offline data caching by pointing to Y.CacheOffline. + // For demonstration purposes, data is set to expire after 10 seconds + myDataSource.plug(Y.Plugin.DataSourceCache, { + cache: Y.CacheOffline, + expires: 10000, + max: 5 + }); + + // Retrieves from server. Adds to cache + myDataSource.sendRequest({ + request : "lsmith", + callback: callback + }); + + // Retrieves from server. Adds to cache + myDataSource.sendRequest({ + request : "davglass", + callback: callback + }); + + // Retrieves from cache if requested within 5 seconds + myDataSource.sendRequest({ + request : "lsmith", + callback: callback + }); + + // ... wait 10 seconds ... + + // Cached data has expired. Retrieves from server. Adds to cache. + myDataSource.sendRequest({ + request : "davglass", + callback: callback + }); +}); +``` + +

Full Example Source Listing

+ +``` + {{>datasource-offlinecache-source}} +``` diff --git a/src/datasource/docs/datasource-polling.mustache b/src/datasource/docs/datasource-polling.mustache new file mode 100644 index 00000000000..e879b05de60 --- /dev/null +++ b/src/datasource/docs/datasource-polling.mustache @@ -0,0 +1,39 @@ + + +
+

DataSource's Pollable extension enables polling functionality on all your DataSource instances.

+
+ +
+ {{>datasource-polling-source}} +
+ +

Include the `datasource-pollable` extension in your `Y.use()` statement to add the `setInterval()`, `clearInterval()`, and `clearAllInterval()` methods to all your DataSource instances.

+ +``` +YUI().use("datasource-function", "datasource-polling", function(Y) { + var myFunction = function() { + return new Date(); + }, + myDataSource = new Y.DataSource.Function({source:myFunction}), + request = { + callback: { + success: function(e){ + Y.one("#demo_output_polling") + .setContent("At the tone the time will be: " + + Y.dump(e.response.results[0].toString())); + }, + failure: function(e){ + Y.one("#demo_output_polling") + .setContent("Could not retrieve data: " + e.error.message); + } + } + }, + id = myDataSource.setInterval(1000, request); // Starts polling + + myDataSource.clearInterval(id); // Ends polling +}); +``` \ No newline at end of file diff --git a/src/datasource/docs/datasource_polling_customheader.php b/src/datasource/docs/datasource_polling_customheader.php new file mode 100644 index 00000000000..f07ad9875f7 --- /dev/null +++ b/src/datasource/docs/datasource_polling_customheader.php @@ -0,0 +1,19 @@ + + +
+

DataSource's Pollable extension enables polling functionality on all your DataSource instances.

+
+ +
+ {{>datasource-polling-source}} +
+ +

Include the `datasource-pollable` extension in your `Y.use()` statement to add the `setInterval()`, `clearInterval()`, and `clearAllInterval()` methods to all your DataSource instances.

+ +``` +YUI().use("datasource-function", "datasource-polling", function(Y) { +}); +``` \ No newline at end of file diff --git a/src/datasource/docs/index.mustache b/src/datasource/docs/index.mustache old mode 100755 new mode 100644 diff --git a/src/datasource/docs/partials/datasource-caching-source.mustache b/src/datasource/docs/partials/datasource-caching-source.mustache new file mode 100644 index 00000000000..8fa02da329a --- /dev/null +++ b/src/datasource/docs/partials/datasource-caching-source.mustache @@ -0,0 +1,85 @@ +
+
Look up github repositories by username (e.g., davglass, lsmith or rgrove):
+ + + +
+
+ + diff --git a/src/datasource/docs/partials/datasource-function-source.mustache b/src/datasource/docs/partials/datasource-function-source.mustache new file mode 100644 index 00000000000..6aa8395853a --- /dev/null +++ b/src/datasource/docs/partials/datasource-function-source.mustache @@ -0,0 +1,147 @@ +
+

Array

+
Data
+
+[
+    {name:"abc",id:123},
+    {name:"def",id:456},
+    {name:"ghi",id:789}
+]
+    
+ +
Schema
+
+{
+    resultFields: ["name","id"]
+}
+    
+ +
Normalized data
+ +
+ +

JSON

+
Data
+
+{
+    "profile":{
+        "current":160,
+        "target":150
+    },
+    "reference": [
+        {
+            "category":"exercise",
+            "type":"expenditure",
+            "activities":[
+                {"name":"biking", "calories":550},
+                {"name":"golf", "calories":1000},
+                {"name":"running", "calories":650},
+                {"name":"swimming", "calories":650},
+                {"name":"walking", "calories":225}
+            ]
+        },
+        {
+            "category":"nutrition",
+            "type":"intake",
+            "fruit":[
+                {"name":"apple", "calories":70},
+                {"name":"banana", "calories":70},
+                {"name":"orange", "calories":90},
+            ],
+            "vegetables":[
+                {"name":"baked potato", "calories":150},
+                {"name":"broccoli", "calories":50},
+                {"name":"green beans", "calories":30}
+            ]
+        }
+    ],
+    "program": [
+        {
+            "category":"exercise",
+            "schedule":[
+                {"day":"sunday", "activity":"swimming"},
+                {"day":"monday", "activity":"running"},
+                {"day":"tuesday", "activity":"biking"},
+                {"day":"wednesday", "activity":"running"},
+                {"day":"thursday", "activity":"swimming"},
+                {"day":"friday", "activity":"running"},
+                {"day":"saturday", "activity":"golf"}
+            ]
+        },
+        {
+            "category":"diet",
+            "schedule":[
+            ]
+        }
+    ]
+}
+    
+ +
Schema
+
+{
+    resultListLocator: "reference[1].fruit",
+    resultFields: ["name","calories"]
+}
+    
+ +
Normalized data
+ +
+
+ + diff --git a/src/datasource/docs/partials/datasource-get-source.mustache b/src/datasource/docs/partials/datasource-get-source.mustache new file mode 100644 index 00000000000..8c95845d92a --- /dev/null +++ b/src/datasource/docs/partials/datasource-get-source.mustache @@ -0,0 +1,89 @@ +
+

JSON

+
Data
+
+{
+    "query":{
+        "count":"10",
+        "created":"2011-06-15T04:36:13Z",
+        "lang":"en-US",
+        "results":{
+            "event":[
+                {
+                 "id": "6826736",
+                 "name": "PGA Fall Expo 2011",
+                 "start_date": "2011-08-01",
+                 "venue_name": "The Venetian Congress and Sands Expo Convention Center",
+                 ...
+                },
+                {
+                 "id": "7228592",
+                 "name": "NAHC 30th Annual Meeting & Exposition",
+                 "start_date": "2011-10-01",
+                 "venue_name": "Mandalay Bay Resort",
+                 ...
+                },
+                {
+                 "id": "7238009",
+                 "name": "Water and Society 2011-First International Conference on Water and Society",
+                 "start_date": "2011-12-05",
+                 "venue_name": "Richard Tam Alumni Center",
+                 ...
+                },
+                ...
+            ]
+        }
+    }
+}
+    
+ +
Schema
+
+{
+    resultListLocator: "query.results.event",
+    resultFields: ["name"]
+}
+    
+ +
Normalized data
+ +
+
+ + + diff --git a/src/datasource/docs/partials/datasource-local-source.mustache b/src/datasource/docs/partials/datasource-local-source.mustache new file mode 100644 index 00000000000..4c68f64cb61 --- /dev/null +++ b/src/datasource/docs/partials/datasource-local-source.mustache @@ -0,0 +1,204 @@ + + +
+

Array

+
Data
+
+[
+    {name:"abc",id:123,extra:"foo"},
+    {name:"def",id:456,extra:"bar"},
+    {name:"ghi",id:789,extra:"baz"}
+]
+    
+ +
Schema
+
+{
+    resultFields: ["name","id"]
+}
+    
+ +
Normalized data
+ +
+ +

JSON

+
Data
+
+{
+    "profile":{
+        "current":160,
+        "target":150
+    },
+    "reference": [
+        {
+            "category":"exercise",
+            "type":"expenditure",
+            "activities":[
+                {"name":"biking", "calories":550},
+                {"name":"golf", "calories":1000},
+                {"name":"running", "calories":650},
+                {"name":"swimming", "calories":650},
+                {"name":"walking", "calories":225}
+            ]
+        },
+        {
+            "category":"nutrition",
+            "type":"intake",
+            "fruit":[
+                {"name":"apple", "calories":70},
+                {"name":"banana", "calories":70},
+                {"name":"orange", "calories":90},
+            ],
+            "vegetables":[
+                {"name":"baked potato", "calories":150},
+                {"name":"broccoli", "calories":50},
+                {"name":"green beans", "calories":30}
+            ]
+        }
+    ],
+    "program": [
+        {
+            "category":"exercise",
+            "schedule":[
+                {"day":"sunday", "activity":"swimming"},
+                {"day":"monday", "activity":"running"},
+                {"day":"tuesday", "activity":"biking"},
+                {"day":"wednesday", "activity":"running"},
+                {"day":"thursday", "activity":"swimming"},
+                {"day":"friday", "activity":"running"},
+                {"day":"saturday", "activity":"golf"}
+            ]
+        },
+        {
+            "category":"diet",
+            "schedule":[
+            ]
+        }
+    ]
+}
+    
+ +
Schema
+
+{
+    resultListLocator: "reference[1].fruit",
+    resultFields: ["name","calories"]
+}
+    
+ +
Normalized data
+ +
+ +

HTML Table (XML)

+
Data
+ + + + + + + + + + + + + + + + + +
coffee1.25
juice2.00
tea1.25
soda1.00
+ +
Schema
+
+{
+    resultListLocator: "tr",
+    resultFields: [{key:"beverage", locator:"td[1]"}, {key:"price", locator:"td[2]"}]
+}
+    
+ +
Normalized data
+ +
+
+ + diff --git a/src/datasource/docs/partials/datasource-offlinecache-source.mustache b/src/datasource/docs/partials/datasource-offlinecache-source.mustache new file mode 100644 index 00000000000..a7a2852675e --- /dev/null +++ b/src/datasource/docs/partials/datasource-offlinecache-source.mustache @@ -0,0 +1,91 @@ +
+
Look up github repositories by username (ex. lsmith, davglass, or rgrove):
+ + + +
+
+ + + + diff --git a/src/datasource/docs/partials/datasource-polling-source.mustache b/src/datasource/docs/partials/datasource-polling-source.mustache new file mode 100644 index 00000000000..8b2c76c568a --- /dev/null +++ b/src/datasource/docs/partials/datasource-polling-source.mustache @@ -0,0 +1,40 @@ +
+
Poll every second for current time:
+ + +
+
+ +