Update examples, fixing bugs found in review.

examples/Interactive Widgets/Custom Widget - Hello World.ipynb

@@ -1,797 +1,796 b''
 {
  "metadata": {
-  "celltoolbar": "Slideshow",
   "kernelspec": {
    "codemirror_mode": {
     "name": "python",
     "version": 2
    },
    "display_name": "Python 2",
    "language": "python",
    "name": "python2"
   },
   "name": "",
-  "signature": "sha256:ebbb9b368e8b07ec14fd5ee494586e605be36631657f2a9d9a6475ead41a3e04"
+  "signature": "sha256:608e0df06fe91ef1c013fd236dda33f7ae11019453f72ae446e8ce15bce82eb2"
  },
  "nbformat": 3,
  "nbformat_minor": 0,
  "worksheets": [
   {
    "cells": [
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "[Index](Index.ipynb) - [Back](Widget Styling.ipynb)"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "from __future__ import print_function # For py 2.7 compat"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "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 (as seen below).\n",
       "\n",
       "![Widget layer](images/WidgetArch.png)\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": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "Back-end (Python)"
      ]
     },
     {
      "cell_type": "heading",
      "level": 3,
      "metadata": {},
      "source": [
       "DOMWidget and Widget"
      ]
     },
     {
      "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 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": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "_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)."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "from IPython.html import widgets\n",
       "from IPython.utils.traitlets import Unicode\n",
       "\n",
       "class HelloWidget(widgets.DOMWidget):\n",
       "    _view_name = Unicode('HelloView', sync=True)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "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`."
      ]
     },
     {
      "cell_type": "heading",
      "level": 3,
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "Other traitlet types"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "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",
       "- Bytes\n",
       "- CBool\n",
       "- CBytes\n",
       "- CComplex\n",
       "- CFloat\n",
       "- CInt\n",
       "- CLong\n",
       "- CRegExp\n",
       "- CUnicode\n",
       "- CaselessStrEnum\n",
       "- Complex\n",
       "- Dict\n",
       "- DottedObjectName\n",
       "- Enum\n",
       "- Float\n",
       "- FunctionType\n",
       "- Instance\n",
       "- InstanceType\n",
       "- Int\n",
       "- List\n",
       "- Long\n",
       "- Set\n",
       "- TCPAddress\n",
       "- Tuple\n",
       "- 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."
      ]
     },
     {
      "cell_type": "heading",
      "level": 2,
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "Front-end (JavaScript)"
      ]
     },
     {
      "cell_type": "heading",
      "level": 3,
      "metadata": {},
      "source": [
       "Models and views"
      ]
     },
     {
      "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 model**."
      ]
     },
     {
      "cell_type": "heading",
      "level": 3,
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "Import the WidgetManager"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "You first need to **import the `widget` and `manager` modules**.  You will use it later to register your view by name (the same name you used in the back-end).  To import the modules, use the `require` method of [require.js](http://requirejs.org/) (as seen below)."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "%%javascript\n",
       "require([\"widgets/js/widget\", \"widgets/js/manager\"], function(widget, manager){\n",
       "    \n",
       "});"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "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**."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "%%javascript\n",
       "require([\"widgets/js/widget\", \"widgets/js/manager\"], function(widget, manager){\n",
       "    \n",
       "    // Define the HelloView\n",
       "    var HelloView = widget.DOMWidgetView.extend({\n",
       "        \n",
       "    });\n",
       "    \n",
       "    // Register the HelloView with the widget manager.\n",
       "    manager.WidgetManager.register_widget_view('HelloView', HelloView);\n",
       "});"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "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)."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "%%javascript\n",
       "require([\"widgets/js/widget\", \"widgets/js/manager\"], function(widget, manager){\n",
       "    \n",
       "    var HelloView = widget.DOMWidgetView.extend({\n",
       "        \n",
       "        // Render the view.\n",
       "        render: function(){ \n",
       "            this.$el.text('Hello World!'); \n",
       "        },\n",
       "    });\n",
       "    \n",
       "    manager.WidgetManager.register_widget_view('HelloView', HelloView);\n",
       "});"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "heading",
      "level": 2,
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "Test"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "You should be able to display your widget just like any other widget now."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "HelloWidget()"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "heading",
      "level": 2,
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "Making the widget stateful"
      ]
     },
     {
      "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 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**."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "class HelloWidget(widgets.DOMWidget):\n",
       "    _view_name = Unicode('HelloView', sync=True)\n",
       "    value = Unicode('Hello World!', sync=True)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "heading",
      "level": 3,
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "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 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": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "Rendering model contents"
      ]
     },
     {
      "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."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "%%javascript\n",
       "require([\"widgets/js/widget\", \"widgets/js/manager\"], function(widget, manager){\n",
       "    \n",
       "    var HelloView = widget.DOMWidgetView.extend({\n",
       "        \n",
       "        render: function(){ \n",
       "            this.$el.text(this.model.get('value')); \n",
       "        },\n",
       "    });\n",
       "    \n",
       "    manager.WidgetManager.register_widget_view('HelloView', HelloView);\n",
       "});"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "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)."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "%%javascript\n",
       "require([\"widgets/js/widget\", \"widgets/js/manager\"], function(widget, manager){\n",
       "    \n",
       "    var HelloView = widget.DOMWidgetView.extend({\n",
       "        \n",
       "        render: function(){ \n",
       "            this.value_changed();\n",
       "            this.model.on('change:value', this.value_changed, this);\n",
       "        },\n",
       "        \n",
       "        value_changed: function() {\n",
       "            this.$el.text(this.model.get('value')); \n",
       "        },\n",
       "    });\n",
       "    \n",
       "    manager.WidgetManager.register_widget_view('HelloView', HelloView);\n",
       "});"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "heading",
      "level": 2,
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "Test"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "w = HelloWidget()\n",
       "w"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "w.value = 'test'"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "Finishing"
      ]
     },
     {
      "cell_type": "heading",
      "level": 2,
      "metadata": {},
      "source": [
       "Bidirectional communication"
      ]
     },
     {
      "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.  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": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "Update the Python code"
      ]
     },
     {
      "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`."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "from IPython.utils.traitlets import CInt\n",
       "class SpinnerWidget(widgets.DOMWidget):\n",
       "    _view_name = Unicode('SpinnerView', sync=True)\n",
       "    value = CInt(0, sync=True)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "heading",
      "level": 3,
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "Updating the Javascript code"
      ]
     },
     {
      "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."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "%%javascript\n",
       "require([\"widgets/js/widget\", \"widgets/js/manager\"], function(widget, manager){\n",
       "    \n",
       "    var SpinnerView = widget.DOMWidgetView.extend({\n",
       "        \n",
       "        render: function(){ \n",
       "            \n",
       "            // jQuery code to create a spinner and append it to $el\n",
       "            this.$input = $('<input />');\n",
       "            this.$el.append(this.$input);\n",
       "            this.$spinner = this.$input.spinner({\n",
       "                change: function( event, ui ) {}\n",
       "            });\n",
       "            \n",
       "            this.value_changed();\n",
       "            this.model.on('change:value', this.value_changed, this);\n",
       "        },\n",
       "        \n",
       "        value_changed: function() {\n",
       "            \n",
       "        },\n",
       "    });\n",
       "    \n",
       "    manager.WidgetManager.register_widget_view('SpinnerView', SpinnerView);\n",
       "});"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "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 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.**"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "%%javascript\n",
       "require([\"widgets/js/widget\", \"widgets/js/manager\"], function(widget, manager){\n",
       "    \n",
       "    var SpinnerView = widget.DOMWidgetView.extend({\n",
       "        \n",
       "        render: function(){ \n",
       "\n",
       "            var that = this;\n",
       "            this.$input = $('<input />');\n",
       "            this.$el.append(this.$input);\n",
       "            this.$spinner = this.$input.spinner({\n",
       "                change: function( event, ui ) {\n",
       "                    that.handle_spin();\n",
       "                },\n",
       "                spin: function( event, ui ) {\n",
       "                    that.handle_spin();\n",
       "                }\n",
       "            });\n",
       "            \n",
       "            this.value_changed();\n",
       "            this.model.on('change:value', this.value_changed, this);\n",
       "        },\n",
       "        \n",
       "        value_changed: function() {\n",
       "            this.$spinner.spinner('value', this.model.get('value'));\n",
       "        },\n",
       "        \n",
       "        handle_spin: function() {\n",
       "            this.model.set('value', this.$spinner.spinner('value'));\n",
       "            this.touch();\n",
       "        },\n",
       "    });\n",
       "    \n",
       "    manager.WidgetManager.register_widget_view('SpinnerView', SpinnerView);\n",
       "});"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "heading",
      "level": 2,
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "Test"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "w = SpinnerWidget(value=5)\n",
       "w"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "w.value"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "w.value = 20"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Trying to **use the spinner with another widget**."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "from IPython.display import display\n",
       "w1 = SpinnerWidget(value=0)\n",
       "w2 = widgets.IntSlider()\n",
       "display(w1,w2)\n",
       "\n",
       "from IPython.utils.traitlets import link\n",
       "mylink = link((w1, 'value'), (w2, 'value'))"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "[Index](Index.ipynb) - [Back](Widget Styling.ipynb)"
      ]
     }
    ],
    "metadata": {}
   }
  ]
 }
  No newline at end of file

