mirror/notebook
2
0
Fork 0
mirror of https://github.com/jupyter/notebook.git synced 2025-03-13 13:17:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

Updated widget tutorial,

Browse Source 
- Added slide metadata.
- Bolded important parts of speach.
This commit is contained in:
Jonathan Frederic 2014-07-05 11:40:31 -07:00 committed by Brian E. Granger
parent 85ffe2459c
commit 224711f177
5 changed files with 856 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

282
examples/Interactive Widgets/Custom Widget - Hello World.ipynb
View File

@ -1,5 +1,6 @@
{
"metadata": {
"celltoolbar": "Slideshow",
"name": "",
"signature": "sha256:9763f005a69fc65b7a7977011d9604b09b4959e7293cbbb2cf35cc482380e671"
},
@ -15,14 +16,6 @@
"[Index](Index.ipynb) - [Back](Widget Styling.ipynb)"
]
},
{
"cell_type": "heading",
"level": 1,
"metadata": {},
"source": [
"Building a Custom Widget"
]
},
{
"cell_type": "code",
"collapsed": false,
@ -32,19 +25,81 @@
"language": "python",
"metadata": {},
"outputs": [],
"prompt_number": 1
"prompt_number": 3
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"%%html\n",
"<style>div.text_cell.cell.rendered.slideshow-slide { margin-top: 5em !important; }</style>"
],
"language": "python",
"metadata": {},
"outputs": [
{
"html": [
"<style>div.text_cell.cell.rendered.slideshow-slide { margin-top: 5em !important; }</style>"
],
"metadata": {},
"output_type": "display_data",
"text": [
"<IPython.core.display.HTML object>"
]
}
],
"prompt_number": 4
},
{
"cell_type": "heading",
"level": 1,
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"Building a Custom Widget"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"The widget framework is built on top of the Comm framework (short for communication). The Comm framework is a framework that allows you send/receive JSON messages to/from the front-end. To create a custom widget, you need to define the widget both in the back-end and in the front-end. "
"The widget framework is built **on top of the Comm framework** (short for communication). The Comm framework is a framework that **allows you send/receive JSON messages** to/from the front-end (as seen below).\n",
"\n",
"** Insert framework layer image here. **\n",
"\n",
"To create a custom widget, you need to **define the widget both in the back-end and in the front-end**. "
]
},
{
"cell_type": "heading",
"level": 1,
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"Building a Custom Widget"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"To get started, you'll create a **simple hello world widget**. Later you'll build on this foundation to make more complex widgets."
]
},
{
"cell_type": "heading",
"level": 2,
"metadata": {},
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"Back-end (Python)"
]
@ -61,22 +116,26 @@
"cell_type": "markdown",
"metadata": {},
"source": [
"To define a widget, you must inherit from the Widget or DOMWidget base class. If you intend for your widget to be displayed in the IPython notebook, you'll need to inherit from the DOMWidget. The DOMWidget class itself inherits from the Widget class. The Widget class is useful for cases in which the Widget is not meant to be displayed directly in the notebook, but instead as a child of another rendering environment. For example, if you wanted to create a D3.js widget (a popular WebGL library), you would implement the rendering window as a DOMWidget and any 3D objects or lights meant to be rendered in that window as Widgets."
"To define a widget, you must inherit from the **Widget or DOMWidget** base class. If you intend for your widget to be **displayed in the IPython notebook**, you'll need to **inherit from the DOMWidget**. The DOMWidget class itself inherits from the Widget class. The Widget class is useful for cases in which the **Widget is not meant to be displayed directly in the notebook**, but **instead as a child of another rendering environment**. For example, if you wanted to create a three.js widget (a popular WebGL library), you would implement the rendering window as a DOMWidget and any 3D objects or lights meant to be rendered in that window as Widgets."
]
},
{
"cell_type": "heading",
"level": 3,
"metadata": {},
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"sync=True traitlets"
"_view_name"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Inheriting from the DOMWidget does not tell the widget framework what front-end widget to associate with your back-end widget. Instead, you must tell it yourself by defining a specially named Traitlet, `_view_name` (as seen below)."
"Inheriting from the DOMWidget does not tell the widget framework what front-end widget to associate with your back-end widget. Instead, you must tell it yourself by defining a **specially named Traitlet, `_view_name`** (as seen below)."
]
},
{
@ -94,17 +153,33 @@
"outputs": [],
"prompt_number": 2
},
{
"cell_type": "heading",
"level": 3,
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"sync=True traitlets"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Traitlets is an IPython library for defining type-safe properties on configurable objects. For this tutorial you do not need to worry about the *configurable* piece of the traitlets machinery. The `sync=True` keyword argument tells the widget framework to handle synchronizing that value to the front-end. Without `sync=True`, the front-end would have no knowledge of `_view_name`."
"**Traitlets is** an IPython library for defining **type-safe properties** on configurable objects. For this tutorial you do not need to worry about the *configurable* piece of the traitlets machinery. The **`sync=True` keyword argument** tells the widget framework to **handle synchronizing that value to the front-end**. Without `sync=True`, the front-end would have no knowledge of `_view_name`."
]
},
{
"cell_type": "heading",
"level": 3,
"metadata": {},
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"Other traitlet types"
]
@ -113,7 +188,7 @@
"cell_type": "markdown",
"metadata": {},
"source": [
"Unicode is not the only Traitlet type, there are many more: \n",
"Unicode, used for _view_name, is not the only Traitlet type, there are many more some of which are listed below: \n",
"\n",
"- Any\n",
"- Bool\n",
@ -144,13 +219,17 @@
"- Type\n",
"- Unicode\n",
"\n",
"Not all of these traitlets can be synchronized across the network, only the JSON-able traits and Widget instances will be synchronized."
"**Not all of these traitlets can be synchronized** across the network, **only the JSON-able** traits and **Widget instances** will be synchronized."
]
},
{
"cell_type": "heading",
"level": 2,
"metadata": {},
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"Front-end (JavaScript)"
]
@ -167,22 +246,26 @@
"cell_type": "markdown",
"metadata": {},
"source": [
"The IPython widget framework front-end relies heavily on [Backbone.js](http://backbonejs.org/). Backbone.js is an MVC (model view controller) framework. Widgets defined in the back-end are automatically synchronized with generic Backbone.js models in the front-end. The traitlets are added to the front-end instance automatically on first state push. The `_view_name` trait that you defined earlier is used by the widget framework to create the corresponding Backbone.js view and link that view to the generic model."
"The IPython widget framework front-end relies heavily on [Backbone.js](http://backbonejs.org/). **Backbone.js is an MVC (model view controller) framework**. Widgets defined in the back-end are automatically **synchronized with generic Backbone.js models** in the front-end. The traitlets are added to the front-end instance **automatically on first state push**. The **`_view_name` trait** that you defined earlier is used by the widget framework to create the corresponding Backbone.js view and **link that view to the model**."
]
},
{
"cell_type": "heading",
"level": 3,
"metadata": {},
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"Defining a view"
"Import the WidgetManager"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"You first need to import the WidgetManager. You will use it later to register your view by name (the same name you used in the back-end). To import the widget manager, use the `require` method of [require.js](http://requirejs.org/) (as seen below)."
"You first need to **import the WidgetManager**. You will use it later to register your view by name (the same name you used in the back-end). To import the widget manager, use the `require` method of [require.js](http://requirejs.org/) (as seen below)."
]
},
{
@ -214,11 +297,23 @@
],
"prompt_number": 3
},
{
"cell_type": "heading",
"level": 3,
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"Define the view"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Next define your widget view class. Inherit from the `DOMWidgetView` by using the `.extend` method. Register the view class with the widget manager by calling `.register_widget_view`. The first parameter is the widget view name (`_view_name` that you defined earlier in Python) and the second is a handle to the class type."
"Next define your widget view class. **Inherit from the `DOMWidgetView`** by using the `.extend` method. Register the view class with the widget manager by calling **`.register_widget_view`**. The **first parameter is the widget view name** (`_view_name` that you defined earlier in Python) and the **second is a handle to the class type**."
]
},
{
@ -262,13 +357,25 @@
]
}
],
"prompt_number": 4
"prompt_number": 2
},
{
"cell_type": "heading",
"level": 3,
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"Render method"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Lastly, override the base `render` method of the view to define custom rendering logic. A handle to the widget's default div element can be acquired via `this.$el`. The `$el` property is a [jQuery](http://jquery.com/) object handle (which can be thought of as a supercharged version of the normal DOM element's handle)."
"Lastly, **override the base `render` method** of the view to define custom rendering logic. A handle to the widget's default div element can be acquired via **`this.$el`**. The `$el` property is a **[jQuery](http://jquery.com/) object handle** (which can be thought of as a supercharged version of the normal DOM element's handle)."
]
},
{
@ -321,7 +428,11 @@
{
"cell_type": "heading",
"level": 2,
"metadata": {},
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"Test"
]
@ -347,7 +458,11 @@
{
"cell_type": "heading",
"level": 2,
"metadata": {},
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"Making the widget stateful"
]
@ -356,7 +471,7 @@
"cell_type": "markdown",
"metadata": {},
"source": [
"There is not much that you can do with the above example that you can't do with the IPython display framework. To change this, you will make the widget stateful. Instead of displaying a static \"hello world\" message, it will display a string set by the back-end. First you need to add the traitlet in the back-end. Use the name of `value` to stay consistent with the rest of the widget framework and to allow your widget to be used with interact."
"There is not much that you can do with the above example that you can't do with the IPython display framework. To change this, you will make the widget stateful. Instead of displaying a static \"hello world\" message, it will **display a string set by the back-end**. First you need to **add a traitlet in the back-end**. Use the name of **`value` to stay consistent** with the rest of the widget framework and to **allow your widget to be used with interact**."
]
},
{
@ -369,28 +484,47 @@
],
"language": "python",
"metadata": {},
"outputs": [],
"prompt_number": 7
"outputs": [
{
"ename": "NameError",
"evalue": "name 'widgets' is not defined",
"output_type": "pyerr",
"traceback": [
"\u001b[0;31m---------------------------------------------------------------------------\u001b[0m\n\u001b[0;31mNameError\u001b[0m Traceback (most recent call last)",
"\u001b[0;32m<ipython-input-5-18ff342e181d>\u001b[0m in \u001b[0;36m<module>\u001b[0;34m()\u001b[0m\n\u001b[0;32m----> 1\u001b[0;31m \u001b[0;32mclass\u001b[0m \u001b[0mHelloWidget\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mwidgets\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mDOMWidget\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m:\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[0m\u001b[1;32m 2\u001b[0m \u001b[0m_view_name\u001b[0m \u001b[0;34m=\u001b[0m \u001b[0mUnicode\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0;34m'HelloView'\u001b[0m\u001b[0;34m,\u001b[0m \u001b[0msync\u001b[0m\u001b[0;34m=\u001b[0m\u001b[0mTrue\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[1;32m 3\u001b[0m \u001b[0mvalue\u001b[0m \u001b[0;34m=\u001b[0m \u001b[0mUnicode\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0;34m'Hello World!'\u001b[0m\u001b[0;34m,\u001b[0m \u001b[0msync\u001b[0m\u001b[0;34m=\u001b[0m\u001b[0mTrue\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n",
"\u001b[0;31mNameError\u001b[0m: name 'widgets' is not defined"
]
}
],
"prompt_number": 5
},
{
"cell_type": "heading",
"level": 3,
"metadata": {},
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"Backbone.js model"
"Accessing the model from the view"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"To access the model associate with a view instance, use the `model` property of the view. `get` and `set` methods are used to interact with the Backbone model. `get` is trivial, however you have to be careful when using `set`. After calling the model `set` you need call the view's `touch` method. This associates the `set` operation with a particular view so output will be routed to the correct IPython cell. The model also has a `on` method which allows you to listen to events triggered by the model (like value changes)."
"To access the model associate with a view instance, use the **`model` property** of the view. **`get` and `set`** methods are used to interact with the Backbone model. **`get` is trivial**, however you have to **be careful when using `set`**. **After calling the model `set`** you need call the **view's `touch` method**. This associates the `set` operation with a particular view so **output will be routed to the correct cell**. The model also has a **`on` method** which allows you to listen to events triggered by the model (like value changes)."
]
},
{
"cell_type": "heading",
"level": 3,
"metadata": {},
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"Rendering model contents"
]
@ -399,7 +533,7 @@
"cell_type": "markdown",
"metadata": {},
"source": [
"By replacing the string literal with a call to `model.get`, the view will now display the value of the back-end upon display. However, it will not update itself to a new value when the value changes."
"By **replacing the string literal with a call to `model.get`**, the view will now display the **value of the back-end upon display**. However, it will not update itself to a new value when the value changes."
]
},
{
@ -445,13 +579,25 @@
]
}
],
"prompt_number": 8
"prompt_number": 6
},
{
"cell_type": "heading",
"level": 3,
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"Dynamic updates"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"To get the view to update itself dynamically, register a function to update the view's value when the model's `value` property changes. This can be done using the `model.on` method. The `on` method takes three parameters, an event name, callback handle, and callback context. The Backbone event named `change` will fire whenever the model changes. By appending `:value` to it, you tell Backbone to only listen to the change event of the `value` property (as seen below)."
"To get the view to **update itself dynamically**, register a function to update the view's value when the model's `value` property changes. This can be done using the **`model.on` method**. The `on` method takes three parameters, an event name, callback handle, and callback context. The Backbone **event named `change`** will fire whenever the model changes. By **appending `:value`** to it, you tell Backbone to only listen to the change event of the `value` property (as seen below)."
]
},
{
@ -514,7 +660,11 @@
{
"cell_type": "heading",
"level": 2,
"metadata": {},
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"Test"
]
@ -542,6 +692,18 @@
"outputs": [],
"prompt_number": 11
},
{
"cell_type": "heading",
"level": 1,
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"Finishing"
]
},
{
"cell_type": "heading",
"level": 2,
@ -554,13 +716,17 @@
"cell_type": "markdown",
"metadata": {},
"source": [
"The examples above dump the value directly into the DOM. There is no way for you to interact with this dumped data in the front-end. To create an example that accepts input, you will have to do something more than blindly dumping the contents of value into the DOM. For this part of the tutorial, you will use a jQuery spinner to display and accept input in the front-end. IPython currently lacks a spinner implementation so this widget will be unique."
"The examples above dump the value directly into the DOM. There is no way for you to interact with this dumped data in the front-end. To create an example that **accepts input**, you will have to do something more than blindly dumping the contents of value into the DOM. In this part of the tutorial, you will **use a jQuery spinner** to display and accept input in the front-end. IPython currently lacks a spinner implementation so this widget will be unique."
]
},
{
"cell_type": "heading",
"level": 3,
"metadata": {},
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"Update the Python code"
]
@ -569,7 +735,7 @@
"cell_type": "markdown",
"metadata": {},
"source": [
"You will need to change the type of the value traitlet to `Int`. It also makes sense to change the name of the widget to something more appropriate, like `SpinnerWidget`."
"You will need to change the type of the **value traitlet to `Int`**. It also makes sense to **change the name of the widget** to something more appropriate, like `SpinnerWidget`."
]
},
{
@ -589,7 +755,11 @@
{
"cell_type": "heading",
"level": 3,
"metadata": {},
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"Updating the Javascript code"
]
@ -598,7 +768,7 @@
"cell_type": "markdown",
"metadata": {},
"source": [
"The [jQuery docs for the spinner control](https://jqueryui.com/spinner/) say to use `.spinner` to create a spinner in an element. Calling `.spinner` on `$el` will create a spinner inside `$el`. Make sure to update the widget name here too so it's the same as `_view_name` in the back-end."
"The [jQuery docs for the spinner control](https://jqueryui.com/spinner/) say to use **`.spinner` to create a spinner** in an element. Calling **`.spinner` on `$el` will create a spinner inside `$el`**. Make sure to **update the widget name here too** so it's the same as `_view_name` in the back-end."
]
},
{
@ -672,11 +842,23 @@
],
"prompt_number": 13
},
{
"cell_type": "heading",
"level": 3,
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"Getting and setting the value"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"To set the value of the spinner on update, you need to use jQuery's spinner API. `spinner.spinner('value', new)` will set the value of the spinner. Add that code to the `value_changed` method to make the spinner update with the value stored in the back-end. Using jQuery's spinner API, you can add a function to handle the spinner `change` event by passing it in when constructing the spinner. Inside the `change` event, call `model.set` to set the value and then `touch` to inform the framework that this view was the view that caused the change to the model. Note: The `var that = this;` is a JavaScript trick to pass the current context into closures."
"To **set the value of the spinner on update from the back-end**, you need to use **jQuery's `spinner` API**. `spinner.spinner('value', new)` will set the value of the spinner. Add that code to the **`value_changed` method** to make the spinner **update with the value stored in the back-end((. Using jQuery's spinner API, you can add a function to handle the **spinner `change` event** by passing it in when constructing the spinner. Inside the `change` event, call **`model.set`** to set the value and then **`touch`** to inform the framework that this view was the view that caused the change to the model. **Note: The `var that = this;` is a JavaScript trick to pass the current context into closures.**"
]
},
{
@ -773,7 +955,11 @@
{
"cell_type": "heading",
"level": 2,
"metadata": {},
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"Test"
]
@ -825,7 +1011,7 @@
"cell_type": "markdown",
"metadata": {},
"source": [
"Trying to use the spinner with another widget."
"Trying to **use the spinner with another widget**."
]
},
{

179
examples/Interactive Widgets/Widget Basics.ipynb
View File

@ -1,7 +1,8 @@
{
"metadata": {
"celltoolbar": "Slideshow",
"name": "",
"signature": "sha256:30ea15a6e6354e2477229e50d01b6caa3c5033e422acfbff730d7c20ca875e78"
"signature": "sha256:7a953d1eb1417e7212ddeb70602b36355521ca1907ac33b089850ccea35bd8ab"
},
"nbformat": 3,
"nbformat_minor": 0,
@ -16,19 +17,67 @@
]
},
{
"cell_type": "markdown",
"cell_type": "code",
"collapsed": false,
"input": [
"%%html\n",
"<style>div.text_cell.cell.rendered.slideshow-slide { margin-top: 5em !important; }</style>"
],
"language": "python",
"metadata": {},
"outputs": [
{
"html": [
"<style>div.text_cell.cell.rendered.slideshow-slide { margin-top: 5em !important; }</style>"
],
"metadata": {},
"output_type": "display_data",
"text": [
"<IPython.core.display.HTML object>"
]
}
],
"prompt_number": 11
},
{
"cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"# Simple Widget Introduction\n",
"\n",
"## What are widgets?\n",
"<blockquote>Widgets are elements that exists in both the front-end and the back-end.</blockquote>\n",
"\n",
"You can use widgets to build interactive GUIs for your notebooks. \n",
"You can also use widgets to synchronize stateful and stateless information between Python and JavaScript.\n",
"Widgets are elements that exists in both the front-end and the back-end.\n",
"\n",
"** Insert Frontend-Backend Picture **"
]
},
{
"cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"## What can they be used for?\n",
"You can use widgets to build **interactive GUIs** for your notebooks. \n",
"You can also use widgets to **synchronize stateful and stateless information** between Python and JavaScript."
]
},
{
"cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"## Using widgets \n",
"To use the widget framework, you need to import the widgets from `IPython.html.widgets`."
"To use the widget framework, you need to **import `IPython.html.widgets`**."
]
},
{
@ -42,11 +91,23 @@
"outputs": [],
"prompt_number": 1
},
{
"cell_type": "heading",
"level": 3,
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"repr"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Widgets have their own display `repr` which allows them to be displayed using IPython's display framework. Constructing and returning an `IntSliderWidget` automatically displays the widget (as seen below). Widgets are displayed inside the `widget area`, which sits between the code cell and output. You can hide all of the widgets in the `widget area` by clicking the grey *x* in the margin."
"Widgets have their own display `repr` which allows them to be displayed using IPython's display framework. Constructing and returning an `IntSliderWidget` automatically displays the widget (as seen below). Widgets are **displayed inside the `widget area`**, which sits between the code cell and output. **You can hide all of the widgets** in the `widget area` by clicking the grey *x* in the margin."
]
},
{
@ -60,6 +121,18 @@
"outputs": [],
"prompt_number": 2
},
{
"cell_type": "heading",
"level": 3,
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"display()"
]
},
{
"cell_type": "markdown",
"metadata": {},
@ -80,11 +153,23 @@
"outputs": [],
"prompt_number": 3
},
{
"cell_type": "heading",
"level": 3,
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"Multiple display() calls"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"If you display the same widget twice, the displayed instances in the front-end will remain in sync with each other."
"If you display the same widget twice, the displayed instances in the front-end **will remain in sync** with each other."
]
},
{
@ -98,6 +183,32 @@
"outputs": [],
"prompt_number": 4
},
{
"cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"## Why does displaying the same widget twice work?\n",
"Widgets are **represented in the back-end by a single object**. Each time a widget is displayed, **a new representation** of that same object is created in the front-end. These representations are called **views**.\n",
"\n",
"** Insert Backend-Frontend Views Figure **"
]
},
{
"cell_type": "heading",
"level": 3,
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"Closing widgets"
]
},
{
"cell_type": "markdown",
"metadata": {},
@ -118,13 +229,14 @@
},
{
"cell_type": "markdown",
"metadata": {},
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"## Why does displaying the same widget twice work?\n",
"Widgets are represented in the back-end by a single object. Each time a widget is displayed, a new representation of that same object is created in the front-end.\n",
"\n",
"## Widget properties\n",
"All of the IPython widgets share a similar naming scheme. To read the value of a widget, you can query its `value` property."
"All of the IPython widgets **share a similar naming scheme**. To read the value of a widget, you can query its `value` property."
]
},
{
@ -165,11 +277,23 @@
"outputs": [],
"prompt_number": 7
},
{
"cell_type": "heading",
"level": 3,
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"Keys"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"In addition to `value`, most widgets share `keys`, `description`, `disabled`, and `visible`. To see the entire list of synchronized, stateful properties, of any specific widget, you can query the `keys` property."
"In addition to `value`, most widgets share `keys`, `description`, `disabled`, and `visible`. To see the entire list of synchronized, stateful properties, of any specific widget, you can **query the `keys` property**."
]
},
{
@ -205,10 +329,14 @@
},
{
"cell_type": "markdown",
"metadata": {},
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"### Tip: Shorthand for setting the initial values of widget properties\n",
"While creating a widget, you can set some or all of the initial values of that widget by defining them as keyword arguments in the widget's constructor (as seen below)."
"### Shorthand for setting the initial values of widget properties\n",
"While creating a widget, you can set some or all of the initial values of that widget by **defining them as keyword arguments in the widget's constructor** (as seen below)."
]
},
{
@ -224,10 +352,14 @@
},
{
"cell_type": "markdown",
"metadata": {},
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"## Linking two similar widgets\n",
"If you need to display the same value two different ways, you'll have to use two different widgets. Instead of attempting to manually synchronize the values of the two widgets, you can use the `traitlet` `link` function to link two properties together. Below, the values of three widgets are linked together."
"If you need to display the same value two different ways, you'll have to use two different widgets. Instead of **attempting to manually synchronize the values** of the two widgets, you can use the `traitlet` `link` function **to link two properties together**. Below, the values of three widgets are linked together."
]
},
{
@ -250,8 +382,13 @@
},
{
"cell_type": "markdown",
"metadata": {},
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"### Unlinking widgets\n",
"Unlinking the widgets is simple. All you have to do is call `.unlink` on the link object."
]
},

