Widget Basics.ipynb
338 lines
| 8.8 KiB
| text/plain
|
TextLexer
|
r14323 | { | |
"metadata": { | |||
|
r14342 | "cell_tags": [ | |
[ | |||
"<None>", | |||
null | |||
] | |||
], | |||
|
r16098 | "name": "", | |
|
r16324 | "signature": "sha256:5ac3a85c8bb2f9bb3cd63b524bbb626ab1531176b43a109d13f5d7794f805eee" | |
|
r14323 | }, | |
"nbformat": 3, | |||
"nbformat_minor": 0, | |||
"worksheets": [ | |||
{ | |||
"cells": [ | |||
{ | |||
"cell_type": "markdown", | |||
"metadata": {}, | |||
"source": [ | |||
|
r14724 | "To use IPython widgets in the notebook, the widget namespace needs to be imported." | |
|
r14323 | ] | |
}, | |||
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
"from IPython.html import widgets # Widget definitions\n", | |||
|
r14342 | "from IPython.display import display # Used to display widgets in the notebook" | |
|
r14323 | ], | |
"language": "python", | |||
"metadata": {}, | |||
|
r14342 | "outputs": [], | |
|
r16324 | "prompt_number": 2 | |
|
r14323 | }, | |
{ | |||
"cell_type": "heading", | |||
"level": 1, | |||
"metadata": {}, | |||
"source": [ | |||
"Basic Widgets" | |||
] | |||
}, | |||
{ | |||
"cell_type": "markdown", | |||
"metadata": {}, | |||
"source": [ | |||
|
r14798 | "IPython comes with basic widgets that represent common interactive controls. These widgets are\n", | |
|
r14323 | "\n", | |
|
r14834 | "- CheckboxWidget\n", | |
|
r14708 | "- ToggleButtonWidget\n", | |
"- FloatSliderWidget\n", | |||
"- BoundedFloatTextWidget\n", | |||
"- FloatProgressWidget\n", | |||
"- FloatTextWidget\n", | |||
"- ImageWidget\n", | |||
"- IntSliderWidget\n", | |||
"- BoundedIntTextWidget\n", | |||
"- IntProgressWidget\n", | |||
"- IntTextWidget\n", | |||
"- ToggleButtonsWidget\n", | |||
"- RadioButtonsWidget\n", | |||
"- DropdownWidget\n", | |||
|
r14834 | "- SelectWidget\n", | |
|
r14708 | "- HTMLWidget\n", | |
"- LatexWidget\n", | |||
|
r14834 | "- TextareaWidget\n", | |
"- TextWidget\n", | |||
|
r14798 | "- ButtonWidget\n", | |
|
r14323 | "\n", | |
"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", | |||
"\n", | |||
|
r14708 | "- ContainerWidget\n", | |
"- PopupWidget\n", | |||
"- AccordionWidget\n", | |||
"- TabWidget\n", | |||
|
r14323 | "\n", | |
"To see the complete list of widgets, one can execute the following" | |||
] | |||
}, | |||
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
"[widget for widget in dir(widgets) if widget.endswith('Widget')]" | |||
], | |||
"language": "python", | |||
"metadata": {}, | |||
"outputs": [ | |||
{ | |||
"metadata": {}, | |||
"output_type": "pyout", | |||
"prompt_number": 2, | |||
"text": [ | |||
|
r14708 | "['AccordionWidget',\n", | |
" 'BoundedFloatTextWidget',\n", | |||
" 'BoundedIntTextWidget',\n", | |||
|
r14323 | " 'ButtonWidget',\n", | |
|
r14834 | " 'CheckboxWidget',\n", | |
|
r14323 | " 'ContainerWidget',\n", | |
|
r14619 | " 'DOMWidget',\n", | |
|
r14708 | " 'DropdownWidget',\n", | |
" 'FloatProgressWidget',\n", | |||
" 'FloatSliderWidget',\n", | |||
" 'FloatTextWidget',\n", | |||
" 'HTMLWidget',\n", | |||
|
r14449 | " 'ImageWidget',\n", | |
|
r14708 | " 'IntProgressWidget',\n", | |
" 'IntSliderWidget',\n", | |||
" 'IntTextWidget',\n", | |||
" 'LatexWidget',\n", | |||
" 'PopupWidget',\n", | |||
" 'RadioButtonsWidget',\n", | |||
|
r14834 | " 'SelectWidget',\n", | |
|
r14708 | " 'TabWidget',\n", | |
|
r14834 | " 'TextWidget',\n", | |
" 'TextareaWidget',\n", | |||
|
r14708 | " 'ToggleButtonWidget',\n", | |
" 'ToggleButtonsWidget',\n", | |||
|
r14323 | " 'Widget']" | |
] | |||
} | |||
], | |||
"prompt_number": 2 | |||
}, | |||
{ | |||
"cell_type": "markdown", | |||
"metadata": {}, | |||
"source": [ | |||
|
r14798 | "The basic widgets all have sensible default values. Create a *FloatSliderWidget* without displaying it:" | |
|
r14323 | ] | |
}, | |||
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
|
r14708 | "mywidget = widgets.FloatSliderWidget()" | |
|
r14323 | ], | |
"language": "python", | |||
"metadata": {}, | |||
|
r14505 | "outputs": [], | |
|
r14323 | "prompt_number": 3 | |
}, | |||
{ | |||
"cell_type": "markdown", | |||
"metadata": {}, | |||
"source": [ | |||
|
r14708 | "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" | |
|
r14323 | ] | |
}, | |||
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
"display(mywidget)" | |||
], | |||
"language": "python", | |||
"metadata": {}, | |||
"outputs": [], | |||
"prompt_number": 4 | |||
}, | |||
{ | |||
|
r14708 | "cell_type": "markdown", | |
"metadata": {}, | |||
"source": [ | |||
"or" | |||
] | |||
}, | |||
{ | |||
|
r14486 | "cell_type": "code", | |
"collapsed": false, | |||
"input": [ | |||
|
r14708 | "mywidget" | |
|
r14486 | ], | |
"language": "python", | |||
"metadata": {}, | |||
|
r14708 | "outputs": [], | |
"prompt_number": 5 | |||
|
r14486 | }, | |
{ | |||
|
r14323 | "cell_type": "markdown", | |
"metadata": {}, | |||
"source": [ | |||
"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", | |||
"\n", | |||
|
r14798 | "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." | |
|
r14323 | ] | |
}, | |||
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
"mywidget.keys" | |||
], | |||
"language": "python", | |||
"metadata": {}, | |||
"outputs": [ | |||
{ | |||
"metadata": {}, | |||
"output_type": "pyout", | |||
|
r14708 | "prompt_number": 6, | |
|
r14323 | "text": [ | |
|
r14708 | "['_view_name',\n", | |
|
r14323 | " 'orientation',\n", | |
|
r14798 | " 'min',\n", | |
|
r14708 | " 'max',\n", | |
|
r14619 | " '_css',\n", | |
|
r14708 | " 'value',\n", | |
" 'disabled',\n", | |||
" 'visible',\n", | |||
|
r14798 | " 'step',\n", | |
" 'description']" | |||
|
r14323 | ] | |
} | |||
], | |||
|
r14708 | "prompt_number": 6 | |
|
r14323 | }, | |
{ | |||
"cell_type": "markdown", | |||
"metadata": {}, | |||
"source": [ | |||
|
r14798 | "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." | |
|
r14323 | ] | |
}, | |||
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
"mywidget.value = 25.0" | |||
], | |||
"language": "python", | |||
"metadata": {}, | |||
"outputs": [], | |||
|
r14708 | "prompt_number": 7 | |
|
r14323 | }, | |
{ | |||
"cell_type": "markdown", | |||
"metadata": {}, | |||
"source": [ | |||
"After changing the widget's value in the notebook by hand to 0.0 (sliding the bar to the far left)." | |||
] | |||
}, | |||
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
"mywidget.value" | |||
], | |||
"language": "python", | |||
"metadata": {}, | |||
"outputs": [ | |||
{ | |||
"metadata": {}, | |||
"output_type": "pyout", | |||
|
r14708 | "prompt_number": 8, | |
|
r14323 | "text": [ | |
|
r14798 | "25.0" | |
|
r14323 | ] | |
} | |||
], | |||
|
r14708 | "prompt_number": 8 | |
|
r14323 | }, | |
{ | |||
"cell_type": "markdown", | |||
"metadata": {}, | |||
"source": [ | |||
|
r14798 | "Widget values can also be set with kwargs during the construction of the widget (as seen below)." | |
|
r14323 | ] | |
}, | |||
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
|
r14708 | "mysecondwidget = widgets.RadioButtonsWidget(values=[\"Item A\", \"Item B\", \"Item C\"], value=\"Item A\")\n", | |
|
r14323 | "display(mysecondwidget)" | |
], | |||
"language": "python", | |||
"metadata": {}, | |||
|
r14505 | "outputs": [], | |
|
r14708 | "prompt_number": 9 | |
|
r14486 | }, | |
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
"mysecondwidget.value" | |||
], | |||
"language": "python", | |||
"metadata": {}, | |||
"outputs": [ | |||
{ | |||
"metadata": {}, | |||
"output_type": "pyout", | |||
|
r14708 | "prompt_number": 10, | |
|
r14323 | "text": [ | |
|
r14708 | "'Item A'" | |
|
r14323 | ] | |
} | |||
], | |||
|
r14708 | "prompt_number": 10 | |
|
r16324 | }, | |
{ | |||
"cell_type": "markdown", | |||
"metadata": {}, | |||
"source": [ | |||
"Some widgets have special attributes. For example, text boxes and text areas can specify the `placeholder` attribute, which will set \"placeholder\" text to be displayed before the user has typed anything:" | |||
] | |||
}, | |||
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
"mytextwidget = widgets.TextWidget()\n", | |||
"mytextwidget.placeholder = \"type something here\"\n", | |||
"display(mytextwidget)" | |||
], | |||
"language": "python", | |||
"metadata": {}, | |||
"outputs": [], | |||
"prompt_number": 4 | |||
}, | |||
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
"mytextareawidget = widgets.TextareaWidget()\n", | |||
"mytextareawidget.placeholder = \"your text here\"\n", | |||
"display(mytextareawidget)" | |||
], | |||
"language": "python", | |||
"metadata": {}, | |||
"outputs": [], | |||
"prompt_number": 5 | |||
|
r14323 | } | |
], | |||
"metadata": {} | |||
} | |||
] | |||
} |