|
0
|
1 |
|
|
|
2 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|
|
3 |
<html> |
|
|
4 |
<head> |
|
|
5 |
<title>YUI Library Examples: Attribute: Basic Attribute Configuration</title> |
|
|
6 |
<meta http-equiv="content-type" content="text/html; charset=utf-8"> |
|
|
7 |
<link rel="stylesheet" type="text/css" href="../../assets/yui.css" > |
|
|
8 |
|
|
|
9 |
<style> |
|
|
10 |
/*Supplemental CSS for the YUI distribution*/ |
|
|
11 |
#custom-doc { width: 95%; min-width: 950px; } |
|
|
12 |
#pagetitle {background-image: url(../../assets/bg_hd.gif);} |
|
|
13 |
/* #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}*/ |
|
|
14 |
</style> |
|
|
15 |
|
|
|
16 |
<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css"> |
|
|
17 |
<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" /> |
|
|
18 |
<script type="text/javascript" src="../../build/yui/yui-min.js"></script> |
|
|
19 |
<style type="text/css"> |
|
|
20 |
.example-out .myclass-attrs { |
|
|
21 |
font-family:courier; |
|
|
22 |
margin-top:2px; |
|
|
23 |
} |
|
|
24 |
|
|
|
25 |
.example-out .myclass-title { |
|
|
26 |
font-weight:bold; |
|
|
27 |
font-family:arial; |
|
|
28 |
color:#8dd5e7; |
|
|
29 |
margin-top:5px; |
|
|
30 |
margin-bottom:3px; |
|
|
31 |
} |
|
|
32 |
|
|
|
33 |
.example-out { |
|
|
34 |
overflow:auto; |
|
|
35 |
border:1px solid #000; |
|
|
36 |
color:#ffffff; |
|
|
37 |
background-color:#004C6D; |
|
|
38 |
margin:5px; |
|
|
39 |
height:8em; |
|
|
40 |
padding:2px 2px 2px 5px; |
|
|
41 |
} |
|
|
42 |
</style> |
|
|
43 |
</head> |
|
|
44 |
<body id="yahoo-com" class=" yui-skin-sam"> |
|
|
45 |
<div id="custom-doc" class="yui-t2"> |
|
|
46 |
<div id="hd"> |
|
|
47 |
<div id="ygunav"> |
|
|
48 |
<p> |
|
|
49 |
<em> |
|
|
50 |
<a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i> |
|
|
51 |
</em> |
|
|
52 |
</p> |
|
|
53 |
<form action="http://search.yahoo.com/search" id="sitesearchform"> |
|
|
54 |
<input name="vs" type="hidden" value="developer.yahoo.com"> |
|
|
55 |
<input name="vs" type="hidden" value="yuiblog.com"> |
|
|
56 |
<div id="sitesearch"> |
|
|
57 |
<label for="searchinput">Site Search (YDN & YUIBlog): </label> |
|
|
58 |
<input type="text" id="searchinput" name="p"> |
|
|
59 |
<input type="submit" value="Search" id="searchsubmit" class="ygbt"> |
|
|
60 |
</div> |
|
|
61 |
</form> |
|
|
62 |
</div> |
|
|
63 |
<div id="ygma"><a href="../../"><img src="../../assets/logo.gif" border="0" width="200" height="93"></a></div> |
|
|
64 |
<div id="pagetitle"><h1>YUI Library Examples: Attribute: Basic Attribute Configuration</h1></div> |
|
|
65 |
</div> |
|
|
66 |
<div id="bd"> |
|
|
67 |
|
|
|
68 |
|
|
|
69 |
<div id="yui-main"> |
|
|
70 |
<div class="yui-b"> |
|
|
71 |
<div class="yui-ge"> |
|
|
72 |
<div class="yui-u first example" id="main"> |
|
|
73 |
|
|
|
74 |
<h2>Attribute: Basic Attribute Configuration</h2> |
|
|
75 |
|
|
|
76 |
<div id="example" class="promo"> |
|
|
77 |
<div class="example-intro"> |
|
|
78 |
<p>This example provides an introduction to the Attribute utility, showing how you can use it to add attribute support to your own custom classes.</p> |
|
|
79 |
|
|
|
80 |
<p> |
|
|
81 |
It is geared towards users who want to create their own classes from scratch and add Attribute support. In most cases you should consider extending the <a href="http://developer.yahoo.com/yui/3/base/index.html"><code>Base</code></a> class when you need managed attribute support, |
|
|
82 |
instead of augmenting Attribute directly, especially if you expect your class to be extended. <a href="http://developer.yahoo.com/yui/3/base/index.html"><code>Base</code></a> does the work described in this example for you, in addition to making it easier for users to extend you class. |
|
|
83 |
</p> </div> |
|
|
84 |
|
|
|
85 |
<div class="module example-container "> |
|
|
86 |
<div class="hd exampleHd"> |
|
|
87 |
<p class="newWindowButton yui-skin-sam"> |
|
|
88 |
<a href="attribute-basic_clean.html" target="_blank">View example in new window.</a> |
|
|
89 |
</p> |
|
|
90 |
</div> <div id="example-canvas" class="bd"> |
|
|
91 |
|
|
|
92 |
|
|
|
93 |
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== --> |
|
|
94 |
|
|
|
95 |
<div id="createo1"> |
|
|
96 |
<button type="button" class="do">Create First Instance</button> Construct o1, with default attribute values |
|
|
97 |
<div class="example-out"></div> |
|
|
98 |
</div> |
|
|
99 |
<div id="updateo1"> |
|
|
100 |
<button type="button" class="do">Update First Instance</button> Update the first instance, using set |
|
|
101 |
<div class="example-out"></div> |
|
|
102 |
</div> |
|
|
103 |
<div id="createo2"> |
|
|
104 |
<button type="button" class="do">Create Second Instance</button> Create the second instance, passing initial values to the constructor |
|
|
105 |
<div class="example-out"></div> |
|
|
106 |
</div> |
|
|
107 |
|
|
|
108 |
<script type="text/javascript"> |
|
|
109 |
|
|
|
110 |
// Get a new instance of YUI and |
|
|
111 |
// load it with the required set of modules |
|
|
112 |
|
|
|
113 |
YUI({base:"../../build/", timeout: 10000}).use("node", "attribute", function(Y) { |
|
|
114 |
|
|
|
115 |
// Setup custom class which we want to |
|
|
116 |
// add managed attribute support to |
|
|
117 |
|
|
|
118 |
function MyClass(cfg) { |
|
|
119 |
|
|
|
120 |
// When constructed, setup the initial attributes for the instance, by calling the addAttrs method. |
|
|
121 |
var attrs = { |
|
|
122 |
// Add 3 attributes, foo, bar and foobar |
|
|
123 |
"foo" : { |
|
|
124 |
value:5 |
|
|
125 |
}, |
|
|
126 |
|
|
|
127 |
"bar" : { |
|
|
128 |
value:"Hello World!" |
|
|
129 |
}, |
|
|
130 |
|
|
|
131 |
"foobar" : { |
|
|
132 |
value:true |
|
|
133 |
} |
|
|
134 |
}; |
|
|
135 |
|
|
|
136 |
this.addAttrs(attrs, cfg); |
|
|
137 |
} |
|
|
138 |
|
|
|
139 |
// Augment custom class with Attribute |
|
|
140 |
Y.augment(MyClass, Y.Attribute); |
|
|
141 |
|
|
|
142 |
function displayValues(o, title, node) { |
|
|
143 |
var str = |
|
|
144 |
'<div class="myclass"><div class="myclass-title">' |
|
|
145 |
+ title + |
|
|
146 |
'</div><ul class="myclass-attrs"><li>foo: ' |
|
|
147 |
+ o.get("foo") |
|
|
148 |
+ '</li><li>bar: ' |
|
|
149 |
+ o.get("bar") |
|
|
150 |
+ '</li><li>foobar: ' |
|
|
151 |
+ o.get("foobar") |
|
|
152 |
+ '</li></ul></div>'; |
|
|
153 |
|
|
|
154 |
Y.one(node).set("innerHTML", str); |
|
|
155 |
} |
|
|
156 |
|
|
|
157 |
Y.on("click", function() { |
|
|
158 |
|
|
|
159 |
// Create a new instance, but don't provide any initial attribute values. |
|
|
160 |
var o1 = new MyClass(); |
|
|
161 |
|
|
|
162 |
// Display current values |
|
|
163 |
displayValues(o1, "o1 with default values, set during construction", "#createo1 .example-out"); |
|
|
164 |
|
|
|
165 |
Y.on("click", function() { |
|
|
166 |
|
|
|
167 |
// Update values, using the "set" method |
|
|
168 |
o1.set("foo", 10); |
|
|
169 |
o1.set("bar", "Hello New World!"); |
|
|
170 |
o1.set("foobar", false); |
|
|
171 |
|
|
|
172 |
displayValues(o1, "o1 values updated using set, after construction", "#updateo1 .example-out"); |
|
|
173 |
|
|
|
174 |
}, "#updateo1 .do"); |
|
|
175 |
|
|
|
176 |
}, "#createo1 .do"); |
|
|
177 |
|
|
|
178 |
Y.on("click", function() { |
|
|
179 |
|
|
|
180 |
var o2 = new MyClass({ |
|
|
181 |
foo: 7, |
|
|
182 |
bar: "Aloha World!", |
|
|
183 |
foobar: false |
|
|
184 |
}); |
|
|
185 |
|
|
|
186 |
displayValues(o2, "o2 values set during construction", "#createo2 .example-out"); |
|
|
187 |
|
|
|
188 |
}, "#createo2 .do"); |
|
|
189 |
}); |
|
|
190 |
</script> |
|
|
191 |
|
|
|
192 |
<!--END SOURCE CODE FOR EXAMPLE =============================== --> |
|
|
193 |
|
|
|
194 |
|
|
|
195 |
</div> |
|
|
196 |
</div> |
|
|
197 |
</div> |
|
|
198 |
|
|
|
199 |
<h3>Setting Up Your Own Class To Use Attribute</h3> |
|
|
200 |
|
|
|
201 |
<p>In this example, we'll show how you can use the Attribute utility to add managed attributes to your own object classes. Later examples will show how you can configure more advanced attribute properties, and work with attribute change events.</p> |
|
|
202 |
|
|
|
203 |
<h4>Creating A YUI Instance</h4> |
|
|
204 |
|
|
|
205 |
<p>Before we get into attribute, a quick note on how we set up the instance of YUI we'll use for the examples. For all of the attribute examples, we'll setup our own instance of the YUI object and download the files we require on demand using the code pattern shown below:</p> |
|
|
206 |
|
|
|
207 |
<div id="syntax1" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="sy0"><</span>script type<span class="sy0">=</span><span class="st0">"text/javascript"</span><span class="sy0">></span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// Create our local YUI instance, to avoid</span></div></li><li class="li1"><div class="de1"> <span class="co1">// modifying the global YUI object</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> YUI<span class="br0">(</span><span class="br0">{</span>...<span class="br0">}</span><span class="br0">)</span>.<span class="kw2">use</span><span class="br0">(</span><span class="st0">"attribute"</span><span class="sy0">,</span> <span class="st0">"node"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>Y<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// Example code is written inside this function,</span></div></li><li class="li1"><div class="de1"> <span class="co1">// which gets passed our own YUI instance, Y, loaded</span></div></li><li class="li2"><div class="de2"> <span class="co1">// with the modules we asked for - "attribute" and "node"</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="sy0"></</span>script<span class="sy0">></span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="sy0"><</span>script type<span class="sy0">=</span><span class="st0">"text/javascript"</span><span class="sy0">></span> |
|
|
208 |
|
|
|
209 |
<span class="co1">// Create our local YUI instance, to avoid</span> |
|
|
210 |
<span class="co1">// modifying the global YUI object</span> |
|
|
211 |
|
|
|
212 |
YUI<span class="br0">(</span><span class="br0">{</span>...<span class="br0">}</span><span class="br0">)</span>.<span class="kw2">use</span><span class="br0">(</span><span class="st0">"attribute"</span><span class="sy0">,</span> <span class="st0">"node"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>Y<span class="br0">)</span> <span class="br0">{</span> |
|
|
213 |
|
|
|
214 |
<span class="co1">// Example code is written inside this function,</span> |
|
|
215 |
<span class="co1">// which gets passed our own YUI instance, Y, loaded</span> |
|
|
216 |
<span class="co1">// with the modules we asked for - "attribute" and "node"</span> |
|
|
217 |
|
|
|
218 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
219 |
<span class="sy0"></</span>script<span class="sy0">></span></pre></div><textarea id="syntax1-plain"><script type="text/javascript"> |
|
|
220 |
|
|
|
221 |
// Create our local YUI instance, to avoid |
|
|
222 |
// modifying the global YUI object |
|
|
223 |
|
|
|
224 |
YUI({...}).use("attribute", "node", function(Y) { |
|
|
225 |
|
|
|
226 |
// Example code is written inside this function, |
|
|
227 |
// which gets passed our own YUI instance, Y, loaded |
|
|
228 |
// with the modules we asked for - "attribute" and "node" |
|
|
229 |
|
|
|
230 |
}); |
|
|
231 |
</script></textarea></div> |
|
|
232 |
<p>The call to <code>YUI()</code> will create and return a new instance of the global YUI object for us to use. However this instance does not yet have all the modules we need for the examples.</p> |
|
|
233 |
|
|
|
234 |
<p>To load the modules, we invoke <code>use()</code> and pass it the list of modules we'd like populated on our new YUI instance - in this case, <code>attribute</code> and <code>node</code>. |
|
|
235 |
|
|
|
236 |
The YUI instance will pull down the source files for modules if they don't already exist on the page, plus any or their dependencies. |
|
|
237 |
When the source files are done downloading, the callback function which we pass in as the 3rd argument to <code>use()</code>, is invoked. Our custom YUI instance, <code>Y</code>, is passed to the callback, populated with the classes which make up the requested modules.</p> |
|
|
238 |
|
|
|
239 |
<p>This callback function is where we'll write all our example code. By working inside the callback function, we don't pollute the global namespace and we're also able to download the files we need on demand, rather than have them be on the page up front.</p> |
|
|
240 |
|
|
|
241 |
<p>The configuration object passed to <code>YUI()</code> when creating the instance is used to specify how (<em>combined, separate, debug, min etc.</em>) we want the files downloaded, and from where. The API documentation for the <a href="../../api/YUI.html">YUI object</a>, provides more information about the configuration options available.</p> |
|
|
242 |
|
|
|
243 |
<h4>Defining Your Custom Class</h4> |
|
|
244 |
|
|
|
245 |
<p>The first step in the example is to create the constructor function for our new class, to which we want to add attribute support. In our example, this class is called <code>MyClass</code>. |
|
|
246 |
|
|
|
247 |
We then augment <code>MyClass</code> with <code>Y.Attribute</code>, so that it receives all of <code>Attribute's</code> methods:</p> |
|
|
248 |
|
|
|
249 |
<div id="syntax2" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="kw2">function</span> MyClass<span class="br0">(</span>cfg<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> ...</div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2">Y.<span class="me1">augment</span><span class="br0">(</span>MyClass<span class="sy0">,</span> Y.<span class="me1">Attribute</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="kw2">function</span> MyClass<span class="br0">(</span>cfg<span class="br0">)</span> <span class="br0">{</span> |
|
|
250 |
... |
|
|
251 |
<span class="br0">}</span> |
|
|
252 |
|
|
|
253 |
Y.<span class="me1">augment</span><span class="br0">(</span>MyClass<span class="sy0">,</span> Y.<span class="me1">Attribute</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax2-plain">function MyClass(cfg) { |
|
|
254 |
... |
|
|
255 |
} |
|
|
256 |
|
|
|
257 |
Y.augment(MyClass, Y.Attribute);</textarea></div> |
|
|
258 |
<h4>Adding Attributes</h4> |
|
|
259 |
|
|
|
260 |
<p>We can now set up any attributes we need for <code>MyClass</code> using the <code>addAttrs</code> method. For the basic example we add 3 attributes - <code>foo</code>,<code>bar</code>, and <code>foobar</code>, and provide an initial <code>value</code> for each. |
|
|
261 |
|
|
|
262 |
The same object literal we use to provide the initial value for the attribute will also be used in the other examples to configure attribute properties such as <code>readOnly</code> or <code>writeOnce</code>, and define <code>getter</code>, <code>setter</code> and <code>validator</code> methods for the attribute.</p> |
|
|
263 |
|
|
|
264 |
<p>In this example, the default set of attributes which <code>MyClass</code> will support gets passed to <code>addAttrs</code> to set up the attributes for each instance during construction.</p> |
|
|
265 |
|
|
|
266 |
The complete definition for <code>MyClass</code> is shown below:</p> |
|
|
267 |
|
|
|
268 |
<div id="syntax3" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="co1">// Setup custom class which we want to add managed attribute support to</span></div></li><li class="li1"><div class="de1"><span class="kw2">function</span> MyClass<span class="br0">(</span>cfg<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// When constructed, setup the initial attributes for the </span></div></li><li class="li2"><div class="de2"> <span class="co1">// instance, by calling the addAttrs method.</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> attrs <span class="sy0">=</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="co1">// Add 3 attributes, foo, bar and foobar</span></div></li><li class="li1"><div class="de1"> <span class="st0">"foo"</span> <span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> value<span class="sy0">:</span><span class="nu0">5</span></div></li><li class="li2"><div class="de2"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="st0">"bar"</span> <span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> value<span class="sy0">:</span><span class="st0">"Hello World!"</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="st0">"foobar"</span> <span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> value<span class="sy0">:</span><span class="kw2">true</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>.<span class="me1">addAttrs</span><span class="br0">(</span>attrs<span class="sy0">,</span> cfg<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="co1">// Augment custom class with Attribute </span></div></li><li class="li2"><div class="de2">Y.<span class="me1">augment</span><span class="br0">(</span>MyClass<span class="sy0">,</span> Y.<span class="me1">Attribute</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="co1">// Setup custom class which we want to add managed attribute support to</span> |
|
|
269 |
<span class="kw2">function</span> MyClass<span class="br0">(</span>cfg<span class="br0">)</span> <span class="br0">{</span> |
|
|
270 |
|
|
|
271 |
<span class="co1">// When constructed, setup the initial attributes for the </span> |
|
|
272 |
<span class="co1">// instance, by calling the addAttrs method.</span> |
|
|
273 |
<span class="kw2">var</span> attrs <span class="sy0">=</span> <span class="br0">{</span> |
|
|
274 |
<span class="co1">// Add 3 attributes, foo, bar and foobar</span> |
|
|
275 |
<span class="st0">"foo"</span> <span class="sy0">:</span> <span class="br0">{</span> |
|
|
276 |
value<span class="sy0">:</span><span class="nu0">5</span> |
|
|
277 |
<span class="br0">}</span><span class="sy0">,</span> |
|
|
278 |
|
|
|
279 |
<span class="st0">"bar"</span> <span class="sy0">:</span> <span class="br0">{</span> |
|
|
280 |
value<span class="sy0">:</span><span class="st0">"Hello World!"</span> |
|
|
281 |
<span class="br0">}</span><span class="sy0">,</span> |
|
|
282 |
|
|
|
283 |
<span class="st0">"foobar"</span> <span class="sy0">:</span> <span class="br0">{</span> |
|
|
284 |
value<span class="sy0">:</span><span class="kw2">true</span> |
|
|
285 |
<span class="br0">}</span> |
|
|
286 |
<span class="br0">}</span><span class="sy0">;</span> |
|
|
287 |
|
|
|
288 |
<span class="kw1">this</span>.<span class="me1">addAttrs</span><span class="br0">(</span>attrs<span class="sy0">,</span> cfg<span class="br0">)</span><span class="sy0">;</span> |
|
|
289 |
<span class="br0">}</span> |
|
|
290 |
|
|
|
291 |
<span class="co1">// Augment custom class with Attribute </span> |
|
|
292 |
Y.<span class="me1">augment</span><span class="br0">(</span>MyClass<span class="sy0">,</span> Y.<span class="me1">Attribute</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax3-plain">// Setup custom class which we want to add managed attribute support to |
|
|
293 |
function MyClass(cfg) { |
|
|
294 |
|
|
|
295 |
// When constructed, setup the initial attributes for the |
|
|
296 |
// instance, by calling the addAttrs method. |
|
|
297 |
var attrs = { |
|
|
298 |
// Add 3 attributes, foo, bar and foobar |
|
|
299 |
"foo" : { |
|
|
300 |
value:5 |
|
|
301 |
}, |
|
|
302 |
|
|
|
303 |
"bar" : { |
|
|
304 |
value:"Hello World!" |
|
|
305 |
}, |
|
|
306 |
|
|
|
307 |
"foobar" : { |
|
|
308 |
value:true |
|
|
309 |
} |
|
|
310 |
}; |
|
|
311 |
|
|
|
312 |
this.addAttrs(attrs, cfg); |
|
|
313 |
} |
|
|
314 |
|
|
|
315 |
// Augment custom class with Attribute |
|
|
316 |
Y.augment(MyClass, Y.Attribute);</textarea></div> |
|
|
317 |
<p>The <code>addAttrs</code> method, in addition to the default attribute configuration, also accepts an object literal (associative array) of name/value pairs which can be used to over-ride the default initial values of the attributes. This is useful for classes which wish to allow the user the set the value of attributes as part of object construction, as shown by the use of the <code>cfg</code> argument above.</p> |
|
|
318 |
|
|
|
319 |
<p> |
|
|
320 |
As mentioned previously, if you expect your class to be extended, <a href="http://developer.yahoo.com/yui/3/base/index.html">Base</a> provides a more convenient way for you to define the same attribute configuration statically for your class, so that it can be easily modified by extended classes. Base will take care of isolating the static configuration, so that it isn't modified across instances. |
|
|
321 |
</p> |
|
|
322 |
|
|
|
323 |
<h4>Using Attributes</h4> |
|
|
324 |
|
|
|
325 |
<p>Now that we have <code>MyClass</code> defined with a set of attributes it supports, users can get and set attribute values on instances of <code>MyClass</code>:</p> |
|
|
326 |
|
|
|
327 |
<p>We construct the first instance, <code>o1</code>, without setting any initial attribute values in the constructor, but use Attribute's <code>set()</code> method to set values after construction:</p> |
|
|
328 |
|
|
|
329 |
<div id="syntax4" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="co1">// Create a new instance, but don't provide any initial attribute values.</span></div></li><li class="li1"><div class="de1"><span class="kw2">var</span> o1 <span class="sy0">=</span> <span class="kw2">new</span> MyClass<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="co1">// Display current values</span></div></li><li class="li2"><div class="de2">displayValues<span class="br0">(</span>o1<span class="sy0">,</span> <span class="st0">"o1 with default values, set during construction"</span><span class="sy0">,</span> </div></li><li class="li1"><div class="de1"> <span class="st0">"#createo1 .example-out"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1">...</div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"><span class="co1">// Update values, using the "set" method</span></div></li><li class="li1"><div class="de1">o1.<span class="me1">set</span><span class="br0">(</span><span class="st0">"foo"</span><span class="sy0">,</span> <span class="nu0">10</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">o1.<span class="me1">set</span><span class="br0">(</span><span class="st0">"bar"</span><span class="sy0">,</span> <span class="st0">"Hello New World!"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">o1.<span class="me1">set</span><span class="br0">(</span><span class="st0">"foobar"</span><span class="sy0">,</span> <span class="kw2">false</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2">displayValues<span class="br0">(</span>o1<span class="sy0">,</span> <span class="st0">"o1 values updated using set, after construction"</span><span class="sy0">,</span> </div></li><li class="li1"><div class="de1"> <span class="st0">"#updateo1 .example-out"</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="co1">// Create a new instance, but don't provide any initial attribute values.</span> |
|
|
330 |
<span class="kw2">var</span> o1 <span class="sy0">=</span> <span class="kw2">new</span> MyClass<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
331 |
|
|
|
332 |
<span class="co1">// Display current values</span> |
|
|
333 |
displayValues<span class="br0">(</span>o1<span class="sy0">,</span> <span class="st0">"o1 with default values, set during construction"</span><span class="sy0">,</span> |
|
|
334 |
<span class="st0">"#createo1 .example-out"</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
335 |
|
|
|
336 |
... |
|
|
337 |
|
|
|
338 |
<span class="co1">// Update values, using the "set" method</span> |
|
|
339 |
o1.<span class="me1">set</span><span class="br0">(</span><span class="st0">"foo"</span><span class="sy0">,</span> <span class="nu0">10</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
340 |
o1.<span class="me1">set</span><span class="br0">(</span><span class="st0">"bar"</span><span class="sy0">,</span> <span class="st0">"Hello New World!"</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
341 |
o1.<span class="me1">set</span><span class="br0">(</span><span class="st0">"foobar"</span><span class="sy0">,</span> <span class="kw2">false</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
342 |
|
|
|
343 |
displayValues<span class="br0">(</span>o1<span class="sy0">,</span> <span class="st0">"o1 values updated using set, after construction"</span><span class="sy0">,</span> |
|
|
344 |
<span class="st0">"#updateo1 .example-out"</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax4-plain">// Create a new instance, but don't provide any initial attribute values. |
|
|
345 |
var o1 = new MyClass(); |
|
|
346 |
|
|
|
347 |
// Display current values |
|
|
348 |
displayValues(o1, "o1 with default values, set during construction", |
|
|
349 |
"#createo1 .example-out"); |
|
|
350 |
|
|
|
351 |
... |
|
|
352 |
|
|
|
353 |
// Update values, using the "set" method |
|
|
354 |
o1.set("foo", 10); |
|
|
355 |
o1.set("bar", "Hello New World!"); |
|
|
356 |
o1.set("foobar", false); |
|
|
357 |
|
|
|
358 |
displayValues(o1, "o1 values updated using set, after construction", |
|
|
359 |
"#updateo1 .example-out");</textarea></div> |
|
|
360 |
<p>For the second instance that, <code>o2</code> we set the initial values of the attributes, using the constructor configuration argument:</p> |
|
|
361 |
|
|
|
362 |
<div id="syntax5" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="kw2">var</span> o2 <span class="sy0">=</span> <span class="kw2">new</span> MyClass<span class="br0">(</span><span class="br0">{</span></div></li><li class="li1"><div class="de1"> foo<span class="sy0">:</span> <span class="nu0">7</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> bar<span class="sy0">:</span> <span class="st0">"Aloha World!"</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> foobar<span class="sy0">:</span> <span class="kw2">false</span></div></li><li class="li2"><div class="de2"><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="kw2">var</span> o2 <span class="sy0">=</span> <span class="kw2">new</span> MyClass<span class="br0">(</span><span class="br0">{</span> |
|
|
363 |
foo<span class="sy0">:</span> <span class="nu0">7</span><span class="sy0">,</span> |
|
|
364 |
bar<span class="sy0">:</span> <span class="st0">"Aloha World!"</span><span class="sy0">,</span> |
|
|
365 |
foobar<span class="sy0">:</span> <span class="kw2">false</span> |
|
|
366 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax5-plain">var o2 = new MyClass({ |
|
|
367 |
foo: 7, |
|
|
368 |
bar: "Aloha World!", |
|
|
369 |
foobar: false |
|
|
370 |
});</textarea></div> |
|
|
371 |
<p>The <code>displayValues()</code> method uses Attribute's <code>get()</code> method to retrieve the current values of the attributes, to display:</p> |
|
|
372 |
|
|
|
373 |
<div id="syntax6" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="kw2">function</span> displayValues<span class="br0">(</span>o<span class="sy0">,</span> title<span class="sy0">,</span> node<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> str <span class="sy0">=</span> </div></li><li class="li1"><div class="de1"> <span class="st0">'<div class="myclass"><div class="myclass-title">'</span> </div></li><li class="li1"><div class="de1"> <span class="sy0">+</span> title <span class="sy0">+</span> </div></li><li class="li2"><div class="de2"> <span class="st0">':</div><ul class="myclass-attrs"><li>foo:'</span> </div></li><li class="li1"><div class="de1"> <span class="sy0">+</span> o.<span class="me1">get</span><span class="br0">(</span><span class="st0">"foo"</span><span class="br0">)</span> </div></li><li class="li1"><div class="de1"> <span class="sy0">+</span> <span class="st0">'</li><li>bar:'</span></div></li><li class="li1"><div class="de1"> <span class="sy0">+</span> o.<span class="me1">get</span><span class="br0">(</span><span class="st0">"bar"</span><span class="br0">)</span></div></li><li class="li1"><div class="de1"> <span class="sy0">+</span> <span class="st0">'</li><li>foobar:'</span></div></li><li class="li2"><div class="de2"> <span class="sy0">+</span> o.<span class="me1">get</span><span class="br0">(</span><span class="st0">"foobar"</span><span class="br0">)</span></div></li><li class="li1"><div class="de1"> <span class="sy0">+</span> <span class="st0">'</li></ul></div>'</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// Use the Y.one() method to get the first element which </span></div></li><li class="li1"><div class="de1"> <span class="co1">// matches the selector passed in, to output the string to... </span></div></li><li class="li2"><div class="de2"> Y.<span class="me1">one</span><span class="br0">(</span>node<span class="br0">)</span>.<span class="me1">set</span><span class="br0">(</span><span class="st0">"innerHTML"</span><span class="sy0">,</span> str<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="kw2">function</span> displayValues<span class="br0">(</span>o<span class="sy0">,</span> title<span class="sy0">,</span> node<span class="br0">)</span> <span class="br0">{</span> |
|
|
374 |
<span class="kw2">var</span> str <span class="sy0">=</span> |
|
|
375 |
<span class="st0">'<div class="myclass"><div class="myclass-title">'</span> |
|
|
376 |
<span class="sy0">+</span> title <span class="sy0">+</span> |
|
|
377 |
<span class="st0">':</div><ul class="myclass-attrs"><li>foo:'</span> |
|
|
378 |
<span class="sy0">+</span> o.<span class="me1">get</span><span class="br0">(</span><span class="st0">"foo"</span><span class="br0">)</span> |
|
|
379 |
<span class="sy0">+</span> <span class="st0">'</li><li>bar:'</span> |
|
|
380 |
<span class="sy0">+</span> o.<span class="me1">get</span><span class="br0">(</span><span class="st0">"bar"</span><span class="br0">)</span> |
|
|
381 |
<span class="sy0">+</span> <span class="st0">'</li><li>foobar:'</span> |
|
|
382 |
<span class="sy0">+</span> o.<span class="me1">get</span><span class="br0">(</span><span class="st0">"foobar"</span><span class="br0">)</span> |
|
|
383 |
<span class="sy0">+</span> <span class="st0">'</li></ul></div>'</span><span class="sy0">;</span> |
|
|
384 |
|
|
|
385 |
<span class="co1">// Use the Y.one() method to get the first element which </span> |
|
|
386 |
<span class="co1">// matches the selector passed in, to output the string to... </span> |
|
|
387 |
Y.<span class="me1">one</span><span class="br0">(</span>node<span class="br0">)</span>.<span class="me1">set</span><span class="br0">(</span><span class="st0">"innerHTML"</span><span class="sy0">,</span> str<span class="br0">)</span><span class="sy0">;</span> |
|
|
388 |
<span class="br0">}</span></pre></div><textarea id="syntax6-plain">function displayValues(o, title, node) { |
|
|
389 |
var str = |
|
|
390 |
'<div class="myclass"><div class="myclass-title">' |
|
|
391 |
+ title + |
|
|
392 |
':</div><ul class="myclass-attrs"><li>foo:' |
|
|
393 |
+ o.get("foo") |
|
|
394 |
+ '</li><li>bar:' |
|
|
395 |
+ o.get("bar") |
|
|
396 |
+ '</li><li>foobar:' |
|
|
397 |
+ o.get("foobar") |
|
|
398 |
+ '</li></ul></div>'; |
|
|
399 |
|
|
|
400 |
// Use the Y.one() method to get the first element which |
|
|
401 |
// matches the selector passed in, to output the string to... |
|
|
402 |
Y.one(node).set("innerHTML", str); |
|
|
403 |
}</textarea></div> </div> |
|
|
404 |
<div class="yui-u sidebar"> |
|
|
405 |
|
|
|
406 |
|
|
|
407 |
<div id="examples" class="mod box4"> |
|
|
408 |
<div class="hd"> |
|
|
409 |
<h4> |
|
|
410 |
Attribute Examples:</h4> |
|
|
411 |
</div> |
|
|
412 |
<div class="bd"> |
|
|
413 |
<ul> |
|
|
414 |
<li class='selected'><a href='../attribute/attribute-basic.html'>Basic Attribute Configuration</a></li><li><a href='../attribute/attribute-rw.html'>Read-Only and Write-Once Attributes</a></li><li><a href='../attribute/attribute-event.html'>Attribute Change Events</a></li><li><a href='../attribute/attribute-basic-speeddate.html'>Attribute Based Speed Dating</a></li><li><a href='../attribute/attribute-event-speeddate.html'>Attribute Event Based Speed Dating</a></li><li><a href='../attribute/attribute-getset.html'>Attribute Getters, Setters and Validators</a></li> </ul> |
|
|
415 |
</div> |
|
|
416 |
</div> |
|
|
417 |
|
|
|
418 |
<div class="mod box4"> |
|
|
419 |
<div class="hd"> |
|
|
420 |
<h4>More Attribute Resources:</h4> |
|
|
421 |
</div> |
|
|
422 |
<div class="bd"> |
|
|
423 |
<ul> |
|
|
424 |
<!-- <li><a href="http://developer.yahoo.com/yui/attribute/">User's Guide</a> (external)</li> --> |
|
|
425 |
<li><a href="../../api/module_attribute.html">API Documentation</a></li></ul> |
|
|
426 |
</div> |
|
|
427 |
</div> |
|
|
428 |
</div> |
|
|
429 |
</div> |
|
|
430 |
|
|
|
431 |
</div> |
|
|
432 |
</div> |
|
|
433 |
|
|
|
434 |
|
|
|
435 |
<div class="yui-b toc3" id="tocWrapper"> |
|
|
436 |
<!-- TABLE OF CONTENTS --> |
|
|
437 |
<div id="toc"> |
|
|
438 |
|
|
|
439 |
<ul> |
|
|
440 |
<li class="sect first">YUI 3 Resources</li><li class="item"><a title="YUI 3 -- Yahoo! User Interface (YUI) Library" href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site</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="YUI 3 Dependency Configurator -- configure your custom YUI implementation" href="http://developer.yahoo.com/yui/3/configurator">YUI 3 Dependency Configurator</a></li><li class="item"><a title="The YUI 3 Forum on YUILibrary.com" href="http://yuilibrary.com/forum/viewforum.php?f=15">YUI 3 Forums (external)</a></li><li class="item"><a title="Found a bug or a missing feature? Let us know on YUILibrary.com." href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License</a></li><li class="item"><a title="Download and fork the YUI project on GitHub" href="http://github.com/yui">YUI on Github</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI Global Object - Functional Examples" href="../../examples/yui/index.html">YUI Global Object</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="Plugin - Functional Examples" href="../../examples/plugin/index.html">Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget <img src='http://l.yimg.com/a/i/not/beta_1.gif'></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="AsyncQueue - Functional Examples" href="../../examples/async-queue/index.html">AsyncQueue</a></li><li class="item"><a title="Browser History - Functional Examples" href="../../examples/history/index.html">Browser History</a></li><li class="item"><a title="Cache - Functional Examples" href="../../examples/cache/index.html">Cache</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="DataSchema - Functional Examples" href="../../examples/dataschema/index.html">DataSchema <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Drag & Drop - Functional Examples" href="../../examples/dd/index.html">Drag & Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="ImageLoader - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</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="Stylesheet - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="sect">YUI 3 Widgets - Examples</li><li class="item"><a title="Overlay - Functional Examples" href="../../examples/overlay/index.html">Overlay <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Node Plugins - Examples</li><li class="item"><a title="FocusManager Node Plugin - Functional Examples" href="../../examples/node-focusmanager/index.html">FocusManager Node Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></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 Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="sect">YUI 3 Developer Tools - Examples</li><li class="item"><a title="Console - Functional Examples" href="../../examples/console/index.html">Console <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Console Filters Plugin- Functional Examples" href="../../examples/console-filters/index.html">Plugin.ConsoleFilters <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Profiler - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="Test - Functional Examples" href="../../examples/test/index.html">Test</a></li><li class="sect">Other Useful YUI 3 Resources</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="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></ul> |
|
|
441 |
</div> |
|
|
442 |
</div> |
|
|
443 |
</div><!--closes bd--> |
|
|
444 |
|
|
|
445 |
<div id="ft"> |
|
|
446 |
<p class="first">Copyright © 2009 Yahoo! Inc. All rights reserved.</p> |
|
|
447 |
<p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - |
|
|
448 |
<a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - |
|
|
449 |
<a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - |
|
|
450 |
<a href="http://careers.yahoo.com/">Job Openings</a></p> |
|
|
451 |
</div> |
|
|
452 |
</div> |
|
|
453 |
<script language="javascript"> |
|
|
454 |
var yuiConfig = {base:"../../build/", timeout: 10000}; |
|
|
455 |
</script> |
|
|
456 |
<script src="../../assets/syntax.js"></script> |
|
|
457 |
<script src="../../assets/dpSyntaxHighlighter.js"></script> |
|
|
458 |
<script language="javascript"> |
|
|
459 |
dp.SyntaxHighlighter.HighlightAll('code'); |
|
|
460 |
</script> |
|
|
461 |
</body> |
|
|
462 |
</html> |