Work on widget tutorials

examples/Widgets/Tutorials/Alignment.ipynb

@@ -1,349 +1,335 b''
 {
  "metadata": {
   "cell_tags": [
    [
     "<None>",
     null
    ]
   ],
   "name": "",
-  "signature": "sha256:25599ae01786ec88374ddc5bd814583b1c0cd9fbe69f59fefaeba5c3b1507735"
+  "signature": "sha256:19f2a57c9ac75d472a9e403515009613fac3fbc733219f7fd4f39a0616ca619f"
  },
  "nbformat": 3,
  "nbformat_minor": 0,
  "worksheets": [
   {
    "cells": [
     {
-     "cell_type": "markdown",
-     "metadata": {},
-     "source": [
-      "[< Back to Part 4](Part 4 - Styles.ipynb) or [Index](index.ipynb)"
-     ]
-    },
-    {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "from IPython.html import widgets # Widget definitions\n",
       "from IPython.display import display # Used to display widgets in the notebook"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 1
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "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.TextWidget(description=\"a:\"))\n",
       "display(widgets.TextWidget(description=\"aa:\"))\n",
       "display(widgets.TextWidget(description=\"aaa:\"))"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 2
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "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.TextWidget(description=\"a:\"))\n",
       "display(widgets.TextWidget(description=\"aa:\"))\n",
       "display(widgets.TextWidget(description=\"aaa:\"))\n",
       "display(widgets.TextWidget(description=\"aaaaaaaaaaaaaaaaaa:\"))"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 3
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "If a `description` is not set for the widget, the label is not displayed:"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "display(widgets.TextWidget(description=\"a:\"))\n",
       "display(widgets.TextWidget(description=\"aa:\"))\n",
       "display(widgets.TextWidget(description=\"aaa:\"))\n",
       "display(widgets.TextWidget())"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 4
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "source": [
       "Custom Alignment"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "`ContainerWidget`s allow for custom alignment of widgets.\n",
       "The `hbox` and `vbox` CSS classes cause the `ContainerWidget` to horizontally or vertically align its children."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "child_style = {\n",
       "    'background': '#77CC77',\n",
       "    'padding': '25px',\n",
       "    'margin': '5px',\n",
       "    'font-size': 'xx-large',\n",
       "    'color': 'white',\n",
       "}\n",
       "\n",
       "def make_container(title):\n",
       "    header = widgets.LatexWidget(value=title) \n",
       "    display(header)\n",
       "    header.set_css({\n",
       "        'font-size': '30pt',\n",
       "        'margin-top': '40pt',\n",
       "        'margin-bottom': '20pt',\n",
       "    })\n",
       "    \n",
       "    container = widgets.ContainerWidget()\n",
       "    container.set_css({\n",
       "        'background': '#999999',\n",
       "        'width': '100%',\n",
       "    })\n",
       "    display(container)\n",
       "    return container\n",
       "\n",
       "def fill_container(container):\n",
       "    components = []\n",
       "    for i in range(3):\n",
       "        components.append(widgets.LatexWidget(value=\"ABC\"[i]))\n",
       "        components[i].set_css(child_style)\n",
       "    container.children = components\n",
       "    \n",
       "container = make_container('VBox')\n",
       "container.add_class('vbox')\n",
       "fill_container(container)\n",
       "\n",
       "container = make_container('HBox')\n",
       "container.remove_class('vbox')\n",
       "container.add_class('hbox')\n",
       "fill_container(container)\n"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 5
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "The `start`, `center`, and `end` classes adjust the alignment of the widgets on the axis where they are being rendered.\n",
       "Below is an example of the different alignments."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "container = make_container('HBox Pack Start')\n",
       "container.remove_class('vbox')\n",
       "container.add_class('hbox')\n",
       "container.add_class('start')\n",
       "fill_container(container)\n",
       "    \n",
       "container = make_container('HBox Pack Center')\n",
       "container.remove_class('vbox')\n",
       "container.add_class('hbox')\n",
       "container.add_class('center')\n",
       "fill_container(container)\n",
       "    \n",
       "container = make_container('HBox Pack End')\n",
       "container.remove_class('vbox')\n",
       "container.add_class('hbox')\n",
       "container.add_class('end')\n",
       "fill_container(container)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 6
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "The `box-flex0`, `box-flex1`, and `box-flex2` DOM classes modify the container's flexibility.  Changing a container flexibility affects how and if the container will occupy the remaining space.  Applying `box-flex0` has the same result as not applying flex.  Below is an example of different flex configurations.  The number on the boxes correspond to the applied flex."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "def fill_container(container, flexes):\n",
       "    components = []\n",
       "    for i in range(len(flexes)):\n",
       "        components.append(widgets.ContainerWidget())\n",
       "        components[i].set_css(child_style)\n",
       "        \n",
       "        label = widgets.LatexWidget(value=str(flexes[i]))\n",
       "        components[i].children = [label]\n",
       "    container.children = components\n",
       "        \n",
       "    for i in range(len(flexes)):\n",
       "        if flexes[i] == 0:\n",
       "            components[i].add_class('box-flex0')\n",
       "        elif flexes[i] == 1:\n",
       "            components[i].add_class('box-flex1')\n",
       "        elif flexes[i] == 2:\n",
       "            components[i].add_class('box-flex2')\n",
       "        \n",
       "container = make_container('Different Flex Configurations')\n",
       "container.remove_class('vbox')\n",
       "container.add_class('hbox')\n",
       "fill_container(container, [0, 0, 0])\n",
       "        \n",
       "container = make_container('')\n",
       "container.remove_class('vbox')\n",
       "container.add_class('hbox')\n",
       "fill_container(container, [0, 0, 1])\n",
       "        \n",
       "container = make_container('')\n",
       "container.remove_class('vbox')\n",
       "container.add_class('hbox')\n",
       "fill_container(container, [0, 1, 1])\n",
       "        \n",
       "container = make_container('')\n",
       "container.remove_class('vbox')\n",
       "container.add_class('hbox')\n",
       "fill_container(container, [0, 2, 2])\n",
       "        \n",
       "container = make_container('')\n",
       "container.remove_class('vbox')\n",
       "container.add_class('hbox')\n",
       "fill_container(container, [0, 1, 2])\n",
       "        \n",
       "container = make_container('')\n",
       "container.remove_class('vbox')\n",
       "container.add_class('hbox')\n",
       "fill_container(container, [1, 1, 2])"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 7
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "The `align_start`, `align_center`, and `align_end` DOM classes adjust the alignment of the widgets on the axis perpindicular to the one that they are being rendered on.  Below is an example of the different alignments."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "def fill_container(container):\n",
       "    components = []\n",
       "    for i in range(3):\n",
       "        components.append(widgets.LatexWidget(parent=container, value=\"ABC\"[i]))\n",
       "        components[i].set_css(child_style)\n",
       "        components[i].set_css('height', str((i+1) * 50) + 'px')\n",
       "    container.children = components\n",
       "\n",
       "container = make_container('HBox Align Start')\n",
       "container.remove_class('vbox')\n",
       "container.add_class(\"hbox\")\n",
       "container.add_class(\"align-start\")\n",
       "fill_container(container)\n",
       "    \n",
       "container = make_container('HBox Align Center')\n",
       "container.remove_class('vbox')\n",
       "container.add_class(\"hbox\")\n",
       "container.add_class(\"align-center\")\n",
       "fill_container(container)\n",
       "    \n",
       "container = make_container('HBox Align End')\n",
       "container.remove_class('vbox')\n",
       "container.add_class(\"hbox\")\n",
       "container.add_class(\"align-end\")\n",
       "fill_container(container)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 8
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "By default the widget area is a `vbox`; however, there are many uses for a `hbox`.  The example below uses a `hbox` to display a set of vertical sliders, like an equalizer."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "container = widgets.ContainerWidget()\n",
       "container.children=[widgets.FloatSliderWidget(orientation='vertical', description=str(i+1), value=50.0) \n",
       "                    for i in range(15)]\n",
       "display(container)\n",
       "container.remove_class('vbox')\n",
       "container.add_class('hbox')"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 9
-    },
-    {
-     "cell_type": "markdown",
-     "metadata": {},
-     "source": [
-      "In [Part 6](Part 6 - Custom Widget.ipynb) of this [series](index.ipynb), you will learn how to create your own custom widget."
-     ]
     }
    ],
    "metadata": {}
   }
  ]
 }
  No newline at end of file

examples/Widgets/Tutorials/Basics.ipynb

@@ -1,314 +1,306 b''
 {
  "metadata": {
   "cell_tags": [
    [
     "<None>",
     null
    ]
   ],
-  "name": ""
+  "name": "",
+  "signature": "sha256:9a70b52f0b16861d1cd6a8342b233247958977a52bde8d3efd69d21131ce1926"
  },
  "nbformat": 3,
  "nbformat_minor": 0,
  "worksheets": [
   {
    "cells": [
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
-      "[Index](index.ipynb)\n",
-      "\n",
       "To use IPython widgets in the notebook, the widget namespace needs to be imported."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "from IPython.html import widgets # Widget definitions\n",
       "from IPython.display import display # Used to display widgets in the notebook"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 1
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "source": [
       "Basic Widgets"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "IPython comes with basic widgets that represent common interactive controls.  These widgets are\n",
       "\n",
       "- CheckboxWidget\n",
       "- ToggleButtonWidget\n",
       "- FloatSliderWidget\n",
       "- BoundedFloatTextWidget\n",
       "- FloatProgressWidget\n",
       "- FloatTextWidget\n",
       "- ImageWidget\n",
       "- IntSliderWidget\n",
       "- BoundedIntTextWidget\n",
       "- IntProgressWidget\n",
       "- IntTextWidget\n",
       "- ToggleButtonsWidget\n",
       "- RadioButtonsWidget\n",
       "- DropdownWidget\n",
       "- SelectWidget\n",
       "- HTMLWidget\n",
       "- LatexWidget\n",
       "- TextareaWidget\n",
       "- TextWidget\n",
       "- ButtonWidget\n",
       "\n",
       "A few special widgets are also included, that can be used to capture events and change how other widgets are displayed.  These widgets are\n",
       "\n",
       "- ContainerWidget\n",
       "- PopupWidget\n",
       "- AccordionWidget\n",
       "- TabWidget\n",
       "\n",
       "To see the complete list of widgets, one can execute the following"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "[widget for widget in dir(widgets) if widget.endswith('Widget')]"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "metadata": {},
        "output_type": "pyout",
        "prompt_number": 2,
        "text": [
         "['AccordionWidget',\n",
         " 'BoundedFloatTextWidget',\n",
         " 'BoundedIntTextWidget',\n",
         " 'ButtonWidget',\n",
         " 'CheckboxWidget',\n",
         " 'ContainerWidget',\n",
         " 'DOMWidget',\n",
         " 'DropdownWidget',\n",
         " 'FloatProgressWidget',\n",
         " 'FloatSliderWidget',\n",
         " 'FloatTextWidget',\n",
         " 'HTMLWidget',\n",
         " 'ImageWidget',\n",
         " 'IntProgressWidget',\n",
         " 'IntSliderWidget',\n",
         " 'IntTextWidget',\n",
         " 'LatexWidget',\n",
         " 'PopupWidget',\n",
         " 'RadioButtonsWidget',\n",
         " 'SelectWidget',\n",
         " 'TabWidget',\n",
         " 'TextWidget',\n",
         " 'TextareaWidget',\n",
         " 'ToggleButtonWidget',\n",
         " 'ToggleButtonsWidget',\n",
         " 'Widget']"
        ]
       }
      ],
      "prompt_number": 2
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "The basic widgets all have sensible default values.  Create a *FloatSliderWidget* without displaying it:"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "mywidget = widgets.FloatSliderWidget()"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 3
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Constructing a widget does not display it on the page.  To display a widget, the widget must be passed to the IPython `display(object)` method or must be returned as the last item in the cell.  `mywidget` is displayed by"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "display(mywidget)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 4
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "or"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "mywidget"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 5
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "It's important to realize that widgets are not the same as output, even though they are displayed with `display`.  Widgets are drawn in a special widget area.  That area is marked with a close button which allows you to collapse the widgets.  Widgets cannot be interleaved with output.  Doing so would break the ability to make simple animations using `clear_output`.\n",
       "\n",
       "Widgets are manipulated via special instance attributes (traitlets).  The names of these traitlets are listed in the widget's `keys` attribute (as seen below).  A few of these attributes are common to most widgets.  The basic attributes are `value`, `description`, `visible`, and `disabled`.  `_css` and `_view_name` are private attributes that exist in all widgets and should not be modified."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "mywidget.keys"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "metadata": {},
        "output_type": "pyout",
        "prompt_number": 6,
        "text": [
         "['_view_name',\n",
         " 'orientation',\n",
         " 'min',\n",
         " 'max',\n",
         " '_css',\n",
         " 'value',\n",
         " 'disabled',\n",
         " 'visible',\n",
         " 'step',\n",
         " 'description']"
        ]
       }
      ],
      "prompt_number": 6
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Changing a widget's attribute will automatically update that widget everywhere it is displayed in the notebook.  Here, the `value` attribute of `mywidget` is set.  The slider shown above updates automatically with the new value.  Syncing also works in the other direction - changing the value of the displayed widget will update the property's value."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "mywidget.value = 25.0"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 7
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "After changing the widget's value in the notebook by hand to 0.0 (sliding the bar to the far left)."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "mywidget.value"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "metadata": {},
        "output_type": "pyout",
        "prompt_number": 8,
        "text": [
         "25.0"
        ]
       }
      ],
      "prompt_number": 8
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Widget values can also be set with kwargs during the construction of the widget (as seen below)."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "mysecondwidget = widgets.RadioButtonsWidget(values=[\"Item A\", \"Item B\", \"Item C\"], value=\"Item A\")\n",
       "display(mysecondwidget)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 9
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "mysecondwidget.value"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "metadata": {},
        "output_type": "pyout",
        "prompt_number": 10,
        "text": [
         "'Item A'"
        ]
       }
      ],
      "prompt_number": 10
