source: cows/branches/cows-vis/cows/pylons/project_templates/cows_server/+package+/public/js/yui/examples/attribute/attribute-clone.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/attribute/attribute-clone.html@5259
Revision 5259, 20.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        <title>YUI Library Examples: Attribute Utility: Value Clone Configuration</title>
5    <meta http-equiv="content-type" content="text/html; charset=utf-8">
6        <link rel="stylesheet" type="text/css" href="../../assets/yui.css" >
7
8<style>
9    /*Supplemental CSS for the YUI distribution*/
10    #custom-doc { width: 95%; min-width: 950px; }
11    #pagetitle {background-image: url(../../assets/bg_hd.gif);}
12    #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}
13</style>
14
15<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
16<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
17<script type="text/javascript" src="../../build/yui/yui-min.js"></script>
18<style type="text/css">
19    #example-out .entry {
20        font-family:courier;
21        margin-top:2px;
22        margin-left:10px;
23    }
24
25    #example-out .header {
26        font-weight:bold;
27        font-family:arial;
28        color:#8dd5e7;
29        margin-top:10px;
30        margin-bottom:3px;
31        margin-left:0px;
32    }
33
34    #example-out .subheader {
35        font-weight:bold;
36        font-family:arial;
37        color:#EDFF9F;
38    }
39
40    #example-out {
41        margin:5px;
42        border:1px solid #000;
43        color:#ffffff;
44        background-color:#004c6d;
45        overflow:auto;
46        height:35em;
47        padding:2px 5px;
48    }
49</style>
50<script type="text/javascript">
51    YUI.namespace("example");
52    YUI.example.print = function(msg, cl) {
53        var o = document.getElementById("example-out");
54        if (o) {
55            cl = cl || "";
56            o.innerHTML += '<div class="entry ' + cl + '">' + msg + '</div>';
57        }
58    }
59</script>
60
61</head>
62<body id="yahoo-com" class=" yui-skin-sam">
63<div id="custom-doc" class="yui-t2">
64<div id="hd">
65        <div id="ygunav">
66                <p>
67            <em>
68                <a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i> 
69            </em>
70                </p>
71                <form action="http://search.yahoo.com/search" id="sitesearchform">
72            <input name="vs" type="hidden" value="developer.yahoo.com">
73            <input name="vs" type="hidden" value="yuiblog.com">
74                    <div id="sitesearch">
75                        <label for="searchinput">Site Search (YDN &amp; YUIBlog): </label>
76                            <input type="text" id="searchinput" name="p">
77                            <input type="submit" value="Search" id="searchsubmit" class="ygbt">
78                    </div>
79                </form>
80    </div>
81        <div id="ygma"><a href="../../"><img src="../../assets/logo.gif"  border="0" width="200" height="93"></a></div>
82        <div id="pagetitle"><h1>YUI Library Examples: Attribute Utility: Value Clone Configuration</h1></div>
83</div>
84<div id="bd">
85
86        <div id="bar-note"><p><strong>Note:</strong> This is YUI 3.x. Looking for <a href="http://developer.yahoo.com/yui/">YUI 2.x</a>?</p></div>
87
88        <div id="yui-main">
89                <div class="yui-b">
90                  <div class="yui-ge">
91                          <div class="yui-u first example" id="main">
92
93        <h2>Attribute Utility: Value Clone Configuration</h2>
94
95        <div id="example" class="promo">
96        <p>
97        <p>By default, <code>get</code> returns an attribute's value by reference, if the value is an object. For normal use cases this is usually acceptable and avoids the performance cost of cloning the value returned. However if required, attributes can be configured using the <code>clone</code> configuration property to specify one of four clone modes, which <code>get</code> will honor when returning the attribute's value. This example demonstrates how the four clone modes work.
98        </p>   
99
100        <div class="module example-container ">
101                        <div class="hd exampleHd">
102                        <p class="newWindowButton yui-skin-sam">
103                <a href="attribute-clone_clean.html" target="_blank">View example in new window.</a>
104            </p>
105                </div>          <div id="example-canvas" class="bd">
106
107               
108        <!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
109       
110        <div id="example-out"></div>
111
112<script type="text/javascript">
113
114// Get a new YUI instance
115YUI({base:"../../build/", timeout: 10000}).use("node", "dump", "attribute", function(Y) {
116
117    // Shortcut to print (unrelated to example)
118    var print = YUI.example.print;
119
120    // Setup a custom class with attribute support
121    function MyClass(cfg) {
122        this._initAtts(MyClass.ATTRIBUTES, cfg);
123    }
124
125    // Setup attribute configuration
126    MyClass.ATTRIBUTES = {
127        "A" : {
128            value : {
129                a1 : "a1",
130                a2 : "a2",
131                a3 : {
132                    a3a : "a3a",
133                    a3b : "a3b"
134                }
135            },
136
137            // Deep clone, when returning,
138            // to protect entire object
139            clone : Y.Attribute.CLONE.DEEP
140        },
141 
142        "B" : {
143            value : {
144                b1 : "b1",
145                b2 : "b2",
146                b3 : {
147                    b3a : "b3a",
148                    b3b : "b3b"
149                }
150            },
151
152            // Shallow clone, when returning, to
153            // protect top level properties
154            clone : Y.Attribute.CLONE.SHALLOW
155        },
156
157        "C" : {
158            value : {
159                c1 : "c1",
160                c2 : "c2",
161                c3 : {
162                    c3a : "c3a",
163                    c3b : "c3b"
164                }
165            },
166
167            // Deep clone when returning, and don't
168            // allow sub-attribute values to be set,
169            // but allow whole value to be set
170            clone : Y.Attribute.CLONE.IMMUTABLE
171        },
172
173        "D" : {
174            value : {
175                d1 : "d1",
176                d2 : "d2",
177                d3 : {
178                    d3a : "d3a",
179                    d3b : "d3b"
180                }
181            },
182
183            // Don't clone value when returning (default)
184            clone : Y.Attribute.CLONE.NONE
185        }
186    };
187
188    Y.augment(MyClass, Y.Attribute);
189
190    var o1 = new MyClass();
191
192    /** Deep Cloned **/
193    var aVal = o1.get("A");
194
195    print("A - Deep Cloned", "header");
196    print("Original Value:", "subheader")
197    print(Y.dump(aVal));
198
199    aVal.a1 = "a1-Mod";
200    aVal.a3.a3b = "a3b-Mod";
201
202    print("Value After Modifying Reference:", "subheader");
203    print(Y.dump(o1.get("A")));
204
205    o1.set("A.a3.a3a", "a3a-Mod");
206
207    print("Value After Setting Sub-Attribute:", "subheader");
208    print(Y.dump(o1.get("A")));
209
210    /** Shallow Cloned **/
211    var bVal = o1.get("B");
212
213    print("B - Shallow Cloned", "header");
214    print("Original Value:", "subheader")
215    print(Y.dump(bVal));
216
217    bVal.b1 = "b1-Mod";
218    bVal.b3.b3b = "b3b-Mod";
219   
220    print("Value After Modifying Reference:", "subheader");
221    print(Y.dump(o1.get("B")));
222
223    o1.set("B.b3.b3a", "b3a-Mod");
224
225    print("Value After Setting Sub-Attribute:", "subheader");
226    print(Y.dump(o1.get("B")));
227   
228    /** Immutable **/
229    var cVal = o1.get("C");
230
231    print("C - Immutable", "header");
232    print("Original Value:", "subheader")
233    print(Y.dump(cVal));
234
235    cVal.c1 = "c1-Mod";
236    cVal.c3.c3b = "c3b-Mod";
237
238    print("Value After Modifying Reference:", "subheader");
239    print(Y.dump(o1.get("C")));
240
241    // NOTE: Attempting to set a sub-attribute
242    // on a DEEP or SHALLOW cloned attribute
243    // is allowed, but prevented on IMMUTABLE
244    // attributes
245
246    o1.set("C.c3.c3a", "c3a-Mod");
247
248    print("Value After Setting Sub-Attribute:", "subheader");
249    print(Y.dump(o1.get("C")));
250
251    /** Default **/
252    var dVal = o1.get("D");
253
254    print("D - No Cloning", "header");
255    print("Original Value:", "subheader")
256    print(Y.dump(dVal));
257
258    dVal.d1 = "d1-Mod";
259    dVal.d3.d3b = "d3b-Mod";
260
261    print("Value After Modifying Reference:", "subheader");
262    print(Y.dump(o1.get("D")));
263
264    o1.set("D.d3.d3a", "d3a-Mod");
265
266    print("Value After Setting Sub-Attribute:", "subheader");
267    print(Y.dump(o1.get("D")));
268});
269</script>
270       
271        <!--END SOURCE CODE FOR EXAMPLE =============================== -->
272       
273               
274                </div>
275        </div>                 
276        </div>
277               
278        <h3>Clone Options</h3>
279
280<p>Attribute supports the following clone values (available as <a href="../api/Attribute.html#property_CLONE">static constants</a> on the Attribute class), which can be used to configure how attribute values are returned through the <code>get</code> method:</p>
281
282<dl>
283    <dt>Attribute.CLONE.DEEP</dt>
284    <dd>Will result in a deep cloned value being returned (created using YUI's <code>clone</code> method).
285        This can be expensive for complex objects.</dd>
286    <dt>Attribute.CLONE.SHALLOW</dt>
287    <dd>Will result in a shallow cloned value being returned (created using YUI's <code>merge</code> method).</dd>
288    <dt>Attribute.CLONE.IMMUTABLE</dt>
289    <dd>Will result in a deep cloned value being returned
290        when using the <code>get</code> method. Additionally users will
291        not be able to set nested properties of the attribute's value
292        using the sub-attribute notation (<code>obj.set("x.y.z", 5)</code>).
293        However the value of the attribute can be changed, making
294        it different from a <code>readOnly</code> attribute.</dd>
295    <dt>Attribute.CLONE.NONE</dt>
296    <dd> The value will not be cloned, resulting in a reference
297    to the stored value being passed back, if the value is an object.
298    This is the default behavior.</dd>
299</dl>
300
301<h3>Configuring The Attributes</h3>
302
303<p>In this example, we setup a custom class <code>MyClass</code> with four attributes <code>A</code>, <code>B</code>, <code>C</code> and <code>D</code>. All the attributes will be have similarly nested object literal values.</p>
304
305<p><code>A</code> is defined to be deep cloned (<code>Attribute.CLONE.DEEP</code>), <code>B</code> is defined to be shallow cloned (<code>Attribute.CLONE.SHALLOW</code>), <code>C</code> is defined to be immutable (<code>Attribute.CLONE.IMMUTABLE</code>) and <code>D</code> is not cloned (<code>Attribute.CLONE.NONE</code>):</p>
306
307<textarea name="code" class="JScript" cols="60" rows="1">
308    MyClass.ATTRIBUTES = {
309        "A" : {
310            value : {
311                a1 : "a1",
312                a2 : "a2",
313                a3 : {
314                    a3a : "a3a",
315                    a3b : "a3b"
316                }
317            },
318            clone : Y.Attribute.CLONE.DEEP
319        },
320
321        "B" : {
322            value : {
323                b1 : "b1",
324                b2 : "b2",
325                b3 : {
326                    b3a : "b3a",
327                    b3b : "b3b"
328                }
329            },
330            clone : Y.Attribute.CLONE.SHALLOW
331        },
332
333        "C" : {
334            value : {
335                ...
336            }
337            clone : Y.Attribute.CLONE.IMMUTABLE
338        },
339
340        "D" : {
341            value : {
342                ...
343            },
344            clone : Y.Attribute.CLONE.NONE
345        }
346    }
347</textarea> 
348
349<h3>Modifying The Returned Value</h3>
350
351<p>The example code attempts to retrieve each attribute value using the <code>get</code> method, and modify properties directly on the returned value. Top level properties as well nested properties are modified, to hightlight the difference between the clone methods (e.g. modifying nested properties on a <code>SHALLOW</code> clone will modify the stored value, whereas <code>DEEP</code> will prevent the user from modifying stored properties at any level):</p>
352
353<textarea name="code" class="JScript" cols="60" rows="1">
354
355    ...
356
357    var o1 = new MyClass();
358
359    /** Deep Cloned **/
360    var aVal = o1.get("A");
361
362    aVal.a1 = "a1-Mod";
363    aVal.a3.a3b = "a3b-Mod";
364
365    print("Value After Modifying Reference:", "subheader");
366    print(Y.dump(o1.get("A")));
367
368    /** Shallow Cloned **/
369    var bVal = o1.get("B");
370
371    bVal.b1 = "b1-Mod";
372    bVal.b3.b3b = "b3b-Mod";
373
374    print("Value After Modifying Reference:", "subheader");
375    print(Y.dump(o1.get("B")));
376
377    ...
378</textarea>
379
380<h3>Modifying Sub-Attribute Values</h3>
381
382<p>Attribute's <code>set</code> method can be used to set individual properties within the stored attribute value, by using a "dot" notation syntax. For example...</p>
383
384<textarea name="code" class="JScript" cols="60" rows="1">
385    o1.set("A.a3.a3a", "a3a-Mod");
386</textarea>
387
388<p>...will set the <code>a3.a3a</code> property of the <code>A</code> attribute (if the <code>a3</code> property already exists)</p>
389
390<p>The example code attempts to set sub-attribute values for each of the four attributes using the syntax above, to highlight how <code>Attribute.CLONE.IMMUTABLE</code> differs from the others in preventing sub-attribute values from being set</p>
391
392<textarea name="code" class="JScript" cols="60" rows="1">
393    o1.set("C.c3.c3a", "c3a-Mod");
394
395    print("Value After Setting Sub-Attribute:", "subheader");
396    print(Y.dump(o1.get("C")));
397</textarea>
398
399<h3>Results</h3>
400
401<p>The output shows us that:</p>
402
403<ul>
404<li>For <code>A</code>, the <code>DEEP</code> cloned attribute: We cannot change top level properties like <code>a1</code>, or properties nested further down like <code>a3.a3b</code> by modifying the reference, but we can set nested values like <code>a3.a3a</code> through the <code>set</code> method.</li>
405<li>For <code>B</code>, the <code>SHALLOW</code> cloned attribute: We cannot change top level properties like <code>b1</code>, but can change properties nested further down like <code>b3.b3b</code> by modifying the reference. We can also set nested values like <code>b3.b3a</code> through the <code>set</code> method.</li>
406<li>For <code>C</code>, the <code>IMMUTABLE</code> attribute: We cannot change top level properties like <code>c1</code>, or properties nested further down like <code>c3.c3b</code> by modifying the reference. We also cannot set nested values like <code>c3.c3a</code> through the <code>set</code> method. However we would be able to set <code>C</code> to an entirely new value if required.</li>
407<li>For <code>D</code>, the normal attribute: We can change both top level and nested properties like <code>d1</code> and <code>d3.d3b</code> by modifying the reference. We can also set nested values like <code>d3.d3a</code> through the <code>set</code> method. </li>
408</ul>
409
410                                </div>
411                                <div class="yui-u sidebar">
412                                       
413                               
414                                        <div id="examples" class="mod box4">
415                        <div class="hd">
416                                                <h4>
417    Attribute Utility Examples:</h4>
418                        </div>
419                                                <div class="bd">
420                                                        <ul>
421                                                                <li><a href='../attribute/attribute-basic.html'>Basic Configuration</a></li><li><a href='../attribute/attribute-event.html'>Change Events</a></li><li><a href='../attribute/attribute-getset.html'>Custom Getters, Setters and Validators</a></li><li class='selected'><a href='../attribute/attribute-clone.html'>Value Clone Configuration</a></li><li><a href='../attribute/attribute-rw.html'>readOnly and writeOnce Configuration</a></li>                                                 </ul>
422                                                </div>
423                                        </div>
424                                       
425                                        <div class="mod box4">
426                        <div class="hd">
427                                                <h4>More Attribute Utility Resources:</h4>
428                        </div>
429                        <div class="bd">
430                                                <ul>
431                                                        <!-- <li><a href="http://developer.yahoo.com/yui/attribute/">User's Guide</a> (external)</li> -->
432                                                <li><a href="../../api/module_attribute.html">API Documentation</a></li>
433</ul>
434                        </div>
435                                        </div>
436                          </div>
437                </div>
438               
439                </div>
440        </div>
441
442
443<div class="yui-b toc3" id="tocWrapper">
444<!-- TABLE OF CONTENTS -->
445<div id="toc">
446       
447<ul>
448<li class="sect first">YUI 3.x Project</li><li class="item"><a title="The Yahoo! User Interface (YUI) Library, 3.x Branch, " href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site (external)</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="The YUI Library can be downloaded from SourceForge" href="http://sourceforge.net/projects/yui/">YUI 3 on Sourceforge (external)</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/3/license.html">YUI License (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI (Global Prerequisite) - Functional Examples" href="../../examples/yui/index.html">YUI (Global Prerequisite)</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="selected "><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Base - Functional Examples" href="../../examples/base/index.html">Base</a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="Drag &amp; Drop - Functional Examples" href="../../examples/dd/index.html">Drag &amp; Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="Queue - Functional Examples" href="../../examples/queue/index.html">Queue</a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Grids - Functional Examples" href="../../examples/cssgrids/index.html">CSS Grids</a></li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="sect">The YUI Community</li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="item"><a title="The Yahoo! Group YDN-JavaScript hosts the YUI community forum" href="http://tech.groups.yahoo.com/group/ydn-javascript/">YUI Forum (external)</a></li><li class="item"><a title="The Yahoo! Group yui3 is dedicated to the 3.x branch of the Yahoo! User Interface (YUI) Library." href="http://tech.groups.yahoo.com/group/yui3/">YUI 3 Forum (external)</a></li><li class="item"><a title="YUI is used by Yahoo! and by hundreds of other sites, including many you know and love." href="/yui/poweredby/">YUI Sightings (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li><li class="sect">YUI Articles on the YUI Website</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Reporting Bugs and Making Feature Requests for YUI Components" href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests (external)</a></li><li class="item"><a title="Serve YUI source files from Yahoo! -- free, fast, and simple" href="http://developer.yahoo.com/yui/3/articles/hosting/">Serving YUI Files from Yahoo! (external)</a></li></ul>
449</div>
450</div>
451        </div><!--closes bd-->
452
453        <div id="ft">
454        <p class="first">Copyright &copy; 2008 Yahoo! Inc. All rights reserved.</p>
455        <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> -
456            <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> -
457            <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> -
458            <a href="http://careers.yahoo.com/">Job Openings</a></p>
459        </div>
460</div>
461<script src="../../assets/dpSyntaxHighlighter.js"></script>
462<script language="javascript"> 
463dp.SyntaxHighlighter.HighlightAll('code'); 
464</script>
465</body>
466</html>
467<!-- delightfuture.corp.yahoo.com uncompressed/chunked Wed Aug 13 16:45:30 PDT 2008 -->
Note: See TracBrowser for help on using the repository browser.