##// END OF EJS Templates
review pass on widget examples
MinRK -
Show More
@@ -1,314 +1,314 b''
1 {
1 {
2 "metadata": {
2 "metadata": {
3 "cell_tags": [
3 "cell_tags": [
4 [
4 [
5 "<None>",
5 "<None>",
6 null
6 null
7 ]
7 ]
8 ],
8 ],
9 "name": ""
9 "name": ""
10 },
10 },
11 "nbformat": 3,
11 "nbformat": 3,
12 "nbformat_minor": 0,
12 "nbformat_minor": 0,
13 "worksheets": [
13 "worksheets": [
14 {
14 {
15 "cells": [
15 "cells": [
16 {
16 {
17 "cell_type": "markdown",
17 "cell_type": "markdown",
18 "metadata": {},
18 "metadata": {},
19 "source": [
19 "source": [
20 "[Index](index.ipynb)\n",
20 "[Index](index.ipynb)\n",
21 "\n",
21 "\n",
22 "To use IPython widgets in the notebook, the widget namespace needs to be imported."
22 "To use IPython widgets in the notebook, the widget namespace needs to be imported."
23 ]
23 ]
24 },
24 },
25 {
25 {
26 "cell_type": "code",
26 "cell_type": "code",
27 "collapsed": false,
27 "collapsed": false,
28 "input": [
28 "input": [
29 "from IPython.html import widgets # Widget definitions\n",
29 "from IPython.html import widgets # Widget definitions\n",
30 "from IPython.display import display # Used to display widgets in the notebook"
30 "from IPython.display import display # Used to display widgets in the notebook"
31 ],
31 ],
32 "language": "python",
32 "language": "python",
33 "metadata": {},
33 "metadata": {},
34 "outputs": [],
34 "outputs": [],
35 "prompt_number": 1
35 "prompt_number": 1
36 },
36 },
37 {
37 {
38 "cell_type": "heading",
38 "cell_type": "heading",
39 "level": 1,
39 "level": 1,
40 "metadata": {},
40 "metadata": {},
41 "source": [
41 "source": [
42 "Basic Widgets"
42 "Basic Widgets"
43 ]
43 ]
44 },
44 },
45 {
45 {
46 "cell_type": "markdown",
46 "cell_type": "markdown",
47 "metadata": {},
47 "metadata": {},
48 "source": [
48 "source": [
49 "The IPython notebook comes preloaded with basic widgets that represent common data types. These widgets are\n",
49 "IPython comes with basic widgets that represent common interactive controls. These widgets are\n",
50 "\n",
50 "\n",
51 "- CheckBoxWidget\n",
51 "- CheckBoxWidget\n",
52 "- ToggleButtonWidget\n",
52 "- ToggleButtonWidget\n",
53 "- FloatSliderWidget\n",
53 "- FloatSliderWidget\n",
54 "- BoundedFloatTextWidget\n",
54 "- BoundedFloatTextWidget\n",
55 "- FloatProgressWidget\n",
55 "- FloatProgressWidget\n",
56 "- FloatTextWidget\n",
56 "- FloatTextWidget\n",
57 "- ImageWidget\n",
57 "- ImageWidget\n",
58 "- IntSliderWidget\n",
58 "- IntSliderWidget\n",
59 "- BoundedIntTextWidget\n",
59 "- BoundedIntTextWidget\n",
60 "- IntProgressWidget\n",
60 "- IntProgressWidget\n",
61 "- IntTextWidget\n",
61 "- IntTextWidget\n",
62 "- ToggleButtonsWidget\n",
62 "- ToggleButtonsWidget\n",
63 "- RadioButtonsWidget\n",
63 "- RadioButtonsWidget\n",
64 "- DropdownWidget\n",
64 "- DropdownWidget\n",
65 "- ListBoxWidget\n",
65 "- ListBoxWidget\n",
66 "- HTMLWidget\n",
66 "- HTMLWidget\n",
67 "- LatexWidget\n",
67 "- LatexWidget\n",
68 "- TextAreaWidget\n",
68 "- TextAreaWidget\n",
69 "- TextBoxWidget\n",
69 "- TextBoxWidget\n",
70 "- ButtonWidget\n",
70 "\n",
71 "\n",
71 "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",
72 "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",
72 "\n",
73 "\n",
73 "- ButtonWidget\n",
74 "- ContainerWidget\n",
74 "- ContainerWidget\n",
75 "- PopupWidget\n",
75 "- PopupWidget\n",
76 "- AccordionWidget\n",
76 "- AccordionWidget\n",
77 "- TabWidget\n",
77 "- TabWidget\n",
78 "\n",
78 "\n",
79 "To see the complete list of widgets, one can execute the following"
79 "To see the complete list of widgets, one can execute the following"
80 ]
80 ]
81 },
81 },
82 {
82 {
83 "cell_type": "code",
83 "cell_type": "code",
84 "collapsed": false,
84 "collapsed": false,
85 "input": [
85 "input": [
86 "[widget for widget in dir(widgets) if widget.endswith('Widget')]"
86 "[widget for widget in dir(widgets) if widget.endswith('Widget')]"
87 ],
87 ],
88 "language": "python",
88 "language": "python",
89 "metadata": {},
89 "metadata": {},
90 "outputs": [
90 "outputs": [
91 {
91 {
92 "metadata": {},
92 "metadata": {},
93 "output_type": "pyout",
93 "output_type": "pyout",
94 "prompt_number": 2,
94 "prompt_number": 2,
95 "text": [
95 "text": [
96 "['AccordionWidget',\n",
96 "['AccordionWidget',\n",
97 " 'BoundedFloatTextWidget',\n",
97 " 'BoundedFloatTextWidget',\n",
98 " 'BoundedIntTextWidget',\n",
98 " 'BoundedIntTextWidget',\n",
99 " 'ButtonWidget',\n",
99 " 'ButtonWidget',\n",
100 " 'CheckBoxWidget',\n",
100 " 'CheckBoxWidget',\n",
101 " 'ContainerWidget',\n",
101 " 'ContainerWidget',\n",
102 " 'DOMWidget',\n",
102 " 'DOMWidget',\n",
103 " 'DropdownWidget',\n",
103 " 'DropdownWidget',\n",
104 " 'FloatProgressWidget',\n",
104 " 'FloatProgressWidget',\n",
105 " 'FloatSliderWidget',\n",
105 " 'FloatSliderWidget',\n",
106 " 'FloatTextWidget',\n",
106 " 'FloatTextWidget',\n",
107 " 'HTMLWidget',\n",
107 " 'HTMLWidget',\n",
108 " 'ImageWidget',\n",
108 " 'ImageWidget',\n",
109 " 'IntProgressWidget',\n",
109 " 'IntProgressWidget',\n",
110 " 'IntSliderWidget',\n",
110 " 'IntSliderWidget',\n",
111 " 'IntTextWidget',\n",
111 " 'IntTextWidget',\n",
112 " 'LatexWidget',\n",
112 " 'LatexWidget',\n",
113 " 'ListBoxWidget',\n",
113 " 'ListBoxWidget',\n",
114 " 'PopupWidget',\n",
114 " 'PopupWidget',\n",
115 " 'RadioButtonsWidget',\n",
115 " 'RadioButtonsWidget',\n",
116 " 'TabWidget',\n",
116 " 'TabWidget',\n",
117 " 'TextAreaWidget',\n",
117 " 'TextAreaWidget',\n",
118 " 'TextBoxWidget',\n",
118 " 'TextBoxWidget',\n",
119 " 'ToggleButtonWidget',\n",
119 " 'ToggleButtonWidget',\n",
120 " 'ToggleButtonsWidget',\n",
120 " 'ToggleButtonsWidget',\n",
121 " 'Widget']"
121 " 'Widget']"
122 ]
122 ]
123 }
123 }
124 ],
124 ],
125 "prompt_number": 2
125 "prompt_number": 2
126 },
126 },
127 {
127 {
128 "cell_type": "markdown",
128 "cell_type": "markdown",
129 "metadata": {},
129 "metadata": {},
130 "source": [
130 "source": [
131 "The basic widgets can all be constructed without arguments. The following creates a *FloatSliderWidget* without displaying it"
131 "The basic widgets all have sensible default values. Create a *FloatSliderWidget* without displaying it:"
132 ]
132 ]
133 },
133 },
134 {
134 {
135 "cell_type": "code",
135 "cell_type": "code",
136 "collapsed": false,
136 "collapsed": false,
137 "input": [
137 "input": [
138 "mywidget = widgets.FloatSliderWidget()"
138 "mywidget = widgets.FloatSliderWidget()"
139 ],
139 ],
140 "language": "python",
140 "language": "python",
141 "metadata": {},
141 "metadata": {},
142 "outputs": [],
142 "outputs": [],
143 "prompt_number": 3
143 "prompt_number": 3
144 },
144 },
145 {
145 {
146 "cell_type": "markdown",
146 "cell_type": "markdown",
147 "metadata": {},
147 "metadata": {},
148 "source": [
148 "source": [
149 "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"
149 "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"
150 ]
150 ]
151 },
151 },
152 {
152 {
153 "cell_type": "code",
153 "cell_type": "code",
154 "collapsed": false,
154 "collapsed": false,
155 "input": [
155 "input": [
156 "display(mywidget)"
156 "display(mywidget)"
157 ],
157 ],
158 "language": "python",
158 "language": "python",
159 "metadata": {},
159 "metadata": {},
160 "outputs": [],
160 "outputs": [],
161 "prompt_number": 4
161 "prompt_number": 4
162 },
162 },
163 {
163 {
164 "cell_type": "markdown",
164 "cell_type": "markdown",
165 "metadata": {},
165 "metadata": {},
166 "source": [
166 "source": [
167 "or"
167 "or"
168 ]
168 ]
169 },
169 },
170 {
170 {
171 "cell_type": "code",
171 "cell_type": "code",
172 "collapsed": false,
172 "collapsed": false,
173 "input": [
173 "input": [
174 "mywidget"
174 "mywidget"
175 ],
175 ],
176 "language": "python",
176 "language": "python",
177 "metadata": {},
177 "metadata": {},
178 "outputs": [],
178 "outputs": [],
179 "prompt_number": 5
179 "prompt_number": 5
180 },
180 },
181 {
181 {
182 "cell_type": "markdown",
182 "cell_type": "markdown",
183 "metadata": {},
183 "metadata": {},
184 "source": [
184 "source": [
185 "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",
185 "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",
186 "\n",
186 "\n",
187 "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."
187 "Widgets are manipulated via special instance attributes (traitlets). The names of these traitlets are listed in the widget's `keys` attribute (as seen below). A few of these attributes are common to most widgets. The basic attributes are `value`, `description`, `visible`, and `disabled`. `_css` and `_view_name` are private attributes that exist in all widgets and should not be modified."
188 ]
188 ]
189 },
189 },
190 {
190 {
191 "cell_type": "code",
191 "cell_type": "code",
192 "collapsed": false,
192 "collapsed": false,
193 "input": [
193 "input": [
194 "mywidget.keys"
194 "mywidget.keys"
195 ],
195 ],
196 "language": "python",
196 "language": "python",
197 "metadata": {},
197 "metadata": {},
198 "outputs": [
198 "outputs": [
199 {
199 {
200 "metadata": {},
200 "metadata": {},
201 "output_type": "pyout",
201 "output_type": "pyout",
202 "prompt_number": 6,
202 "prompt_number": 6,
203 "text": [
203 "text": [
204 "['_view_name',\n",
204 "['_view_name',\n",
205 " 'description',\n",
206 " 'min',\n",
207 " 'orientation',\n",
205 " 'orientation',\n",
206 " 'min',\n",
208 " 'max',\n",
207 " 'max',\n",
209 " '_css',\n",
208 " '_css',\n",
210 " 'value',\n",
209 " 'value',\n",
211 " 'disabled',\n",
210 " 'disabled',\n",
212 " 'visible',\n",
211 " 'visible',\n",
213 " 'step']"
212 " 'step',\n",
213 " 'description']"
214 ]
214 ]
215 }
215 }
216 ],
216 ],
217 "prompt_number": 6
217 "prompt_number": 6
218 },
218 },
219 {
219 {
220 "cell_type": "markdown",
220 "cell_type": "markdown",
221 "metadata": {},
221 "metadata": {},
222 "source": [
222 "source": [
223 "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."
223 "Changing a widget's attribute will automatically update that widget everywhere it is displayed in the notebook. Here, the `value` attribute of `mywidget` is set. The slider shown above updates automatically with the new value. Syncing also works in the other direction - changing the value of the displayed widget will update the property's value."
224 ]
224 ]
225 },
225 },
226 {
226 {
227 "cell_type": "code",
227 "cell_type": "code",
228 "collapsed": false,
228 "collapsed": false,
229 "input": [
229 "input": [
230 "mywidget.value = 25.0"
230 "mywidget.value = 25.0"
231 ],
231 ],
232 "language": "python",
232 "language": "python",
233 "metadata": {},
233 "metadata": {},
234 "outputs": [],
234 "outputs": [],
235 "prompt_number": 7
235 "prompt_number": 7
236 },
236 },
237 {
237 {
238 "cell_type": "markdown",
238 "cell_type": "markdown",
239 "metadata": {},
239 "metadata": {},
240 "source": [
240 "source": [
241 "After changing the widget's value in the notebook by hand to 0.0 (sliding the bar to the far left)."
241 "After changing the widget's value in the notebook by hand to 0.0 (sliding the bar to the far left)."
242 ]
242 ]
243 },
243 },
244 {
244 {
245 "cell_type": "code",
245 "cell_type": "code",
246 "collapsed": false,
246 "collapsed": false,
247 "input": [
247 "input": [
248 "mywidget.value"
248 "mywidget.value"
249 ],
249 ],
250 "language": "python",
250 "language": "python",
251 "metadata": {},
251 "metadata": {},
252 "outputs": [
252 "outputs": [
253 {
253 {
254 "metadata": {},
254 "metadata": {},
255 "output_type": "pyout",
255 "output_type": "pyout",
256 "prompt_number": 8,
256 "prompt_number": 8,
257 "text": [
257 "text": [
258 "0.0"
258 "25.0"
259 ]
259 ]
260 }
260 }
261 ],
261 ],
262 "prompt_number": 8
262 "prompt_number": 8
263 },
263 },
264 {
264 {
265 "cell_type": "markdown",
265 "cell_type": "markdown",
266 "metadata": {},
266 "metadata": {},
267 "source": [
267 "source": [
268 "Widget property values can also be set with kwargs during the construction of the widget (as seen below)."
268 "Widget values can also be set with kwargs during the construction of the widget (as seen below)."
269 ]
269 ]
270 },
270 },
271 {
271 {
272 "cell_type": "code",
272 "cell_type": "code",
273 "collapsed": false,
273 "collapsed": false,
274 "input": [
274 "input": [
275 "mysecondwidget = widgets.RadioButtonsWidget(values=[\"Item A\", \"Item B\", \"Item C\"], value=\"Item A\")\n",
275 "mysecondwidget = widgets.RadioButtonsWidget(values=[\"Item A\", \"Item B\", \"Item C\"], value=\"Item A\")\n",
276 "display(mysecondwidget)"
276 "display(mysecondwidget)"
277 ],
277 ],
278 "language": "python",
278 "language": "python",
279 "metadata": {},
279 "metadata": {},
280 "outputs": [],
280 "outputs": [],
281 "prompt_number": 9
281 "prompt_number": 9
282 },
282 },
283 {
283 {
284 "cell_type": "code",
284 "cell_type": "code",
285 "collapsed": false,
285 "collapsed": false,
286 "input": [
286 "input": [
287 "mysecondwidget.value"
287 "mysecondwidget.value"
288 ],
288 ],
289 "language": "python",
289 "language": "python",
290 "metadata": {},
290 "metadata": {},
291 "outputs": [
291 "outputs": [
292 {
292 {
293 "metadata": {},
293 "metadata": {},
294 "output_type": "pyout",
294 "output_type": "pyout",
295 "prompt_number": 10,
295 "prompt_number": 10,
296 "text": [
296 "text": [
297 "'Item A'"
297 "'Item A'"
298 ]
298 ]
299 }
299 }
300 ],
300 ],
301 "prompt_number": 10
301 "prompt_number": 10
302 },
302 },
303 {
303 {
304 "cell_type": "markdown",
304 "cell_type": "markdown",
305 "metadata": {},
305 "metadata": {},
306 "source": [
306 "source": [
307 "In [Part 2](Part 2 - Events.ipynb) of this [series](index.ipynb), you will learn about widget events."
307 "In [Part 2](Part 2 - Events.ipynb) of this [series](index.ipynb), you will learn about widget events."
308 ]
308 ]
309 }
309 }
310 ],
310 ],
311 "metadata": {}
311 "metadata": {}
312 }
312 }
313 ]
313 ]
314 } No newline at end of file
314 }
@@ -1,286 +1,276 b''
1 {
1 {
2 "metadata": {
2 "metadata": {
3 "cell_tags": [
3 "cell_tags": [
4 [
4 [
5 "<None>",
5 "<None>",
6 null
6 null
7 ]
7 ]
8 ],
8 ],
9 "name": ""
9 "name": ""
10 },
10 },
11 "nbformat": 3,
11 "nbformat": 3,
12 "nbformat_minor": 0,
12 "nbformat_minor": 0,
13 "worksheets": [
13 "worksheets": [
14 {
14 {
15 "cells": [
15 "cells": [
16 {
16 {
17 "cell_type": "markdown",
17 "cell_type": "markdown",
18 "metadata": {},
18 "metadata": {},
19 "source": [
19 "source": [
20 "[< Back to Part 1](Part 1 - Basics.ipynb) or [Index](index.ipynb)"
20 "[< Back to Part 1](Part 1 - Basics.ipynb) or [Index](index.ipynb)"
21 ]
21 ]
22 },
22 },
23 {
23 {
24 "cell_type": "code",
24 "cell_type": "code",
25 "collapsed": false,
25 "collapsed": false,
26 "input": [
26 "input": [
27 "from __future__ import print_function # 2.7 compatability\n",
27 "from __future__ import print_function # 2.7 compatability\n",
28 "\n",
28 "\n",
29 "from IPython.html import widgets # Widget definitions\n",
29 "from IPython.html import widgets # Widget definitions\n",
30 "from IPython.display import display # Used to display widgets in the notebook"
30 "from IPython.display import display # Used to display widgets in the notebook"
31 ],
31 ],
32 "language": "python",
32 "language": "python",
33 "metadata": {},
33 "metadata": {},
34 "outputs": [],
34 "outputs": [],
35 "prompt_number": 1
35 "prompt_number": 1
36 },
36 },
37 {
37 {
38 "cell_type": "heading",
38 "cell_type": "heading",
39 "level": 1,
39 "level": 1,
40 "metadata": {},
40 "metadata": {},
41 "source": [
41 "source": [
42 "Traitlet Events"
42 "Traitlet Events"
43 ]
43 ]
44 },
44 },
45 {
45 {
46 "cell_type": "markdown",
46 "cell_type": "markdown",
47 "metadata": {},
47 "metadata": {},
48 "source": [
48 "source": [
49 "As mentioned in Part 1, 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."
49 "As mentioned in Part 1, the widget attributes are IPython traitlets. Traitlets are eventful. To handle changes, the `on_trait_change` method of the widget can be used to register a callback. The docstring for `on_trait_change` can be seen below. Both the `name` and `remove` properties are optional."
50 ]
50 ]
51 },
51 },
52 {
52 {
53 "cell_type": "code",
53 "cell_type": "code",
54 "collapsed": false,
54 "collapsed": false,
55 "input": [
55 "input": [
56 "print(widgets.Widget.on_trait_change.__doc__)"
56 "print(widgets.Widget.on_trait_change.__doc__)"
57 ],
57 ],
58 "language": "python",
58 "language": "python",
59 "metadata": {},
59 "metadata": {},
60 "outputs": [
60 "outputs": [
61 {
61 {
62 "output_type": "stream",
62 "output_type": "stream",
63 "stream": "stdout",
63 "stream": "stdout",
64 "text": [
64 "text": [
65 "Setup a handler to be called when a trait changes.\n",
65 "Setup a handler to be called when a trait changes.\n",
66 "\n",
66 "\n",
67 " This is used to setup dynamic notifications of trait changes.\n",
67 " This is used to setup dynamic notifications of trait changes.\n",
68 "\n",
68 "\n",
69 " Static handlers can be created by creating methods on a HasTraits\n",
69 " Static handlers can be created by creating methods on a HasTraits\n",
70 " subclass with the naming convention '_[traitname]_changed'. Thus,\n",
70 " subclass with the naming convention '_[traitname]_changed'. Thus,\n",
71 " to create static handler for the trait 'a', create the method\n",
71 " to create static handler for the trait 'a', create the method\n",
72 " _a_changed(self, name, old, new) (fewer arguments can be used, see\n",
72 " _a_changed(self, name, old, new) (fewer arguments can be used, see\n",
73 " below).\n",
73 " below).\n",
74 "\n",
74 "\n",
75 " Parameters\n",
75 " Parameters\n",
76 " ----------\n",
76 " ----------\n",
77 " handler : callable\n",
77 " handler : callable\n",
78 " A callable that is called when a trait changes. Its\n",
78 " A callable that is called when a trait changes. Its\n",
79 " signature can be handler(), handler(name), handler(name, new)\n",
79 " signature can be handler(), handler(name), handler(name, new)\n",
80 " or handler(name, old, new).\n",
80 " or handler(name, old, new).\n",
81 " name : list, str, None\n",
81 " name : list, str, None\n",
82 " If None, the handler will apply to all traits. If a list\n",
82 " If None, the handler will apply to all traits. If a list\n",
83 " of str, handler will apply to all names in the list. If a\n",
83 " of str, handler will apply to all names in the list. If a\n",
84 " str, the handler will apply just to that name.\n",
84 " str, the handler will apply just to that name.\n",
85 " remove : bool\n",
85 " remove : bool\n",
86 " If False (the default), then install the handler. If True\n",
86 " If False (the default), then install the handler. If True\n",
87 " then unintall it.\n",
87 " then unintall it.\n",
88 " \n"
88 " \n"
89 ]
89 ]
90 }
90 }
91 ],
91 ],
92 "prompt_number": 2
92 "prompt_number": 2
93 },
93 },
94 {
94 {
95 "cell_type": "markdown",
95 "cell_type": "markdown",
96 "metadata": {},
96 "metadata": {},
97 "source": [
97 "source": [
98 "Mentioned in the doc string, the callback registered can have 4 possible signatures:\n",
98 "Mentioned in the doc string, the callback registered can have 4 possible signatures:\n",
99 "\n",
99 "\n",
100 "- callback()\n",
100 "- callback()\n",
101 "- callback(trait_name)\n",
101 "- callback(trait_name)\n",
102 "- callback(trait_name, new_value)\n",
102 "- callback(trait_name, new_value)\n",
103 "- callback(trait_name, old_value, new_value)\n",
103 "- callback(trait_name, old_value, new_value)\n",
104 "\n",
104 "\n",
105 "Using this method, an example of how to output an IntSliderWiget's value as it is changed can be seen below."
105 "Using this method, an example of how to output an IntSliderWiget's value as it is changed can be seen below."
106 ]
106 ]
107 },
107 },
108 {
108 {
109 "cell_type": "code",
109 "cell_type": "code",
110 "collapsed": false,
110 "collapsed": false,
111 "input": [
111 "input": [
112 "intrange = widgets.IntSliderWidget()\n",
112 "int_range = widgets.IntSliderWidget()\n",
113 "display(intrange)\n",
113 "display(int_range)\n",
114 "\n",
114 "\n",
115 "def on_value_change(name, value):\n",
115 "def on_value_change(name, value):\n",
116 " print(value)\n",
116 " print(value)\n",
117 "\n",
117 "\n",
118 "intrange.on_trait_change(on_value_change, 'value')"
118 "int_range.on_trait_change(on_value_change, 'value')"
119 ],
119 ],
120 "language": "python",
120 "language": "python",
121 "metadata": {},
121 "metadata": {},
122 "outputs": [
122 "outputs": [
123 {
123 {
124 "output_type": "stream",
124 "output_type": "stream",
125 "stream": "stdout",
125 "stream": "stdout",
126 "text": [
126 "text": [
127 "34\n"
127 "1\n"
128 ]
128 ]
129 },
129 },
130 {
130 {
131 "output_type": "stream",
131 "output_type": "stream",
132 "stream": "stdout",
132 "stream": "stdout",
133 "text": [
133 "text": [
134 "74\n"
134 "2\n"
135 ]
135 ]
136 },
136 },
137 {
137 {
138 "output_type": "stream",
138 "output_type": "stream",
139 "stream": "stdout",
139 "stream": "stdout",
140 "text": [
140 "text": [
141 "98\n"
141 "3\n"
142 ]
142 ]
143 }
143 }
144 ],
144 ],
145 "prompt_number": 3
145 "prompt_number": 3
146 },
146 },
147 {
147 {
148 "cell_type": "heading",
148 "cell_type": "heading",
149 "level": 1,
149 "level": 1,
150 "metadata": {},
150 "metadata": {},
151 "source": [
151 "source": [
152 "Specialized Events"
152 "Specialized Events"
153 ]
153 ]
154 },
154 },
155 {
155 {
156 "cell_type": "heading",
156 "cell_type": "heading",
157 "level": 2,
157 "level": 2,
158 "metadata": {},
158 "metadata": {},
159 "source": [
159 "source": [
160 "Button On Click Event"
160 "Button Click Event"
161 ]
161 ]
162 },
162 },
163 {
163 {
164 "cell_type": "markdown",
164 "cell_type": "markdown",
165 "metadata": {},
165 "metadata": {},
166 "source": [
166 "source": [
167 "The `ButtonWidget` is a special widget, like the `ContainerWidget` and `TabWidget`, 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."
167 "The `ButtonWidget` is a special widget, like the `ContainerWidget` and `TabWidget`, 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 function to be called when the button is clicked. The docstring of the `on_click` can be seen below."
168 ]
168 ]
169 },
169 },
170 {
170 {
171 "cell_type": "code",
171 "cell_type": "code",
172 "collapsed": false,
172 "collapsed": false,
173 "input": [
173 "input": [
174 "print(widgets.ButtonWidget.on_click.__doc__)"
174 "print(widgets.ButtonWidget.on_click.__doc__)"
175 ],
175 ],
176 "language": "python",
176 "language": "python",
177 "metadata": {},
177 "metadata": {},
178 "outputs": [
178 "outputs": [
179 {
179 {
180 "output_type": "stream",
180 "output_type": "stream",
181 "stream": "stdout",
181 "stream": "stdout",
182 "text": [
182 "text": [
183 "Register a callback to execute when the button is clicked. \n",
183 "Register a callback to execute when the button is clicked.\n",
184 "\n",
184 "\n",
185 " The callback can either accept no parameters or one sender parameter:\n",
185 " The callback will be called with one argument,\n",
186 " - callback()\n",
186 " the clicked button widget instance.\n",
187 " - callback(sender)\n",
188 " If the callback has a sender parameter, the ButtonWidget instance that\n",
189 " called the callback will be passed into the method as the sender.\n",
190 "\n",
187 "\n",
191 " Parameters\n",
188 " Parameters\n",
192 " ----------\n",
189 " ----------\n",
193 " remove : bool (optional)\n",
190 " remove : bool (optional)\n",
194 " Set to true to remove the callback from the list of callbacks.\n"
191 " Set to true to remove the callback from the list of callbacks.\n"
195 ]
192 ]
196 }
193 }
197 ],
194 ],
198 "prompt_number": 4
195 "prompt_number": 4
199 },
196 },
200 {
197 {
201 "cell_type": "markdown",
198 "cell_type": "markdown",
202 "metadata": {},
199 "metadata": {},
203 "source": [
200 "source": [
204 "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."
201 "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."
205 ]
202 ]
206 },
203 },
207 {
204 {
208 "cell_type": "code",
205 "cell_type": "code",
209 "collapsed": false,
206 "collapsed": false,
210 "input": [
207 "input": [
211 "button = widgets.ButtonWidget(description=\"Click Me!\")\n",
208 "button = widgets.ButtonWidget(description=\"Click Me!\")\n",
212 "display(button)\n",
209 "display(button)\n",
213 "\n",
210 "\n",
214 "def on_button_clicked(sender):\n",
211 "def on_button_clicked(b):\n",
215 " print(\"Button clicked.\")\n",
212 " print(\"Button clicked.\")\n",
216 "\n",
213 "\n",
217 "button.on_click(on_button_clicked)"
214 "button.on_click(on_button_clicked)"
218 ],
215 ],
219 "language": "python",
216 "language": "python",
220 "metadata": {},
217 "metadata": {},
221 "outputs": [
218 "outputs": [
222 {
219 {
223 "output_type": "stream",
220 "output_type": "stream",
224 "stream": "stdout",
221 "stream": "stdout",
225 "text": [
222 "text": [
226 "Button clicked.\n"
223 "Button clicked.\n"
227 ]
224 ]
228 },
225 },
229 {
226 {
230 "output_type": "stream",
227 "output_type": "stream",
231 "stream": "stdout",
228 "stream": "stdout",
232 "text": [
229 "text": [
233 "Button clicked.\n"
230 "Button clicked.\n"
234 ]
231 ]
235 },
236 {
237 "output_type": "stream",
238 "stream": "stdout",
239 "text": [
240 "Button clicked.\n"
241 ]
242 }
232 }
243 ],
233 ],
244 "prompt_number": 5
234 "prompt_number": 5
245 },
235 },
246 {
236 {
247 "cell_type": "markdown",
237 "cell_type": "markdown",
248 "metadata": {},
238 "metadata": {},
249 "source": [
239 "source": [
250 "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."
240 "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."
251 ]
241 ]
252 },
242 },
253 {
243 {
254 "cell_type": "code",
244 "cell_type": "code",
255 "collapsed": false,
245 "collapsed": false,
256 "input": [
246 "input": [
257 "def show_button(sender):\n",
247 "def new_button(clicked):\n",
258 " button = widgets.ButtonWidget()\n",
248 " button = widgets.ButtonWidget()\n",
259 " button.clicks = 0\n",
249 " button.clicks = 0\n",
260 " sender.clicks += 1\n",
250 " clicked.clicks += 1\n",
261 " button.description = \"%d\" % sender.clicks\n",
251 " button.description = \"%d\" % clicked.clicks\n",
262 " display(button)\n",
252 " display(button)\n",
263 " button.on_click(show_button)\n",
253 " button.on_click(new_button)\n",
264 "button = widgets.ButtonWidget(description = \"Start\")\n",
254 "button = widgets.ButtonWidget(description = \"Start\")\n",
265 "button.clicks = 0\n",
255 "button.clicks = 0\n",
266 "display(button)\n",
256 "display(button)\n",
267 "button.on_click(show_button)\n",
257 "button.on_click(new_button)\n",
268 " "
258 " "
269 ],
259 ],
270 "language": "python",
260 "language": "python",
271 "metadata": {},
261 "metadata": {},
272 "outputs": [],
262 "outputs": [],
273 "prompt_number": 6
263 "prompt_number": 6
274 },
264 },
275 {
265 {
276 "cell_type": "markdown",
266 "cell_type": "markdown",
277 "metadata": {},
267 "metadata": {},
278 "source": [
268 "source": [
279 "In [Part 3](Part 3 - Placement.ipynb) of this [series](index.ipynb), you will learn about widget placement."
269 "In [Part 3](Part 3 - Placement.ipynb) of this [series](index.ipynb), you will learn about widget placement."
280 ]
270 ]
281 }
271 }
282 ],
272 ],
283 "metadata": {}
273 "metadata": {}
284 }
274 }
285 ]
275 ]
286 } No newline at end of file
276 }
@@ -1,186 +1,187 b''
1 {
1 {
2 "metadata": {
2 "metadata": {
3 "cell_tags": [
3 "cell_tags": [
4 [
4 [
5 "<None>",
5 "<None>",
6 null
6 null
7 ]
7 ]
8 ],
8 ],
9 "name": ""
9 "name": ""
10 },
10 },
11 "nbformat": 3,
11 "nbformat": 3,
12 "nbformat_minor": 0,
12 "nbformat_minor": 0,
13 "worksheets": [
13 "worksheets": [
14 {
14 {
15 "cells": [
15 "cells": [
16 {
16 {
17 "cell_type": "markdown",
17 "cell_type": "markdown",
18 "metadata": {},
18 "metadata": {},
19 "source": [
19 "source": [
20 "[< Back to Part 2](Part 2 - Events.ipynb) or [Index](index.ipynb)"
20 "[< Back to Part 2](Part 2 - Events.ipynb) or [Index](index.ipynb)"
21 ]
21 ]
22 },
22 },
23 {
23 {
24 "cell_type": "code",
24 "cell_type": "code",
25 "collapsed": false,
25 "collapsed": false,
26 "input": [
26 "input": [
27 "from IPython.html import widgets # Widget definitions\n",
27 "from IPython.html import widgets # Widget definitions\n",
28 "from IPython.display import display # Used to display widgets in the notebook"
28 "from IPython.display import display # Used to display widgets in the notebook"
29 ],
29 ],
30 "language": "python",
30 "language": "python",
31 "metadata": {},
31 "metadata": {},
32 "outputs": [],
32 "outputs": [],
33 "prompt_number": 1
33 "prompt_number": 1
34 },
34 },
35 {
35 {
36 "cell_type": "heading",
36 "cell_type": "heading",
37 "level": 1,
37 "level": 1,
38 "metadata": {},
38 "metadata": {},
39 "source": [
39 "source": [
40 "Parent/Child Relationships"
40 "Parent/Child Relationships"
41 ]
41 ]
42 },
42 },
43 {
43 {
44 "cell_type": "markdown",
44 "cell_type": "markdown",
45 "metadata": {},
45 "metadata": {},
46 "source": [
46 "source": [
47 "To display widget A inside widget B, widget A must be a child of widget B. 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",
47 "To display widget A inside widget B, widget A must be a child of widget B. Only one instance of any particular widget can be child of another. In other words, *widget A* cannot have *widget B* listed twice in it's list of children.\n",
48 "\n",
48 "\n",
49 "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)."
49 "Widgets that can contain other widgets have a `children` attribute. This attribute 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."
50 ]
50 ]
51 },
51 },
52 {
52 {
53 "cell_type": "code",
53 "cell_type": "code",
54 "collapsed": false,
54 "collapsed": false,
55 "input": [
55 "input": [
56 "floatrange = widgets.FloatSliderWidget()\n",
56 "float_range = widgets.FloatSliderWidget()\n",
57 "string = widgets.TextBoxWidget(value='hi')\n",
57 "string = widgets.TextBoxWidget(value='hi')\n",
58 "container = widgets.ContainerWidget(children=[floatrange, string])\n",
58 "container = widgets.ContainerWidget(children=[float_range, string])\n",
59 "\n",
59 "\n",
60 "display(container) # Displays the `container` and all of it's children."
60 "display(container) # Displays the `container` and all of it's children."
61 ],
61 ],
62 "language": "python",
62 "language": "python",
63 "metadata": {},
63 "metadata": {},
64 "outputs": [],
64 "outputs": [],
65 "prompt_number": 2
65 "prompt_number": 2
66 },
66 },
67 {
67 {
68 "cell_type": "markdown",
68 "cell_type": "markdown",
69 "metadata": {},
69 "metadata": {},
70 "source": [
70 "source": [
71 "Children can also be added to parents after the parent has been displayed. The parent is responsible for rendering its children."
71 "Children can also be added to parents after the parent has been displayed. The parent is responsible for rendering its children."
72 ]
72 ]
73 },
73 },
74 {
74 {
75 "cell_type": "code",
75 "cell_type": "code",
76 "collapsed": false,
76 "collapsed": false,
77 "input": [
77 "input": [
78 "container = widgets.ContainerWidget()\n",
78 "container = widgets.ContainerWidget()\n",
79 "display(container)\n",
79 "display(container)\n",
80 "\n",
80 "\n",
81 "intrange = widgets.IntSliderWidget()\n",
81 "int_range = widgets.IntSliderWidget()\n",
82 "container.children=[intrange]\n"
82 "container.children=[int_range]\n"
83 ],
83 ],
84 "language": "python",
84 "language": "python",
85 "metadata": {},
85 "metadata": {},
86 "outputs": [],
86 "outputs": [],
87 "prompt_number": 3
87 "prompt_number": 3
88 },
88 },
89 {
89 {
90 "cell_type": "heading",
90 "cell_type": "heading",
91 "level": 1,
91 "level": 1,
92 "metadata": {},
92 "metadata": {},
93 "source": [
93 "source": [
94 "Visibility"
94 "Visibility"
95 ]
95 ]
96 },
96 },
97 {
97 {
98 "cell_type": "markdown",
98 "cell_type": "markdown",
99 "metadata": {},
99 "metadata": {},
100 "source": [
100 "source": [
101 "Sometimes it's necessary to hide/show widget views in place, without having to redisplay the widget views. The `visibility` property of widgets can be used to hide/show widgets that have already been displayed (as seen below)."
101 "Sometimes it is necessary to hide or show widgets in place, without having to redisplay the widget.\n",
102 "The `visibility` property of widgets can be used to hide or show widgets that have already been displayed (as seen below)."
102 ]
103 ]
103 },
104 },
104 {
105 {
105 "cell_type": "code",
106 "cell_type": "code",
106 "collapsed": false,
107 "collapsed": false,
107 "input": [
108 "input": [
108 "string = widgets.LatexWidget(value=\"Hello World!\")\n",
109 "string = widgets.LatexWidget(value=\"Hello World!\")\n",
109 "display(string) "
110 "display(string) "
110 ],
111 ],
111 "language": "python",
112 "language": "python",
112 "metadata": {},
113 "metadata": {},
113 "outputs": [],
114 "outputs": [],
114 "prompt_number": 4
115 "prompt_number": 4
115 },
116 },
116 {
117 {
117 "cell_type": "code",
118 "cell_type": "code",
118 "collapsed": false,
119 "collapsed": false,
119 "input": [
120 "input": [
120 "string.visible=False"
121 "string.visible=False"
121 ],
122 ],
122 "language": "python",
123 "language": "python",
123 "metadata": {},
124 "metadata": {},
124 "outputs": [],
125 "outputs": [],
125 "prompt_number": 5
126 "prompt_number": 5
126 },
127 },
127 {
128 {
128 "cell_type": "code",
129 "cell_type": "code",
129 "collapsed": false,
130 "collapsed": false,
130 "input": [
131 "input": [
131 "string.visible=True"
132 "string.visible=True"
132 ],
133 ],
133 "language": "python",
134 "language": "python",
134 "metadata": {},
135 "metadata": {},
135 "outputs": [],
136 "outputs": [],
136 "prompt_number": 6
137 "prompt_number": 6
137 },
138 },
138 {
139 {
139 "cell_type": "markdown",
140 "cell_type": "markdown",
140 "metadata": {},
141 "metadata": {},
141 "source": [
142 "source": [
142 "In the example below, a form is rendered which conditionally displays widgets depending on the state of other widgets. Try toggling the student checkbox."
143 "In the example below, a form is rendered, which conditionally displays widgets depending on the state of other widgets. Try toggling the student checkbox."
143 ]
144 ]
144 },
145 },
145 {
146 {
146 "cell_type": "code",
147 "cell_type": "code",
147 "collapsed": false,
148 "collapsed": false,
148 "input": [
149 "input": [
149 "form = widgets.ContainerWidget()\n",
150 "form = widgets.ContainerWidget()\n",
150 "first = widgets.TextBoxWidget(description=\"First Name:\")\n",
151 "first = widgets.TextBoxWidget(description=\"First Name:\")\n",
151 "last = widgets.TextBoxWidget(description=\"Last Name:\")\n",
152 "last = widgets.TextBoxWidget(description=\"Last Name:\")\n",
152 "\n",
153 "\n",
153 "student = widgets.CheckBoxWidget(description=\"Student:\", value=False)\n",
154 "student = widgets.CheckBoxWidget(description=\"Student:\", value=False)\n",
154 "school_info = widgets.ContainerWidget(visible=False, children=[\n",
155 "school_info = widgets.ContainerWidget(visible=False, children=[\n",
155 " widgets.TextBoxWidget(description=\"School:\"),\n",
156 " widgets.TextBoxWidget(description=\"School:\"),\n",
156 " widgets.IntTextWidget(description=\"Grade:\", min=0, max=12)\n",
157 " widgets.IntTextWidget(description=\"Grade:\", min=0, max=12)\n",
157 " ])\n",
158 " ])\n",
158 "\n",
159 "\n",
159 "pet = widgets.TextBoxWidget(description=\"Pet's Name:\")\n",
160 "pet = widgets.TextBoxWidget(description=\"Pet's Name:\")\n",
160 "form.children = [first, last, student, school_info, pet]\n",
161 "form.children = [first, last, student, school_info, pet]\n",
161 "display(form)\n",
162 "display(form)\n",
162 "\n",
163 "\n",
163 "def on_student_toggle(name, value):\n",
164 "def on_student_toggle(name, value):\n",
164 " if value:\n",
165 " if value:\n",
165 " school_info.visible = True\n",
166 " school_info.visible = True\n",
166 " else:\n",
167 " else:\n",
167 " school_info.visible = False\n",
168 " school_info.visible = False\n",
168 "student.on_trait_change(on_student_toggle, 'value')\n"
169 "student.on_trait_change(on_student_toggle, 'value')\n"
169 ],
170 ],
170 "language": "python",
171 "language": "python",
171 "metadata": {},
172 "metadata": {},
172 "outputs": [],
173 "outputs": [],
173 "prompt_number": 7
174 "prompt_number": 7
174 },
175 },
175 {
176 {
176 "cell_type": "markdown",
177 "cell_type": "markdown",
177 "metadata": {},
178 "metadata": {},
178 "source": [
179 "source": [
179 "In [Part 4](Part 4 - Styles.ipynb) of this [series](index.ipynb), you will learn about widget styling."
180 "In [Part 4](Part 4 - Styles.ipynb) of this [series](index.ipynb), you will learn about widget styling."
180 ]
181 ]
181 }
182 }
182 ],
183 ],
183 "metadata": {}
184 "metadata": {}
184 }
185 }
185 ]
186 ]
186 } No newline at end of file
187 }
@@ -1,355 +1,368 b''
1 {
1 {
2 "metadata": {
2 "metadata": {
3 "cell_tags": [
3 "cell_tags": [
4 [
4 [
5 "<None>",
5 "<None>",
6 null
6 null
7 ]
7 ]
8 ],
8 ],
9 "name": ""
9 "name": ""
10 },
10 },
11 "nbformat": 3,
11 "nbformat": 3,
12 "nbformat_minor": 0,
12 "nbformat_minor": 0,
13 "worksheets": [
13 "worksheets": [
14 {
14 {
15 "cells": [
15 "cells": [
16 {
16 {
17 "cell_type": "markdown",
17 "cell_type": "markdown",
18 "metadata": {},
18 "metadata": {},
19 "source": [
19 "source": [
20 "[< Back to Part 3](Part 3 - Placement.ipynb) or [Index](index.ipynb)"
20 "[< Back to Part 3](Part 3 - Placement.ipynb) or [Index](index.ipynb)"
21 ]
21 ]
22 },
22 },
23 {
23 {
24 "cell_type": "code",
24 "cell_type": "code",
25 "collapsed": false,
25 "collapsed": false,
26 "input": [
26 "input": [
27 "from IPython.html import widgets # Widget definitions\n",
27 "from IPython.html import widgets # Widget definitions\n",
28 "from IPython.display import display # Used to display widgets in the notebook"
28 "from IPython.display import display # Used to display widgets in the notebook"
29 ],
29 ],
30 "language": "python",
30 "language": "python",
31 "metadata": {},
31 "metadata": {},
32 "outputs": [],
32 "outputs": [],
33 "prompt_number": 1
33 "prompt_number": 1
34 },
34 },
35 {
35 {
36 "cell_type": "heading",
36 "cell_type": "heading",
37 "level": 1,
37 "level": 1,
38 "metadata": {},
38 "metadata": {},
39 "source": [
39 "source": [
40 "CSS"
40 "CSS"
41 ]
41 ]
42 },
42 },
43 {
43 {
44 "cell_type": "markdown",
44 "cell_type": "markdown",
45 "metadata": {},
45 "metadata": {},
46 "source": [
46 "source": [
47 "When trying to design an attractive widget GUI, styling becomes important. Most Widgets 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. "
47 "When trying to design an attractive widget GUI, styling becomes important.\n",
48 "Most widget views are DOM (document object model) elements that can be controlled with CSS.\n",
49 "There are two helper methods that allow the manipulation of the widget's CSS.\n",
50 "The first is the `Widget.set_css` method.\n",
51 "This method allows one or more CSS attributes to be set at once. "
48 ]
52 ]
49 },
53 },
50 {
54 {
51 "cell_type": "code",
55 "cell_type": "code",
52 "collapsed": false,
56 "collapsed": false,
53 "input": [
57 "input": [
54 "print(widgets.DOMWidget.set_css.__doc__)"
58 "print(widgets.DOMWidget.set_css.__doc__)"
55 ],
59 ],
56 "language": "python",
60 "language": "python",
57 "metadata": {},
61 "metadata": {},
58 "outputs": [
62 "outputs": [
59 {
63 {
60 "output_type": "stream",
64 "output_type": "stream",
61 "stream": "stdout",
65 "stream": "stdout",
62 "text": [
66 "text": [
63 "Set one or more CSS properties of the widget.\n",
67 "Set one or more CSS properties of the widget.\n",
64 "\n",
68 "\n",
65 " This function has two signatures:\n",
69 " This function has two signatures:\n",
66 " - set_css(css_dict, selector='')\n",
70 " - set_css(css_dict, selector='')\n",
67 " - set_css(key, value, selector='')\n",
71 " - set_css(key, value, selector='')\n",
68 "\n",
72 "\n",
69 " Parameters\n",
73 " Parameters\n",
70 " ----------\n",
74 " ----------\n",
71 " css_dict : dict\n",
75 " css_dict : dict\n",
72 " CSS key/value pairs to apply\n",
76 " CSS key/value pairs to apply\n",
73 " key: unicode\n",
77 " key: unicode\n",
74 " CSS key\n",
78 " CSS key\n",
75 " value\n",
79 " value:\n",
76 " CSS value\n",
80 " CSS value\n",
77 " selector: unicode (optional)\n",
81 " selector: unicode (optional, kwarg only)\n",
78 " JQuery selector to use to apply the CSS key/value. If no selector \n",
82 " JQuery selector to use to apply the CSS key/value. If no selector \n",
79 " is provided, an empty selector is used. An empty selector makes the \n",
83 " is provided, an empty selector is used. An empty selector makes the \n",
80 " front-end try to apply the css to a default element. The default\n",
84 " front-end try to apply the css to a default element. The default\n",
81 " element is an attribute unique to each view, which is a DOM element\n",
85 " element is an attribute unique to each view, which is a DOM element\n",
82 " of the view that should be styled with common CSS (see \n",
86 " of the view that should be styled with common CSS (see \n",
83 " `$el_to_style` in the Javascript code).\n",
87 " `$el_to_style` in the Javascript code).\n",
84 " \n"
88 " \n"
85 ]
89 ]
86 }
90 }
87 ],
91 ],
88 "prompt_number": 2
92 "prompt_number": 2
89 },
93 },
90 {
94 {
91 "cell_type": "markdown",
95 "cell_type": "markdown",
92 "metadata": {},
96 "metadata": {},
93 "source": [
97 "source": [
94 "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."
98 "The second is `get_css` which allows CSS attributesto be read.\n",
99 "Note that this method will only read CSS attributes that have been set using the `set_css` method."
95 ]
100 ]
96 },
101 },
97 {
102 {
98 "cell_type": "code",
103 "cell_type": "code",
99 "collapsed": false,
104 "collapsed": false,
100 "input": [
105 "input": [
101 "print(widgets.DOMWidget.get_css.__doc__)"
106 "print(widgets.DOMWidget.get_css.__doc__)"
102 ],
107 ],
103 "language": "python",
108 "language": "python",
104 "metadata": {},
109 "metadata": {},
105 "outputs": [
110 "outputs": [
106 {
111 {
107 "output_type": "stream",
112 "output_type": "stream",
108 "stream": "stdout",
113 "stream": "stdout",
109 "text": [
114 "text": [
110 "Get a CSS property of the widget.\n",
115 "Get a CSS property of the widget.\n",
111 "\n",
116 "\n",
112 " Note: This function does not actually request the CSS from the \n",
117 " Note: This function does not actually request the CSS from the \n",
113 " front-end; Only properties that have been set with set_css can be read.\n",
118 " front-end; Only properties that have been set with set_css can be read.\n",
114 "\n",
119 "\n",
115 " Parameters\n",
120 " Parameters\n",
116 " ----------\n",
121 " ----------\n",
117 " key: unicode\n",
122 " key: unicode\n",
118 " CSS key\n",
123 " CSS key\n",
119 " selector: unicode (optional)\n",
124 " selector: unicode (optional)\n",
120 " JQuery selector used when the CSS key/value was set.\n",
125 " JQuery selector used when the CSS key/value was set.\n",
121 " \n"
126 " \n"
122 ]
127 ]
123 }
128 }
124 ],
129 ],
125 "prompt_number": 3
130 "prompt_number": 3
126 },
131 },
127 {
132 {
128 "cell_type": "markdown",
133 "cell_type": "markdown",
129 "metadata": {},
134 "metadata": {},
130 "source": [
135 "source": [
131 "Below is an example that applies CSS attributes to a container to emphasize text."
136 "Below is an example that applies CSS attributes to a container to emphasize text."
132 ]
137 ]
133 },
138 },
134 {
139 {
135 "cell_type": "code",
140 "cell_type": "code",
136 "collapsed": false,
141 "collapsed": false,
137 "input": [
142 "input": [
138 "label = widgets.LatexWidget()\n",
143 "label = widgets.LatexWidget()\n",
139 "label.value = \"$\\\\textbf{ALERT:} Hello World!$\"\n",
144 "label.value = \"$\\\\textbf{ALERT:} Hello World!$\"\n",
140 "container = widgets.ContainerWidget(children=[label])\n",
145 "container = widgets.ContainerWidget(children=[label])\n",
141 "\n",
146 "\n",
142 "# set_css used to set a single CSS attribute.\n",
147 "# set_css used to set a single CSS attribute.\n",
143 "container.set_css('border', '3px solid black') # Border the container\n",
148 "container.set_css('border', '3px solid black') # Border the container\n",
144 "\n",
149 "\n",
145 "# set_css used to set multiple CSS attributes.\n",
150 "# set_css used to set multiple CSS attributes.\n",
146 "container.set_css({'padding': '6px', # Add padding to the container\n",
151 "container.set_css({'padding': '6px', # Add padding to the container\n",
147 " 'background': 'yellow'}) # Fill the container yellow\n",
152 " 'background': 'yellow'}) # Fill the container yellow\n",
148 "\n",
153 "\n",
149 "display(container)"
154 "display(container)"
150 ],
155 ],
151 "language": "python",
156 "language": "python",
152 "metadata": {},
157 "metadata": {},
153 "outputs": [],
158 "outputs": [],
154 "prompt_number": 4
159 "prompt_number": 4
155 },
160 },
156 {
161 {
157 "cell_type": "heading",
162 "cell_type": "heading",
158 "level": 1,
163 "level": 1,
159 "metadata": {},
164 "metadata": {},
160 "source": [
165 "source": [
161 "DOM Classes"
166 "CSS Classes"
162 ]
167 ]
163 },
168 },
164 {
169 {
165 "cell_type": "markdown",
170 "cell_type": "markdown",
166 "metadata": {},
171 "metadata": {},
167 "source": [
172 "source": [
168 "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."
173 "In some cases, it is necessary to apply CSS classes to your widgets.\n",
174 "CSS classes allow DOM elements to be indentified in Javascript and CSS.\n",
175 "The notebook defines its own set of classes to stylize its elements.\n",
176 "The `add_class` widget method allows you to add CSS classes to your widget."
169 ]
177 ]
170 },
178 },
171 {
179 {
172 "cell_type": "code",
180 "cell_type": "code",
173 "collapsed": false,
181 "collapsed": false,
174 "input": [
182 "input": [
175 "print(widgets.DOMWidget.add_class.__doc__)"
183 "print(widgets.DOMWidget.add_class.__doc__)"
176 ],
184 ],
177 "language": "python",
185 "language": "python",
178 "metadata": {},
186 "metadata": {},
179 "outputs": [
187 "outputs": [
180 {
188 {
181 "output_type": "stream",
189 "output_type": "stream",
182 "stream": "stdout",
190 "stream": "stdout",
183 "text": [
191 "text": [
184 "Add class[es] to a DOM element.\n",
192 "Add class[es] to a DOM element.\n",
185 "\n",
193 "\n",
186 " Parameters\n",
194 " Parameters\n",
187 " ----------\n",
195 " ----------\n",
188 " class_names: unicode or list\n",
196 " class_names: unicode or list\n",
189 " Class name(s) to add to the DOM element(s).\n",
197 " Class name(s) to add to the DOM element(s).\n",
190 " selector: unicode (optional)\n",
198 " selector: unicode (optional)\n",
191 " JQuery selector to select the DOM element(s) that the class(es) will\n",
199 " JQuery selector to select the DOM element(s) that the class(es) will\n",
192 " be added to.\n",
200 " be added to.\n",
193 " \n"
201 " \n"
194 ]
202 ]
195 }
203 }
196 ],
204 ],
197 "prompt_number": 5
205 "prompt_number": 5
198 },
206 },
199 {
207 {
200 "cell_type": "markdown",
208 "cell_type": "markdown",
201 "metadata": {},
209 "metadata": {},
202 "source": [
210 "source": [
203 "Since `add_class` if a DOM operation, **it will only affect widgets that have already 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). "
211 "Since `add_class` is a DOM operation, **it will only affect widgets that have already been displayed**.\n",
212 "`add_class` must be called after the widget has been displayed.\n",
213 "Extending the example above, the corners of the container can be rounded by adding the `corner-all` CSS class to the container."
204 ]
214 ]
205 },
215 },
206 {
216 {
207 "cell_type": "code",
217 "cell_type": "code",
208 "collapsed": false,
218 "collapsed": false,
209 "input": [
219 "input": [
210 "container = widgets.ContainerWidget()\n",
220 "container = widgets.ContainerWidget()\n",
211 "container.set_css({'border': '3px solid black',\n",
221 "container.set_css({'border': '3px solid black',\n",
212 " 'padding': '6px', \n",
222 " 'padding': '6px', \n",
213 " 'background': 'yellow'}) \n",
223 " 'background': 'yellow'}) \n",
214 "\n",
224 "\n",
215 "label = widgets.LatexWidget()\n",
225 "label = widgets.LatexWidget()\n",
216 "label.value = \"$\\\\textbf{ALERT:} Hello World!$\"\n",
226 "label.value = \"$\\\\textbf{ALERT:} Hello World!$\"\n",
217 "container.children = [label]\n",
227 "container.children = [label]\n",
218 "display(container)\n",
228 "display(container)\n",
219 "container.add_class('corner-all') # Must be called AFTER display"
229 "container.add_class('corner-all') # Must be called AFTER display"
220 ],
230 ],
221 "language": "python",
231 "language": "python",
222 "metadata": {},
232 "metadata": {},
223 "outputs": [],
233 "outputs": [],
224 "prompt_number": 6
234 "prompt_number": 6
225 },
235 },
226 {
236 {
227 "cell_type": "markdown",
237 "cell_type": "markdown",
228 "metadata": {},
238 "metadata": {},
229 "source": [
239 "source": [
230 "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 ."
240 "The IPython notebook uses [bootstrap](http://getbootstrap.com/\u200e) for styling.\n",
241 "The example above can be simplified by using a bootstrap class:"
231 ]
242 ]
232 },
243 },
233 {
244 {
234 "cell_type": "code",
245 "cell_type": "code",
235 "collapsed": false,
246 "collapsed": false,
236 "input": [
247 "input": [
237 "label = widgets.LatexWidget(value = \"$\\\\textbf{ALERT:} Hello World!$\")\n",
248 "label = widgets.LatexWidget(value = \"$\\\\textbf{ALERT:} Hello World!$\")\n",
238 "display(label)\n",
249 "display(label)\n",
239 "\n",
250 "\n",
240 "# Apply twitter bootstrap alert class to the label.\n",
251 "# Apply twitter bootstrap alert class to the label.\n",
241 "label.add_class(\"alert\")"
252 "label.add_class(\"alert\")"
242 ],
253 ],
243 "language": "python",
254 "language": "python",
244 "metadata": {},
255 "metadata": {},
245 "outputs": [],
256 "outputs": [],
246 "prompt_number": 7
257 "prompt_number": 7
247 },
258 },
248 {
259 {
249 "cell_type": "markdown",
260 "cell_type": "markdown",
250 "metadata": {},
261 "metadata": {},
251 "source": [
262 "source": [
252 "The example below shows how bootstrap classes can be used to change button apearance."
263 "The example below shows how bootstrap classes can be used to change button apearance."
253 ]
264 ]
254 },
265 },
255 {
266 {
256 "cell_type": "code",
267 "cell_type": "code",
257 "collapsed": false,
268 "collapsed": false,
258 "input": [
269 "input": [
259 "# List of the bootstrap button styles\n",
270 "# List of the bootstrap button styles\n",
260 "button_classes = ['Default', 'btn-primary', 'btn-info', 'btn-success', \n",
271 "button_classes = ['Default', 'btn-primary', 'btn-info', 'btn-success', \n",
261 " 'btn-warning', 'btn-danger', 'btn-inverse', 'btn-link']\n",
272 " 'btn-warning', 'btn-danger', 'btn-inverse', 'btn-link']\n",
262 "\n",
273 "\n",
263 "# Create each button and apply the style. Also add margin to the buttons so they space\n",
274 "# Create each button and apply the style. Also add margin to the buttons so they space\n",
264 "# themselves nicely.\n",
275 "# themselves nicely.\n",
265 "for i in range(8):\n",
276 "for i in range(8):\n",
266 " button = widgets.ButtonWidget(description=button_classes[i])\n",
277 " button = widgets.ButtonWidget(description=button_classes[i])\n",
267 " button.set_css(\"margin\", \"5px\")\n",
278 " button.set_css(\"margin\", \"5px\")\n",
268 " display(button)\n",
279 " display(button)\n",
269 " if i > 0: # Don't add a class the first button.\n",
280 " if i > 0: # Don't add a class the first button.\n",
270 " button.add_class(button_classes[i])\n",
281 " button.add_class(button_classes[i])\n",
271 " "
282 " "
272 ],
283 ],
273 "language": "python",
284 "language": "python",
274 "metadata": {},
285 "metadata": {},
275 "outputs": [],
286 "outputs": [],
276 "prompt_number": 8
287 "prompt_number": 8
277 },
288 },
278 {
289 {
279 "cell_type": "markdown",
290 "cell_type": "markdown",
280 "metadata": {},
291 "metadata": {},
281 "source": [
292 "source": [
282 "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_class`, it must be called after the widget has been displayed. The doc string of `remove_class` can be seen below."
293 "It is also useful to be able to remove CSS classes from widgets.\n",
294 "The `remove_class` method allows you to remove classes from widgets that have been displayed.\n",
295 "Like `add_class`, it must be called after the widget has been displayed."
283 ]
296 ]
284 },
297 },
285 {
298 {
286 "cell_type": "code",
299 "cell_type": "code",
287 "collapsed": false,
300 "collapsed": false,
288 "input": [
301 "input": [
289 "print(widgets.DOMWidget.remove_class.__doc__)"
302 "print(widgets.DOMWidget.remove_class.__doc__)"
290 ],
303 ],
291 "language": "python",
304 "language": "python",
292 "metadata": {},
305 "metadata": {},
293 "outputs": [
306 "outputs": [
294 {
307 {
295 "output_type": "stream",
308 "output_type": "stream",
296 "stream": "stdout",
309 "stream": "stdout",
297 "text": [
310 "text": [
298 "Remove class[es] from a DOM element.\n",
311 "Remove class[es] from a DOM element.\n",
299 "\n",
312 "\n",
300 " Parameters\n",
313 " Parameters\n",
301 " ----------\n",
314 " ----------\n",
302 " class_names: unicode or list\n",
315 " class_names: unicode or list\n",
303 " Class name(s) to remove from the DOM element(s).\n",
316 " Class name(s) to remove from the DOM element(s).\n",
304 " selector: unicode (optional)\n",
317 " selector: unicode (optional)\n",
305 " JQuery selector to select the DOM element(s) that the class(es) will\n",
318 " JQuery selector to select the DOM element(s) that the class(es) will\n",
306 " be removed from.\n",
319 " be removed from.\n",
307 " \n"
320 " \n"
308 ]
321 ]
309 }
322 }
310 ],
323 ],
311 "prompt_number": 9
324 "prompt_number": 9
312 },
325 },
313 {
326 {
314 "cell_type": "markdown",
327 "cell_type": "markdown",
315 "metadata": {},
328 "metadata": {},
316 "source": [
329 "source": [
317 "The example below animates an alert using different bootstrap styles."
330 "The example below animates an alert using different bootstrap styles."
318 ]
331 ]
319 },
332 },
320 {
333 {
321 "cell_type": "code",
334 "cell_type": "code",
322 "collapsed": false,
335 "collapsed": false,
323 "input": [
336 "input": [
324 "import time\n",
337 "import time\n",
325 "label = widgets.LatexWidget(value = \"$\\\\textbf{ALERT:} Hello World!$\")\n",
338 "label = widgets.LatexWidget(value = \"$\\\\textbf{ALERT:} Hello World!$\")\n",
326 "display(label)\n",
339 "display(label)\n",
327 "\n",
340 "\n",
328 "# Apply twitter bootstrap alert class to the label.\n",
341 "# Apply twitter bootstrap alert class to the label.\n",
329 "label.add_class(\"alert\")\n",
342 "label.add_class(\"alert\")\n",
330 "\n",
343 "\n",
331 "# Animate through additional bootstrap label styles 3 times\n",
344 "# Animate through additional bootstrap label styles 3 times\n",
332 "additional_alert_styles = ['alert-error', 'alert-info', 'alert-success']\n",
345 "additional_alert_styles = ['alert-error', 'alert-info', 'alert-success']\n",
333 "for i in range(3 * len(additional_alert_styles)):\n",
346 "for i in range(3 * len(additional_alert_styles)):\n",
334 " label.add_class(additional_alert_styles[i % 3])\n",
347 " label.add_class(additional_alert_styles[i % 3])\n",
335 " label.remove_class(additional_alert_styles[(i-1) % 3])\n",
348 " label.remove_class(additional_alert_styles[(i-1) % 3])\n",
336 " time.sleep(1)\n",
349 " time.sleep(1)\n",
337 " "
350 " "
338 ],
351 ],
339 "language": "python",
352 "language": "python",
340 "metadata": {},
353 "metadata": {},
341 "outputs": [],
354 "outputs": [],
342 "prompt_number": 10
355 "prompt_number": 10
343 },
356 },
344 {
357 {
345 "cell_type": "markdown",
358 "cell_type": "markdown",
346 "metadata": {},
359 "metadata": {},
347 "source": [
360 "source": [
348 "In [Part 5](Part 5 - Alignment.ipynb) of this [series](index.ipynb), you will learn about widget alignment."
361 "In [Part 5](Part 5 - Alignment.ipynb) of this [series](index.ipynb), you will learn about widget alignment."
349 ]
362 ]
350 }
363 }
351 ],
364 ],
352 "metadata": {}
365 "metadata": {}
353 }
366 }
354 ]
367 ]
355 } No newline at end of file
368 }
@@ -1,327 +1,331 b''
1 {
1 {
2 "metadata": {
2 "metadata": {
3 "cell_tags": [
3 "cell_tags": [
4 [
4 [
5 "<None>",
5 "<None>",
6 null
6 null
7 ]
7 ]
8 ],
8 ],
9 "name": ""
9 "name": ""
10 },
10 },
11 "nbformat": 3,
11 "nbformat": 3,
12 "nbformat_minor": 0,
12 "nbformat_minor": 0,
13 "worksheets": [
13 "worksheets": [
14 {
14 {
15 "cells": [
15 "cells": [
16 {
16 {
17 "cell_type": "markdown",
17 "cell_type": "markdown",
18 "metadata": {},
18 "metadata": {},
19 "source": [
19 "source": [
20 "[< Back to Part 4](Part 4 - Styles.ipynb) or [Index](index.ipynb)"
20 "[< Back to Part 4](Part 4 - Styles.ipynb) or [Index](index.ipynb)"
21 ]
21 ]
22 },
22 },
23 {
23 {
24 "cell_type": "code",
24 "cell_type": "code",
25 "collapsed": false,
25 "collapsed": false,
26 "input": [
26 "input": [
27 "from IPython.html import widgets # Widget definitions\n",
27 "from IPython.html import widgets # Widget definitions\n",
28 "from IPython.display import display # Used to display widgets in the notebook"
28 "from IPython.display import display # Used to display widgets in the notebook"
29 ],
29 ],
30 "language": "python",
30 "language": "python",
31 "metadata": {},
31 "metadata": {},
32 "outputs": [],
32 "outputs": [],
33 "prompt_number": 1
33 "prompt_number": 1
34 },
34 },
35 {
35 {
36 "cell_type": "heading",
36 "cell_type": "heading",
37 "level": 1,
37 "level": 1,
38 "metadata": {},
38 "metadata": {},
39 "source": [
39 "source": [
40 "Alignment"
40 "Alignment"
41 ]
41 ]
42 },
42 },
43 {
43 {
44 "cell_type": "markdown",
44 "cell_type": "markdown",
45 "metadata": {},
45 "metadata": {},
46 "source": [
46 "source": [
47 "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) "
47 "Most widgets have a `description` attribute, which allows a label for the widget to be defined.\n",
48 "The label of the widget has a fixed minimum width.\n",
49 "The text of the label is always right aligned and the widget is left aligned:"
48 ]
50 ]
49 },
51 },
50 {
52 {
51 "cell_type": "code",
53 "cell_type": "code",
52 "collapsed": false,
54 "collapsed": false,
53 "input": [
55 "input": [
54 "display(widgets.TextBoxWidget(description=\"a:\"))\n",
56 "display(widgets.TextBoxWidget(description=\"a:\"))\n",
55 "display(widgets.TextBoxWidget(description=\"aa:\"))\n",
57 "display(widgets.TextBoxWidget(description=\"aa:\"))\n",
56 "display(widgets.TextBoxWidget(description=\"aaa:\"))"
58 "display(widgets.TextBoxWidget(description=\"aaa:\"))"
57 ],
59 ],
58 "language": "python",
60 "language": "python",
59 "metadata": {},
61 "metadata": {},
60 "outputs": [],
62 "outputs": [],
61 "prompt_number": 2
63 "prompt_number": 3
62 },
64 },
63 {
65 {
64 "cell_type": "markdown",
66 "cell_type": "markdown",
65 "metadata": {},
67 "metadata": {},
66 "source": [
68 "source": [
67 "If a label is longer than the minimum width, the widget is shifted to the right (as seen below)."
69 "If a label is longer than the minimum width, the widget is shifted to the right:"
68 ]
70 ]
69 },
71 },
70 {
72 {
71 "cell_type": "code",
73 "cell_type": "code",
72 "collapsed": false,
74 "collapsed": false,
73 "input": [
75 "input": [
74 "display(widgets.TextBoxWidget(description=\"a:\"))\n",
76 "display(widgets.TextBoxWidget(description=\"a:\"))\n",
75 "display(widgets.TextBoxWidget(description=\"aa:\"))\n",
77 "display(widgets.TextBoxWidget(description=\"aa:\"))\n",
76 "display(widgets.TextBoxWidget(description=\"aaa:\"))\n",
78 "display(widgets.TextBoxWidget(description=\"aaa:\"))\n",
77 "display(widgets.TextBoxWidget(description=\"aaaaaaaaaaaaaaaaaa:\"))"
79 "display(widgets.TextBoxWidget(description=\"aaaaaaaaaaaaaaaaaa:\"))"
78 ],
80 ],
79 "language": "python",
81 "language": "python",
80 "metadata": {},
82 "metadata": {},
81 "outputs": [],
83 "outputs": [],
82 "prompt_number": 3
84 "prompt_number": 4
83 },
85 },
84 {
86 {
85 "cell_type": "markdown",
87 "cell_type": "markdown",
86 "metadata": {},
88 "metadata": {},
87 "source": [
89 "source": [
88 "If a `description` is not set for the widget, the label is not displayed (as seen below)."
90 "If a `description` is not set for the widget, the label is not displayed:"
89 ]
91 ]
90 },
92 },
91 {
93 {
92 "cell_type": "code",
94 "cell_type": "code",
93 "collapsed": false,
95 "collapsed": false,
94 "input": [
96 "input": [
95 "display(widgets.TextBoxWidget(description=\"a:\"))\n",
97 "display(widgets.TextBoxWidget(description=\"a:\"))\n",
96 "display(widgets.TextBoxWidget(description=\"aa:\"))\n",
98 "display(widgets.TextBoxWidget(description=\"aa:\"))\n",
97 "display(widgets.TextBoxWidget(description=\"aaa:\"))\n",
99 "display(widgets.TextBoxWidget(description=\"aaa:\"))\n",
98 "display(widgets.TextBoxWidget())"
100 "display(widgets.TextBoxWidget())"
99 ],
101 ],
100 "language": "python",
102 "language": "python",
101 "metadata": {},
103 "metadata": {},
102 "outputs": [],
104 "outputs": [],
103 "prompt_number": 4
105 "prompt_number": 5
104 },
106 },
105 {
107 {
106 "cell_type": "heading",
108 "cell_type": "heading",
107 "level": 1,
109 "level": 1,
108 "metadata": {},
110 "metadata": {},
109 "source": [
111 "source": [
110 "Custom Alignment"
112 "Custom Alignment"
111 ]
113 ]
112 },
114 },
113 {
115 {
114 "cell_type": "markdown",
116 "cell_type": "markdown",
115 "metadata": {},
117 "metadata": {},
116 "source": [
118 "source": [
117 "`ContainerWidget`s allow for custom alignment of widgets. The `hbox` and `vbox` DOM classes cause the `ContainerWidget` to both horizontally and vertically align its children. The following example compares `vbox` to `hbox`."
119 "`ContainerWidget`s allow for custom alignment of widgets.\n",
120 "The `hbox` and `vbox` CSS classes cause the `ContainerWidget` to horizontally or vertically align its children."
118 ]
121 ]
119 },
122 },
120 {
123 {
121 "cell_type": "code",
124 "cell_type": "code",
122 "collapsed": false,
125 "collapsed": false,
123 "input": [
126 "input": [
124 "child_style = {\n",
127 "child_style = {\n",
125 " 'background': '#77CC77',\n",
128 " 'background': '#77CC77',\n",
126 " 'padding': '25px',\n",
129 " 'padding': '25px',\n",
127 " 'margin': '5px',\n",
130 " 'margin': '5px',\n",
128 " 'font-size': 'xx-large',\n",
131 " 'font-size': 'xx-large',\n",
129 " 'color': 'white',\n",
132 " 'color': 'white',\n",
130 "}\n",
133 "}\n",
131 "\n",
134 "\n",
132 "def make_container(title):\n",
135 "def make_container(title):\n",
133 " header = widgets.LatexWidget(value=title) \n",
136 " header = widgets.LatexWidget(value=title) \n",
134 " display(header)\n",
137 " display(header)\n",
135 " header.set_css({\n",
138 " header.set_css({\n",
136 " 'font-size': '30pt',\n",
139 " 'font-size': '30pt',\n",
137 " 'margin-top': '40pt',\n",
140 " 'margin-top': '40pt',\n",
138 " 'margin-bottom': '20pt',\n",
141 " 'margin-bottom': '20pt',\n",
139 " })\n",
142 " })\n",
140 " \n",
143 " \n",
141 " container = widgets.ContainerWidget()\n",
144 " container = widgets.ContainerWidget()\n",
142 " container.set_css('background', '#999999')\n",
145 " container.set_css('background', '#999999')\n",
143 " display(container)\n",
146 " display(container)\n",
144 " return container\n",
147 " return container\n",
145 "\n",
148 "\n",
146 "def fill_container(container):\n",
149 "def fill_container(container):\n",
147 " components = []\n",
150 " components = []\n",
148 " for i in range(3):\n",
151 " for i in range(3):\n",
149 " components.append(widgets.LatexWidget(value=\"ABC\"[i]))\n",
152 " components.append(widgets.LatexWidget(value=\"ABC\"[i]))\n",
150 " components[i].set_css(child_style)\n",
153 " components[i].set_css(child_style)\n",
151 " container.children = components\n",
154 " container.children = components\n",
152 " \n",
155 " \n",
153 "container = make_container('VBox')\n",
156 "container = make_container('VBox')\n",
154 "container.add_class('vbox')\n",
157 "container.add_class('vbox')\n",
155 "fill_container(container)\n",
158 "fill_container(container)\n",
156 "\n",
159 "\n",
157 "container = make_container('HBox')\n",
160 "container = make_container('HBox')\n",
158 "container.add_class('hbox')\n",
161 "container.add_class('hbox')\n",
159 "fill_container(container)\n"
162 "fill_container(container)\n"
160 ],
163 ],
161 "language": "python",
164 "language": "python",
162 "metadata": {},
165 "metadata": {},
163 "outputs": [],
166 "outputs": [],
164 "prompt_number": 5
167 "prompt_number": 6
165 },
168 },
166 {
169 {
167 "cell_type": "markdown",
170 "cell_type": "markdown",
168 "metadata": {},
171 "metadata": {},
169 "source": [
172 "source": [
170 "The `start`, `center`, and `end` DOM classes adjust the alignment of the widgets on the axis that they are being rendered on. Below is an example of the different alignments."
173 "The `start`, `center`, and `end` classes adjust the alignment of the widgets on the axis where they are being rendered.\n",
174 "Below is an example of the different alignments."
171 ]
175 ]
172 },
176 },
173 {
177 {
174 "cell_type": "code",
178 "cell_type": "code",
175 "collapsed": false,
179 "collapsed": false,
176 "input": [
180 "input": [
177 "container = make_container('HBox Pack Start')\n",
181 "container = make_container('HBox Pack Start')\n",
178 "container.add_class('hbox')\n",
182 "container.add_class('hbox')\n",
179 "container.add_class('start')\n",
183 "container.add_class('start')\n",
180 "fill_container(container)\n",
184 "fill_container(container)\n",
181 " \n",
185 " \n",
182 "container = make_container('HBox Pack Center')\n",
186 "container = make_container('HBox Pack Center')\n",
183 "container.add_class('hbox')\n",
187 "container.add_class('hbox')\n",
184 "container.add_class('center')\n",
188 "container.add_class('center')\n",
185 "fill_container(container)\n",
189 "fill_container(container)\n",
186 " \n",
190 " \n",
187 "container = make_container('HBox Pack End')\n",
191 "container = make_container('HBox Pack End')\n",
188 "container.add_class('hbox')\n",
192 "container.add_class('hbox')\n",
189 "container.add_class('end')\n",
193 "container.add_class('end')\n",
190 "fill_container(container)"
194 "fill_container(container)"
191 ],
195 ],
192 "language": "python",
196 "language": "python",
193 "metadata": {},
197 "metadata": {},
194 "outputs": [],
198 "outputs": [],
195 "prompt_number": 6
199 "prompt_number": 6
196 },
200 },
197 {
201 {
198 "cell_type": "markdown",
202 "cell_type": "markdown",
199 "metadata": {},
203 "metadata": {},
200 "source": [
204 "source": [
201 "The `box-flex0`, `box-flex1`, and `box-flex2` DOM classes modify the container's flexibility. Changing a container flexibility affects how and if the container will occupy the remaining space. Applying `box-flex0` has the same result as not applying flex. Below is an example of different flex configurations. The number on the boxes correspond to the applied flex."
205 "The `box-flex0`, `box-flex1`, and `box-flex2` DOM classes modify the container's flexibility. Changing a container flexibility affects how and if the container will occupy the remaining space. Applying `box-flex0` has the same result as not applying flex. Below is an example of different flex configurations. The number on the boxes correspond to the applied flex."
202 ]
206 ]
203 },
207 },
204 {
208 {
205 "cell_type": "code",
209 "cell_type": "code",
206 "collapsed": false,
210 "collapsed": false,
207 "input": [
211 "input": [
208 "def fill_container(container, flexes):\n",
212 "def fill_container(container, flexes):\n",
209 " components = []\n",
213 " components = []\n",
210 " for i in range(len(flexes)):\n",
214 " for i in range(len(flexes)):\n",
211 " components.append(widgets.ContainerWidget())\n",
215 " components.append(widgets.ContainerWidget())\n",
212 " components[i].set_css(child_style)\n",
216 " components[i].set_css(child_style)\n",
213 " \n",
217 " \n",
214 " label = widgets.LatexWidget(value=str(flexes[i]))\n",
218 " label = widgets.LatexWidget(value=str(flexes[i]))\n",
215 " components[i].children = [label]\n",
219 " components[i].children = [label]\n",
216 " container.children = components\n",
220 " container.children = components\n",
217 " \n",
221 " \n",
218 " for i in range(len(flexes)):\n",
222 " for i in range(len(flexes)):\n",
219 " if flexes[i] == 0:\n",
223 " if flexes[i] == 0:\n",
220 " components[i].add_class('box-flex0')\n",
224 " components[i].add_class('box-flex0')\n",
221 " elif flexes[i] == 1:\n",
225 " elif flexes[i] == 1:\n",
222 " components[i].add_class('box-flex1')\n",
226 " components[i].add_class('box-flex1')\n",
223 " elif flexes[i] == 2:\n",
227 " elif flexes[i] == 2:\n",
224 " components[i].add_class('box-flex2')\n",
228 " components[i].add_class('box-flex2')\n",
225 " \n",
229 " \n",
226 "container = make_container('Different Flex Configurations')\n",
230 "container = make_container('Different Flex Configurations')\n",
227 "container.add_class('hbox')\n",
231 "container.add_class('hbox')\n",
228 "fill_container(container, [0, 0, 0])\n",
232 "fill_container(container, [0, 0, 0])\n",
229 " \n",
233 " \n",
230 "container = make_container('')\n",
234 "container = make_container('')\n",
231 "container.add_class('hbox')\n",
235 "container.add_class('hbox')\n",
232 "fill_container(container, [0, 0, 1])\n",
236 "fill_container(container, [0, 0, 1])\n",
233 " \n",
237 " \n",
234 "container = make_container('')\n",
238 "container = make_container('')\n",
235 "container.add_class('hbox')\n",
239 "container.add_class('hbox')\n",
236 "fill_container(container, [0, 1, 1])\n",
240 "fill_container(container, [0, 1, 1])\n",
237 " \n",
241 " \n",
238 "container = make_container('')\n",
242 "container = make_container('')\n",
239 "container.add_class('hbox')\n",
243 "container.add_class('hbox')\n",
240 "fill_container(container, [0, 2, 2])\n",
244 "fill_container(container, [0, 2, 2])\n",
241 " \n",
245 " \n",
242 "container = make_container('')\n",
246 "container = make_container('')\n",
243 "container.add_class('hbox')\n",
247 "container.add_class('hbox')\n",
244 "fill_container(container, [0, 1, 2])\n",
248 "fill_container(container, [0, 1, 2])\n",
245 " \n",
249 " \n",
246 "container = make_container('')\n",
250 "container = make_container('')\n",
247 "container.add_class('hbox')\n",
251 "container.add_class('hbox')\n",
248 "fill_container(container, [1, 1, 2])"
252 "fill_container(container, [1, 1, 2])"
249 ],
253 ],
250 "language": "python",
254 "language": "python",
251 "metadata": {},
255 "metadata": {},
252 "outputs": [],
256 "outputs": [],
253 "prompt_number": 7
257 "prompt_number": 7
254 },
258 },
255 {
259 {
256 "cell_type": "markdown",
260 "cell_type": "markdown",
257 "metadata": {},
261 "metadata": {},
258 "source": [
262 "source": [
259 "The `align_start`, `align_center`, and `align_end` DOM classes adjust the alignment of the widgets on the axis perpindicular to the one that they are being rendered on. Below is an example of the different alignments."
263 "The `align_start`, `align_center`, and `align_end` DOM classes adjust the alignment of the widgets on the axis perpindicular to the one that they are being rendered on. Below is an example of the different alignments."
260 ]
264 ]
261 },
265 },
262 {
266 {
263 "cell_type": "code",
267 "cell_type": "code",
264 "collapsed": false,
268 "collapsed": false,
265 "input": [
269 "input": [
266 "def fill_container(container):\n",
270 "def fill_container(container):\n",
267 " components = []\n",
271 " components = []\n",
268 " for i in range(3):\n",
272 " for i in range(3):\n",
269 " components.append(widgets.LatexWidget(parent=container, value=\"ABC\"[i]))\n",
273 " components.append(widgets.LatexWidget(parent=container, value=\"ABC\"[i]))\n",
270 " components[i].set_css(child_style)\n",
274 " components[i].set_css(child_style)\n",
271 " components[i].set_css('height', str((i+1) * 50) + 'px')\n",
275 " components[i].set_css('height', str((i+1) * 50) + 'px')\n",
272 " container.children = components\n",
276 " container.children = components\n",
273 "\n",
277 "\n",
274 "container = make_container('HBox Align Start')\n",
278 "container = make_container('HBox Align Start')\n",
275 "container.add_class(\"hbox\")\n",
279 "container.add_class(\"hbox\")\n",
276 "container.add_class(\"align-start\")\n",
280 "container.add_class(\"align-start\")\n",
277 "fill_container(container)\n",
281 "fill_container(container)\n",
278 " \n",
282 " \n",
279 "container = make_container('HBox Align Center')\n",
283 "container = make_container('HBox Align Center')\n",
280 "container.add_class(\"hbox\")\n",
284 "container.add_class(\"hbox\")\n",
281 "container.add_class(\"align-center\")\n",
285 "container.add_class(\"align-center\")\n",
282 "fill_container(container)\n",
286 "fill_container(container)\n",
283 " \n",
287 " \n",
284 "container = make_container('HBox Align End')\n",
288 "container = make_container('HBox Align End')\n",
285 "container.add_class(\"hbox\")\n",
289 "container.add_class(\"hbox\")\n",
286 "container.add_class(\"align-end\")\n",
290 "container.add_class(\"align-end\")\n",
287 "fill_container(container)"
291 "fill_container(container)"
288 ],
292 ],
289 "language": "python",
293 "language": "python",
290 "metadata": {},
294 "metadata": {},
291 "outputs": [],
295 "outputs": [],
292 "prompt_number": 8
296 "prompt_number": 8
293 },
297 },
294 {
298 {
295 "cell_type": "markdown",
299 "cell_type": "markdown",
296 "metadata": {},
300 "metadata": {},
297 "source": [
301 "source": [
298 "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."
302 "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."
299 ]
303 ]
300 },
304 },
301 {
305 {
302 "cell_type": "code",
306 "cell_type": "code",
303 "collapsed": false,
307 "collapsed": false,
304 "input": [
308 "input": [
305 "container = widgets.ContainerWidget()\n",
309 "container = widgets.ContainerWidget()\n",
306 "container.children=[widgets.FloatSliderWidget(orientation='vertical', description=str(i+1), value=50.0) \n",
310 "container.children=[widgets.FloatSliderWidget(orientation='vertical', description=str(i+1), value=50.0) \n",
307 " for i in range(15)]\n",
311 " for i in range(15)]\n",
308 "display(container)\n",
312 "display(container)\n",
309 "container.add_class('hbox')"
313 "container.add_class('hbox')"
310 ],
314 ],
311 "language": "python",
315 "language": "python",
312 "metadata": {},
316 "metadata": {},
313 "outputs": [],
317 "outputs": [],
314 "prompt_number": 9
318 "prompt_number": 9
315 },
319 },
316 {
320 {
317 "cell_type": "markdown",
321 "cell_type": "markdown",
318 "metadata": {},
322 "metadata": {},
319 "source": [
323 "source": [
320 "In [Part 6](Part 6 - Custom Widget.ipynb) of this [series](index.ipynb), you will learn how to create your own custom widget."
324 "In [Part 6](Part 6 - Custom Widget.ipynb) of this [series](index.ipynb), you will learn how to create your own custom widget."
321 ]
325 ]
322 }
326 }
323 ],
327 ],
324 "metadata": {}
328 "metadata": {}
325 }
329 }
326 ]
330 ]
327 } No newline at end of file
331 }
@@ -1,1022 +1,1058 b''
1 {
1 {
2 "metadata": {
2 "metadata": {
3 "cell_tags": [
3 "cell_tags": [
4 [
4 [
5 "<None>",
5 "<None>",
6 null
6 null
7 ]
7 ]
8 ],
8 ],
9 "name": ""
9 "name": ""
10 },
10 },
11 "nbformat": 3,
11 "nbformat": 3,
12 "nbformat_minor": 0,
12 "nbformat_minor": 0,
13 "worksheets": [
13 "worksheets": [
14 {
14 {
15 "cells": [
15 "cells": [
16 {
16 {
17 "cell_type": "markdown",
17 "cell_type": "markdown",
18 "metadata": {},
18 "metadata": {},
19 "source": [
19 "source": [
20 "[< Back to Part 5](Part 5 - Alignment.ipynb) or [Index](index.ipynb)\n",
20 "[< Back to Part 5](Part 5 - Alignment.ipynb) or [Index](index.ipynb)\n",
21 "\n",
21 "\n",
22 "Before reading, the author recommends the reader to review\n",
22 "Before reading, make sure to review\n",
23 "\n",
23 "\n",
24 "- [MVC prgramming](http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller)\n",
24 "- [MVC prgramming](http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller)\n",
25 "- [Backbone.js](https://www.codeschool.com/courses/anatomy-of-backbonejs)\n",
25 "- [Backbone.js](https://www.codeschool.com/courses/anatomy-of-backbonejs)\n",
26 "- [The widget IPEP](https://github.com/ipython/ipython/wiki/IPEP-23%3A-Backbone.js-Widgets)\n",
26 "- [The widget IPEP](https://github.com/ipython/ipython/wiki/IPEP-23%3A-Backbone.js-Widgets)\n",
27 "- [The original widget PR discussion](https://github.com/ipython/ipython/pull/4374)"
27 "- [The original widget PR discussion](https://github.com/ipython/ipython/pull/4374)"
28 ]
28 ]
29 },
29 },
30 {
30 {
31 "cell_type": "code",
31 "cell_type": "code",
32 "collapsed": false,
32 "collapsed": false,
33 "input": [
33 "input": [
34 "from __future__ import print_function # For py 2.7 compat\n",
34 "from __future__ import print_function # For py 2.7 compat\n",
35 "\n",
35 "\n",
36 "from IPython.html import widgets # Widget definitions.\n",
36 "from IPython.html import widgets # Widget definitions\n",
37 "from IPython.display import display # Used to display widgets in the notebook.\n",
37 "from IPython.display import display # Used to display widgets in the notebook\n",
38 "from IPython.utils.traitlets import Unicode # Used to declare properties of our widget."
38 "from IPython.utils.traitlets import Unicode # Used to declare attributes of our widget"
39 ],
39 ],
40 "language": "python",
40 "language": "python",
41 "metadata": {},
41 "metadata": {},
42 "outputs": [],
42 "outputs": [],
43 "prompt_number": 1
43 "prompt_number": 1
44 },
44 },
45 {
45 {
46 "cell_type": "heading",
46 "cell_type": "heading",
47 "level": 1,
47 "level": 1,
48 "metadata": {},
48 "metadata": {},
49 "source": [
49 "source": [
50 "Abstract"
50 "Abstract"
51 ]
51 ]
52 },
52 },
53 {
53 {
54 "cell_type": "markdown",
54 "cell_type": "markdown",
55 "metadata": {},
55 "metadata": {},
56 "source": [
56 "source": [
57 "This notebook implements a custom date picker widget. The purpose of this notebook is to demonstrate the widget creation process. To create a custom widget, custom Python and JavaScript is required."
57 "This notebook implements a custom date picker widget,\n",
58 "in order to demonstrate the widget creation process.\n",
59 "\n",
60 "To create a custom widget, both Python and JavaScript code is required."
58 ]
61 ]
59 },
62 },
60 {
63 {
61 "cell_type": "heading",
64 "cell_type": "heading",
62 "level": 1,
65 "level": 1,
63 "metadata": {},
66 "metadata": {},
64 "source": [
67 "source": [
65 "Section 1 - Basics"
68 "Section 1 - Basics"
66 ]
69 ]
67 },
70 },
68 {
71 {
69 "cell_type": "heading",
72 "cell_type": "heading",
70 "level": 2,
73 "level": 2,
71 "metadata": {},
74 "metadata": {},
72 "source": [
75 "source": [
73 "Python"
76 "Python"
74 ]
77 ]
75 },
78 },
76 {
79 {
77 "cell_type": "markdown",
80 "cell_type": "markdown",
78 "metadata": {},
81 "metadata": {},
79 "source": [
82 "source": [
80 "When starting a project like this, it is often easiest to make an overly simplified base to verify that the underlying framework is working as expected. To start we will create an empty widget and make sure that it can be rendered. The first step is to create the widget in Python."
83 "When starting a project like this, it is often easiest to make a simple base implementation,\n",
84 "to verify that the underlying framework is working as expected.\n",
85 "To start, we will create an empty widget and make sure that it can be rendered.\n",
86 "The first step is to define the widget in Python."
81 ]
87 ]
82 },
88 },
83 {
89 {
84 "cell_type": "code",
90 "cell_type": "code",
85 "collapsed": false,
91 "collapsed": false,
86 "input": [
92 "input": [
87 "class DateWidget(widgets.DOMWidget):\n",
93 "class DateWidget(widgets.DOMWidget):\n",
88 " _view_name = Unicode('DatePickerView', sync=True)"
94 " _view_name = Unicode('DatePickerView', sync=True)"
89 ],
95 ],
90 "language": "python",
96 "language": "python",
91 "metadata": {},
97 "metadata": {},
92 "outputs": [],
98 "outputs": [],
93 "prompt_number": 2
99 "prompt_number": 2
94 },
100 },
95 {
101 {
96 "cell_type": "markdown",
102 "cell_type": "markdown",
97 "metadata": {},
103 "metadata": {},
98 "source": [
104 "source": [
99 "Our widget inherits from `widgets.DOMWidget` since it is intended that it will be displayed in the notebook directly. The `_view_name` trait is specially named, the widget framework will read the `_view_name` trait to determine what Backbone view the widget is associated with. **Using `sync=True` is very important** because it tells the widget framework that that specific traitlet should be synced between the front- and back-ends."
105 "Our widget inherits from `widgets.DOMWidget` since it is intended that it will be displayed in the notebook directly.\n",
106 "The `_view_name` trait is special; the widget framework will read the `_view_name` trait to determine what Backbone view the widget is associated with.\n",
107 "**Using `sync=True` is very important** because it tells the widget framework that that specific traitlet should be synced between the front- and back-ends."
100 ]
108 ]
101 },
109 },
102 {
110 {
103 "cell_type": "heading",
111 "cell_type": "heading",
104 "level": 2,
112 "level": 2,
105 "metadata": {},
113 "metadata": {},
106 "source": [
114 "source": [
107 "JavaScript"
115 "JavaScript"
108 ]
116 ]
109 },
117 },
110 {
118 {
111 "cell_type": "markdown",
119 "cell_type": "markdown",
112 "metadata": {},
120 "metadata": {},
113 "source": [
121 "source": [
114 "In the IPython notebook [require.js](http://requirejs.org/) is used to load JavaScript dependencies. All IPython widget code depends on `notebook/js/widgets/widget.js`. In it the base widget model and base view are defined. We need to use require.js to include this file:"
122 "In the IPython notebook [require.js](http://requirejs.org/) is used to load JavaScript dependencies.\n",
123 "All IPython widget code depends on `notebook/js/widgets/widget.js`,\n",
124 "where the base widget model and base view are defined.\n",
125 "We use require.js to load this file:"
115 ]
126 ]
116 },
127 },
117 {
128 {
118 "cell_type": "code",
129 "cell_type": "code",
119 "collapsed": false,
130 "collapsed": false,
120 "input": [
131 "input": [
121 "%%javascript\n",
132 "%%javascript\n",
122 "\n",
133 "\n",
123 "require([\"notebook/js/widgets/widget\"], function(WidgetManager){\n",
134 "require([\"notebook/js/widgets/widget\"], function(WidgetManager){\n",
124 "\n",
135 "\n",
125 "});"
136 "});"
126 ],
137 ],
127 "language": "python",
138 "language": "python",
128 "metadata": {},
139 "metadata": {},
129 "outputs": [
140 "outputs": [
130 {
141 {
131 "javascript": [
142 "javascript": [
132 "\n",
143 "\n",
133 "require([\"notebook/js/widgets/widget\"], function(WidgetManager){\n",
144 "require([\"notebook/js/widgets/widget\"], function(WidgetManager){\n",
134 "\n",
145 "\n",
135 "});"
146 "});"
136 ],
147 ],
137 "metadata": {},
148 "metadata": {},
138 "output_type": "display_data",
149 "output_type": "display_data",
139 "text": [
150 "text": [
140 "<IPython.core.display.Javascript at 0x2a2e0d0>"
151 "<IPython.core.display.Javascript at 0x109491690>"
141 ]
152 ]
142 }
153 }
143 ],
154 ],
144 "prompt_number": 3
155 "prompt_number": 3
145 },
156 },
146 {
157 {
147 "cell_type": "markdown",
158 "cell_type": "markdown",
148 "metadata": {},
159 "metadata": {},
149 "source": [
160 "source": [
150 "Now we need to define a view that can be used to represent the model. To do this, the `IPython.DOMWidgetView` is extended. A render function must be defined. The render function is used to render a widget view instance to the DOM. For now the render function renders a div that contains the text *Hello World!* Lastly, the view needs to be registered with the widget manager.\n",
161 "Now we need to define a view that can be used to represent the model.\n",
162 "To do this, the `IPython.DOMWidgetView` is extended.\n",
163 "**A render function must be defined**.\n",
164 "The render function is used to render a widget view instance to the DOM.\n",
165 "For now, the render function renders a div that contains the text *Hello World!*\n",
166 "Lastly, the view needs to be registered with the widget manager.\n",
151 "\n",
167 "\n",
152 "**Final JavaScript code below:**"
168 "**Final JavaScript code below:**"
153 ]
169 ]
154 },
170 },
155 {
171 {
156 "cell_type": "code",
172 "cell_type": "code",
157 "collapsed": false,
173 "collapsed": false,
158 "input": [
174 "input": [
159 "%%javascript\n",
175 "%%javascript\n",
160 "\n",
176 "\n",
161 "require([\"notebook/js/widgets/widget\"], function(WidgetManager){\n",
177 "require([\"notebook/js/widgets/widget\"], function(WidgetManager){\n",
162 " \n",
178 " \n",
163 " // Define the DatePickerView\n",
179 " // Define the DatePickerView\n",
164 " var DatePickerView = IPython.DOMWidgetView.extend({\n",
180 " var DatePickerView = IPython.DOMWidgetView.extend({\n",
165 " render: function(){ this.$el.text('Hello World!'); },\n",
181 " render: function(){ this.$el.text('Hello World!'); },\n",
166 " });\n",
182 " });\n",
167 " \n",
183 " \n",
168 " // Register the DatePickerView with the widget manager.\n",
184 " // Register the DatePickerView with the widget manager.\n",
169 " WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
185 " WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
170 "});"
186 "});"
171 ],
187 ],
172 "language": "python",
188 "language": "python",
173 "metadata": {},
189 "metadata": {},
174 "outputs": [
190 "outputs": [
175 {
191 {
176 "javascript": [
192 "javascript": [
177 "\n",
193 "\n",
178 "require([\"notebook/js/widgets/widget\"], function(WidgetManager){\n",
194 "require([\"notebook/js/widgets/widget\"], function(WidgetManager){\n",
179 " \n",
195 " \n",
180 " // Define the DatePickerView\n",
196 " // Define the DatePickerView\n",
181 " var DatePickerView = IPython.DOMWidgetView.extend({\n",
197 " var DatePickerView = IPython.DOMWidgetView.extend({\n",
182 " render: function(){ this.$el.text('Hello World!'); },\n",
198 " render: function(){ this.$el.text('Hello World!'); },\n",
183 " });\n",
199 " });\n",
184 " \n",
200 " \n",
185 " // Register the DatePickerView with the widget manager.\n",
201 " // Register the DatePickerView with the widget manager.\n",
186 " WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
202 " WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
187 "});"
203 "});"
188 ],
204 ],
189 "metadata": {},
205 "metadata": {},
190 "output_type": "display_data",
206 "output_type": "display_data",
191 "text": [
207 "text": [
192 "<IPython.core.display.Javascript at 0x2a2e3d0>"
208 "<IPython.core.display.Javascript at 0x1094917d0>"
193 ]
209 ]
194 }
210 }
195 ],
211 ],
196 "prompt_number": 4
212 "prompt_number": 4
197 },
213 },
198 {
214 {
199 "cell_type": "heading",
215 "cell_type": "heading",
200 "level": 2,
216 "level": 2,
201 "metadata": {},
217 "metadata": {},
202 "source": [
218 "source": [
203 "Test"
219 "Test"
204 ]
220 ]
205 },
221 },
206 {
222 {
207 "cell_type": "markdown",
223 "cell_type": "markdown",
208 "metadata": {},
224 "metadata": {},
209 "source": [
225 "source": [
210 "To test, create the widget the same way that the other widgets are created."
226 "To test what we have so far, create the widget, just like you would the builtin widgets:"
211 ]
227 ]
212 },
228 },
213 {
229 {
214 "cell_type": "code",
230 "cell_type": "code",
215 "collapsed": false,
231 "collapsed": false,
216 "input": [
232 "input": [
217 "DateWidget()"
233 "DateWidget()"
218 ],
234 ],
219 "language": "python",
235 "language": "python",
220 "metadata": {},
236 "metadata": {},
221 "outputs": [],
237 "outputs": [],
222 "prompt_number": 5
238 "prompt_number": 5
223 },
239 },
224 {
240 {
225 "cell_type": "heading",
241 "cell_type": "heading",
226 "level": 1,
242 "level": 1,
227 "metadata": {},
243 "metadata": {},
228 "source": [
244 "source": [
229 "Section 2 - Something useful"
245 "Section 2 - Something useful"
230 ]
246 ]
231 },
247 },
232 {
248 {
233 "cell_type": "heading",
249 "cell_type": "heading",
234 "level": 2,
250 "level": 2,
235 "metadata": {},
251 "metadata": {},
236 "source": [
252 "source": [
237 "Python"
253 "Python"
238 ]
254 ]
239 },
255 },
240 {
256 {
241 "cell_type": "markdown",
257 "cell_type": "markdown",
242 "metadata": {},
258 "metadata": {},
243 "source": [
259 "source": [
244 "In the last section we created a simple widget that displayed *Hello World!* To make an actual date widget, we need to add a property that will be synced between the Python model and the JavaScript model. The new property must be a traitlet property so the widget machinery can automatically handle it. The property needs to be constructed with a `sync=True` keyword argument so the widget machinery knows to syncronize it with the front-end. Adding this to the code from the last section:"
260 "In the last section we created a simple widget that displayed *Hello World!*\n",
261 "To make an actual date widget, we need to add a property that will be synced between the Python model and the JavaScript model.\n",
262 "The new attribute must be a traitlet, so the widget machinery can handle it.\n",
263 "The traitlet must be constructed with a `sync=True` keyword argument, to tell the widget machinery knows to synchronize it with the front-end.\n",
264 "Adding this to the code from the last section:"
245 ]
265 ]
246 },
266 },
247 {
267 {
248 "cell_type": "code",
268 "cell_type": "code",
249 "collapsed": false,
269 "collapsed": false,
250 "input": [
270 "input": [
251 "class DateWidget(widgets.DOMWidget):\n",
271 "class DateWidget(widgets.DOMWidget):\n",
252 " _view_name = Unicode('DatePickerView', sync=True)\n",
272 " _view_name = Unicode('DatePickerView', sync=True)\n",
253 " value = Unicode(sync=True)"
273 " value = Unicode(sync=True)"
254 ],
274 ],
255 "language": "python",
275 "language": "python",
256 "metadata": {},
276 "metadata": {},
257 "outputs": [],
277 "outputs": [],
258 "prompt_number": 6
278 "prompt_number": 6
259 },
279 },
260 {
280 {
261 "cell_type": "heading",
281 "cell_type": "heading",
262 "level": 2,
282 "level": 2,
263 "metadata": {},
283 "metadata": {},
264 "source": [
284 "source": [
265 "JavaScript"
285 "JavaScript"
266 ]
286 ]
267 },
287 },
268 {
288 {
269 "cell_type": "markdown",
289 "cell_type": "markdown",
270 "metadata": {},
290 "metadata": {},
271 "source": [
291 "source": [
272 "In the JavaScript there is no need to define counterparts to the traitlets. When the JavaScript model is created for the first time, it copies all of the traitlet `sync=True` attributes from the Python model. We need to replace *Hello World!* with an actual HTML date picker widget."
292 "In the JavaScript, there is no need to define counterparts to the traitlets.\n",
293 "When the JavaScript model is created for the first time,\n",
294 "it copies all of the traitlet `sync=True` attributes from the Python model.\n",
295 "We need to replace *Hello World!* with an actual HTML date picker widget."
273 ]
296 ]
274 },
297 },
275 {
298 {
276 "cell_type": "code",
299 "cell_type": "code",
277 "collapsed": false,
300 "collapsed": false,
278 "input": [
301 "input": [
279 "%%javascript\n",
302 "%%javascript\n",
280 "\n",
303 "\n",
281 "require([\"notebook/js/widgets/widget\"], function(WidgetManager){\n",
304 "require([\"notebook/js/widgets/widget\"], function(WidgetManager){\n",
282 " \n",
305 " \n",
283 " // Define the DatePickerView\n",
306 " // Define the DatePickerView\n",
284 " var DatePickerView = IPython.DOMWidgetView.extend({\n",
307 " var DatePickerView = IPython.DOMWidgetView.extend({\n",
285 " render: function(){\n",
308 " render: function(){\n",
286 " \n",
309 " \n",
287 " // Create the date picker control.\n",
310 " // Create the date picker control.\n",
288 " this.$date = $('<input />')\n",
311 " this.$date = $('<input />')\n",
289 " .attr('type', 'date')\n",
312 " .attr('type', 'date')\n",
290 " .appendTo(this.$el);\n",
313 " .appendTo(this.$el);\n",
291 " },\n",
314 " },\n",
292 " });\n",
315 " });\n",
293 " \n",
316 " \n",
294 " // Register the DatePickerView with the widget manager.\n",
317 " // Register the DatePickerView with the widget manager.\n",
295 " WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
318 " WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
296 "});"
319 "});"
297 ],
320 ],
298 "language": "python",
321 "language": "python",
299 "metadata": {},
322 "metadata": {},
300 "outputs": [
323 "outputs": [
301 {
324 {
302 "javascript": [
325 "javascript": [
303 "\n",
326 "\n",
304 "require([\"notebook/js/widgets/widget\"], function(WidgetManager){\n",
327 "require([\"notebook/js/widgets/widget\"], function(WidgetManager){\n",
305 " \n",
328 " \n",
306 " // Define the DatePickerView\n",
329 " // Define the DatePickerView\n",
307 " var DatePickerView = IPython.DOMWidgetView.extend({\n",
330 " var DatePickerView = IPython.DOMWidgetView.extend({\n",
308 " render: function(){\n",
331 " render: function(){\n",
309 " \n",
332 " \n",
310 " // Create the date picker control.\n",
333 " // Create the date picker control.\n",
311 " this.$date = $('<input />')\n",
334 " this.$date = $('<input />')\n",
312 " .attr('type', 'date')\n",
335 " .attr('type', 'date')\n",
313 " .appendTo(this.$el);\n",
336 " .appendTo(this.$el);\n",
314 " },\n",
337 " },\n",
315 " });\n",
338 " });\n",
316 " \n",
339 " \n",
317 " // Register the DatePickerView with the widget manager.\n",
340 " // Register the DatePickerView with the widget manager.\n",
318 " WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
341 " WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
319 "});"
342 "});"
320 ],
343 ],
321 "metadata": {},
344 "metadata": {},
322 "output_type": "display_data",
345 "output_type": "display_data",
323 "text": [
346 "text": [
324 "<IPython.core.display.Javascript at 0x2a2e6d0>"
347 "<IPython.core.display.Javascript at 0x109491750>"
325 ]
348 ]
326 }
349 }
327 ],
350 ],
328 "prompt_number": 7
351 "prompt_number": 7
329 },
352 },
330 {
353 {
331 "cell_type": "markdown",
354 "cell_type": "markdown",
332 "metadata": {},
355 "metadata": {},
333 "source": [
356 "source": [
334 "In order to get the HTML date picker to update itself with the value set in the back-end, we need to implement an `update()` method."
357 "In order to get the HTML date picker to update itself with the value set in the back-end, we need to implement an `update()` method."
335 ]
358 ]
336 },
359 },
337 {
360 {
338 "cell_type": "code",
361 "cell_type": "code",
339 "collapsed": false,
362 "collapsed": false,
340 "input": [
363 "input": [
341 "%%javascript\n",
364 "%%javascript\n",
342 "\n",
365 "\n",
343 "require([\"notebook/js/widgets/widget\"], function(WidgetManager){\n",
366 "require([\"notebook/js/widgets/widget\"], function(WidgetManager){\n",
344 " \n",
367 " \n",
345 " // Define the DatePickerView\n",
368 " // Define the DatePickerView\n",
346 " var DatePickerView = IPython.DOMWidgetView.extend({\n",
369 " var DatePickerView = IPython.DOMWidgetView.extend({\n",
347 " render: function(){\n",
370 " render: function(){\n",
348 " \n",
371 " \n",
349 " // Create the date picker control.\n",
372 " // Create the date picker control.\n",
350 " this.$date = $('<input />')\n",
373 " this.$date = $('<input />')\n",
351 " .attr('type', 'date')\n",
374 " .attr('type', 'date')\n",
352 " .appendTo(this.$el);\n",
375 " .appendTo(this.$el);\n",
353 " },\n",
376 " },\n",
354 " \n",
377 " \n",
355 " update: function() {\n",
378 " update: function() {\n",
356 " \n",
379 " \n",
357 " // Set the value of the date control and then call base.\n",
380 " // Set the value of the date control and then call base.\n",
358 " this.$date.val(this.model.get('value')); // ISO format \"YYYY-MM-DDTHH:mm:ss.sssZ\" is required\n",
381 " this.$date.val(this.model.get('value')); // ISO format \"YYYY-MM-DDTHH:mm:ss.sssZ\" is required\n",
359 " return DatePickerView.__super__.update.apply(this);\n",
382 " return DatePickerView.__super__.update.apply(this);\n",
360 " },\n",
383 " },\n",
361 " });\n",
384 " });\n",
362 " \n",
385 " \n",
363 " // Register the DatePickerView with the widget manager.\n",
386 " // Register the DatePickerView with the widget manager.\n",
364 " WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
387 " WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
365 "});"
388 "});"
366 ],
389 ],
367 "language": "python",
390 "language": "python",
368 "metadata": {},
391 "metadata": {},
369 "outputs": [
392 "outputs": [
370 {
393 {
371 "javascript": [
394 "javascript": [
372 "\n",
395 "\n",
373 "require([\"notebook/js/widgets/widget\"], function(WidgetManager){\n",
396 "require([\"notebook/js/widgets/widget\"], function(WidgetManager){\n",
374 " \n",
397 " \n",
375 " // Define the DatePickerView\n",
398 " // Define the DatePickerView\n",
376 " var DatePickerView = IPython.DOMWidgetView.extend({\n",
399 " var DatePickerView = IPython.DOMWidgetView.extend({\n",
377 " render: function(){\n",
400 " render: function(){\n",
378 " \n",
401 " \n",
379 " // Create the date picker control.\n",
402 " // Create the date picker control.\n",
380 " this.$date = $('<input />')\n",
403 " this.$date = $('<input />')\n",
381 " .attr('type', 'date')\n",
404 " .attr('type', 'date')\n",
382 " .appendTo(this.$el);\n",
405 " .appendTo(this.$el);\n",
383 " },\n",
406 " },\n",
384 " \n",
407 " \n",
385 " update: function() {\n",
408 " update: function() {\n",
386 " \n",
409 " \n",
387 " // Set the value of the date control and then call base.\n",
410 " // Set the value of the date control and then call base.\n",
388 " this.$date.val(this.model.get('value')); // ISO format \"YYYY-MM-DDTHH:mm:ss.sssZ\" is required\n",
411 " this.$date.val(this.model.get('value')); // ISO format \"YYYY-MM-DDTHH:mm:ss.sssZ\" is required\n",
389 " return DatePickerView.__super__.update.apply(this);\n",
412 " return DatePickerView.__super__.update.apply(this);\n",
390 " },\n",
413 " },\n",
391 " });\n",
414 " });\n",
392 " \n",
415 " \n",
393 " // Register the DatePickerView with the widget manager.\n",
416 " // Register the DatePickerView with the widget manager.\n",
394 " WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
417 " WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
395 "});"
418 "});"
396 ],
419 ],
397 "metadata": {},
420 "metadata": {},
398 "output_type": "display_data",
421 "output_type": "display_data",
399 "text": [
422 "text": [
400 "<IPython.core.display.Javascript at 0x2a2e090>"
423 "<IPython.core.display.Javascript at 0x109491750>"
401 ]
424 ]
402 }
425 }
403 ],
426 ],
404 "prompt_number": 8
427 "prompt_number": 8
405 },
428 },
406 {
429 {
407 "cell_type": "markdown",
430 "cell_type": "markdown",
408 "metadata": {},
431 "metadata": {},
409 "source": [
432 "source": [
410 "To get the changed value from the front-end to publish itself to the back-end, we need to listen to the change event triggered by the HTM date control and set the value in the model. After the date change event fires and the new value is set in the model, it's very important that we call `this.touch()` to let the widget machinery know which view changed the model. This is important because the widget machinery needs to know which cell to route the message callbacks to.\n",
433 "To get the changed value from the frontend to publish itself to the backend,\n",
434 "we need to listen to the change event triggered by the HTM date control and set the value in the model.\n",
435 "After the date change event fires and the new value is set in the model,\n",
436 "it is very important that we call `this.touch()` to let the widget machinery know which view changed the model.\n",
437 "This is important because the widget machinery needs to know which cell to route the message callbacks to.\n",
411 "\n",
438 "\n",
412 "**Final JavaScript code below:**"
439 "**Final JavaScript code below:**"
413 ]
440 ]
414 },
441 },
415 {
442 {
416 "cell_type": "code",
443 "cell_type": "code",
417 "collapsed": false,
444 "collapsed": false,
418 "input": [
445 "input": [
419 "%%javascript\n",
446 "%%javascript\n",
420 "\n",
447 "\n",
421 "\n",
448 "\n",
422 "require([\"notebook/js/widgets/widget\"], function(WidgetManager){\n",
449 "require([\"notebook/js/widgets/widget\"], function(WidgetManager){\n",
423 " \n",
450 " \n",
424 " // Define the DatePickerView\n",
451 " // Define the DatePickerView\n",
425 " var DatePickerView = IPython.DOMWidgetView.extend({\n",
452 " var DatePickerView = IPython.DOMWidgetView.extend({\n",
426 " render: function(){\n",
453 " render: function(){\n",
427 " \n",
454 " \n",
428 " // Create the date picker control.\n",
455 " // Create the date picker control.\n",
429 " this.$date = $('<input />')\n",
456 " this.$date = $('<input />')\n",
430 " .attr('type', 'date')\n",
457 " .attr('type', 'date')\n",
431 " .appendTo(this.$el);\n",
458 " .appendTo(this.$el);\n",
432 " },\n",
459 " },\n",
433 " \n",
460 " \n",
434 " update: function() {\n",
461 " update: function() {\n",
435 " \n",
462 " \n",
436 " // Set the value of the date control and then call base.\n",
463 " // Set the value of the date control and then call base.\n",
437 " this.$date.val(this.model.get('value')); // ISO format \"YYYY-MM-DDTHH:mm:ss.sssZ\" is required\n",
464 " this.$date.val(this.model.get('value')); // ISO format \"YYYY-MM-DDTHH:mm:ss.sssZ\" is required\n",
438 " return DatePickerView.__super__.update.apply(this);\n",
465 " return DatePickerView.__super__.update.apply(this);\n",
439 " },\n",
466 " },\n",
440 " \n",
467 " \n",
441 " // Tell Backbone to listen to the change event of input controls (which the HTML date picker is)\n",
468 " // Tell Backbone to listen to the change event of input controls (which the HTML date picker is)\n",
442 " events: {\"change\": \"handle_date_change\"},\n",
469 " events: {\"change\": \"handle_date_change\"},\n",
443 " \n",
470 " \n",
444 " // Callback for when the date is changed.\n",
471 " // Callback for when the date is changed.\n",
445 " handle_date_change: function(event) {\n",
472 " handle_date_change: function(event) {\n",
446 " this.model.set('value', this.$date.val());\n",
473 " this.model.set('value', this.$date.val());\n",
447 " this.touch();\n",
474 " this.touch();\n",
448 " },\n",
475 " },\n",
449 " });\n",
476 " });\n",
450 " \n",
477 " \n",
451 " // Register the DatePickerView with the widget manager.\n",
478 " // Register the DatePickerView with the widget manager.\n",
452 " WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
479 " WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
453 "});"
480 "});"
454 ],
481 ],
455 "language": "python",
482 "language": "python",
456 "metadata": {},
483 "metadata": {},
457 "outputs": [
484 "outputs": [
458 {
485 {
459 "javascript": [
486 "javascript": [
460 "\n",
487 "\n",
461 "\n",
488 "\n",
462 "require([\"notebook/js/widgets/widget\"], function(WidgetManager){\n",
489 "require([\"notebook/js/widgets/widget\"], function(WidgetManager){\n",
463 " \n",
490 " \n",
464 " // Define the DatePickerView\n",
491 " // Define the DatePickerView\n",
465 " var DatePickerView = IPython.DOMWidgetView.extend({\n",
492 " var DatePickerView = IPython.DOMWidgetView.extend({\n",
466 " render: function(){\n",
493 " render: function(){\n",
467 " \n",
494 " \n",
468 " // Create the date picker control.\n",
495 " // Create the date picker control.\n",
469 " this.$date = $('<input />')\n",
496 " this.$date = $('<input />')\n",
470 " .attr('type', 'date')\n",
497 " .attr('type', 'date')\n",
471 " .appendTo(this.$el);\n",
498 " .appendTo(this.$el);\n",
472 " },\n",
499 " },\n",
473 " \n",
500 " \n",
474 " update: function() {\n",
501 " update: function() {\n",
475 " \n",
502 " \n",
476 " // Set the value of the date control and then call base.\n",
503 " // Set the value of the date control and then call base.\n",
477 " this.$date.val(this.model.get('value')); // ISO format \"YYYY-MM-DDTHH:mm:ss.sssZ\" is required\n",
504 " this.$date.val(this.model.get('value')); // ISO format \"YYYY-MM-DDTHH:mm:ss.sssZ\" is required\n",
478 " return DatePickerView.__super__.update.apply(this);\n",
505 " return DatePickerView.__super__.update.apply(this);\n",
479 " },\n",
506 " },\n",
480 " \n",
507 " \n",
481 " // Tell Backbone to listen to the change event of input controls (which the HTML date picker is)\n",
508 " // Tell Backbone to listen to the change event of input controls (which the HTML date picker is)\n",
482 " events: {\"change\": \"handle_date_change\"},\n",
509 " events: {\"change\": \"handle_date_change\"},\n",
483 " \n",
510 " \n",
484 " // Callback for when the date is changed.\n",
511 " // Callback for when the date is changed.\n",
485 " handle_date_change: function(event) {\n",
512 " handle_date_change: function(event) {\n",
486 " this.model.set('value', this.$date.val());\n",
513 " this.model.set('value', this.$date.val());\n",
487 " this.touch();\n",
514 " this.touch();\n",
488 " },\n",
515 " },\n",
489 " });\n",
516 " });\n",
490 " \n",
517 " \n",
491 " // Register the DatePickerView with the widget manager.\n",
518 " // Register the DatePickerView with the widget manager.\n",
492 " WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
519 " WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
493 "});"
520 "});"
494 ],
521 ],
495 "metadata": {},
522 "metadata": {},
496 "output_type": "display_data",
523 "output_type": "display_data",
497 "text": [
524 "text": [
498 "<IPython.core.display.Javascript at 0x2a2e750>"
525 "<IPython.core.display.Javascript at 0x109491b10>"
499 ]
526 ]
500 }
527 }
501 ],
528 ],
502 "prompt_number": 9
529 "prompt_number": 9
503 },
530 },
504 {
531 {
505 "cell_type": "heading",
532 "cell_type": "heading",
506 "level": 2,
533 "level": 2,
507 "metadata": {},
534 "metadata": {},
508 "source": [
535 "source": [
509 "Test"
536 "Test"
510 ]
537 ]
511 },
538 },
512 {
539 {
513 "cell_type": "markdown",
540 "cell_type": "markdown",
514 "metadata": {},
541 "metadata": {},
515 "source": [
542 "source": [
516 "To test, create the widget the same way that the other widgets are created."
543 "To test, create the widget the same way that the other widgets are created."
517 ]
544 ]
518 },
545 },
519 {
546 {
520 "cell_type": "code",
547 "cell_type": "code",
521 "collapsed": false,
548 "collapsed": false,
522 "input": [
549 "input": [
523 "my_widget = DateWidget()\n",
550 "my_widget = DateWidget()\n",
524 "display(my_widget)"
551 "display(my_widget)"
525 ],
552 ],
526 "language": "python",
553 "language": "python",
527 "metadata": {},
554 "metadata": {},
528 "outputs": [],
555 "outputs": [],
529 "prompt_number": 10
556 "prompt_number": 10
530 },
557 },
531 {
558 {
532 "cell_type": "markdown",
559 "cell_type": "markdown",
533 "metadata": {},
560 "metadata": {},
534 "source": [
561 "source": [
535 "Display the widget again to make sure that both views remain in sync."
562 "Display the widget again to make sure that both views remain in sync."
536 ]
563 ]
537 },
564 },
538 {
565 {
539 "cell_type": "code",
566 "cell_type": "code",
540 "collapsed": false,
567 "collapsed": false,
541 "input": [
568 "input": [
542 "my_widget"
569 "my_widget"
543 ],
570 ],
544 "language": "python",
571 "language": "python",
545 "metadata": {},
572 "metadata": {},
546 "outputs": [],
573 "outputs": [],
547 "prompt_number": 11
574 "prompt_number": 11
548 },
575 },
549 {
576 {
550 "cell_type": "markdown",
577 "cell_type": "markdown",
551 "metadata": {},
578 "metadata": {},
552 "source": [
579 "source": [
553 "Read the date from Python"
580 "Read the date from Python"
554 ]
581 ]
555 },
582 },
556 {
583 {
557 "cell_type": "code",
584 "cell_type": "code",
558 "collapsed": false,
585 "collapsed": false,
559 "input": [
586 "input": [
560 "my_widget.value"
587 "my_widget.value"
561 ],
588 ],
562 "language": "python",
589 "language": "python",
563 "metadata": {},
590 "metadata": {},
564 "outputs": [
591 "outputs": [
565 {
592 {
566 "metadata": {},
593 "metadata": {},
567 "output_type": "pyout",
594 "output_type": "pyout",
568 "prompt_number": 12,
595 "prompt_number": 12,
569 "text": [
596 "text": [
570 "u'2014-01-01'"
597 "u''"
571 ]
598 ]
572 }
599 }
573 ],
600 ],
574 "prompt_number": 12
601 "prompt_number": 12
575 },
602 },
576 {
603 {
577 "cell_type": "markdown",
604 "cell_type": "markdown",
578 "metadata": {},
605 "metadata": {},
579 "source": [
606 "source": [
580 "Set the date from Python"
607 "Set the date from Python"
581 ]
608 ]
582 },
609 },
583 {
610 {
584 "cell_type": "code",
611 "cell_type": "code",
585 "collapsed": false,
612 "collapsed": false,
586 "input": [
613 "input": [
587 "my_widget.value = \"1998-12-01\" # December 1st, 1999"
614 "my_widget.value = \"1998-12-01\" # December 1st, 1998"
588 ],
615 ],
589 "language": "python",
616 "language": "python",
590 "metadata": {},
617 "metadata": {},
591 "outputs": [],
618 "outputs": [],
592 "prompt_number": 13
619 "prompt_number": 13
593 },
620 },
594 {
621 {
595 "cell_type": "heading",
622 "cell_type": "heading",
596 "level": 1,
623 "level": 1,
597 "metadata": {},
624 "metadata": {},
598 "source": [
625 "source": [
599 "Section 3 - Extra credit"
626 "Section 3 - Extra credit"
600 ]
627 ]
601 },
628 },
602 {
629 {
603 "cell_type": "markdown",
630 "cell_type": "markdown",
604 "metadata": {},
631 "metadata": {},
605 "source": [
632 "source": [
606 "The 3rd party `dateutil` library is required to continue. https://pypi.python.org/pypi/python-dateutil"
633 "The 3rd party `dateutil` library is required to continue. https://pypi.python.org/pypi/python-dateutil"
607 ]
634 ]
608 },
635 },
609 {
636 {
610 "cell_type": "code",
637 "cell_type": "code",
611 "collapsed": false,
638 "collapsed": false,
612 "input": [
639 "input": [
613 "# Import the dateutil library to parse date strings.\n",
640 "# Import the dateutil library to parse date strings.\n",
614 "from dateutil import parser"
641 "from dateutil import parser"
615 ],
642 ],
616 "language": "python",
643 "language": "python",
617 "metadata": {},
644 "metadata": {},
618 "outputs": [],
645 "outputs": [],
619 "prompt_number": 14
646 "prompt_number": 14
620 },
647 },
621 {
648 {
622 "cell_type": "markdown",
649 "cell_type": "markdown",
623 "metadata": {},
650 "metadata": {},
624 "source": [
651 "source": [
625 "In the last section we created a fully working date picker widget. Now we will add custom validation and support for labels. Currently only the ISO date format \"YYYY-MM-DD\" is supported. We will add support for all of the date formats recognized by the 3rd party Python dateutil library."
652 "In the last section we created a fully working date picker widget.\n",
653 "Now we will add custom validation and support for labels.\n",
654 "So far, only the ISO date format \"YYYY-MM-DD\" is supported.\n",
655 "Now, we will add support for all of the date formats recognized by the Python dateutil library."
626 ]
656 ]
627 },
657 },
628 {
658 {
629 "cell_type": "heading",
659 "cell_type": "heading",
630 "level": 2,
660 "level": 2,
631 "metadata": {},
661 "metadata": {},
632 "source": [
662 "source": [
633 "Python"
663 "Python"
634 ]
664 ]
635 },
665 },
636 {
666 {
637 "cell_type": "markdown",
667 "cell_type": "markdown",
638 "metadata": {},
668 "metadata": {},
639 "source": [
669 "source": [
640 "The standard property name used for widget labels is `description`. In the code block below, `description` has been added to the Python widget."
670 "The standard property name used for widget labels is `description`.\n",
671 "In the code block below, `description` has been added to the Python widget."
641 ]
672 ]
642 },
673 },
643 {
674 {
644 "cell_type": "code",
675 "cell_type": "code",
645 "collapsed": false,
676 "collapsed": false,
646 "input": [
677 "input": [
647 "class DateWidget(widgets.DOMWidget):\n",
678 "class DateWidget(widgets.DOMWidget):\n",
648 " _view_name = Unicode('DatePickerView', sync=True)\n",
679 " _view_name = Unicode('DatePickerView', sync=True)\n",
649 " value = Unicode(sync=True)\n",
680 " value = Unicode(sync=True)\n",
650 " description = Unicode(sync=True)"
681 " description = Unicode(sync=True)"
651 ],
682 ],
652 "language": "python",
683 "language": "python",
653 "metadata": {},
684 "metadata": {},
654 "outputs": [],
685 "outputs": [],
655 "prompt_number": 15
686 "prompt_number": 15
656 },
687 },
657 {
688 {
658 "cell_type": "markdown",
689 "cell_type": "markdown",
659 "metadata": {},
690 "metadata": {},
660 "source": [
691 "source": [
661 "The traitlet machinery searches the class that the trait is defined in for methods with \"`_changed`\" suffixed onto their names. Any method with the format \"`X_changed`\" will be called when \"`X`\" is modified. We can take advantage of this to perform validation and parsing of different date string formats. Below a method that listens to value has been added to the DateWidget."
692 "The traitlet machinery searches the class that the trait is defined in for methods with \"`_changed`\" suffixed onto their names. Any method with the format \"`_X_changed`\" will be called when \"`X`\" is modified.\n",
693 "We can take advantage of this to perform validation and parsing of different date string formats.\n",
694 "Below, a method that listens to value has been added to the DateWidget."
662 ]
695 ]
663 },
696 },
664 {
697 {
665 "cell_type": "code",
698 "cell_type": "code",
666 "collapsed": false,
699 "collapsed": false,
667 "input": [
700 "input": [
668 "class DateWidget(widgets.DOMWidget):\n",
701 "class DateWidget(widgets.DOMWidget):\n",
669 " _view_name = Unicode('DatePickerView', sync=True)\n",
702 " _view_name = Unicode('DatePickerView', sync=True)\n",
670 " value = Unicode(sync=True)\n",
703 " value = Unicode(sync=True)\n",
671 " description = Unicode(sync=True)\n",
704 " description = Unicode(sync=True)\n",
672 "\n",
705 "\n",
673 " # This function automatically gets called by the traitlet machinery when\n",
706 " # This function automatically gets called by the traitlet machinery when\n",
674 " # value is modified because of this function's name.\n",
707 " # value is modified because of this function's name.\n",
675 " def _value_changed(self, name, old_value, new_value):\n",
708 " def _value_changed(self, name, old_value, new_value):\n",
676 " pass"
709 " pass"
677 ],
710 ],
678 "language": "python",
711 "language": "python",
679 "metadata": {},
712 "metadata": {},
680 "outputs": [],
713 "outputs": [],
681 "prompt_number": 16
714 "prompt_number": 16
682 },
715 },
683 {
716 {
684 "cell_type": "markdown",
717 "cell_type": "markdown",
685 "metadata": {},
718 "metadata": {},
686 "source": [
719 "source": [
687 "Now the function that parses the date string and only sets it in the correct format can be added."
720 "Now the function parses the date string,\n",
721 "and only sets the value in the correct format."
688 ]
722 ]
689 },
723 },
690 {
724 {
691 "cell_type": "code",
725 "cell_type": "code",
692 "collapsed": false,
726 "collapsed": false,
693 "input": [
727 "input": [
694 "class DateWidget(widgets.DOMWidget):\n",
728 "class DateWidget(widgets.DOMWidget):\n",
695 " _view_name = Unicode('DatePickerView', sync=True)\n",
729 " _view_name = Unicode('DatePickerView', sync=True)\n",
696 " value = Unicode(sync=True)\n",
730 " value = Unicode(sync=True)\n",
697 " description = Unicode(sync=True)\n",
731 " description = Unicode(sync=True)\n",
698 " \n",
732 " \n",
699 " # This function automatically gets called by the traitlet machinery when\n",
733 " # This function automatically gets called by the traitlet machinery when\n",
700 " # value is modified because of this function's name.\n",
734 " # value is modified because of this function's name.\n",
701 " def _value_changed(self, name, old_value, new_value):\n",
735 " def _value_changed(self, name, old_value, new_value):\n",
702 " \n",
736 " \n",
703 " # Parse the date time value.\n",
737 " # Parse the date time value.\n",
704 " try:\n",
738 " try:\n",
705 " parsed_date = parser.parse(new_value)\n",
739 " parsed_date = parser.parse(new_value)\n",
706 " parsed_date_string = parsed_date.strftime(\"%Y-%m-%d\")\n",
740 " parsed_date_string = parsed_date.strftime(\"%Y-%m-%d\")\n",
707 " except:\n",
741 " except:\n",
708 " parsed_date_string = ''\n",
742 " parsed_date_string = ''\n",
709 " \n",
743 " \n",
710 " # Set the parsed date string if the current date string is different.\n",
744 " # Set the parsed date string if the current date string is different.\n",
711 " if self.value != parsed_date_string:\n",
745 " if self.value != parsed_date_string:\n",
712 " self.value = parsed_date_string"
746 " self.value = parsed_date_string"
713 ],
747 ],
714 "language": "python",
748 "language": "python",
715 "metadata": {},
749 "metadata": {},
716 "outputs": [],
750 "outputs": [],
717 "prompt_number": 17
751 "prompt_number": 17
718 },
752 },
719 {
753 {
720 "cell_type": "markdown",
754 "cell_type": "markdown",
721 "metadata": {},
755 "metadata": {},
722 "source": [
756 "source": [
723 "Finally, a `CallbackDispatcher` is added so the user can perform custom validation. If any one of the callbacks registered with the dispatcher returns False, the new date time is not set.\n",
757 "Finally, a `CallbackDispatcher` is added so the user can perform custom validation.\n",
758 "If any one of the callbacks registered with the dispatcher returns False,\n",
759 "the new date is not set.\n",
724 "\n",
760 "\n",
725 "**Final Python code below:**"
761 "**Final Python code below:**"
726 ]
762 ]
727 },
763 },
728 {
764 {
729 "cell_type": "code",
765 "cell_type": "code",
730 "collapsed": false,
766 "collapsed": false,
731 "input": [
767 "input": [
732 "class DateWidget(widgets.DOMWidget):\n",
768 "class DateWidget(widgets.DOMWidget):\n",
733 " _view_name = Unicode('DatePickerView', sync=True)\n",
769 " _view_name = Unicode('DatePickerView', sync=True)\n",
734 " value = Unicode(sync=True)\n",
770 " value = Unicode(sync=True)\n",
735 " description = Unicode(sync=True)\n",
771 " description = Unicode(sync=True)\n",
736 " \n",
772 " \n",
737 " def __init__(self, **kwargs):\n",
773 " def __init__(self, **kwargs):\n",
738 " super(DateWidget, self).__init__(**kwargs)\n",
774 " super(DateWidget, self).__init__(**kwargs)\n",
739 " \n",
775 " \n",
740 " # Specify the number of positional arguments supported. For \n",
776 " self.validate = widgets.CallbackDispatcher()\n",
741 " # validation we only are worried about one parameter, the\n",
742 " # new value that should be validated.\n",
743 " self.validation = widgets.CallbackDispatcher(acceptable_nargs=[1])\n",
744 " \n",
777 " \n",
745 " # This function automatically gets called by the traitlet machinery when\n",
778 " # This function automatically gets called by the traitlet machinery when\n",
746 " # value is modified because of this function's name.\n",
779 " # value is modified because of this function's name.\n",
747 " def _value_changed(self, name, old_value, new_value):\n",
780 " def _value_changed(self, name, old_value, new_value):\n",
748 " \n",
781 " \n",
749 " # Parse the date time value.\n",
782 " # Parse the date time value.\n",
750 " try:\n",
783 " try:\n",
751 " parsed_date = parser.parse(new_value)\n",
784 " parsed_date = parser.parse(new_value)\n",
752 " parsed_date_string = parsed_date.strftime(\"%Y-%m-%d\")\n",
785 " parsed_date_string = parsed_date.strftime(\"%Y-%m-%d\")\n",
753 " except:\n",
786 " except:\n",
754 " parsed_date_string = ''\n",
787 " parsed_date_string = ''\n",
755 " \n",
788 " \n",
756 " # Set the parsed date string if the current date string is different.\n",
789 " # Set the parsed date string if the current date string is different.\n",
757 " if old_value != new_value:\n",
790 " if old_value != new_value:\n",
758 " validation = self.validation(parsed_date)\n",
791 " valid = self.validate(parsed_date)\n",
759 " if validation is None or validation == True:\n",
792 " if valid in (None, True):\n",
760 " self.value = parsed_date_string\n",
793 " self.value = parsed_date_string\n",
761 " else:\n",
794 " else:\n",
762 " self.value = old_value\n",
795 " self.value = old_value\n",
763 " self.send_state() # The traitlet event won't fire since the value isn't changing.\n",
796 " self.send_state() # The traitlet event won't fire since the value isn't changing.\n",
764 " # We need to force the back-end to send the front-end the state\n",
797 " # We need to force the back-end to send the front-end the state\n",
765 " # to make sure that the date control date doesn't change."
798 " # to make sure that the date control date doesn't change."
766 ],
799 ],
767 "language": "python",
800 "language": "python",
768 "metadata": {},
801 "metadata": {},
769 "outputs": [],
802 "outputs": [],
770 "prompt_number": 18
803 "prompt_number": 18
771 },
804 },
772 {
805 {
773 "cell_type": "heading",
806 "cell_type": "heading",
774 "level": 2,
807 "level": 2,
775 "metadata": {},
808 "metadata": {},
776 "source": [
809 "source": [
777 "JavaScript"
810 "JavaScript"
778 ]
811 ]
779 },
812 },
780 {
813 {
781 "cell_type": "markdown",
814 "cell_type": "markdown",
782 "metadata": {},
815 "metadata": {},
783 "source": [
816 "source": [
784 "Using the Javascript code from the last section, we add a label to the date time object. The label is a div with the `widget-hlabel` class applied to it. The `widget-hlabel` is a class provided by the widget framework that applies special styling to a div to make it look like the rest of the horizontal labels used with the built in widgets. Similar to the `widget-hlabel` class is the `widget-hbox-single` class. The `widget-hbox-single` class applies special styling to widget containers that store a single line horizontal widget. \n",
817 "Using the Javascript code from the last section,\n",
818 "we add a label to the date time object.\n",
819 "The label is a div with the `widget-hlabel` class applied to it.\n",
820 "`widget-hlabel` is a class provided by the widget framework that applies special styling to a div to make it look like the rest of the horizontal labels used with the built-in widgets.\n",
821 "Similar to the `widget-hlabel` class is the `widget-hbox-single` class.\n",
822 "The `widget-hbox-single` class applies special styling to widget containers that store a single line horizontal widget.\n",
785 "\n",
823 "\n",
786 "We hide the label if the description value is blank."
824 "We hide the label if the description value is blank."
787 ]
825 ]
788 },
826 },
789 {
827 {
790 "cell_type": "code",
828 "cell_type": "code",
791 "collapsed": false,
829 "collapsed": false,
792 "input": [
830 "input": [
793 "%%javascript\n",
831 "%%javascript\n",
794 "\n",
832 "\n",
795 "\n",
796 "require([\"notebook/js/widgets/widget\"], function(WidgetManager){\n",
833 "require([\"notebook/js/widgets/widget\"], function(WidgetManager){\n",
797 " \n",
834 " \n",
798 " // Define the DatePickerView\n",
835 " // Define the DatePickerView\n",
799 " var DatePickerView = IPython.DOMWidgetView.extend({\n",
836 " var DatePickerView = IPython.DOMWidgetView.extend({\n",
800 " render: function(){\n",
837 " render: function(){\n",
801 " this.$el.addClass('widget-hbox-single'); /* Apply this class to the widget container to make\n",
838 " this.$el.addClass('widget-hbox-single'); /* Apply this class to the widget container to make\n",
802 " it fit with the other built in widgets.*/\n",
839 " it fit with the other built in widgets.*/\n",
803 " // Create a label.\n",
840 " // Create a label.\n",
804 " this.$label = $('<div />')\n",
841 " this.$label = $('<div />')\n",
805 " .addClass('widget-hlabel')\n",
842 " .addClass('widget-hlabel')\n",
806 " .appendTo(this.$el)\n",
843 " .appendTo(this.$el)\n",
807 " .hide(); // Hide the label by default.\n",
844 " .hide(); // Hide the label by default.\n",
808 " \n",
845 " \n",
809 " // Create the date picker control.\n",
846 " // Create the date picker control.\n",
810 " this.$date = $('<input />')\n",
847 " this.$date = $('<input />')\n",
811 " .attr('type', 'date')\n",
848 " .attr('type', 'date')\n",
812 " .appendTo(this.$el);\n",
849 " .appendTo(this.$el);\n",
813 " },\n",
850 " },\n",
814 " \n",
851 " \n",
815 " update: function() {\n",
852 " update: function() {\n",
816 " \n",
853 " \n",
817 " // Set the value of the date control and then call base.\n",
854 " // Set the value of the date control and then call base.\n",
818 " this.$date.val(this.model.get('value')); // ISO format \"YYYY-MM-DDTHH:mm:ss.sssZ\" is required\n",
855 " this.$date.val(this.model.get('value')); // ISO format \"YYYY-MM-DDTHH:mm:ss.sssZ\" is required\n",
819 " \n",
856 " \n",
820 " // Hide or show the label depending on the existance of a description.\n",
857 " // Hide or show the label depending on the existance of a description.\n",
821 " var description = this.model.get('description');\n",
858 " var description = this.model.get('description');\n",
822 " if (description == undefined || description == '') {\n",
859 " if (description == undefined || description == '') {\n",
823 " this.$label.hide();\n",
860 " this.$label.hide();\n",
824 " } else {\n",
861 " } else {\n",
825 " this.$label.show();\n",
862 " this.$label.show();\n",
826 " this.$label.text(description);\n",
863 " this.$label.text(description);\n",
827 " }\n",
864 " }\n",
828 " \n",
865 " \n",
829 " return DatePickerView.__super__.update.apply(this);\n",
866 " return DatePickerView.__super__.update.apply(this);\n",
830 " },\n",
867 " },\n",
831 " \n",
868 " \n",
832 " // Tell Backbone to listen to the change event of input controls (which the HTML date picker is)\n",
869 " // Tell Backbone to listen to the change event of input controls (which the HTML date picker is)\n",
833 " events: {\"change\": \"handle_date_change\"},\n",
870 " events: {\"change\": \"handle_date_change\"},\n",
834 " \n",
871 " \n",
835 " // Callback for when the date is changed.\n",
872 " // Callback for when the date is changed.\n",
836 " handle_date_change: function(event) {\n",
873 " handle_date_change: function(event) {\n",
837 " this.model.set('value', this.$date.val());\n",
874 " this.model.set('value', this.$date.val());\n",
838 " this.touch();\n",
875 " this.touch();\n",
839 " },\n",
876 " },\n",
840 " });\n",
877 " });\n",
841 " \n",
878 " \n",
842 " // Register the DatePickerView with the widget manager.\n",
879 " // Register the DatePickerView with the widget manager.\n",
843 " WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
880 " WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
844 "});"
881 "});"
845 ],
882 ],
846 "language": "python",
883 "language": "python",
847 "metadata": {},
884 "metadata": {},
848 "outputs": [
885 "outputs": [
849 {
886 {
850 "javascript": [
887 "javascript": [
851 "\n",
888 "\n",
852 "\n",
853 "require([\"notebook/js/widgets/widget\"], function(WidgetManager){\n",
889 "require([\"notebook/js/widgets/widget\"], function(WidgetManager){\n",
854 " \n",
890 " \n",
855 " // Define the DatePickerView\n",
891 " // Define the DatePickerView\n",
856 " var DatePickerView = IPython.DOMWidgetView.extend({\n",
892 " var DatePickerView = IPython.DOMWidgetView.extend({\n",
857 " render: function(){\n",
893 " render: function(){\n",
858 " this.$el.addClass('widget-hbox-single'); /* Apply this class to the widget container to make\n",
894 " this.$el.addClass('widget-hbox-single'); /* Apply this class to the widget container to make\n",
859 " it fit with the other built in widgets.*/\n",
895 " it fit with the other built in widgets.*/\n",
860 " // Create a label.\n",
896 " // Create a label.\n",
861 " this.$label = $('<div />')\n",
897 " this.$label = $('<div />')\n",
862 " .addClass('widget-hlabel')\n",
898 " .addClass('widget-hlabel')\n",
863 " .appendTo(this.$el)\n",
899 " .appendTo(this.$el)\n",
864 " .hide(); // Hide the label by default.\n",
900 " .hide(); // Hide the label by default.\n",
865 " \n",
901 " \n",
866 " // Create the date picker control.\n",
902 " // Create the date picker control.\n",
867 " this.$date = $('<input />')\n",
903 " this.$date = $('<input />')\n",
868 " .attr('type', 'date')\n",
904 " .attr('type', 'date')\n",
869 " .appendTo(this.$el);\n",
905 " .appendTo(this.$el);\n",
870 " },\n",
906 " },\n",
871 " \n",
907 " \n",
872 " update: function() {\n",
908 " update: function() {\n",
873 " \n",
909 " \n",
874 " // Set the value of the date control and then call base.\n",
910 " // Set the value of the date control and then call base.\n",
875 " this.$date.val(this.model.get('value')); // ISO format \"YYYY-MM-DDTHH:mm:ss.sssZ\" is required\n",
911 " this.$date.val(this.model.get('value')); // ISO format \"YYYY-MM-DDTHH:mm:ss.sssZ\" is required\n",
876 " \n",
912 " \n",
877 " // Hide or show the label depending on the existance of a description.\n",
913 " // Hide or show the label depending on the existance of a description.\n",
878 " var description = this.model.get('description');\n",
914 " var description = this.model.get('description');\n",
879 " if (description == undefined || description == '') {\n",
915 " if (description == undefined || description == '') {\n",
880 " this.$label.hide();\n",
916 " this.$label.hide();\n",
881 " } else {\n",
917 " } else {\n",
882 " this.$label.show();\n",
918 " this.$label.show();\n",
883 " this.$label.text(description);\n",
919 " this.$label.text(description);\n",
884 " }\n",
920 " }\n",
885 " \n",
921 " \n",
886 " return DatePickerView.__super__.update.apply(this);\n",
922 " return DatePickerView.__super__.update.apply(this);\n",
887 " },\n",
923 " },\n",
888 " \n",
924 " \n",
889 " // Tell Backbone to listen to the change event of input controls (which the HTML date picker is)\n",
925 " // Tell Backbone to listen to the change event of input controls (which the HTML date picker is)\n",
890 " events: {\"change\": \"handle_date_change\"},\n",
926 " events: {\"change\": \"handle_date_change\"},\n",
891 " \n",
927 " \n",
892 " // Callback for when the date is changed.\n",
928 " // Callback for when the date is changed.\n",
893 " handle_date_change: function(event) {\n",
929 " handle_date_change: function(event) {\n",
894 " this.model.set('value', this.$date.val());\n",
930 " this.model.set('value', this.$date.val());\n",
895 " this.touch();\n",
931 " this.touch();\n",
896 " },\n",
932 " },\n",
897 " });\n",
933 " });\n",
898 " \n",
934 " \n",
899 " // Register the DatePickerView with the widget manager.\n",
935 " // Register the DatePickerView with the widget manager.\n",
900 " WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
936 " WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
901 "});"
937 "});"
902 ],
938 ],
903 "metadata": {},
939 "metadata": {},
904 "output_type": "display_data",
940 "output_type": "display_data",
905 "text": [
941 "text": [
906 "<IPython.core.display.Javascript at 0x2a5a6d0>"
942 "<IPython.core.display.Javascript at 0x1094eef90>"
907 ]
943 ]
908 }
944 }
909 ],
945 ],
910 "prompt_number": 19
946 "prompt_number": 19
911 },
947 },
912 {
948 {
913 "cell_type": "heading",
949 "cell_type": "heading",
914 "level": 2,
950 "level": 2,
915 "metadata": {},
951 "metadata": {},
916 "source": [
952 "source": [
917 "Test"
953 "Test"
918 ]
954 ]
919 },
955 },
920 {
956 {
921 "cell_type": "markdown",
957 "cell_type": "markdown",
922 "metadata": {},
958 "metadata": {},
923 "source": [
959 "source": [
924 "To test the drawing of the label we create the widget like normal but supply the additional description property a value."
960 "To test the drawing of the label we create the widget like normal but supply the additional description property a value."
925 ]
961 ]
926 },
962 },
927 {
963 {
928 "cell_type": "code",
964 "cell_type": "code",
929 "collapsed": false,
965 "collapsed": false,
930 "input": [
966 "input": [
931 "# Add some additional widgets for aesthetic purpose\n",
967 "# Add some additional widgets for aesthetic purpose\n",
932 "display(widgets.TextBoxWidget(description=\"First:\"))\n",
968 "display(widgets.TextBoxWidget(description=\"First:\"))\n",
933 "display(widgets.TextBoxWidget(description=\"Last:\"))\n",
969 "display(widgets.TextBoxWidget(description=\"Last:\"))\n",
934 "\n",
970 "\n",
935 "my_widget = DateWidget()\n",
971 "my_widget = DateWidget()\n",
936 "display(my_widget)\n",
972 "display(my_widget)\n",
937 "my_widget.description=\"DOB:\""
973 "my_widget.description=\"DOB:\""
938 ],
974 ],
939 "language": "python",
975 "language": "python",
940 "metadata": {},
976 "metadata": {},
941 "outputs": [],
977 "outputs": [],
942 "prompt_number": 20
978 "prompt_number": 20
943 },
979 },
944 {
980 {
945 "cell_type": "markdown",
981 "cell_type": "markdown",
946 "metadata": {},
982 "metadata": {},
947 "source": [
983 "source": [
948 "Now we will try to create a widget that only accepts dates in the year 2014. We render the widget without a description to verify that it can still render without a label."
984 "Now we will try to create a widget that only accepts dates in the year 2014. We render the widget without a description to verify that it can still render without a label."
949 ]
985 ]
950 },
986 },
951 {
987 {
952 "cell_type": "code",
988 "cell_type": "code",
953 "collapsed": false,
989 "collapsed": false,
954 "input": [
990 "input": [
955 "my_widget = DateWidget()\n",
991 "my_widget = DateWidget()\n",
956 "display(my_widget)\n",
992 "display(my_widget)\n",
957 "\n",
993 "\n",
958 "def validate_date(date):\n",
994 "def require_2014(date):\n",
959 " return not date is None and date.year == 2014\n",
995 " return not date is None and date.year == 2014\n",
960 "my_widget.validation.register_callback(validate_date)"
996 "my_widget.validate.register_callback(require_2014)"
961 ],
997 ],
962 "language": "python",
998 "language": "python",
963 "metadata": {},
999 "metadata": {},
964 "outputs": [],
1000 "outputs": [],
965 "prompt_number": 21
1001 "prompt_number": 21
966 },
1002 },
967 {
1003 {
968 "cell_type": "code",
1004 "cell_type": "code",
969 "collapsed": false,
1005 "collapsed": false,
970 "input": [
1006 "input": [
971 "# Try setting a valid date\n",
1007 "# Try setting a valid date\n",
972 "my_widget.value = \"December 2, 2014\""
1008 "my_widget.value = \"December 2, 2014\""
973 ],
1009 ],
974 "language": "python",
1010 "language": "python",
975 "metadata": {},
1011 "metadata": {},
976 "outputs": [],
1012 "outputs": [],
977 "prompt_number": 22
1013 "prompt_number": 22
978 },
1014 },
979 {
1015 {
980 "cell_type": "code",
1016 "cell_type": "code",
981 "collapsed": false,
1017 "collapsed": false,
982 "input": [
1018 "input": [
983 "# Try setting an invalid date\n",
1019 "# Try setting an invalid date\n",
984 "my_widget.value = \"June 12, 1999\""
1020 "my_widget.value = \"June 12, 1999\""
985 ],
1021 ],
986 "language": "python",
1022 "language": "python",
987 "metadata": {},
1023 "metadata": {},
988 "outputs": [],
1024 "outputs": [],
989 "prompt_number": 23
1025 "prompt_number": 23
990 },
1026 },
991 {
1027 {
992 "cell_type": "code",
1028 "cell_type": "code",
993 "collapsed": false,
1029 "collapsed": false,
994 "input": [
1030 "input": [
995 "my_widget.value"
1031 "my_widget.value"
996 ],
1032 ],
997 "language": "python",
1033 "language": "python",
998 "metadata": {},
1034 "metadata": {},
999 "outputs": [
1035 "outputs": [
1000 {
1036 {
1001 "metadata": {},
1037 "metadata": {},
1002 "output_type": "pyout",
1038 "output_type": "pyout",
1003 "prompt_number": 24,
1039 "prompt_number": 24,
1004 "text": [
1040 "text": [
1005 "u'2014-12-02'"
1041 "u'2014-12-02'"
1006 ]
1042 ]
1007 }
1043 }
1008 ],
1044 ],
1009 "prompt_number": 24
1045 "prompt_number": 24
1010 },
1046 },
1011 {
1047 {
1012 "cell_type": "markdown",
1048 "cell_type": "markdown",
1013 "metadata": {},
1049 "metadata": {},
1014 "source": [
1050 "source": [
1015 "This concludes Part 6 of the [series](index.ipynb)."
1051 "This concludes Part 6 of the [series](index.ipynb)."
1016 ]
1052 ]
1017 }
1053 }
1018 ],
1054 ],
1019 "metadata": {}
1055 "metadata": {}
1020 }
1056 }
1021 ]
1057 ]
1022 } No newline at end of file
1058 }
@@ -1,570 +1,203 b''
1 {
1 {
2 "metadata": {
2 "metadata": {
3 "name": ""
3 "name": ""
4 },
4 },
5 "nbformat": 3,
5 "nbformat": 3,
6 "nbformat_minor": 0,
6 "nbformat_minor": 0,
7 "worksheets": [
7 "worksheets": [
8 {
8 {
9 "cells": [
9 "cells": [
10 {
10 {
11 "cell_type": "heading",
11 "cell_type": "heading",
12 "level": 1,
12 "level": 1,
13 "metadata": {},
13 "metadata": {},
14 "source": [
14 "source": [
15 "Variable Inspector Widget"
15 "Variable Inspector Widget"
16 ]
16 ]
17 },
17 },
18 {
18 {
19 "cell_type": "heading",
19 "cell_type": "heading",
20 "level": 2,
20 "level": 2,
21 "metadata": {},
21 "metadata": {},
22 "source": [
22 "source": [
23 "A short example implementation."
23 "A short example implementation"
24 ]
24 ]
25 },
25 },
26 {
26 {
27 "cell_type": "markdown",
27 "cell_type": "markdown",
28 "metadata": {},
28 "metadata": {},
29 "source": [
29 "source": [
30 "This notebook demonstrates how one can use the widgets already built-in to IPython to create a working variable inspector much like the ones seen in popular commercial scientific computing environments."
30 "This notebook demonstrates how one can use the widgets already built-in to IPython to create a working variable inspector much like the ones seen in popular commercial scientific computing environments."
31 ]
31 ]
32 },
32 },
33 {
33 {
34 "cell_type": "code",
34 "cell_type": "code",
35 "collapsed": false,
35 "collapsed": false,
36 "input": [
36 "input": [
37 "from IPython.html import widgets # Loads the Widget framework.\n",
38 "from IPython.core.magics.namespace import NamespaceMagics # Used to query namespace.\n",
39 "\n",
40 "# For this example, hide these names, just to avoid polluting the namespace further\n",
41 "get_ipython().user_ns_hidden['widgets'] = widgets\n",
42 "get_ipython().user_ns_hidden['NamespaceMagics'] = NamespaceMagics"
43 ],
44 "language": "python",
45 "metadata": {},
46 "outputs": [],
47 "prompt_number": 1
48 },
49 {
50 "cell_type": "code",
51 "collapsed": false,
52 "input": [
37 "class VariableInspectorWindow(object):\n",
53 "class VariableInspectorWindow(object):\n",
38 " \n",
39 " # For this example file, the import sit inside the class, just to avoid poluting \n",
40 " # the namespace further.\n",
41 " from IPython.html import widgets # Loads the Widget framework.\n",
42 " from IPython.core.magics.namespace import NamespaceMagics # Used to query namespace.\n",
43 " \n",
44 " instance = None\n",
54 " instance = None\n",
45 " \n",
55 " \n",
46 " def __init__(self, ipython):\n",
56 " def __init__(self, ipython):\n",
47 " \"\"\"Public constructor.\"\"\"\n",
57 " \"\"\"Public constructor.\"\"\"\n",
48 " if VariableInspectorWindow.instance is not None:\n",
58 " if VariableInspectorWindow.instance is not None:\n",
49 " raise Exception(\"\"\"Only one instance of the Variable Inspector can exist at a \n",
59 " raise Exception(\"\"\"Only one instance of the Variable Inspector can exist at a \n",
50 " time. Call close() on the active instance before creating a new instance.\n",
60 " time. Call close() on the active instance before creating a new instance.\n",
51 " If you have lost the handle to the active instance, you can re-obtain it\n",
61 " If you have lost the handle to the active instance, you can re-obtain it\n",
52 " via `VariableInspectorWindow.instance`.\"\"\")\n",
62 " via `VariableInspectorWindow.instance`.\"\"\")\n",
53 " \n",
63 " \n",
54 " VariableInspectorWindow.instance = self\n",
64 " VariableInspectorWindow.instance = self\n",
55 " self.closed = False\n",
65 " self.closed = False\n",
56 " self.namespace = self.NamespaceMagics()\n",
66 " self.namespace = NamespaceMagics()\n",
57 " self.namespace.shell = ipython.kernel.shell\n",
67 " self.namespace.shell = ipython.kernel.shell\n",
58 " \n",
68 " \n",
59 " self._popout = self.widgets.PopupWidget()\n",
69 " self._popout = widgets.PopupWidget()\n",
60 " self._popout.description = \"Variable Inspector\"\n",
70 " self._popout.description = \"Variable Inspector\"\n",
61 " self._popout.button_text = self._popout.description\n",
71 " self._popout.button_text = self._popout.description\n",
62 "\n",
72 "\n",
63 " self._modal_body = self.widgets.ContainerWidget()\n",
73 " self._modal_body = widgets.ContainerWidget()\n",
64 " self._modal_body.set_css('overflow-y', 'scroll')\n",
74 " self._modal_body.set_css('overflow-y', 'scroll')\n",
65 "\n",
75 "\n",
66 " self._modal_body_label = self.widgets.HTMLWidget(value = 'Not hooked')\n",
76 " self._modal_body_label = widgets.HTMLWidget(value = 'Not hooked')\n",
67 " self._modal_body.children = [self._modal_body_label]\n",
77 " self._modal_body.children = [self._modal_body_label]\n",
68 "\n",
78 "\n",
69 " self._modal_footer = self.widgets.ContainerWidget()\n",
79 " self._modal_footer = widgets.ContainerWidget()\n",
70 " self._var_filter = self.widgets.ToggleButtonsWidget(description=\"Method:\", values=['List', 'Details'], value='List')\n",
80 " self._var_filter = widgets.ToggleButtonsWidget(description=\"Method:\", values=['List', 'Details'], value='List')\n",
71 " self._modal_footer.children = [self._var_filter]\n",
81 " self._modal_footer.children = [self._var_filter]\n",
72 "\n",
82 "\n",
73 " self._popout.children = [\n",
83 " self._popout.children = [\n",
74 " self._modal_body, \n",
84 " self._modal_body, \n",
75 " self._modal_footer,\n",
85 " self._modal_footer,\n",
76 " ]\n",
86 " ]\n",
77 " \n",
87 " \n",
78 " self._ipython = ipython\n",
88 " self._ipython = ipython\n",
79 " self._ipython.register_post_execute(self._fill)\n",
89 " self._ipython.register_post_execute(self._fill)\n",
80 " self._var_filter.on_trait_change(self._fill, 'value')\n",
90 " self._var_filter.on_trait_change(self._fill, 'value')\n",
81 "\n",
91 "\n",
82 " def close(self):\n",
92 " def close(self):\n",
83 " \"\"\"Close and remove hooks.\"\"\"\n",
93 " \"\"\"Close and remove hooks.\"\"\"\n",
84 " if not self.closed:\n",
94 " if not self.closed:\n",
85 " del self._ipython._post_execute[self._fill]\n",
95 " del self._ipython._post_execute[self._fill]\n",
86 " self._popout.close()\n",
96 " self._popout.close()\n",
87 " self.closed = True\n",
97 " self.closed = True\n",
88 " VariableInspectorWindow.instance = None\n",
98 " VariableInspectorWindow.instance = None\n",
89 "\n",
99 "\n",
90 " def _fill(self):\n",
100 " def _fill(self):\n",
91 " \"\"\"Fill self with variable information.\"\"\"\n",
101 " \"\"\"Fill self with variable information.\"\"\"\n",
92 " values = self.namespace.who_ls()\n",
102 " values = self.namespace.who_ls()\n",
93 " mode = self._var_filter.value\n",
103 " mode = self._var_filter.value\n",
94 " if mode == \"List\":\n",
104 " if mode == \"List\":\n",
95 " self._modal_body_label.value = '<br>'.join(values)\n",
105 " self._modal_body_label.value = '<br>'.join(values)\n",
96 " elif mode == \"Details\":\n",
106 " elif mode == \"Details\":\n",
97 " self._modal_body_label.value = '<table class=\"table table-bordered table-striped\"><tr><th>Name</th><th>Type</th><th>Value</th></tr><tr><td>' + \\\n",
107 " self._modal_body_label.value = '<table class=\"table table-bordered table-striped\"><tr><th>Name</th><th>Type</th><th>Value</th></tr><tr><td>' + \\\n",
98 " '</td></tr><tr><td>'.join(['{0}</td><td>{1}</td><td>{2}'.format(v, type(eval(v)).__name__, str(eval(v))) for v in values]) + \\\n",
108 " '</td></tr><tr><td>'.join(['{0}</td><td>{1}</td><td>{2}'.format(v, type(eval(v)).__name__, str(eval(v))) for v in values]) + \\\n",
99 " '</td></tr></table>'\n",
109 " '</td></tr></table>'\n",
100 "\n",
110 "\n",
101 " def _ipython_display_(self):\n",
111 " def _ipython_display_(self):\n",
102 " \"\"\"Called when display() or pyout is used to display the Variable \n",
112 " \"\"\"Called when display() or pyout is used to display the Variable \n",
103 " Inspector.\"\"\"\n",
113 " Inspector.\"\"\"\n",
104 " self._popout._ipython_display_()\n",
114 " self._popout._ipython_display_()\n",
105 " self._modal_footer.add_class('modal-footer')\n",
115 " self._modal_footer.add_class('modal-footer')\n",
106 " self._popout.add_class('vbox')\n",
116 " self._popout.add_class('vbox')\n",
107 " self._modal_body.add_class('box-flex1')\n"
117 " self._modal_body.add_class('box-flex1')\n"
108 ],
118 ],
109 "language": "python",
119 "language": "python",
110 "metadata": {},
120 "metadata": {},
111 "outputs": [],
121 "outputs": [],
112 "prompt_number": 17
122 "prompt_number": 2
113 },
123 },
114 {
124 {
115 "cell_type": "code",
125 "cell_type": "code",
116 "collapsed": false,
126 "collapsed": false,
117 "input": [
127 "input": [
118 "inspector = VariableInspectorWindow(get_ipython())\n",
128 "inspector = VariableInspectorWindow(get_ipython())\n",
119 "inspector"
129 "inspector"
120 ],
130 ],
121 "language": "python",
131 "language": "python",
122 "metadata": {},
132 "metadata": {},
123 "outputs": [],
133 "outputs": [],
124 "prompt_number": 18
134 "prompt_number": 3
125 },
135 },
126 {
136 {
127 "cell_type": "heading",
137 "cell_type": "heading",
128 "level": 1,
138 "level": 1,
129 "metadata": {},
139 "metadata": {},
130 "source": [
140 "source": [
131 "Test"
141 "Test"
132 ]
142 ]
133 },
143 },
134 {
144 {
135 "cell_type": "code",
145 "cell_type": "code",
136 "collapsed": false,
146 "collapsed": false,
137 "input": [
147 "input": [
138 "a = 5"
148 "a = 5"
139 ],
149 ],
140 "language": "python",
150 "language": "python",
141 "metadata": {},
151 "metadata": {},
142 "outputs": [],
152 "outputs": [],
143 "prompt_number": 11
153 "prompt_number": 4
144 },
154 },
145 {
155 {
146 "cell_type": "code",
156 "cell_type": "code",
147 "collapsed": false,
157 "collapsed": false,
148 "input": [
158 "input": [
149 "b = 3.0"
159 "b = 3.0"
150 ],
160 ],
151 "language": "python",
161 "language": "python",
152 "metadata": {},
162 "metadata": {},
153 "outputs": [],
163 "outputs": [],
154 "prompt_number": 12
164 "prompt_number": 5
155 },
165 },
156 {
166 {
157 "cell_type": "code",
167 "cell_type": "code",
158 "collapsed": false,
168 "collapsed": false,
159 "input": [
169 "input": [
160 "c = a * b"
170 "c = a * b"
161 ],
171 ],
162 "language": "python",
172 "language": "python",
163 "metadata": {},
173 "metadata": {},
164 "outputs": [],
174 "outputs": [],
165 "prompt_number": 13
175 "prompt_number": 6
166 },
176 },
167 {
177 {
168 "cell_type": "code",
178 "cell_type": "code",
169 "collapsed": false,
179 "collapsed": false,
170 "input": [
180 "input": [
171 "d = \"String\""
181 "d = \"String\""
172 ],
182 ],
173 "language": "python",
183 "language": "python",
174 "metadata": {},
184 "metadata": {},
175 "outputs": [],
185 "outputs": [],
176 "prompt_number": 14
186 "prompt_number": 7
177 },
187 },
178 {
188 {
179 "cell_type": "code",
189 "cell_type": "code",
180 "collapsed": false,
190 "collapsed": false,
181 "input": [
191 "input": [
182 "del b"
192 "del b"
183 ],
193 ],
184 "language": "python",
194 "language": "python",
185 "metadata": {},
195 "metadata": {},
186 "outputs": [],
196 "outputs": [],
187 "prompt_number": 15
197 "prompt_number": 8
188 },
189 {
190 "cell_type": "code",
191 "collapsed": false,
192 "input": [
193 "?"
194 ],
195 "language": "python",
196 "metadata": {},
197 "outputs": [],
198 "prompt_number": 16
199 },
200 {
201 "cell_type": "code",
202 "collapsed": false,
203 "input": [
204 "dir()"
205 ],
206 "language": "python",
207 "metadata": {},
208 "outputs": [
209 {
210 "metadata": {},
211 "output_type": "pyout",
212 "prompt_number": 15,
213 "text": [
214 "['In',\n",
215 " 'Out',\n",
216 " 'VariableInspectorWindow',\n",
217 " '_',\n",
218 " '_10',\n",
219 " '_14',\n",
220 " '__',\n",
221 " '___',\n",
222 " '__builtin__',\n",
223 " '__builtins__',\n",
224 " '__doc__',\n",
225 " '__name__',\n",
226 " '__package__',\n",
227 " '_dh',\n",
228 " '_i',\n",
229 " '_i1',\n",
230 " '_i10',\n",
231 " '_i11',\n",
232 " '_i12',\n",
233 " '_i13',\n",
234 " '_i14',\n",
235 " '_i15',\n",
236 " '_i2',\n",
237 " '_i3',\n",
238 " '_i4',\n",
239 " '_i5',\n",
240 " '_i6',\n",
241 " '_i7',\n",
242 " '_i8',\n",
243 " '_i9',\n",
244 " '_ih',\n",
245 " '_ii',\n",
246 " '_iii',\n",
247 " '_oh',\n",
248 " '_sh',\n",
249 " 'exit',\n",
250 " 'get_ipython',\n",
251 " 'quit',\n",
252 " 'widgets']"
253 ]
254 }
255 ],
256 "prompt_number": 15
257 },
258 {
259 "cell_type": "code",
260 "collapsed": false,
261 "input": [
262 "dir(get_ipython().kernel.shell)"
263 ],
264 "language": "python",
265 "metadata": {},
266 "outputs": [
267 {
268 "metadata": {},
269 "output_type": "pyout",
270 "prompt_number": 4,
271 "text": [
272 "['Completer',\n",
273 " 'CustomTB',\n",
274 " 'InteractiveTB',\n",
275 " 'SyntaxTB',\n",
276 " '__class__',\n",
277 " '__delattr__',\n",
278 " '__dict__',\n",
279 " '__doc__',\n",
280 " '__format__',\n",
281 " '__getattribute__',\n",
282 " '__hash__',\n",
283 " '__init__',\n",
284 " '__module__',\n",
285 " '__new__',\n",
286 " '__reduce__',\n",
287 " '__reduce_ex__',\n",
288 " '__repr__',\n",
289 " '__setattr__',\n",
290 " '__sizeof__',\n",
291 " '__str__',\n",
292 " '__subclasshook__',\n",
293 " '__weakref__',\n",
294 " '_add_notifiers',\n",
295 " '_call_pdb',\n",
296 " '_config_changed',\n",
297 " '_exit_now_changed',\n",
298 " '_exiter_default',\n",
299 " '_find_my_config',\n",
300 " '_format_user_obj',\n",
301 " '_get_call_pdb',\n",
302 " '_get_exc_info',\n",
303 " '_indent_current_str',\n",
304 " '_inspect',\n",
305 " '_instance',\n",
306 " '_ipython_dir_changed',\n",
307 " '_last_input_line',\n",
308 " '_load_config',\n",
309 " '_main_mod_cache',\n",
310 " '_notify_trait',\n",
311 " '_object_find',\n",
312 " '_ofind',\n",
313 " '_ofind_property',\n",
314 " '_orig_sys_module_state',\n",
315 " '_orig_sys_modules_main_mod',\n",
316 " '_orig_sys_modules_main_name',\n",
317 " '_post_execute',\n",
318 " '_prompt_in1_changed',\n",
319 " '_prompt_in2_changed',\n",
320 " '_prompt_out_changed',\n",
321 " '_prompt_pad_left_changed',\n",
322 " '_prompt_trait_changed',\n",
323 " '_remove_notifiers',\n",
324 " '_reply_content',\n",
325 " '_run_cached_cell_magic',\n",
326 " '_set_call_pdb',\n",
327 " '_showtraceback',\n",
328 " '_trait_dyn_inits',\n",
329 " '_trait_notifiers',\n",
330 " '_trait_values',\n",
331 " '_user_obj_error',\n",
332 " '_walk_mro',\n",
333 " 'alias_manager',\n",
334 " 'all_ns_refs',\n",
335 " 'ask_exit',\n",
336 " 'ask_yes_no',\n",
337 " 'ast_node_interactivity',\n",
338 " 'ast_transformers',\n",
339 " 'atexit_operations',\n",
340 " 'auto_rewrite_input',\n",
341 " 'autocall',\n",
342 " 'autoindent',\n",
343 " 'automagic',\n",
344 " 'builtin_trap',\n",
345 " 'cache_size',\n",
346 " 'call_pdb',\n",
347 " 'class_config_section',\n",
348 " 'class_get_help',\n",
349 " 'class_get_trait_help',\n",
350 " 'class_print_help',\n",
351 " 'class_trait_names',\n",
352 " 'class_traits',\n",
353 " 'cleanup',\n",
354 " 'clear_instance',\n",
355 " 'clear_main_mod_cache',\n",
356 " 'color_info',\n",
357 " 'colors',\n",
358 " 'colors_force',\n",
359 " 'comm_manager',\n",
360 " 'compile',\n",
361 " 'complete',\n",
362 " 'config',\n",
363 " 'configurables',\n",
364 " 'custom_exceptions',\n",
365 " 'data_pub',\n",
366 " 'data_pub_class',\n",
367 " 'db',\n",
368 " 'debug',\n",
369 " 'debugger',\n",
370 " 'deep_reload',\n",
371 " 'default_user_namespaces',\n",
372 " 'define_macro',\n",
373 " 'define_magic',\n",
374 " 'del_var',\n",
375 " 'dir_stack',\n",
376 " 'disable_failing_post_execute',\n",
377 " 'display_formatter',\n",
378 " 'display_pub',\n",
379 " 'display_pub_class',\n",
380 " 'display_trap',\n",
381 " 'displayhook',\n",
382 " 'displayhook_class',\n",
383 " 'drop_by_id',\n",
384 " 'enable_gui',\n",
385 " 'enable_matplotlib',\n",
386 " 'enable_pylab',\n",
387 " 'ev',\n",
388 " 'ex',\n",
389 " 'excepthook',\n",
390 " 'execution_count',\n",
391 " 'exit_now',\n",
392 " 'exiter',\n",
393 " 'extension_manager',\n",
394 " 'extract_input_lines',\n",
395 " 'filename',\n",
396 " 'find_cell_magic',\n",
397 " 'find_line_magic',\n",
398 " 'find_magic',\n",
399 " 'find_user_code',\n",
400 " 'get_ipython',\n",
401 " 'get_parent',\n",
402 " 'getoutput',\n",
403 " 'has_readline',\n",
404 " 'history_length',\n",
405 " 'history_manager',\n",
406 " 'home_dir',\n",
407 " 'hooks',\n",
408 " 'indent_current_nsp',\n",
409 " 'init_alias',\n",
410 " 'init_builtins',\n",
411 " 'init_comms',\n",
412 " 'init_completer',\n",
413 " 'init_create_namespaces',\n",
414 " 'init_data_pub',\n",
415 " 'init_display_formatter',\n",
416 " 'init_display_pub',\n",
417 " 'init_displayhook',\n",
418 " 'init_encoding',\n",
419 " 'init_environment',\n",
420 " 'init_extension_manager',\n",
421 " 'init_history',\n",
422 " 'init_hooks',\n",
423 " 'init_inspector',\n",
424 " 'init_instance_attrs',\n",
425 " 'init_io',\n",
426 " 'init_ipython_dir',\n",
427 " 'init_latextool',\n",
428 " 'init_logger',\n",
429 " 'init_logstart',\n",
430 " 'init_magics',\n",
431 " 'init_payload',\n",
432 " 'init_pdb',\n",
433 " 'init_prefilter',\n",
434 " 'init_profile_dir',\n",
435 " 'init_prompts',\n",
436 " 'init_pushd_popd_magic',\n",
437 " 'init_readline',\n",
438 " 'init_syntax_highlighting',\n",
439 " 'init_sys_modules',\n",
440 " 'init_traceback_handlers',\n",
441 " 'init_user_ns',\n",
442 " 'init_virtualenv',\n",
443 " 'initialized',\n",
444 " 'input_splitter',\n",
445 " 'input_transformer_manager',\n",
446 " 'inspector',\n",
447 " 'instance',\n",
448 " 'ipython_dir',\n",
449 " 'keepkernel_on_exit',\n",
450 " 'kernel',\n",
451 " 'logappend',\n",
452 " 'logfile',\n",
453 " 'logger',\n",
454 " 'logstart',\n",
455 " 'magic',\n",
456 " 'magics_manager',\n",
457 " 'meta',\n",
458 " 'mktempfile',\n",
459 " 'more',\n",
460 " 'multiline_history',\n",
461 " 'new_main_mod',\n",
462 " 'ns_table',\n",
463 " 'object_info_string_level',\n",
464 " 'object_inspect',\n",
465 " 'on_trait_change',\n",
466 " 'parent',\n",
467 " 'parent_header',\n",
468 " 'payload_manager',\n",
469 " 'pdb',\n",
470 " 'pre_readline',\n",
471 " 'prefilter',\n",
472 " 'prefilter_manager',\n",
473 " 'prepare_user_module',\n",
474 " 'profile',\n",
475 " 'profile_dir',\n",
476 " 'prompt_in1',\n",
477 " 'prompt_in2',\n",
478 " 'prompt_manager',\n",
479 " 'prompt_out',\n",
480 " 'prompts_pad_left',\n",
481 " 'push',\n",
482 " 'pycolorize',\n",
483 " 'pylab_gui_select',\n",
484 " 'quiet',\n",
485 " 'raw_input_original',\n",
486 " 'readline',\n",
487 " 'readline_delims',\n",
488 " 'readline_no_record',\n",
489 " 'readline_parse_and_bind',\n",
490 " 'readline_remove_delims',\n",
491 " 'readline_use',\n",
492 " 'refill_readline_hist',\n",
493 " 'register_magic_function',\n",
494 " 'register_magics',\n",
495 " 'register_post_execute',\n",
496 " 'reset',\n",
497 " 'reset_selective',\n",
498 " 'restore_sys_module_state',\n",
499 " 'rl_do_indent',\n",
500 " 'rl_next_input',\n",
501 " 'run_ast_nodes',\n",
502 " 'run_cell',\n",
503 " 'run_cell_magic',\n",
504 " 'run_code',\n",
505 " 'run_line_magic',\n",
506 " 'runcode',\n",
507 " 'safe_execfile',\n",
508 " 'safe_execfile_ipy',\n",
509 " 'safe_run_module',\n",
510 " 'save_sys_module_state',\n",
511 " 'section_names',\n",
512 " 'separate_in',\n",
513 " 'separate_out',\n",
514 " 'separate_out2',\n",
515 " 'set_autoindent',\n",
516 " 'set_completer_frame',\n",
517 " 'set_custom_completer',\n",
518 " 'set_custom_exc',\n",
519 " 'set_hook',\n",
520 " 'set_next_input',\n",
521 " 'set_parent',\n",
522 " 'set_readline_completer',\n",
523 " 'show_rewritten_input',\n",
524 " 'show_usage',\n",
525 " 'show_usage_error',\n",
526 " 'showindentationerror',\n",
527 " 'showsyntaxerror',\n",
528 " 'showtraceback',\n",
529 " 'starting_dir',\n",
530 " 'stdin_encoding',\n",
531 " 'strdispatchers',\n",
532 " 'sys_excepthook',\n",
533 " 'system',\n",
534 " 'system_piped',\n",
535 " 'system_raw',\n",
536 " 'tempfiles',\n",
537 " 'trait_metadata',\n",
538 " 'trait_names',\n",
539 " 'traits',\n",
540 " 'transform_ast',\n",
541 " 'update_config',\n",
542 " 'user_expressions',\n",
543 " 'user_global_ns',\n",
544 " 'user_module',\n",
545 " 'user_ns',\n",
546 " 'user_ns_hidden',\n",
547 " 'user_variables',\n",
548 " 'var_expand',\n",
549 " 'wildcards_case_sensitive',\n",
550 " 'write',\n",
551 " 'write_err',\n",
552 " 'xmode']"
553 ]
554 }
555 ],
556 "prompt_number": 4
557 },
558 {
559 "cell_type": "code",
560 "collapsed": false,
561 "input": [],
562 "language": "python",
563 "metadata": {},
564 "outputs": []
565 }
198 }
566 ],
199 ],
567 "metadata": {}
200 "metadata": {}
568 }
201 }
569 ]
202 ]
570 } No newline at end of file
203 }
General Comments 0
You need to be logged in to leave comments. Login now