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

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

first review pass on widget tests
first review pass on widget tests
Jonathan Frederic - - Load All Authors

File last commit:

r14724:796c0edb
r14797:85a0de32
Show More
Part 1 - Basics.ipynb
313 lines | 8.1 KiB | text/plain | TextLexer
/ examples / widgets / Part 1 - Basics.ipynb
History | Annotation | Raw |Copy content |Copy permalink

Index

To use IPython widgets in the notebook, the widget namespace needs to be imported.

In [1]:
from IPython.html import widgets # Widget definitions
from IPython.display import display # Used to display widgets in the notebook

Basic Widgets

The IPython notebook comes preloaded with basic widgets that represent common data types. These widgets are

  • CheckBoxWidget
  • ToggleButtonWidget
  • FloatSliderWidget
  • BoundedFloatTextWidget
  • FloatProgressWidget
  • FloatTextWidget
  • ImageWidget
  • IntSliderWidget
  • BoundedIntTextWidget
  • IntProgressWidget
  • IntTextWidget
  • ToggleButtonsWidget
  • RadioButtonsWidget
  • DropdownWidget
  • ListBoxWidget
  • HTMLWidget
  • LatexWidget
  • TextAreaWidget
  • TextBoxWidget

A few special widgets are also included, that can be used to capture events and change how other widgets are displayed. These widgets are

  • ButtonWidget
  • ContainerWidget
  • PopupWidget
  • AccordionWidget
  • TabWidget

To see the complete list of widgets, one can execute the following

In [2]:
[widget for widget in dir(widgets) if widget.endswith('Widget')]
Out[2]:
['AccordionWidget',
 'BoundedFloatTextWidget',
 'BoundedIntTextWidget',
 'ButtonWidget',
 'CheckBoxWidget',
 'ContainerWidget',
 'DOMWidget',
 'DropdownWidget',
 'FloatProgressWidget',
 'FloatSliderWidget',
 'FloatTextWidget',
 'HTMLWidget',
 'ImageWidget',
 'IntProgressWidget',
 'IntSliderWidget',
 'IntTextWidget',
 'LatexWidget',
 'ListBoxWidget',
 'PopupWidget',
 'RadioButtonsWidget',
 'TabWidget',
 'TextAreaWidget',
 'TextBoxWidget',
 'ToggleButtonWidget',
 'ToggleButtonsWidget',
 'Widget']

The basic widgets can all be constructed without arguments. The following creates a FloatSliderWidget without displaying it

In [3]:
mywidget = widgets.FloatSliderWidget()

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

In [4]:
display(mywidget)

or

In [5]:
mywidget

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.

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.

In [6]:
mywidget.keys
Out[6]:
['_view_name',
 'description',
 'min',
 'orientation',
 'max',
 '_css',
 'value',
 'disabled',
 'visible',
 'step']

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.

In [7]:
mywidget.value = 25.0

After changing the widget's value in the notebook by hand to 0.0 (sliding the bar to the far left).

In [8]:
mywidget.value
Out[8]:
0.0

Widget property values can also be set with kwargs during the construction of the widget (as seen below).

In [9]:
mysecondwidget = widgets.RadioButtonsWidget(values=["Item A", "Item B", "Item C"], value="Item A")
display(mysecondwidget)
In [10]:
mysecondwidget.value
Out[10]:
'Item A'

In [Part 2](Part 2 - Events.ipynb) of this series, you will learn about widget events.