examples/Interactive Widgets/Widget Basics.ipynb

{
 "metadata": {
  "kernelspec": {
   "codemirror_mode": {
    "name": "python",
    "version": 2
   },
   "display_name": "Python 2",
   "language": "python",
   "name": "python2"
  },
  "name": "",
  "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": {}
  }
 ]
}