|
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: Basic Configuration</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 #example-out .entry { |
|
21 font-family:courier; |
|
22 margin-top:2px; |
|
23 } |
|
24 |
|
25 #example-out .header { |
|
26 font-weight:bold; |
|
27 font-family:arial; |
|
28 color:#8dd5e7; |
|
29 margin-top:10px; |
|
30 margin-bottom:3px; |
|
31 } |
|
32 |
|
33 #example-out { |
|
34 overflow:auto; |
|
35 border:1px solid #000; |
|
36 color:#ffffff; |
|
37 background-color:#004C6D; |
|
38 margin:5px; |
|
39 height:20em; |
|
40 width:30em; |
|
41 padding:2px; |
|
42 } |
|
43 |
|
44 </style> |
|
45 <script type="text/javascript"> |
|
46 YUI.namespace("example"); |
|
47 YUI.example.print = function(msg, cl) { |
|
48 var o = document.getElementById("example-out"); |
|
49 if (o) { |
|
50 cl = cl || ""; |
|
51 o.innerHTML += '<div class="entry ' + cl + '">' + msg + '</div>'; |
|
52 } |
|
53 } |
|
54 </script> |
|
55 |
|
56 </head> |
|
57 <body id="yahoo-com" class=" yui-skin-sam"> |
|
58 <div id="custom-doc" class="yui-t2"> |
|
59 <div id="hd"> |
|
60 <div id="ygunav"> |
|
61 <p> |
|
62 <em> |
|
63 <a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i> |
|
64 </em> |
|
65 </p> |
|
66 <form action="http://search.yahoo.com/search" id="sitesearchform"> |
|
67 <input name="vs" type="hidden" value="developer.yahoo.com"> |
|
68 <input name="vs" type="hidden" value="yuiblog.com"> |
|
69 <div id="sitesearch"> |
|
70 <label for="searchinput">Site Search (YDN & YUIBlog): </label> |
|
71 <input type="text" id="searchinput" name="p"> |
|
72 <input type="submit" value="Search" id="searchsubmit" class="ygbt"> |
|
73 </div> |
|
74 </form> |
|
75 </div> |
|
76 <div id="ygma"><a href="../../"><img src="../../assets/logo.gif" border="0" width="200" height="93"></a></div> |
|
77 <div id="pagetitle"><h1>YUI Library Examples: Attribute: Basic Configuration</h1></div> |
|
78 </div> |
|
79 <div id="bd"> |
|
80 |
|
81 <div id="bar-note"><p><strong>Note:</strong> This is YUI 3.x. Looking for <a href="http://developer.yahoo.com/yui/">YUI 2.x</a>?</p></div> |
|
82 |
|
83 <div id="yui-main"> |
|
84 <div class="yui-b"> |
|
85 <div class="yui-ge"> |
|
86 <div class="yui-u first example" id="main"> |
|
87 |
|
88 <h2>Attribute: Basic Configuration</h2> |
|
89 |
|
90 <div id="example" class="promo"> |
|
91 <p> |
|
92 <p>This example provides an introduction to the Attribute utility, showing how you can use it to add attribute support to your own custom classes.</p> |
|
93 |
|
94 <p>It is geared towards users who want to create their own classes from scratch and add Attribute support. |
|
95 In most cases you should consider extending the <a href="../../Base.html"><code>Base</code></a> class when you need managed attribute support, |
|
96 instead of creating your own class from scratch. |
|
97 |
|
98 <a href="../../Base.html"><code>Base</code></a> does the work described in this example for you, in addition to making it easier for users to extend you class. |
|
99 </p> |
|
100 |
|
101 |
|
102 </p> |
|
103 |
|
104 <div class="module example-container "> |
|
105 <div class="hd exampleHd"> |
|
106 <p class="newWindowButton yui-skin-sam"> |
|
107 <a href="attribute-basic_clean.html" target="_blank">View example in new window.</a> |
|
108 </p> |
|
109 </div> <div id="example-canvas" class="bd"> |
|
110 |
|
111 |
|
112 <!--BEGIN SOURCE CODE FOR EXAMPLE =============================== --> |
|
113 |
|
114 <div id="example-out"></div> |
|
115 |
|
116 <script type="text/javascript"> |
|
117 |
|
118 // Get a new instance of YUI and |
|
119 // load it with the required set of modules |
|
120 |
|
121 YUI({base:"../../build/", timeout: 10000}).use("node", "attribute", function(Y) { |
|
122 |
|
123 // Setup custom class which we want to |
|
124 // add managed attribute support to |
|
125 |
|
126 function MyClass(cfg) { |
|
127 // When constructed, setup the initial attributes for the |
|
128 // instance, by calling the addAttrs method. |
|
129 |
|
130 // Note that the addAttrs method doesn't protect the |
|
131 // configuration objects passed in as mentioned in |
|
132 // the API docs, so we use Y.merge to create a shallow |
|
133 // clone to pass in to addAttrs. |
|
134 this.addAttrs(Y.merge(MyClass.ATTRIBUTES), cfg); |
|
135 } |
|
136 |
|
137 // Setup static property to hold attribute config |
|
138 MyClass.ATTRIBUTES = { |
|
139 // Add 3 attributes, foo, bar and foobar |
|
140 "foo" : { |
|
141 value:5 |
|
142 }, |
|
143 |
|
144 "bar" : { |
|
145 value:"Hello World!" |
|
146 }, |
|
147 |
|
148 "foobar" : { |
|
149 value:true |
|
150 } |
|
151 }; |
|
152 |
|
153 // Augment custom class with Attribute |
|
154 Y.augment(MyClass, Y.Attribute); |
|
155 |
|
156 var o1 = new MyClass(); |
|
157 |
|
158 var print = YUI.example.print; |
|
159 |
|
160 print("o1 values set during construction:", "header"); |
|
161 print("foo:" + o1.get("foo")); |
|
162 print("bar:" + o1.get("bar")); |
|
163 print("foobar:" + o1.get("foobar")); |
|
164 |
|
165 o1.set("foo", 10); |
|
166 o1.set("bar", "Hello New World!"); |
|
167 o1.set("foobar", false); |
|
168 |
|
169 print("o1 new values:", "header"); |
|
170 print("new foo:" + o1.get("foo")); |
|
171 print("new bar:" + o1.get("bar")); |
|
172 print("new foobar:" + o1.get("foobar")); |
|
173 |
|
174 var o2 = new MyClass({ |
|
175 foo: 7, |
|
176 bar: "Aloha World!", |
|
177 foobar: false |
|
178 }); |
|
179 |
|
180 print("o2 values set during construction:", "header"); |
|
181 |
|
182 print("foo:" + o2.get("foo")); |
|
183 print("bar:" + o2.get("bar")); |
|
184 print("foobar:" + o2.get("foobar")); |
|
185 }); |
|
186 </script> |
|
187 |
|
188 <!--END SOURCE CODE FOR EXAMPLE =============================== --> |
|
189 |
|
190 |
|
191 </div> |
|
192 </div> |
|
193 </div> |
|
194 |
|
195 <h3>Setting Up Your Own Class To Use Attribute</h3> |
|
196 |
|
197 <p>In this example, we'll show how you can use the Attribute utility to add managed attributes to your own object classes. Later examples will show how you can configure more advanced attribute properties, and work with attribute change events.</p> |
|
198 |
|
199 <h4>Creating A YUI Instance</h4> |
|
200 |
|
201 <p>Before we get into attribute, a quick note on how we set up the instance of YUI we'll use for the examples. For all of the attribute examples, we'll setup our own instance of the YUI object and download the files we require on demand using the code pattern shown below:</p> |
|
202 |
|
203 <textarea name="code" class="JScript" cols="60" rows="1"> |
|
204 <script type="text/javascript"> |
|
205 |
|
206 // Create our local YUI instance, to avoid |
|
207 // modifying the global YUI object |
|
208 |
|
209 YUI({...}).use("attribute", "node", function(Y) { |
|
210 |
|
211 // Example code is written inside this function, |
|
212 // which gets passed our own YUI instance, Y, loaded |
|
213 // with the modules we asked for - "attribute" and "node" |
|
214 |
|
215 }); |
|
216 </script> |
|
217 </textarea> |
|
218 |
|
219 <p>The call to <code>YUI()</code> will create and return a new instance of the global YUI object for us to use. However this instance does not yet have all the modules we need for the examples.</p> |
|
220 |
|
221 <p>To load the modules, we invoke <code>use()</code> and pass it the list of modules we'd like populated on our new YUI instance - in this case, <code>attribute</code> and <code>node</code>. |
|
222 |
|
223 The YUI instance will pull down the source files for modules if they don't already exist on the page, plus any or their dependencies. |
|
224 When the source files are done downloading, the callback function which we pass in as the 3rd argument to <code>use()</code>, is invoked. Our custom YUI instance, <code>Y</code>, is passed to the callback, populated with the classes which make up the requested modules.</p> |
|
225 |
|
226 <p>This callback function is where we'll write all our example code. By working inside the callback function, we don't pollute the global namespace and we're also able to download the files we need on demand, rather than have them be on the page up front.</p> |
|
227 |
|
228 <p>The configuration object passed to <code>YUI()</code> when creating the instance is used to specify how (<em>combined, separate, debug, min etc.</em>) we want the files downloaded, and from where. The API documentation for the <a href="../../api/YUI.html">YUI object</a>, provides more information about the configuration options available.</p> |
|
229 |
|
230 <h4>Defining Your Custom Class</h4> |
|
231 |
|
232 <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>MyClass</code>. |
|
233 |
|
234 We then augment <code>MyClass</code> with <code>Y.Attribute</code>, so that it receives all of <code>Attribute's</code> methods:</p> |
|
235 |
|
236 <textarea name="code" class="JScript" cols="60" rows="1"> |
|
237 function MyClass(cfg) { |
|
238 ... |
|
239 } |
|
240 |
|
241 Y.augment(MyClass, Y.Attribute); |
|
242 </textarea> |
|
243 |
|
244 <h4>Adding Attributes</h4> |
|
245 |
|
246 <p>We can now set up any attributes we need for <code>MyClass</code> using the <code>addAttrs</code> method. For the basic example we add 3 attributes - <code>foo</code>,<code>bar</code>, and <code>foobar</code>, and provide an initial <code>value</code> for each. |
|
247 |
|
248 The same object literal we use to provide the initial value for the attribute will also be used in the other examples to configure attribute properties such as <code>readOnly</code> or <code>writeOnce</code>, and define <code>getter</code>, <code>setter</code> and <code>validator</code> methods for the attribute.</p> |
|
249 |
|
250 <p>In this example, the default set of attributes which <code>MyClass</code> will support is defined as a static property, <code>ATTRIBUTES</code>, on the constructor function. This gets passed to <code>addAttrs</code> to set up the attributes for each instance during construction. |
|
251 |
|
252 This is not required by Attribute, but allows the default attribute configuration to be easily customized by developers who may want to modify/extend our class. However, as a result of <code>ATTRIBUTES</code> being statically defined, we need to use <code>Y.merge</code> to create a shallow copy, before passing it to <code>addAttrs</code>, so that the static configuration is not modified by the instance. |
|
253 |
|
254 The complete definition for <code>MyClass</code> is shown below:</p> |
|
255 |
|
256 <textarea name="code" class="JScript" cols="60" rows="1"> |
|
257 function MyClass(cfg) { |
|
258 // When constructed, setup the initial attributes for the |
|
259 // instance, by calling the addAttrs method. |
|
260 this.addAttrs(Y.merge(MyClass.ATTRIBUTES), cfg); |
|
261 } |
|
262 |
|
263 // Setup static property to hold attribute config |
|
264 MyClass.ATTRIBUTES = { |
|
265 // Add 3 attributes, foo, bar and foobar |
|
266 "foo" : { |
|
267 value:5 |
|
268 }, |
|
269 "bar" : { |
|
270 value:"Hello World!" |
|
271 }, |
|
272 "foobar" : { |
|
273 value:true |
|
274 } |
|
275 }; |
|
276 |
|
277 // Augment custom class with Attribute |
|
278 Y.augment(MyClass, Y.Attribute); |
|
279 </textarea> |
|
280 |
|
281 <p>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 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 construction, as shown by the use of the <code>cfg</code> argument above.</p> |
|
282 |
|
283 <h4>Using Attributes</h4> |
|
284 |
|
285 <p>Now that we have <code>MyClass</code> defined with a set of attributes it supports, users can get and set attribute values on instances of <code>MyClass</code>:</p> |
|
286 |
|
287 <textarea name="code" class="JScript" cols="60" rows="1"> |
|
288 // Create a new instance of MyClass, without over-riding |
|
289 // any initial values |
|
290 var o1 = new MyClass(); |
|
291 |
|
292 // Print out the current values of foo, bar, foobar |
|
293 var print = YUI.example.print; |
|
294 print("<strong>o1 values set during construction:</strong>"); |
|
295 print("foo:" + o1.get("foo")); |
|
296 print("bar:" + o1.get("bar")); |
|
297 print("foobar:" + o1.get("foobar")); |
|
298 |
|
299 // Set the values of foo, bar and foobar using |
|
300 // the set method provided by Attribute |
|
301 o1.set("foo", 10); |
|
302 o1.set("bar", "Hello New World!"); |
|
303 o1.set("foobar", false); |
|
304 |
|
305 // Print out the new values of foo, bar, foobar |
|
306 print("<strong>o1 new values:</strong>"); |
|
307 print("new foo:" + o1.get("foo")); |
|
308 print("new bar:" + o1.get("bar")); |
|
309 print("new foobar:" + o1.get("foobar")); |
|
310 </textarea> |
|
311 |
|
312 <p>For the second instance that we create in the example we set the values of the attributes, using the constructor configuration argument:</p> |
|
313 |
|
314 <textarea name="code" class="JScript" cols="60" rows="1"> |
|
315 var o2 = new MyClass({ |
|
316 foo: 7, |
|
317 bar: "Aloha World!", |
|
318 foobar: false |
|
319 }); |
|
320 </textarea> |
|
321 </div> |
|
322 <div class="yui-u sidebar"> |
|
323 |
|
324 |
|
325 <div id="examples" class="mod box4"> |
|
326 <div class="hd"> |
|
327 <h4> |
|
328 Attribute Examples:</h4> |
|
329 </div> |
|
330 <div class="bd"> |
|
331 <ul> |
|
332 <li class='selected'><a href='../attribute/attribute-basic.html'>Basic Configuration</a></li><li><a href='../attribute/attribute-event.html'>Change Events</a></li><li><a href='../attribute/attribute-getset.html'>Getters, Setters and Validators</a></li><li><a href='../attribute/attribute-rw.html'>readOnly and writeOnce Configuration</a></li> </ul> |
|
333 </div> |
|
334 </div> |
|
335 |
|
336 <div class="mod box4"> |
|
337 <div class="hd"> |
|
338 <h4>More Attribute Resources:</h4> |
|
339 </div> |
|
340 <div class="bd"> |
|
341 <ul> |
|
342 <!-- <li><a href="http://developer.yahoo.com/yui/attribute/">User's Guide</a> (external)</li> --> |
|
343 <li><a href="../../api/module_attribute.html">API Documentation</a></li> |
|
344 </ul> |
|
345 </div> |
|
346 </div> |
|
347 </div> |
|
348 </div> |
|
349 |
|
350 </div> |
|
351 </div> |
|
352 |
|
353 |
|
354 <div class="yui-b toc3" id="tocWrapper"> |
|
355 <!-- TABLE OF CONTENTS --> |
|
356 <div id="toc"> |
|
357 |
|
358 <ul> |
|
359 <li class="sect first">YUI 3.x Project</li><li class="item"><a title="The Yahoo! User Interface (YUI) Library, 3.x Branch, " href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site (external)</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="The YUI Library can be downloaded from SourceForge" href="http://sourceforge.net/projects/yui/">YUI 3 on Sourceforge (external)</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/3/license.html">YUI License (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI (Global Prerequisite) - Functional Examples" href="../../examples/yui/index.html">YUI (Global Prerequisite)</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</a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget</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="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</a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource</a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType</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="History - Functional Examples" href="../../examples/history/index.html">History</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="Queue - Functional Examples" href="../../examples/queue/index.html">Queue</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</a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider</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</a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin</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</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">The YUI Community</li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="item"><a title="The Yahoo! Group YDN-JavaScript hosts the YUI community forum" href="http://tech.groups.yahoo.com/group/ydn-javascript/">YUI Forum (external)</a></li><li class="item"><a title="The Yahoo! Group yui3 is dedicated to the 3.x branch of the Yahoo! User Interface (YUI) Library." href="http://tech.groups.yahoo.com/group/yui3/">YUI 3 Forum (external)</a></li><li class="item"><a title="YUI is used by Yahoo! and by hundreds of other sites, including many you know and love." href="/yui/poweredby/">YUI Sightings (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><li class="sect">YUI Articles on the YUI Website</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="Reporting Bugs and Making Feature Requests for YUI Components" href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests (external)</a></li><li class="item"><a title="Serve YUI source files from Yahoo! -- free, fast, and simple" href="http://developer.yahoo.com/yui/3/articles/hosting/">Serving YUI Files from Yahoo! (external)</a></li></ul> |
|
360 </div> |
|
361 </div> |
|
362 </div><!--closes bd--> |
|
363 |
|
364 <div id="ft"> |
|
365 <p class="first">Copyright © 2009 Yahoo! Inc. All rights reserved.</p> |
|
366 <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - |
|
367 <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - |
|
368 <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - |
|
369 <a href="http://careers.yahoo.com/">Job Openings</a></p> |
|
370 </div> |
|
371 </div> |
|
372 <script src="../../assets/dpSyntaxHighlighter.js"></script> |
|
373 <script language="javascript"> |
|
374 dp.SyntaxHighlighter.HighlightAll('code'); |
|
375 </script> |
|
376 </body> |
|
377 </html> |