← 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/yui/yui-augment.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/yui/yui-augment.html
1
 
<!DOCTYPE html>
2
 
<html lang="en">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>Example: Compose Classes of Objects with &#x60;augment&#x60;</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: Compose Classes of Objects with &#x60;augment&#x60;</h1>
15
 
 
16
 
    
17
 
        <a href="#toc" class="jump">Jump to Table of Contents</a>
18
 
    
19
 
 
20
 
    <div class="yui3-g">
21
 
        <div id="main" class="yui3-u">
22
 
            <div class="content"><div class="intro">
23
 
<p>Creating a composition-based class structure using <code>augment</code></p>
24
 
</div>
25
 
 
26
 
<div class="example">
27
 
    <script>
28
 
YUI().use('node', function(Y) {
29
 
 
30
 
YUI().use('node', function(Y) {
31
 
    // This method is in the 'oop' module.  Since we require 'node'
32
 
    // for this example, and 'node' requires 'oop', the 'oop' module
33
 
    // will be loaded automatically.
34
 
 
35
 
    var Foo = function() {
36
 
        /* code specific to Foo */
37
 
        this.publish('interestingMoment');
38
 
    };
39
 
 
40
 
    Foo.prototype.doSomething = function() {
41
 
 
42
 
        var eventData = {};
43
 
 
44
 
        // -- do something interesting, add results to eventData --
45
 
 
46
 
        eventData.statusText = 'bar';
47
 
 
48
 
        // notify the subscribers, passing the event data
49
 
        this.fire('interestingMoment', eventData);
50
 
    }
51
 
 
52
 
    Y.augment(Foo, Y.EventTarget);
53
 
 
54
 
    var foo = new Foo();
55
 
 
56
 
    // add some event listeners
57
 
    foo.on('interestingMoment', function (data) {
58
 
        var p = Y.one('#demo_p1');
59
 
        p.setContent('I was notified of an interesting moment: ' + data.statusText);
60
 
    });
61
 
 
62
 
    foo.on('interestingMoment', function (data) {
63
 
        var p = Y.one('#demo_p2');
64
 
        p.setContent('I was also notified of an interesting moment: ' + data.statusText);
65
 
    });
66
 
 
67
 
    Y.on('click', function() { 
68
 
        foo.doSomething();
69
 
    }, '#demo');
70
 
});
71
 
 
72
 
 
73
 
});
74
 
</script>
75
 
 
76
 
<div id="demo">
77
 
<input type="button" id="demo" name="demo" value="Send">
78
 
 
79
 
<p id="demo_p1"></p>
80
 
<p id="demo_p2"></p>
81
 
</div>
82
 
 
83
 
</div>
84
 
 
85
 
 
86
 
<h3 id="using-augment">Using <code>augment</code></h3>
87
 
 
88
 