-    },
-    {
-     "cell_type": "markdown",
-     "metadata": {},
-     "source": [
-      "In [Part 2](Part 2 - Events.ipynb) of this [series](index.ipynb), you will learn about widget events."
-     ]
     }
    ],
    "metadata": {}
   }
  ]
 }
  No newline at end of file

examples/Widgets/Tutorials/Custom Widgets.ipynb

@@ -1,1058 +1,1049 b''
 {
  "metadata": {
   "cell_tags": [
    [
     "<None>",
     null
    ]
   ],
   "name": ""
  },
  "nbformat": 3,
  "nbformat_minor": 0,
  "worksheets": [
   {
    "cells": [
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
-      "[< Back to Part 5](Part 5 - Alignment.ipynb) or [Index](index.ipynb)\n",
-      "\n",
       "Before reading, make sure to review\n",
       "\n",
       "- [MVC prgramming](http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller)\n",
       "- [Backbone.js](https://www.codeschool.com/courses/anatomy-of-backbonejs)\n",
       "- [The widget IPEP](https://github.com/ipython/ipython/wiki/IPEP-23%3A-Backbone.js-Widgets)\n",
       "- [The original widget PR discussion](https://github.com/ipython/ipython/pull/4374)"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "from __future__ import print_function # For py 2.7 compat\n",
       "\n",
       "from IPython.html import widgets # Widget definitions\n",
       "from IPython.display import display # Used to display widgets in the notebook\n",
       "from IPython.utils.traitlets import Unicode # Used to declare attributes of our widget"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 1
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "source": [
       "Abstract"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "This notebook implements a custom date picker widget,\n",
       "in order to demonstrate the widget creation process.\n",
       "\n",
       "To create a custom widget, both Python and JavaScript code is required."
      ]
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "source": [
       "Section 1 - Basics"
      ]
     },
     {
      "cell_type": "heading",
      "level": 2,
      "metadata": {},
      "source": [
       "Python"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "When starting a project like this, it is often easiest to make a simple base implementation,\n",
       "to verify that the underlying framework is working as expected.\n",
       "To start, we will create an empty widget and make sure that it can be rendered.\n",
       "The first step is to define the widget in Python."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "class DateWidget(widgets.DOMWidget):\n",
       "    _view_name = Unicode('DatePickerView', sync=True)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 2
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Our widget inherits from `widgets.DOMWidget` since it is intended that it will be displayed in the notebook directly.\n",
       "The `_view_name` trait is special; the widget framework will read the `_view_name` trait to determine what Backbone view the widget is associated with.\n",
       "**Using `sync=True` is very important** because it tells the widget framework that that specific traitlet should be synced between the front- and back-ends."
      ]
     },
     {
      "cell_type": "heading",
      "level": 2,
      "metadata": {},
      "source": [
       "JavaScript"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "In the IPython notebook [require.js](http://requirejs.org/) is used to load JavaScript dependencies.\n",
       "All IPython widget code depends on `widgets/js/widget.js`,\n",
       "where the base widget model and base view are defined.\n",
       "We use require.js to load this file:"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "%%javascript\n",
       "\n",
       "require([\"widgets/js/widget\"], function(WidgetManager){\n",
       "\n",
       "});"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "javascript": [
         "\n",
         "require([\"widgets/js/widget\"], function(WidgetManager){\n",
         "\n",
         "});"
        ],
        "metadata": {},
        "output_type": "display_data",
        "text": [
         "<IPython.core.display.Javascript at 0x109491690>"
        ]
       }
      ],
      "prompt_number": 3
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Now we need to define a view that can be used to represent the model.\n",
       "To do this, the `IPython.DOMWidgetView` is extended.\n",
       "**A render function must be defined**.\n",
       "The render function is used to render a widget view instance to the DOM.\n",
       "For now, the render function renders a div that contains the text *Hello World!*\n",
       "Lastly, the view needs to be registered with the widget manager.\n",
       "\n",
       "**Final JavaScript code below:**"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "%%javascript\n",
       "\n",
       "require([\"widgets/js/widget\"], function(WidgetManager){\n",
       "    \n",
       "    // Define the DatePickerView\n",
       "    var DatePickerView = IPython.DOMWidgetView.extend({\n",
       "        render: function(){ this.$el.text('Hello World!'); },\n",
       "    });\n",
       "    \n",
       "    // Register the DatePickerView with the widget manager.\n",
       "    WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
       "});"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "javascript": [
         "\n",
         "require([\"widgets/js/widget\"], function(WidgetManager){\n",
         "    \n",
         "    // Define the DatePickerView\n",
         "    var DatePickerView = IPython.DOMWidgetView.extend({\n",
         "        render: function(){ this.$el.text('Hello World!'); },\n",
         "    });\n",
         "    \n",
         "    // Register the DatePickerView with the widget manager.\n",
         "    WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
         "});"
        ],
        "metadata": {},
        "output_type": "display_data",
        "text": [
         "<IPython.core.display.Javascript at 0x1094917d0>"
        ]
       }
      ],
      "prompt_number": 4
     },
     {
      "cell_type": "heading",
      "level": 2,
      "metadata": {},
      "source": [
       "Test"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "To test what we have so far, create the widget, just like you would the builtin widgets:"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "DateWidget()"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 5
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "source": [
       "Section 2 - Something useful"
      ]
     },
     {
      "cell_type": "heading",
      "level": 2,
      "metadata": {},
      "source": [
       "Python"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "In the last section we created a simple widget that displayed *Hello World!*\n",
       "To make an actual date widget, we need to add a property that will be synced between the Python model and the JavaScript model.\n",
       "The new attribute must be a traitlet, so the widget machinery can handle it.\n",
       "The traitlet must be constructed with a `sync=True` keyword argument, to tell the widget machinery knows to synchronize it with the front-end.\n",
       "Adding this to the code from the last section:"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "class DateWidget(widgets.DOMWidget):\n",
       "    _view_name = Unicode('DatePickerView', sync=True)\n",
       "    value = Unicode(sync=True)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 6
     },
     {
      "cell_type": "heading",
      "level": 2,
      "metadata": {},
      "source": [
       "JavaScript"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "In the JavaScript, there is no need to define counterparts to the traitlets.\n",
       "When the JavaScript model is created for the first time,\n",
       "it copies all of the traitlet `sync=True` attributes from the Python model.\n",
       "We need to replace *Hello World!* with an actual HTML date picker widget."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "%%javascript\n",
       "\n",
       "require([\"widgets/js/widget\"], function(WidgetManager){\n",
       "    \n",
       "    // Define the DatePickerView\n",
       "    var DatePickerView = IPython.DOMWidgetView.extend({\n",
       "        render: function(){\n",
       "            \n",
       "            // Create the date picker control.\n",
       "            this.$date = $('<input />')\n",
       "                .attr('type', 'date')\n",
       "                .appendTo(this.$el);\n",
       "        },\n",
       "    });\n",
       "    \n",
       "    // Register the DatePickerView with the widget manager.\n",
       "    WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
       "});"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "javascript": [
         "\n",
         "require([\"widgets/js/widget\"], function(WidgetManager){\n",
         "    \n",
         "    // Define the DatePickerView\n",
         "    var DatePickerView = IPython.DOMWidgetView.extend({\n",
         "        render: function(){\n",
         "            \n",
         "            // Create the date picker control.\n",
         "            this.$date = $('<input />')\n",
         "                .attr('type', 'date')\n",
         "                .appendTo(this.$el);\n",
         "        },\n",
         "    });\n",
         "    \n",
         "    // Register the DatePickerView with the widget manager.\n",
         "    WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
         "});"
        ],
        "metadata": {},
        "output_type": "display_data",
        "text": [
         "<IPython.core.display.Javascript at 0x109491750>"
        ]
       }
      ],
      "prompt_number": 7
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "In order to get the HTML date picker to update itself with the value set in the back-end, we need to implement an `update()` method."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "%%javascript\n",
       "\n",
       "require([\"widgets/js/widget\"], function(WidgetManager){\n",
       "    \n",
       "    // Define the DatePickerView\n",
       "    var DatePickerView = IPython.DOMWidgetView.extend({\n",
       "        render: function(){\n",
       "            \n",
       "            // Create the date picker control.\n",
       "            this.$date = $('<input />')\n",
       "                .attr('type', 'date')\n",
       "                .appendTo(this.$el);\n",
       "        },\n",
       "        \n",
       "        update: function() {\n",
       "            \n",
       "            // Set the value of the date control and then call base.\n",
       "            this.$date.val(this.model.get('value')); // ISO format \"YYYY-MM-DDTHH:mm:ss.sssZ\" is required\n",
       "            return DatePickerView.__super__.update.apply(this);\n",
       "        },\n",
       "    });\n",
       "    \n",
       "    // Register the DatePickerView with the widget manager.\n",
       "    WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
       "});"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "javascript": [
         "\n",
         "require([\"widgets/js/widget\"], function(WidgetManager){\n",
         "    \n",
         "    // Define the DatePickerView\n",
         "    var DatePickerView = IPython.DOMWidgetView.extend({\n",
         "        render: function(){\n",
         "            \n",
         "            // Create the date picker control.\n",
         "            this.$date = $('<input />')\n",
         "                .attr('type', 'date')\n",
         "                .appendTo(this.$el);\n",
         "        },\n",
         "        \n",
         "        update: function() {\n",
         "            \n",
         "            // Set the value of the date control and then call base.\n",
         "            this.$date.val(this.model.get('value')); // ISO format \"YYYY-MM-DDTHH:mm:ss.sssZ\" is required\n",
         "            return DatePickerView.__super__.update.apply(this);\n",
         "        },\n",
         "    });\n",
         "    \n",
         "    // Register the DatePickerView with the widget manager.\n",
         "    WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
         "});"
        ],
        "metadata": {},
        "output_type": "display_data",
        "text": [
         "<IPython.core.display.Javascript at 0x109491750>"
        ]
       }
      ],
      "prompt_number": 8
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "To get the changed value from the frontend to publish itself to the backend,\n",
       "we need to listen to the change event triggered by the HTM date control and set the value in the model.\n",
       "After the date change event fires and the new value is set in the model,\n",
       "it is very important that we call `this.touch()` to let the widget machinery know which view changed the model.\n",
       "This is important because the widget machinery needs to know which cell to route the message callbacks to.\n",
       "\n",
       "**Final JavaScript code below:**"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "%%javascript\n",
       "\n",
       "\n",
       "require([\"widgets/js/widget\"], function(WidgetManager){\n",
       "    \n",
       "    // Define the DatePickerView\n",
       "    var DatePickerView = IPython.DOMWidgetView.extend({\n",
       "        render: function(){\n",
       "            \n",
       "            // Create the date picker control.\n",
       "            this.$date = $('<input />')\n",
       "                .attr('type', 'date')\n",
       "                .appendTo(this.$el);\n",
       "        },\n",
       "        \n",
       "        update: function() {\n",
       "            \n",
       "            // Set the value of the date control and then call base.\n",
       "            this.$date.val(this.model.get('value')); // ISO format \"YYYY-MM-DDTHH:mm:ss.sssZ\" is required\n",
       "            return DatePickerView.__super__.update.apply(this);\n",
       "        },\n",
       "        \n",
       "        // Tell Backbone to listen to the change event of input controls (which the HTML date picker is)\n",
       "        events: {\"change\": \"handle_date_change\"},\n",
       "        \n",
       "        // Callback for when the date is changed.\n",
       "        handle_date_change: function(event) {\n",
       "            this.model.set('value', this.$date.val());\n",
       "            this.touch();\n",
       "        },\n",
       "    });\n",
       "    \n",
       "    // Register the DatePickerView with the widget manager.\n",
       "    WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
       "});"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "javascript": [
         "\n",
         "\n",
         "require([\"widgets/js/widget\"], function(WidgetManager){\n",
         "    \n",
         "    // Define the DatePickerView\n",
         "    var DatePickerView = IPython.DOMWidgetView.extend({\n",
         "        render: function(){\n",
         "            \n",
         "            // Create the date picker control.\n",
         "            this.$date = $('<input />')\n",
         "                .attr('type', 'date')\n",
         "                .appendTo(this.$el);\n",
         "        },\n",
         "        \n",
         "        update: function() {\n",
         "            \n",
         "            // Set the value of the date control and then call base.\n",
         "            this.$date.val(this.model.get('value')); // ISO format \"YYYY-MM-DDTHH:mm:ss.sssZ\" is required\n",
         "            return DatePickerView.__super__.update.apply(this);\n",
         "        },\n",
         "        \n",
         "        // Tell Backbone to listen to the change event of input controls (which the HTML date picker is)\n",
         "        events: {\"change\": \"handle_date_change\"},\n",
         "        \n",
         "        // Callback for when the date is changed.\n",
         "        handle_date_change: function(event) {\n",
         "            this.model.set('value', this.$date.val());\n",
         "            this.touch();\n",
         "        },\n",
         "    });\n",
         "    \n",
         "    // Register the DatePickerView with the widget manager.\n",
         "    WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
         "});"
        ],
        "metadata": {},
        "output_type": "display_data",
        "text": [
         "<IPython.core.display.Javascript at 0x109491b10>"
        ]
       }
      ],
      "prompt_number": 9
     },
     {
      "cell_type": "heading",
      "level": 2,
      "metadata": {},
      "source": [
       "Test"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "To test, create the widget the same way that the other widgets are created."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "my_widget = DateWidget()\n",
       "display(my_widget)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 10
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Display the widget again to make sure that both views remain in sync."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "my_widget"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 11
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Read the date from Python"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "my_widget.value"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "metadata": {},
        "output_type": "pyout",
        "prompt_number": 12,
        "text": [
         "u''"
        ]
       }
      ],
      "prompt_number": 12
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Set the date from Python"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "my_widget.value = \"1998-12-01\" # December 1st, 1998"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 13
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "source": [
       "Section 3 - Extra credit"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "The 3rd party `dateutil` library is required to continue.  https://pypi.python.org/pypi/python-dateutil"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "# Import the dateutil library to parse date strings.\n",
       "from dateutil import parser"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 14
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "In the last section we created a fully working date picker widget.\n",
       "Now we will add custom validation and support for labels.\n",
       "So far, only the ISO date format \"YYYY-MM-DD\" is supported.\n",
       "Now, we will add support for all of the date formats recognized by the Python dateutil library."
      ]
     },
     {
      "cell_type": "heading",
      "level": 2,
      "metadata": {},
      "source": [
       "Python"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "The standard property name used for widget labels is `description`.\n",
       "In the code block below, `description` has been added to the Python widget."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "class DateWidget(widgets.DOMWidget):\n",
       "    _view_name = Unicode('DatePickerView', sync=True)\n",
       "    value = Unicode(sync=True)\n",
       "    description = Unicode(sync=True)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 15
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "The traitlet machinery searches the class that the trait is defined in for methods with \"`_changed`\" suffixed onto their names.  Any method with the format \"`_X_changed`\" will be called when \"`X`\" is modified.\n",
       "We can take advantage of this to perform validation and parsing of different date string formats.\n",
       "Below, a method that listens to value has been added to the DateWidget."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "class DateWidget(widgets.DOMWidget):\n",
       "    _view_name = Unicode('DatePickerView', sync=True)\n",
       "    value = Unicode(sync=True)\n",
       "    description = Unicode(sync=True)\n",
       "\n",
       "    # This function automatically gets called by the traitlet machinery when\n",
       "    # value is modified because of this function's name.\n",
       "    def _value_changed(self, name, old_value, new_value):\n",
       "        pass"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 16
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Now the function parses the date string,\n",
       "and only sets the value in the correct format."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "class DateWidget(widgets.DOMWidget):\n",
       "    _view_name = Unicode('DatePickerView', sync=True)\n",
       "    value = Unicode(sync=True)\n",
       "    description = Unicode(sync=True)\n",
       "    \n",
       "    # This function automatically gets called by the traitlet machinery when\n",
       "    # value is modified because of this function's name.\n",
       "    def _value_changed(self, name, old_value, new_value):\n",
       "        \n",
       "        # Parse the date time value.\n",
       "        try:\n",
       "            parsed_date = parser.parse(new_value)\n",
       "            parsed_date_string = parsed_date.strftime(\"%Y-%m-%d\")\n",
       "        except:\n",
       "            parsed_date_string = ''\n",
       "        \n",
       "        # Set the parsed date string if the current date string is different.\n",
       "        if self.value != parsed_date_string:\n",
       "            self.value = parsed_date_string"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 17
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Finally, a `CallbackDispatcher` is added so the user can perform custom validation.\n",
       "If any one of the callbacks registered with the dispatcher returns False,\n",
       "the new date is not set.\n",
       "\n",
       "**Final Python code below:**"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "class DateWidget(widgets.DOMWidget):\n",
       "    _view_name = Unicode('DatePickerView', sync=True)\n",
       "    value = Unicode(sync=True)\n",
       "    description = Unicode(sync=True)\n",
       "    \n",
       "    def __init__(self, **kwargs):\n",
       "        super(DateWidget, self).__init__(**kwargs)\n",
       "        \n",
       "        self.validate = widgets.CallbackDispatcher()\n",
       "    \n",
       "    # This function automatically gets called by the traitlet machinery when\n",
       "    # value is modified because of this function's name.\n",
       "    def _value_changed(self, name, old_value, new_value):\n",
       "        \n",
       "        # Parse the date time value.\n",
       "        try:\n",
       "            parsed_date = parser.parse(new_value)\n",
       "            parsed_date_string = parsed_date.strftime(\"%Y-%m-%d\")\n",
       "        except:\n",
       "            parsed_date_string = ''\n",
       "        \n",
       "        # Set the parsed date string if the current date string is different.\n",
       "        if old_value != new_value:\n",
       "            valid = self.validate(parsed_date)\n",
       "            if valid in (None, True):\n",
       "                self.value = parsed_date_string\n",
       "            else:\n",
       "                self.value = old_value\n",
       "                self.send_state() # The traitlet event won't fire since the value isn't changing.\n",
       "                                  # We need to force the back-end to send the front-end the state\n",
       "                                  # to make sure that the date control date doesn't change."
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 18
     },
     {
      "cell_type": "heading",
      "level": 2,
      "metadata": {},
      "source": [
       "JavaScript"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Using the Javascript code from the last section,\n",
       "we add a label to the date time object.\n",
       "The label is a div with the `widget-hlabel` class applied to it.\n",
       "`widget-hlabel` is a class provided by the widget framework that applies special styling to a div to make it look like the rest of the horizontal labels used with the built-in widgets.\n",
       "Similar to the `widget-hlabel` class is the `widget-hbox-single` class.\n",
       "The `widget-hbox-single` class applies special styling to widget containers that store a single line horizontal widget.\n",
       "\n",
       "We hide the label if the description value is blank."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "%%javascript\n",
       "\n",
       "require([\"widgets/js/widget\"], function(WidgetManager){\n",
       "    \n",
       "    // Define the DatePickerView\n",
       "    var DatePickerView = IPython.DOMWidgetView.extend({\n",
       "        render: function(){\n",
       "            this.$el.addClass('widget-hbox-single'); /* Apply this class to the widget container to make\n",
       "                                                        it fit with the other built in widgets.*/\n",
       "            // Create a label.\n",
       "            this.$label = $('<div />')\n",
       "                .addClass('widget-hlabel')\n",
       "                .appendTo(this.$el)\n",
       "                .hide(); // Hide the label by default.\n",
       "            \n",
       "            // Create the date picker control.\n",
       "            this.$date = $('<input />')\n",
       "                .attr('type', 'date')\n",
       "                .appendTo(this.$el);\n",
       "        },\n",
       "        \n",
       "        update: function() {\n",
       "            \n",
       "            // Set the value of the date control and then call base.\n",
       "            this.$date.val(this.model.get('value')); // ISO format \"YYYY-MM-DDTHH:mm:ss.sssZ\" is required\n",
       "            \n",
       "            // Hide or show the label depending on the existance of a description.\n",
       "            var description = this.model.get('description');\n",
       "            if (description == undefined || description == '') {\n",
       "                this.$label.hide();\n",
       "            } else {\n",
       "                this.$label.show();\n",
       "                this.$label.text(description);\n",
       "            }\n",
       "            \n",
       "            return DatePickerView.__super__.update.apply(this);\n",
       "        },\n",
       "        \n",
       "        // Tell Backbone to listen to the change event of input controls (which the HTML date picker is)\n",
       "        events: {\"change\": \"handle_date_change\"},\n",
       "        \n",
       "        // Callback for when the date is changed.\n",
       "        handle_date_change: function(event) {\n",
       "            this.model.set('value', this.$date.val());\n",
       "            this.touch();\n",
       "        },\n",
       "    });\n",
       "    \n",
       "    // Register the DatePickerView with the widget manager.\n",
       "    WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
       "});"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "javascript": [
         "\n",
         "require([\"widgets/js/widget\"], function(WidgetManager){\n",
         "    \n",
         "    // Define the DatePickerView\n",
         "    var DatePickerView = IPython.DOMWidgetView.extend({\n",
         "        render: function(){\n",
         "            this.$el.addClass('widget-hbox-single'); /* Apply this class to the widget container to make\n",
         "                                                        it fit with the other built in widgets.*/\n",
         "            // Create a label.\n",
         "            this.$label = $('<div />')\n",
         "                .addClass('widget-hlabel')\n",
         "                .appendTo(this.$el)\n",
         "                .hide(); // Hide the label by default.\n",
         "            \n",
         "            // Create the date picker control.\n",
         "            this.$date = $('<input />')\n",
         "                .attr('type', 'date')\n",
         "                .appendTo(this.$el);\n",
         "        },\n",
         "        \n",
         "        update: function() {\n",
         "            \n",
         "            // Set the value of the date control and then call base.\n",
         "            this.$date.val(this.model.get('value')); // ISO format \"YYYY-MM-DDTHH:mm:ss.sssZ\" is required\n",
         "            \n",
         "            // Hide or show the label depending on the existance of a description.\n",
         "            var description = this.model.get('description');\n",
         "            if (description == undefined || description == '') {\n",
         "                this.$label.hide();\n",
         "            } else {\n",
         "                this.$label.show();\n",
         "                this.$label.text(description);\n",
         "            }\n",
         "            \n",
         "            return DatePickerView.__super__.update.apply(this);\n",
         "        },\n",
         "        \n",
         "        // Tell Backbone to listen to the change event of input controls (which the HTML date picker is)\n",
         "        events: {\"change\": \"handle_date_change\"},\n",
         "        \n",
         "        // Callback for when the date is changed.\n",
         "        handle_date_change: function(event) {\n",
         "            this.model.set('value', this.$date.val());\n",
         "            this.touch();\n",
         "        },\n",
         "    });\n",
         "    \n",
         "    // Register the DatePickerView with the widget manager.\n",
         "    WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
         "});"
        ],
        "metadata": {},
        "output_type": "display_data",
        "text": [
         "<IPython.core.display.Javascript at 0x1094eef90>"
        ]
       }
      ],
      "prompt_number": 19
     },
     {
      "cell_type": "heading",
      "level": 2,
      "metadata": {},
      "source": [
       "Test"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "To test the drawing of the label we create the widget like normal but supply the additional description property a value."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "# Add some additional widgets for aesthetic purpose\n",
       "display(widgets.TextWidget(description=\"First:\"))\n",
       "display(widgets.TextWidget(description=\"Last:\"))\n",
       "\n",
       "my_widget = DateWidget()\n",
       "display(my_widget)\n",
       "my_widget.description=\"DOB:\""
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 20
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Now we will try to create a widget that only accepts dates in the year 2014.  We render the widget without a description to verify that it can still render without a label."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "my_widget = DateWidget()\n",
       "display(my_widget)\n",
       "\n",
       "def require_2014(date):\n",
       "    return not date is None and date.year == 2014\n",
       "my_widget.validate.register_callback(require_2014)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 21
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "# Try setting a valid date\n",
       "my_widget.value = \"December 2, 2014\""
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 22
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "# Try setting an invalid date\n",
       "my_widget.value = \"June 12, 1999\""
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 23
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "my_widget.value"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "metadata": {},
        "output_type": "pyout",
        "prompt_number": 24,
        "text": [
         "u'2014-12-02'"
        ]
       }
      ],
      "prompt_number": 24