examples/Interactive Widgets/Index.ipynb

@@ -1,111 +1,111 b''
 {
  "metadata": {
   "kernelspec": {
    "codemirror_mode": {
     "name": "python",
     "version": 2
    },
    "display_name": "Python 2",
    "language": "python",
    "name": "python2"
   },
   "name": "",
-  "signature": "sha256:cbc67230b7f7d3d8c7ab3a3c5910aaa3e0caf736d0d963892cb2139683caf5fb"
+  "signature": "sha256:8e469f292b096d750dc8eeb71caa8c08b26bc722708314a26a7684c380ccd20f"
  },
  "nbformat": 3,
  "nbformat_minor": 0,
  "worksheets": [
   {
    "cells": [
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "<img src=\"../images/ipython_logo.png\">"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Back to the main [Index](../Index.ipynb)"
      ]
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "source": [
       "Interactive Widgets"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "IPython includes an architecture for interactive widgets that tie together Python code running in the kernel and JavaScript/HTML/CSS  running in the browser. These widgets enable users to explore their code and data interactively."
      ]
     },
     {
      "cell_type": "heading",
      "level": 2,
      "metadata": {},
      "source": [
       "Tutorials"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "- [Using Interact](Using Interact.ipynb)\n",
       "- [Widget Basics](Widget Basics.ipynb)  \n",
       "- [Widget Events](Widget Events.ipynb)  \n",
       "- [Widget Placement](Widget Placement.ipynb)  \n",
-      "- [Widget Styles](Widget Styles.ipynb)    \n",
+      "- [Widget Styling](Widget Styling.ipynb)    \n",
       "- [Custom Widget](Custom Widget - Hello World.ipynb)"
      ]
     },
     {
      "cell_type": "heading",
      "level": 2,
      "metadata": {},
      "source": [
       "Examples of custom widgets"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "- [Variable Inspector](Variable Inspector.ipynb)  \n",
       "- [Export As (nbconvert)](Export As (nbconvert%29.ipynb)  \n",
       "- [Nonblocking Console](Nonblocking Console.ipynb)  \n",
       "- [File Upload Widget](File Upload Widget.ipynb)"
      ]
     },
     {
      "cell_type": "heading",
      "level": 2,
      "metadata": {},
      "source": [
       "Examples using `interact`/`interactive`"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "* [Beat Frequencies](Beat Frequencies.ipynb)\n",
       "* [Exploring Graphs](Exploring Graphs.ipynb)\n",
       "* [Factoring](Factoring.ipynb)\n",
       "* [Image Browser](Image Browser.ipynb)\n",
       "* [Image Processing](Image Processing.ipynb)\n",
       "* [Lorenz Differential Equations](Lorenz Differential Equations.ipynb)"
      ]
     }
    ],
    "metadata": {}
   }
  ]
 }
  No newline at end of file

