← Back to branch summary

~smagoun/whoopsie/whoopsie-lp1017637

« back to all changes in this revision

Viewing changes to backend/stats/static/js/yui/docs/yui/yui-extend.html

  • Committer: Evan Dandrea
  • Date: 2012-05-09 05:53:45 UTC
  • Revision ID: evan.dandrea@canonical.com-20120509055345-z2j41tmcbf4as5uf
The backend now lives in lp:daisy and the website (errors.ubuntu.com) now lives in lp:errors.

Show diffs side-by-side

added added

removed removed

Lines of Context:
backend/stats/static/js/yui/docs/yui/yui-extend.html
1
 
<!DOCTYPE html>
2
 
<html lang="en">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>Example: Create Class Hierarchies with &#x60;extend&#x60;</title>
6
 
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Maven+Pro:400,700">
7
 
    <link rel="stylesheet" href="../../build/cssgrids/grids-min.css">
8
 
    <link rel="stylesheet" href="../assets/css/main.css">
9
 
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
10
 
    <script src="../../build/yui/yui-min.js"></script>
11
 
</head>
12
 
<body>
13
 
 
14
 
<div id="doc">
15
 
    <h1>Example: Create Class Hierarchies with &#x60;extend&#x60;</h1>
16
 
 
17
 
    
18
 
 
19
 
    <div class="yui3-g">
20
 
        <div class="yui3-u-3-4">
21
 
            <div id="main">
22
 
                <div class="content"><div class="intro">
23
 
<p>Create Class Hierarchies with <code>extend</code></p>
24
 
</div>
25
 
 
26
 
<div class="example">
27
 
    <script>
28
 
YUI().use('node', function(Y) {
29
 
 
30
 
function Bird(name) {
31
 
    this.name = name;
32
 
}
33
 
 
34
 
Bird.prototype.flighted   = true;  // Default for all Birds
35
 
Bird.prototype.isFlighted = function () { return this.flighted };
36
 
Bird.prototype.getName    = function () { return this.name };
37
 
 
38
 
function Chicken(name) {
39
 
    // Chain the constructors
40
 
    Chicken.superclass.constructor.call(this, name);
41
 
}
42
 
// Chickens are birds
43
 
Y.extend(Chicken, Bird);
44
 
 
45
 
// Define the Chicken prototype methods/members
46
 
Chicken.prototype.flighted = false; // Override default for all Chickens
47
 
 
48
 
 
49
 
function showInheritance() {
50
 
    var chicken = new Chicken('Little'),
51
 
        results = Y.one('#demo');
52
 
 
53
 
    results.setContent('Running: ' + (new Date()));
54
 
 
55
 
    results.append(((chicken instanceof Object) ?
56
 
        "<p>chicken IS an instance of Object.</p>" :
57
 
        "<p>chicken IS NOT an instance of Object.</p>"));
58
 
 
59
 
    results.append(((chicken instanceof Bird) ?
60
 
        "<p>chicken IS an instance of Bird.</p>" :
61
 
        "<p>chicken IS NOT an instance of Bird.</p>"));
62
 
 
63
 
    results.append(((chicken instanceof Chicken) ?
64
 
        "<p>chicken IS an instance of Chicken.</p>" :
65
 
        "<p>chicken IS NOT an instance of Chicken.</p>"));
66
 
 
67
 
    // Chicken instances inherit Bird methods and members
68
 
    results.append(((chicken.isFlighted()) ?
69
 
        "<p>chicken CAN fly.</p>" :
70
 
        "<p>chicken CAN NOT fly.</p>"));
71
 
 
72
 
    results.append("<p>chicken's name is " + chicken.getName() + ".</p>");
73
 
}
74
 
 
75
 
Y.on('click', showInheritance, '#demo_btn');
76
 
 
77
 
 
78
 
});
79
 
</script>
80
 
 
81
 
<button id="demo_btn">Click me</button>
82
 
<div id="demo"></div>
83
 
 
84
 
</div>
85
 
 
86
 
<h3>Instantiate YUI</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>Creating a class hierarchy</h3>
95
 
<p>In this example, we create a class <code>Bird</code> then create a subclass <code>Chicken</code>.</p>
96
 
 
97
 
<pre class="code prettyprint">function Bird(name) {
98
 
    this.name = name;
99
 
}
100
 
 
101
 
Bird.prototype.flighted   = true;  &#x2F;&#x2F; Default for all Birds
102
 
Bird.prototype.isFlighted = function () { return this.flighted };
103
 
Bird.prototype.getName    = function () { return this.name };
104
 
 
105
 
function Chicken(name) {
106
 
    &#x2F;&#x2F; Chain the constructors
107
 
    Chicken.superclass.constructor.call(this, name);
108
 
}
109
 
&#x2F;&#x2F; Chickens are birds
110
 
Y.extend(Chicken, Bird);
111
 
 
112
 
&#x2F;&#x2F; Define the Chicken prototype methods&#x2F;members
113
 
Chicken.prototype.flighted = false; &#x2F;&#x2F; Override default for all Chickens</pre>
114
 
 
115
 
 
116
 