-    },
-    {
-     "cell_type": "markdown",
-     "metadata": {},
-     "source": [
-      "This concludes Part 6 of the [series](index.ipynb)."
-     ]
     }
    ],
    "metadata": {}
   }
  ]
-}
+}
  No newline at end of file

examples/Widgets/Tutorials/Events.ipynb

@@ -1,261 +1,248 b''
 {
  "metadata": {
   "cell_tags": [
    [
     "<None>",
     null
    ]
   ],
-  "name": ""
+  "name": "",
+  "signature": "sha256:8cade57fabc6819dc950bc28502028554861fb1440d5d832922b95fd2b8bf25c"
  },
  "nbformat": 3,
  "nbformat_minor": 0,
  "worksheets": [
   {
    "cells": [
     {
-     "cell_type": "markdown",
-     "metadata": {},
-     "source": [
-      "[< Back to Part 1](Part 1 - Basics.ipynb) or [Index](index.ipynb)"
-     ]
-    },
-    {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "from __future__ import print_function # 2.7 compatability\n",
       "\n",
       "from IPython.html import widgets # Widget definitions\n",
       "from IPython.display import display # Used to display widgets in the notebook"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 1
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "source": [
       "Traitlet Events"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "As mentioned in Part 1, the widget attributes are IPython traitlets.  Traitlets are eventful.  To handle  changes, the `on_trait_change` method of the widget can be used to register a callback.  The docstring for `on_trait_change` can be seen below.  Both the `name` and `remove` properties are optional."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "print(widgets.Widget.on_trait_change.__doc__)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "output_type": "stream",
        "stream": "stdout",
        "text": [
         "Setup a handler to be called when a trait changes.\n",
         "\n",
         "        This is used to setup dynamic notifications of trait changes.\n",
         "\n",
         "        Static handlers can be created by creating methods on a HasTraits\n",
         "        subclass with the naming convention '_[traitname]_changed'.  Thus,\n",
         "        to create static handler for the trait 'a', create the method\n",
         "        _a_changed(self, name, old, new) (fewer arguments can be used, see\n",
         "        below).\n",
         "\n",
         "        Parameters\n",
         "        ----------\n",
         "        handler : callable\n",
         "            A callable that is called when a trait changes.  Its\n",
         "            signature can be handler(), handler(name), handler(name, new)\n",
         "            or handler(name, old, new).\n",
         "        name : list, str, None\n",
         "            If None, the handler will apply to all traits.  If a list\n",
         "            of str, handler will apply to all names in the list.  If a\n",
         "            str, the handler will apply just to that name.\n",
         "        remove : bool\n",
         "            If False (the default), then install the handler.  If True\n",
         "            then unintall it.\n",
         "        \n"
        ]
       }
      ],
      "prompt_number": 2
     },
     {
      "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 IntSliderWiget's value as it is changed can be seen below."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "int_range = widgets.IntSliderWidget()\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": [],
      "prompt_number": 3
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "source": [
       "Specialized Events"
      ]
     },
     {
      "cell_type": "heading",
      "level": 2,
      "metadata": {},
      "source": [
       "Button Click Event"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "The `ButtonWidget` is a special widget, like the `ContainerWidget` and `TabWidget`, that isn't used to represent a data type.  Instead the button widget is used to handle mouse clicks.  The `on_click` method of the `ButtonWidget` can be used to register function to be called when the button is clicked.  The docstring of the `on_click` can be seen below."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "print(widgets.ButtonWidget.on_click.__doc__)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "output_type": "stream",
        "stream": "stdout",
        "text": [
         "Register a callback to execute when the button is clicked.\n",
         "\n",
         "        The callback will be called with one argument,\n",
         "        the clicked button widget instance.\n",
         "\n",
         "        Parameters\n",
         "        ----------\n",
         "        remove : bool (optional)\n",
         "            Set to true to remove the callback from the list of callbacks.\n"
        ]
       }
      ],
      "prompt_number": 4
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Button clicks are transmitted from the front-end to the back-end using custom messages.  By using the `on_click` method, a button that prints a message when it has been clicked is shown below."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "button = widgets.ButtonWidget(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": [
       {
        "output_type": "stream",
        "stream": "stdout",
        "text": [
         "Button clicked.\n"
        ]
       },
       {
        "output_type": "stream",
        "stream": "stdout",
        "text": [
         "Button clicked.\n"
        ]
       },
       {
        "output_type": "stream",
        "stream": "stdout",
        "text": [
         "Button clicked.\n"
        ]
       }
      ],
      "prompt_number": 5
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Event handlers can also be used to create widgets.  In the example below, clicking a button spawns another button with a description equal to how many times the parent button had been clicked at the time."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "def new_button(clicked):\n",
       "    button = widgets.ButtonWidget()\n",
       "    button.clicks = 0\n",
       "    clicked.clicks += 1\n",
       "    button.description = \"%d\" % clicked.clicks\n",
       "    display(button)\n",
       "    button.on_click(new_button)\n",
       "button = widgets.ButtonWidget(description = \"Start\")\n",
       "button.clicks = 0\n",
       "display(button)\n",
       "button.on_click(new_button)\n",
       "    "
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 6
-    },
-    {
-     "cell_type": "markdown",
-     "metadata": {},
-     "source": [
-      "In [Part 3](Part 3 - Placement.ipynb) of this [series](index.ipynb), you will learn about widget placement."
-     ]
     }
    ],
    "metadata": {}
   }
  ]
 }
  No newline at end of file