examples/Interactive Widgets/Nonblocking Console.ipynb

@@ -1,233 +1,233 b''
 {
  "metadata": {
   "kernelspec": {
    "codemirror_mode": {
     "name": "python",
     "version": 2
    },
    "display_name": "Python 2",
    "language": "python",
    "name": "python2"
   },
   "name": "",
-  "signature": "sha256:044aa64f06487b5a08eb26102a46538bfb4e00d37a4cc14edcdf54986a9ef68e"
+  "signature": "sha256:3dfbc0dcb1fefc9ef028022760916b0300e14f71bf8e27589e61800841d5839c"
  },
  "nbformat": 3,
  "nbformat_minor": 0,
  "worksheets": [
   {
    "cells": [
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "# Console related imports.\n",
       "from subprocess import Popen, PIPE\n",
       "import os\n",
       "from IPython.utils.py3compat import bytes_to_str, string_types\n",
       "\n",
       "# Widget related imports.\n",
       "from IPython.html import  widgets\n",
       "from IPython.display import display"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Define function to run a process without blocking the input."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "def read_process(process, append_output):\n",
       "    \"\"\" Try to read the stdout and stderr of a process and render it using \n",
       "    the append_output method provided\n",
       "    \n",
       "    Parameters\n",
       "    ----------\n",
       "    process: Popen handle\n",
       "    append_output: method handle\n",
       "        Callback to render output.  Signature of\n",
       "        append_output(output, [prefix=])\"\"\"\n",
       "    \n",
       "    try:\n",
       "        stdout = process.stdout.read()\n",
       "        if stdout is not None and len(stdout) > 0:\n",
       "            append_output(stdout, prefix='    ')\n",
       "    except:\n",
       "        pass\n",
       "        \n",
       "    try:\n",
       "        stderr = process.stderr.read()\n",
       "        if stderr is not None and len(stderr) > 0:\n",
       "            append_output(stderr, prefix='ERR ')\n",
       "    except:\n",
       "        pass\n",
       "\n",
       "\n",
       "def set_pipe_nonblocking(pipe):\n",
       "    \"\"\"Set a pipe as non-blocking\"\"\"\n",
       "    try:\n",
       "        import fcntl\n",
       "        fl = fcntl.fcntl(pipe, fcntl.F_GETFL)\n",
       "        fcntl.fcntl(pipe, fcntl.F_SETFL, fl | os.O_NONBLOCK)\n",
       "    except:\n",
       "        pass\n",
       "\n",
       "kernel = get_ipython().kernel\n",
       "def run_command(command, append_output, has_user_exited=None):\n",
       "    \"\"\"Run a command asyncronously\n",
       "    \n",
       "    Parameters\n",
       "    ----------\n",
       "    command: str\n",
       "        Shell command to launch a process with.\n",
       "    append_output: method handle\n",
       "        Callback to render output.  Signature of\n",
       "        append_output(output, [prefix=])\n",
       "    has_user_exited: method handle\n",
       "        Check to see if the user wants to stop the command.\n",
       "        Must return a boolean.\"\"\"\n",
       "    \n",
       "    # Echo input.\n",
       "    append_output(command, prefix='>>> ')\n",
       "    \n",
       "    # Create the process.  Make sure the pipes are set as non-blocking.\n",
       "    process = Popen(command, shell=True, stdout=PIPE, stderr=PIPE)\n",
       "    set_pipe_nonblocking(process.stdout)\n",
       "    set_pipe_nonblocking(process.stderr)\n",
       "    \n",
       "    # Only continue to read from the command \n",
       "    while (has_user_exited is None or not has_user_exited()) and process.poll() is None:\n",
       "        read_process(process, append_output)\n",
       "        kernel.do_one_iteration() # Run IPython iteration.  This is the code that\n",
       "                                  # makes this operation non-blocking.  This will\n",
       "                                  # allow widget messages and callbacks to be \n",
       "                                  # processed.\n",
       "        \n",
       "    # If the process is still running, the user must have exited.\n",
       "    if process.poll() is None:\n",
       "        process.kill()\n",
       "    else:\n",
       "        read_process(process, append_output) # Read remainer\n",
       "        \n",
       "    \n",
       "        \n",
       "        "
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Create the console widgets without displaying them."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "console_container = widgets.VBox(visible=False)\n",
       "console_container.padding = '10px'\n",
       "\n",
       "output_box = widgets.Textarea()\n",
       "output_box.height = '400px'\n",
       "output_box.font_family = 'monospace'\n",
-      "output_box.fore_color = '#AAAAAA'\n",
-      "output_box.back_color = 'black'\n",
+      "output_box.color = '#AAAAAA'\n",
+      "output_box.background_color = 'black'\n",
       "output_box.width = '800px'\n",
       "\n",
       "input_box = widgets.Text()\n",
       "input_box.font_family = 'monospace'\n",
-      "input_box.fore_color = '#AAAAAA'\n",
-      "input_box.back_color = 'black'\n",
+      "input_box.color = '#AAAAAA'\n",
+      "input_box.background_color = 'black'\n",
       "input_box.width = '800px'\n",
       "\n",
       "console_container.children = [output_box, input_box]"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Hook the process execution methods up to our console widgets."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "\n",
       "def append_output(output, prefix):\n",
       "    if isinstance(output, string_types):\n",
       "        output_str = output\n",
       "    else:\n",
       "        output_str = bytes_to_str(output)\n",
       "    output_lines = output_str.split('\\n')\n",
       "    formatted_output = '\\n'.join([prefix + line for line in output_lines if len(line) > 0]) + '\\n'\n",
       "    output_box.value += formatted_output\n",
       "    output_box.scroll_to_bottom()\n",
       "    \n",
       "def has_user_exited():\n",
       "    return not console_container.visible\n",
       "\n",
       "def handle_input(sender):\n",
       "    sender.disabled = True\n",
       "    try:\n",
       "        command = sender.value\n",
       "        sender.value = ''\n",
       "        run_command(command, append_output=append_output, has_user_exited=has_user_exited)\n",
       "    finally:\n",
       "        sender.disabled = False\n",
       "        \n",
       "input_box.on_submit(handle_input)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Create the button that will be used to display and hide the console.  Display both the console container and the new button used to toggle it."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "toggle_button = widgets.Button(description=\"Start Console\")\n",
       "def toggle_console(sender):\n",
       "    console_container.visible = not console_container.visible\n",
       "    if console_container.visible:\n",
       "        toggle_button.description=\"Stop Console\"\n",
       "        input_box.disabled = False\n",
       "    else:\n",
       "        toggle_button.description=\"Start Console\"\n",
       "toggle_button.on_click(toggle_console)\n",
       "\n",
       "display(toggle_button)\n",
       "display(console_container)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     }
    ],
    "metadata": {}
   }
  ]
 }
  No newline at end of file

