{
 "metadata": {
  "name": "",
  "signature": "sha256:72d32441cc665b6dbb50c5b730b7c3bc3034b00bc84a02c91ff6c19b3c8d40f0"
 },
 "nbformat": 3,
 "nbformat_minor": 0,
 "worksheets": [
  {
   "cells": [
    {
     "cell_type": "heading",
     "level": 1,
     "metadata": {},
     "source": [
      "Widget Exercises"
     ]
    },
    {
     "cell_type": "heading",
     "level": 2,
     "metadata": {},
     "source": [
      "Widget basics"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "### Displaying a widget\n",
      "Create and display a `TextWidget`.  Change that widget's `value` and some of it's other properties.  Discover the other properties by querying the `keys` property of the instance.  \n",
      "\n",
      "*Hint: You'll need to import from IPython.html.widgets and IPython.display.*"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%load soln/displaying.py"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 1
    },
    {
     "cell_type": "heading",
     "level": 2,
     "metadata": {},
     "source": [
      "Widget list"
     ]
    },
    {
     "cell_type": "heading",
     "level": 3,
     "metadata": {},
     "source": [
      "Selection widget"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Create and display one of the selection widgets (dropdown, select, radiobuttons, or togglebuttons).  Use the dictionary syntax to set the list of possible values.  The values should be \"Left\" = 0, \"Center\" = 1, and \"Right\" = 2.  Try reading and setting the value programmatically."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%load soln/selection.py"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 3
    },
    {
     "cell_type": "heading",
     "level": 3,
     "metadata": {},
     "source": [
      "Link"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Use a link to link the values of a `TextareaWidget` and, an `HTMLWidget` or a `LatexWidget`.  Display the widgets and try typing Latex and HTML in the textarea.  \n",
      "\n",
      "*Hint: Look at the Widget Basics notebook for an example of how to use link.*"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%load soln/link.py"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 5
    },
    {
     "cell_type": "heading",
     "level": 2,
     "metadata": {},
     "source": [
      "Widget events"
     ]
    },
    {
     "cell_type": "heading",
     "level": 3,
     "metadata": {},
     "source": [
      "on_submit event"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Create and display a `TextWidget`.  Use the `on_submit` event to print the value of the textbox just before you clear the textbox.  \n",
      "\n",
      "*Hint: The `on_submit` callback must accept one argument, the `sender`.*"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%load soln/on_submit.py"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 9
    },
    {
     "cell_type": "heading",
     "level": 3,
     "metadata": {},
     "source": [
      "on_trait_change event"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Create and display a `TextWidget`.  Use the `on_trait_change` method to register a callback that prints the value of the textbox without clearing it.  Observe the difference in behavior to Exercise 1."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%load soln/on_trait_change.py"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 11
    },
    {
     "cell_type": "heading",
     "level": 2,
     "metadata": {},
     "source": [
      "Widget styling"
     ]
    },
    {
     "cell_type": "heading",
     "level": 3,
     "metadata": {},
     "source": [
      "Colored text"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Create and display an `HTMLWidget` with a value of your choice (i.e. \"Hello World\").  Use `set_css` to change that widget's background color and font color."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%load soln/colored.py"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 13
    },
    {
     "cell_type": "heading",
     "level": 3,
     "metadata": {},
     "source": [
      "Vertical sliders"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Create an array of 10 or more vertical sliders.  Align the sliders using a container so they look like an equalizer.  \n",
      "\n",
      "*Hint: Refer to the Widget List notebook for an example of how to display a vertical slider.*"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%loadpy soln/sliders.py"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 15
    }
   ],
   "metadata": {}
  }
 ]
}