84
examples/Interactive Widgets/Widget Events.ipynb
View File

@ -6,8 +6,9 @@
null
]
],
"celltoolbar": "Slideshow",
"name": "",
"signature": "sha256:32c66e8148a9ddc503302503ecda740cc85cf4a8930e2c69f06025f1dfd80780"
"signature": "sha256:9f69a28be85dccdcc7e2b5d742047aa140a572d19e4215467aa88745c29ffce7"
},
"nbformat": 3,
"nbformat_minor": 0,
@ -21,10 +22,37 @@
"[Index](Index.ipynb) - [Back](Widget List.ipynb) - [Next](Widget Styling.ipynb)"
]
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"%%html\n",
"<style>div.text_cell.cell.rendered.slideshow-slide { margin-top: 5em !important; }</style>"
],
"language": "python",
"metadata": {},
"outputs": [
{
"html": [
"<style>div.text_cell.cell.rendered.slideshow-slide { margin-top: 5em !important; }</style>"
],
"metadata": {},
"output_type": "display_data",
"text": [
"<IPython.core.display.HTML object>"
]
}
],
"prompt_number": 1
},
{
"cell_type": "heading",
"level": 1,
"metadata": {},
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"Widget Events"
]
@ -52,7 +80,7 @@
"cell_type": "markdown",
"metadata": {},
"source": [
"The `ButtonWidget` is not 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 doc string of the `on_click` can be seen below."
"The `ButtonWidget` is not 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 doc string of the `on_click` can be seen below."
]
},
{
@ -83,11 +111,23 @@
],
"prompt_number": 2
},
{
"cell_type": "heading",
"level": 3,
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"Example"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"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."
"Since button clicks are **stateless**, they 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."
]
},
{
@ -108,11 +148,23 @@
"outputs": [],
"prompt_number": 3
},
{
"cell_type": "heading",
"level": 3,
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"on_sumbit"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"The `TextWidget` also has a special `on_submit` event. The `on_submit` event fires when the user hits return."
"The **`TextWidget`** also has a special **`on_submit` event**. The `on_submit` event **fires when the user hits return**."
]
},
{
@ -135,7 +187,11 @@
{
"cell_type": "heading",
"level": 2,
"metadata": {},
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"Traitlet events"
]
@ -144,7 +200,7 @@
"cell_type": "markdown",
"metadata": {},
"source": [
"Widget properties are IPython traitlets and traitlets are eventful. To handle changes, the `on_trait_change` method of the widget can be used to register a callback. The doc string for `on_trait_change` can be seen below. Both the `name` and `remove` properties are optional."
"**Widget properties are IPython traitlets** and **traitlets are eventful**. To handle changes, the **`on_trait_change` method** of the widget can be used to **register a callback**. The doc string for `on_trait_change` can be seen below."
]
},
{
@ -189,11 +245,23 @@
],
"prompt_number": 5
},
{
"cell_type": "heading",
"level": 3,
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"Signatures"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Mentioned in the doc string, the callback registered can have 4 possible signatures:\n",
"Mentioned in the doc string, the callback registered can have **4 possible signatures**:\n",
"\n",
"- callback()\n",
"- callback(trait_name)\n",

134
examples/Interactive Widgets/Widget List.ipynb
View File

@ -1,7 +1,8 @@
{
"metadata": {
"celltoolbar": "Slideshow",
"name": "",
"signature": "sha256:131de6f76f08282147aa3b67b3ad76b8c0fb76a8582d771c7f864f4e1e7c0e2a"
"signature": "sha256:e6f77565893357e0302d40f80fbb389950912ab04a07b64026e28720cf11bfbe"
},
"nbformat": 3,
"nbformat_minor": 0,
@ -16,8 +17,35 @@
]
},
{
"cell_type": "markdown",
"cell_type": "code",
"collapsed": false,
"input": [
"%%html\n",
"<style>div.text_cell.cell.rendered.slideshow-slide { margin-top: 5em !important; }</style>"
],
"language": "python",
"metadata": {},
"outputs": [
{
"html": [
"<style>div.text_cell.cell.rendered.slideshow-slide { margin-top: 5em !important; }</style>"
],
"metadata": {},
"output_type": "display_data",
"text": [
"<IPython.core.display.HTML object>"
]
}
],
"prompt_number": 1
},
{
"cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"# Widget List\n",
"\n",
@ -74,7 +102,11 @@
{
"cell_type": "heading",
"level": 2,
"metadata": {},
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"Numeric widgets"
]
@ -89,7 +121,11 @@
{
"cell_type": "heading",
"level": 3,
"metadata": {},
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"FloatSliderWidget"
]
@ -115,7 +151,7 @@
"cell_type": "markdown",
"metadata": {},
"source": [
"Sliders can also be displayed vertically."
"Sliders can also be **displayed vertically**."
]
},
{
@ -139,7 +175,11 @@
{
"cell_type": "heading",
"level": 3,
"metadata": {},
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"FloatProgressWidget"
]
@ -164,7 +204,11 @@
{
"cell_type": "heading",
"level": 3,
"metadata": {},
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"BoundedFloatTextWidget"
]
@ -188,7 +232,11 @@
{
"cell_type": "heading",
"level": 3,
"metadata": {},
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"FloatTextWidget"
]
@ -210,7 +258,11 @@
{
"cell_type": "heading",
"level": 2,
"metadata": {},
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"Boolean widgets"
]
@ -247,7 +299,11 @@
{
"cell_type": "heading",
"level": 3,
"metadata": {},
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"CheckboxWidget"
]
@ -269,7 +325,11 @@
{
"cell_type": "heading",
"level": 2,
"metadata": {},
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"Selection widgets"
]
@ -278,13 +338,17 @@
"cell_type": "markdown",
"metadata": {},
"source": [
"There are four widgets that can be used to display single selection lists. All four inherit from the same base class. You can specify the enumeration of selectables by passing a list. You can also specify the enumeration as a dictionary, in which case the keys will be used as the item displayed in the list and the corresponding value will be returned when an item is selected."
"There are four widgets that can be used to display single selection lists. All four inherit from the same base class. You can specify the **enumeration of selectables by passing a list**. You can **also specify the enumeration as a dictionary**, in which case the **keys will be used as the item displayed** in the list and the corresponding **value will be returned** when an item is selected."
]
},
{
"cell_type": "heading",
"level": 3,
"metadata": {},
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"DropdownWidget"
]
@ -372,7 +436,11 @@
{
"cell_type": "heading",
"level": 3,
"metadata": {},
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"RadioButtonsWidget"
]
@ -394,7 +462,11 @@
{
"cell_type": "heading",
"level": 3,
"metadata": {},
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"SelectWidget"
]
@ -416,7 +488,11 @@
{
"cell_type": "heading",
"level": 3,
"metadata": {},
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"ToggleButtonsWidget"
]
@ -438,7 +514,11 @@
{
"cell_type": "heading",
"level": 2,
"metadata": {},
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"String widgets"
]
@ -447,13 +527,17 @@
"cell_type": "markdown",
"metadata": {},
"source": [
"There are 4 widgets that can be used to display a string value. Of those, the `TextWidget` and `TextareaWidget` accept input. The `LatexWidget` and `HTMLWidget` display the string as either Latex or HTML respectively, but do not accept input."
"There are 4 widgets that can be used to display a string value. Of those, the **`TextWidget` and `TextareaWidget` accept input**. The **`LatexWidget` and `HTMLWidget` display the string** as either Latex or HTML respectively, but **do not accept input**."
]
},
{
"cell_type": "heading",
"level": 3,
"metadata": {},
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"TextWidget"
]
@ -497,7 +581,11 @@
{
"cell_type": "heading",
"level": 3,
"metadata": {},
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"LatexWidget"
]
@ -539,7 +627,11 @@
{
"cell_type": "heading",
"level": 2,
"metadata": {},
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"ButtonWidget"
]

