source: cows/branches/cows-vis/cows/pylons/project_templates/cows_server/+package+/public/js/yui/examples/json/json_freeze_thaw_clean.html @ 5259

Subversion URL: http://proj.badc.rl.ac.uk/svn/ndg/cows/branches/cows-vis/cows/pylons/project_templates/cows_server/+package+/public/js/yui/examples/json/json_freeze_thaw_clean.html@5259
Revision 5259, 4.2 KB checked in by domlowe, 11 years ago (diff)

adding yui javascript

Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2<html>
3<head>
4<meta http-equiv="content-type" content="text/html; charset=utf-8">
5<title>Rebuilding class instances from JSON data</title>
6
7<style type="text/css">
8/*margin and padding on body element
9  can introduce errors in determining
10  element position and are not recommended;
11  we turn them off as a foundation for YUI
12  CSS treatments. */
13body {
14        margin:0;
15        padding:0;
16}
17</style>
18
19<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
20<script type="text/javascript" src="../../build/yui/yui-min.js"></script>
21
22
23<!--begin custom header content for this example-->
24<style type="text/css">
25#demo pre {
26    background: #fff;
27    border: 1px solid #ccc;
28    margin: 1em;
29    padding: 1em;
30    white-space: pre-wrap; /* css-3 */
31    word-wrap: break-word; /* Internet Explorer 5.5+ */
32}
33</style>
34
35<!--end custom header content for this example-->
36
37</head>
38
39<body class=" yui-skin-sam">
40
41<h1>Rebuilding class instances from JSON data</h1>
42
43<div class="exampleIntro">
44        <p>This example illustrates one method of serializing and recreating class instances by using the <code>replacer</code> and <code>reviver</code> parameters to <code>JSON.stringify</code> and <code>JSON.parse</code> respectively.</p>
45                       
46</div>
47
48<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
49
50<div id="demo">
51    <input type="button" id="demo_freeze" value="Freeze">
52    <input type="button" id="demo_thaw" disabled="disabled" value="Thaw">
53    <pre id="demo_frozen">(stringify results here)</pre>
54    <div id="demo_thawed"></div>
55</div>
56
57<script type="text/javascript">
58YUI({base:"../../build/", timeout: 10000}).use("node", "json", function(Y) {
59
60var example = {
61    data       : null,
62    jsonString : null,
63
64    dateRE : /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2})Z$/,
65
66    cryo : function (k,o) {
67        return (o instanceof CaveMan) ? CaveMan.freeze(o) : o;
68    },
69    revive : function (k,v) {
70        // Turn anything that looks like a UTC date string into a Date instance
71        if (typeof v === 'string' && example.dateRE.test(v)) {
72            var d = new Date();
73            d.setUTCFullYear(RegExp.$1, (RegExp.$2|0)-1, RegExp.$3);
74            d.setUTCHours(RegExp.$4, RegExp.$5, RegExp.$6);
75            return d;
76        }
77        // Check for cavemen by the _class key
78        if (v instanceof Object && v._class == 'CaveMan') {
79            return CaveMan.thaw(v);
80        }
81        // default to returning the value unaltered
82        return v;
83    }
84};
85
86function CaveMan(name,discovered) {
87    this.name       = name;
88    this.discovered = discovered;
89};
90CaveMan.prototype.getName = function () {
91    return this.name + ", the cave man";
92}
93
94// Static methods to convert to and from a basic object structure
95CaveMan.thaw = function (o) {
96    return new CaveMan(o.n, o.d);
97};
98// Convert to a basic object structure including a class identifier
99CaveMan.freeze = function (cm) {
100    return {
101        _class : 'CaveMan',
102        n : cm.name,
103        d : cm.discovered // remains a Date for standard JSON serialization
104    };
105};
106
107example.data    = {
108    count : 1,
109    type  : 'Hominid',
110    specimen : [
111        new CaveMan('Ed',new Date(1946,6,6))
112    ]
113};
114
115Y.get('#demo_freeze').on('click',function (e) {
116    example.jsonString = Y.JSON.stringify(example.data, example.cryo);
117
118    Y.get('#demo_frozen').set('innerHTML', example.jsonString);
119    Y.get('#demo_thaw').set('disabled',false);
120});
121
122Y.get('#demo_thaw').on('click',function (e) {
123    var parsedData = Y.JSON.parse(example.jsonString, example.revive);
124        cm = parsedData.specimen[0];
125
126    Y.get('#demo_thawed').set('innerHTML',
127        "<p>Specimen count: " + parsedData.count + "</p>"+
128        "<p>Specimen type: " + parsedData.type + "</p>"+
129        "<p>Instanceof CaveMan: " + (cm instanceof CaveMan) + "</p>"+
130        "<p>Name: " + cm.getName() + "</p>"+
131        "<p>Discovered: " + cm.discovered + "</p>");
132});
133
134// Expose the example objects for inspection
135example.CaveMan = CaveMan;
136YUI.example = example;
137
138});
139</script>
140
141<!--END SOURCE CODE FOR EXAMPLE =============================== -->
142
143</body>
144</html>
145<!-- delightfuture.corp.yahoo.com uncompressed/chunked Wed Aug 13 16:45:33 PDT 2008 -->
Note: See TracBrowser for help on using the repository browser.