examples/Interactive Widgets/Widget Basics.ipynb

@@ -1,446 +1,445 b''
 {
  "metadata": {
-  "celltoolbar": "Slideshow",
   "kernelspec": {
    "codemirror_mode": {
     "name": "python",
     "version": 2
    },
    "display_name": "Python 2",
    "language": "python",
    "name": "python2"
   },
   "name": "",
-  "signature": "sha256:942aa1b77fbab2ba0fa5e52a6e30fe1231a07e5f2a9ef9fc495e106a08e65e39"
+  "signature": "sha256:c8af7f5d30b29ee52fe6a79cf0d573c9c2d5b2f522b04731249e3208671741d3"
  },
  "nbformat": 3,
  "nbformat_minor": 0,
  "worksheets": [
   {
    "cells": [
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "[Index](Index.ipynb) - [Next](Widget List.ipynb)"
      ]
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "source": [
       "Simple Widget Introduction"
      ]
     },
     {
      "cell_type": "heading",
      "level": 2,
      "metadata": {},
      "source": [
       "What are widgets?"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "Widgets are elements that exists in both the front-end and the back-end.\n",
       "\n",
       "![Kernel & front-end diagram](../images/FrontendKernel.png)"
      ]
     },
     {
      "cell_type": "heading",
      "level": 2,
      "metadata": {},
      "source": [
       "What can they be used for?"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "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": "heading",
      "level": 2,
      "metadata": {},
      "source": [
       "Using widgets  "
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "To use the widget framework, you need to **import `IPython.html.widgets`**."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "from IPython.html.widgets import *"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "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 `IntSlider` 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."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "IntSlider()"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "heading",
      "level": 3,
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "display()"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "You can also explicitly display the widget using `display(...)`."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "from IPython.display import display\n",
       "w = IntSlider()\n",
       "display(w)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "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."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "display(w)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "heading",
      "level": 2,
      "metadata": {},
      "source": [
       "Why does displaying the same widget twice work?"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "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",
       "![Kernel & front-end diagram](images/WidgetModelView.png)"
      ]
     },
     {
      "cell_type": "heading",
      "level": 3,
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "Closing widgets"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "You can close a widget by calling its `close()` method."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "display(w)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "w.close()"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "heading",
      "level": 2,
      "metadata": {},
      "source": [
       "Widget properties"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "All of the IPython widgets **share a similar naming scheme**.  To read the value of a widget, you can query its `value` property."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "w = IntSlider()\n",
       "display(w)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "w.value"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Similarly, to set a widget's value, you can set its `value` property."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "w.value = 100"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "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**."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "w.keys"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "heading",
      "level": 3,
      "metadata": {},
      "source": [
       "Shorthand for setting the initial values of widget properties"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "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)."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "Text(value='Hello World!', disabled=True)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "heading",
      "level": 2,
      "metadata": {},
      "source": [
       "Linking two similar widgets"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "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."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "from IPython.utils.traitlets import link\n",
       "a = FloatText()\n",
       "b = FloatSlider()\n",
       "c = FloatProgress()\n",
       "display(a,b,c)\n",
       "\n",
       "\n",
       "mylink = link((a, 'value'), (b, 'value'), (c, 'value'))"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "heading",
      "level": 3,
      "metadata": {},
      "source": [
       "Unlinking widgets"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "Unlinking the widgets is simple.  All you have to do is call `.unlink` on the link object."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "mylink.unlink()"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "[Index](Index.ipynb) - [Next](Widget List.ipynb)"
      ]
     }
    ],
    "metadata": {}
   }
  ]
 }
  No newline at end of file

examples/Interactive Widgets/Widget Events.ipynb

@@ -1,235 +1,234 b''
 {
  "metadata": {
   "cell_tags": [
    [
     "<None>",
     null
    ]
   ],
-  "celltoolbar": "Slideshow",
   "kernelspec": {
    "codemirror_mode": {
     "name": "python",
     "version": 2
    },
    "display_name": "Python 2",
    "language": "python",
    "name": "python2"
   },
   "name": "",
-  "signature": "sha256:0e46490eebb11503b7a7411065535d6fbc5ebcf61a519f0b030281f303086bdc"
+  "signature": "sha256:05a3e92089b37f68e3134587ffef6ef73830e5f8b3c515ba24640d7c803820c3"
  },
  "nbformat": 3,
  "nbformat_minor": 0,
  "worksheets": [
   {
    "cells": [
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "[Index](Index.ipynb) - [Back](Widget List.ipynb) - [Next](Widget Styling.ipynb)"
      ]
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "Widget Events"
      ]
     },
     {
      "cell_type": "heading",
      "level": 2,
      "metadata": {},
      "source": [
       "Special events"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "from __future__ import print_function"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "The `Button` is not used to represent a data type.  Instead the button widget is used to **handle mouse clicks**.  The **`on_click` method** of the `Button` 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."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "from IPython.html import widgets\n",
       "print(widgets.Button.on_click.__doc__)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "heading",
      "level": 3,
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "Example"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "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."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "from IPython.display import display\n",
       "button = widgets.Button(description=\"Click Me!\")\n",
       "display(button)\n",
       "\n",
       "def on_button_clicked(b):\n",
       "    print(\"Button clicked.\")\n",
       "\n",
       "button.on_click(on_button_clicked)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "heading",
      "level": 3,
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "on_sumbit"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "The **`Text`** also has a special **`on_submit` event**.  The `on_submit` event **fires when the user hits return**."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "text = widgets.Text()\n",
       "display(text)\n",
       "\n",
       "def handle_submit(sender):\n",
       "    print(text.value)\n",
       "\n",
       "text.on_submit(handle_submit)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "heading",
      "level": 2,
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "Traitlet events"
      ]
     },
     {
      "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."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "print(widgets.Widget.on_trait_change.__doc__)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "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",
       "\n",
       "- callback()\n",
       "- callback(trait_name)\n",
       "- callback(trait_name, new_value)\n",
       "- callback(trait_name, old_value, new_value)\n",
       "\n",
       "Using this method, an example of how to output an `IntSlider`'s value as it is changed can be seen below."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "int_range = widgets.IntSlider()\n",
       "display(int_range)\n",
       "\n",
       "def on_value_change(name, value):\n",
       "    print(value)\n",
       "\n",
       "int_range.on_trait_change(on_value_change, 'value')"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "[Index](Index.ipynb) - [Back](Widget List.ipynb) - [Next](Widget Styling.ipynb)"
      ]
     }
    ],
    "metadata": {}
   }
  ]
 }
  No newline at end of file

