##// END OF EJS Templates
upstream » ipython
RSS

Clone from https://github.com/ipython/ipython.git

Updated widget tutorials 1-2
Jonathan Frederic -
Show More
Show file before | Show file after | Hide comments
@@ -1,369 +1,305 b''
1 1 {
2 2 "metadata": {
3 3 "cell_tags": [
4 4 [
5 5 "<None>",
6 6 null
7 7 ]
8 8 ],
9 9 "name": ""
10 10 },
11 11 "nbformat": 3,
12 12 "nbformat_minor": 0,
13 13 "worksheets": [
14 14 {
15 15 "cells": [
16 16 {
17 17 "cell_type": "markdown",
18 18 "metadata": {},
19 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 {
24 24 "cell_type": "code",
25 25 "collapsed": false,
26 26 "input": [
27 27 "from IPython.html import widgets # Widget definitions\n",
28 28 "from IPython.display import display # Used to display widgets in the notebook"
29 29 ],
30 30 "language": "python",
31 31 "metadata": {},
32 32 "outputs": [],
33 33 "prompt_number": 1
34 34 },
35 35 {
36 36 "cell_type": "heading",
37 37 "level": 1,
38 38 "metadata": {},
39 39 "source": [
40 40 "Basic Widgets"
41 41 ]
42 42 },
43 43 {
44 44 "cell_type": "markdown",
45 45 "metadata": {},
46 46 "source": [
47 47 "The IPython notebook comes preloaded with basic widgets that represent common data types. These widgets are\n",
48 48 "\n",
49 "- BoolWidget : boolean \n",
50 "- FloatRangeWidget : bounded float \n",
51 "- FloatWidget : unbounded float \n",
52 "- ImageWidget : image\n",
53 "- IntRangeWidget : bounded integer \n",
54 "- IntWidget : unbounded integer \n",
55 "- SelectionWidget : enumeration \n",
56 "- StringWidget : string \n",
49 "- CheckBoxWidget\n",
50 "- ToggleButtonWidget\n",
51 "- FloatSliderWidget\n",
52 "- BoundedFloatTextWidget\n",
53 "- FloatProgressWidget\n",
54 "- FloatTextWidget\n",
55 "- ImageWidget\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 68 "\n",
58 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 70 "\n",
60 "- ButtonWidget \n",
61 "- ContainerWidget \n",
62 "- MulticontainerWidget \n",
71 "- ButtonWidget\n",
72 "- ContainerWidget\n",
73 "- PopupWidget\n",
74 "- AccordionWidget\n",
75 "- TabWidget\n",
63 76 "\n",
64 77 "To see the complete list of widgets, one can execute the following"
65 78 ]
66 79 },
67 80 {
68 81 "cell_type": "code",
69 82 "collapsed": false,
70 83 "input": [
71 84 "[widget for widget in dir(widgets) if widget.endswith('Widget')]"
72 85 ],
73 86 "language": "python",
74 87 "metadata": {},
75 88 "outputs": [
76 89 {
77 90 "metadata": {},
78 91 "output_type": "pyout",
79 92 "prompt_number": 2,
80 93 "text": [
81 "['BoolWidget',\n",
94 "['AccordionWidget',\n",
95 " 'BoundedFloatTextWidget',\n",
96 " 'BoundedIntTextWidget',\n",
82 97 " 'ButtonWidget',\n",
98 " 'CheckBoxWidget',\n",
83 99 " 'ContainerWidget',\n",
84 100 " 'DOMWidget',\n",
85 " 'FloatRangeWidget',\n",
86 " 'FloatWidget',\n",
101 " 'DropdownWidget',\n",
102 " 'FloatProgressWidget',\n",
103 " 'FloatSliderWidget',\n",
104 " 'FloatTextWidget',\n",
105 " 'HTMLWidget',\n",
87 106 " 'ImageWidget',\n",
88 " 'IntRangeWidget',\n",
89 " 'IntWidget',\n",
90 " 'SelectionContainerWidget',\n",
91 " 'SelectionWidget',\n",
92 " 'StringWidget',\n",
107 " 'IntProgressWidget',\n",
108 " 'IntSliderWidget',\n",
109 " 'IntTextWidget',\n",
110 " 'LatexWidget',\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 119 " 'Widget']"
94 120 ]
95 121 }
96 122 ],
97 123 "prompt_number": 2
98 124 },
99 125 {
100 126 "cell_type": "markdown",
101 127 "metadata": {},
102 128 "source": [
103 129 "The basic widgets can all be constructed without arguments. The following creates a FloatRangeWidget without displaying it"
104 130 ]
105 131 },
106 132 {
107 133 "cell_type": "code",
108 134 "collapsed": false,
109 135 "input": [
110 "mywidget = widgets.FloatRangeWidget()"
136 "mywidget = widgets.FloatSliderWidget()"
111 137 ],
112 138 "language": "python",
113 139 "metadata": {},
114 140 "outputs": [],
115 141 "prompt_number": 3
116 142 },
117 143 {
118 144 "cell_type": "markdown",
119 145 "metadata": {},
120 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 {
125 151 "cell_type": "code",
126 152 "collapsed": false,
127 153 "input": [
128 154 "display(mywidget)"
129 155 ],
130 156 "language": "python",
131 157 "metadata": {},
132 158 "outputs": [],
133 159 "prompt_number": 4
134 160 },
135 161 {
162 "cell_type": "markdown",
163 "metadata": {},
164 "source": [
165 "or"
166 ]
167 },
168 {
136 169 "cell_type": "code",
137 170 "collapsed": false,
138 171 "input": [
139 "mywidget.value\n"
172 "mywidget"
140 173 ],
141 174 "language": "python",
142 175 "metadata": {},
143 "outputs": [
144 {
145 "metadata": {},
146 "output_type": "pyout",
147 "prompt_number": 10,
148 "text": [
149 "50.6"
150 ]
151 }
152 ],
153 "prompt_number": 10
176 "outputs": [],
177 "prompt_number": 5
154 178 },
155 179 {
156 180 "cell_type": "markdown",
157 181 "metadata": {},
158 182 "source": [
159 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 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 {
165 189 "cell_type": "code",
166 190 "collapsed": false,
167 191 "input": [
168 192 "mywidget.keys"
169 193 ],
170 194 "language": "python",
171 195 "metadata": {},
172 196 "outputs": [
173 197 {
174 198 "metadata": {},
175 199 "output_type": "pyout",
176 "prompt_number": 11,
200 "prompt_number": 6,
177 201 "text": [
178 "['value',\n",
179 " 'step',\n",
180 " 'max',\n",
202 "['_view_name',\n",
203 " 'description',\n",
181 204 " 'min',\n",
182 " 'disabled',\n",
183 205 " 'orientation',\n",
184 " 'description',\n",
185 " 'visible',\n",
206 " 'max',\n",
186 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 218 "cell_type": "markdown",
195 219 "metadata": {},
196 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 {
201 225 "cell_type": "code",
202 226 "collapsed": false,
203 227 "input": [
204 228 "mywidget.value = 25.0"
205 229 ],
206 230 "language": "python",
207 231 "metadata": {},
208 232 "outputs": [],
209 "prompt_number": 12
233 "prompt_number": 7
210 234 },
211 235 {
212 236 "cell_type": "markdown",
213 237 "metadata": {},
214 238 "source": [
215 239 "After changing the widget's value in the notebook by hand to 0.0 (sliding the bar to the far left)."
216 240 ]
217 241 },
218 242 {
219 243 "cell_type": "code",
220 244 "collapsed": false,
221 245 "input": [
222 246 "mywidget.value"
223 247 ],
224 248 "language": "python",
225 249 "metadata": {},
226 250 "outputs": [
227 251 {
228 252 "metadata": {},
229 253 "output_type": "pyout",
230 "prompt_number": 13,
254 "prompt_number": 8,
231 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 263 "cell_type": "markdown",
240 264 "metadata": {},
241 265 "source": [
242 266 "Widget property values can also be set with kwargs during the construction of the widget (as seen below)."
243 267 ]
244 268 },
245 269 {
246 270 "cell_type": "code",
247 271 "collapsed": false,
248 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 274 "display(mysecondwidget)"
251 275 ],
252 276 "language": "python",
253 277 "metadata": {},
254 278 "outputs": [],
255 "prompt_number": 14
279 "prompt_number": 9
256 280 },
257 281 {
258 282 "cell_type": "code",
259 283 "collapsed": false,
260 284 "input": [
261 285 "mysecondwidget.value"
262 286 ],
263 287 "language": "python",
264 288 "metadata": {},
265 289 "outputs": [
266 290 {
267 291 "metadata": {},
268 292 "output_type": "pyout",
269 "prompt_number": 15,
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,
293 "prompt_number": 10,
305 294 "text": [
306 "u'FloatSliderView'"
295 "'Item A'"
307 296 ]
308 297 }
309 298 ],
310 "prompt_number": 19
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 ]
299 "prompt_number": 10
364 300 }
365 301 ],
366 302 "metadata": {}
367 303 }
368 304 ]
369 305 } No newline at end of file
Show file before | Show file after | Hide comments
@@ -1,662 +1,272 b''
1 1 {
2 2 "metadata": {
3 3 "cell_tags": [
4 4 [
5 5 "<None>",
6 6 null
7 7 ]
8 8 ],
9 9 "name": ""
10 10 },
11 11 "nbformat": 3,
12 12 "nbformat_minor": 0,
13 13 "worksheets": [
14 14 {
15 15 "cells": [
16 16 {
17 17 "cell_type": "code",
18 18 "collapsed": false,
19 19 "input": [
20 20 "from __future__ import print_function # 2.7 compatability\n",
21 21 "\n",
22 22 "from IPython.html import widgets # Widget definitions\n",
23 23 "from IPython.display import display # Used to display widgets in the notebook"
24 24 ],
25 25 "language": "python",
26 26 "metadata": {},
27 27 "outputs": [],
28 28 "prompt_number": 1
29 29 },
30 30 {
31 31 "cell_type": "heading",
32 32 "level": 1,
33 33 "metadata": {},
34 34 "source": [
35 35 "Traitlet Events"
36 36 ]
37 37 },
38 38 {
39 39 "cell_type": "markdown",
40 40 "metadata": {},
41 41 "source": [
42 42 "The widget properties are IPython traitlets. Traitlets are eventful. To handle property value changes, the `on_trait_change` method of the widget can be used to register an event handling callback. The doc string for `on_trait_change` can be seen below. Both the `name` and `remove` properties are optional."
43 43 ]
44 44 },
45 45 {
46 46 "cell_type": "code",
47 47 "collapsed": false,
48 48 "input": [
49 49 "print(widgets.Widget.on_trait_change.__doc__)"
50 50 ],
51 51 "language": "python",
52 52 "metadata": {},
53 53 "outputs": [
54 54 {
55 55 "output_type": "stream",
56 56 "stream": "stdout",
57 57 "text": [
58 58 "Setup a handler to be called when a trait changes.\n",
59 59 "\n",
60 60 " This is used to setup dynamic notifications of trait changes.\n",
61 61 "\n",
62 62 " Static handlers can be created by creating methods on a HasTraits\n",
63 63 " subclass with the naming convention '_[traitname]_changed'. Thus,\n",
64 64 " to create static handler for the trait 'a', create the method\n",
65 65 " _a_changed(self, name, old, new) (fewer arguments can be used, see\n",
66 66 " below).\n",
67 67 "\n",
68 68 " Parameters\n",
69 69 " ----------\n",
70 70 " handler : callable\n",
71 71 " A callable that is called when a trait changes. Its\n",
72 72 " signature can be handler(), handler(name), handler(name, new)\n",
73 73 " or handler(name, old, new).\n",
74 74 " name : list, str, None\n",
75 75 " If None, the handler will apply to all traits. If a list\n",
76 76 " of str, handler will apply to all names in the list. If a\n",
77 77 " str, the handler will apply just to that name.\n",
78 78 " remove : bool\n",
79 79 " If False (the default), then install the handler. If True\n",
80 80 " then unintall it.\n",
81 81 " \n"
82 82 ]
83 83 }
84 84 ],
85 85 "prompt_number": 2
86 86 },
87 87 {
88 88 "cell_type": "markdown",
89 89 "metadata": {},
90 90 "source": [
91 91 "Mentioned in the doc string, the callback registered can have 4 possible signatures:\n",
92 92 "\n",
93 93 "- callback()\n",
94 94 "- callback(trait_name)\n",
95 95 "- callback(trait_name, new_value)\n",
96 96 "- callback(trait_name, old_value, new_value)\n",
97 97 "\n",
98 98 "An example of how to output an IntRangeWiget's value as it is changed can be seen below."
99 99 ]
100 100 },
101 101 {
102 102 "cell_type": "code",
103 103 "collapsed": false,
104 104 "input": [
105 "intrange = widgets.IntRangeWidget()\n",
105 "intrange = widgets.IntSliderWidget()\n",
106 106 "display(intrange)\n",
107 107 "\n",
108 108 "def on_value_change(name, value):\n",
109 109 " print(value)\n",
110 110 "\n",
111 111 "intrange.on_trait_change(on_value_change, 'value')"
112 112 ],
113 113 "language": "python",
114 114 "metadata": {},
115 115 "outputs": [
116 116 {
117 117 "output_type": "stream",
118 118 "stream": "stdout",
119 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 120 "34\n"
338 121 ]
339 122 },
340 123 {
341 124 "output_type": "stream",
342 125 "stream": "stdout",
343 126 "text": [
344 "30\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"
127 "74\n"
359 128 ]
360 129 },
361 130 {
362 131 "output_type": "stream",
363 132 "stream": "stdout",
364 133 "text": [
365 "25\n"
366 ]
367 },
368 {
369 "output_type": "stream",
370 "stream": "stdout",
371 "text": [
372 "24\n"
134 "98\n"
373 135 ]
374 136 }
375 137 ],
376 138 "prompt_number": 3
377 139 },
378 140 {
379 141 "cell_type": "heading",
380 142 "level": 1,
381 143 "metadata": {},
382 144 "source": [
383 145 "Specialized Events"
384 146 ]
385 147 },
386 148 {
387 149 "cell_type": "heading",
388 150 "level": 2,
389 151 "metadata": {},
390 152 "source": [
391 153 "Button On Click Event"
392 154 ]
393 155 },
394 156 {
395 157 "cell_type": "markdown",
396 158 "metadata": {},
397 159 "source": [
398 160 "The `ButtonWidget` is a special widget, like the `ContainerWidget` and `MulticontainerWidget`, that isn't used to represent a data type. Instead the button widget is used to handle mouse clicks. The `on_click` method of the `ButtonWidget` can be used to register a click even handler. The doc string of the `on_click` can be seen below."
399 161 ]
400 162 },
401 163 {
402 164 "cell_type": "code",
403 165 "collapsed": false,
404 166 "input": [
405 167 "print(widgets.ButtonWidget.on_click.__doc__)"
406 168 ],
407 169 "language": "python",
408 170 "metadata": {},
409 171 "outputs": [
410 172 {
411 173 "output_type": "stream",
412 174 "stream": "stdout",
413 175 "text": [
414 "Register a callback to execute when the button is clicked. The\n",
415 " callback can either accept no parameters or one sender parameter:\n",
176 "Register a callback to execute when the button is clicked. \n",
177 "\n",
178 " The callback can either accept no parameters or one sender parameter:\n",
416 179 " - callback()\n",
417 180 " - callback(sender)\n",
418 181 " If the callback has a sender parameter, the ButtonWidget instance that\n",
419 182 " called the callback will be passed into the method as the sender.\n",
420 183 "\n",
421 184 " Parameters\n",
422 185 " ----------\n",
423 186 " remove : bool (optional)\n",
424 187 " Set to true to remove the callback from the list of callbacks.\n"
425 188 ]
426 189 }
427 190 ],
428 191 "prompt_number": 4
429 192 },
430 193 {
431 194 "cell_type": "markdown",
432 195 "metadata": {},
433 196 "source": [
434 197 "Button clicks are transmitted from the front-end to the back-end using custom messages. By using the `on_click` method, a button that prints a message when it has been clicked is shown below."
435 198 ]
436 199 },
437 200 {
438 201 "cell_type": "code",
439 202 "collapsed": false,
440 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 204 "button = widgets.ButtonWidget(description=\"Click Me!\")\n",
553 205 "display(button)\n",
554 206 "\n",
555 207 "def on_button_clicked(sender):\n",
556 208 " print(\"Button clicked.\")\n",
557 " intrange.value +=1\n",
558 209 "\n",
559 210 "button.on_click(on_button_clicked)"
560 211 ],
561 212 "language": "python",
562 213 "metadata": {},
563 214 "outputs": [
564 215 {
565 216 "output_type": "stream",
566 217 "stream": "stdout",
567 218 "text": [
568 "Button clicked.\n",
569 "54\n"
219 "Button clicked.\n"
570 220 ]
571 221 },
572 222 {
573 223 "output_type": "stream",
574 224 "stream": "stdout",
575 225 "text": [
576 "Button clicked.\n",
577 "55\n"
226 "Button clicked.\n"
578 227 ]
579 228 },
580 229 {
581 230 "output_type": "stream",
582 231 "stream": "stdout",
583 232 "text": [
584 "Button clicked.\n",
585 "56\n"
233 "Button clicked.\n"
586 234 ]
587 235 }
588 236 ],
589 "prompt_number": 6
237 "prompt_number": 5
590 238 },
591 239 {
592 240 "cell_type": "markdown",
593 241 "metadata": {},
594 242 "source": [
595 243 "Event handlers can also be used to create widgets. In the example below, clicking a button spawns another button with a description equal to how many times the parent button had been clicked at the time."
596 244 ]
597 245 },
598 246 {
599 247 "cell_type": "code",
600 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 249 "input": [
632 "def show_button(sender=None):\n",
250 "def show_button(sender):\n",
633 251 " button = widgets.ButtonWidget()\n",
634 252 " button.clicks = 0\n",
635 " if sender is None:\n",
636 " button.description = \"0\"\n",
637 " else:\n",
638 " sender.clicks += 1\n",
639 " button.description = \"%d\" % sender.clicks\n",
253 " sender.clicks += 1\n",
254 " button.description = \"%d\" % sender.clicks\n",
640 255 " display(button)\n",
641 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 263 "language": "python",
646 264 "metadata": {},
647 265 "outputs": [],
648 "prompt_number": 7
649 },
650 {
651 "cell_type": "code",
652 "collapsed": false,
653 "input": [],
654 "language": "python",
655 "metadata": {},
656 "outputs": []
266 "prompt_number": 6
657 267 }
658 268 ],
659 269 "metadata": {}
660 270 }
661 271 ]
662 272 } No newline at end of file
Show file before | Show file after | Hide comments
@@ -1,329 +1,336 b''
1 1 {
2 2 "metadata": {
3 3 "cell_tags": [
4 4 [
5 5 "<None>",
6 6 null
7 7 ]
8 8 ],
9 9 "name": ""
10 10 },
11 11 "nbformat": 3,
12 12 "nbformat_minor": 0,
13 13 "worksheets": [
14 14 {
15 15 "cells": [
16 16 {
17 17 "cell_type": "code",
18 18 "collapsed": false,
19 19 "input": [
20 "\n",
21 "\n",
22 "\n",
23 20 "from IPython.html import widgets # Widget definitions\n",
24 21 "from IPython.display import display # Used to display widgets in the notebook"
25 22 ],
26 23 "language": "python",
27 24 "metadata": {},
28 25 "outputs": [],
29 26 "prompt_number": 1
30 27 },
31 28 {
32 29 "cell_type": "heading",
33 30 "level": 1,
34 31 "metadata": {},
35 32 "source": [
36 33 "Parent/Child Relationships"
37 34 ]
38 35 },
39 36 {
40 37 "cell_type": "markdown",
41 38 "metadata": {},
42 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 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 46 "cell_type": "code",
50 47 "collapsed": false,
51 48 "input": [
49 "floatrange = widgets.FloatSliderWidget() # You can set the parent in the constructor,\n",
52 50 "\n",
53 "floatrange = widgets.FloatRangeWidget() # You can set the parent in the constructor,\n",
54 "\n",
55 "string = widgets.StringWidget(value='hi')\n",
51 "string = widgets.TextBocWidget(value='hi')\n",
56 52 "container = widgets.ContainerWidget(children=[floatrange, string])\n",
57 53 "\n",
58 54 "display(container) # Displays the `container` and all of it's children."
59 55 ],
60 56 "language": "python",
61 57 "metadata": {},
62 "outputs": [],
63 "prompt_number": 2
58 "outputs": [
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 73 "cell_type": "markdown",
67 74 "metadata": {},
68 75 "source": [
69 76 "Children can also be added to parents after the parent has been displayed. If the children are added after the parent has already been displayed, the children must be displayed themselves.\n",
70 77 "\n",
71 78 "In the example below, the IntRangeWidget is never rendered since display was called on the parent before the parent/child relationship was established."
72 79 ]
73 80 },
74 81 {
75 82 "cell_type": "code",
76 83 "collapsed": false,
77 84 "input": [
78 85 "intrange = widgets.IntRangeWidget() # Never gets displayed.\n",
79 86 "container = widgets.MulticontainerWidget(children=[intrange])\n",
80 87 "\n",
81 88 "display(container)\n"
82 89 ],
83 90 "language": "python",
84 91 "metadata": {},
85 92 "outputs": [],
86 93 "prompt_number": 5
87 94 },
88 95 {
89 96 "cell_type": "markdown",
90 97 "metadata": {},
91 98 "source": [
92 99 "Calling display on the child fixes the problem."
93 100 ]
94 101 },
95 102 {
96 103 "cell_type": "code",
97 104 "collapsed": false,
98 105 "input": [
99 106 "container = widgets.MulticontainerWidget()\n",
100 107 "display(container)\n",
101 108 "\n",
102 109 "intrange = widgets.IntRangeWidget(parent=container)\n",
103 110 "display(intrange) # This line is needed since the `container` has already been displayed."
104 111 ],
105 112 "language": "python",
106 113 "metadata": {},
107 114 "outputs": [],
108 115 "prompt_number": 4
109 116 },
110 117 {
111 118 "cell_type": "heading",
112 119 "level": 1,
113 120 "metadata": {},
114 121 "source": [
115 122 "Changing Child Views"
116 123 ]
117 124 },
118 125 {
119 126 "cell_type": "markdown",
120 127 "metadata": {},
121 128 "source": [
122 129 "The view used to display a widget must defined by the time the widget is displayed. If children widgets are to be displayed along with the parent in one call, their `view_name`s can't be set since all of the widgets are sharing the same display call. Instead, their `default_view_name`s must be set (as seen below)."
123 130 ]
124 131 },
125 132 {
126 133 "cell_type": "code",
127 134 "collapsed": false,
128 135 "input": [
129 136 "\n",
130 137 "floatrange = widgets.FloatRangeWidget()\n",
131 138 "floatrange.default_view_name = \"FloatTextView\" # It can be set as a property.\n",
132 139 "\n",
133 140 "string = widgets.StringWidget(default_view_name = \"TextAreaView\") # It can also be set in the constructor.\n",
134 141 "container = widgets.MulticontainerWidget(children=[floatrange, string])\n",
135 142 "display(container)"
136 143 ],
137 144 "language": "python",
138 145 "metadata": {},
139 146 "outputs": [],
140 147 "prompt_number": 6
141 148 },
142 149 {
143 150 "cell_type": "markdown",
144 151 "metadata": {},
145 152 "source": [
146 153 "However, if the children are displayed after the parent, their `view_name` can also be set like normal. Both methods will work. The code below produces the same output as the code above."
147 154 ]
148 155 },
149 156 {
150 157 "cell_type": "code",
151 158 "collapsed": false,
152 159 "input": [
153 160 "container = widgets.MulticontainerWidget()\n",
154 161 "display(container)\n",
155 162 "\n",
156 163 "floatrange = widgets.FloatRangeWidget()\n",
157 164 "floatrange.parent=container\n",
158 165 "display(floatrange, view_name = \"FloatTextView\") # view_name can be set during display.\n",
159 166 "\n",
160 167 "string = widgets.StringWidget()\n",
161 168 "string.parent = container\n",
162 169 "string.default_view_name = \"TextAreaView\" # Setting default_view_name still works.\n",
163 170 "display(string)\n"
164 171 ],
165 172 "language": "python",
166 173 "metadata": {},
167 174 "outputs": [],
168 175 "prompt_number": 6
169 176 },
170 177 {
171 178 "cell_type": "heading",
172 179 "level": 1,
173 180 "metadata": {},
174 181 "source": [
175 182 "Visibility"
176 183 ]
177 184 },
178 185 {
179 186 "cell_type": "markdown",
180 187 "metadata": {},
181 188 "source": [
182 189 "Sometimes it's necessary to hide/show widget views in place, without ruining the order that they have been displayed on the page. Using the `display` method, the views are always added to the end of their respective containers. Instead the `visibility` property of widgets can be used to hide/show widgets that have already been displayed (as seen below)."
183 190 ]
184 191 },
185 192 {
186 193 "cell_type": "code",
187 194 "collapsed": false,
188 195 "input": [
189 196 "string = widgets.StringWidget(value=\"Hello World!\")\n",
190 197 "display(string, view_name=\"HTMLView\") "
191 198 ],
192 199 "language": "python",
193 200 "metadata": {},
194 201 "outputs": [],
195 202 "prompt_number": 7
196 203 },
197 204 {
198 205 "cell_type": "code",
199 206 "collapsed": false,
200 207 "input": [
201 208 "string.visible=False"
202 209 ],
203 210 "language": "python",
204 211 "metadata": {},
205 212 "outputs": [],
206 213 "prompt_number": 8
207 214 },
208 215 {
209 216 "cell_type": "code",
210 217 "collapsed": false,
211 218 "input": [
212 219 "string.visible=True"
213 220 ],
214 221 "language": "python",
215 222 "metadata": {},
216 223 "outputs": [],
217 224 "prompt_number": 9
218 225 },
219 226 {
220 227 "cell_type": "markdown",
221 228 "metadata": {},
222 229 "source": [
223 230 "In the example below, a form is rendered which conditionally displays widgets depending on the state of other widgets. Try toggling the student checkbox."
224 231 ]
225 232 },
226 233 {
227 234 "cell_type": "code",
228 235 "collapsed": false,
229 236 "input": [
230 237 "form = widgets.ContainerWidget()\n",
231 238 "first = widgets.StringWidget(description=\"First Name:\")\n",
232 239 "last = widgets.StringWidget(description=\"Last Name:\")\n",
233 240 "\n",
234 241 "student = widgets.BoolWidget(description=\"Student:\", value=False)\n",
235 242 "form.children=[first, last, student]\n",
236 243 "display(form)"
237 244 ],
238 245 "language": "python",
239 246 "metadata": {},
240 247 "outputs": [],
241 248 "prompt_number": 2
242 249 },
243 250 {
244 251 "cell_type": "code",
245 252 "collapsed": false,
246 253 "input": [
247 254 "form = widgets.ContainerWidget()\n",
248 255 "first = widgets.StringWidget(description=\"First Name:\")\n",
249 256 "last = widgets.StringWidget(description=\"Last Name:\")\n",
250 257 "\n",
251 258 "student = widgets.BoolWidget(description=\"Student:\", value=False)\n",
252 259 "school_info = widgets.ContainerWidget(visible=False, children=[\n",
253 260 " widgets.StringWidget(description=\"School:\"),\n",
254 261 " widgets.IntRangeWidget(description=\"Grade:\", min=0, max=12, default_view_name='IntTextView')\n",
255 262 " ])\n",
256 263 "\n",
257 264 "pet = widgets.StringWidget(description=\"Pet's Name:\")\n",
258 265 "form.children = [first, last, student, school_info, pet]\n",
259 266 "display(form)\n",
260 267 "\n",
261 268 "def on_student_toggle(name, value):\n",
262 269 " print value\n",
263 270 " if value:\n",
264 271 " school_info.visible = True\n",
265 272 " else:\n",
266 273 " school_info.visible = False\n",
267 274 "student.on_trait_change(on_student_toggle, 'value')\n"
268 275 ],
269 276 "language": "python",
270 277 "metadata": {},
271 278 "outputs": [
272 279 {
273 280 "output_type": "stream",
274 281 "stream": "stdout",
275 282 "text": [
276 283 "True\n"
277 284 ]
278 285 },
279 286 {
280 287 "output_type": "stream",
281 288 "stream": "stdout",
282 289 "text": [
283 290 "False\n"
284 291 ]
285 292 },
286 293 {
287 294 "output_type": "stream",
288 295 "stream": "stdout",
289 296 "text": [
290 297 "True\n"
291 298 ]
292 299 },
293 300 {
294 301 "output_type": "stream",
295 302 "stream": "stdout",
296 303 "text": [
297 304 "False\n"
298 305 ]
299 306 },
300 307 {
301 308 "output_type": "stream",
302 309 "stream": "stdout",
303 310 "text": [
304 311 "True\n"
305 312 ]
306 313 },
307 314 {
308 315 "output_type": "stream",
309 316 "stream": "stdout",
310 317 "text": [
311 318 "False\n"
312 319 ]
313 320 }
314 321 ],
315 322 "prompt_number": 2
316 323 },
317 324 {
318 325 "cell_type": "code",
319 326 "collapsed": false,
320 327 "input": [],
321 328 "language": "python",
322 329 "metadata": {},
323 330 "outputs": []
324 331 }
325 332 ],
326 333 "metadata": {}
327 334 }
328 335 ]
329 336 } No newline at end of file
General Comments 0
You need to be logged in to leave comments. Login now