<h3><code>instanceof</code> many classes</h3>
117
 
<p>Unlike classes composed with augmentation, subclasses created with <code>extend</code> are also
118
 
considered instances of their superclass and all classes higher up the
119
 
inheritance tree.</p>
120
 
 
121
 
<p>We'll create an instance of <code>Chicken</code> and run some <code>instanceof</code> and method tests against it.</p>
122
 
 
123
 
<pre class="code prettyprint">function showInheritance() {
124
 
    var chicken = new Chicken(&#x27;Little&#x27;),
125
 
        results = Y.one(&#x27;#demo&#x27;);
126
 
 
127
 
    results.setContent(&#x27;Running: &#x27; + (new Date()));
128
 
 
129
 
    results.append(((chicken instanceof Object) ?
130
 
        &quot;&lt;p&gt;chicken IS an instance of Object.&lt;&#x2F;p&gt;&quot; :
131
 
        &quot;&lt;p&gt;chicken IS NOT an instance of Object.&lt;&#x2F;p&gt;&quot;));
132
 
 
133
 
    results.append(((chicken instanceof Bird) ?
134
 
        &quot;&lt;p&gt;chicken IS an instance of Bird.&lt;&#x2F;p&gt;&quot; :
135
 
        &quot;&lt;p&gt;chicken IS NOT an instance of Bird.&lt;&#x2F;p&gt;&quot;));
136
 
 
137
 
    results.append(((chicken instanceof Chicken) ?
138
 
        &quot;&lt;p&gt;chicken IS an instance of Chicken.&lt;&#x2F;p&gt;&quot; :
139
 
        &quot;&lt;p&gt;chicken IS NOT an instance of Chicken.&lt;&#x2F;p&gt;&quot;));
140
 
 
141
 
    &#x2F;&#x2F; Chicken instances inherit Bird methods and members
142
 
    results.append(((chicken.isFlighted()) ?
143
 
        &quot;&lt;p&gt;chicken CAN fly.&lt;&#x2F;p&gt;&quot; :
144
 
        &quot;&lt;p&gt;chicken CAN NOT fly.&lt;&#x2F;p&gt;&quot;));
145
 
 
146
 
    results.append(&quot;&lt;p&gt;chicken&#x27;s name is &quot; + chicken.getName() + &quot;.&lt;&#x2F;p&gt;&quot;);
147
 
}
148
 
 
149
 
Y.on(&#x27;click&#x27;, showInheritance, &#x27;#demo_btn&#x27;);</pre>
150
 
 
151
 
 
152
 
<h3>Other architecture strategies</h3>
153
 
<p>Take a look at <code>augment</code> and <code>mix</code> for different strategies of managing your code structure.
154
 
 
155
 
<h3>Full Source</h3>
156
 
 
157
 
<pre class="code prettyprint">YUI().use(&#x27;node&#x27;, function(Y) {
158
 
 
159
 
function Bird(name) {
160
 
    this.name = name;
161
 
}
162
 
 
163
 
Bird.prototype.flighted   = true;  &#x2F;&#x2F; Default for all Birds
164
 
Bird.prototype.isFlighted = function () { return this.flighted };
165
 
Bird.prototype.getName    = function () { return this.name };
166
 
 
167
 
function Chicken(name) {
168
 
    &#x2F;&#x2F; Chain the constructors
169
 
    Chicken.superclass.constructor.call(this, name);
170
 
}
171
 
&#x2F;&#x2F; Chickens are birds
172
 
Y.extend(Chicken, Bird);
173
 
 
174
 
&#x2F;&#x2F; Define the Chicken prototype methods&#x2F;members
175
 
Chicken.prototype.flighted = false; &#x2F;&#x2F; Override default for all Chickens
176
 
 
177
 
 
178
 
function showInheritance() {
179
 
    var chicken = new Chicken(&#x27;Little&#x27;),
180
 
        results = Y.one(&#x27;#demo&#x27;);
181
 
 
182
 
    results.setContent(&#x27;Running: &#x27; + (new Date()));
183
 
 
184
 
    results.append(((chicken instanceof Object) ?
185
 
        &quot;&lt;p&gt;chicken IS an instance of Object.&lt;&#x2F;p&gt;&quot; :
186
 
        &quot;&lt;p&gt;chicken IS NOT an instance of Object.&lt;&#x2F;p&gt;&quot;));
187
 
 
188
 
    results.append(((chicken instanceof Bird) ?
189
 
        &quot;&lt;p&gt;chicken IS an instance of Bird.&lt;&#x2F;p&gt;&quot; :
190
 
        &quot;&lt;p&gt;chicken IS NOT an instance of Bird.&lt;&#x2F;p&gt;&quot;));
191
 
 
192
 
    results.append(((chicken instanceof Chicken) ?
193
 
        &quot;&lt;p&gt;chicken IS an instance of Chicken.&lt;&#x2F;p&gt;&quot; :
194
 
        &quot;&lt;p&gt;chicken IS NOT an instance of Chicken.&lt;&#x2F;p&gt;&quot;));
195
 
 
196
 
    &#x2F;&#x2F; Chicken instances inherit Bird methods and members
197
 
    results.append(((chicken.isFlighted()) ?
198
 
        &quot;&lt;p&gt;chicken CAN fly.&lt;&#x2F;p&gt;&quot; :
199
 
        &quot;&lt;p&gt;chicken CAN NOT fly.&lt;&#x2F;p&gt;&quot;));
200
 
 
201
 
    results.append(&quot;&lt;p&gt;chicken&#x27;s name is &quot; + chicken.getName() + &quot;.&lt;&#x2F;p&gt;&quot;);
202
 
}
203
 
 
204
 
Y.on(&#x27;click&#x27;, showInheritance, &#x27;#demo_btn&#x27;);
205
 
 
206
 
 
207
 
});</pre>
208
 
 
209
 
</div>
210
 
            </div>
211
 
        </div>
212
 
 
213
 
        <div class="yui3-u-1-4">
214
 
            <div class="sidebar">
215
 
                
216
 
 
217
 
                
218
 
                    <div class="sidebox">
219
 
                        <div class="hd">
220
 
                            <h2 class="no-toc">Examples</h2>
221
 
                        </div>
222
 
 
223
 
                        <div class="bd">
224
 
                            <ul class="examples">
225
 
                                
226
 
                                    
227
 
                                        <li data-description="Setting up a YUI Instance">
228
 
                                            <a href="yui-core.html">YUI Core</a>
229
 
                                        </li>
230
 
                                    
231
 
                                
232
 
                                    
233
 
                                        <li data-description="Working with multiple YUI instances.">
234
 
                                            <a href="yui-multi.html">Multiple Instances</a>
235
 
                                        </li>
236
 
                                    
237
 
                                
238
 
                                    
239
 
                                        <li data-description="On-demand loading of YUI and non-YUI assets">
240
 
                                            <a href="yui-loader-ext.html">YUI Loader - Dynamically Adding YUI and External Modules</a>
241
 
                                        </li>
242
 
                                    
243
 
                                
244
 
                                    
245
 
                                        <li data-description="Create Class Hierarchies with &#x60;extend&#x60;">
246
 
                                            <a href="yui-extend.html">Create Class Hierarchies with &#x60;extend&#x60;</a>
247
 
                                        </li>
248
 
                                    
249
 
                                
250
 
                                    
251
 
                                        <li data-description="Creating a composition-based class structure using &#x60;augment&#x60;">
252
 
                                            <a href="yui-augment.html">Compose Classes of Objects with &#x60;augment&#x60;</a>
253
 
                                        </li>
254
 
                                    
255
 
                                
256
 
                                    
257
 
                                        <li data-description="Add behaviors to objects or static classes with &#x60;mix&#x60;">
258
 
                                            <a href="yui-mix.html">Add Behaviors to Objects with &#x60;mix&#x60;</a>
259
 
                                        </li>
260
 
                                    
261
 
                                
262
 
                                    
263
 
                                        <li data-description="Combine data sets and create shallow copies of objects with &#x60;merge&#x60;">
264
 
                                            <a href="yui-merge.html">Combine Data Sets with &#x60;merge&#x60;</a>
265
 
                                        </li>
266
 
                                    
267
 
                                
268
 
                                    
269
 
                                        <li data-description="Check data types with the &#x60;Lang Utilities&#x60;">
270
 
                                            <a href="yui-isa.html">Check Data Types with &#x60;Lang&#x60;</a>
271
 
                                        </li>
272
 
                                    
273
 
                                
274
 
                                    
275
 
                                        <li data-description="Get information about the current user agent with &#x60;UA&#x60;">
276
 
                                            <a href="yui-ua.html">Browser Detection with &#x60;UA&#x60;</a>
277
 
                                        </li>
278
 
                                    
279
 
                                
280
 
                                    
281
 
                                        <li data-description="Working with YUI 2 in 3">
282
 
                                            <a href="yui-yui2.html">Working with YUI 2 in 3</a>
283
 
                                        </li>
284
 
                                    
285
 
                                
286
 
                                    
287
 
                                        <li data-description="Natively use YUI Gallery Modules">
288
 
                                            <a href="yui-gallery.html">Natively use YUI Gallery Modules</a>
289
 
                                        </li>
290
 
                                    
291
 
                                
292
 
                                    
293
 
                                        <li data-description="Programatically use Loader">
294
 
                                            <a href="loader-resolve.html">Programatically use Loader</a>
295
 
                                        </li>
296
 
                                    
297
 
                                
298
 
                                    
299
 
                                        <li data-description="Executing functions in parallel">
300
 
                                            <a href="parallel.html">Using Y.Parallel</a>
301
 
                                        </li>
302
 
                                    
303
 
                                
304
 
                            </ul>
305
 
                        </div>
306
 
                    </div>
307
 
                
308
 
 
309
 
                
310
 
            </div>
311
 
        </div>
312
 
    </div>
313
 
</div>
314
 
 
315
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
316
 
<script>prettyPrint();</script>
317
 
 
318
 
</body>
319
 
</html>