examples/Widgets/Tutorials/Index.ipynb

@@ -1,73 +1,65 b''
 {
  "metadata": {
   "name": "",
-  "signature": "sha256:554c73fb7038db942bd25f77ad2217699e1f3fda6535fad67103256dc1beda0b"
+  "signature": "sha256:a2f4e040950648308ac7ec5f95d83948b4499ffc68e6bfd8f6fe8784955f52fb"
  },
  "nbformat": 3,
  "nbformat_minor": 0,
  "worksheets": [
   {
    "cells": [
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "source": [
       "Widget Tutorials"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "This directory includes a tutorials related to the IPython notebook widget framework."
      ]
     },
     {
      "cell_type": "heading",
      "level": 2,
      "metadata": {},
      "source": [
       "Interact"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "* [Using Interact](Using Interact.ipynb)"
      ]
     },
     {
      "cell_type": "heading",
      "level": 2,
      "metadata": {},
      "source": [
       "Widgets"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "- [Basics](Basics.ipynb)  \n",
       "- [Events](Events.ipynb)  \n",
       "- [Placement](Placement.ipynb)  \n",
       "- [Styles](Styles.ipynb)  \n",
       "- [Alignment](Alignment.ipynb)  \n",
       "- [Custom Widgets](Custom Widgets.ipynb)  "
      ]
-    },
-    {
-     "cell_type": "code",
-     "collapsed": false,
-     "input": [],
-     "language": "python",
-     "metadata": {},
-     "outputs": []
     }
    ],
    "metadata": {}
   }
  ]
 }
  No newline at end of file

