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

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

Uploaded widget tutorial (example) notebooks.
Jonathan Frederic -
Show More
Show file before | Show file after | Hide comments
@@ -0,0 +1,277 b''
1 {
2 "metadata": {
3 "name": ""
4 },
5 "nbformat": 3,
6 "nbformat_minor": 0,
7 "worksheets": [
8 {
9 "cells": [
10 {
11 "cell_type": "code",
12 "collapsed": false,
13 "input": [
14 "from IPython.html import widgets # Widget definitions\n",
15 "from IPython.display import display # Used to display widgets in the notebook\n",
16 "\n",
17 "# Enable widgets in this notebook\n",
18 "widgets.init_widget_js()"
19 ],
20 "language": "python",
21 "metadata": {},
22 "outputs": [
23 {
24 "javascript": [
25 "$.getScript(\"../static/notebook/js/widgets/bool.js\");"
26 ],
27 "metadata": {},
28 "output_type": "display_data"
29 },
30 {
31 "javascript": [
32 "$.getScript(\"../static/notebook/js/widgets/int_range.js\");"
33 ],
34 "metadata": {},
35 "output_type": "display_data"
36 },
37 {
38 "javascript": [
39 "$.getScript(\"../static/notebook/js/widgets/int.js\");"
40 ],
41 "metadata": {},
42 "output_type": "display_data"
43 },
44 {
45 "javascript": [
46 "$.getScript(\"../static/notebook/js/widgets/selection.js\");"
47 ],
48 "metadata": {},
49 "output_type": "display_data"
50 },
51 {
52 "javascript": [
53 "$.getScript(\"../static/notebook/js/widgets/string.js\");"
54 ],
55 "metadata": {},
56 "output_type": "display_data"
57 },
58 {
59 "javascript": [
60 "$.getScript(\"../static/notebook/js/widgets/float.js\");"
61 ],
62 "metadata": {},
63 "output_type": "display_data"
64 },
65 {
66 "javascript": [
67 "$.getScript(\"../static/notebook/js/widgets/container.js\");"
68 ],
69 "metadata": {},
70 "output_type": "display_data"
71 },
72 {
73 "javascript": [
74 "$.getScript(\"../static/notebook/js/widgets/multicontainer.js\");"
75 ],
76 "metadata": {},
77 "output_type": "display_data"
78 },
79 {
80 "javascript": [
81 "$.getScript(\"../static/notebook/js/widgets/button.js\");"
82 ],
83 "metadata": {},
84 "output_type": "display_data"
85 },
86 {
87 "javascript": [
88 "$.getScript(\"../static/notebook/js/widgets/float_range.js\");"
89 ],
90 "metadata": {},
91 "output_type": "display_data"
92 }
93 ],
94 "prompt_number": 1
95 },
96 {
97 "cell_type": "heading",
98 "level": 1,
99 "metadata": {},
100 "source": [
101 "Alignment"
102 ]
103 },
104 {
105 "cell_type": "markdown",
106 "metadata": {},
107 "source": [
108 "Most widgets have a `description` property which allows a label for the widget to be defined. The label of the widget has a fixed minimum width. The text of the label is always right aligned and the widget is left aligned (as seen below) "
109 ]
110 },
111 {
112 "cell_type": "code",
113 "collapsed": false,
114 "input": [
115 "display(widgets.StringWidget(description=\"a:\"))\n",
116 "display(widgets.StringWidget(description=\"aa:\"))\n",
117 "display(widgets.StringWidget(description=\"aaa:\"))"
118 ],
119 "language": "python",
120 "metadata": {},
121 "outputs": [],
122 "prompt_number": 2
123 },
124 {
125 "cell_type": "markdown",
126 "metadata": {},
127 "source": [
128 "If a label is longer than the minimum width, the widget is shifted to the right (as seen below)."
129 ]
130 },
131 {
132 "cell_type": "code",
133 "collapsed": false,
134 "input": [
135 "display(widgets.StringWidget(description=\"a:\"))\n",
136 "display(widgets.StringWidget(description=\"aa:\"))\n",
137 "display(widgets.StringWidget(description=\"aaa:\"))\n",
138 "display(widgets.StringWidget(description=\"aaaaaaaaaaaaaaaaaa:\"))"
139 ],
140 "language": "python",
141 "metadata": {},
142 "outputs": [],
143 "prompt_number": 3
144 },
145 {
146 "cell_type": "markdown",
147 "metadata": {},
148 "source": [
149 "If a `description` is not set for the widget, the label is not displayed (as seen below)."
150 ]
151 },
152 {
153 "cell_type": "code",
154 "collapsed": false,
155 "input": [
156 "display(widgets.StringWidget(description=\"a:\"))\n",
157 "display(widgets.StringWidget(description=\"aa:\"))\n",
158 "display(widgets.StringWidget(description=\"aaa:\"))\n",
159 "display(widgets.StringWidget())"
160 ],
161 "language": "python",
162 "metadata": {},
163 "outputs": [],
164 "prompt_number": 4
165 },
166 {
167 "cell_type": "heading",
168 "level": 1,
169 "metadata": {},
170 "source": [
171 "Custom Alignment"
172 ]
173 },
174 {
175 "cell_type": "markdown",
176 "metadata": {},
177 "source": [
178 "`ContainerWidget`s allow for custom alignment of widgets. The `hbox` and `vbox` methods (parameterless) cause the `ContainerWidget` to both horizontally and vertically align its children. The following example compares `vbox` to `hbox`."
179 ]
180 },
181 {
182 "cell_type": "code",
183 "collapsed": false,
184 "input": [
185 "child_style = {\n",
186 " 'background': '#77CC77',\n",
187 " 'padding': '25px',\n",
188 " 'margin': '5px',\n",
189 " 'font-size': 'xx-large',\n",
190 " 'color': 'white',\n",
191 "}\n",
192 "\n",
193 "def make_container(title):\n",
194 " display(widgets.StringWidget(default_view_name='LabelView', value='<h2><br>' + title + '</h2>'))\n",
195 " container = widgets.ContainerWidget()\n",
196 " container.set_css('background', '#999999')\n",
197 " display(container)\n",
198 " return container\n",
199 "\n",
200 "def fill_container(container):\n",
201 " components = []\n",
202 " for i in range(3):\n",
203 " components.append(widgets.StringWidget(parent=container, default_view_name='LabelView', value=\"ABC\"[i]))\n",
204 " components[i].set_css(child_style)\n",
205 " display(components[i])\n",
206 " \n",
207 "container = make_container('VBox')\n",
208 "container.vbox()\n",
209 "fill_container(container)\n",
210 "\n",
211 "container = make_container('HBox')\n",
212 "container.hbox()\n",
213 "fill_container(container)\n"
214 ],
215 "language": "python",
216 "metadata": {},
217 "outputs": [],
218 "prompt_number": 5
219 },
220 {
221 "cell_type": "markdown",
222 "metadata": {},
223 "source": [
224 "The `ContainerWidget` also supports `start`, `center`, and `end` methods (parameterless) that adjust the alignment of the widgets on the axis that they are being rendered on. Below is an example of the different alignments."
225 ]
226 },
227 {
228 "cell_type": "code",
229 "collapsed": false,
230 "input": [
231 "container = make_container('HBox Start')\n",
232 "container.hbox()\n",
233 "container.start()\n",
234 "fill_container(container)\n",
235 " \n",
236 "container = make_container('HBox Center')\n",
237 "container.hbox()\n",
238 "container.center()\n",
239 "fill_container(container)\n",
240 " \n",
241 "container = make_container('HBox End')\n",
242 "container.hbox()\n",
243 "container.end()\n",
244 "fill_container(container)"
245 ],
246 "language": "python",
247 "metadata": {},
248 "outputs": [],
249 "prompt_number": 6
250 },
251 {
252 "cell_type": "markdown",
253 "metadata": {},
254 "source": [
255 "By default the widget area is a `vbox`; however, there are many uses for a `hbox`. The example below uses a `hbox` to display a set of vertical sliders, like an equalizer."
256 ]
257 },
258 {
259 "cell_type": "code",
260 "collapsed": false,
261 "input": [
262 "container = widgets.ContainerWidget()\n",
263 "container.hbox()\n",
264 "for i in range(15):\n",
265 " widgets.FloatRangeWidget(orientation='vertical', parent=container, description=str(i+1), value=50.0)\n",
266 "display(container)"
267 ],
268 "language": "python",
269 "metadata": {},
270 "outputs": [],
271 "prompt_number": 7
272 }
273 ],
274 "metadata": {}
275 }
276 ]
277 } No newline at end of file
Show file before | Show file after | Hide comments
@@ -0,0 +1,391 b''
1 {
2 "metadata": {
3 "name": ""
4 },
5 "nbformat": 3,
6 "nbformat_minor": 0,
7 "worksheets": [
8 {
9 "cells": [
10 {
11 "cell_type": "markdown",
12 "metadata": {},
13 "source": [
14 "To enable the use IPython widgets in the notebook, the widget namespace and display function need to be imported. The Javascript dependencies need to be loaded via `IPython.html.widgets.init_widget_js()`. This method needs to be called each time the notebook webpage is refreshed."
15 ]
16 },
17 {
18 "cell_type": "code",
19 "collapsed": false,
20 "input": [
21 "from IPython.html import widgets # Widget definitions\n",
22 "from IPython.display import display # Used to display widgets in the notebook\n",
23 "\n",
24 "# Enable widgets in this notebook\n",
25 "widgets.init_widget_js()"
26 ],
27 "language": "python",
28 "metadata": {},
29 "outputs": [
30 {
31 "javascript": [
32 "$.getScript(\"/static/notebook/js/widgets/bool.js\");"
33 ],
34 "metadata": {},
35 "output_type": "display_data"
36 },
37 {
38 "javascript": [
39 "$.getScript(\"/static/notebook/js/widgets/int_range.js\");"
40 ],
41 "metadata": {},
42 "output_type": "display_data"
43 },
44 {
45 "javascript": [
46 "$.getScript(\"/static/notebook/js/widgets/int.js\");"
47 ],
48 "metadata": {},
49 "output_type": "display_data"
50 },
51 {
52 "javascript": [
53 "$.getScript(\"/static/notebook/js/widgets/selection.js\");"
54 ],
55 "metadata": {},
56 "output_type": "display_data"
57 },
58 {
59 "javascript": [
60 "$.getScript(\"/static/notebook/js/widgets/string.js\");"
61 ],
62 "metadata": {},
63 "output_type": "display_data"
64 },
65 {
66 "javascript": [
67 "$.getScript(\"/static/notebook/js/widgets/float.js\");"
68 ],
69 "metadata": {},
70 "output_type": "display_data"
71 },
72 {
73 "javascript": [
74 "$.getScript(\"/static/notebook/js/widgets/container.js\");"
75 ],
76 "metadata": {},
77 "output_type": "display_data"
78 },
79 {
80 "javascript": [
81 "$.getScript(\"/static/notebook/js/widgets/multicontainer.js\");"
82 ],
83 "metadata": {},
84 "output_type": "display_data"
85 },
86 {
87 "javascript": [
88 "$.getScript(\"/static/notebook/js/widgets/button.js\");"
89 ],
90 "metadata": {},
91 "output_type": "display_data"
92 },
93 {
94 "javascript": [
95 "$.getScript(\"/static/notebook/js/widgets/float_range.js\");"
96 ],
97 "metadata": {},
98 "output_type": "display_data"
99 }
100 ],
101 "prompt_number": 1
102 },
103 {
104 "cell_type": "heading",
105 "level": 1,
106 "metadata": {},
107 "source": [
108 "Basic Widgets"
109 ]
110 },
111 {
112 "cell_type": "markdown",
113 "metadata": {},
114 "source": [
115 "The IPython notebook comes preloaded with basic widgets that represent common data types. These widgets are\n",
116 "\n",
117 "- BoolWidget : boolean \n",
118 "- FloatRangeWidget : bounded float \n",
119 "- FloatWidget : unbounded float \n",
120 "- IntRangeWidget : bounded integer \n",
121 "- IntWidget : unbounded integer \n",
122 "- SelectionWidget : enumeration \n",
123 "- StringWidget : string \n",
124 "\n",
125 "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",
126 "\n",
127 "- ButtonWidget \n",
128 "- ContainerWidget \n",
129 "- MulticontainerWidget \n",
130 "\n",
131 "To see the complete list of widgets, one can execute the following"
132 ]
133 },
134 {
135 "cell_type": "code",
136 "collapsed": false,
137 "input": [
138 "[widget for widget in dir(widgets) if widget.endswith('Widget')]"
139 ],
140 "language": "python",
141 "metadata": {},
142 "outputs": [
143 {
144 "metadata": {},
145 "output_type": "pyout",
146 "prompt_number": 2,
147 "text": [
148 "['BoolWidget',\n",
149 " 'ButtonWidget',\n",
150 " 'ContainerWidget',\n",
151 " 'FloatRangeWidget',\n",
152 " 'FloatWidget',\n",
153 " 'IntRangeWidget',\n",
154 " 'IntWidget',\n",
155 " 'MulticontainerWidget',\n",
156 " 'SelectionWidget',\n",
157 " 'StringWidget',\n",
158 " 'Widget']"
159 ]
160 }
161 ],
162 "prompt_number": 2
163 },
164 {
165 "cell_type": "markdown",
166 "metadata": {},
167 "source": [
168 "The basic widgets can all be constructed without arguments. The following creates a FloatRangeWidget without displaying it"
169 ]
170 },
171 {
172 "cell_type": "code",
173 "collapsed": false,
174 "input": [
175 "mywidget = widgets.FloatRangeWidget()"
176 ],
177 "language": "python",
178 "metadata": {},
179 "outputs": [],
180 "prompt_number": 3
181 },
182 {
183 "cell_type": "markdown",
184 "metadata": {},
185 "source": [
186 "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"
187 ]
188 },
189 {
190 "cell_type": "code",
191 "collapsed": false,
192 "input": [
193 "display(mywidget)"
194 ],
195 "language": "python",
196 "metadata": {},
197 "outputs": [],
198 "prompt_number": 4
199 },
200 {
201 "cell_type": "markdown",
202 "metadata": {},
203 "source": [
204 "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",
205 "\n",
206 "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."
207 ]
208 },
209 {
210 "cell_type": "code",
211 "collapsed": false,
212 "input": [
213 "mywidget.keys"
214 ],
215 "language": "python",
216 "metadata": {},
217 "outputs": [
218 {
219 "metadata": {},
220 "output_type": "pyout",
221 "prompt_number": 5,
222 "text": [
223 "['visible',\n",
224 " '_css',\n",
225 " '_add_class',\n",
226 " '_remove_class',\n",
227 " 'value',\n",
228 " 'step',\n",
229 " 'max',\n",
230 " 'min',\n",
231 " 'disabled',\n",
232 " 'orientation',\n",
233 " 'description']"
234 ]
235 }
236 ],
237 "prompt_number": 5
238 },
239 {
240 "cell_type": "markdown",
241 "metadata": {},
242 "source": [
243 "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."
244 ]
245 },
246 {
247 "cell_type": "code",
248 "collapsed": false,
249 "input": [
250 "mywidget.value = 25.0"
251 ],
252 "language": "python",
253 "metadata": {},
254 "outputs": [],
255 "prompt_number": 6
256 },
257 {
258 "cell_type": "markdown",
259 "metadata": {},
260 "source": [
261 "After changing the widget's value in the notebook by hand to 0.0 (sliding the bar to the far left)."
262 ]
263 },
264 {
265 "cell_type": "code",
266 "collapsed": false,
267 "input": [
268 "mywidget.value"
269 ],
270 "language": "python",
271 "metadata": {},
272 "outputs": [
273 {
274 "metadata": {},
275 "output_type": "pyout",
276 "prompt_number": 7,
277 "text": [
278 "0.0"
279 ]
280 }
281 ],
282 "prompt_number": 7
283 },
284 {
285 "cell_type": "markdown",
286 "metadata": {},
287 "source": [
288 "Widget property values can also be set with kwargs during the construction of the widget (as seen below)."
289 ]
290 },
291 {
292 "cell_type": "code",
293 "collapsed": false,
294 "input": [
295 "mysecondwidget = widgets.SelectionWidget(values=[\"Item A\", \"Item B\", \"Item C\"], value=\"Nothing Selected\")\n",
296 "display(mysecondwidget)"
297 ],
298 "language": "python",
299 "metadata": {},
300 "outputs": [],
301 "prompt_number": 8
302 },
303 {
304 "cell_type": "heading",
305 "level": 1,
306 "metadata": {},
307 "source": [
308 "Views"
309 ]
310 },
311 {
312 "cell_type": "markdown",
313 "metadata": {},
314 "source": [
315 "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)."
316 ]
317 },
318 {
319 "cell_type": "code",
320 "collapsed": false,
321 "input": [
322 "mywidget.default_view_name"
323 ],
324 "language": "python",
325 "metadata": {},
326 "outputs": [
327 {
328 "metadata": {},
329 "output_type": "pyout",
330 "prompt_number": 9,
331 "text": [
332 "u'FloatSliderView'"
333 ]
334 }
335 ],
336 "prompt_number": 9
337 },
338 {
339 "cell_type": "markdown",
340 "metadata": {},
341 "source": [
342 "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)."
343 ]
344 },
345 {
346 "cell_type": "code",
347 "collapsed": false,
348 "input": [
349 "display(mywidget)\n",
350 "display(mywidget, view_name=\"FloatTextView\")"
351 ],
352 "language": "python",
353 "metadata": {},
354 "outputs": [],
355 "prompt_number": 10
356 },
357 {
358 "cell_type": "markdown",
359 "metadata": {},
360 "source": [
361 "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",
362 "\n",
363 "| Widget Name | View Names |\n",
364 "|:-----------------------|:--------------------|\n",
365 "| BoolWidget | *CheckboxView* |\n",
366 "| | ToggleButtonView |\n",
367 "| ButtonWidget | *ButtonView* |\n",
368 "| ContainerWidget | *ContainerView* |\n",
369 "| FloatRangeWidget | *FloatSliderView* |\n",
370 "| | FloatTextView |\n",
371 "| | ProgressView |\n",
372 "| FloatWidget | *FloatTextView* |\n",
373 "| IntRangeWidget | *IntSliderView* |\n",
374 "| | IntTextView |\n",
375 "| | ProgressView |\n",
376 "| IntWidget | *IntTextView* |\n",
377 "| MulticontainerWidget | AccordionView |\n",
378 "| | *TabView* |\n",
379 "| SelectionWidget | ToggleButtonsView |\n",
380 "| | RadioButtonsView |\n",
381 "| | *DropdownView* |\n",
382 "| StringWidget | LabelView |\n",
383 "| | TextAreaView |\n",
384 "| | *TextBoxView* |\n"
385 ]
386 }
387 ],
388 "metadata": {}
389 }
390 ]
391 } No newline at end of file
Show file before | Show file after | Hide comments
@@ -0,0 +1,310 b''
1 {
2 "metadata": {
3 "name": ""
4 },
5 "nbformat": 3,
6 "nbformat_minor": 0,
7 "worksheets": [
8 {
9 "cells": [
10 {
11 "cell_type": "code",
12 "collapsed": false,
13 "input": [
14 "from IPython.html import widgets # Widget definitions\n",
15 "from IPython.display import display # Used to display widgets in the notebook\n",
16 "\n",
17 "# Enable widgets in this notebook\n",
18 "widgets.init_widget_js()"
19 ],
20 "language": "python",
21 "metadata": {},
22 "outputs": [
23 {
24 "javascript": [
25 "$.getScript(\"/static/notebook/js/widgets/bool.js\");"
26 ],
27 "metadata": {},
28 "output_type": "display_data"
29 },
30 {
31 "javascript": [
32 "$.getScript(\"/static/notebook/js/widgets/int_range.js\");"
33 ],
34 "metadata": {},
35 "output_type": "display_data"
36 },
37 {
38 "javascript": [
39 "$.getScript(\"/static/notebook/js/widgets/int.js\");"
40 ],
41 "metadata": {},
42 "output_type": "display_data"
43 },
44 {
45 "javascript": [
46 "$.getScript(\"/static/notebook/js/widgets/selection.js\");"
47 ],
48 "metadata": {},
49 "output_type": "display_data"
50 },
51 {
52 "javascript": [
53 "$.getScript(\"/static/notebook/js/widgets/string.js\");"
54 ],
55 "metadata": {},
56 "output_type": "display_data"
57 },
58 {
59 "javascript": [
60 "$.getScript(\"/static/notebook/js/widgets/float.js\");"
61 ],
62 "metadata": {},
63 "output_type": "display_data"
64 },
65 {
66 "javascript": [
67 "$.getScript(\"/static/notebook/js/widgets/container.js\");"
68 ],
69 "metadata": {},
70 "output_type": "display_data"
71 },
72 {
73 "javascript": [
74 "$.getScript(\"/static/notebook/js/widgets/multicontainer.js\");"
75 ],
76 "metadata": {},
77 "output_type": "display_data"
78 },
79 {
80 "javascript": [
81 "$.getScript(\"/static/notebook/js/widgets/button.js\");"
82 ],
83 "metadata": {},
84 "output_type": "display_data"
85 },
86 {
87 "javascript": [
88 "$.getScript(\"/static/notebook/js/widgets/float_range.js\");"
89 ],
90 "metadata": {},
91 "output_type": "display_data"
92 }
93 ],
94 "prompt_number": 1
95 },
96 {
97 "cell_type": "heading",
98 "level": 1,
99 "metadata": {},
100 "source": [
101 "Traitlet Events"
102 ]
103 },
104 {
105 "cell_type": "markdown",
106 "metadata": {},
107 "source": [
108 "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."
109 ]
110 },
111 {
112 "cell_type": "code",
113 "collapsed": false,
114 "input": [
115 "print(widgets.Widget.on_trait_change.__doc__)"
116 ],
117 "language": "python",
118 "metadata": {},
119 "outputs": [
120 {
121 "output_type": "stream",
122 "stream": "stdout",
123 "text": [
124 "Setup a handler to be called when a trait changes.\n",
125 "\n",
126 " This is used to setup dynamic notifications of trait changes.\n",
127 "\n",
128 " Static handlers can be created by creating methods on a HasTraits\n",
129 " subclass with the naming convention '_[traitname]_changed'. Thus,\n",
130 " to create static handler for the trait 'a', create the method\n",
131 " _a_changed(self, name, old, new) (fewer arguments can be used, see\n",
132 " below).\n",
133 "\n",
134 " Parameters\n",
135 " ----------\n",
136 " handler : callable\n",
137 " A callable that is called when a trait changes. Its\n",
138 " signature can be handler(), handler(name), handler(name, new)\n",
139 " or handler(name, old, new).\n",
140 " name : list, str, None\n",
141 " If None, the handler will apply to all traits. If a list\n",
142 " of str, handler will apply to all names in the list. If a\n",
143 " str, the handler will apply just to that name.\n",
144 " remove : bool\n",
145 " If False (the default), then install the handler. If True\n",
146 " then unintall it.\n",
147 " \n"
148 ]
149 }
150 ],
151 "prompt_number": 2
152 },
153 {
154 "cell_type": "markdown",
155 "metadata": {},
156 "source": [
157 "Mentioned in the doc string, the callback registered can have 4 possible signatures:\n",
158 "\n",
159 "- callback()\n",
160 "- callback(trait_name)\n",
161 "- callback(trait_name, new_value)\n",
162 "- callback(trait_name, old_value, new_value)\n",
163 "\n",
164 "An example of how to output an IntRangeWiget's value as it is changed can be seen below."
165 ]
166 },
167 {
168 "cell_type": "code",
169 "collapsed": false,
170 "input": [
171 "intrange = widgets.IntRangeWidget()\n",
172 "display(intrange)\n",
173 "\n",
174 "def on_value_change(name, value):\n",
175 " print value\n",
176 "\n",
177 "intrange.on_trait_change(on_value_change, 'value')"
178 ],
179 "language": "python",
180 "metadata": {},
181 "outputs": [],
182 "prompt_number": 3
183 },
184 {
185 "cell_type": "heading",
186 "level": 1,
187 "metadata": {},
188 "source": [
189 "Specialized Events"
190 ]
191 },
192 {
193 "cell_type": "heading",
194 "level": 2,
195 "metadata": {},
196 "source": [
197 "Button On Click Event"
198 ]
199 },
200 {
201 "cell_type": "markdown",
202 "metadata": {},
203 "source": [
204 "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."
205 ]
206 },
207 {
208 "cell_type": "code",
209 "collapsed": false,
210 "input": [
211 "print(widgets.ButtonWidget.on_click.__doc__)"
212 ],
213 "language": "python",
214 "metadata": {},
215 "outputs": [
216 {
217 "output_type": "stream",
218 "stream": "stdout",
219 "text": [
220 "Register a callback to execute when the button is clicked. The\n",
221 " callback can either accept no parameters or one sender parameter:\n",
222 " - callback()\n",
223 " - callback(sender)\n",
224 " If the callback has a sender parameter, the ButtonWidget instance that\n",
225 " called the callback will be passed into the method as the sender.\n",
226 "\n",
227 " Parameters\n",
228 " ----------\n",
229 " remove : bool (optional)\n",
230 " Set to true to remove the callback from the list of callbacks.\n"
231 ]
232 }
233 ],
234 "prompt_number": 4
235 },
236 {
237 "cell_type": "markdown",
238 "metadata": {},
239 "source": [
240 "Button clicks are tracked by the `clicks` property of the button widget. By using the `on_click` method and the `clicks` property, a button that outputs how many times it has been clicked is shown below."
241 ]
242 },
243 {
244 "cell_type": "code",
245 "collapsed": false,
246 "input": [
247 "button = widgets.ButtonWidget(description=\"Click Me!\")\n",
248 "display(button)\n",
249 "\n",
250 "def on_button_clicked(sender):\n",
251 " print(\"Button clicked %d times.\" % sender.clicks)\n",
252 "\n",
253 "button.on_click(on_button_clicked)"
254 ],
255 "language": "python",
256 "metadata": {},
257 "outputs": [
258 {
259 "output_type": "stream",
260 "stream": "stdout",
261 "text": [
262 "Button clicked 1 times.\n"
263 ]
264 },
265 {
266 "output_type": "stream",
267 "stream": "stdout",
268 "text": [
269 "Button clicked 2 times.\n"
270 ]
271 },
272 {
273 "output_type": "stream",
274 "stream": "stdout",
275 "text": [
276 "Button clicked 3 times.\n"
277 ]
278 }
279 ],
280 "prompt_number": 5
281 },
282 {
283 "cell_type": "markdown",
284 "metadata": {},
285 "source": [
286 "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."
287 ]
288 },
289 {
290 "cell_type": "code",
291 "collapsed": false,
292 "input": [
293 "def show_button(sender=None):\n",
294 " button = widgets.ButtonWidget()\n",
295 " button.description = \"%d\" % (sender.clicks if sender is not None else 0)\n",
296 " display(button)\n",
297 " button.on_click(show_button)\n",
298 "show_button()\n",
299 " "
300 ],
301 "language": "python",
302 "metadata": {},
303 "outputs": [],
304 "prompt_number": 6
305 }
306 ],
307 "metadata": {}
308 }
309 ]
310 } No newline at end of file
Show file before | Show file after | Hide comments
@@ -0,0 +1,326 b''
1 {
2 "metadata": {
3 "name": ""
4 },
5 "nbformat": 3,
6 "nbformat_minor": 0,
7 "worksheets": [
8 {
9 "cells": [
10 {
11 "cell_type": "code",
12 "collapsed": false,
13 "input": [
14 "from IPython.html import widgets # Widget definitions\n",
15 "from IPython.display import display # Used to display widgets in the notebook\n",
16 "\n",
17 "# Enable widgets in this notebook\n",
18 "widgets.init_widget_js()"
19 ],
20 "language": "python",
21 "metadata": {},
22 "outputs": [
23 {
24 "javascript": [
25 "$.getScript(\"/static/notebook/js/widgets/bool.js\");"
26 ],
27 "metadata": {},
28 "output_type": "display_data"
29 },
30 {
31 "javascript": [
32 "$.getScript(\"/static/notebook/js/widgets/int_range.js\");"
33 ],
34 "metadata": {},
35 "output_type": "display_data"
36 },
37 {
38 "javascript": [
39 "$.getScript(\"/static/notebook/js/widgets/int.js\");"
40 ],
41 "metadata": {},
42 "output_type": "display_data"
43 },
44 {
45 "javascript": [
46 "$.getScript(\"/static/notebook/js/widgets/selection.js\");"
47 ],
48 "metadata": {},
49 "output_type": "display_data"
50 },
51 {
52 "javascript": [
53 "$.getScript(\"/static/notebook/js/widgets/string.js\");"
54 ],
55 "metadata": {},
56 "output_type": "display_data"
57 },
58 {
59 "javascript": [
60 "$.getScript(\"/static/notebook/js/widgets/float.js\");"
61 ],
62 "metadata": {},
63 "output_type": "display_data"
64 },
65 {
66 "javascript": [
67 "$.getScript(\"/static/notebook/js/widgets/container.js\");"
68 ],
69 "metadata": {},
70 "output_type": "display_data"
71 },
72 {
73 "javascript": [
74 "$.getScript(\"/static/notebook/js/widgets/multicontainer.js\");"
75 ],
76 "metadata": {},
77 "output_type": "display_data"
78 },
79 {
80 "javascript": [
81 "$.getScript(\"/static/notebook/js/widgets/button.js\");"
82 ],
83 "metadata": {},
84 "output_type": "display_data"
85 },
86 {
87 "javascript": [
88 "$.getScript(\"/static/notebook/js/widgets/float_range.js\");"
89 ],
90 "metadata": {},
91 "output_type": "display_data"
92 }
93 ],
94 "prompt_number": 1
95 },
96 {
97 "cell_type": "heading",
98 "level": 1,
99 "metadata": {},
100 "source": [
101 "Parent/Child Relationships"
102 ]
103 },
104 {
105 "cell_type": "markdown",
106 "metadata": {},
107 "source": [
108 "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",
109 "\n",
110 "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)."
111 ]
112 },
113 {
114 "cell_type": "code",
115 "collapsed": false,
116 "input": [
117 "container = widgets.MulticontainerWidget()\n",
118 "\n",
119 "floatrange = widgets.FloatRangeWidget(parent=container) # You can set the parent in the constructor,\n",
120 "\n",
121 "string = widgets.StringWidget()\n",
122 "string.parent = container # or after the widget has been created.\n",
123 "\n",
124 "display(container) # Displays the `container` and all of it's children."
125 ],
126 "language": "python",
127 "metadata": {},
128 "outputs": [],
129 "prompt_number": 2
130 },
131 {
132 "cell_type": "markdown",
133 "metadata": {},
134 "source": [
135 "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",
136 "\n",
137 "In the example below, the IntRangeWidget is never rendered since display was called on the parent before the parent/child relationship was established."
138 ]
139 },
140 {
141 "cell_type": "code",
142 "collapsed": false,
143 "input": [
144 "container = widgets.MulticontainerWidget()\n",
145 "display(container)\n",
146 "\n",
147 "intrange = widgets.IntRangeWidget(parent=container) # Never gets displayed."
148 ],
149 "language": "python",
150 "metadata": {},
151 "outputs": [],
152 "prompt_number": 3
153 },
154 {
155 "cell_type": "markdown",
156 "metadata": {},
157 "source": [
158 "Calling display on the child fixes the problem."
159 ]
160 },
161 {
162 "cell_type": "code",
163 "collapsed": false,
164 "input": [
165 "container = widgets.MulticontainerWidget()\n",
166 "display(container)\n",
167 "\n",
168 "intrange = widgets.IntRangeWidget(parent=container)\n",
169 "display(intrange) # This line is needed since the `container` has already been displayed."
170 ],
171 "language": "python",
172 "metadata": {},
173 "outputs": [],
174 "prompt_number": 4
175 },
176 {
177 "cell_type": "heading",
178 "level": 1,
179 "metadata": {},
180 "source": [
181 "Changing Child Views"
182 ]
183 },
184 {
185 "cell_type": "markdown",
186 "metadata": {},
187 "source": [
188 "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)."
189 ]
190 },
191 {
192 "cell_type": "code",
193 "collapsed": false,
194 "input": [
195 "container = widgets.MulticontainerWidget()\n",
196 "\n",
197 "floatrange = widgets.FloatRangeWidget(parent=container)\n",
198 "floatrange.default_view_name = \"FloatTextView\" # It can be set as a property.\n",
199 "\n",
200 "string = widgets.StringWidget(default_view_name = \"TextAreaView\") # It can also be set in the constructor.\n",
201 "string.parent = container\n",
202 "\n",
203 "display(container)"
204 ],
205 "language": "python",
206 "metadata": {},
207 "outputs": [],
208 "prompt_number": 5
209 },
210 {
211 "cell_type": "markdown",
212 "metadata": {},
213 "source": [
214 "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."
215 ]
216 },
217 {
218 "cell_type": "code",
219 "collapsed": false,
220 "input": [
221 "container = widgets.MulticontainerWidget()\n",
222 "display(container)\n",
223 "\n",
224 "floatrange = widgets.FloatRangeWidget()\n",
225 "floatrange.parent=container\n",
226 "display(floatrange, view_name = \"FloatTextView\") # view_name can be set during display.\n",
227 "\n",
228 "string = widgets.StringWidget()\n",
229 "string.parent = container\n",
230 "string.default_view_name = \"TextAreaView\" # Setting default_view_name still works.\n",
231 "display(string)\n"
232 ],
233 "language": "python",
234 "metadata": {},
235 "outputs": [],
236 "prompt_number": 6
237 },
238 {
239 "cell_type": "heading",
240 "level": 1,
241 "metadata": {},
242 "source": [
243 "Visibility"
244 ]
245 },
246 {
247 "cell_type": "markdown",
248 "metadata": {},
249 "source": [
250 "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)."
251 ]
252 },
253 {
254 "cell_type": "code",
255 "collapsed": false,
256 "input": [
257 "string = widgets.StringWidget(value=\"Hello World!\")\n",
258 "display(string, view_name=\"LabelView\") "
259 ],
260 "language": "python",
261 "metadata": {},
262 "outputs": [],
263 "prompt_number": 7
264 },
265 {
266 "cell_type": "code",
267 "collapsed": false,
268 "input": [
269 "string.visible=False"
270 ],
271 "language": "python",
272 "metadata": {},
273 "outputs": [],
274 "prompt_number": 8
275 },
276 {
277 "cell_type": "code",
278 "collapsed": false,
279 "input": [
280 "string.visible=True"
281 ],
282 "language": "python",
283 "metadata": {},
284 "outputs": [],
285 "prompt_number": 9
286 },
287 {
288 "cell_type": "markdown",
289 "metadata": {},
290 "source": [
291 "In the example below, a form is rendered which conditionally displays widgets depending on the state of other widgets. Try toggling the student checkbox."
292 ]
293 },
294 {
295 "cell_type": "code",
296 "collapsed": false,
297 "input": [
298 "form = widgets.ContainerWidget()\n",
299 "first = widgets.StringWidget(description=\"First Name:\", parent=form)\n",
300 "last = widgets.StringWidget(description=\"Last Name:\", parent=form)\n",
301 "\n",
302 "student = widgets.BoolWidget(description=\"Student:\", value=False, parent=form)\n",
303 "school_info = widgets.ContainerWidget(visible=False, parent=form)\n",
304 "school = widgets.StringWidget(description=\"School:\", parent=school_info)\n",
305 "grade = widgets.IntRangeWidget(description=\"Grade:\", min=0, max=12, default_view_name='IntTextView', parent=school_info)\n",
306 "\n",
307 "pet = widgets.StringWidget(description=\"Pet's Name:\", parent=form)\n",
308 "display(form)\n",
309 "\n",
310 "def on_student_toggle(name, value):\n",
311 " if value:\n",
312 " school_info.visible = True\n",
313 " else:\n",
314 " school_info.visible = False\n",
315 "student.on_trait_change(on_student_toggle, 'value')\n"
316 ],
317 "language": "python",
318 "metadata": {},
319 "outputs": [],
320 "prompt_number": 10
321 }
322 ],
323 "metadata": {}
324 }
325 ]
326 } No newline at end of file
Show file before | Show file after | Hide comments
@@ -0,0 +1,405 b''
1 {
2 "metadata": {
3 "name": ""
4 },
5 "nbformat": 3,
6 "nbformat_minor": 0,
7 "worksheets": [
8 {
9 "cells": [
10 {
11 "cell_type": "code",
12 "collapsed": false,
13 "input": [
14 "from IPython.html import widgets # Widget definitions\n",
15 "from IPython.display import display # Used to display widgets in the notebook\n",
16 "\n",
17 "# Enable widgets in this notebook\n",
18 "widgets.init_widget_js()"
19 ],
20 "language": "python",
21 "metadata": {},
22 "outputs": [
23 {
24 "javascript": [
25 "$.getScript(\"../static/notebook/js/widgets/bool.js\");"
26 ],
27 "metadata": {},
28 "output_type": "display_data"
29 },
30 {
31 "javascript": [
32 "$.getScript(\"../static/notebook/js/widgets/int_range.js\");"
33 ],
34 "metadata": {},
35 "output_type": "display_data"
36 },
37 {
38 "javascript": [
39 "$.getScript(\"../static/notebook/js/widgets/int.js\");"
40 ],
41 "metadata": {},
42 "output_type": "display_data"
43 },
44 {
45 "javascript": [
46 "$.getScript(\"../static/notebook/js/widgets/selection.js\");"
47 ],
48 "metadata": {},
49 "output_type": "display_data"
50 },
51 {
52 "javascript": [
53 "$.getScript(\"../static/notebook/js/widgets/string.js\");"
54 ],
55 "metadata": {},
56 "output_type": "display_data"
57 },
58 {
59 "javascript": [
60 "$.getScript(\"../static/notebook/js/widgets/float.js\");"
61 ],
62 "metadata": {},
63 "output_type": "display_data"
64 },
65 {
66 "javascript": [
67 "$.getScript(\"../static/notebook/js/widgets/container.js\");"
68 ],
69 "metadata": {},
70 "output_type": "display_data"
71 },
72 {
73 "javascript": [
74 "$.getScript(\"../static/notebook/js/widgets/multicontainer.js\");"
75 ],
76 "metadata": {},
77 "output_type": "display_data"
78 },
79 {
80 "javascript": [
81 "$.getScript(\"../static/notebook/js/widgets/button.js\");"
82 ],
83 "metadata": {},
84 "output_type": "display_data"
85 },
86 {
87 "javascript": [
88 "$.getScript(\"../static/notebook/js/widgets/float_range.js\");"
89 ],
90 "metadata": {},
91 "output_type": "display_data"
92 }
93 ],
94 "prompt_number": 1
95 },
96 {
97 "cell_type": "heading",
98 "level": 1,
99 "metadata": {},
100 "source": [
101 "CSS"
102 ]
103 },
104 {
105 "cell_type": "markdown",
106 "metadata": {},
107 "source": [
108 "When trying to design an attractive widget GUI, styling becomes important. Widget views are DOM (document object model) elements that can be controlled with CSS. There are two helper methods defined on widget that allow the manipulation of the widget's CSS. The first is the `set_css` method, whos doc string is displayed below. This method allows one or more CSS attributes to be set at once. "
109 ]
110 },
111 {
112 "cell_type": "code",
113 "collapsed": false,
114 "input": [
115 "print(widgets.Widget.set_css.__doc__)"
116 ],
117 "language": "python",
118 "metadata": {},
119 "outputs": [
120 {
121 "output_type": "stream",
122 "stream": "stdout",
123 "text": [
124 "Set one or more CSS properties of the widget (shared among all of the \n",
125 " views). This function has two signatures:\n",
126 " - set_css(css_dict, [selector=''])\n",
127 " - set_css(key, value, [selector=''])\n",
128 "\n",
129 " Parameters\n",
130 " ----------\n",
131 " css_dict : dict\n",
132 " CSS key/value pairs to apply\n",
133 " key: unicode\n",
134 " CSS key\n",
135 " value\n",
136 " CSS value\n",
137 " selector: unicode (optional)\n",
138 " JQuery selector to use to apply the CSS key/value.\n",
139 " \n"
140 ]
141 }
142 ],
143 "prompt_number": 2
144 },
145 {
146 "cell_type": "markdown",
147 "metadata": {},
148 "source": [
149 "The second is `get_css` which allows CSS attributes that have been set to be read. Note that this method will only read CSS attributes that have been set using the `set_css` method. `get_css`'s doc string is displayed below."
150 ]
151 },
152 {
153 "cell_type": "code",
154 "collapsed": false,
155 "input": [
156 "print(widgets.Widget.get_css.__doc__)"
157 ],
158 "language": "python",
159 "metadata": {},
160 "outputs": [
161 {
162 "output_type": "stream",
163 "stream": "stdout",
164 "text": [
165 "Get a CSS property of the widget. Note, this function does not \n",
166 " actually request the CSS from the front-end; Only properties that have \n",
167 " been set with set_css can be read.\n",
168 "\n",
169 " Parameters\n",
170 " ----------\n",
171 " key: unicode\n",
172 " CSS key\n",
173 " selector: unicode (optional)\n",
174 " JQuery selector used when the CSS key/value was set.\n",
175 " \n"
176 ]
177 }
178 ],
179 "prompt_number": 3
180 },
181 {
182 "cell_type": "markdown",
183 "metadata": {},
184 "source": [
185 "Below is an example that applies CSS attributes to a container to emphasize text."
186 ]
187 },
188 {
189 "cell_type": "code",
190 "collapsed": false,
191 "input": [
192 "container = widgets.ContainerWidget()\n",
193 "\n",
194 "# set_css used to set a single CSS attribute.\n",
195 "container.set_css('border', '3px solid black') # Border the container\n",
196 "\n",
197 "# set_css used to set multiple CSS attributes.\n",
198 "container.set_css({'padding': '6px', # Add padding to the container\n",
199 " 'background': 'yellow'}) # Fill the container yellow\n",
200 "\n",
201 "label = widgets.StringWidget(default_view_name=\"LabelView\", parent=container)\n",
202 "label.value = \"<strong>ALERT: </strong> Hello World!\"\n",
203 "\n",
204 "display(container)"
205 ],
206 "language": "python",
207 "metadata": {},
208 "outputs": [],
209 "prompt_number": 4
210 },
211 {
212 "cell_type": "heading",
213 "level": 1,
214 "metadata": {},
215 "source": [
216 "DOM Classes"
217 ]
218 },
219 {
220 "cell_type": "markdown",
221 "metadata": {},
222 "source": [
223 "In some cases it's necessary to apply DOM classes to your widgets. DOM classes allow DOM elements to be indentified by Javascript and CSS. The notebook defines its own set of classes to stylize its elements. The `add_class` widget method allows you to add DOM classes to your widget's definition. The `add_class` method's doc string can be seen below."
224 ]
225 },
226 {
227 "cell_type": "code",
228 "collapsed": false,
229 "input": [
230 "print(widgets.Widget.add_class.__doc__)"
231 ],
232 "language": "python",
233 "metadata": {},
234 "outputs": [
235 {
236 "output_type": "stream",
237 "stream": "stdout",
238 "text": [
239 "Add class[es] to a DOM element\n",
240 "\n",
241 " Parameters\n",
242 " ----------\n",
243 " class_name: unicode\n",
244 " Class name(s) to add to the DOM element(s). Multiple class names \n",
245 " must be space separated.\n",
246 " selector: unicode (optional)\n",
247 " JQuery selector to select the DOM element(s) that the class(es) will \n",
248 " be added to.\n",
249 " \n"
250 ]
251 }
252 ],
253 "prompt_number": 5
254 },
255 {
256 "cell_type": "markdown",
257 "metadata": {},
258 "source": [
259 "Since `add_class` if a DOM operation, it will only affect widgets that have been displayed. `add_class` must be called after the widget has been displayed. Extending the example above, the corners of the container can be rounded by adding the `corner-all` notebook class to the container (as seen below). "
260 ]
261 },
262 {
263 "cell_type": "code",
264 "collapsed": false,
265 "input": [
266 "container = widgets.ContainerWidget()\n",
267 "container.set_css({'border': '3px solid black',\n",
268 " 'padding': '6px',\n",
269 " 'background': 'yellow'}) \n",
270 "\n",
271 "label = widgets.StringWidget(default_view_name=\"LabelView\", parent=container) \n",
272 "label.value = \"<strong>ALERT: </strong> Hello World!\"\n",
273 "\n",
274 "display(container)\n",
275 "container.add_class('corner-all') # Must be called AFTER display"
276 ],
277 "language": "python",
278 "metadata": {},
279 "outputs": [],
280 "prompt_number": 6
281 },
282 {
283 "cell_type": "markdown",
284 "metadata": {},
285 "source": [
286 "The IPython notebook uses bootstrap for styling. The example above can be simplified by using a bootstrap class (as seen below). Bootstrap documentation can be found at http://getbootstrap.com/\u200e ."
287 ]
288 },
289 {
290 "cell_type": "code",
291 "collapsed": false,
292 "input": [
293 "label = widgets.StringWidget(value = \"<strong>ALERT: </strong> Hello World!\")\n",
294 "display(label, view_name=\"LabelView\")\n",
295 "\n",
296 "# Apply twitter bootstrap alert class to the label.\n",
297 "label.add_class(\"alert\")"
298 ],
299 "language": "python",
300 "metadata": {},
301 "outputs": [],
302 "prompt_number": 7
303 },
304 {
305 "cell_type": "markdown",
306 "metadata": {},
307 "source": [
308 "The example below shows how bootstrap classes can be used to change button apearance."
309 ]
310 },
311 {
312 "cell_type": "code",
313 "collapsed": false,
314 "input": [
315 "# List of the bootstrap button styles\n",
316 "button_classes = ['Default', 'btn-primary', 'btn-info', 'btn-success', \n",
317 " 'btn-warning', 'btn-danger', 'btn-inverse', 'btn-link']\n",
318 "\n",
319 "# Create each button and apply the style. Also add margin to the buttons so they space\n",
320 "# themselves nicely.\n",
321 "for i in range(8):\n",
322 " button = widgets.ButtonWidget(description=button_classes[i])\n",
323 " button.set_css(\"margin\", \"5px\")\n",
324 " display(button)\n",
325 " if i > 0: # Don't add a class the first button.\n",
326 " button.add_class(button_classes[i])\n",
327 " "
328 ],
329 "language": "python",
330 "metadata": {},
331 "outputs": [],
332 "prompt_number": 8
333 },
334 {
335 "cell_type": "markdown",
336 "metadata": {},
337 "source": [
338 "It's also useful to be able to remove DOM classes from widgets. The `remove_class` widget method allows you to remove classes from widgets that have been displayed. Like `add_widget`, it must be called after the widget has been displayed. The doc string of `remove_class` can be seen below."
339 ]
340 },
341 {
342 "cell_type": "code",
343 "collapsed": false,
344 "input": [
345 "print(widgets.Widget.remove_class.__doc__)"
346 ],
347 "language": "python",
348 "metadata": {},
349 "outputs": [
350 {
351 "output_type": "stream",
352 "stream": "stdout",
353 "text": [
354 "Remove class[es] from a DOM element\n",
355 "\n",
356 " Parameters\n",
357 " ----------\n",
358 " class_name: unicode\n",
359 " Class name(s) to remove from the DOM element(s). Multiple class \n",
360 " names must be space separated.\n",
361 " selector: unicode (optional)\n",
362 " JQuery selector to select the DOM element(s) that the class(es) will \n",
363 " be removed from.\n",
364 " \n"
365 ]
366 }
367 ],
368 "prompt_number": 9
369 },
370 {
371 "cell_type": "markdown",
372 "metadata": {},
373 "source": [
374 "The example below animates an alert using different bootstrap styles."
375 ]
376 },
377 {
378 "cell_type": "code",
379 "collapsed": false,
380 "input": [
381 "import time\n",
382 "label = widgets.StringWidget(value = \"<strong>ALERT: </strong> Hello World!\")\n",
383 "display(label, view_name=\"LabelView\")\n",
384 "\n",
385 "# Apply twitter bootstrap alert class to the label.\n",
386 "label.add_class(\"alert\")\n",
387 "\n",
388 "# Animate through additional bootstrap label styles 3 times\n",
389 "additional_alert_styles = ['alert-error', 'alert-info', 'alert-success']\n",
390 "for i in range(3 * len(additional_alert_styles)):\n",
391 " label.add_class(additional_alert_styles[i % 3])\n",
392 " label.remove_class(additional_alert_styles[(i-1) % 3])\n",
393 " time.sleep(1)\n",
394 " "
395 ],
396 "language": "python",
397 "metadata": {},
398 "outputs": [],
399 "prompt_number": 10
400 }
401 ],
402 "metadata": {}
403 }
404 ]
405 } No newline at end of file
General Comments 0
You need to be logged in to leave comments. Login now