source: cows/branches/cows-vis/cows/pylons/project_templates/cows_server/+package+/public/js/yui/examples/attribute/attribute-rw_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/attribute/attribute-rw_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>readOnly and writeOnce Configuration</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    #example-out .entry {
26        font-family:courier;
27        margin-top:2px;
28        margin-left:10px;
29    }
30
31    #example-out .header {
32        font-weight:bold;
33        font-family:arial;
34        color:#8dd5e7;
35        margin-top:10px;
36        margin-bottom:3px;
37        margin-left:0px;
38    }
39
40    #example-out .subheader {
41        font-weight:bold;
42        font-family:arial;
43        color:#EDFF9F;
44    }
45
46    #example-out {
47        margin:5px;
48        border:1px solid #000;
49        color:#ffffff;
50        background-color:#004c6d;
51        overflow:auto;
52        width:30em;
53        height:22em;
54        padding:2px 5px;
55    }
56</style>
57<script type="text/javascript">
58    YUI.namespace("example");
59    YUI.example.print = function(msg, cl) {
60        var o = document.getElementById("example-out");
61        if (o) {
62            cl = cl || "";
63            o.innerHTML += '<div class="entry ' + cl + '">' + msg + '</div>';
64        }
65    }
66</script>
67
68<!--end custom header content for this example-->
69
70</head>
71
72<body class=" yui-skin-sam">
73
74<h1>readOnly and writeOnce Configuration</h1>
75
76<div class="exampleIntro">
77        Attributes can be configured to be <code>readOnly</code>, stopping them from being modified by the end user, or <code>writeOnce</code> allowing them to only be set by the end user, but only once. This example demonstrates how to setup attributes for your class as <code>readOnly</code> or <code>writeOnce</code> attributes, and shows how their behavior differs when the end user attempts to set their values.
78                       
79</div>
80
81<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
82
83<div id="example-out"></div>
84
85<script type="text/javascript">
86YUI({base:"../../build/", timeout: 10000}).use("node", "attribute", function(Y) {
87
88    // Shortcut to print (unrelated to example)
89    var print = YUI.example.print;
90
91    // Setup a custom class with attribute support
92    function MyClass(cfg) {
93        this._initAtts(MyClass.ATTRIBUTES, cfg);
94    }
95
96    // Setup attribute configuration
97    MyClass.ATTRIBUTES = {
98        "foo" : {
99            value: "Default Foo",
100            readOnly: true
101        },
102 
103        "bar" : {
104            value: "Default Bar",
105            writeOnce: true
106        }
107    };
108
109    MyClass.prototype.doSomething = function() {
110        // ... Do something which requires
111        // MyClass to change the value
112        // of foo ...
113       
114        // Host code can reset value of
115        // readOnly attributes interally,
116        // by working with the private state
117        // property
118
119        this._conf.remove("foo");
120        this.set("foo", "New Default Foo");
121    };
122
123    Y.augment(MyClass, Y.Attribute);
124
125    var o1 = new MyClass({
126        foo: "User Foo",
127        bar: "User Bar"
128    });
129
130    print("Initial Set", "header");
131    print("foo value (readOnly):", "subheader");
132    print(o1.get("foo"));
133
134    print("bar value (writeOnce):", "subheader");
135    print(o1.get("bar"));
136
137    // Attempt to reset values:
138
139    print("Try Setting Again", "header");
140    o1.set("foo", "User Reset Foo");
141    o1.set("bar", "User Reset Bar");
142
143    print("Final foo value (readOnly)", "subheader");
144    print(o1.get("foo"));
145
146    print("Final bar value (writeOnce)", "subheader");
147    print(o1.get("bar"));
148
149    print("Set Value Of Foo Interally", "header");
150    print("foo value (readOnly):", "subheader");
151
152    o1.doSomething();
153    print(o1.get("foo"));
154
155});
156</script>
157
158<!--END SOURCE CODE FOR EXAMPLE =============================== -->
159
160</body>
161</html>
162<!-- delightfuture.corp.yahoo.com uncompressed/chunked Wed Aug 13 16:45:30 PDT 2008 -->
Note: See TracBrowser for help on using the repository browser.