← Back to branch summary

~ubuntu-branches/ubuntu/raring/maas/raring-updates

« back to all changes in this revision

Viewing changes to src/maasserver/static/jslibs/yui/3.4.1/docs/attribute/attribute-basic-speeddate.html

  • Committer: Package Import Robot
  • Author(s): Andres Rodriguez
  • Date: 2012-07-03 17:42:37 UTC
  • mfrom: (1.1.13)
  • Revision ID: package-import@ubuntu.com-20120703174237-p8l0keuuznfg721k
Tags: 0.1+bzr709+dfsg-0ubuntu1
* New Upstream release
* debian/control:
  - Depends on python-celery, python-tempita, libjs-yui3-{full,min},
    libjs-raphael
* debian/maas.install:
  - Install apiclient, celeryconfig.py, maas-import-pxe-files, preseeds_v2.
  - Update to install various files from chroot, rather tha manually copy
    them from the source.
* debian/maas.links: symlink celeryconfig.py
* debian/maas.maas-celery.upstart: Add job.
* debian/rules:
  - Install celery upstart job.
  - Do not install jslibs as packages are now used.
  - Drop copying of maas_local_settings_sample.py as source now ships
    a maas_local_settings.py
* debian/patches:
  - 04-maas-http-fix.patch: Drop. Merged upstream.
  - 01-fix-database-settings.patch: Refreshed.
  - 99_enums_js.patch: Added until creation of enum.js / build process
    is fixed.
* debian/maas.postinst: Update bzr version to correctly handle upgrades.

Show diffs side-by-side

added added

removed removed

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