examples/Widgets/Tutorials/Placement.ipynb

@@ -1,187 +1,174 b''
 {
  "metadata": {
   "cell_tags": [
    [
     "<None>",
     null
    ]
   ],
-  "name": ""
+  "name": "",
+  "signature": "sha256:60ff1a42e4dbc911ae15b409033e993257425c982809950746a567a4419b9484"
  },
  "nbformat": 3,
  "nbformat_minor": 0,
  "worksheets": [
   {
    "cells": [
     {
-     "cell_type": "markdown",
-     "metadata": {},
-     "source": [
-      "[< Back to Part 2](Part 2 - Events.ipynb) or [Index](index.ipynb)"
-     ]
-    },
-    {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "from IPython.html import widgets # Widget definitions\n",
       "from IPython.display import display # Used to display widgets in the notebook"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 1
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "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.  Only one instance of any particular widget can be child of another.  In other words, *widget A* cannot have *widget B* listed twice in it's list of children.\n",
       "\n",
       "Widgets that can contain other widgets have a `children` attribute.  This attribute can be set via a kwarg 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": [
       "float_range = widgets.FloatSliderWidget()\n",
       "string = widgets.TextWidget(value='hi')\n",
       "container = widgets.ContainerWidget(children=[float_range, string])\n",
       "\n",
       "display(container) # Displays the `container` and all of it's children."
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 2
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Children can also 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.ContainerWidget()\n",
       "display(container)\n",
       "\n",
       "int_range = widgets.IntSliderWidget()\n",
       "container.children=[int_range]\n"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 3
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "source": [
       "Visibility"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Sometimes it is necessary to hide or show widgets in place, without having to redisplay 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.LatexWidget(value=\"Hello World!\")\n",
       "display(string) "
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 4
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "string.visible=False"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 5
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "string.visible=True"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 6
     },
     {
      "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.ContainerWidget()\n",
       "first = widgets.TextWidget(description=\"First Name:\")\n",
       "last = widgets.TextWidget(description=\"Last Name:\")\n",
       "\n",
       "student = widgets.CheckboxWidget(description=\"Student:\", value=False)\n",
       "school_info = widgets.ContainerWidget(visible=False, children=[\n",
       "    widgets.TextWidget(description=\"School:\"),\n",
       "    widgets.IntTextWidget(description=\"Grade:\", min=0, max=12)\n",
       "    ])\n",
       "\n",
       "pet = widgets.TextWidget(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": [],
      "prompt_number": 7
-    },
-    {
-     "cell_type": "markdown",
-     "metadata": {},
-     "source": [
-      "In [Part 4](Part 4 - Styles.ipynb) of this [series](index.ipynb), you will learn about widget styling."
-     ]
     }
    ],
    "metadata": {}
   }
  ]
 }
  No newline at end of file

examples/Widgets/Tutorials/Styles.ipynb

@@ -1,368 +1,355 b''
 {
  "metadata": {
   "cell_tags": [
    [
     "<None>",
     null
    ]
   ],
-  "name": ""
+  "name": "",
+  "signature": "sha256:cd7d3d42126bdbf20c087014460779dfbdb0a63dcb8f489ba7ebfc230a685edd"
  },
  "nbformat": 3,
  "nbformat_minor": 0,
  "worksheets": [
   {
    "cells": [
     {
-     "cell_type": "markdown",
-     "metadata": {},
-     "source": [
-      "[< Back to Part 3](Part 3 - Placement.ipynb) or [Index](index.ipynb)"
-     ]
-    },
-    {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "from IPython.html import widgets # Widget definitions\n",
       "from IPython.display import display # Used to display widgets in the notebook"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 1
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "source": [
       "CSS"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "When trying to design an attractive widget GUI, styling becomes important.\n",
       "Most widget views are DOM (document object model) elements that can be controlled with CSS.\n",
       "There are two helper methods that allow the manipulation of the widget's CSS.\n",
       "The first is the `Widget.set_css` method.\n",
       "This method allows one or more CSS attributes to be set at once.  "
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "print(widgets.DOMWidget.set_css.__doc__)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "output_type": "stream",
        "stream": "stdout",
        "text": [
         "Set one or more CSS properties of the widget.\n",
         "\n",
         "        This function has two signatures:\n",
         "        - set_css(css_dict, selector='')\n",
         "        - set_css(key, value, selector='')\n",
         "\n",
         "        Parameters\n",
         "        ----------\n",
         "        css_dict : dict\n",
         "            CSS key/value pairs to apply\n",
         "        key: unicode\n",
         "            CSS key\n",
         "        value:\n",
         "            CSS value\n",
         "        selector: unicode (optional, kwarg only)\n",
         "            JQuery selector to use to apply the CSS key/value.  If no selector \n",
         "            is provided, an empty selector is used.  An empty selector makes the \n",
         "            front-end try to apply the css to a default element.  The default\n",
         "            element is an attribute unique to each view, which is a DOM element\n",
         "            of the view that should be styled with common CSS (see \n",
         "            `$el_to_style` in the Javascript code).\n",
         "        \n"
        ]
       }
      ],
      "prompt_number": 2
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "The second is `get_css` which allows CSS attributesto be read.\n",
       "Note that this method will only read CSS attributes that have been set using the `set_css` method."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "print(widgets.DOMWidget.get_css.__doc__)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "output_type": "stream",
        "stream": "stdout",
        "text": [
         "Get a CSS property of the widget.\n",
         "\n",
         "        Note: This function does not actually request the CSS from the \n",
         "        front-end;  Only properties that have been set with set_css can be read.\n",
         "\n",
         "        Parameters\n",
         "        ----------\n",
         "        key: unicode\n",
         "            CSS key\n",
         "        selector: unicode (optional)\n",
         "            JQuery selector used when the CSS key/value was set.\n",
         "        \n"
        ]
       }
      ],
      "prompt_number": 3
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Below is an example that applies CSS attributes to a container to emphasize text."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "label = widgets.LatexWidget()\n",
       "label.value = \"$\\\\textbf{ALERT:} Hello World!$\"\n",
       "container = widgets.ContainerWidget(children=[label])\n",
       "\n",
       "# set_css used to set a single CSS attribute.\n",
       "container.set_css('border', '3px solid black') # Border the container\n",
       "\n",
       "# set_css used to set multiple CSS attributes.\n",
       "container.set_css({'padding': '6px', # Add padding to the container\n",
       "                   'background': 'yellow'}) # Fill the container yellow\n",
       "\n",
       "display(container)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 4
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "source": [
       "CSS Classes"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "In some cases, it is necessary to apply CSS classes to your widgets.\n",
       "CSS classes allow DOM elements to be indentified in Javascript and CSS.\n",
       "The notebook defines its own set of classes to stylize its elements.\n",
       "The `add_class` widget method allows you to add CSS classes to your widget."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "print(widgets.DOMWidget.add_class.__doc__)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "output_type": "stream",
        "stream": "stdout",
        "text": [
         "Add class[es] to a DOM element.\n",
         "\n",
         "        Parameters\n",
         "        ----------\n",
         "        class_names: unicode or list\n",
         "            Class name(s) to add to the DOM element(s).\n",
         "        selector: unicode (optional)\n",
         "            JQuery selector to select the DOM element(s) that the class(es) will\n",
         "            be added to.\n",
         "        \n"
        ]
       }
      ],
      "prompt_number": 5
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Since `add_class` is a DOM operation, **it will only affect widgets that have already been displayed**.\n",
       "`add_class` must be called after the widget has been displayed.\n",
       "Extending the example above, the corners of the container can be rounded by adding the `corner-all` CSS class to the container."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "container = widgets.ContainerWidget()\n",
       "container.set_css({'border': '3px solid black',\n",
       "                   'padding': '6px', \n",
       "                   'background': 'yellow'}) \n",
       "\n",
       "label = widgets.LatexWidget()\n",
       "label.value = \"$\\\\textbf{ALERT:} Hello World!$\"\n",
       "container.children = [label]\n",
       "display(container)\n",
       "container.add_class('corner-all') # Must be called AFTER display"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 6
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "The IPython notebook uses [bootstrap](http://getbootstrap.com/\u200e) for styling.\n",
       "The example above can be simplified by using a bootstrap class:"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "label = widgets.LatexWidget(value = \"$\\\\textbf{ALERT:} Hello World!$\")\n",
       "display(label)\n",
       "\n",
       "# Apply twitter bootstrap alert class to the label.\n",
       "label.add_class(\"alert\")"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 7
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "The example below shows how bootstrap classes can be used to change button apearance."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "# List of the bootstrap button styles\n",
       "button_classes = ['Default', 'btn-primary', 'btn-info', 'btn-success', \n",
       "                  'btn-warning', 'btn-danger', 'btn-inverse', 'btn-link']\n",
       "\n",
       "# Create each button and apply the style.  Also add margin to the buttons so they space\n",
       "# themselves nicely.\n",
       "for i in range(8):\n",
       "    button = widgets.ButtonWidget(description=button_classes[i])\n",
       "    button.set_css(\"margin\", \"5px\")\n",
       "    display(button)\n",
       "    if i > 0: # Don't add a class the first button.\n",
       "        button.add_class(button_classes[i])\n",
       "    "
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 8
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "It is also useful to be able to remove CSS classes from widgets.\n",
       "The `remove_class` method allows you to remove classes from widgets that have been displayed.\n",
       "Like `add_class`, it must be called after the widget has been displayed."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "print(widgets.DOMWidget.remove_class.__doc__)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "output_type": "stream",
        "stream": "stdout",
        "text": [
         "Remove class[es] from a DOM element.\n",
         "\n",
         "        Parameters\n",
         "        ----------\n",
         "        class_names: unicode or list\n",
         "            Class name(s) to remove from  the DOM element(s).\n",
         "        selector: unicode (optional)\n",
         "            JQuery selector to select the DOM element(s) that the class(es) will\n",
         "            be removed from.\n",
         "        \n"
        ]
       }
      ],
      "prompt_number": 9
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "The example below animates an alert using different bootstrap styles."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "import time\n",
       "label = widgets.LatexWidget(value = \"$\\\\textbf{ALERT:} Hello World!$\")\n",
       "display(label)\n",
       "\n",
       "# Apply twitter bootstrap alert class to the label.\n",
       "label.add_class(\"alert\")\n",
       "\n",
       "# Animate through additional bootstrap label styles 3 times\n",
       "additional_alert_styles = ['alert-error', 'alert-info', 'alert-success']\n",
       "for i in range(3 * len(additional_alert_styles)):\n",
       "    label.add_class(additional_alert_styles[i % 3])\n",
       "    label.remove_class(additional_alert_styles[(i-1) % 3])\n",
       "    time.sleep(1)\n",
       "        "
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 10
-    },
-    {
-     "cell_type": "markdown",
-     "metadata": {},
-     "source": [
-      "In [Part 5](Part 5 - Alignment.ipynb) of this [series](index.ipynb), you will learn about widget alignment."
-     ]
     }
    ],
    "metadata": {}
   }
  ]
 }
  No newline at end of file