|
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: Attribute Based Speed Dating</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 #speeddate h1 { |
|
21 font-size: 108%; |
|
22 color:#000; |
|
23 margin-bottom:2em; |
|
24 } |
|
25 |
|
26 #john { |
|
27 margin-bottom:10px; |
|
28 } |
|
29 |
|
30 .sd-nametag { |
|
31 border:1px solid #000; |
|
32 text-align:center; |
|
33 width:25em; |
|
34 margin:20px; |
|
35 |
|
36 background-color:#00f; |
|
37 |
|
38 border-radius: 10px; |
|
39 -webkit-border-radius: 10px; |
|
40 -moz-border-radius: 10px; |
|
41 |
|
42 box-shadow: 3px 3px 3px #888; |
|
43 -moz-box-shadow: 3px 3px 3px #888; |
|
44 -webkit-box-shadow: 3px 3px 3px #888; |
|
45 } |
|
46 |
|
47 .sd-nametag .sd-hd, .sd-nametag .sd-ft { |
|
48 padding:5px; |
|
49 text-align:center; |
|
50 font-size:108%; |
|
51 font-weight:900; |
|
52 color:#fff; |
|
53 } |
|
54 |
|
55 .sd-nametag .sd-hd { |
|
56 border-top-right-radius: 10px; |
|
57 border-top-left-radius: 10px; |
|
58 -moz-border-radius-topright: 10px; |
|
59 -moz-border-radius-topleft: 10px; |
|
60 -webkit-border-top-right-radius: 10px; |
|
61 -webkit-border-top-left-radius: 10px; |
|
62 } |
|
63 |
|
64 .sd-nametag .sd-ft { |
|
65 border-bottom-right-radius: 10px; |
|
66 border-bottom-left-radius: 10px; |
|
67 -moz-border-radius-bottomright: 10px; |
|
68 -moz-border-radius-bottomleft: 10px; |
|
69 -webkit-border-bottom-right-radius: 10px; |
|
70 -webkit-border-bottom-left-radius: 10px; |
|
71 } |
|
72 |
|
73 .sd-nametag .sd-bd { |
|
74 background-color:#fff; |
|
75 padding:1em; |
|
76 } |
|
77 |
|
78 .sd-nametag .sd-bd .sd-name, |
|
79 .sd-nametag .sd-bd .sd-personality { |
|
80 font-size:108%; |
|
81 font-weight:900; |
|
82 font-family:monospace; |
|
83 text-decoration:underline; |
|
84 color:#00a; |
|
85 } |
|
86 |
|
87 .sd-nametag .sd-bd .sd-personality.sd-max { |
|
88 color:#f00; |
|
89 } |
|
90 |
|
91 </style> |
|
92 |
|
93 </head> |
|
94 <body id="yahoo-com" class=" yui-skin-sam"> |
|
95 <div id="custom-doc" class="yui-t2"> |
|
96 <div id="hd"> |
|
97 <div id="ygunav"> |
|
98 <p> |
|
99 <em> |
|
100 <a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i> |
|
101 </em> |
|
102 </p> |
|
103 <form action="http://search.yahoo.com/search" id="sitesearchform"> |
|
104 <input name="vs" type="hidden" value="developer.yahoo.com"> |
|
105 <input name="vs" type="hidden" value="yuiblog.com"> |
|
106 <div id="sitesearch"> |
|
107 <label for="searchinput">Site Search (YDN & YUIBlog): </label> |
|
108 <input type="text" id="searchinput" name="p"> |
|
109 <input type="submit" value="Search" id="searchsubmit" class="ygbt"> |
|
110 </div> |
|
111 </form> |
|
112 </div> |
|
113 <div id="ygma"><a href="../../"><img src="../../assets/logo.gif" border="0" width="200" height="93"></a></div> |
|
114 <div id="pagetitle"><h1>YUI Library Examples: Attribute: Attribute Based Speed Dating</h1></div> |
|
115 </div> |
|
116 <div id="bd"> |
|
117 |
|
118 |
|
119 <div id="yui-main"> |
|
120 <div class="yui-b"> |
|
121 <div class="yui-ge"> |
|
122 <div class="yui-u first example" id="main"> |
|
123 |
|
124 <h2>Attribute: Attribute Based Speed Dating</h2> |
|
125 |
|
126 <div id="example" class="promo"> |
|
127 <div class="example-intro"> |
|
128 <p> |
|
129 This example builds on the <a href="attribute-basic.html">"Basic Configuration" example</a>, |
|
130 showing how you can use attribute to model objects in your application. |
|
131 </p> |
|
132 |
|
133 <p> |
|
134 As with the basic example, it is geared towards users who want to create their own classes from |
|
135 scratch and add attribute support. In most cases you should consider extending the |
|
136 <a href="http://developer.yahoo.com/yui/3/base/index.html"><code>Base</code></a> class when you need attribute support, instead |
|
137 of augmenting Attribute directly. <a href="http://developer.yahoo.com/yui/3/base/index.html"><code>Base</code></a> does the work described |
|
138 in this example for you, in addition to making it easier for users to extend you class. |
|
139 </p> </div> |
|
140 |
|
141 <div class="module example-container "> |
|
142 <div class="hd exampleHd"> |
|
143 <p class="newWindowButton yui-skin-sam"> |
|
144 <a href="attribute-basic-speeddate_clean.html" target="_blank">View example in new window.</a> |
|
145 </p> |
|
146 </div> <div id="example-canvas" class="bd"> |
|
147 |
|
148 |
|
149 <!--BEGIN SOURCE CODE FOR EXAMPLE =============================== --> |
|
150 |
|
151 <div id="speeddate"> |
|
152 |
|
153 <h1>Speed Dating With Attributes</h1> |
|
154 |
|
155 <div id="john"> |
|
156 <button type="button" class="hi">Hi I'm John</button> |
|
157 <button type="button" class="taken" disabled="disabled">I like Jane</button> |
|
158 <div class="shirt"></div> |
|
159 </div> |
|
160 |
|
161 <div id="jane"> |
|
162 <button type="button" disabled="disabled" class="hi">Hey, I'm Jane</button> |
|
163 <button type="button" class="upgrade" disabled="disabled">No way!, I save whales too!</button> |
|
164 <button type="button" class="taken" disabled="disabled">I like John</button> |
|
165 <div class="shirt"></div> |
|
166 </div> |
|
167 </div> |
|
168 |
|
169 <script type="text/javascript"> |
|
170 |
|
171 // Get a new instance of YUI and |
|
172 // load it with the required set of modules |
|
173 |
|
174 YUI({base:"../../build/", timeout: 10000}).use("node", "attribute", "substitute", function(Y) { |
|
175 |
|
176 // Setup custom class which we want to |
|
177 // add managed attribute support to |
|
178 |
|
179 function SpeedDater(cfg) { |
|
180 |
|
181 // When constructed, setup the initial attributes for the |
|
182 // instance, by calling the addAttrs method. |
|
183 |
|
184 var attrs = { |
|
185 // Add 3 attributes: name, personality, available |
|
186 name : { |
|
187 writeOnce:true |
|
188 }, |
|
189 |
|
190 personality : { |
|
191 value:50 |
|
192 }, |
|
193 |
|
194 available : { |
|
195 value:true |
|
196 } |
|
197 }; |
|
198 |
|
199 this.addAttrs(attrs, cfg); |
|
200 } |
|
201 |
|
202 // Setup static property to hold attribute config |
|
203 |
|
204 SpeedDater.NAMETAG = '<div class="sd-nametag"><div class="sd-hd">Hello!</div><div class="sd-bd">I\'m <span class="sd-name">{name}</span> and my PersonalityQuotientIndex is <span class="sd-personality">{personality}</span></div><div class="sd-ft sd-availability">{available}</div></div>'; |
|
205 |
|
206 SpeedDater.prototype.applyNameTag = function(where) { |
|
207 |
|
208 var tokens = { |
|
209 name: this.get("name"), |
|
210 available: (this.get("available")) ? "I'm still looking " : "Sorry, I'm taken", |
|
211 personality: this.get("personality") |
|
212 }; |
|
213 |
|
214 this.nameTag = Y.Node.create(Y.substitute(SpeedDater.NAMETAG, tokens)); |
|
215 |
|
216 Y.one(where).appendChild(this.nameTag); |
|
217 }; |
|
218 |
|
219 SpeedDater.prototype.updateNameTag = function() { |
|
220 |
|
221 var taken = (this.get("available")) ? "I'm still looking " : "Sorry, I'm taken"; |
|
222 var name = this.get("name"); |
|
223 var personality = this.get("personality"); |
|
224 |
|
225 this.nameTag.query(".sd-name").set("innerHTML", name); |
|
226 this.nameTag.query(".sd-availability").set("innerHTML", taken); |
|
227 |
|
228 var personalityEl = this.nameTag.query(".sd-personality"); |
|
229 personalityEl.set("innerHTML", personality); |
|
230 |
|
231 if (personality > 90) { |
|
232 personalityEl.addClass("sd-max"); |
|
233 } |
|
234 } |
|
235 |
|
236 // Augment custom class with Attribute |
|
237 Y.augment(SpeedDater, Y.Attribute); |
|
238 |
|
239 var john, jane; |
|
240 |
|
241 Y.on("click", function() { |
|
242 |
|
243 if (!john) { |
|
244 |
|
245 // Set both name and personality during construction |
|
246 john = new SpeedDater({ |
|
247 name: "John", |
|
248 personality: 76.43 |
|
249 }); |
|
250 john.applyNameTag("#john .shirt"); |
|
251 |
|
252 Y.one("#jane .hi").set("disabled", false); |
|
253 } |
|
254 |
|
255 }, "#john .hi"); |
|
256 |
|
257 Y.on("click", function() { |
|
258 |
|
259 if (!jane) { |
|
260 |
|
261 // Set name during construction |
|
262 jane = new SpeedDater({ |
|
263 name: "Jane" |
|
264 }); |
|
265 |
|
266 // Set personality after construction |
|
267 jane.set("personality", 82); |
|
268 |
|
269 jane.applyNameTag("#jane .shirt"); |
|
270 |
|
271 Y.all("#jane button").set("disabled", false); |
|
272 Y.all("#john button").set("disabled", false); |
|
273 } |
|
274 |
|
275 }, "#jane .hi"); |
|
276 |
|
277 Y.on("click", function() { |
|
278 |
|
279 john.set("available", false); |
|
280 john.updateNameTag(); |
|
281 |
|
282 }, "#john .taken"); |
|
283 |
|
284 Y.on("click", function() { |
|
285 |
|
286 jane.set("available", false); |
|
287 jane.updateNameTag(); |
|
288 |
|
289 }, "#jane .taken"); |
|
290 |
|
291 Y.on("click", function() { |
|
292 |
|
293 jane.set("personality", 98); |
|
294 jane.updateNameTag(); |
|
295 |
|
296 }, "#jane .upgrade"); |
|
297 |
|
298 }); |
|
299 </script> |
|
300 |
|
301 <!--END SOURCE CODE FOR EXAMPLE =============================== --> |
|
302 |
|
303 |
|
304 </div> |
|
305 </div> |
|
306 </div> |
|
307 |
|
308 <h3>Setting Up a SpeedDater Class</h3> |
|
309 |
|
310 <p>In this example, we'll create a custom <code>SpeedDater</code> class, and show how you can use attributes to manage the state for a Speed Dater. |
|
311 In the <a href="attribute-event-speeddate.html">"Attribute Event Based Speed Dating" example</a> we'll modify this example to leverage attribute change events.</p> |
|
312 |
|
313 <h4>Creating A YUI Instance</h4> |
|
314 |
|
315 <p>As with the other attribute <a href="attribute-basic.html">examples</a>, we'll setup our own instance of the YUI object and request the modules we require using the code pattern shown below:</p> |
|
316 |
|
317 <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, populated</span></div></li><li class="li2"><div class="de2"> <span class="co1">// with the modules we asked for (e.g. Y.Attribute, Y.Node etc.)</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> |
|
318 |
|
319 <span class="co1">// Create our local YUI instance, to avoid</span> |
|
320 <span class="co1">// modifying the global YUI object</span> |
|
321 |
|
322 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> |
|
323 |
|
324 <span class="co1">// Example code is written inside this function,</span> |
|
325 <span class="co1">// which gets passed our own YUI instance, Y, populated</span> |
|
326 <span class="co1">// with the modules we asked for (e.g. Y.Attribute, Y.Node etc.)</span> |
|
327 |
|
328 <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span> |
|
329 <span class="sy0"></</span>script<span class="sy0">></span></pre></div><textarea id="syntax1-plain"><script type="text/javascript"> |
|
330 |
|
331 // Create our local YUI instance, to avoid |
|
332 // modifying the global YUI object |
|
333 |
|
334 YUI({...}).use("attribute", "node", ... function(Y) { |
|
335 |
|
336 // Example code is written inside this function, |
|
337 // which gets passed our own YUI instance, Y, populated |
|
338 // with the modules we asked for (e.g. Y.Attribute, Y.Node etc.) |
|
339 |
|
340 }); |
|
341 </script></textarea></div> |
|
342 <h4>Defining The SpeedDater Class</h4> |
|
343 |
|
344 <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>SpeedDater</code>. |
|
345 We then augment <code>SpeedDater</code> with <code>Y.Attribute</code>, so that it receives all of <code>Attribute's</code> methods, in addition to any it may defined itself:</p> |
|
346 |
|
347 <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="co1">// Setup custom class which we want to add attribute support to</span></div></li><li class="li1"><div class="de1"><span class="kw2">function</span> SpeedDater<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="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"><span class="co1">// Augment custom class with Attribute</span></div></li><li class="li1"><div class="de1">Y.<span class="me1">augment</span><span class="br0">(</span>SpeedDater<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 attribute support to</span> |
|
348 <span class="kw2">function</span> SpeedDater<span class="br0">(</span>cfg<span class="br0">)</span> <span class="br0">{</span> |
|
349 ... |
|
350 <span class="br0">}</span> |
|
351 |
|
352 <span class="co1">// Augment custom class with Attribute</span> |
|
353 Y.<span class="me1">augment</span><span class="br0">(</span>SpeedDater<span class="sy0">,</span> Y.<span class="me1">Attribute</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax2-plain">// Setup custom class which we want to add attribute support to |
|
354 function SpeedDater(cfg) { |
|
355 ... |
|
356 } |
|
357 |
|
358 // Augment custom class with Attribute |
|
359 Y.augment(SpeedDater, Y.Attribute);</textarea></div> |
|
360 <h4>Adding Attributes</h4> |
|
361 |
|
362 <p> |
|
363 We can now set up any attributes we need for <code>SpeedDater</code> using Attribute's <code>addAttrs()</code> method. |
|
364 |
|
365 For this example we add 3 attributes - <code>name</code>, <code>personality</code>, and <code>available</code>. |
|
366 |
|
367 We provide an default initial <code>value</code> for <code>personality</code> and <code>available</code>, but don't have anything for <code>name</code>. |
|
368 |
|
369 As mentioned in the basic example, the same object literal we use to provide the initial value for the attribute can also be used to configure attribute properties such as <code>readOnly</code> or |
|
370 <code>writeOnce</code>, and to define <code>getter</code>, <code>setter</code> and <code>validator</code> methods for the attribute. For <code>name</code>, we configure it to be <code>writeOnce</code>, |
|
371 meaning that it's value can be set once by the user, but not modified after that single set. |
|
372 </p> |
|
373 |
|
374 <p> |
|
375 The default set of attributes which <code>SpeedDater</code> will support is passed to <code>addAttrs</code> to set up the attributes for each instance during construction. |
|
376 </p> |
|
377 |
|
378 <p> |
|
379 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 modified by extended classes. |
|
380 Base will take care of isolating the static configuration, so that it isn't modified across instances. |
|
381 </p> |
|
382 |
|
383 The complete definition for <code>SpeedDater</code> is shown below:</p> |
|
384 |
|
385 <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 </span></div></li><li class="li1"><div class="de1"><span class="co1">// add managed attribute support to</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="kw2">function</span> SpeedDater<span class="br0">(</span>cfg<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="co1">// When constructed, setup the initial attributes for the</span></div></li><li class="li1"><div class="de1"> <span class="co1">// instance, by calling the addAttrs method.</span></div></li><li class="li1"><div class="de1"> </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="li2"><div class="de2"> <span class="co1">// Add 3 attributes: name, personality, available</span></div></li><li class="li1"><div class="de1"> <span class="kw3">name</span> <span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> writeOnce<span class="sy0">:</span><span class="kw2">true</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> personality <span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> value<span class="sy0">:</span><span class="nu0">50</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> available <span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> 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="li1"><div class="de1"> </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="li2"><div class="de2"><span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1">SpeedDater.<span class="me1">prototype</span>.<span class="me1">applyNameTag</span> <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</span>where<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="co1">// Method used to render the visual representation of a </span></div></li><li class="li1"><div class="de1"> <span class="co1">// SpeedDater object's state (in this case as a name tag)</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">SpeedDater.<span class="me1">prototype</span>.<span class="me1">updateNameTag</span> <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="co1">// Method used to update the rendered state of SpeedDater in the DOM.</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"><span class="co1">// Template to use form the markup </span></div></li><li class="li1"><div class="de1">SpeedDater.<span class="me1">NAMETAG</span> <span class="sy0">=</span> <span class="st0">"<div class="</span>sd<span class="sy0">-</span>nametag<span class="st0">"><div class="</span>sd<span class="sy0">-</span>hd<span class="st0">">Hello!</div>... </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">// Augment custom class with Attribute</span></div></li><li class="li2"><div class="de2">Y.<span class="me1">augment</span><span class="br0">(</span>SpeedDater<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 </span> |
|
386 <span class="co1">// add managed attribute support to</span> |
|
387 |
|
388 <span class="kw2">function</span> SpeedDater<span class="br0">(</span>cfg<span class="br0">)</span> <span class="br0">{</span> |
|
389 |
|
390 <span class="co1">// When constructed, setup the initial attributes for the</span> |
|
391 <span class="co1">// instance, by calling the addAttrs method.</span> |
|
392 |
|
393 <span class="kw2">var</span> attrs <span class="sy0">=</span> <span class="br0">{</span> |
|
394 <span class="co1">// Add 3 attributes: name, personality, available</span> |
|
395 <span class="kw3">name</span> <span class="sy0">:</span> <span class="br0">{</span> |
|
396 writeOnce<span class="sy0">:</span><span class="kw2">true</span> |
|
397 <span class="br0">}</span><span class="sy0">,</span> |
|
398 |
|
399 personality <span class="sy0">:</span> <span class="br0">{</span> |
|
400 value<span class="sy0">:</span><span class="nu0">50</span> |
|
401 <span class="br0">}</span><span class="sy0">,</span> |
|
402 |
|
403 available <span class="sy0">:</span> <span class="br0">{</span> |
|
404 value<span class="sy0">:</span><span class="kw2">true</span> |
|
405 <span class="br0">}</span> |
|
406 <span class="br0">}</span><span class="sy0">;</span> |
|
407 |
|
408 <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> |
|
409 <span class="br0">}</span> |
|
410 |
|
411 SpeedDater.<span class="me1">prototype</span>.<span class="me1">applyNameTag</span> <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</span>where<span class="br0">)</span> <span class="br0">{</span> |
|
412 <span class="co1">// Method used to render the visual representation of a </span> |
|
413 <span class="co1">// SpeedDater object's state (in this case as a name tag)</span> |
|
414 <span class="br0">}</span><span class="sy0">;</span> |
|
415 |
|
416 SpeedDater.<span class="me1">prototype</span>.<span class="me1">updateNameTag</span> <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span> |
|
417 <span class="co1">// Method used to update the rendered state of SpeedDater in the DOM.</span> |
|
418 <span class="br0">}</span> |
|
419 |
|
420 <span class="co1">// Template to use form the markup </span> |
|
421 SpeedDater.<span class="me1">NAMETAG</span> <span class="sy0">=</span> <span class="st0">"<div class="</span>sd<span class="sy0">-</span>nametag<span class="st0">"><div class="</span>sd<span class="sy0">-</span>hd<span class="st0">">Hello!</div>... </div>"</span><span class="sy0">;</span> |
|
422 |
|
423 <span class="co1">// Augment custom class with Attribute</span> |
|
424 Y.<span class="me1">augment</span><span class="br0">(</span>SpeedDater<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 |
|
425 // add managed attribute support to |
|
426 |
|
427 function SpeedDater(cfg) { |
|
428 |
|
429 // When constructed, setup the initial attributes for the |
|
430 // instance, by calling the addAttrs method. |
|
431 |
|
432 var attrs = { |
|
433 // Add 3 attributes: name, personality, available |
|
434 name : { |
|
435 writeOnce:true |
|
436 }, |
|
437 |
|
438 personality : { |
|
439 value:50 |
|
440 }, |
|
441 |
|
442 available : { |
|
443 value:true |
|
444 } |
|
445 }; |
|
446 |
|
447 this.addAttrs(attrs, cfg); |
|
448 } |
|
449 |
|
450 SpeedDater.prototype.applyNameTag = function(where) { |
|
451 // Method used to render the visual representation of a |
|
452 // SpeedDater object's state (in this case as a name tag) |
|
453 }; |
|
454 |
|
455 SpeedDater.prototype.updateNameTag = function() { |
|
456 // Method used to update the rendered state of SpeedDater in the DOM. |
|
457 } |
|
458 |
|
459 // Template to use form the markup |
|
460 SpeedDater.NAMETAG = "<div class="sd-nametag"><div class="sd-hd">Hello!</div>... </div>"; |
|
461 |
|
462 // Augment custom class with Attribute |
|
463 Y.augment(SpeedDater, Y.Attribute);</textarea></div> |
|
464 <p> |
|
465 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 |
|
466 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 |
|
467 construction, as shown by the use of the <code>cfg</code> argument above. |
|
468 </p> |
|
469 |
|
470 <h4>Using Attributes</h4> |
|
471 |
|
472 <p>Now that we have <code>SpeedDater</code> defined with the set of attributes it supports, we can create multiple instances of <code>SpeedDater</code> defining the initial |
|
473 attribute state for each instance through the constructor. We can also update the instance's attribute state after construction, using the <code>get</code> and |
|
474 <code>set</code> methods defined by Attribute.</p> |
|
475 |
|
476 <p>We create a first instance, <code>john</code>, setting up the intial state using Attribute's constructor configuration object support:</p> |
|
477 |
|
478 <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">// Set both name and personality during construction </span></div></li><li class="li1"><div class="de1">john <span class="sy0">=</span> <span class="kw2">new</span> SpeedDater<span class="br0">(</span><span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw3">name</span><span class="sy0">:</span> <span class="st0">"John"</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> personality<span class="sy0">:</span> <span class="nu0">76.43</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="co1">// Set both name and personality during construction </span> |
|
479 john <span class="sy0">=</span> <span class="kw2">new</span> SpeedDater<span class="br0">(</span><span class="br0">{</span> |
|
480 <span class="kw3">name</span><span class="sy0">:</span> <span class="st0">"John"</span><span class="sy0">,</span> |
|
481 personality<span class="sy0">:</span> <span class="nu0">76.43</span> |
|
482 <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax4-plain">// Set both name and personality during construction |
|
483 john = new SpeedDater({ |
|
484 name: "John", |
|
485 personality: 76.43 |
|
486 });</textarea></div> |
|
487 <p>For the second instance that we create, <code>jane</code>, we set the value of the personality attribute, after construction:</p> |
|
488 |
|
489 <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="co1">// Set name during construction</span></div></li><li class="li1"><div class="de1">jane <span class="sy0">=</span> <span class="kw2">new</span> SpeedDater<span class="br0">(</span><span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw3">name</span><span class="sy0">:</span> <span class="st0">"Jane"</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><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="co1">// Set personality after construction. The initial value for personality </span></div></li><li class="li1"><div class="de1"><span class="co1">// in this case, will be the value defined when the attribute was added </span></div></li><li class="li1"><div class="de1"><span class="co1">// using addAttrs (above)</span></div></li><li class="li1"><div class="de1">jane.<span class="me1">set</span><span class="br0">(</span><span class="st0">"personality"</span><span class="sy0">,</span> <span class="nu0">82</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">// Set name during construction</span> |
|
490 jane <span class="sy0">=</span> <span class="kw2">new</span> SpeedDater<span class="br0">(</span><span class="br0">{</span> |
|
491 <span class="kw3">name</span><span class="sy0">:</span> <span class="st0">"Jane"</span> |
|
492 <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span> |
|
493 |
|
494 <span class="co1">// Set personality after construction. The initial value for personality </span> |
|
495 <span class="co1">// in this case, will be the value defined when the attribute was added </span> |
|
496 <span class="co1">// using addAttrs (above)</span> |
|
497 jane.<span class="me1">set</span><span class="br0">(</span><span class="st0">"personality"</span><span class="sy0">,</span> <span class="nu0">82</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax5-plain">// Set name during construction |
|
498 jane = new SpeedDater({ |
|
499 name: "Jane" |
|
500 }); |
|
501 |
|
502 // Set personality after construction. The initial value for personality |
|
503 // in this case, will be the value defined when the attribute was added |
|
504 // using addAttrs (above) |
|
505 jane.set("personality", 82);</textarea></div> |
|
506 <p>We render the current attribute state of each instance to the DOM, using the <code>applyNameTag()</code> method defined on SpeedDater's prototype:</p> |
|
507 |
|
508 <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="co1">// Render the sticker with john's state information to the DOM</span></div></li><li class="li1"><div class="de1">john.<span class="me1">applyNameTag</span><span class="br0">(</span><span class="st0">"#john .shirt"</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">// Render the sticker with jane's state information to the DOM</span></div></li><li class="li2"><div class="de2">jane.<span class="me1">applySicker</span><span class="br0">(</span><span class="st0">"#jane .shirt"</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">// Render the sticker with john's state information to the DOM</span> |
|
509 john.<span class="me1">applyNameTag</span><span class="br0">(</span><span class="st0">"#john .shirt"</span><span class="br0">)</span><span class="sy0">;</span> |
|
510 |
|
511 <span class="co1">// Render the sticker with jane's state information to the DOM</span> |
|
512 jane.<span class="me1">applySicker</span><span class="br0">(</span><span class="st0">"#jane .shirt"</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax6-plain">// Render the sticker with john's state information to the DOM |
|
513 john.applyNameTag("#john .shirt"); |
|
514 |
|
515 // Render the sticker with jane's state information to the DOM |
|
516 jane.applySicker("#jane .shirt");</textarea></div> |
|
517 <p>Although not directly related to working with Attributes, it's worth taking a look at the <code>applyNameTag()</code> and <code>updateNameTag()</code> implementations, since they establish |
|
518 a commonly used pattern.</p> |
|
519 |
|
520 <p>The <code>applyNameTag()</code> method handles rendering the initial visual representation for a speed dater object's state (in this case a name tag). It uses tokens in an HTML "template" string, which it replaces with the values |
|
521 of attributes using the <code>substitute()</code> utility method:</p> |
|
522 |
|
523 <div id="syntax7" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="co1">// A template for the markup representing the SpeedDater object..</span></div></li><li class="li1"><div class="de1">SpeedDater.<span class="me1">NAMETAG</span> <span class="sy0">=</span> <span class="st0">'<div class="sd-nametag"> <span class="es0">\</span></span></div></li><li class="li1"><div class="de1"><span class="st0"> <div class="sd-hd">Hello!</div> <span class="es0">\</span></span></div></li><li class="li1"><div class="de1"><span class="st0"> <div class="sd-bd">I<span class="es0">\'</span>m <span class="sd-name">{name}</span> <span class="es0">\ </span></span></div></li><li class="li2"><div class="de2"><span class="st0"> and my PersonalityQuotientIndex is <span class="es0">\ </span></span></div></li><li class="li1"><div class="de1"><span class="st0"> <span class="sd-personality">{personality}</span> <span class="es0">\</span></span></div></li><li class="li1"><div class="de1"><span class="st0"> </div> <span class="es0">\</span></span></div></li><li class="li1"><div class="de1"><span class="st0"> <div class="sd-ft sd-availability">{available}</div> <span class="es0">\</span></span></div></li><li class="li1"><div class="de1"><span class="st0"> </div>'</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="co1">// A template for the markup representing the SpeedDater object..</span> |
|
524 SpeedDater.<span class="me1">NAMETAG</span> <span class="sy0">=</span> <span class="st0">'<div class="sd-nametag"> <span class="es0">\</span> |
|
525 <div class="sd-hd">Hello!</div> <span class="es0">\</span> |
|
526 <div class="sd-bd">I<span class="es0">\'</span>m <span class="sd-name">{name}</span> <span class="es0">\ </span> |
|
527 and my PersonalityQuotientIndex is <span class="es0">\ </span> |
|
528 <span class="sd-personality">{personality}</span> <span class="es0">\</span> |
|
529 </div> <span class="es0">\</span> |
|
530 <div class="sd-ft sd-availability">{available}</div> <span class="es0">\</span> |
|
531 </div>'</span><span class="sy0">;</span></pre></div><textarea id="syntax7-plain">// A template for the markup representing the SpeedDater object.. |
|
532 SpeedDater.NAMETAG = '<div class="sd-nametag"> \ |
|
533 <div class="sd-hd">Hello!</div> \ |
|
534 <div class="sd-bd">I\'m <span class="sd-name">{name}</span> \ |
|
535 and my PersonalityQuotientIndex is \ |
|
536 <span class="sd-personality">{personality}</span> \ |
|
537 </div> \ |
|
538 <div class="sd-ft sd-availability">{available}</div> \ |
|
539 </div>';</textarea></div> |
|
540 <div id="syntax8" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="co1">// A rendering method, used to create the initial markup for the SpeedDater.</span></div></li><li class="li1"><div class="de1">SpeedDater.<span class="me1">prototype</span>.<span class="me1">applyNameTag</span> <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</span>where<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">// This example uses an HTML template string containing placeholder </span></div></li><li class="li2"><div class="de2"> <span class="co1">// tokens (SpeedDater.NAMETAG above), and Y.substitute to replace the </span></div></li><li class="li1"><div class="de1"> <span class="co1">// tokens with the current attribute values. </span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> tokens <span class="sy0">=</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="co1">// Get attribute values and map them to the tokens in the HTML template string</span></div></li><li class="li2"><div class="de2"> <span class="kw3">name</span><span class="sy0">:</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"name"</span><span class="br0">)</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> available<span class="sy0">:</span> <span class="br0">(</span><span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"available"</span><span class="br0">)</span><span class="br0">)</span> <span class="sy0">?</span> <span class="st0">"I'm still looking "</span> <span class="sy0">:</span> <span class="st0">"Sorry, I'm taken"</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> personality<span class="sy0">:</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"personality"</span><span class="br0">)</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="co1">// Create a new Node element, from the token substituted string... </span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>.<span class="me1">nameTag</span> <span class="sy0">=</span> Y.<span class="me1">Node</span>.<span class="me1">create</span><span class="br0">(</span>Y.<span class="me1">substitute</span><span class="br0">(</span>SpeedDater.<span class="me1">NAMETAG</span><span class="sy0">,</span> tokens<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">// ... and append it to the DOM</span></div></li><li class="li1"><div class="de1"> Y.<span class="me1">one</span><span class="br0">(</span>where<span class="br0">)</span>.<span class="me1">appendChild</span><span class="br0">(</span><span class="kw1">this</span>.<span class="me1">nameTag</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"><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">// A rendering method, used to create the initial markup for the SpeedDater.</span> |
|
541 SpeedDater.<span class="me1">prototype</span>.<span class="me1">applyNameTag</span> <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</span>where<span class="br0">)</span> <span class="br0">{</span> |
|
542 |
|
543 <span class="co1">// This example uses an HTML template string containing placeholder </span> |
|
544 <span class="co1">// tokens (SpeedDater.NAMETAG above), and Y.substitute to replace the </span> |
|
545 <span class="co1">// tokens with the current attribute values. </span> |
|
546 |
|
547 <span class="kw2">var</span> tokens <span class="sy0">=</span> <span class="br0">{</span> |
|
548 <span class="co1">// Get attribute values and map them to the tokens in the HTML template string</span> |
|
549 <span class="kw3">name</span><span class="sy0">:</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"name"</span><span class="br0">)</span><span class="sy0">,</span> |
|
550 available<span class="sy0">:</span> <span class="br0">(</span><span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"available"</span><span class="br0">)</span><span class="br0">)</span> <span class="sy0">?</span> <span class="st0">"I'm still looking "</span> <span class="sy0">:</span> <span class="st0">"Sorry, I'm taken"</span><span class="sy0">,</span> |
|
551 personality<span class="sy0">:</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"personality"</span><span class="br0">)</span> |
|
552 <span class="br0">}</span><span class="sy0">;</span> |
|
553 |
|
554 <span class="co1">// Create a new Node element, from the token substituted string... </span> |
|
555 <span class="kw1">this</span>.<span class="me1">nameTag</span> <span class="sy0">=</span> Y.<span class="me1">Node</span>.<span class="me1">create</span><span class="br0">(</span>Y.<span class="me1">substitute</span><span class="br0">(</span>SpeedDater.<span class="me1">NAMETAG</span><span class="sy0">,</span> tokens<span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span> |
|
556 |
|
557 <span class="co1">// ... and append it to the DOM</span> |
|
558 Y.<span class="me1">one</span><span class="br0">(</span>where<span class="br0">)</span>.<span class="me1">appendChild</span><span class="br0">(</span><span class="kw1">this</span>.<span class="me1">nameTag</span><span class="br0">)</span><span class="sy0">;</span> |
|
559 <span class="br0">}</span><span class="sy0">;</span></pre></div><textarea id="syntax8-plain">// A rendering method, used to create the initial markup for the SpeedDater. |
|
560 SpeedDater.prototype.applyNameTag = function(where) { |
|
561 |
|
562 // This example uses an HTML template string containing placeholder |
|
563 // tokens (SpeedDater.NAMETAG above), and Y.substitute to replace the |
|
564 // tokens with the current attribute values. |
|
565 |
|
566 var tokens = { |
|
567 // Get attribute values and map them to the tokens in the HTML template string |
|
568 name: this.get("name"), |
|
569 available: (this.get("available")) ? "I'm still looking " : "Sorry, I'm taken", |
|
570 personality: this.get("personality") |
|
571 }; |
|
572 |
|
573 // Create a new Node element, from the token substituted string... |
|
574 this.nameTag = Y.Node.create(Y.substitute(SpeedDater.NAMETAG, tokens)); |
|
575 |
|
576 // ... and append it to the DOM |
|
577 Y.one(where).appendChild(this.nameTag); |
|
578 };</textarea></div> |
|
579 <p>The <code>updateNameTag()</code> method handles updating this visual representation with the current state, when requested by the user</p> |
|
580 |
|
581 <div id="syntax9" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="co1">// An update method, used to refresh the rendered content, after </span></div></li><li class="li1"><div class="de1"><span class="co1">// an attribute value is changed.</span></div></li><li class="li1"><div class="de1">SpeedDater.<span class="me1">prototype</span>.<span class="me1">updateNameTag</span> <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="co1">// Get current attribute values...</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> taken <span class="sy0">=</span> <span class="br0">(</span><span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"available"</span><span class="br0">)</span><span class="br0">)</span> <span class="sy0">?</span> <span class="st0">"I'm still looking "</span> <span class="sy0">:</span> <span class="st0">"Sorry, I'm taken"</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> <span class="kw3">name</span> <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"name"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> personality <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"personality"</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"> <span class="co1">// Find the corresponding element, and replace the innerHTML with the new value</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>.<span class="me1">nameTag</span>.<span class="me1">query</span><span class="br0">(</span><span class="st0">".sd-name"</span><span class="br0">)</span>.<span class="me1">set</span><span class="br0">(</span><span class="st0">"innerHTML"</span><span class="sy0">,</span> <span class="kw3">name</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>.<span class="me1">nameTag</span>.<span class="me1">query</span><span class="br0">(</span><span class="st0">".sd-availability"</span><span class="br0">)</span>.<span class="me1">set</span><span class="br0">(</span><span class="st0">"innerHTML"</span><span class="sy0">,</span> taken<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="kw2">var</span> personalityEl <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">nameTag</span>.<span class="me1">query</span><span class="br0">(</span><span class="st0">".sd-personality"</span><span class="br0">)</span><span class="sy0">;</span> </div></li><li class="li2"><div class="de2"> personalityEl.<span class="me1">set</span><span class="br0">(</span><span class="st0">"innerHTML"</span><span class="sy0">,</span> personality<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="kw1">if</span> <span class="br0">(</span>personality <span class="sy0">></span> <span class="nu0">90</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> personalityEl.<span class="me1">addClass</span><span class="br0">(</span><span class="st0">"sd-max"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li2"><div class="de2"><span class="br0">}</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="co1">// An update method, used to refresh the rendered content, after </span> |
|
582 <span class="co1">// an attribute value is changed.</span> |
|
583 SpeedDater.<span class="me1">prototype</span>.<span class="me1">updateNameTag</span> <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span> |
|
584 |
|
585 <span class="co1">// Get current attribute values...</span> |
|
586 <span class="kw2">var</span> taken <span class="sy0">=</span> <span class="br0">(</span><span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"available"</span><span class="br0">)</span><span class="br0">)</span> <span class="sy0">?</span> <span class="st0">"I'm still looking "</span> <span class="sy0">:</span> <span class="st0">"Sorry, I'm taken"</span><span class="sy0">;</span> |
|
587 <span class="kw2">var</span> <span class="kw3">name</span> <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"name"</span><span class="br0">)</span><span class="sy0">;</span> |
|
588 <span class="kw2">var</span> personality <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"personality"</span><span class="br0">)</span><span class="sy0">;</span> |
|
589 |
|
590 <span class="co1">// Find the corresponding element, and replace the innerHTML with the new value</span> |
|
591 <span class="kw1">this</span>.<span class="me1">nameTag</span>.<span class="me1">query</span><span class="br0">(</span><span class="st0">".sd-name"</span><span class="br0">)</span>.<span class="me1">set</span><span class="br0">(</span><span class="st0">"innerHTML"</span><span class="sy0">,</span> <span class="kw3">name</span><span class="br0">)</span><span class="sy0">;</span> |
|
592 <span class="kw1">this</span>.<span class="me1">nameTag</span>.<span class="me1">query</span><span class="br0">(</span><span class="st0">".sd-availability"</span><span class="br0">)</span>.<span class="me1">set</span><span class="br0">(</span><span class="st0">"innerHTML"</span><span class="sy0">,</span> taken<span class="br0">)</span><span class="sy0">;</span> |
|
593 |
|
594 <span class="kw2">var</span> personalityEl <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">nameTag</span>.<span class="me1">query</span><span class="br0">(</span><span class="st0">".sd-personality"</span><span class="br0">)</span><span class="sy0">;</span> |
|
595 personalityEl.<span class="me1">set</span><span class="br0">(</span><span class="st0">"innerHTML"</span><span class="sy0">,</span> personality<span class="br0">)</span><span class="sy0">;</span> |
|
596 |
|
597 <span class="kw1">if</span> <span class="br0">(</span>personality <span class="sy0">></span> <span class="nu0">90</span><span class="br0">)</span> <span class="br0">{</span> |
|
598 personalityEl.<span class="me1">addClass</span><span class="br0">(</span><span class="st0">"sd-max"</span><span class="br0">)</span><span class="sy0">;</span> |
|
599 <span class="br0">}</span> |
|
600 <span class="br0">}</span></pre></div><textarea id="syntax9-plain">// An update method, used to refresh the rendered content, after |
|
601 // an attribute value is changed. |
|
602 SpeedDater.prototype.updateNameTag = function() { |
|
603 |
|
604 // Get current attribute values... |
|
605 var taken = (this.get("available")) ? "I'm still looking " : "Sorry, I'm taken"; |
|
606 var name = this.get("name"); |
|
607 var personality = this.get("personality"); |
|
608 |
|
609 // Find the corresponding element, and replace the innerHTML with the new value |
|
610 this.nameTag.query(".sd-name").set("innerHTML", name); |
|
611 this.nameTag.query(".sd-availability").set("innerHTML", taken); |
|
612 |
|
613 var personalityEl = this.nameTag.query(".sd-personality"); |
|
614 personalityEl.set("innerHTML", personality); |
|
615 |
|
616 if (personality > 90) { |
|
617 personalityEl.addClass("sd-max"); |
|
618 } |
|
619 }</textarea></div> |
|
620 <p>Each instance's state can be now be updated using Attribute's <code>set</code> method, and the subsequent call to SpeedDater's <code>updateNameTag()</code> method will update the visual representation (the rendered DOM) of the object:</p> |
|
621 |
|
622 <div id="syntax10" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">"click"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> john.<span class="me1">set</span><span class="br0">(</span><span class="st0">"available"</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"> john.<span class="me1">updateNameTag</span><span class="br0">(</span><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="br0">}</span><span class="sy0">,</span> <span class="st0">"#john .taken"</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">Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">"click"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> jane.<span class="me1">set</span><span class="br0">(</span><span class="st0">"available"</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"> jane.<span class="me1">updateNameTag</span><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="br0">}</span><span class="sy0">,</span> <span class="st0">"#jane .taken"</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">Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">"click"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> jane.<span class="me1">set</span><span class="br0">(</span><span class="st0">"personality"</span><span class="sy0">,</span> <span class="nu0">98</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> jane.<span class="me1">updateNameTag</span><span class="br0">(</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"><span class="br0">}</span><span class="sy0">,</span> <span class="st0">"#jane .upgrade"</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">"click"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span> |
|
623 |
|
624 john.<span class="me1">set</span><span class="br0">(</span><span class="st0">"available"</span><span class="sy0">,</span> <span class="kw2">false</span><span class="br0">)</span><span class="sy0">;</span> |
|
625 john.<span class="me1">updateNameTag</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> |
|
626 |
|
627 <span class="br0">}</span><span class="sy0">,</span> <span class="st0">"#john .taken"</span><span class="br0">)</span><span class="sy0">;</span> |
|
628 |
|
629 Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">"click"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span> |
|
630 |
|
631 jane.<span class="me1">set</span><span class="br0">(</span><span class="st0">"available"</span><span class="sy0">,</span> <span class="kw2">false</span><span class="br0">)</span><span class="sy0">;</span> |
|
632 jane.<span class="me1">updateNameTag</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> |
|
633 |
|
634 <span class="br0">}</span><span class="sy0">,</span> <span class="st0">"#jane .taken"</span><span class="br0">)</span><span class="sy0">;</span> |
|
635 |
|
636 Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">"click"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span> |
|
637 |
|
638 jane.<span class="me1">set</span><span class="br0">(</span><span class="st0">"personality"</span><span class="sy0">,</span> <span class="nu0">98</span><span class="br0">)</span><span class="sy0">;</span> |
|
639 jane.<span class="me1">updateNameTag</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> |
|
640 |
|
641 <span class="br0">}</span><span class="sy0">,</span> <span class="st0">"#jane .upgrade"</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax10-plain">Y.on("click", function() { |
|
642 |
|
643 john.set("available", false); |
|
644 john.updateNameTag(); |
|
645 |
|
646 }, "#john .taken"); |
|
647 |
|
648 Y.on("click", function() { |
|
649 |
|
650 jane.set("available", false); |
|
651 jane.updateNameTag(); |
|
652 |
|
653 }, "#jane .taken"); |
|
654 |
|
655 Y.on("click", function() { |
|
656 |
|
657 jane.set("personality", 98); |
|
658 jane.updateNameTag(); |
|
659 |
|
660 }, "#jane .upgrade");</textarea></div> |
|
661 <p>In the <a href="attribute-event-speeddate.html">"Attribute Event Based Speed Dating" example</a>, we'll see how we can use Attribute change events to eliminate the need for users to call <code>updateNameTag()</code> each time they set an attribute, and have the two instances communicate with one another.</p> </div> |
|
662 <div class="yui-u sidebar"> |
|
663 |
|
664 |
|
665 <div id="examples" class="mod box4"> |
|
666 <div class="hd"> |
|
667 <h4> |
|
668 Attribute Examples:</h4> |
|
669 </div> |
|
670 <div class="bd"> |
|
671 <ul> |
|
672 <li><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 class='selected'><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> |
|
673 </div> |
|
674 </div> |
|
675 |
|
676 <div class="mod box4"> |
|
677 <div class="hd"> |
|
678 <h4>More Attribute Resources:</h4> |
|
679 </div> |
|
680 <div class="bd"> |
|
681 <ul> |
|
682 <!-- <li><a href="http://developer.yahoo.com/yui/attribute/">User's Guide</a> (external)</li> --> |
|
683 <li><a href="../../api/module_attribute.html">API Documentation</a></li></ul> |
|
684 </div> |
|
685 </div> |
|
686 </div> |
|
687 </div> |
|
688 |
|
689 </div> |
|
690 </div> |
|
691 |
|
692 |
|
693 <div class="yui-b toc3" id="tocWrapper"> |
|
694 <!-- TABLE OF CONTENTS --> |
|
695 <div id="toc"> |
|
696 |
|
697 <ul> |
|
698 <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> |
|
699 </div> |
|
700 </div> |
|
701 </div><!--closes bd--> |
|
702 |
|
703 <div id="ft"> |
|
704 <p class="first">Copyright © 2009 Yahoo! Inc. All rights reserved.</p> |
|
705 <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - |
|
706 <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - |
|
707 <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - |
|
708 <a href="http://careers.yahoo.com/">Job Openings</a></p> |
|
709 </div> |
|
710 </div> |
|
711 <script language="javascript"> |
|
712 var yuiConfig = {base:"../../build/", timeout: 10000}; |
|
713 </script> |
|
714 <script src="../../assets/syntax.js"></script> |
|
715 <script src="../../assets/dpSyntaxHighlighter.js"></script> |
|
716 <script language="javascript"> |
|
717 dp.SyntaxHighlighter.HighlightAll('code'); |
|
718 </script> |
|
719 </body> |
|
720 </html> |