##// END OF EJS Templates
Updated widget tutorials 1-2
Jonathan Frederic -
Show More
@@ -17,7 +17,7 b''
17 "cell_type": "markdown",
17 "cell_type": "markdown",
18 "metadata": {},
18 "metadata": {},
19 "source": [
19 "source": [
20 "To use IPython widgets in the notebook, the widget namespace and display function need to be imported."
20 "To use IPython widgets in the notebook, the widget namespace and optionally the display function need to be imported."
21 ]
21 ]
22 },
22 },
23 {
23 {
@@ -46,20 +46,33 b''
46 "source": [
46 "source": [
47 "The IPython notebook comes preloaded with basic widgets that represent common data types. These widgets are\n",
47 "The IPython notebook comes preloaded with basic widgets that represent common data types. These widgets are\n",
48 "\n",
48 "\n",
49 "- BoolWidget : boolean \n",
49 "- CheckBoxWidget\n",
50 "- FloatRangeWidget : bounded float \n",
50 "- ToggleButtonWidget\n",
51 "- FloatWidget : unbounded float \n",
51 "- FloatSliderWidget\n",
52 "- ImageWidget : image\n",
52 "- BoundedFloatTextWidget\n",
53 "- IntRangeWidget : bounded integer \n",
53 "- FloatProgressWidget\n",
54 "- IntWidget : unbounded integer \n",
54 "- FloatTextWidget\n",
55 "- SelectionWidget : enumeration \n",
55 "- ImageWidget\n",
56 "- StringWidget : string \n",
56 "- IntSliderWidget\n",
57 "- BoundedIntTextWidget\n",
58 "- IntProgressWidget\n",
59 "- IntTextWidget\n",
60 "- ToggleButtonsWidget\n",
61 "- RadioButtonsWidget\n",
62 "- DropdownWidget\n",
63 "- ListBoxWidget\n",
64 "- HTMLWidget\n",
65 "- LatexWidget\n",
66 "- TextAreaWidget\n",
67 "- TextBoxWidget\n",
57 "\n",
68 "\n",
58 "A few special widgets are also included, that can be used to capture events and change how other widgets are displayed. These widgets are\n",
69 "A few special widgets are also included, that can be used to capture events and change how other widgets are displayed. These widgets are\n",
59 "\n",
70 "\n",
60 "- ButtonWidget \n",
71 "- ButtonWidget\n",
61 "- ContainerWidget \n",
72 "- ContainerWidget\n",
62 "- MulticontainerWidget \n",
73 "- PopupWidget\n",
74 "- AccordionWidget\n",
75 "- TabWidget\n",
63 "\n",
76 "\n",
64 "To see the complete list of widgets, one can execute the following"
77 "To see the complete list of widgets, one can execute the following"
65 ]
78 ]
@@ -78,18 +91,31 b''
78 "output_type": "pyout",
91 "output_type": "pyout",
79 "prompt_number": 2,
92 "prompt_number": 2,
80 "text": [
93 "text": [
81 "['BoolWidget',\n",
94 "['AccordionWidget',\n",
95 " 'BoundedFloatTextWidget',\n",
96 " 'BoundedIntTextWidget',\n",
82 " 'ButtonWidget',\n",
97 " 'ButtonWidget',\n",
98 " 'CheckBoxWidget',\n",
83 " 'ContainerWidget',\n",
99 " 'ContainerWidget',\n",
84 " 'DOMWidget',\n",
100 " 'DOMWidget',\n",
85 " 'FloatRangeWidget',\n",
101 " 'DropdownWidget',\n",
86 " 'FloatWidget',\n",
102 " 'FloatProgressWidget',\n",
103 " 'FloatSliderWidget',\n",
104 " 'FloatTextWidget',\n",
105 " 'HTMLWidget',\n",
87 " 'ImageWidget',\n",
106 " 'ImageWidget',\n",
88 " 'IntRangeWidget',\n",
107 " 'IntProgressWidget',\n",
89 " 'IntWidget',\n",
108 " 'IntSliderWidget',\n",
90 " 'SelectionContainerWidget',\n",
109 " 'IntTextWidget',\n",
91 " 'SelectionWidget',\n",
110 " 'LatexWidget',\n",
92 " 'StringWidget',\n",
111 " 'ListBoxWidget',\n",
112 " 'PopupWidget',\n",
113 " 'RadioButtonsWidget',\n",
114 " 'TabWidget',\n",
115 " 'TextAreaWidget',\n",
116 " 'TextBoxWidget',\n",
117 " 'ToggleButtonWidget',\n",
118 " 'ToggleButtonsWidget',\n",
93 " 'Widget']"
119 " 'Widget']"
94 ]
120 ]
95 }
121 }
@@ -107,7 +133,7 b''
107 "cell_type": "code",
133 "cell_type": "code",
108 "collapsed": false,
134 "collapsed": false,
109 "input": [
135 "input": [
110 "mywidget = widgets.FloatRangeWidget()"
136 "mywidget = widgets.FloatSliderWidget()"
111 ],
137 ],
112 "language": "python",
138 "language": "python",
113 "metadata": {},
139 "metadata": {},
@@ -118,7 +144,7 b''
118 "cell_type": "markdown",
144 "cell_type": "markdown",
119 "metadata": {},
145 "metadata": {},
120 "source": [
146 "source": [
121 "Constructing a widget does not display it on the page. To display a widget, the widget must be passed to the IPython `display(object)` method. `mywidget` is displayed by"
147 "Constructing a widget does not display it on the page. To display a widget, the widget must be passed to the IPython `display(object)` method or must be returned as the last item in the cell. `mywidget` is displayed by"
122 ]
148 ]
123 },
149 },
124 {
150 {
@@ -133,24 +159,22 b''
133 "prompt_number": 4
159 "prompt_number": 4
134 },
160 },
135 {
161 {
162 "cell_type": "markdown",
163 "metadata": {},
164 "source": [
165 "or"
166 ]
167 },
168 {
136 "cell_type": "code",
169 "cell_type": "code",
137 "collapsed": false,
170 "collapsed": false,
138 "input": [
171 "input": [
139 "mywidget.value\n"
172 "mywidget"
140 ],
173 ],
141 "language": "python",
174 "language": "python",
142 "metadata": {},
175 "metadata": {},
143 "outputs": [
176 "outputs": [],
144 {
177 "prompt_number": 5
145 "metadata": {},
146 "output_type": "pyout",
147 "prompt_number": 10,
148 "text": [
149 "50.6"
150 ]
151 }
152 ],
153 "prompt_number": 10
154 },
178 },
155 {
179 {
156 "cell_type": "markdown",
180 "cell_type": "markdown",
@@ -158,7 +182,7 b''
158 "source": [
182 "source": [
159 "It's important to realize that widgets are not the same as output, even though they are displayed with `display`. Widgets are drawn in a special widget area. That area is marked with a close button which allows you to collapse the widgets. Widgets cannot be interleaved with output. Doing so would break the ability to make simple animations using `clear_output`.\n",
183 "It's important to realize that widgets are not the same as output, even though they are displayed with `display`. Widgets are drawn in a special widget area. That area is marked with a close button which allows you to collapse the widgets. Widgets cannot be interleaved with output. Doing so would break the ability to make simple animations using `clear_output`.\n",
160 "\n",
184 "\n",
161 "Widgets are manipulated via special instance properties (traitlets). The names of these instance properties are listed in the widget's `keys` property (as seen below). A few of these properties are common to most, if not all, widgets. The common properties are `value`, `description`, `visible`, and `disabled`. `_css`, `_add_class`, and `_remove_class` are internal properties that exist in all widgets and should not be modified."
185 "Widgets are manipulated via special instance properties (traitlets). The names of these instance properties are listed in the widget's `keys` property (as seen below). A few of these properties are common to most, if not all, widgets. The common properties are `value`, `description`, `visible`, and `disabled`. `_css` and `_view_name` are internal properties that exist in all widgets and should not be modified."
162 ]
186 ]
163 },
187 },
164 {
188 {
@@ -173,28 +197,28 b''
173 {
197 {
174 "metadata": {},
198 "metadata": {},
175 "output_type": "pyout",
199 "output_type": "pyout",
176 "prompt_number": 11,
200 "prompt_number": 6,
177 "text": [
201 "text": [
178 "['value',\n",
202 "['_view_name',\n",
179 " 'step',\n",
203 " 'description',\n",
180 " 'max',\n",
181 " 'min',\n",
204 " 'min',\n",
182 " 'disabled',\n",
183 " 'orientation',\n",
205 " 'orientation',\n",
184 " 'description',\n",
206 " 'max',\n",
185 " 'visible',\n",
186 " '_css',\n",
207 " '_css',\n",
187 " 'view_name']"
208 " 'value',\n",
209 " 'disabled',\n",
210 " 'visible',\n",
211 " 'step']"
188 ]
212 ]
189 }
213 }
190 ],
214 ],
191 "prompt_number": 11
215 "prompt_number": 6
192 },
216 },
193 {
217 {
194 "cell_type": "markdown",
218 "cell_type": "markdown",
195 "metadata": {},
219 "metadata": {},
196 "source": [
220 "source": [
197 "Changing a widget's property value will automatically update that widget everywhere it is displayed in the notebook. Here the value of `mywidget` is set. The slider shown above (after input 4) updates automatically to the new value. In reverse, changing the value of the displayed widget will update the property's value."
221 "Changing a widget's property value will automatically update that widget everywhere it is displayed in the notebook. Here the value of `mywidget` is set. The slider shown above (after inputs 4 and 5) updates automatically to the new value. In reverse, changing the value of the displayed widget will update the property's value."
198 ]
222 ]
199 },
223 },
200 {
224 {
@@ -206,7 +230,7 b''
206 "language": "python",
230 "language": "python",
207 "metadata": {},
231 "metadata": {},
208 "outputs": [],
232 "outputs": [],
209 "prompt_number": 12
233 "prompt_number": 7
210 },
234 },
211 {
235 {
212 "cell_type": "markdown",
236 "cell_type": "markdown",
@@ -227,13 +251,13 b''
227 {
251 {
228 "metadata": {},
252 "metadata": {},
229 "output_type": "pyout",
253 "output_type": "pyout",
230 "prompt_number": 13,
254 "prompt_number": 8,
231 "text": [
255 "text": [
232 "25.0"
256 "0.0"
233 ]
257 ]
234 }
258 }
235 ],
259 ],
236 "prompt_number": 13
260 "prompt_number": 8
237 },
261 },
238 {
262 {
239 "cell_type": "markdown",
263 "cell_type": "markdown",
@@ -246,13 +270,13 b''
246 "cell_type": "code",
270 "cell_type": "code",
247 "collapsed": false,
271 "collapsed": false,
248 "input": [
272 "input": [
249 "mysecondwidget = widgets.SelectionWidget(values=[\"Item A\", \"Item B\", \"Item C\"], value=\"Nothing Selected\")\n",
273 "mysecondwidget = widgets.RadioButtonsWidget(values=[\"Item A\", \"Item B\", \"Item C\"], value=\"Item A\")\n",
250 "display(mysecondwidget)"
274 "display(mysecondwidget)"
251 ],
275 ],
252 "language": "python",
276 "language": "python",
253 "metadata": {},
277 "metadata": {},
254 "outputs": [],
278 "outputs": [],
255 "prompt_number": 14
279 "prompt_number": 9
256 },
280 },
257 {
281 {
258 "cell_type": "code",
282 "cell_type": "code",
@@ -266,101 +290,13 b''
266 {
290 {
267 "metadata": {},
291 "metadata": {},
268 "output_type": "pyout",
292 "output_type": "pyout",
269 "prompt_number": 15,
293 "prompt_number": 10,
270 "text": [
271 "u'Item B'"
272 ]
273 }
274 ],
275 "prompt_number": 15
276 },
277 {
278 "cell_type": "heading",
279 "level": 1,
280 "metadata": {},
281 "source": [
282 "Views"
283 ]
284 },
285 {
286 "cell_type": "markdown",
287 "metadata": {},
288 "source": [
289 "The data types that most of the widgets represent can be displayed more than one way. A `view` is a visual representation of a widget in the notebook. In the example in the section above, the default `view` for the `FloatRangeWidget` is used. The default view is set in the widgets `default_view_name` instance property (as seen below)."
290 ]
291 },
292 {
293 "cell_type": "code",
294 "collapsed": false,
295 "input": [
296 "mywidget.default_view_name"
297 ],
298 "language": "python",
299 "metadata": {},
300 "outputs": [
301 {
302 "metadata": {},
303 "output_type": "pyout",
304 "prompt_number": 19,
305 "text": [
294 "text": [
306 "u'FloatSliderView'"
295 "'Item A'"
307 ]
296 ]
308 }
297 }
309 ],
298 ],
310 "prompt_number": 19
299 "prompt_number": 10
311 },
312 {
313 "cell_type": "markdown",
314 "metadata": {},
315 "source": [
316 "When a widget is displayed using `display(...)`, the `default_view_name` is used to determine what view type should be used to display the widget. View names are case sensitive. Sometimes the default view isn't the best view to represent a piece of data. To change what view is used, either the `default_view_name` can be changed or the `view_name` kwarg of `display` can be set. This also can be used to display one widget multiple ways in one output (as seen below)."
317 ]
318 },
319 {
320 "cell_type": "code",
321 "collapsed": false,
322 "input": [
323 "display(mywidget)\n",
324 "display(mywidget, view_name=\"FloatTextView\")"
325 ],
326 "language": "python",
327 "metadata": {},
328 "outputs": [],
329 "prompt_number": 20
330 },
331 {
332 "cell_type": "markdown",
333 "metadata": {},
334 "source": [
335 "Some views work with multiple different widget types and some views only work with one. The complete list of views and supported widgets is below. The default views are italicized.\n",
336 "\n",
337 "| Widget Name | View Names |\n",
338 "|:-----------------------|:--------------------|\n",
339 "| BoolWidget | *CheckboxView* |\n",
340 "| | ToggleButtonView |\n",
341 "| ButtonWidget | *ButtonView* |\n",
342 "| ContainerWidget | *ContainerView* |\n",
343 "| | ModalView |\n",
344 "| FloatRangeWidget | *FloatSliderView* |\n",
345 "| | FloatTextView |\n",
346 "| | ProgressView |\n",
347 "| FloatWidget | *FloatTextView* |\n",
348 "| ImageWidget | *ImageView* |\n",
349 "| IntRangeWidget | *IntSliderView* |\n",
350 "| | IntTextView |\n",
351 "| | ProgressView |\n",
352 "| IntWidget | *IntTextView* |\n",
353 "| MulticontainerWidget | AccordionView |\n",
354 "| | *TabView* |\n",
355 "| SelectionWidget | ToggleButtonsView |\n",
356 "| | RadioButtonsView |\n",
357 "| | *DropdownView* |\n",
358 "| | ListBoxView |\n",
359 "| StringWidget | HTMLView |\n",
360 "| | LatexView |\n",
361 "| | TextAreaView |\n",
362 "| | *TextBoxView* |\n"
363 ]
364 }
300 }
365 ],
301 ],
366 "metadata": {}
302 "metadata": {}
@@ -102,7 +102,7 b''
102 "cell_type": "code",
102 "cell_type": "code",
103 "collapsed": false,
103 "collapsed": false,
104 "input": [
104 "input": [
105 "intrange = widgets.IntRangeWidget()\n",
105 "intrange = widgets.IntSliderWidget()\n",
106 "display(intrange)\n",
106 "display(intrange)\n",
107 "\n",
107 "\n",
108 "def on_value_change(name, value):\n",
108 "def on_value_change(name, value):\n",
@@ -117,223 +117,6 b''
117 "output_type": "stream",
117 "output_type": "stream",
118 "stream": "stdout",
118 "stream": "stdout",
119 "text": [
119 "text": [
120 "2\n"
121 ]
122 },
123 {
124 "output_type": "stream",
125 "stream": "stdout",
126 "text": [
127 "5\n"
128 ]
129 },
130 {
131 "output_type": "stream",
132 "stream": "stdout",
133 "text": [
134 "10\n"
135 ]
136 },
137 {
138 "output_type": "stream",
139 "stream": "stdout",
140 "text": [
141 "11\n"
142 ]
143 },
144 {
145 "output_type": "stream",
146 "stream": "stdout",
147 "text": [
148 "13\n"
149 ]
150 },
151 {
152 "output_type": "stream",
153 "stream": "stdout",
154 "text": [
155 "14\n"
156 ]
157 },
158 {
159 "output_type": "stream",
160 "stream": "stdout",
161 "text": [
162 "16\n"
163 ]
164 },
165 {
166 "output_type": "stream",
167 "stream": "stdout",
168 "text": [
169 "18\n"
170 ]
171 },
172 {
173 "output_type": "stream",
174 "stream": "stdout",
175 "text": [
176 "20\n"
177 ]
178 },
179 {
180 "output_type": "stream",
181 "stream": "stdout",
182 "text": [
183 "22\n"
184 ]
185 },
186 {
187 "output_type": "stream",
188 "stream": "stdout",
189 "text": [
190 "24\n"
191 ]
192 },
193 {
194 "output_type": "stream",
195 "stream": "stdout",
196 "text": [
197 "26\n"
198 ]
199 },
200 {
201 "output_type": "stream",
202 "stream": "stdout",
203 "text": [
204 "29\n"
205 ]
206 },
207 {
208 "output_type": "stream",
209 "stream": "stdout",
210 "text": [
211 "30\n"
212 ]
213 },
214 {
215 "output_type": "stream",
216 "stream": "stdout",
217 "text": [
218 "33\n"
219 ]
220 },
221 {
222 "output_type": "stream",
223 "stream": "stdout",
224 "text": [
225 "36\n"
226 ]
227 },
228 {
229 "output_type": "stream",
230 "stream": "stdout",
231 "text": [
232 "38\n"
233 ]
234 },
235 {
236 "output_type": "stream",
237 "stream": "stdout",
238 "text": [
239 "42\n"
240 ]
241 },
242 {
243 "output_type": "stream",
244 "stream": "stdout",
245 "text": [
246 "45\n"
247 ]
248 },
249 {
250 "output_type": "stream",
251 "stream": "stdout",
252 "text": [
253 "46\n"
254 ]
255 },
256 {
257 "output_type": "stream",
258 "stream": "stdout",
259 "text": [
260 "48\n"
261 ]
262 },
263 {
264 "output_type": "stream",
265 "stream": "stdout",
266 "text": [
267 "50\n"
268 ]
269 },
270 {
271 "output_type": "stream",
272 "stream": "stdout",
273 "text": [
274 "51\n"
275 ]
276 },
277 {
278 "output_type": "stream",
279 "stream": "stdout",
280 "text": [
281 "52\n"
282 ]
283 },
284 {
285 "output_type": "stream",
286 "stream": "stdout",
287 "text": [
288 "53\n"
289 ]
290 },
291 {
292 "output_type": "stream",
293 "stream": "stdout",
294 "text": [
295 "54\n"
296 ]
297 },
298 {
299 "output_type": "stream",
300 "stream": "stdout",
301 "text": [
302 "52\n"
303 ]
304 },
305 {
306 "output_type": "stream",
307 "stream": "stdout",
308 "text": [
309 "50\n"
310 ]
311 },
312 {
313 "output_type": "stream",
314 "stream": "stdout",
315 "text": [
316 "48\n"
317 ]
318 },
319 {
320 "output_type": "stream",
321 "stream": "stdout",
322 "text": [
323 "44\n"
324 ]
325 },
326 {
327 "output_type": "stream",
328 "stream": "stdout",
329 "text": [
330 "41\n"
331 ]
332 },
333 {
334 "output_type": "stream",
335 "stream": "stdout",
336 "text": [
337 "34\n"
120 "34\n"
338 ]
121 ]
339 },
122 },
@@ -341,35 +124,14 b''
341 "output_type": "stream",
124 "output_type": "stream",
342 "stream": "stdout",
125 "stream": "stdout",
343 "text": [
126 "text": [
344 "30\n"
127 "74\n"
345 ]
346 },
347 {
348 "output_type": "stream",
349 "stream": "stdout",
350 "text": [
351 "28\n"
352 ]
353 },
354 {
355 "output_type": "stream",
356 "stream": "stdout",
357 "text": [
358 "26\n"
359 ]
128 ]
360 },
129 },
361 {
130 {
362 "output_type": "stream",
131 "output_type": "stream",
363 "stream": "stdout",
132 "stream": "stdout",
364 "text": [
133 "text": [
365 "25\n"
134 "98\n"
366 ]
367 },
368 {
369 "output_type": "stream",
370 "stream": "stdout",
371 "text": [
372 "24\n"
373 ]
135 ]
374 }
136 }
375 ],
137 ],
@@ -411,8 +173,9 b''
411 "output_type": "stream",
173 "output_type": "stream",
412 "stream": "stdout",
174 "stream": "stdout",
413 "text": [
175 "text": [
414 "Register a callback to execute when the button is clicked. The\n",
176 "Register a callback to execute when the button is clicked. \n",
415 " callback can either accept no parameters or one sender parameter:\n",
177 "\n",
178 " The callback can either accept no parameters or one sender parameter:\n",
416 " - callback()\n",
179 " - callback()\n",
417 " - callback(sender)\n",
180 " - callback(sender)\n",
418 " If the callback has a sender parameter, the ButtonWidget instance that\n",
181 " If the callback has a sender parameter, the ButtonWidget instance that\n",
@@ -438,123 +201,11 b''
438 "cell_type": "code",
201 "cell_type": "code",
439 "collapsed": false,
202 "collapsed": false,
440 "input": [
203 "input": [
441 "display(intrange)\n",
442 "print('hi')"
443 ],
444 "language": "python",
445 "metadata": {},
446 "outputs": [
447 {
448 "output_type": "stream",
449 "stream": "stdout",
450 "text": [
451 "hi\n"
452 ]
453 },
454 {
455 "output_type": "stream",
456 "stream": "stdout",
457 "text": [
458 "23\n"
459 ]
460 },
461 {
462 "output_type": "stream",
463 "stream": "stdout",
464 "text": [
465 "24\n"
466 ]
467 },
468 {
469 "output_type": "stream",
470 "stream": "stdout",
471 "text": [
472 "28\n"
473 ]
474 },
475 {
476 "output_type": "stream",
477 "stream": "stdout",
478 "text": [
479 "30\n"
480 ]
481 },
482 {
483 "output_type": "stream",
484 "stream": "stdout",
485 "text": [
486 "37\n"
487 ]
488 },
489 {
490 "output_type": "stream",
491 "stream": "stdout",
492 "text": [
493 "39\n"
494 ]
495 },
496 {
497 "output_type": "stream",
498 "stream": "stdout",
499 "text": [
500 "41\n"
501 ]
502 },
503 {
504 "output_type": "stream",
505 "stream": "stdout",
506 "text": [
507 "44\n"
508 ]
509 },
510 {
511 "output_type": "stream",
512 "stream": "stdout",
513 "text": [
514 "46\n"
515 ]
516 },
517 {
518 "output_type": "stream",
519 "stream": "stdout",
520 "text": [
521 "48\n"
522 ]
523 },
524 {
525 "output_type": "stream",
526 "stream": "stdout",
527 "text": [
528 "50\n"
529 ]
530 },
531 {
532 "output_type": "stream",
533 "stream": "stdout",
534 "text": [
535 "51\n"
536 ]
537 },
538 {
539 "output_type": "stream",
540 "stream": "stdout",
541 "text": [
542 "53\n"
543 ]
544 }
545 ],
546 "prompt_number": 5
547 },
548 {
549 "cell_type": "code",
550 "collapsed": false,
551 "input": [
552 "button = widgets.ButtonWidget(description=\"Click Me!\")\n",
204 "button = widgets.ButtonWidget(description=\"Click Me!\")\n",
553 "display(button)\n",
205 "display(button)\n",
554 "\n",
206 "\n",
555 "def on_button_clicked(sender):\n",
207 "def on_button_clicked(sender):\n",
556 " print(\"Button clicked.\")\n",
208 " print(\"Button clicked.\")\n",
557 " intrange.value +=1\n",
558 "\n",
209 "\n",
559 "button.on_click(on_button_clicked)"
210 "button.on_click(on_button_clicked)"
560 ],
211 ],
@@ -565,28 +216,25 b''
565 "output_type": "stream",
216 "output_type": "stream",
566 "stream": "stdout",
217 "stream": "stdout",
567 "text": [
218 "text": [
568 "Button clicked.\n",
219 "Button clicked.\n"
569 "54\n"
570 ]
220 ]
571 },
221 },
572 {
222 {
573 "output_type": "stream",
223 "output_type": "stream",
574 "stream": "stdout",
224 "stream": "stdout",
575 "text": [
225 "text": [
576 "Button clicked.\n",
226 "Button clicked.\n"
577 "55\n"
578 ]
227 ]
579 },
228 },
580 {
229 {
581 "output_type": "stream",
230 "output_type": "stream",
582 "stream": "stdout",
231 "stream": "stdout",
583 "text": [
232 "text": [
584 "Button clicked.\n",
233 "Button clicked.\n"
585 "56\n"
586 ]
234 ]
587 }
235 }
588 ],
236 ],
589 "prompt_number": 6
237 "prompt_number": 5
590 },
238 },
591 {
239 {
592 "cell_type": "markdown",
240 "cell_type": "markdown",
@@ -598,62 +246,24 b''
598 {
246 {
599 "cell_type": "code",
247 "cell_type": "code",
600 "collapsed": false,
248 "collapsed": false,
601 "input": [],
602 "language": "python",
603 "metadata": {},
604 "outputs": [
605 {
606 "metadata": {},
607 "output_type": "pyout",
608 "prompt_number": 11,
609 "text": [
610 "{'content': {'data': \"{'parent_header': {}, 'msg_type': u'comm_msg', 'msg_id': u'3DBB06AD83C942DD85DC6477B08F1FBF', 'content': {u'data': {u'method': u'custom', u'custom_content': {u'event': u'click'}}, u'comm_id': u'eea5f11ae7aa473993dd0c81d6016648'}, 'header': {u'username': u'username', u'msg_id': u'3DBB06AD83C942DD85DC6477B08F1FBF', u'msg_type': u'comm_msg', u'session': u'0F6D6BE728DA47A38CFC4BDEACF34FC4'}, 'buffers': [], 'metadata': {}}\\ncustom message {'parent_header': {}, 'msg_type': u'comm_msg', 'msg_id': u'3DBB06AD83C942DD85DC6477B08F1FBF', 'content': {u'data': {u'method': u'custom', u'custom_content': {u'event': u'click'}}, u'comm_id': u'eea5f11ae7aa473993dd0c81d6016648'}, 'header': {u'username': u'username', u'msg_id': u'3DBB06AD83C942DD85DC6477B08F1FBF', u'msg_type': u'comm_msg', u'session': u'0F6D6BE728DA47A38CFC4BDEACF34FC4'}, 'buffers': [], 'metadata': {}}\\nhandling click\\n{u'event': u'click'}\\nButton clicked.\\n2\\n\",\n",
611 " 'name': 'stdout'},\n",
612 " 'header': {'msg_id': 'd9dc144a-d86c-42c1-8bab-f8a6bc525723',\n",
613 " 'msg_type': 'stream',\n",
614 " 'session': '9b9408d8-7420-4e0c-976d-cdda9f8d2564',\n",
615 " 'username': 'kernel'},\n",
616 " 'metadata': {},\n",
617 " 'msg_id': 'd9dc144a-d86c-42c1-8bab-f8a6bc525723',\n",
618 " 'msg_type': 'stream',\n",
619 " 'parent_header': {'msg_id': '3DBB06AD83C942DD85DC6477B08F1FBF',\n",
620 " 'msg_type': 'comm_msg',\n",
621 " 'session': '0F6D6BE728DA47A38CFC4BDEACF34FC4',\n",
622 " 'username': 'username'}}"
623 ]
624 }
625 ],
626 "prompt_number": 11
627 },
628 {
629 "cell_type": "code",
630 "collapsed": false,
631 "input": [
249 "input": [
632 "def show_button(sender=None):\n",
250 "def show_button(sender):\n",
633 " button = widgets.ButtonWidget()\n",
251 " button = widgets.ButtonWidget()\n",
634 " button.clicks = 0\n",
252 " button.clicks = 0\n",
635 " if sender is None:\n",
253 " sender.clicks += 1\n",
636 " button.description = \"0\"\n",
254 " button.description = \"%d\" % sender.clicks\n",
637 " else:\n",
638 " sender.clicks += 1\n",
639 " button.description = \"%d\" % sender.clicks\n",
640 " display(button)\n",
255 " display(button)\n",
641 " button.on_click(show_button)\n",
256 " button.on_click(show_button)\n",
642 "show_button()\n",
257 "button = widgets.ButtonWidget(description = \"Start\")\n",
258 "button.clicks = 0\n",
259 "display(button)\n",
260 "button.on_click(show_button)\n",
643 " "
261 " "
644 ],
262 ],
645 "language": "python",
263 "language": "python",
646 "metadata": {},
264 "metadata": {},
647 "outputs": [],
265 "outputs": [],
648 "prompt_number": 7
266 "prompt_number": 6
649 },
650 {
651 "cell_type": "code",
652 "collapsed": false,
653 "input": [],
654 "language": "python",
655 "metadata": {},
656 "outputs": []
657 }
267 }
658 ],
268 ],
659 "metadata": {}
269 "metadata": {}
@@ -17,9 +17,6 b''
17 "cell_type": "code",
17 "cell_type": "code",
18 "collapsed": false,
18 "collapsed": false,
19 "input": [
19 "input": [
20 "\n",
21 "\n",
22 "\n",
23 "from IPython.html import widgets # Widget definitions\n",
20 "from IPython.html import widgets # Widget definitions\n",
24 "from IPython.display import display # Used to display widgets in the notebook"
21 "from IPython.display import display # Used to display widgets in the notebook"
25 ],
22 ],
@@ -40,27 +37,37 b''
40 "cell_type": "markdown",
37 "cell_type": "markdown",
41 "metadata": {},
38 "metadata": {},
42 "source": [
39 "source": [
43 "To display widget A inside widget B, widget A must be a child of widget B. With IPython widgets, the widgets are instances that live in the back-end (usally Python). There can be multiple views displayed in the front-end that represent one widget in the backend. Each view can be displayed at a different time, or even displayed two or more times in the same output. Because of this, the parent of a widget can only be set before the widget has been displayed.\n",
40 "To display widget A inside widget B, widget A must be a child of widget B. With IPython widgets, the widgets are instances that live in the back-end (usally Python). There can be multiple views displayed in the front-end that represent one widget in the backend. Each view can be displayed at a different time. Only one instance of any particular model can be child of another. In other words, *widget A* cannot have *widget B* listed twice in it's children list.\n",
44 "\n",
41 "\n",
45 "Every widget has a `parent` property. This property can be set via a kwarg in the widget's constructor or after construction, but before display. Calling display on an object with children automatically displays those children too (as seen below)."
42 "Widgets that can contain other widgets have a `children` property. This property can be set via a kwarg in the widget's constructor or after construction. Calling display on an object with children automatically displays those children too (as seen below)."
46 ]
43 ]
47 },
44 },
48 {
45 {
49 "cell_type": "code",
46 "cell_type": "code",
50 "collapsed": false,
47 "collapsed": false,
51 "input": [
48 "input": [
49 "floatrange = widgets.FloatSliderWidget() # You can set the parent in the constructor,\n",
52 "\n",
50 "\n",
53 "floatrange = widgets.FloatRangeWidget() # You can set the parent in the constructor,\n",
51 "string = widgets.TextBocWidget(value='hi')\n",
54 "\n",
55 "string = widgets.StringWidget(value='hi')\n",
56 "container = widgets.ContainerWidget(children=[floatrange, string])\n",
52 "container = widgets.ContainerWidget(children=[floatrange, string])\n",
57 "\n",
53 "\n",
58 "display(container) # Displays the `container` and all of it's children."
54 "display(container) # Displays the `container` and all of it's children."
59 ],
55 ],
60 "language": "python",
56 "language": "python",
61 "metadata": {},
57 "metadata": {},
62 "outputs": [],
58 "outputs": [
63 "prompt_number": 2
59 {
60 "ename": "AttributeError",
61 "evalue": "'module' object has no attribute 'TextBocWidget'",
62 "output_type": "pyerr",
63 "traceback": [
64 "\u001b[1;31m---------------------------------------------------------------------------\u001b[0m\n\u001b[1;31mAttributeError\u001b[0m Traceback (most recent call last)",
65 "\u001b[1;32m<ipython-input-4-085d43fdae3d>\u001b[0m in \u001b[0;36m<module>\u001b[1;34m()\u001b[0m\n\u001b[0;32m 1\u001b[0m \u001b[0mfloatrange\u001b[0m \u001b[1;33m=\u001b[0m \u001b[0mwidgets\u001b[0m\u001b[1;33m.\u001b[0m\u001b[0mFloatSliderWidget\u001b[0m\u001b[1;33m(\u001b[0m\u001b[1;33m)\u001b[0m \u001b[1;31m# You can set the parent in the constructor,\u001b[0m\u001b[1;33m\u001b[0m\u001b[0m\n\u001b[0;32m 2\u001b[0m \u001b[1;33m\u001b[0m\u001b[0m\n\u001b[1;32m----> 3\u001b[1;33m \u001b[0mstring\u001b[0m \u001b[1;33m=\u001b[0m \u001b[0mwidgets\u001b[0m\u001b[1;33m.\u001b[0m\u001b[0mTextBocWidget\u001b[0m\u001b[1;33m(\u001b[0m\u001b[0mvalue\u001b[0m\u001b[1;33m=\u001b[0m\u001b[1;34m'hi'\u001b[0m\u001b[1;33m)\u001b[0m\u001b[1;33m\u001b[0m\u001b[0m\n\u001b[0m\u001b[0;32m 4\u001b[0m \u001b[0mcontainer\u001b[0m \u001b[1;33m=\u001b[0m \u001b[0mwidgets\u001b[0m\u001b[1;33m.\u001b[0m\u001b[0mContainerWidget\u001b[0m\u001b[1;33m(\u001b[0m\u001b[0mchildren\u001b[0m\u001b[1;33m=\u001b[0m\u001b[1;33m[\u001b[0m\u001b[0mfloatrange\u001b[0m\u001b[1;33m,\u001b[0m \u001b[0mstring\u001b[0m\u001b[1;33m]\u001b[0m\u001b[1;33m)\u001b[0m\u001b[1;33m\u001b[0m\u001b[0m\n\u001b[0;32m 5\u001b[0m \u001b[1;33m\u001b[0m\u001b[0m\n",
66 "\u001b[1;31mAttributeError\u001b[0m: 'module' object has no attribute 'TextBocWidget'"
67 ]
68 }
69 ],
70 "prompt_number": 4
64 },
71 },
65 {
72 {
66 "cell_type": "markdown",
73 "cell_type": "markdown",
General Comments 0
You need to be logged in to leave comments. Login now