<pre class="code prettyprint">YUI().use(&#x27;node&#x27;, function(Y) {
89
 
    &#x2F;&#x2F; This method is in the &#x27;oop&#x27; module.  Since we require &#x27;node&#x27;
90
 
    &#x2F;&#x2F; for this example, and &#x27;node&#x27; requires &#x27;oop&#x27;, the &#x27;oop&#x27; module
91
 
    &#x2F;&#x2F; will be loaded automatically.</pre>
92
 
 
93
 
 
94
 
<h3 id="the-example-any-class-can-be-an-eventtarget">The example: Any class can be an <code>EventTarget</code></h3>
95
 
 
96
 
<p>This example creates a custom class, then augments it with
97
 
<code>EventTarget</code>. Using the packaged functionality of <code>EventTarget</code>, the code for
98
 
<code>Foo</code> is able to focus on the functionality unique to its
99
 
purpose.</p>
100
 
 
101
 
<pre class="code prettyprint">YUI().use(&#x27;node&#x27;, function(Y) {
102
 
    &#x2F;&#x2F; This method is in the &#x27;oop&#x27; module.  Since we require &#x27;node&#x27;
103
 
    &#x2F;&#x2F; for this example, and &#x27;node&#x27; requires &#x27;oop&#x27;, the &#x27;oop&#x27; module
104
 
    &#x2F;&#x2F; will be loaded automatically.
105
 
 
106
 
    var Foo = function() {
107
 
        &#x2F;* code specific to Foo *&#x2F;
108
 
        this.publish(&#x27;interestingMoment&#x27;);
109
 
    };
110
 
 
111
 
    Foo.prototype.doSomething = function() {
112
 
 
113
 
        var eventData = {};
114
 
 
115
 
        &#x2F;&#x2F; -- do something interesting, add results to eventData --
116
 
 
117
 
        eventData.statusText = &#x27;bar&#x27;;
118
 
 
119
 
        &#x2F;&#x2F; notify the subscribers, passing the event data
120
 
        this.fire(&#x27;interestingMoment&#x27;, eventData);
121
 
    }
122
 
 
123
 
    Y.augment(Foo, Y.EventTarget);
124
 
 
125
 
    var foo = new Foo();
126
 
 
127
 
    &#x2F;&#x2F; add some event listeners
128
 
    foo.on(&#x27;interestingMoment&#x27;, function (data) {
129
 
        var p = Y.one(&#x27;#demo_p1&#x27;);
130
 
        p.setContent(&#x27;I was notified of an interesting moment: &#x27; + data.statusText);
131
 
    });
132
 
 
133
 
    foo.on(&#x27;interestingMoment&#x27;, function (data) {
134
 
        var p = Y.one(&#x27;#demo_p2&#x27;);
135
 
        p.setContent(&#x27;I was also notified of an interesting moment: &#x27; + data.statusText);
136
 
    });
137
 
 
138
 
    Y.on(&#x27;click&#x27;, function() { 
139
 
        foo.doSomething();
140
 
    }, &#x27;#demo&#x27;);
141
 
});</pre>
142
 
 
143
 
 
144
 
<h3 id="composition-not-inheritance">Composition, not inheritance</h3>
145
 
<p>If <code>Foo</code> were a part of a class hierarchy, it would be improper
146
 
to include <code>EventTarget</code> in the inheritance chain, because its custom event
147
 
functionality is not an intrinsic characteristic but rather an ancillary, generic
148
 
capability that many classes share.</p>
149
 
 
150
 
<p>Unlike <code>extend</code>ed classes, the relationship between a class and
151
 
the classes augmenting it is not an indication of type hierarchy.  The intent
152
 
of <code>augment</code> is to aid in extracting nonessential behaviors or
153
 
behaviors shared by many classes, allowing for a composition-style class
154
 
architecture.</p>
155
 
 
156
 
<img src="../assets/yui/composition_diagram.png" alt="Diagram showing class hierarchy, highlighting has-a relationship"/>
157
 
 
158
 
<p>This may appear similar to multiple inheritance, but it's not.
159
 
<code>augment</code> simply adds the public methods and members from one class
160
 
prototype to another class prototype.  Instances of the augmented class will
161
 
not pass <code>instanceof</code> tests for the class(es) which augmented
162
 
it.</p>
163
 
 
164
 
<pre class="code prettyprint">YUI().use(&#x27;oop&#x27;, function(Y) {
165
 
 
166
 
    function Foo() {}
167
 
    Foo.prototype.doSomething = function () { &#x2F;* something *&#x2F; };
168
 
 
169
 
    function Bar() {}
170
 
    Y.augment(Bar, Foo);
171
 
 
172
 
    var b = new Bar();
173
 
    if (b instanceof Bar) {} &#x2F;&#x2F; true 
174
 
    if (b instanceof Foo) {} &#x2F;&#x2F; FALSE
175
 
});</pre>
176
 
 
177
 
</div>
178
 
        </div>
179
 
 
180
 
        <div id="sidebar" class="yui3-u">
181
 
            
182
 
                <div id="toc" class="sidebox">
183
 
                    <div class="hd">
184
 
                        <h2 class="no-toc">Table of Contents</h2>
185
 
                    </div>
186
 
 
187
 
                    <div class="bd">
188
 
                        <ul class="toc">
189
 
<li>
190
 
<a href="#using-augment">Using <code>augment</code></a>
191
 
</li>
192
 
<li>
193
 
<a href="#the-example-any-class-can-be-an-eventtarget">The example: Any class can be an <code>EventTarget</code></a>
194
 
</li>
195
 
<li>
196
 
<a href="#composition-not-inheritance">Composition, not inheritance</a>
197
 
</li>
198
 
</ul>
199
 
                    </div>
200
 
                </div>
201
 
            
202
 
 
203
 
            
204
 
                <div class="sidebox">
205
 
                    <div class="hd">
206
 
                        <h2 class="no-toc">Examples</h2>
207
 
                    </div>
208
 
 
209
 
                    <div class="bd">
210
 
                        <ul class="examples">
211
 
                            
212
 
                                
213
 
                                    <li data-description="Setting up a YUI Instance">
214
 
                                        <a href="yui-core.html">YUI Core</a>
215
 
                                    </li>
216
 
                                
217
 
                            
218
 
                                
219
 
                                    <li data-description="Working with multiple YUI instances.">
220
 
                                        <a href="yui-multi.html">Multiple Instances</a>
221
 
                                    </li>
222
 
                                
223
 
                            
224
 
                                
225
 
                                    <li data-description="On-demand loading of YUI and non-YUI assets">
226
 
                                        <a href="yui-loader-ext.html">YUI Loader - Dynamically Adding YUI and External Modules</a>
227
 
                                    </li>
228
 
                                
229
 
                            
230
 
                                
231
 
                                    <li data-description="Create Class Hierarchies with &#x60;extend&#x60;">
232
 
                                        <a href="yui-extend.html">Create Class Hierarchies with &#x60;extend&#x60;</a>
233
 
                                    </li>
234
 
                                
235
 
                            
236
 
                                
237
 
                                    <li data-description="Creating a composition-based class structure using &#x60;augment&#x60;">
238
 
                                        <a href="yui-augment.html">Compose Classes of Objects with &#x60;augment&#x60;</a>
239
 
                                    </li>
240
 
                                
241
 
                            
242
 
                                
243
 
                                    <li data-description="Add behaviors to objects or static classes with &#x60;mix&#x60;">
244
 
                                        <a href="yui-mix.html">Add Behaviors to Objects with &#x60;mix&#x60;</a>
245
 
                                    </li>
246
 
                                
247
 
                            
248
 
                                
249
 
                                    <li data-description="Combine data sets and create shallow copies of objects with &#x60;merge&#x60;">
250
 
                                        <a href="yui-merge.html">Combine Data Sets with &#x60;merge&#x60;</a>
251
 
                                    </li>
252
 
                                
253
 
                            
254
 
                                
255
 
                                    <li data-description="Check data types with the &#x60;Lang Utilities&#x60;">
256
 
                                        <a href="yui-isa.html">Check Data Types with &#x60;Lang&#x60;</a>
257
 
                                    </li>
258
 
                                
259
 
                            
260
 
                                
261
 
                                    <li data-description="Get information about the current user agent with &#x60;UA&#x60;">
262
 
                                        <a href="yui-ua.html">Browser Detection with &#x60;UA&#x60;</a>
263
 
                                    </li>
264
 
                                
265
 
                            
266
 
                                
267
 
                                    <li data-description="Working with YUI 2 in 3">
268
 
                                        <a href="yui-yui2.html">Working with YUI 2 in 3</a>
269
 
                                    </li>
270
 
                                
271
 
                            
272
 
                                
273
 
                                    <li data-description="Natively use YUI Gallery Modules">
274
 
                                        <a href="yui-gallery.html">Natively use YUI Gallery Modules</a>
275
 
                                    </li>
276
 
                                
277
 
                            
278
 
                        </ul>
279
 
                    </div>
280
 
                </div>
281
 
            
282
 
 
283
 
            
284
 
        </div>
285
 
    </div>
286
 
</div>
287
 
 
288
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
289
 
<script>prettyPrint();</script>
290
 
 
291
 
</body>
292
 
</html>