{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Widget Exercises"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Widget basics"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Displaying a widget\n",
    "\n",
    "Create and display a `Text` widget.  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 ipywidgets and IPython.display.*"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "%load soln/displaying.py"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Widget list"
   ]
  },
  {
   "cell_type": "markdown",
   "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",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "%load soln/selection.py"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Link"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Use a link to link the values of a `Textarea` widget and, an `HTML` or `Latex` widget.  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",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "%load soln/link.py"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Widget events"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### on_submit event"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Create and display a `Text` widget.  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",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "%load soln/on_submit.py"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### on_trait_change event"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Create and display a `Text` widget.  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",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "%load soln/on_trait_change.py"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Widget styling"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Colored text"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Create and display an `HTML` widget with a value of your choice (i.e. \"Hello World\").  Use its attributes to change that widget's background color and font color."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "%load soln/colored.py"
   ]
  },
  {
   "cell_type": "markdown",
   "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",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "%load soln/sliders.py"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.4.3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}