1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<style type="text/css" scoped>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai #mylistbox em {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai font-style:normal;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai border:1px solid #aaa;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai padding:2px;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai .yui3-listbox {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai margin: .25em;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai border: solid 1px #000;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai background-color:#fff;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai white-space:nowrap;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai .yui3-listbox .yui3-listbox {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai margin-top: .25em;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai margin-bottom: .25em;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai border: none;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai .yui3-listbox .yui3-option,
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai .yui3-listbox .yui3-listbox-option {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai cursor:default;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai list-style-image:none;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai list-style-position:outside;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai list-style-type:none;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai .yui3-option-content,
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai .yui3-listbox-label {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai display: block;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai padding: .25em .5em;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai .yui3-listbox-content {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai overflow:auto;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai .yui3-listbox .yui3-listbox .yui3-option-content {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai margin-left:.5em;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai .yui3-listbox-label {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai font-weight: bold;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai .yui3-option-selected {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai background-color: #cccccc;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai .yui3-option-focused {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai outline: none;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai background-color: blue;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai color: #fff;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<div class="intro">
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai <p>This is an advanced example, in which we create a ListBox widget with nested Option widgets, by extending the base `Widget` class, and adding `WidgetParent` and `WidgetChild` extensions, through `Base.build`.</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai <p>The <a href="../tabview">TabView</a> component that is included in the YUI 3 library, is also built using the WidgetParent and WidgetChild extensions.</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<div class="example">
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai {{>widget-parentchild-listbox-source}}
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<h3>The WidgetParent and WidgetChild Extensions</h3>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p><a href="{{apiDocs}}/WidgetParent.html">WidgetParent</a> is an extension, designed to be used with `Base.build` to create a class of Widget which is designed to contain child Widgets (for example a Tree widget, which contains TreeNode children).
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen DesaiWidgetParent itself augments <a href="{{apiDocs}}/ArrayList.html">ArrayList</a> providing a convenient set of array iteration and convenience methods, allowing users of your class to easily work with parent's list of children.</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p><a href="{{apiDocs}}/WidgetChild.html">WidgetChild</a> is also an extension, designed to be used with `Base.build` to create a class of Widget which is designed to nested inside parent Widgets (for example a TreeNode widget, which sits inside a Tree widget).</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>A Widget can be built with both the WidgetParent and WidgetChild extensions (it can be both a Parent and a Child), in cases where we want to support multi-level hierarchies, such as the ListBox example below.</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>In addition to providing the basic support to manage (add/remove/iterate/render) children the Widget Parent/Child implementations also provides support for both single and multiple selection models.</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<h3>Using WidgetParent and WidgetChild to Create the ListBox Class</h3>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>For ListBox, since we're creating a new class from scratch, we use the sugar version of `Base.build`, called `Base.create`, which allows us to easily create a new class and define it's prototype and static properties/methods, in a single call, as shown below:</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai// Create a new class, ListBox, which extends Widget, and mixes in both the WidgetParent and WidgetChild
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai// extensions since we want to be able to nest one ListBox inside another, to create heirarchical listboxes
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen DesaiY.ListBox = Y.Base.create("listbox", Y.Widget, [Y.WidgetParent, Y.WidgetChild], {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // Prototype Properties for ListBox
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // Static Properties for ListBox
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>We can then go ahead and fill out the prototype and static properties we want to override in our ListBox implementation, while Widget, WidgetParent and WidgetChild provide the basic Widget rendering and parent-child relationship support. Comments inline below provide the background:</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<h4>Prototype Method and Properties</h4>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen DesaiY.ListBox = Y.Base.create("listbox", Y.Widget, [Y.WidgetParent, Y.WidgetChild], {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // The default content box for ListBoxes will be a UL (Widget uses a DIV by default)
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai CONTENT_TEMPLATE : "<ul></ul>",
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // Setup Custom Listeners
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai bindUI: function() {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // Setup custom focus handling, using the NodeFocusManager plugin
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // This will help us easily crete next/previous item handling using the arrow keys
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai this.get("boundingBox").plug(Y.Plugin.NodeFocusManager, {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai descendants: ".yui3-option",
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai next: "down:40", // Down arrow
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai previous: "down:38" // Up arrow
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai circular: true
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai this.get("boundingBox").on("contextmenu", function (event) {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // Setup listener to control keyboard based single/multiple item selection
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai this.on("option:keydown", function (event) {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai direction = (keyCode == 40);
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai if (this.get("multiple")) {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai if (keyCode == 40 || keyCode == 38) {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai this._selectNextSibling(item, direction);
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai this._selectNextSibling(item, direction);
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai if (keyCode == 13 || keyCode == 32) {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai item.set("selected", 1);
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // Setup listener to control mouse based single/multiple item selection
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai this.on("option:mousedown", function (event) {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai if (this.get("multiple")) {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai item.set("selected", 1);
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai item.set("selected", 1);
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai item.set("selected", 1);
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // Helper Method, to find the correct next sibling, taking into account nested ListBoxes
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai _selectNextSibling : function(item, direction) {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai var parent = item.get("parent"),
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai method = (direction) ? "next" : "previous",
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // Only go circular for the root listbox
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai circular = (parent === this),
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai sibling = item[method](circular);
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai if (sibling) {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // If we found a sibling, it's either an Option or a ListBox
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai if (sibling instanceof Y.ListBox) {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // If it's a ListBox, select it's first child (in the direction we're headed)
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai sibling.selectChild((direction) ? 0 : sibling.size() - 1);
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // If it's an Option, select it
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai sibling.set("selected", 1);
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // If we didn't find a sibling, we're at the last leaf in a nested ListBox
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai parent[method](true).set("selected", 1);
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // The markup template we use internally to render nested ListBox children
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai NESTED_TEMPLATE : '<li class="{nestedOptionClassName}"><em class="{labelClassName}">{label}</em></li>',
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai renderUI: function () {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // Handling Nested Child Element Rendering
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai if (this.get("depth") > -1) {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai var tokens = {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai labelClassName : this.getClassName("label"),
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai nestedOptionClassName : this.getClassName("option"),
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai label : this.get("label")
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai liHtml = Y.substitute(this.NESTED_TEMPLATE, tokens),
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai boundingBox = this.get("boundingBox"),
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai parent = boundingBox.get("parentNode");
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai} { /* static properties */ });
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<h4>Static Properties</h4>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>The only static property we're interested in defining for the ListBox class is the `ATTRS` property. Comments inline below provide the background:</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // Define any new attributes, or override existing ones
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // We need to define the default child class to use,
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // when we need to create children from the configuration
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // object passed to add or to the "children" attribute (which is provided by WidgetParent)
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // In this case, when a configuration object (e.g. { label:"My Option" }),
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // is passed into the add method,or as the value of the "children"
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // attribute, we want to create instances of Y.Option
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai defaultChildType: {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai value: "Option"
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // Setup Label Attribute
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<h3>Using WidgetChild to Create the Option (leaf) Class</h3>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>The Option class is pretty simple, and largely just needs the attribute and API provided by WidgetChild. We only need to over-ride the default templates and tabIndex handling:</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen DesaiY.Option = Y.Base.create("option", Y.Widget, [Y.WidgetChild], {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // Override the default DIVs used for rendering the bounding box and content box.
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai CONTENT_TEMPLATE : "<em></em>",
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai BOUNDING_TEMPLATE : "<li></li>",
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // Handle rendering the label attribute
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai renderUI: function () {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai this.get("contentBox").setContent(this.get("label"));
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // Setup Label Attribute
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // Override the default tabIndex for an Option,
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // since we want FocusManager to control keboard
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // based focus
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<h3>Adding The Code As A "listbox" Custom Module</h3>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>This example also shows how you can package code for re-use as a module, by registering it through the `YUI.add` method, specifying any requirements it has (the packaged code is available in ./assets/listbox.js).</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen DesaiYUI.add('listbox', function(Y) {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai}, '3.1.0' ,{requires:['substitute', 'widget', 'widget-parent', 'widget-child', 'node-focusmanager']});
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<h3>Using the Custom "listbox" Module</h3>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>To create an instance of a ListBox, we ask for the "listbox" module we packaged in the previous step, through `YUI().use("listbox")`:</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai "listbox": {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai requires: ["substitute", "widget", "widget-parent", "widget-child", "node-focusmanager"]
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai }).use("listbox", function (Y) {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // Create the top level ListBox instance, and start it off with
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // 2 children (the defaultChildType will be used to create instances of Y.Option with the
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // children configuration passed in below).
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai var listbox = new Y.ListBox({
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai id:"mylistbox",
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai width:"13em",
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai height:"15em",
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai { label: "Item One" },
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai { label: "Item Two" }
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>We can also use the `add` method provided by WidgetParent, to add children after contruction, and then render to the DOM:</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // Then we add a nested ListBox which itself has 2 children, using
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // the add API provided by WidgetParent
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai type: "ListBox",
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai label: "Item Three",
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai { label: "Item Three - One" },
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai { label: "Item Three - Two" }
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // One more Option child
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai listbox.add({ label: "Item Four" });
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // One more Option child, using providing an actual
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // instance, as opposed to just the configuration
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai new Y.Option({ label: "Item Five" })
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // And finally, a last nested ListBox, again with
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // 2 children
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai type: "ListBox",
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai label: "Item Six",
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai { label: "Item Six - One" },
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai { label: "Item Six - Two" }
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // Render it, using Widget's render method,
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // to the "#exampleContainer" element.
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai listbox.render("#exampleContainer");
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>The ListBox fires selectionChange events, every time it's selection state changes (provided by WidgetParent), which we can listen and respond to:</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai listbox.after("selectionChange", function(e) {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai var selection = this.get("selection");
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai if (selection instanceof Y.ListBox) {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai selection = selection.get("selection");
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai if (selection) {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai Y.one("#selection").setContent(selection.get("label"));
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<h3>The CSS</h3>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai .yui3-listbox {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai margin: .25em;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai border: solid 1px #000;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai background-color:#fff;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai white-space:nowrap;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai .yui3-listbox .yui3-listbox {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai margin-top: .25em;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai margin-bottom: .25em;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai border: none;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai .yui3-listbox .yui3-option,
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai .yui3-listbox .yui3-listbox-option {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai cursor:default;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai list-style-image:none;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai list-style-position:outside;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai list-style-type:none;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai .yui3-option-content,
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai .yui3-listbox-label {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai display: block;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai padding: .25em .5em;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai .yui3-listbox-content {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai overflow:auto;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai .yui3-listbox .yui3-listbox .yui3-option-content {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai margin-left:.5em;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai .yui3-listbox-label {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai font-weight: bold;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai .yui3-option-selected {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai background-color: #cccccc;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai .yui3-option-focused {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai outline: none;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai background-color: blue;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai color: #fff;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<h2>Complete Example Source</h2>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai{{>widget-parentchild-listbox-source}}