|
525
|
1 |
<!DOCTYPE html> |
|
|
2 |
<html lang="en"> |
|
|
3 |
<head> |
|
|
4 |
<meta charset="utf-8"> |
|
|
5 |
<title>Base</title> |
|
|
6 |
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic"> |
|
|
7 |
<link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css"> |
|
|
8 |
<link rel="stylesheet" href="../assets/css/main.css"> |
|
|
9 |
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css"> |
|
|
10 |
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png"> |
|
|
11 |
<script src="../../build/yui/yui-min.js"></script> |
|
|
12 |
|
|
|
13 |
</head> |
|
|
14 |
<body> |
|
|
15 |
<!-- |
|
|
16 |
<a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a> |
|
|
17 |
--> |
|
|
18 |
<div id="doc"> |
|
|
19 |
<div id="hd"> |
|
|
20 |
<h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1> |
|
|
21 |
</div> |
|
|
22 |
|
|
|
23 |
<a href="#toc" class="jump">Jump to Table of Contents</a> |
|
|
24 |
|
|
|
25 |
|
|
|
26 |
<h1>Base</h1> |
|
|
27 |
<div class="yui3-g"> |
|
|
28 |
<div class="yui3-u-3-4"> |
|
|
29 |
<div id="main"> |
|
|
30 |
<div class="content"><div class="intro"> |
|
|
31 |
<p>Base is designed to be a low-level foundation class from which other attribute- and event target-based classes in the |
|
|
32 |
YUI library can be derived. It provides a standard template for creating attribute-based objects across the |
|
|
33 |
library and provides a consistent <code>init()</code> and <code>destroy()</code> sequence that chains |
|
|
34 |
initialization (<code>initializer</code>) and destruction (<code>destructor</code>) methods for the class hierarchy.</p> |
|
|
35 |
|
|
|
36 |
<p>It also provides a way for classes to reuse implementation code through plugins, or through extensions.</p> |
|
|
37 |
</div> |
|
|
38 |
|
|
|
39 |
<h2 id="getting-started">Getting Started</h2> |
|
|
40 |
|
|
|
41 |
<p> |
|
|
42 |
To include the source files for Base and its dependencies, first load |
|
|
43 |
the YUI seed file if you haven't already loaded it. |
|
|
44 |
</p> |
|
|
45 |
|
|
|
46 |
<pre class="code prettyprint"><script src="http://yui.yahooapis.com/3.10.3/build/yui/yui-min.js"></script></pre> |
|
|
47 |
|
|
|
48 |
|
|
|
49 |
<p> |
|
|
50 |
Next, create a new YUI instance for your application and populate it with the |
|
|
51 |
modules you need by specifying them as arguments to the <code>YUI().use()</code> method. |
|
|
52 |
YUI will automatically load any dependencies required by the modules you |
|
|
53 |
specify. |
|
|
54 |
</p> |
|
|
55 |
|
|
|
56 |
<pre class="code prettyprint"><script> |
|
|
57 |
// Create a new YUI instance and populate it with the required modules. |
|
|
58 |
YUI().use('base', function (Y) { |
|
|
59 |
// Base is available and ready for use. Add implementation |
|
|
60 |
// code here. |
|
|
61 |
}); |
|
|
62 |
</script></pre> |
|
|
63 |
|
|
|
64 |
|
|
|
65 |
<p> |
|
|
66 |
For more information on creating YUI instances and on the |
|
|
67 |
<a href="http://yuilibrary.com/yui/docs/api/classes/YUI.html#method_use"><code>use()</code> method</a>, see the |
|
|
68 |
documentation for the <a href="../yui/index.html">YUI Global Object</a>. |
|
|
69 |
</p> |
|
|
70 |
|
|
|
71 |
|
|
|
72 |
<h2 id="extendbase">Extending Base</h2> |
|
|
73 |
|
|
|
74 |
<p>Although Base can be instantiated, it's really designed to be a root class, which you extend when creating your |
|
|
75 |
own <code>Attribute</code> and <code>EventTarget</code> based classes as shown below:</p> |
|
|
76 |
|
|
|
77 |
<pre class="code prettyprint">YUI().use("base", function(Y) { |
|
|
78 |
|
|
|
79 |
function MyClass(config) { |
|
|
80 |
|
|
|
81 |
// Invoke Base constructor, passing through arguments |
|
|
82 |
MyClass.superclass.constructor.apply(this, arguments); |
|
|
83 |
} |
|
|
84 |
|
|
|
85 |
Y.extend(MyClass, Y.Base, { |
|
|
86 |
// Prototype methods for your new class |
|
|
87 |
}); |
|
|
88 |
});</pre> |
|
|
89 |
|
|
|
90 |
|
|
|
91 |
<p>Base itself augments <code>Attribute</code>, which in turn augments <code>EventTarget</code>; Base is therefore both an <em>Attribute provider</em> and |
|
|
92 |
an <em>Event Target</em>.</p> |
|
|
93 |
|
|
|
94 |
<p>Base's constructor expects a configuration object literal, which is used to set up initial values for attributes during construction (discussed below).</p> |
|
|
95 |
|
|
|
96 |
<h2 id="staticprops">Static Properties</h2> |
|
|
97 |
|
|
|
98 |
<p>Base looks for two "static" properties which it requires you to add to your class constructor — <code>NAME</code> and <code>ATTRS</code>. Base uses these properties when setting up events and attributes for the class:</p> |
|
|
99 |
|
|
|
100 |
<pre class="code prettyprint">function MyClass(config) { |
|
|
101 |
MyClass.superclass.constructor.apply(this, arguments); |
|
|
102 |
} |
|
|
103 |
|
|
|
104 |
// Used to identify instances of this class |
|
|
105 |
// For example, to prefix event names |
|
|
106 |
|
|
|
107 |
MyClass.NAME = "myClass"; |
|
|
108 |
|
|
|
109 |
// "Associative Array", used to define the set of attributes |
|
|
110 |
// added by this class. The name of the attribute is the key, |
|
|
111 |
// and the object literal value acts as the configuration |
|
|
112 |
// object passed to addAttrs |
|
|
113 |
|
|
|
114 |
MyClass.ATTRS = { |
|
|
115 |
A : { |
|
|
116 |
// Attribute "A" configuration |
|
|
117 |
}, |
|
|
118 |
|
|
|
119 |
B : { |
|
|
120 |
// Attribute "B" configuration |
|
|
121 |
} |
|
|
122 |
} |
|
|
123 |
|
|
|
124 |
Y.extend(MyClass, Y.Base, { |
|
|
125 |
// Prototype methods for your new class |
|
|
126 |
});</pre> |
|
|
127 |
|
|
|
128 |
|
|
|
129 |
<h3 id="nameprop">NAME</h3> |
|
|
130 |
|
|
|
131 |
<p>The <code>NAME</code> property is a string which is used to identify the class.</p> |
|
|
132 |
|
|
|
133 |
<p>One core area where it is currently used is to prefix all events that are published by instances of your class. |
|
|
134 |
For example, any events published by the class <code>MyClass</code> in the above code snippet will have the <code>myClass</code> prefix. By convention the name string is a camelCase version of the class name.</p> |
|
|
135 |
|
|
|
136 |
<p>Event prefixes allow events with the same name fired from instances of different classes to be uniquely identified, when bubbled or broadcast. For instance, a <code>click</code> event on any Menu widget can be discerned by subscribing to the <code>menu:click</code> event; an Editor click would be distinguished as <code>editor:click</code>. Because YUI 3.x Custom Events bubble, this prefixing allows you to subscribe to events from specific classes at a higher level in your application — that is, you can listen from common event target, much the way you would when using event delegation when working with DOM events. For example:</p> |
|
|
137 |
|
|
|
138 |
<pre class="code prettyprint">// NAME is used to prefix the provided event type, if not already prefixed, |
|
|
139 |
// when publishing, firing and subscribing to events. |
|
|
140 |
|
|
|
141 |
MyClass.prototype.doSomething = function() { |
|
|
142 |
// Actually fires the event type "myclass:enabled" |
|
|
143 |
this.fire("enabled"); |
|
|
144 |
} |
|
|
145 |
|
|
|
146 |
... |
|
|
147 |
|
|
|
148 |
var o = new MyClass(cfg); |
|
|
149 |
|
|
|
150 |
o.on("enabled", function() { |
|
|
151 |
// Actually listening for "myclass:enabled". |
|
|
152 |
}); |
|
|
153 |
|
|
|
154 |
o.on("myclass:enabled", function() { |
|
|
155 |
// Also listening for "myclass:enabled" |
|
|
156 |
});</pre> |
|
|
157 |
|
|
|
158 |
|
|
|
159 |
|
|
|
160 |
<p>The <code>NAME</code> property is also used in the default <code>toString</code> implementation for Base.</p> |
|
|
161 |
|
|
|
162 |
<h3 id="attrsprop">ATTRS</h3> |
|
|
163 |
|
|
|
164 |
<p>The <code>ATTRS</code> property is an associative array (an object with attribute name/configuration pairs) which is used to define the default set of |
|
|
165 |
attributes that your class adds to each instance. The instance will contain attributes defined by each class in the class |
|
|
166 |
hierarchy from which it is created, with each class adding the set of attributes and supporting code that it |
|
|
167 |
requires.</p> |
|
|
168 |
|
|
|
169 |
<p>For example, this is the (partial) set of attributes which the <a href="http://yuilibrary.com/yui/docs/api/classes/DD.Drag.html#attrs">Drag</a> class defines:</p> |
|
|
170 |
|
|
|
171 |
<pre class="code prettyprint">Drag.ATTRS = { |
|
|
172 |
|
|
|
173 |
node: { |
|
|
174 |
setter: function(node) { |
|
|
175 |
var n = Y.one(node); |
|
|
176 |
if (!n) { |
|
|
177 |
Y.fail('DD.Drag: Invalid Node Given: ' + node); |
|
|
178 |
} |
|
|
179 |
return n; |
|
|
180 |
} |
|
|
181 |
}, |
|
|
182 |
|
|
|
183 |
dragNode: { |
|
|
184 |
setter: function(node) { |
|
|
185 |
var n = Y.one(node); |
|
|
186 |
if (!n) { |
|
|
187 |
Y.fail('DD.Drag: Invalid dragNode Given: ' + node); |
|
|
188 |
} |
|
|
189 |
return n; |
|
|
190 |
} |
|
|
191 |
}, |
|
|
192 |
|
|
|
193 |
offsetNode: { |
|
|
194 |
value: true |
|
|
195 |
}, |
|
|
196 |
|
|
|
197 |
clickPixelThresh: { |
|
|
198 |
value: DDM.get('clickPixelThresh') |
|
|
199 |
}, |
|
|
200 |
|
|
|
201 |
... |
|
|
202 |
|
|
|
203 |
}; // End of Drag.ATTRS associative array (object literal)</pre> |
|
|
204 |
|
|
|
205 |
|
|
|
206 |
|
|
|
207 |
<p>Each property in the object literal (e.g. <code>"dragNode"</code>), defines the name of the attribute to be added, and |
|
|
208 |
the corresponding value defines the attribute's configuration. See <a href="../attribute/index.html#configuration">Attribute's discussion of configuration properties</a> |
|
|
209 |
for more details about how configuration objects should be structured.</p> |
|
|
210 |
|
|
|
211 |
<p>When instantiating a class derived from Base, Base's <code>init()</code> method will initialize |
|
|
212 |
the set of attributes defined by the <code>ATTRS</code> property for each class in the class hierarchy. This helps avoid |
|
|
213 |
replication of attribute initialization code in the constructor/initializer of each class. |
|
|
214 |
</p> |
|
|
215 |
|
|
|
216 |
<p>It also defines a specific order in which |
|
|
217 |
attributes are initialized — starting from the Base class first and ending with the specific subclass being instantiated. Within a class, the order in which attributes are defined |
|
|
218 |
in the <code>ATTRS</code> property does not matter. If an attribute defined in the <code>ATTRS</code> configuration for the class, requests the value of |
|
|
219 |
another attribute defined after it in the <code>ATTRS</code> configuration (in its <code>valueFn</code> or <code>getter</code> for example), |
|
|
220 |
the later attribute will be initialized on demand, when the first attribute attempts to <code>get</code> the value of the later attribute. |
|
|
221 |
</p> |
|
|
222 |
|
|
|
223 |
<p> |
|
|
224 |
It is worth noting that Base adds or initializes attributes lazily for performance reasons, meaning the attribute will not be initialized until the first call to get or set it is made. This behavior |
|
|
225 |
can be overridden if desired for specific attributes by setting the <code>lazyAdd</code> configuration property to <code>false</code> (for example if the <code>setter</code> for the attribute is responsible |
|
|
226 |
for setting some other non attribute state in the object). |
|
|
227 |
</p> |
|
|
228 |
|
|
|
229 |
<p> |
|
|
230 |
<strong>Note:</strong> If the <code>ATTRS</code> of a class need to be statically updated after the class has been created or defined, then to do so safely use the <a href="http://yuilibrary.com/yui/docs/api/classes/Base.html#method_modifyAttrs">static <code>modifyAttrs()</code> method</a>. |
|
|
231 |
</p> |
|
|
232 |
|
|
|
233 |
<h2 id="initdestroy">Initialization and Destruction</h2> |
|
|
234 |
|
|
|
235 |
<p>Base implements final versions of its <code>init</code> and <code>destroy</code> methods used to establish the initialization and destruction lifecycle phases. |
|
|
236 |
Classes extending Base can perform operations during initialization or destruction by defining prototype-level <code>initializer</code> and <code>destructor</code> methods:</p> |
|
|
237 |
|
|
|
238 |
<pre class="code prettyprint">Y.extend(MyClass, Y.Base, { |
|
|
239 |
|
|
|
240 |
// Prototype methods for your new class |
|
|
241 |
|
|
|
242 |
// Tasks MyClass needs to perform during |
|
|
243 |
// the init() lifecycle phase |
|
|
244 |
initializer : function(cfg) { |
|
|
245 |
this._wrapper = Y.Node.create('<div class="yui-wrapper"></div>'); |
|
|
246 |
}, |
|
|
247 |
|
|
|
248 |
// Tasks MyClass needs to perform during |
|
|
249 |
// the destroy() lifecycle phase |
|
|
250 |
destructor : function() { |
|
|
251 |
Y.Event.purgeElement(this._wrapper); |
|
|
252 |
this._wrapper.get("parentNode").removeChild(this._wrapper); |
|
|
253 |
this._wrapper = null; |
|
|
254 |
} |
|
|
255 |
|
|
|
256 |
});</pre> |
|
|
257 |
|
|
|
258 |
|
|
|
259 |
|
|
|
260 |
<p>Base's <code>init</code> and <code>destroy</code> methods take care of invoking <code>initializer</code> and <code>destructor</code> methods for each class in the hierarchy. |
|
|
261 |
The implementations for each class do not need to call superclass versions of the method. Base ensures that initialization and destruction occur in a fixed order, following the class hierarchy.</p> |
|
|
262 |
|
|
|
263 |
<dl> |
|
|
264 |
<dt><code>initializer()</code></dt> |
|
|
265 |
<dd> |
|
|
266 |
Base's <code>init</code> method, which is invoked by Base's constructor, will invoke the <code>initializer</code> method for each class in the hierarchy — starting from the Base class first and ending with the subclass being instantiated. |
|
|
267 |
The <code>initializer</code> method for each class is invoked after its attributes have been initialized (as discussed above) and will receive the configuration object literal passed to the <code>init</code> method. |
|
|
268 |
</dd> |
|
|
269 |
<dt><code>destructor()</code></dt> |
|
|
270 |
<dd> |
|
|
271 |
Base's <code>destroy</code> method, when called, will invoke the <code>destructor</code> method for each class in the hierarchy — starting from the subclass instantiated to create the instance and ending with the Base class (the opposite of initialization). |
|
|
272 |
</dd> |
|
|
273 |
</dl> |
|
|
274 |
|
|
|
275 |
<p>If your class does not require any code to be executed during <code>init</code> or <code>destroy</code>, you do not need to define the corresponding <code>initializer</code> or <code>destructor</code> method on its prototype.</p> |
|
|
276 |
|
|
|
277 |
<p>The <a href="../assets/base/mycomponent.js.txt">"MyComponent" template file</a> provides a starting point for you to create your own components derived from <code>Base</code>.</p> |
|
|
278 |
|
|
|
279 |
<h2 id="plugins">Plugins</h2> |
|
|
280 |
|
|
|
281 |
<p> |
|
|
282 |
Plugins can be used to add atomic pieces of functionality or features to instances of objects derived from Base, without having to bake support, or even |
|
|
283 |
knowledge of the feature, into the core object class. This allows features to be mixed and matched per instance, without having to build all features into a monolithic class or having to ship multiple |
|
|
284 |
classes with varying permutations of features. |
|
|
285 |
</p> |
|
|
286 |
|
|
|
287 |
<p> |
|
|
288 |
<code>Plugin.Host</code> adds the following key methods to the <code>Base</code> class: |
|
|
289 |
</p> |
|
|
290 |
|
|
|
291 |
<dl> |
|
|
292 |
<dt><a href="http://yuilibrary.com/yui/docs/api/Plugin.Host.html#method_plug"><code>plug(pluginClass, pluginConfig)</code></a></dt> |
|
|
293 |
<dd> |
|
|
294 |
<p>Adds a plugin to the instance with the configuration specified. The <code>plug</code> method adds a new instance of the plugin |
|
|
295 |
and attaches it to the instance on the namespace (property) defined by the plugin class' <code>NS</code> property.</p> |
|
|
296 |
|
|
|
297 |
<p>The <code>plug</code> method also allows multiple plugins to be added in a single call by passing in an array of plugins with optional configurations as defined in the API documentation.</p> |
|
|
298 |
|
|
|
299 |
</dd> |
|
|
300 |
<dt><a href="http://yuilibrary.com/yui/docs/api/Plugin.Host.html#method_unplug"><code>unplug(pluginClass)</code></a> or <a href="http://yuilibrary.com/yui/docs/api/Plugin.Host.html#method_unplug"><code>unplug(namespace)</code></a></dt> |
|
|
301 |
<dd>Removes the provided plugin or the plugin at the attached namespace from the instance and destroys it.</dd> |
|
|
302 |
</dl> |
|
|
303 |
|
|
|
304 |
<p>The above 2 methods are designed to be used after an instance of the component has already been created. |
|
|
305 |
Plugins can also be added using the constructor configuration object, using the <code>plugins</code> |
|
|
306 |
configuration key. For example:</p> |
|
|
307 |
|
|
|
308 |
<pre class="code prettyprint">var overlay = new Y.Overlay({ |
|
|
309 |
srcNode: "#module", |
|
|
310 |
plugins : [{fn:AnimPlugin, cfg:{duration:2}}] |
|
|
311 |
});</pre> |
|
|
312 |
|
|
|
313 |
|
|
|
314 |
<p> |
|
|
315 |
Additionally, if the component developer wants a certain set of plugins added to his or her component by default, static <a href="http://yuilibrary.com/yui/docs/api/Base.html#method_Base.plug"><code>Base.plug</code></a> and <a href="http://yuilibrary.com/yui/docs/api/Base.html#method_Base.unplug"><code>Base.unplug</code></a> |
|
|
316 |
methods are provided, allowing the developer to define the list of plugins to be added as part of the class definition. |
|
|
317 |
</p> |
|
|
318 |
|
|
|
319 |
<p> |
|
|
320 |
The <a href="../plugin/index.html">Plugin landing page</a> discusses plugin development in detail. The <a href="../widget/widget-plugin.html">Widget IO Plugin</a>, <a href="../overlay/overlay-io-plugin.html">Overlay IO Plugin</a> and |
|
|
321 |
<a href="../overlay/overlay-anim-plugin.html">Overlay Animation Plugin</a> examples also provide a concrete look at plugin development. |
|
|
322 |
</p> |
|
|
323 |
|
|
|
324 |
<p> |
|
|
325 |
The <a href="../assets/base/../plugin/myplugin.js.txt">"MyPlugin" template file</a> provides a starting point for you to create your own plugins derived from <code>Plugin.Base</code>. |
|
|
326 |
</p> |
|
|
327 |
|
|
|
328 |
<h2 id="extensions">Extensions</h2> |
|
|
329 |
|
|
|
330 |
<p>The <code>Base</code> class provides a static <code>build</code> method used to create custom classes, by mixing a main class, with one or more extension classes.</p> |
|
|
331 |
|
|
|
332 |
<p>Extension classes are similar to plugins, in that they encapsulate or bundle specific feature implementations. However extensions are used to mix and match code at the class level, to create new classes, whereas plugins are used to mix and match code at the instance level.</p> |
|
|
333 |
|
|
|
334 |
<p>In addition to <code>build</code>, Base also provides the static <code>create</code> and <code>mix</code> methods, which are sugar methods on top of <code>Base.build</code>.</p> |
|
|
335 |
|
|
|
336 |
<dl> |
|
|
337 |
<dt><a href="http://yuilibrary.com/yui/docs/api/Base.html#method_Base.create"><code>Base.create</code></a></dt> |
|
|
338 |
<dd>The <code>create</code> sugar method makes the task of creating a completely new class, which mixes in extensions, a lot more succint, by providing a way for the caller to pass in additional prototype and static properties which |
|
|
339 |
will exist on the newly created class.</dd> |
|
|
340 |
<dt><a href="http://yuilibrary.com/yui/docs/api/Base.html#method_Base.mix"><code>Base.mix</code></a></dt> |
|
|
341 |
<dd>The <code>mix</code> sugar method on the other hand, can be used to add extensions into an already existing class.</dd> |
|
|
342 |
</dl> |
|
|
343 |
|
|
|
344 |
<h3 id="create">Create</h3> |
|
|
345 |
|
|
|
346 |
<p>The <code>Base.create</code> method can be used to dynamically create new classes that are derived from an existing main class and mix in additional "extension" classes to add methods, attributes, events and properties to the main class. |
|
|
347 |
<code>Base.create</code> leaves the original main and mixed-in classes untouched so that the main class can still be used without the additional features mixed in. <code>Base.mix</code>, on the other hand, can be used if modifying an existing class is the goal.</p> |
|
|
348 |
|
|
|
349 |
<pre class="code prettyprint">/* Main Class */ |
|
|
350 |
function Panel(cfg) { |
|
|
351 |
Panel.superclass.constructor.apply(this, arguments); |
|
|
352 |
} |
|
|
353 |
|
|
|
354 |
Panel.ATTRS = { |
|
|
355 |
// Panel attributes |
|
|
356 |
close : { ... }, |
|
|
357 |
minimize : { ... }, |
|
|
358 |
shadow : { ... }, |
|
|
359 |
... |
|
|
360 |
}; |
|
|
361 |
|
|
|
362 |
Y.extend(Panel, Y.Base, { |
|
|
363 |
// Panel methods |
|
|
364 |
show : function() { ... }, |
|
|
365 |
hide : function() { ... }, |
|
|
366 |
minimize : function() { ... } |
|
|
367 |
}; |
|
|
368 |
|
|
|
369 |
/* Additional Resizable Feature */ |
|
|
370 |
function Resizable() { |
|
|
371 |
this._initResizable(); |
|
|
372 |
} |
|
|
373 |
|
|
|
374 |
Resizable.ATTRS = { |
|
|
375 |
handles : { ... }, |
|
|
376 |
constrain : { ... } |
|
|
377 |
}; |
|
|
378 |
|
|
|
379 |
Resizable.prototype = { |
|
|
380 |
_initResizable : function() { ... } |
|
|
381 |
lock : function() { ... } |
|
|
382 |
}; |
|
|
383 |
|
|
|
384 |
/* Additional Modality Feature */ |
|
|
385 |
function Modal() { |
|
|
386 |
this._initModality(); |
|
|
387 |
} |
|
|
388 |
|
|
|
389 |
Modal.ATTRS = { |
|
|
390 |
modal : { ... }, |
|
|
391 |
region : { ... } |
|
|
392 |
}; |
|
|
393 |
|
|
|
394 |
Modal.prototype = { |
|
|
395 |
_initModality : function() { ... }, |
|
|
396 |
showMask() : function() { ... }, |
|
|
397 |
hideMask() : function() { ... } |
|
|
398 |
}; |
|
|
399 |
|
|
|
400 |
// Create a new class WindowPanel, which extends Panel, and |
|
|
401 |
// combines methods/attributes from Resizable and Modal |
|
|
402 |
|
|
|
403 |
var WindowPanel = Y.Base.create("windowPanel", Panel, [Resizable, Modal]); |
|
|
404 |
|
|
|
405 |
var wp = new WindowPanel({ |
|
|
406 |
shadow: true, |
|
|
407 |
modal: true, |
|
|
408 |
handles:["e", "s", "se"] |
|
|
409 |
}); |
|
|
410 |
|
|
|
411 |
wp.show(); |
|
|
412 |
wp.lock();</pre> |
|
|
413 |
|
|
|
414 |
|
|
|
415 |
<p>Under the hood, <code>Base.create</code>:</p> |
|
|
416 |
<ul> |
|
|
417 |
<li>Creates a new 'built' class by extending the main class passed in as the first argument.</li> |
|
|
418 |
<li>Augments the list of feature classes, or extensions, to the built class, so that it now has their prototype methods.</li> |
|
|
419 |
<li> |
|
|
420 |
<p> |
|
|
421 |
Aggregates or copies any known static properties on the built class. Static properties to setup on the built class are defined by the component or class author, through a <code>_buildCfg</code> static property on the main class, or on the extension. |
|
|
422 |
For example Base defines the <code>ATTRS</code> property as a property which needs to be custom aggregated when mixing in extentions, and Widget adds the <code>HTML_PARSER</code> property for aggregation. |
|
|
423 |
</p> |
|
|
424 |
<p> |
|
|
425 |
The <a href="http://yuilibrary.com/yui/docs/api/Base.html#method_Base.create"><code>Base.create</code> API Documention</a> provides more details about the structure of <code>_buildCfg</code> and how it can be used by component authors. |
|
|
426 |
</p> |
|
|
427 |
</li> |
|
|
428 |
</ul> |
|
|
429 |
|
|
|
430 |
<p>The new class constructor created by <code>Base.create</code> will invoke the constructors for the main and feature classes when the new class is instantiated, during the init part of the lifecycle.</p> |
|
|
431 |
|
|
|
432 |
<p>See Base's <a href="http://yuilibrary.com/yui/docs/api/Base.html"><code>API documentation</code></a> for more details on the <code>create</code> and <code>mix</code> methods.</p> |
|
|
433 |
|
|
|
434 |
<p>The <a href="../assets/base/myextension.js.txt">"MyExtension" template file</a> provides a starting point for you to create your own extensions.</p> |
|
|
435 |
</div> |
|
|
436 |
</div> |
|
|
437 |
</div> |
|
|
438 |
|
|
|
439 |
<div class="yui3-u-1-4"> |
|
|
440 |
<div class="sidebar"> |
|
|
441 |
|
|
|
442 |
<div id="toc" class="sidebox"> |
|
|
443 |
<div class="hd"> |
|
|
444 |
<h2 class="no-toc">Table of Contents</h2> |
|
|
445 |
</div> |
|
|
446 |
|
|
|
447 |
<div class="bd"> |
|
|
448 |
<ul class="toc"> |
|
|
449 |
<li> |
|
|
450 |
<a href="#getting-started">Getting Started</a> |
|
|
451 |
</li> |
|
|
452 |
<li> |
|
|
453 |
<a href="#extendbase">Extending Base</a> |
|
|
454 |
</li> |
|
|
455 |
<li> |
|
|
456 |
<a href="#staticprops">Static Properties</a> |
|
|
457 |
<ul class="toc"> |
|
|
458 |
<li> |
|
|
459 |
<a href="#nameprop">NAME</a> |
|
|
460 |
</li> |
|
|
461 |
<li> |
|
|
462 |
<a href="#attrsprop">ATTRS</a> |
|
|
463 |
</li> |
|
|
464 |
</ul> |
|
|
465 |
</li> |
|
|
466 |
<li> |
|
|
467 |
<a href="#initdestroy">Initialization and Destruction</a> |
|
|
468 |
</li> |
|
|
469 |
<li> |
|
|
470 |
<a href="#plugins">Plugins</a> |
|
|
471 |
</li> |
|
|
472 |
<li> |
|
|
473 |
<a href="#extensions">Extensions</a> |
|
|
474 |
<ul class="toc"> |
|
|
475 |
<li> |
|
|
476 |
<a href="#create">Create</a> |
|
|
477 |
</li> |
|
|
478 |
</ul> |
|
|
479 |
</li> |
|
|
480 |
</ul> |
|
|
481 |
</div> |
|
|
482 |
</div> |
|
|
483 |
|
|
|
484 |
|
|
|
485 |
|
|
|
486 |
|
|
|
487 |
|
|
|
488 |
<div class="sidebox"> |
|
|
489 |
<div class="hd"> |
|
|
490 |
<h2 class="no-toc">Examples That Use This Component</h2> |
|
|
491 |
</div> |
|
|
492 |
|
|
|
493 |
<div class="bd"> |
|
|
494 |
<ul class="examples"> |
|
|
495 |
|
|
|
496 |
|
|
|
497 |
<li data-description="Shows how to use Base.create and mix/match extensions to create custom Widget classes."> |
|
|
498 |
<a href="../widget/widget-build.html">Creating Custom Widget Classes With Extensions</a> |
|
|
499 |
</li> |
|
|
500 |
|
|
|
501 |
|
|
|
502 |
|
|
|
503 |
<li data-description="Shows how to extend the Widget class, and add WidgetPosition and WidgetStack to create a Tooltip widget class."> |
|
|
504 |
<a href="../widget/widget-tooltip.html">Creating a Simple Tooltip Widget With Extensions</a> |
|
|
505 |
</li> |
|
|
506 |
|
|
|
507 |
|
|
|
508 |
|
|
|
509 |
<li data-description="Shows how to extend the Widget class, and add WidgetParent and WidgetChild to create a simple ListBox widget."> |
|
|
510 |
<a href="../widget/widget-parentchild-listbox.html">Creating a Hierarchical ListBox Widget</a> |
|
|
511 |
</li> |
|
|
512 |
|
|
|
513 |
|
|
|
514 |
</ul> |
|
|
515 |
</div> |
|
|
516 |
</div> |
|
|
517 |
|
|
|
518 |
</div> |
|
|
519 |
</div> |
|
|
520 |
</div> |
|
|
521 |
</div> |
|
|
522 |
|
|
|
523 |
<script src="../assets/vendor/prettify/prettify-min.js"></script> |
|
|
524 |
<script>prettyPrint();</script> |
|
|
525 |
|
|
|
526 |
<script> |
|
|
527 |
YUI.Env.Tests = { |
|
|
528 |
examples: [], |
|
|
529 |
project: '../assets', |
|
|
530 |
assets: '../assets/base', |
|
|
531 |
name: 'base', |
|
|
532 |
title: 'Base', |
|
|
533 |
newWindow: '', |
|
|
534 |
auto: false |
|
|
535 |
}; |
|
|
536 |
YUI.Env.Tests.examples.push('widget-build'); |
|
|
537 |
YUI.Env.Tests.examples.push('widget-tooltip'); |
|
|
538 |
YUI.Env.Tests.examples.push('widget-parentchild-listbox'); |
|
|
539 |
|
|
|
540 |
</script> |
|
|
541 |
<script src="../assets/yui/test-runner.js"></script> |
|
|
542 |
|
|
|
543 |
|
|
|
544 |
|
|
|
545 |
</body> |
|
|
546 |
</html> |