|
0
|
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: Widget: Extending the base widget class</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 |
|
|
|
21 |
.yui-spinner-hidden { |
|
|
22 |
display:none; |
|
|
23 |
} |
|
|
24 |
|
|
|
25 |
.yui-spinner { |
|
|
26 |
display:-moz-inline-stack; |
|
|
27 |
display:inline-block; |
|
|
28 |
zoom:1; |
|
|
29 |
*display:inline; |
|
|
30 |
vertical-align:middle; |
|
|
31 |
} |
|
|
32 |
|
|
|
33 |
.yui-spinner-content { |
|
|
34 |
padding:1px; |
|
|
35 |
position:relative; |
|
|
36 |
} |
|
|
37 |
|
|
|
38 |
.yui-spinner-value { |
|
|
39 |
width:2em; |
|
|
40 |
height:1.5em; |
|
|
41 |
text-align:right; |
|
|
42 |
margin-right:22px; |
|
|
43 |
vertical-align:top; |
|
|
44 |
border:1px solid #000; |
|
|
45 |
padding:2px; |
|
|
46 |
} |
|
|
47 |
|
|
|
48 |
.yui-spinner-increment, .yui-spinner-decrement { |
|
|
49 |
position:absolute; |
|
|
50 |
height:1em; |
|
|
51 |
width:22px; |
|
|
52 |
overflow:hidden; |
|
|
53 |
text-indent:-10em; |
|
|
54 |
border:1px solid #999; |
|
|
55 |
margin:0; |
|
|
56 |
padding:0px; |
|
|
57 |
} |
|
|
58 |
|
|
|
59 |
.yui-spinner-increment { |
|
|
60 |
top:1px; |
|
|
61 |
*top:2px; |
|
|
62 |
right:1px; |
|
|
63 |
background:#ddd url(assets/arrows.png) no-repeat 50% 0px; |
|
|
64 |
} |
|
|
65 |
|
|
|
66 |
.yui-spinner-decrement { |
|
|
67 |
bottom:1px; |
|
|
68 |
*bottom:2px; |
|
|
69 |
right:1px; |
|
|
70 |
background:#ddd url(assets/arrows.png) no-repeat 50% -20px; |
|
|
71 |
} |
|
|
72 |
|
|
|
73 |
#widget-extend-example { |
|
|
74 |
padding:5px; |
|
|
75 |
} |
|
|
76 |
|
|
|
77 |
#widget-extend-example .hint { |
|
|
78 |
margin-top:10px; |
|
|
79 |
font-size:85%; |
|
|
80 |
color:#00a; |
|
|
81 |
} |
|
|
82 |
|
|
|
83 |
</style> |
|
|
84 |
</head> |
|
|
85 |
<body id="yahoo-com" class=" yui-skin-sam"> |
|
|
86 |
<div id="custom-doc" class="yui-t2"> |
|
|
87 |
<div id="hd"> |
|
|
88 |
<div id="ygunav"> |
|
|
89 |
<p> |
|
|
90 |
<em> |
|
|
91 |
<a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i> |
|
|
92 |
</em> |
|
|
93 |
</p> |
|
|
94 |
<form action="http://search.yahoo.com/search" id="sitesearchform"> |
|
|
95 |
<input name="vs" type="hidden" value="developer.yahoo.com"> |
|
|
96 |
<input name="vs" type="hidden" value="yuiblog.com"> |
|
|
97 |
<div id="sitesearch"> |
|
|
98 |
<label for="searchinput">Site Search (YDN & YUIBlog): </label> |
|
|
99 |
<input type="text" id="searchinput" name="p"> |
|
|
100 |
<input type="submit" value="Search" id="searchsubmit" class="ygbt"> |
|
|
101 |
</div> |
|
|
102 |
</form> |
|
|
103 |
</div> |
|
|
104 |
<div id="ygma"><a href="../../"><img src="../../assets/logo.gif" border="0" width="200" height="93"></a></div> |
|
|
105 |
<div id="pagetitle"><h1>YUI Library Examples: Widget: Extending the base widget class</h1></div> |
|
|
106 |
</div> |
|
|
107 |
<div id="bd"> |
|
|
108 |
|
|
|
109 |
<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> |
|
|
110 |
|
|
|
111 |
<div id="yui-main"> |
|
|
112 |
<div class="yui-b"> |
|
|
113 |
<div class="yui-ge"> |
|
|
114 |
<div class="yui-u first example" id="main"> |
|
|
115 |
|
|
|
116 |
<h2>Widget: Extending the base widget class</h2> |
|
|
117 |
|
|
|
118 |
<div id="example" class="promo"> |
|
|
119 |
<p> |
|
|
120 |
This example shows how to extend the base <code>Widget</code> class to create a simple, re-usable spinner control. The <code>Spinner</code> class created in the example is not intended to be a fully featured spinner. It is used here as a concrete example, to convey some of the key concepts to keep in mind when extending the <code>Widget</code> class. |
|
|
121 |
</p> |
|
|
122 |
|
|
|
123 |
<div class="module example-container "> |
|
|
124 |
<div class="hd exampleHd"> |
|
|
125 |
<p class="newWindowButton yui-skin-sam"> |
|
|
126 |
<a href="widget-extend_clean.html" target="_blank">View example in new window.</a> |
|
|
127 |
</p> |
|
|
128 |
</div> <div id="example-canvas" class="bd"> |
|
|
129 |
|
|
|
130 |
|
|
|
131 |
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== --> |
|
|
132 |
|
|
|
133 |
<div id="widget-extend-example"> |
|
|
134 |
A basic spinner widget: <div id="numberField"><input type="text" class="yui-spinner-value" value="20" /></div> |
|
|
135 |
<p class="hint">Click the buttons, or the arrow up/down and page up/down keys on your keyboard to change the spinner's value</p> |
|
|
136 |
</div> |
|
|
137 |
|
|
|
138 |
<script type="text/javascript"> |
|
|
139 |
YUI({base:"../../build/", timeout: 10000}).use("widget", function(Y) { |
|
|
140 |
|
|
|
141 |
var Lang = Y.Lang, |
|
|
142 |
Widget = Y.Widget, |
|
|
143 |
Node = Y.Node; |
|
|
144 |
|
|
|
145 |
/* Spinner class constructor */ |
|
|
146 |
function Spinner(config) { |
|
|
147 |
Spinner.superclass.constructor.apply(this, arguments); |
|
|
148 |
} |
|
|
149 |
|
|
|
150 |
/* |
|
|
151 |
* Required NAME static field, to identify the Widget class and |
|
|
152 |
* used as an event prefix, to generate class names etc. (set to the |
|
|
153 |
* class name in camel case). |
|
|
154 |
*/ |
|
|
155 |
Spinner.NAME = "spinner"; |
|
|
156 |
|
|
|
157 |
/* |
|
|
158 |
* The attribute configuration for the Spinner widget. Attributes can be |
|
|
159 |
* defined with default values, get/set functions and validator functions |
|
|
160 |
* as with any other class extending Base. |
|
|
161 |
*/ |
|
|
162 |
Spinner.ATTRS = { |
|
|
163 |
// The minimum value for the spinner. |
|
|
164 |
min : { |
|
|
165 |
value:0 |
|
|
166 |
}, |
|
|
167 |
|
|
|
168 |
// The maximum value for the spinner. |
|
|
169 |
max : { |
|
|
170 |
value:100 |
|
|
171 |
}, |
|
|
172 |
|
|
|
173 |
// The current value of the spinner. |
|
|
174 |
value : { |
|
|
175 |
value:0, |
|
|
176 |
validator: function(val) { |
|
|
177 |
return this._validateValue(val); |
|
|
178 |
} |
|
|
179 |
}, |
|
|
180 |
|
|
|
181 |
// Amount to increment/decrement the spinner when the buttons or arrow up/down keys are pressed. |
|
|
182 |
minorStep : { |
|
|
183 |
value:1 |
|
|
184 |
}, |
|
|
185 |
|
|
|
186 |
// Amount to increment/decrement the spinner when the page up/down keys are pressed. |
|
|
187 |
majorStep : { |
|
|
188 |
value:10 |
|
|
189 |
}, |
|
|
190 |
|
|
|
191 |
// The localizable strings for the spinner. This attribute is |
|
|
192 |
// defined by the base Widget class but has an empty value. The |
|
|
193 |
// spinner is simply providing a default value for the attribute. |
|
|
194 |
strings: { |
|
|
195 |
value: { |
|
|
196 |
tooltip: "Press the arrow up/down keys for minor increments, page up/down for major increments.", |
|
|
197 |
increment: "Increment", |
|
|
198 |
decrement: "Decrement" |
|
|
199 |
} |
|
|
200 |
} |
|
|
201 |
}; |
|
|
202 |
|
|
|
203 |
/* Static constant used to identify the classname applied to the spinners value field */ |
|
|
204 |
Spinner.INPUT_CLASS = Y.ClassNameManager.getClassName(Spinner.NAME, "value"); |
|
|
205 |
|
|
|
206 |
/* Static constants used to define the markup templates used to create Spinner DOM elements */ |
|
|
207 |
Spinner.INPUT_TEMPLATE = '<input type="text" class="' + Spinner.INPUT_CLASS + '">'; |
|
|
208 |
Spinner.BTN_TEMPLATE = '<button type="button"></button>'; |
|
|
209 |
|
|
|
210 |
/* |
|
|
211 |
* The HTML_PARSER static constant is used by the Widget base class to populate |
|
|
212 |
* the configuration for the spinner instance from markup already on the page. |
|
|
213 |
* |
|
|
214 |
* The Spinner class attempts to set the value of the spinner widget if it |
|
|
215 |
* finds the appropriate input element on the page. |
|
|
216 |
*/ |
|
|
217 |
Spinner.HTML_PARSER = { |
|
|
218 |
value: function (contentBox) { |
|
|
219 |
var node = contentBox.query("." + Spinner.INPUT_CLASS); |
|
|
220 |
return (node) ? parseInt(node.get("value")) : null; |
|
|
221 |
} |
|
|
222 |
}; |
|
|
223 |
|
|
|
224 |
/* Spinner extends the base Widget class */ |
|
|
225 |
Y.extend(Spinner, Widget, { |
|
|
226 |
|
|
|
227 |
/* |
|
|
228 |
* initializer is part of the lifecycle introduced by |
|
|
229 |
* the Widget class. It is invoked during construction, |
|
|
230 |
* and can be used to setup instance specific state. |
|
|
231 |
* |
|
|
232 |
* The Spinner class does not need to perform anything |
|
|
233 |
* specific in this method, but it is left in as an example. |
|
|
234 |
*/ |
|
|
235 |
initializer: function() { |
|
|
236 |
// Not doing anything special during initialization |
|
|
237 |
}, |
|
|
238 |
|
|
|
239 |
/* |
|
|
240 |
* destructor is part of the lifecycle introduced by |
|
|
241 |
* the Widget class. It is invoked during destruction, |
|
|
242 |
* and can be used to cleanup instance specific state. |
|
|
243 |
* |
|
|
244 |
* The spinner cleans up any node references it's holding |
|
|
245 |
* onto. The Widget classes destructor will purge the |
|
|
246 |
* widget's bounding box of event listeners, so spinner |
|
|
247 |
* only needs to clean up listeners it attaches outside of |
|
|
248 |
* the bounding box. |
|
|
249 |
*/ |
|
|
250 |
destructor : function() { |
|
|
251 |
this._documentMouseUpHandle.detach(); |
|
|
252 |
|
|
|
253 |
this.inputNode = null; |
|
|
254 |
this.incrementNode = null; |
|
|
255 |
this.decrementNode = null; |
|
|
256 |
}, |
|
|
257 |
|
|
|
258 |
/* |
|
|
259 |
* renderUI is part of the lifecycle introduced by the |
|
|
260 |
* Widget class. Widget's renderer method invokes: |
|
|
261 |
* |
|
|
262 |
* renderUI() |
|
|
263 |
* bindUI() |
|
|
264 |
* syncUI() |
|
|
265 |
* |
|
|
266 |
* renderUI is intended to be used by the Widget subclass |
|
|
267 |
* to create or insert new elements into the DOM. |
|
|
268 |
* |
|
|
269 |
* For spinner the method adds the input (if it's not already |
|
|
270 |
* present in the markup), and creates the inc/dec buttons |
|
|
271 |
*/ |
|
|
272 |
renderUI : function() { |
|
|
273 |
this._renderInput(); |
|
|
274 |
this._renderButtons(); |
|
|
275 |
}, |
|
|
276 |
|
|
|
277 |
/* |
|
|
278 |
* bindUI is intended to be used by the Widget subclass |
|
|
279 |
* to bind any event listeners which will drive the Widget UI. |
|
|
280 |
* |
|
|
281 |
* It will generally bind event listeners for attribute change |
|
|
282 |
* events, to update the state of the rendered UI in response |
|
|
283 |
* to attribute value changes, and also attach any DOM events, |
|
|
284 |
* to activate the UI. |
|
|
285 |
* |
|
|
286 |
* For spinner, the method: |
|
|
287 |
* |
|
|
288 |
* - Sets up the attribute change listener for the "value" attribute |
|
|
289 |
* |
|
|
290 |
* - Binds key listeners for the arrow/page keys |
|
|
291 |
* - Binds mouseup/down listeners on the boundingBox, document respectively. |
|
|
292 |
* - Binds a simple change listener on the input box. |
|
|
293 |
*/ |
|
|
294 |
bindUI : function() { |
|
|
295 |
this.after("valueChange", this._afterValueChange); |
|
|
296 |
|
|
|
297 |
var boundingBox = this.get("boundingBox"); |
|
|
298 |
|
|
|
299 |
// Looking for a key event which will fire continously across browsers while the key is held down. 38, 40 = arrow up/down, 33, 34 = page up/down |
|
|
300 |
var keyEventSpec = (!Y.UA.opera) ? "down:" : "press:"; |
|
|
301 |
keyEventSpec += "38, 40, 33, 34"; |
|
|
302 |
|
|
|
303 |
Y.on("key", Y.bind(this._onDirectionKey, this), boundingBox, keyEventSpec); |
|
|
304 |
Y.on("mousedown", Y.bind(this._onMouseDown, this), boundingBox); |
|
|
305 |
this._documentMouseUpHandle = Y.on("mouseup", Y.bind(this._onDocMouseUp, this), boundingBox.get("ownerDocument")); |
|
|
306 |
|
|
|
307 |
Y.on("change", Y.bind(this._onInputChange, this), this.inputNode); |
|
|
308 |
}, |
|
|
309 |
|
|
|
310 |
/* |
|
|
311 |
* syncUI is intended to be used by the Widget subclass to |
|
|
312 |
* update the UI to reflect the current state of the widget. |
|
|
313 |
* |
|
|
314 |
* For spinner, the method sets the value of the input field, |
|
|
315 |
* to match the current state of the value attribute. |
|
|
316 |
*/ |
|
|
317 |
syncUI : function() { |
|
|
318 |
this._uiSetValue(this.get("value")); |
|
|
319 |
}, |
|
|
320 |
|
|
|
321 |
/* |
|
|
322 |
* Creates the input control for the spinner and adds it to |
|
|
323 |
* the widget's content box, if not already in the markup. |
|
|
324 |
*/ |
|
|
325 |
_renderInput : function() { |
|
|
326 |
var contentBox = this.get("contentBox"), |
|
|
327 |
input = contentBox.query("." + Spinner.INPUT_CLASS), |
|
|
328 |
strings = this.get("strings"); |
|
|
329 |
|
|
|
330 |
if (!input) { |
|
|
331 |
input = Node.create(Spinner.INPUT_TEMPLATE); |
|
|
332 |
contentBox.appendChild(input); |
|
|
333 |
} |
|
|
334 |
|
|
|
335 |
input.set("title", strings.tooltip); |
|
|
336 |
this.inputNode = input; |
|
|
337 |
}, |
|
|
338 |
|
|
|
339 |
/* |
|
|
340 |
* Creates the button controls for the spinner and add them to |
|
|
341 |
* the widget's content box, if not already in the markup. |
|
|
342 |
*/ |
|
|
343 |
_renderButtons : function() { |
|
|
344 |
var contentBox = this.get("contentBox"), |
|
|
345 |
strings = this.get("strings"); |
|
|
346 |
|
|
|
347 |
var inc = this._createButton(strings.increment, this.getClassName("increment")); |
|
|
348 |
var dec = this._createButton(strings.decrement, this.getClassName("decrement")); |
|
|
349 |
|
|
|
350 |
this.incrementNode = contentBox.appendChild(inc); |
|
|
351 |
this.decrementNode = contentBox.appendChild(dec); |
|
|
352 |
}, |
|
|
353 |
|
|
|
354 |
/* |
|
|
355 |
* Utility method, to create a spinner button |
|
|
356 |
*/ |
|
|
357 |
_createButton : function(text, className) { |
|
|
358 |
|
|
|
359 |
var btn = Y.Node.create(Spinner.BTN_TEMPLATE); |
|
|
360 |
btn.set("innerHTML", text); |
|
|
361 |
btn.set("title", text); |
|
|
362 |
btn.addClass(className); |
|
|
363 |
|
|
|
364 |
return btn; |
|
|
365 |
}, |
|
|
366 |
|
|
|
367 |
/* |
|
|
368 |
* Bounding box mouse down handler. Will determine if the mouse down |
|
|
369 |
* is on one of the spinner buttons, and increment/decrement the value |
|
|
370 |
* accordingly. |
|
|
371 |
* |
|
|
372 |
* The method also sets up a timer, to support the user holding the mouse |
|
|
373 |
* down on the spinner buttons. The timer is cleared when a mouse up event |
|
|
374 |
* is detected. |
|
|
375 |
*/ |
|
|
376 |
_onMouseDown : function(e) { |
|
|
377 |
var node = e.target, |
|
|
378 |
dir, |
|
|
379 |
handled = false, |
|
|
380 |
currVal = this.get("value"), |
|
|
381 |
minorStep = this.get("minorStep"); |
|
|
382 |
|
|
|
383 |
if (node.hasClass(this.getClassName("increment"))) { |
|
|
384 |
this.set("value", currVal + minorStep); |
|
|
385 |
dir = 1; |
|
|
386 |
handled = true; |
|
|
387 |
} else if (node.hasClass(this.getClassName("decrement"))) { |
|
|
388 |
this.set("value", currVal - minorStep); |
|
|
389 |
dir = -1; |
|
|
390 |
handled = true; |
|
|
391 |
} |
|
|
392 |
|
|
|
393 |
if (handled) { |
|
|
394 |
this._setMouseDownTimers(dir, minorStep); |
|
|
395 |
} |
|
|
396 |
}, |
|
|
397 |
|
|
|
398 |
/* |
|
|
399 |
* Document mouse up handler. Clears the timers supporting |
|
|
400 |
* the "mouse held down" behavior. |
|
|
401 |
*/ |
|
|
402 |
_onDocMouseUp : function(e) { |
|
|
403 |
this._clearMouseDownTimers(); |
|
|
404 |
}, |
|
|
405 |
|
|
|
406 |
/* |
|
|
407 |
* Bounding box Arrow up/down, Page up/down key listener. |
|
|
408 |
* |
|
|
409 |
* Increments/Decrement the spinner value, based on the key pressed. |
|
|
410 |
*/ |
|
|
411 |
_onDirectionKey : function(e) { |
|
|
412 |
|
|
|
413 |
e.preventDefault(); |
|
|
414 |
|
|
|
415 |
var currVal = this.get("value"), |
|
|
416 |
newVal = currVal, |
|
|
417 |
minorStep = this.get("minorStep"), |
|
|
418 |
majorStep = this.get("majorStep"); |
|
|
419 |
|
|
|
420 |
switch (e.charCode) { |
|
|
421 |
case 38: |
|
|
422 |
newVal += minorStep; |
|
|
423 |
break; |
|
|
424 |
case 40: |
|
|
425 |
newVal -= minorStep; |
|
|
426 |
break; |
|
|
427 |
case 33: |
|
|
428 |
newVal += majorStep; |
|
|
429 |
newVal = Math.min(newVal, this.get("max")); |
|
|
430 |
break; |
|
|
431 |
case 34: |
|
|
432 |
newVal -= majorStep; |
|
|
433 |
newVal = Math.max(newVal, this.get("min")); |
|
|
434 |
break; |
|
|
435 |
} |
|
|
436 |
|
|
|
437 |
if (newVal !== currVal) { |
|
|
438 |
this.set("value", newVal); |
|
|
439 |
} |
|
|
440 |
}, |
|
|
441 |
|
|
|
442 |
/* |
|
|
443 |
* Simple change handler, to make sure user does not input an invalid value |
|
|
444 |
*/ |
|
|
445 |
_onInputChange : function(e) { |
|
|
446 |
if (!this._validateValue(this.inputNode.get("value"))) { |
|
|
447 |
this.syncUI(); |
|
|
448 |
} |
|
|
449 |
}, |
|
|
450 |
|
|
|
451 |
/* |
|
|
452 |
* Initiates mouse down timers, to increment slider, while mouse button |
|
|
453 |
* is held down |
|
|
454 |
*/ |
|
|
455 |
_setMouseDownTimers : function(dir, step) { |
|
|
456 |
this._mouseDownTimer = Y.later(500, this, function() { |
|
|
457 |
this._mousePressTimer = Y.later(100, this, function() { |
|
|
458 |
this.set("value", this.get("value") + (dir * step)); |
|
|
459 |
}, null, true) |
|
|
460 |
}); |
|
|
461 |
}, |
|
|
462 |
|
|
|
463 |
/* |
|
|
464 |
* Clears timers used to support the "mouse held down" behavior |
|
|
465 |
*/ |
|
|
466 |
_clearMouseDownTimers : function() { |
|
|
467 |
if (this._mouseDownTimer) { |
|
|
468 |
this._mouseDownTimer.cancel(); |
|
|
469 |
this._mouseDownTimer = null; |
|
|
470 |
} |
|
|
471 |
if (this._mousePressTimer) { |
|
|
472 |
this._mousePressTimer.cancel(); |
|
|
473 |
this._mousePressTimer = null; |
|
|
474 |
} |
|
|
475 |
}, |
|
|
476 |
|
|
|
477 |
/* |
|
|
478 |
* value attribute change listener. Updates the |
|
|
479 |
* value in the rendered input box, whenever the |
|
|
480 |
* attribute value changes. |
|
|
481 |
*/ |
|
|
482 |
_afterValueChange : function(e) { |
|
|
483 |
this._uiSetValue(e.newVal); |
|
|
484 |
}, |
|
|
485 |
|
|
|
486 |
/* |
|
|
487 |
* Updates the value of the input box to reflect |
|
|
488 |
* the value passed in |
|
|
489 |
*/ |
|
|
490 |
_uiSetValue : function(val) { |
|
|
491 |
this.inputNode.set("value", val); |
|
|
492 |
}, |
|
|
493 |
|
|
|
494 |
/* |
|
|
495 |
* value attribute default validator. Verifies that |
|
|
496 |
* the value being set lies between the min/max value |
|
|
497 |
*/ |
|
|
498 |
_validateValue: function(val) { |
|
|
499 |
var min = this.get("min"), |
|
|
500 |
max = this.get("max"); |
|
|
501 |
|
|
|
502 |
return (Lang.isNumber(val) && val >= min && val <= max); |
|
|
503 |
} |
|
|
504 |
}); |
|
|
505 |
|
|
|
506 |
// Create a new Spinner instance, drawing it's |
|
|
507 |
// starting value from an input field already on the |
|
|
508 |
// page (contained in the #numberField content box) |
|
|
509 |
var spinner = new Spinner({ |
|
|
510 |
contentBox: "#numberField", |
|
|
511 |
max:100, |
|
|
512 |
min:0 |
|
|
513 |
}); |
|
|
514 |
spinner.render(); |
|
|
515 |
spinner.focus(); |
|
|
516 |
}); |
|
|
517 |
</script> |
|
|
518 |
|
|
|
519 |
<!--END SOURCE CODE FOR EXAMPLE =============================== --> |
|
|
520 |
|
|
|
521 |
|
|
|
522 |
</div> |
|
|
523 |
</div> |
|
|
524 |
</div> |
|
|
525 |
|
|
|
526 |
<h3>Extending The <code>Widget</code> Class</h3> |
|
|
527 |
|
|
|
528 |
<h4>Basic Class Structure</h4> |
|
|
529 |
|
|
|
530 |
<p>Widgets classes follow the general pattern implemented by the <code>Spinner</code> class, shown in the code snippet below. The basic pattern for setting up a new widget class involves:</p> |
|
|
531 |
|
|
|
532 |
<ol> |
|
|
533 |
<li>Defining the constructor function for the new widget class, which invokes the superclass constructor to kick of the initialization chain <em>(line 2)</em></li> |
|
|
534 |
<li>Defining the static <code>NAME</code> property for the class, which is normally the class name in camel case, and is used to prefix events and CSS classes fired/created by the class <em>(line 11)</em></li> |
|
|
535 |
<li>Defining the static <code>ATTRS</code> property for the class, which defines the set of attribute which the class will introduce, in addition to the superclass attributes <em>(line 18-57)</em></li> |
|
|
536 |
<li>Extending the <code>Widget</code> class, and adding/over-riding any prototype properties/methods <em>(line 59)</em></li> |
|
|
537 |
</ol> |
|
|
538 |
|
|
|
539 |
<textarea name="code" class="JScript" rows="1" cols="60"> |
|
|
540 |
/* Spinner class constructor */ |
|
|
541 |
function Spinner(config) { |
|
|
542 |
Spinner.superclass.constructor.apply(this, arguments); |
|
|
543 |
} |
|
|
544 |
|
|
|
545 |
/* |
|
|
546 |
* Required NAME static field, to identify the Widget class and |
|
|
547 |
* used as an event prefix, to generate class names etc. (set to the |
|
|
548 |
* class name in camel case). |
|
|
549 |
*/ |
|
|
550 |
Spinner.NAME = "spinner"; |
|
|
551 |
|
|
|
552 |
/* |
|
|
553 |
* The attribute configuration for the Spinner widget. Attributes can be |
|
|
554 |
* defined with default values, get/set functions and validator functions |
|
|
555 |
* as with any other class extending Base. |
|
|
556 |
*/ |
|
|
557 |
Spinner.ATTRS = { |
|
|
558 |
// The minimum value for the spinner. |
|
|
559 |
min : { |
|
|
560 |
value:0 |
|
|
561 |
}, |
|
|
562 |
|
|
|
563 |
// The maximum value for the spinner. |
|
|
564 |
max : { |
|
|
565 |
value:100 |
|
|
566 |
}, |
|
|
567 |
|
|
|
568 |
// The current value of the spinner. |
|
|
569 |
value : { |
|
|
570 |
value:0, |
|
|
571 |
validator: function(val) { |
|
|
572 |
return this._validateValue(val); |
|
|
573 |
} |
|
|
574 |
}, |
|
|
575 |
|
|
|
576 |
// Amount to increment/decrement the spinner when the buttons, or arrow up/down keys are pressed. |
|
|
577 |
minorStep : { |
|
|
578 |
value:1 |
|
|
579 |
}, |
|
|
580 |
|
|
|
581 |
// Amount to increment/decrement the spinner when the page up/down keys are pressed. |
|
|
582 |
majorStep : { |
|
|
583 |
value:10 |
|
|
584 |
}, |
|
|
585 |
|
|
|
586 |
// The localizable strings for the spinner. This attribute is |
|
|
587 |
// defined by the base Widget class but has an empty value. The |
|
|
588 |
// spinner is simply providing a default value for the attribute. |
|
|
589 |
strings: { |
|
|
590 |
value: { |
|
|
591 |
tooltip: "Press the arrow up/down keys for minor increments, page up/down for major increments.", |
|
|
592 |
increment: "Increment", |
|
|
593 |
decrement: "Decrement" |
|
|
594 |
} |
|
|
595 |
} |
|
|
596 |
}; |
|
|
597 |
|
|
|
598 |
Y.extend(Spinner, Widget, { |
|
|
599 |
// Methods/properties to add to the prototype of the new class |
|
|
600 |
... |
|
|
601 |
}); |
|
|
602 |
</textarea> |
|
|
603 |
|
|
|
604 |
<p>Note that these steps are the same for any class which is derived from <a href="http://developer.yahoo.com/yui/3/base/"><code>Base</code></a>, nothing Widget specific is involved yet. |
|
|
605 |
Widget adds the concept of a rendered UI to the existing Base lifecycle (viz. init, destroy and attribute state configuration), which we'll see show up in Widget specific areas below.</p> |
|
|
606 |
|
|
|
607 |
<h4>The HTML_PARSER Property</h4> |
|
|
608 |
|
|
|
609 |
<p> |
|
|
610 |
The first Widget specific property <code>Spinner</code> implements is the static <a href="../../api/Widget.html#property_Widget.HTML_PARSER"><code>HTML_PARSER</code></a> property. It is used to set the initial widget configuration based on markup, providing basic progressive enhancement support. |
|
|
611 |
</p> |
|
|
612 |
<p> |
|
|
613 |
The value of the <code>HTML_PARSER</code> property is an object literal, where each property is a widget attribute name, and the value is either a selector string (if the attribute is a node reference) or a function which is executed to provide |
|
|
614 |
a value for the attribute from the markup on the page. Markup is essentially thought of as an additional data source for the user to set initial attribute values, outside of the configuration object passed to the constructor |
|
|
615 |
<em>(values passed to the constructor will take precedence over values picked up from markup)</em>. |
|
|
616 |
</p> |
|
|
617 |
|
|
|
618 |
<p>For <code>Spinner</code>, <code>HTML_PARSER</code> defines a function for the <code>value</code> attribute, which sets the initial value of the spinner based on an input field if present in the markup.</p> |
|
|
619 |
|
|
|
620 |
<textarea name="code" class="JScript" rows="1" cols="60"> |
|
|
621 |
/* |
|
|
622 |
* The HTML_PARSER static constant is used by the Widget base class to populate |
|
|
623 |
* the configuration for the spinner instance from markup already on the page. |
|
|
624 |
* |
|
|
625 |
* The Spinner class attempts to set the value of the spinner widget if it |
|
|
626 |
* finds the appropriate input element on the page. |
|
|
627 |
*/ |
|
|
628 |
Spinner.HTML_PARSER = { |
|
|
629 |
value: function (contentBox) { |
|
|
630 |
var node = contentBox.query("." + Spinner.INPUT_CLASS); |
|
|
631 |
return (node) ? parseInt(node.get("value")) : null; |
|
|
632 |
} |
|
|
633 |
}; |
|
|
634 |
</textarea> |
|
|
635 |
|
|
|
636 |
<h4>Lifecycle Methods: initializer, destructor</h4> |
|
|
637 |
|
|
|
638 |
<p>The <code>initializer</code> and <code>destructor</code> lifecycle methods are carried over from <code>Base</code>, and can be used to setup initial state during construction, and cleanup state during destruction respectively.</p> |
|
|
639 |
|
|
|
640 |
<p>For <code>Spinner</code>, there is nothing special we need to do in the <code>initializer</code> (attribute setup is already taken care of), but it's left in the example to round out the lifecycle discussion.</p> |
|
|
641 |
|
|
|
642 |
<p>The <code>destructor</code> takes care of detaching any event listeners <code>Spinner</code> adds outside of the bounding box (event listeners on/inside the bounding box are purged by <code>Widget</code>'s <code>destructor</code>).</p> |
|
|
643 |
|
|
|
644 |
<textarea name="code" class="JScript" rows="1" cols="60"> |
|
|
645 |
/* |
|
|
646 |
* initializer is part of the lifecycle introduced by |
|
|
647 |
* the Widget class. It is invoked during construction, |
|
|
648 |
* and can be used to setup instance specific state. |
|
|
649 |
* |
|
|
650 |
* The Spinner class does not need to perform anything |
|
|
651 |
* specific in this method, but it is left in as an example. |
|
|
652 |
*/ |
|
|
653 |
initializer: function(config) { |
|
|
654 |
// Not doing anything special during initialization |
|
|
655 |
}, |
|
|
656 |
|
|
|
657 |
/* |
|
|
658 |
* destructor is part of the lifecycle introduced by |
|
|
659 |
* the Widget class. It is invoked during destruction, |
|
|
660 |
* and can be used to cleanup instance specific state. |
|
|
661 |
* |
|
|
662 |
* The spinner cleans up any node references it's holding |
|
|
663 |
* onto. The Widget classes destructor will purge the |
|
|
664 |
* widget's bounding box of event listeners, so spinner |
|
|
665 |
* only needs to clean up listeners it attaches outside of |
|
|
666 |
* the bounding box. |
|
|
667 |
*/ |
|
|
668 |
destructor : function() { |
|
|
669 |
this._documentMouseUpHandle.detach(); |
|
|
670 |
|
|
|
671 |
this.inputNode = null; |
|
|
672 |
this.incrementNode = null; |
|
|
673 |
this.decrementNode = null; |
|
|
674 |
} |
|
|
675 |
</textarea> |
|
|
676 |
|
|
|
677 |
<h4>Rendering Lifecycle Methods: renderer, renderUI, bindUI, syncUI</h4> |
|
|
678 |
|
|
|
679 |
<p>Widget adds a <code>render</code> method to the <code>init</code> and <code>destroy</code> lifecycle methods provided by Base. The <code>init</code> and <code>destroy</code> methods invoke the corresponding <code>initializer</code> and <code>destructor</code> implementations for the widget. Similarly, the <code>render</code> method invokes the <code>renderer</code> implementation for the widget. Note that the <code>renderer</code> method is not chained automatically, unlike the <code>initializer</code> and <code>destructor</code> methods.</p> |
|
|
680 |
|
|
|
681 |
<p>The <code>Widget</code> class already provides a default <code>renderer</code> implementation, which invokes the following abstract methods in the order shown <em>(with their respective responsibilities)</em>:</p> |
|
|
682 |
|
|
|
683 |
<ol> |
|
|
684 |
<li><code>renderUI()</code> : responsible for creating/adding elements to the DOM to render the widget.</li> |
|
|
685 |
<li><code>bindUI()</code> : responsible for binding event listeners (both attribute change and DOM event listeners) to 'activate' the rendered UI.</li> |
|
|
686 |
<li><code>syncUI()</code> : responsible for updating the rendered UI based on the current state of the widget.</li> |
|
|
687 |
</ol> |
|
|
688 |
|
|
|
689 |
<p>Since the <code>Spinner</code> class has no need to modify the <code>Widget</code> <code>renderer</code> implementation, it simply implements the above 3 methods to handle the render phase:</p> |
|
|
690 |
|
|
|
691 |
<textarea name="code" class="JScript" rows="1" cols="60"> |
|
|
692 |
/* |
|
|
693 |
* For spinner the method adds the input (if it's not already |
|
|
694 |
* present in the markup), and creates the increment/decrement buttons |
|
|
695 |
*/ |
|
|
696 |
renderUI : function() { |
|
|
697 |
this._renderInput(); |
|
|
698 |
this._renderButtons(); |
|
|
699 |
}, |
|
|
700 |
|
|
|
701 |
/* |
|
|
702 |
* For spinner, the method: |
|
|
703 |
* |
|
|
704 |
* - Sets up the attribute change listener for the "value" attribute |
|
|
705 |
* |
|
|
706 |
* - Binds key listeners for the arrow/page keys |
|
|
707 |
* - Binds mouseup/down listeners on the boundingBox, document respectively. |
|
|
708 |
* - Binds a simple change listener on the input box. |
|
|
709 |
*/ |
|
|
710 |
bindUI : function() { |
|
|
711 |
this.after("valueChange", this._afterValueChange); |
|
|
712 |
|
|
|
713 |
var boundingBox = this.get("boundingBox"); |
|
|
714 |
|
|
|
715 |
// Looking for a key event which will fire continuously across browsers while the key is held down. 38, 40 = arrow up/down, 33, 34 = page up/down |
|
|
716 |
var keyEventSpec = (!Y.UA.opera) ? "down:" : "press:"; |
|
|
717 |
keyEventSpec += "38, 40, 33, 34"; |
|
|
718 |
|
|
|
719 |
|
|
|
720 |
Y.on("change", Y.bind(this._onInputChange, this), this.inputNode); |
|
|
721 |
Y.on("key", Y.bind(this._onDirectionKey, this), boundingBox, keyEventSpec); |
|
|
722 |
Y.on("mousedown", Y.bind(this._onMouseDown, this), boundingBox); |
|
|
723 |
this._documentMouseUpHandle = Y.on("mouseup", Y.bind(this._onDocMouseUp, this), boundingBox.get("ownerDocument")); |
|
|
724 |
}, |
|
|
725 |
|
|
|
726 |
/* |
|
|
727 |
* For spinner, the method sets the value of the input field, |
|
|
728 |
* to match the current state of the value attribute. |
|
|
729 |
*/ |
|
|
730 |
syncUI : function() { |
|
|
731 |
this._uiSetValue(this.get("value")); |
|
|
732 |
} |
|
|
733 |
</textarea> |
|
|
734 |
|
|
|
735 |
<h5>A Note On Key Event Listeners</h5> |
|
|
736 |
|
|
|
737 |
<p>The PR2 release adds basic support for <code>"key"</code> events, which are used by <code>Spinner</code> to setup a listener for arrow up/down and page up/down keys on the spinner's bounding box (line 30).</p> |
|
|
738 |
|
|
|
739 |
<p>Event's <code>"key"</code> support allows <code>Spinner</code> to define a single listener, which is only invoked for the key specification provided. The key specification in the above use case is <code>"down:38, 40, 33, 34"</code> for most browsers, indicating that |
|
|
740 |
the <code>_onDirectionKey</code> method should only be called if the bounding box receives a keydown event with a character code which is either 38, 40, 33 or 34. <code>"key"</code> specifications can also contain more <a href="../../api/YUI.html#event_key">advanced filter criteria</a>, involving modifiers such as CTRL and SHIFT.</p> |
|
|
741 |
|
|
|
742 |
<p>For the Spinner widget, we're looking for a key event which fires repeatedly while the key is held down. This differs for Opera, so we need to fork for the key event we're interested in. Future versions of <code>"key"</code> support will aim to provide this type of higher level cross-browser abstraction also.</p> |
|
|
743 |
|
|
|
744 |
<h4>Attribute Supporting Methods</h4> |
|
|
745 |
|
|
|
746 |
<p>Since all widgets are attribute driven, they all follow a pretty similar pattern when it comes to how those attributes are used. For a given attribute, widgets will generally have:</p> |
|
|
747 |
<ul> |
|
|
748 |
<li>A prototype method to listen for changes in the attribute</li> |
|
|
749 |
<li>A prototype method to update the state of the rendered UI, to reflect the value of an attribute.</li> |
|
|
750 |
<li>A prototype method used to set/get/validate the attribute.</li> |
|
|
751 |
</ul> |
|
|
752 |
|
|
|
753 |
<p>These methods are kept on the prototype to facilitate customization at any of the levels - event handling, ui updates, set/get/validation logic.</p> |
|
|
754 |
|
|
|
755 |
<p>For <code>Spinner</code>, these corresponding methods for the <code>value</code> attribute are: <code>_afterValueChange</code>, <code>_uiSetValue</code> and <code>_validateValue</code>:</p> |
|
|
756 |
|
|
|
757 |
<textarea name="code" class="JScript" rows="1" cols="60"> |
|
|
758 |
/* |
|
|
759 |
* value attribute change listener. Updates the |
|
|
760 |
* value in the rendered input box, whenever the |
|
|
761 |
* attribute value changes. |
|
|
762 |
*/ |
|
|
763 |
_afterValueChange : function(e) { |
|
|
764 |
this._uiSetValue(e.newVal); |
|
|
765 |
}, |
|
|
766 |
|
|
|
767 |
/* |
|
|
768 |
* Updates the value of the input box to reflect |
|
|
769 |
* the value passed in |
|
|
770 |
*/ |
|
|
771 |
_uiSetValue : function(val) { |
|
|
772 |
this.inputNode.set("value", val); |
|
|
773 |
}, |
|
|
774 |
|
|
|
775 |
/* |
|
|
776 |
* value attribute default validator. Verifies that |
|
|
777 |
* the value being set lies between the min/max value |
|
|
778 |
*/ |
|
|
779 |
_validateValue: function(val) { |
|
|
780 |
var min = this.get("min"), |
|
|
781 |
max = this.get("max"); |
|
|
782 |
|
|
|
783 |
return (Lang.isNumber(val) && val >= min && val <= max); |
|
|
784 |
} |
|
|
785 |
</textarea> |
|
|
786 |
|
|
|
787 |
<p>Since this example focuses on general patterns for widget development, validator/set/get functions are not defined for attributes such as min/max in the interests of keeping the example simple, but could be, in a production ready spinner.</p> |
|
|
788 |
|
|
|
789 |
<h4>Rendering Support Methods</h4> |
|
|
790 |
|
|
|
791 |
<p><code>Spinner</code>'s <code>renderUI</code> method hands off creation of the input field and buttons to the following helpers which use markup templates to generate node instances:</p> |
|
|
792 |
|
|
|
793 |
<textarea name="code" class="JScript" rows="1" cols="60"> |
|
|
794 |
/* |
|
|
795 |
* Creates the input field for the spinner and adds it to |
|
|
796 |
* the widget's content box, if not already in the markup. |
|
|
797 |
*/ |
|
|
798 |
_renderInput : function() { |
|
|
799 |
var contentBox = this.get("contentBox"), |
|
|
800 |
input = contentBox.query("." + Spinner.INPUT_CLASS), |
|
|
801 |
strings = this.get("strings"); |
|
|
802 |
|
|
|
803 |
if (!input) { |
|
|
804 |
input = Node.create(Spinner.INPUT_TEMPLATE); |
|
|
805 |
contentBox.appendChild(input); |
|
|
806 |
} |
|
|
807 |
|
|
|
808 |
input.set("title", strings.tooltip); |
|
|
809 |
this.inputNode = input; |
|
|
810 |
}, |
|
|
811 |
|
|
|
812 |
/* |
|
|
813 |
* Creates the button controls for the spinner and add them to |
|
|
814 |
* the widget's content box, if not already in the markup. |
|
|
815 |
*/ |
|
|
816 |
_renderButtons : function() { |
|
|
817 |
var contentBox = this.get("contentBox"), |
|
|
818 |
strings = this.get("strings"); |
|
|
819 |
|
|
|
820 |
var inc = this._createButton(strings.increment, this.getClassName("increment")); |
|
|
821 |
var dec = this._createButton(strings.decrement, this.getClassName("decrement")); |
|
|
822 |
|
|
|
823 |
this.incrementNode = contentBox.appendChild(inc); |
|
|
824 |
this.decrementNode = contentBox.appendChild(dec); |
|
|
825 |
}, |
|
|
826 |
|
|
|
827 |
/* |
|
|
828 |
* Utility method, to create a spinner button |
|
|
829 |
*/ |
|
|
830 |
_createButton : function(text, className) { |
|
|
831 |
|
|
|
832 |
var btn = Y.Node.create(Spinner.BTN_TEMPLATE); |
|
|
833 |
btn.set("innerHTML", text); |
|
|
834 |
btn.set("title", text); |
|
|
835 |
btn.addClass(className); |
|
|
836 |
|
|
|
837 |
return btn; |
|
|
838 |
} |
|
|
839 |
</textarea> |
|
|
840 |
|
|
|
841 |
<h4>DOM Event Listeners</h4> |
|
|
842 |
|
|
|
843 |
<p>The DOM event listeners attached during <code>bindUI</code> are straightforward event listeners, which receive the event facade for the DOM event, and update the spinner state accordingly.</p> |
|
|
844 |
|
|
|
845 |
<p>A couple of interesting points worth noting: In the <code>"key"</code> listener we set up, we can call <code>e.preventDefault()</code> without having to check the character code, since the <code>"key"</code> event specifier will only invoke the listener |
|
|
846 |
if one of the specified keys is pressed (arrow/page up/down)</p> |
|
|
847 |
|
|
|
848 |
<p>Also, to allow the spinner to update it's value while the mouse button is held down, we setup a timer, which gets cleared out when we receive a mouseup event on the document.</p> |
|
|
849 |
|
|
|
850 |
<textarea name="code" class="JScript" rows="1" cols="60"> |
|
|
851 |
/* |
|
|
852 |
* Bounding box Arrow up/down, Page up/down key listener. |
|
|
853 |
* |
|
|
854 |
* Increments/Decrement the spinner value, based on the key pressed. |
|
|
855 |
*/ |
|
|
856 |
_onDirectionKey : function(e) { |
|
|
857 |
e.preventDefault(); |
|
|
858 |
... |
|
|
859 |
switch (e.charCode) { |
|
|
860 |
case 38: |
|
|
861 |
newVal += minorStep; |
|
|
862 |
break; |
|
|
863 |
case 40: |
|
|
864 |
newVal -= minorStep; |
|
|
865 |
break; |
|
|
866 |
case 33: |
|
|
867 |
newVal += majorStep; |
|
|
868 |
newVal = Math.min(newVal, this.get("max")); |
|
|
869 |
break; |
|
|
870 |
case 34: |
|
|
871 |
newVal -= majorStep; |
|
|
872 |
newVal = Math.max(newVal, this.get("min")); |
|
|
873 |
break; |
|
|
874 |
} |
|
|
875 |
|
|
|
876 |
if (newVal !== currVal) { |
|
|
877 |
this.set("value", newVal); |
|
|
878 |
} |
|
|
879 |
}, |
|
|
880 |
|
|
|
881 |
/* |
|
|
882 |
* Bounding box mouse down handler. Will determine if the mouse down |
|
|
883 |
* is on one of the spinner buttons, and increment/decrement the value |
|
|
884 |
* accordingly. |
|
|
885 |
* |
|
|
886 |
* The method also sets up a timer, to support the user holding the mouse |
|
|
887 |
* down on the spinner buttons. The timer is cleared when a mouse up event |
|
|
888 |
* is detected. |
|
|
889 |
*/ |
|
|
890 |
_onMouseDown : function(e) { |
|
|
891 |
var node = e.target |
|
|
892 |
... |
|
|
893 |
if (node.hasClass(this.getClassName("increment"))) { |
|
|
894 |
this.set("value", currVal + minorStep); |
|
|
895 |
... |
|
|
896 |
} else if (node.hasClass(this.getClassName("decrement"))) { |
|
|
897 |
this.set("value", currVal - minorStep); |
|
|
898 |
... |
|
|
899 |
} |
|
|
900 |
|
|
|
901 |
if (handled) { |
|
|
902 |
this._setMouseDownTimers(dir); |
|
|
903 |
} |
|
|
904 |
}, |
|
|
905 |
|
|
|
906 |
/* |
|
|
907 |
* Document mouse up handler. Clears the timers supporting |
|
|
908 |
* the "mouse held down" behavior. |
|
|
909 |
*/ |
|
|
910 |
_onDocMouseUp : function(e) { |
|
|
911 |
this._clearMouseDownTimers(); |
|
|
912 |
}, |
|
|
913 |
|
|
|
914 |
/* |
|
|
915 |
* Simple change handler, to make sure user does not input an invalid value |
|
|
916 |
*/ |
|
|
917 |
_onInputChange : function(e) { |
|
|
918 |
if (!this._validateValue(this.inputNode.get("value"))) { |
|
|
919 |
// If the entered value is not valid, re-display the stored value |
|
|
920 |
this.syncUI(); |
|
|
921 |
} |
|
|
922 |
} |
|
|
923 |
</textarea> |
|
|
924 |
|
|
|
925 |
<h4>ClassName Support Methods</h4> |
|
|
926 |
|
|
|
927 |
<p>A key part of developing widgets which work with the DOM, is defining class names which it will use to mark the nodes it renders. These class names could be used to mark a node for later retrieval/lookup, for CSS application (both functional as well as cosmetic) or to indicate the current state of the widget.</p> |
|
|
928 |
|
|
|
929 |
<p>The widget infrastructure uses the <code>ClassNameManager</code> utility, to generate consistently named classes to apply to the nodes it adds to the page:</p> |
|
|
930 |
|
|
|
931 |
<textarea name="code" class="JScript" rows="1" cols="60"> |
|
|
932 |
Y.ClassNameManager.getClassName(Spinner.NAME, "value"); |
|
|
933 |
... |
|
|
934 |
this.getClassName("increment"); |
|
|
935 |
</textarea> |
|
|
936 |
|
|
|
937 |
<p> |
|
|
938 |
Class names generated by the Widget's <code>getClassName</code> prototype method use the NAME field of the widget, to generate a prefixed classname through <code>ClassNameManager</code> - e.g. for spinner the <code>this.getClassName("increment")</code> above will generate the class name <code>yui-spinner-increment</code> ("yui" being the system level prefix, "spinner" being the widget name). |
|
|
939 |
When you need to generate standard class names in static code (where you don't have a reference to <code>this.getClassName()</code>), you can use the ClassNameManager directly, as shown in line 1 above, to achieve the same results. |
|
|
940 |
</p> |
|
|
941 |
|
|
|
942 |
<h4>CSS Considerations</h4> |
|
|
943 |
|
|
|
944 |
<p>Since widget uses the <code>getClassName</code> method to generate state related class names and to mark the bounding box/content box of the widget (e.g. "yui-[widgetname]-content", "yui-[widgetname]-hidden", "yui-[widgetname]-disabled"), we need to provide the default CSS handling for states we're interested in handling for the new Spinner widget. The "yui-[widgetname]-hidden" class is probably one state class, which all widgets will provide implementations for.</p> |
|
|
945 |
|
|
|
946 |
<textarea name="code" class="CSS" rows="1" cols="60"> |
|
|
947 |
|
|
|
948 |
/* Controlling show/hide state using display (since this control is inline-block) */ |
|
|
949 |
.yui-spinner-hidden { |
|
|
950 |
display:none; |
|
|
951 |
} |
|
|
952 |
|
|
|
953 |
/* Bounding Box - Set the bounding box to be "inline block" for spinner */ |
|
|
954 |
.yui-spinner { |
|
|
955 |
display:-moz-inline-stack; |
|
|
956 |
display:inline-block; |
|
|
957 |
zoom:1; |
|
|
958 |
*display:inline; |
|
|
959 |
} |
|
|
960 |
|
|
|
961 |
/* Content Box - Start adding visual treatment for the spinner */ |
|
|
962 |
.yui-spinner-content { |
|
|
963 |
padding:1px; |
|
|
964 |
} |
|
|
965 |
|
|
|
966 |
/* Input Text Box, generated through getClassName("value") */ |
|
|
967 |
.yui-spinner-value { |
|
|
968 |
... |
|
|
969 |
} |
|
|
970 |
|
|
|
971 |
/* Button controls, generated through getClassName("increment") */ |
|
|
972 |
.yui-spinner-increment, .yui-spinner-decrement { |
|
|
973 |
... |
|
|
974 |
} |
|
|
975 |
</textarea> |
|
|
976 |
|
|
|
977 |
<h4>Using The Spinner Widget</h4> |
|
|
978 |
|
|
|
979 |
<p>For the example, we have an input field already on the page, which we'd like to enhance to create a Spinner instance:</p> |
|
|
980 |
|
|
|
981 |
<textarea name="code" class="HTML" rows="1" cols="60"> |
|
|
982 |
<div id="numberField"> |
|
|
983 |
<input type="text" class="yui-spinner-value" value="20" /> |
|
|
984 |
</div> |
|
|
985 |
</textarea> |
|
|
986 |
|
|
|
987 |
<p>We provide the constructor for the Spinner with the <code>contentBox</code> which contains the input field with our initial value. The <code>HTML_PARSER</code> code we saw earlier, will extract the value from the input field, and use it as the initial value for the Spinner instance:</p> |
|
|
988 |
|
|
|
989 |
<textarea name="code" class="JScript" rows="1" cols="60"> |
|
|
990 |
// Create a new Spinner instance, drawing it's |
|
|
991 |
// starting value from an input field already on the |
|
|
992 |
// page (contained in the #numberField content box) |
|
|
993 |
var spinner = new Spinner({ |
|
|
994 |
contentBox: "#numberField", |
|
|
995 |
max:100, |
|
|
996 |
min:0 |
|
|
997 |
}); |
|
|
998 |
spinner.render(); |
|
|
999 |
spinner.focus(); |
|
|
1000 |
</textarea> |
|
|
1001 |
</div> |
|
|
1002 |
<div class="yui-u sidebar"> |
|
|
1003 |
|
|
|
1004 |
|
|
|
1005 |
<div id="examples" class="mod box4"> |
|
|
1006 |
<div class="hd"> |
|
|
1007 |
<h4> |
|
|
1008 |
Widget Examples:</h4> |
|
|
1009 |
</div> |
|
|
1010 |
<div class="bd"> |
|
|
1011 |
<ul> |
|
|
1012 |
<li class='selected'><a href='../widget/widget-extend.html'>Extending the base widget class</a></li><li><a href='../widget/widget-build.html'>Creating custom widget classes</a></li><li><a href='../widget/widget-tooltip.html'>Creating a simple Tooltip widget</a></li> </ul> |
|
|
1013 |
</div> |
|
|
1014 |
</div> |
|
|
1015 |
|
|
|
1016 |
<div class="mod box4"> |
|
|
1017 |
<div class="hd"> |
|
|
1018 |
<h4>More Widget Resources:</h4> |
|
|
1019 |
</div> |
|
|
1020 |
<div class="bd"> |
|
|
1021 |
<ul> |
|
|
1022 |
<!-- <li><a href="http://developer.yahoo.com/yui/widget/">User's Guide</a> (external)</li> --> |
|
|
1023 |
<li><a href="../../api/module_widget.html">API Documentation</a></li> |
|
|
1024 |
</ul> |
|
|
1025 |
</div> |
|
|
1026 |
</div> |
|
|
1027 |
</div> |
|
|
1028 |
</div> |
|
|
1029 |
|
|
|
1030 |
</div> |
|
|
1031 |
</div> |
|
|
1032 |
|
|
|
1033 |
|
|
|
1034 |
<div class="yui-b toc3" id="tocWrapper"> |
|
|
1035 |
<!-- TABLE OF CONTENTS --> |
|
|
1036 |
<div id="toc"> |
|
|
1037 |
|
|
|
1038 |
<ul> |
|
|
1039 |
<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="item"><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="selected "><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> |
|
|
1040 |
</div> |
|
|
1041 |
</div> |
|
|
1042 |
</div><!--closes bd--> |
|
|
1043 |
|
|
|
1044 |
<div id="ft"> |
|
|
1045 |
<p class="first">Copyright © 2009 Yahoo! Inc. All rights reserved.</p> |
|
|
1046 |
<p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - |
|
|
1047 |
<a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - |
|
|
1048 |
<a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - |
|
|
1049 |
<a href="http://careers.yahoo.com/">Job Openings</a></p> |
|
|
1050 |
</div> |
|
|
1051 |
</div> |
|
|
1052 |
<script src="../../assets/dpSyntaxHighlighter.js"></script> |
|
|
1053 |
<script language="javascript"> |
|
|
1054 |
dp.SyntaxHighlighter.HighlightAll('code'); |
|
|
1055 |
</script> |
|
|
1056 |
</body> |
|
|
1057 |
</html> |