357
examples/Interactive Widgets/Widget Styling.ipynb
View File

@ -6,6 +6,7 @@
null
]
],
"celltoolbar": "Slideshow",
"name": "",
"signature": "sha256:98ca4ae261d3dc9c0b43b3fa822772a47fff9956e443c640b2caead8d02efece"
},
@ -21,20 +22,13 @@
"[Index](Index.ipynb) - [Back](Widget Events.ipynb) - [Next](Custom Widget - Hello World.ipynb)"
]
},
{
"cell_type": "heading",
"level": 1,
"metadata": {},
"source": [
"Widget Styling"
]
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"%%html\n",
"<style>\n",
"div.text_cell.cell.rendered.slideshow-slide { margin-top: 5em !important; } // Slideshow styling.\n",
".example-container { background: #999999; padding: 2px; min-height: 100px; }\n",
".example-container.sm { min-height: 50px; }\n",
".example-box { background: #9999FF; width: 50px; height: 50px; text-align: center; vertical-align: middle; color: white; font-weight: bold; margin: 2px;}\n",
@ -48,6 +42,7 @@
{
"html": [
"<style>\n",
"div.text_cell.cell.rendered.slideshow-slide { margin-top: 5em !important; } // Slideshow styling.\n",
".example-container { background: #999999; padding: 2px; min-height: 100px; }\n",
".example-container.sm { min-height: 50px; }\n",
".example-box { background: #9999FF; width: 50px; height: 50px; text-align: center; vertical-align: middle; color: white; font-weight: bold; margin: 2px;}\n",
@ -64,6 +59,18 @@
],
"prompt_number": 1
},
{
"cell_type": "heading",
"level": 1,
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"Widget Styling"
]
},
{
"cell_type": "heading",
"level": 2,
@ -76,7 +83,7 @@
"cell_type": "markdown",
"metadata": {},
"source": [
"Since the representation of the widget you see is a browser element, Cascading Style Sheets (CSS) are used for styling. Widgets have a `set_css` method that allows you to add and remove CSS properties from your elements. The following example shows had `set_css` can be used to set the background color of a `TextWidget`."
"Since the representation of the widget you see is a **browser element**, **Cascading Style Sheets (CSS)** are used for styling. Widgets have a **`set_css` method** that allows you to **add and remove CSS properties** from your elements. The following example shows had `set_css` **can be used to set the background color** of a `TextWidget`."
]
},
{
@ -93,11 +100,23 @@
"outputs": [],
"prompt_number": 2
},
{
"cell_type": "heading",
"level": 3,
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"Color codes"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"In the example above, the color `lime` is specified by name. CSS also supports specifying colors by a 3 byte hexadecimal string. The first byte is red, second green, and third blue. The following example sets the `TextWidget`'s background to blue."
"In the example above, **the color `lime` is specified by name**. CSS also supports specifying colors by a **3 byte hexadecimal string**. The first byte is red, second green, and third blue (**RGB**). The following example sets the `TextWidget`'s background to blue."
]
},
{
@ -111,11 +130,23 @@
"outputs": [],
"prompt_number": 3
},
{
"cell_type": "heading",
"level": 3,
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"Forecolor"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Font color is just `color`."
"In CSS the **font color is `color`.**"
]
},
{
@ -129,6 +160,53 @@
"outputs": [],
"prompt_number": 4
},
{
"cell_type": "heading",
"level": 3,
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"Size"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"CSS is also used to set the **height and width** of controls. The `set_css` method also **can accept a single dictionary with multiple CSS properties** (as seen below)."
]
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"btn = widgets.ButtonWidget()\n",
"btn.set_css({\n",
" 'width': '100px',\n",
" 'height': '100px',\n",
"})\n",
"btn"
],
"language": "python",
"metadata": {},
"outputs": [],
"prompt_number": 6
},
{
"cell_type": "heading",
"level": 3,
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"Removing"
]
},
{
"cell_type": "markdown",
"metadata": {},
@ -147,29 +225,6 @@
"outputs": [],
"prompt_number": 5
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"CSS is also used to set the height and width of controls. The `set_css` method also can accept a single dictionary with multiple CSS properties (as seen below)."
]
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"btn = widgets.ButtonWidget()\n",
"btn.set_css({\n",
" 'width': '100px',\n",
" 'height': '100px',\n",
"})\n",
"btn"
],
"language": "python",
"metadata": {},
"outputs": [],
"prompt_number": 6
},
{
"cell_type": "markdown",
"metadata": {},
@ -180,7 +235,11 @@
{
"cell_type": "heading",
"level": 2,
"metadata": {},
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"Parent/child relationships"
]
@ -189,9 +248,9 @@
"cell_type": "markdown",
"metadata": {},
"source": [
"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",
"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 (this limitation will be removed in IPython 3.0).** In other words, *widget A* cannot have *widget B* listed twice in it's list of children.\n",
"\n",
"Widgets that can contain other widgets have a `children` attribute. This attribute can be set via a keyword argument in the widget's constructor or after construction. Calling display on an object with children automatically displays those children, too."
"Widgets that can contain other widgets have a **`children` attribute**. This attribute can be **set via a keyword argument** in the widget's constructor **or after construction**. Calling display on an **object with children automatically displays those children**, too."
]
},
{
@ -215,9 +274,14 @@
},
{
"cell_type": "markdown",
"metadata": {},
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"Children can also be added to parents after the parent has been displayed. The parent is responsible for rendering its children."
"### After the parent is displayed\n",
"Children **can be added to parents** after the parent has been displayed. The **parent is responsible for rendering its children**."
]
},
{
@ -239,7 +303,11 @@
{
"cell_type": "heading",
"level": 2,
"metadata": {},
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"Fancy containers"
]
@ -248,7 +316,7 @@
"cell_type": "markdown",
"metadata": {},
"source": [
"If you need to display a more complicated set of widgets, there are specialized containers that you can use. To display multiple sets of widgets, you can use an `AccordionWidget` or a `TabWidget` in combination with one `ContainerWidget` per set of widgets (as seen below). The \"pages\" of these widgets are their children. To set the titles of the pages, one must call `set_title` after the widget has been displayed."
"If you need to display a more complicated set of widgets, there are **specialized containers** that you can use. To display **multiple sets of widgets**, you can use an **`AccordionWidget` or a `TabWidget` in combination with one `ContainerWidget` per set of widgets** (as seen below). The \"pages\" of these widgets are their children. To set the titles of the pages, one must **call `set_title` after the widget has been displayed**."
]
},
{
@ -285,7 +353,11 @@
{
"cell_type": "heading",
"level": 3,
"metadata": {},
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"TabWidget"
]
@ -316,7 +388,11 @@
{
"cell_type": "heading",
"level": 3,
"metadata": {},
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"PopupWidget"
]
@ -325,7 +401,7 @@
"cell_type": "markdown",
"metadata": {},
"source": [
"Unlike the other two special containers, the `PopupWidget` is only designed to display one set of widgets. The `PopupWidget` can be used to display widgets outside of the widget area. "
"Unlike the other two special containers, the `PopupWidget` is only **designed to display one set of widgets**. The `PopupWidget` can be used to **display widgets outside of the widget area**. "
]
},
{
@ -503,7 +579,11 @@
{
"cell_type": "heading",
"level": 1,
"metadata": {},
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"Alignment"
]
@ -512,9 +592,9 @@
"cell_type": "markdown",
"metadata": {},
"source": [
"Most widgets have a `description` attribute, which allows a label for the widget to be defined.\n",
"The label of the widget has a fixed minimum width.\n",
"The text of the label is always right aligned and the widget is left aligned:"
"Most widgets have a **`description` attribute**, which allows a label for the widget to be defined.\n",
"The label of the widget **has a fixed minimum width**.\n",
"The text of the label is **always right aligned and the widget is left aligned**:"
]
},
{
@ -527,14 +607,29 @@
],
"language": "python",
"metadata": {},
"outputs": [],
"prompt_number": 15
"outputs": [
{
"ename": "NameError",
"evalue": "name 'display' is not defined",
"output_type": "pyerr",
"traceback": [
"\u001b[0;31m---------------------------------------------------------------------------\u001b[0m\n\u001b[0;31mNameError\u001b[0m Traceback (most recent call last)",
"\u001b[0;32m<ipython-input-4-66f52ebe0195>\u001b[0m in \u001b[0;36m<module>\u001b[0;34m()\u001b[0m\n\u001b[0;32m----> 1\u001b[0;31m \u001b[0mdisplay\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mwidgets\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mTextWidget\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mdescription\u001b[0m\u001b[0;34m=\u001b[0m\u001b[0;34m\"a:\"\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[0m\u001b[1;32m 2\u001b[0m \u001b[0mdisplay\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mwidgets\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mTextWidget\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mdescription\u001b[0m\u001b[0;34m=\u001b[0m\u001b[0;34m\"aa:\"\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[1;32m 3\u001b[0m \u001b[0mdisplay\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mwidgets\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mTextWidget\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mdescription\u001b[0m\u001b[0;34m=\u001b[0m\u001b[0;34m\"aaa:\"\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n",
"\u001b[0;31mNameError\u001b[0m: name 'display' is not defined"
]
}
],
"prompt_number": 4
},
{
"cell_type": "markdown",
"metadata": {},
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"If a label is longer than the minimum width, the widget is shifted to the right:"
"If a **label is longer** than the minimum width, the **widget is shifted to the right**:"
]
},
{
@ -548,14 +643,29 @@
],
"language": "python",
"metadata": {},
"outputs": [],
"prompt_number": 16
"outputs": [
{
"ename": "NameError",
"evalue": "name 'display' is not defined",
"output_type": "pyerr",
"traceback": [
"\u001b[0;31m---------------------------------------------------------------------------\u001b[0m\n\u001b[0;31mNameError\u001b[0m Traceback (most recent call last)",
"\u001b[0;32m<ipython-input-3-bd60a4ccdeb5>\u001b[0m in \u001b[0;36m<module>\u001b[0;34m()\u001b[0m\n\u001b[0;32m----> 1\u001b[0;31m \u001b[0mdisplay\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mwidgets\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mTextWidget\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mdescription\u001b[0m\u001b[0;34m=\u001b[0m\u001b[0;34m\"a:\"\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[0m\u001b[1;32m 2\u001b[0m \u001b[0mdisplay\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mwidgets\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mTextWidget\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mdescription\u001b[0m\u001b[0;34m=\u001b[0m\u001b[0;34m\"aa:\"\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[1;32m 3\u001b[0m \u001b[0mdisplay\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mwidgets\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mTextWidget\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mdescription\u001b[0m\u001b[0;34m=\u001b[0m\u001b[0;34m\"aaa:\"\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[1;32m 4\u001b[0m \u001b[0mdisplay\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mwidgets\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mTextWidget\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mdescription\u001b[0m\u001b[0;34m=\u001b[0m\u001b[0;34m\"aaaaaaaaaaaaaaaaaa:\"\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n",
"\u001b[0;31mNameError\u001b[0m: name 'display' is not defined"
]
}
],
"prompt_number": 3
},
{
"cell_type": "markdown",
"metadata": {},
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"If a `description` is not set for the widget, the label is not displayed:"
"If a `description` is **not set** for the widget, the **label is not displayed**:"
]
},
{
@ -575,7 +685,11 @@
{
"cell_type": "heading",
"level": 1,
"metadata": {},
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"DOM Classes"
]
@ -584,13 +698,17 @@
"cell_type": "markdown",
"metadata": {},
"source": [
"IPython defines a large number of DOM (document object model) classes that you can apply to your widgets. Applying a DOM class causes all of the CSS associated with that class to be applied to the element. Classes can be applied and removed using the `add_class` and `remove_class` methods after a widget has been displayed. The majority of DOM classes defined by IPython are actually Bootstrap classes. For more information on Bootstrap classes and CSS, please refer to [Bootstrap's website](http://getbootstrap.com/2.3.2/)."
"IPython defines a large number of **DOM (document object model) classes** that you can apply to your widgets. Applying a DOM class causes all of the **CSS associated with that class** to be applied to the element. Classes can be applied and removed using the **`add_class` and `remove_class`** methods **after a widget has been displayed**. The majority of DOM classes defined by IPython are actually **Bootstrap classes**. For more information on Bootstrap classes and CSS, please refer to [Bootstrap's website](http://getbootstrap.com/2.3.2/)."
]
},
{
"cell_type": "heading",
"level": 2,
"metadata": {},
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"Path dependent"
]
@ -599,7 +717,7 @@
"cell_type": "markdown",
"metadata": {},
"source": [
"Both `add_class` and `remove_class` allow you to use CSS selectors to pick which sub elements of your widget get styled. Because of this, the `add_class` and `remove_class` methods are path dependent (order specific). The following example shows the same three calls made in three different orders and the resulting output. All three differ."
"Both `add_class` and `remove_class` allow you to use **CSS selectors** to pick which sub elements of your widget get styled. Because of this, the `add_class` and `remove_class` methods are **path dependent (order specific)**. The following example shows the **same three calls** made in three **different orders** and the resulting output. **All three differ.**"
]
},
{
@ -683,7 +801,11 @@
{
"cell_type": "heading",
"level": 2,
"metadata": {},
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"Alignment classes"
]
@ -692,7 +814,7 @@
"cell_type": "markdown",
"metadata": {},
"source": [
"Widgets can be aligned using IPython specific alignment classes. These classes should work with most widgets, but were designed to be applied to `ContainerWidget`s. Examples of these classes follow:\n",
"Widgets can be aligned using IPython **alignment classes**. These classes should work with most widgets, but were **designed to be applied to `ContainerWidget`s**. Examples of these classes follow:\n",
"\n",
"### Orientation classes\n",
"#### \"vbox\"\n",
@ -708,10 +830,19 @@
"<div class=\"example-box\">A</div>\n",
"<div class=\"example-box med\">B</div>\n",
"<div class=\"example-box lrg\">C</div>\n",
"</div>\n",
"\n",
"</div>"
]
},
{
"cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"### Packing classes\n",
"These examples use the hbox layout to show packing. Packing is the alignment of the widgets along the the axis that they are displayed on.\n",
"These examples use the **hbox layout** to show packing. Packing is the alignment of the widgets along the the **axis that they are displayed on**.\n",
"#### \"start\"\n",
"<div class=\"example-container hbox start\">\n",
"<div class=\"example-box\">A</div>\n",
@ -731,10 +862,19 @@
"<div class=\"example-box\">A</div>\n",
"<div class=\"example-box med\">B</div>\n",
"<div class=\"example-box lrg\">C</div>\n",
"</div>\n",
"\n",
"</div>"
]
},
{
"cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"### Aligning classes\n",
"These examples use the hbox layout to show alignment. Packing is the alignment of the widgets along the the axis perpendicular to the one that they are displayed on.\n",
"These examples use the **hbox layout** to show alignment. Packing is the alignment of the widgets along the the **axis perpendicular to the one that they are displayed on**.\n",
"#### \"align-start\"\n",
"<div class=\"example-container hbox align-start\">\n",
"<div class=\"example-box\">A</div>\n",
@ -754,10 +894,19 @@
"<div class=\"example-box\">A</div>\n",
"<div class=\"example-box med\">B</div>\n",
"<div class=\"example-box lrg\">C</div>\n",
"</div>\n",
"\n",
"</div>"
]
},
{
"cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"### Flex classes\n",
"To specify how \"greedy\" a container is when filling in the remaining space of its parent, the `box-flexN` properties are used (where N is 0, 1, or 2). The higher the value of N, the more greedy the child is. `box-flex0` is the default behavior, which is to not fill the parent.\n",
"To specify **how \"greedy\" a container is** when filling in the remaining space of its parent, the **`box-flexN`** classes are used (where N is 0, 1, or 2). The **higher the value of N, the more greedy** the child is. **`box-flex0` is the default behavior**, which is to not fill the parent.\n",
"\n",
"#### Example 1\n",
"<div class=\"example-container sm hbox center\">\n",
@ -799,13 +948,17 @@
"<div class=\"example-box box-flex0\">box-flex0</div>\n",
"<div class=\"example-box box-flex1\">box-flex1</div>\n",
"<div class=\"example-box box-flex2\">box-flex2</div>\n",
"</div>\n"
"</div>"
]
},
{
"cell_type": "heading",
"level": 3,
"metadata": {},
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"Application to widgets"
]
@ -814,7 +967,7 @@
"cell_type": "markdown",
"metadata": {},
"source": [
"Widget containers default as vertical boxes."
"Widget containers **default to vbox** alignment."
]
},
{
@ -831,11 +984,23 @@
"outputs": [],
"prompt_number": 22
},
{
"cell_type": "heading",
"level": 3,
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"Using hbox"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"To make a widget container display its widgets horizontally, you need to remove the `vbox` class from the container and add the `hbox` class in its place."
"To make a widget container display its widgets horizontally, you need to **remove the `vbox` class** from the container and **add the `hbox` class** in its place."
]
},
{
@ -874,7 +1039,11 @@
{
"cell_type": "heading",
"level": 2,
"metadata": {},
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"Style classes"
]
@ -927,7 +1096,11 @@
{
"cell_type": "heading",
"level": 3,
"metadata": {},
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"ContainerWidgets"
]
@ -957,9 +1130,13 @@
{
"cell_type": "heading",
"level": 3,
"metadata": {},
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"*ProgressWidgets"
"ProgressWidgets"
]
},
{
@ -992,7 +1169,11 @@
{
"cell_type": "heading",
"level": 2,
"metadata": {},
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"Visibility"
]
@ -1001,8 +1182,8 @@
"cell_type": "markdown",
"metadata": {},
"source": [
"Sometimes it is necessary to hide or show widgets in place, without having to re-display the widget.\n",
"The `visibility` property of widgets can be used to hide or show widgets that have already been displayed (as seen below)."
"Sometimes it is necessary to **hide or show widgets** in place, **without having to re-display** the widget.\n",
"The `visibility` property of widgets can be used to hide or show **widgets that have already been displayed** (as seen below)."
]
},
{
@ -1039,6 +1220,18 @@
"outputs": [],
"prompt_number": 30
},
{
"cell_type": "heading",
"level": 3,
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"Another example"
]
},
{
"cell_type": "markdown",
"metadata": {},