examples/Interactive Widgets/Widget List.ipynb

@@ -1,588 +1,587 b''
 {
  "metadata": {
-  "celltoolbar": "Slideshow",
   "kernelspec": {
    "codemirror_mode": {
     "name": "python",
     "version": 2
    },
    "display_name": "Python 2",
    "language": "python",
    "name": "python2"
   },
   "name": "",
-  "signature": "sha256:869807fa658843bb4742bab3bab7ce4d164a0e3285e3bf840ad76ede2e252b79"
+  "signature": "sha256:83b39d018a7a6ae0a324b9f3d38debafbfb2ed0a114e4bbd357fb318f8f23438"
  },
  "nbformat": 3,
  "nbformat_minor": 0,
  "worksheets": [
   {
    "cells": [
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "[Index](Index.ipynb) - [Back](Widget Basics.ipynb) - [Next](Widget Events.ipynb)"
      ]
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "source": [
       "Widget List"
      ]
     },
     {
      "cell_type": "heading",
      "level": 2,
      "metadata": {},
      "source": [
       "Complete list"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "For a complete list of the widgets available to you, you can list the classes in the widget namespace (as seen below).  `Widget` and `DOMWidget`, not listed below, are base classes."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "from IPython.html import widgets\n",
       "[n for n in dir(widgets) if not n.endswith('Widget') and n[0] == n[0].upper() and not n[0] == '_']"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "heading",
      "level": 2,
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "Numeric widgets"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "There are 8 widgets distributed with IPython that are designed to display numeric values.  Widgets exist for displaying integers and floats, both bounded and unbounded.  The integer widgets share a similar naming scheme to their floating point counterparts.  By replacing `Float` with `Int` in the widget name, you can find the Integer equivalent."
      ]
     },
     {
      "cell_type": "heading",
      "level": 3,
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "FloatSlider"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "widgets.FloatSlider(\n",
       "    value=7.5,\n",
       "    min=5.0,\n",
       "    max=10.0,\n",
       "    step=0.1,\n",
       "    description='Test:',\n",
       ")"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Sliders can also be **displayed vertically**."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "widgets.FloatSlider(\n",
       "    value=7.5,\n",
       "    min=5.0,\n",
       "    max=10.0,\n",
       "    step=0.1,\n",
       "    description='Test',\n",
       "    orientation='vertical',\n",
       ")"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "heading",
      "level": 3,
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "FloatProgress"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "widgets.FloatProgress(\n",
       "    value=7.5,\n",
       "    min=5.0,\n",
       "    max=10.0,\n",
       "    step=0.1,\n",
       "    description='Loading:',\n",
       ")"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "heading",
      "level": 3,
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "BoundedFloatText"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "widgets.BoundedFloatText(\n",
       "    value=7.5,\n",
       "    min=5.0,\n",
       "    max=10.0,\n",
       "    description='Text:',\n",
       ")"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "heading",
      "level": 3,
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "FloatText"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "widgets.FloatText(\n",
       "    value=7.5,\n",
       "    description='Any:',\n",
       ")"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "heading",
      "level": 2,
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "Boolean widgets"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "There are two widgets that are designed to display a boolean value."
      ]
     },
     {
      "cell_type": "heading",
      "level": 3,
      "metadata": {},
      "source": [
       "ToggleButton"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "widgets.ToggleButton(\n",
       "    description='Click me',\n",
       "    value=False,\n",
       ")"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "heading",
      "level": 3,
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "Checkbox"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "widgets.Checkbox(\n",
       "    description='Check me',\n",
       "    value=True,\n",
       ")"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "heading",
      "level": 2,
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "Selection widgets"
      ]
     },
     {
      "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."
      ]
     },
     {
      "cell_type": "heading",
      "level": 3,
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "Dropdown"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "from IPython.display import display\n",
       "w = widgets.Dropdown(\n",
       "    values=[1, 2, 3],\n",
       "    value=2,\n",
       "    description='Number:',\n",
       ")\n",
       "display(w)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "w.value"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "The following is also valid:"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "w = widgets.Dropdown(\n",
       "    values={'One': 1, 'Two': 2, 'Three': 3},\n",
       "    value=2,\n",
       "    description='Number:',\n",
       ")\n",
       "display(w)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "w.value"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "heading",
      "level": 3,
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "RadioButtons"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "widgets.RadioButtons(\n",
       "    description='Pizza topping:',\n",
       "    values=['pepperoni', 'pineapple', 'anchovies'],\n",
       ")"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "heading",
      "level": 3,
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "Select"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "widgets.Select(\n",
       "    description='OS:',\n",
       "    values=['Linux', 'Windows', 'OSX'],\n",
       ")"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "heading",
      "level": 3,
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "ToggleButtons"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "widgets.ToggleButtons(\n",
       "    description='Speed:',\n",
       "    values=['Slow', 'Regular', 'Fast'],\n",
       ")"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "heading",
      "level": 2,
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "String widgets"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "There are 4 widgets that can be used to display a string value.  Of those, the **`Text` and `Textarea` widgets accept input**.  The **`Latex` and `HTML` widgets display the string** as either Latex or HTML respectively, but **do not accept input**."
      ]
     },
     {
      "cell_type": "heading",
      "level": 3,
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "Text"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "widgets.Text(\n",
       "    description='String:',\n",
       "    value='Hello World',\n",
       ")"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "heading",
      "level": 3,
      "metadata": {},
      "source": [
       "Textarea"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "widgets.Textarea(\n",
       "    description='String:',\n",
       "    value='Hello World',\n",
       ")"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "heading",
      "level": 3,
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "Latex"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "widgets.Latex(\n",
       "    value=\"$$\\\\frac{n!}{k!(n-k)!} = \\\\binom{n}{k}$$\",\n",
       ")"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "heading",
      "level": 3,
      "metadata": {},
      "source": [
       "HTML"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "widgets.HTML(\n",
       "    value=\"Hello <b>World</b>\"\n",
       ")"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "heading",
      "level": 2,
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "Button"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "widgets.Button(description='Click me')"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "[Index](Index.ipynb) - [Back](Widget Basics.ipynb) - [Next](Widget Events.ipynb)"
      ]
     }
    ],
    "metadata": {}
   }
  ]
 }
  No newline at end of file

