diff -r 000000000000 -r 40c8f766c9b8 src/cm/media/js/lib/yui/yui3.0.0/examples/datasource/datasource_local.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/cm/media/js/lib/yui/yui3.0.0/examples/datasource/datasource_local.html Mon Nov 23 15:14:29 2009 +0100 @@ -0,0 +1,532 @@ + + + + + YUI Library Examples: DataSource Utility: DataSource.Local + + + + + + + + + + + + +
+
+
+

+ + YUI 3.x Home - + +

+
+ + +
+ + + +
+
+
+
+

YUI Library Examples: DataSource Utility: DataSource.Local

+
+
+ + +
+
+
+
+ +

DataSource Utility: DataSource.Local

+ +
+
+ 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. +
+ +
+
+

+ View example in new window. +

+
+ + + + +
+

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
+ +
+
+ + + + + + +
+
+
+ +

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

+ +
  1. YUI().use("datasource-local", "datasource-arrayschema", function(Y) {
  2.     var myData = [
  3.             {name:"abc",id:123,extra:"foo"},
  4.             {name:"def",id:456,extra:"bar"},
  5.             {name:"ghi",id:789,extra:"baz"}
  6.         ],
  7.         myDataSource = new Y.DataSource.Local({source:myData}),
  8.         myCallback = {
  9.             success: function(e){
  10.                 alert(e.response);
  11.             },
  12.             failure: function(e){
  13.                 alert("Could not retrieve data: " + e.error.message);
  14.             }
  15.         };
  16.  
  17.     myDataSource.plug(Y.Plugin.DataSourceArraySchema, {
  18.         schema: {
  19.             resultFields: ["name","id"]
  20.         }
  21.     });
  22.  
  23.     myDataSource.sendRequest(null, myCallback);
  24. });
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(null, myCallback);
+});
+

Use the DataSourceJSONSchema plugin to normalize JSON data:

+ +
  1. YUI().use("datasource-local", "datasource-jsonschema", function(Y) {
  2.     var myData = {
  3.         "profile":{
  4.             "current":160,
  5.             "target":150
  6.         },
  7.         "reference": [
  8.             {
  9.                 ...
  10.             },
  11.             {
  12.                 "category":"nutrition",
  13.                 "type":"intake",
  14.                 "fruit":[
  15.                     {"name":"apple", "calories":70},
  16.                     {"name":"banana", "calories":70},
  17.                     {"name":"orange", "calories":90},
  18.                 ],
  19.                 "vegetables":[
  20.                     {"name":"baked potato", "calories":150},
  21.                     {"name":"broccoli", "calories":50},
  22.                     {"name":"green beans", "calories":30}
  23.                 ]
  24.             }
  25.         ],
  26.         "program": [
  27.             ...
  28.         ]
  29.     },
  30.     myDataSource = new Y.DataSource.Local({source:myData}),
  31.     myCallback = {
  32.         success: function(e){
  33.             alert(e.response);
  34.         },
  35.         failure: function(e){
  36.             alert("Could not retrieve data: " + e.error.message);
  37.         }
  38.     };
  39.  
  40.     myDataSource.plug(Y.Plugin.DataSourceJSONSchema, {
  41.         schema: {
  42.             resultListLocator: "reference[1].fruit",
  43.             resultFields: ["name","calories"]
  44.         }
  45.     });
  46.  
  47.     myDataSource.sendRequest(null, myCallback);
  48. });
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(null, myCallback);
+});
+

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

+ +
  1. YUI().use("datasource-local", "datasource-xmlschema", function(Y) {
  2.     var myTable = Y.Node.getDOMNode(Y.get("#myTable")),
  3.         myDataSource = new Y.DataSource.Local({source:myTable}),
  4.         myCallback = {
  5.             success: function(e){
  6.                 alert(e.response);
  7.             },
  8.             failure: function(e){
  9.                 alert("Could not retrieve data: " + e.error.message);
  10.             }
  11.         };
  12.  
  13.     myDataSource.plug(Y.Plugin.DataSourceXMLSchema, {
  14.         schema: {
  15.             resultListLocator: "tr",
  16.             resultFields: [
  17.                 {key:"beverage", locator:"td[1]"},
  18.                 {key:"price", locator:"td[2]"}
  19.             ]
  20.         }
  21.     });
  22.  
  23.     myDataSource.sendRequest(null, myCallback);
  24. });
YUI().use("datasource-local", "datasource-xmlschema", function(Y) {
+    var myTable = Y.Node.getDOMNode(Y.get("#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(null, myCallback);
+});
+
+ + + + +
+
+

More DataSource Utility Resources:

+
+
+ +
+
+
+
+ +
+
+ + + +
+ +
+

Copyright © 2009 Yahoo! Inc. All rights reserved.

+

Privacy Policy - + Terms of Service - + Copyright Policy - + Job Openings

+
+
+ + + + + +