examples/Interactive Widgets/Widget Styling.ipynb

@@ -1,738 +1,737 b''
 {
  "metadata": {
   "cell_tags": [
    [
     "<None>",
     null
    ]
   ],
-  "celltoolbar": "Slideshow",
   "kernelspec": {
    "codemirror_mode": {
     "name": "python",
     "version": 2
    },
    "display_name": "Python 2",
    "language": "python",
    "name": "python2"
   },
   "name": "",
-  "signature": "sha256:f6e8d46c3edeaf2371bf508730c093f8d1005cc9be13072aabf71dc3f49b2c3b"
+  "signature": "sha256:8bb091be85fd5e7f76082b1b4b98cddec92a856334935ac2c702fe5ec03f6eff"
  },
  "nbformat": 3,
  "nbformat_minor": 0,
  "worksheets": [
   {
    "cells": [
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "[Index](Index.ipynb) - [Back](Widget Events.ipynb) - [Next](Custom Widget - Hello World.ipynb)"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "%%html\n",
       "<style>\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",
       ".example-box.med { width: 65px; height: 65px; }   \n",
       ".example-box.lrg { width: 80px; height: 80px; }   \n",
       "</style>"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "from IPython.html import widgets\n",
       "from IPython.display import display"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "Widget Styling"
      ]
     },
     {
      "cell_type": "heading",
      "level": 2,
      "metadata": {},
      "source": [
       "Basic styling"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "The widgets distributed with IPython can be styled by setting the following traits:\n",
       "\n",
       "- width  \n",
       "- height  \n",
       "- fore_color  \n",
       "- back_color  \n",
       "- border_color  \n",
       "- border_width  \n",
       "- border_style  \n",
       "- font_style  \n",
       "- font_weight  \n",
       "- font_size  \n",
       "- font_family  \n",
       "\n",
       "The example below shows how a `Button` widget can be styled:"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "button = widgets.Button(\n",
       "    description='Hello World!',\n",
       "    width=100, # Integers are interpreted as pixel measurements.\n",
       "    height='2em', # em is valid HTML unit of measurement.\n",
-      "    fore_color='lime', # Colors can be set by name,\n",
-      "    back_color='#0022FF', # and also by color code.\n",
+      "    color='lime', # Colors can be set by name,\n",
+      "    background_color='#0022FF', # and also by color code.\n",
       "    border_color='red')\n",
       "display(button)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "heading",
      "level": 2,
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "Parent/child relationships"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "To display widget A inside widget B, widget A must be a child of widget B.  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."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "from IPython.display import display\n",
       "\n",
       "float_range = widgets.FloatSlider()\n",
       "string = widgets.Text(value='hi')\n",
       "container = widgets.Box(children=[float_range, string])\n",
       "\n",
       "container.border_color = 'red'\n",
       "container.border_style = 'dotted'\n",
       "container.border_width = 3\n",
       "display(container) # Displays the `container` and all of it's children."
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "heading",
      "level": 3,
      "metadata": {},
      "source": [
       "After the parent is displayed"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "Children **can be added to parents** after the parent has been displayed.  The **parent is responsible for rendering its children**."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "container = widgets.Box()\n",
       "container.border_color = 'red'\n",
       "container.border_style = 'dotted'\n",
       "container.border_width = 3\n",
       "display(container)\n",
       "\n",
       "int_range = widgets.IntSlider()\n",
       "container.children=[int_range]"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "heading",
      "level": 2,
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "Fancy boxes"
      ]
     },
     {
      "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 **`Accordion` or a `Tab` in combination with one `Box` 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**."
      ]
     },
     {
      "cell_type": "heading",
      "level": 3,
      "metadata": {},
      "source": [
       "Accordion"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "name1 = widgets.Text(description='Location:')\n",
       "zip1 = widgets.BoundedIntText(description='Zip:', min=0, max=99999)\n",
       "page1 = widgets.Box(children=[name1, zip1])\n",
       "\n",
       "name2 = widgets.Text(description='Location:')\n",
       "zip2 = widgets.BoundedIntText(description='Zip:', min=0, max=99999)\n",
       "page2 = widgets.Box(children=[name2, zip2])\n",
       "\n",
       "accord = widgets.Accordion(children=[page1, page2])\n",
       "display(accord)\n",
       "\n",
       "accord.set_title(0, 'From')\n",
       "accord.set_title(1, 'To')"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "heading",
      "level": 3,
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "TabWidget"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "name = widgets.Text(description='Name:')\n",
       "color = widgets.Dropdown(description='Color:', values=['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'])\n",
       "page1 = widgets.Box(children=[name, color])\n",
       "\n",
       "age = widgets.IntSlider(description='Age:', min=0, max=120, value=50)\n",
       "gender = widgets.RadioButtons(description='Gender:', values=['male', 'female'])\n",
       "page2 = widgets.Box(children=[age, gender])\n",
       "\n",
       "tabs = widgets.Tab(children=[page1, page2])\n",
       "display(tabs)\n",
       "\n",
       "tabs.set_title(0, 'Name')\n",
       "tabs.set_title(1, 'Details')"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "heading",
      "level": 3,
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "Popup"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Unlike the other two special containers, the `Popup` is only **designed to display one set of widgets**.  The `Popup` can be used to **display widgets outside of the widget area**.  "
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "counter = widgets.IntText(description='Counter:')\n",
       "popup = widgets.Popup(children=[counter], description='Popup Demo', button_text='Popup Button')\n",
       "display(popup)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "counter.value += 1"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "counter.value += 1"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "popup.close()"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "Alignment"
      ]
     },
     {
      "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**:"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "display(widgets.Text(description=\"a:\"))\n",
       "display(widgets.Text(description=\"aa:\"))\n",
       "display(widgets.Text(description=\"aaa:\"))"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "markdown",
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "If a **label is longer** than the minimum width, the **widget is shifted to the right**:"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "display(widgets.Text(description=\"a:\"))\n",
       "display(widgets.Text(description=\"aa:\"))\n",
       "display(widgets.Text(description=\"aaa:\"))\n",
       "display(widgets.Text(description=\"aaaaaaaaaaaaaaaaaa:\"))"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "markdown",
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "If a `description` is **not set** for the widget, the **label is not displayed**:"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "display(widgets.Text(description=\"a:\"))\n",
       "display(widgets.Text(description=\"aa:\"))\n",
       "display(widgets.Text(description=\"aaa:\"))\n",
       "display(widgets.Text())"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "heading",
      "level": 2,
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "Flex boxes"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Widgets can be aligned using the `FlexBox`, `HBox`, and `VBox` widgets."
      ]
     },
     {
      "cell_type": "heading",
      "level": 3,
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "Application to widgets"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Widgets display vertically by default:"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "buttons = [widgets.Button(description=str(i)) for i in range(3)]\n",
       "display(*buttons)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "heading",
      "level": 3,
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "Using hbox"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "To make widgets display horizontally, you need to **child them to a `HBox` widget**."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "container = widgets.HBox(children=buttons)\n",
       "display(container)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "By setting the width of the container to 100% and its `pack` to `center`, you can center the buttons."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "container.width = '100%'\n",
       "container.pack = 'center'"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "heading",
      "level": 2,
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "Visibility"
      ]
     },
     {
      "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)."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "string = widgets.Latex(value=\"Hello World!\")\n",
       "display(string) "
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "string.visible=False"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "string.visible=True"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "heading",
      "level": 3,
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "Another example"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "In the example below, a form is rendered, which conditionally displays widgets depending on the state of other widgets.  Try toggling the student checkbox."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "form = widgets.VBox()\n",
       "first = widgets.Text(description=\"First Name:\")\n",
       "last = widgets.Text(description=\"Last Name:\")\n",
       "\n",
       "student = widgets.Checkbox(description=\"Student:\", value=False)\n",
       "school_info = widgets.VBox(visible=False, children=[\n",
       "    widgets.Text(description=\"School:\"),\n",
       "    widgets.IntText(description=\"Grade:\", min=0, max=12)\n",
       "    ])\n",
       "\n",
       "pet = widgets.Text(description=\"Pet's Name:\")\n",
       "form.children = [first, last, student, school_info, pet]\n",
       "display(form)\n",
       "\n",
       "def on_student_toggle(name, value):\n",
       "    if value:\n",
       "        school_info.visible = True\n",
       "    else:\n",
       "        school_info.visible = False\n",
       "student.on_trait_change(on_student_toggle, 'value')\n"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "[Index](Index.ipynb) - [Back](Widget Events.ipynb) - [Next](Custom Widget - Hello World.ipynb)"
      ]
     }
    ],
    "metadata": {}
   }
  ]
 }
  No newline at end of file