Updated examples 3-6

examples/widgets/Part 3 - Placement.ipynb

@@ -1,336 +1,172 b''
 {
  "metadata": {
   "cell_tags": [
    [
     "<None>",
     null
    ]
   ],
   "name": ""
  },
  "nbformat": 3,
  "nbformat_minor": 0,
  "worksheets": [
   {
    "cells": [
     {
      "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.  With IPython widgets, the widgets are instances that live in the back-end (usally Python).  There can be multiple views displayed in the front-end that represent one widget in the backend.  Each view can be displayed at a different time.  Only one instance of any particular model can be child of another.  In other words, *widget A* cannot have *widget B* listed twice in it's children list.\n",
       "\n",
       "Widgets that can contain other widgets have a `children` property.  This property 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 (as seen below)."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
-      "floatrange = widgets.FloatSliderWidget() # You can set the parent in the constructor,\n",
-      "\n",
-      "string = widgets.TextBocWidget(value='hi')\n",
+      "floatrange = widgets.FloatSliderWidget()\n",
+      "string = widgets.TextBoxWidget(value='hi')\n",
       "container = widgets.ContainerWidget(children=[floatrange, string])\n",
       "\n",
       "display(container) # Displays the `container` and all of it's children."
      ],
      "language": "python",
      "metadata": {},
-     "outputs": [
-      {
-       "ename": "AttributeError",
-       "evalue": "'module' object has no attribute 'TextBocWidget'",
-       "output_type": "pyerr",
-       "traceback": [
-        "\u001b[1;31m---------------------------------------------------------------------------\u001b[0m\n\u001b[1;31mAttributeError\u001b[0m                            Traceback (most recent call last)",
-        "\u001b[1;32m<ipython-input-4-085d43fdae3d>\u001b[0m in \u001b[0;36m<module>\u001b[1;34m()\u001b[0m\n\u001b[0;32m      1\u001b[0m \u001b[0mfloatrange\u001b[0m \u001b[1;33m=\u001b[0m \u001b[0mwidgets\u001b[0m\u001b[1;33m.\u001b[0m\u001b[0mFloatSliderWidget\u001b[0m\u001b[1;33m(\u001b[0m\u001b[1;33m)\u001b[0m \u001b[1;31m# You can set the parent in the constructor,\u001b[0m\u001b[1;33m\u001b[0m\u001b[0m\n\u001b[0;32m      2\u001b[0m \u001b[1;33m\u001b[0m\u001b[0m\n\u001b[1;32m----> 3\u001b[1;33m \u001b[0mstring\u001b[0m \u001b[1;33m=\u001b[0m \u001b[0mwidgets\u001b[0m\u001b[1;33m.\u001b[0m\u001b[0mTextBocWidget\u001b[0m\u001b[1;33m(\u001b[0m\u001b[0mvalue\u001b[0m\u001b[1;33m=\u001b[0m\u001b[1;34m'hi'\u001b[0m\u001b[1;33m)\u001b[0m\u001b[1;33m\u001b[0m\u001b[0m\n\u001b[0m\u001b[0;32m      4\u001b[0m \u001b[0mcontainer\u001b[0m \u001b[1;33m=\u001b[0m \u001b[0mwidgets\u001b[0m\u001b[1;33m.\u001b[0m\u001b[0mContainerWidget\u001b[0m\u001b[1;33m(\u001b[0m\u001b[0mchildren\u001b[0m\u001b[1;33m=\u001b[0m\u001b[1;33m[\u001b[0m\u001b[0mfloatrange\u001b[0m\u001b[1;33m,\u001b[0m \u001b[0mstring\u001b[0m\u001b[1;33m]\u001b[0m\u001b[1;33m)\u001b[0m\u001b[1;33m\u001b[0m\u001b[0m\n\u001b[0;32m      5\u001b[0m \u001b[1;33m\u001b[0m\u001b[0m\n",
-        "\u001b[1;31mAttributeError\u001b[0m: 'module' object has no attribute 'TextBocWidget'"
-       ]
-      }
-     ],
-     "prompt_number": 4
-    },
-    {
-     "cell_type": "markdown",
-     "metadata": {},
-     "source": [
-      "Children can also be added to parents after the parent has been displayed.  If the children are added after the parent has already been displayed, the children must be displayed themselves.\n",
-      "\n",
-      "In the example below, the IntRangeWidget is never rendered since display was called on the parent before the parent/child relationship was established."
-     ]
-    },
-    {
-     "cell_type": "code",
-     "collapsed": false,
-     "input": [
-      "intrange = widgets.IntRangeWidget() # Never gets displayed.\n",
-      "container = widgets.MulticontainerWidget(children=[intrange])\n",
-      "\n",
-      "display(container)\n"
-     ],
-     "language": "python",
-     "metadata": {},
-     "outputs": [],
-     "prompt_number": 5
-    },
-    {
-     "cell_type": "markdown",
-     "metadata": {},
-     "source": [
-      "Calling display on the child fixes the problem."
-     ]
-    },
-    {
-     "cell_type": "code",
-     "collapsed": false,
-     "input": [
-      "container = widgets.MulticontainerWidget()\n",
-      "display(container)\n",
-      "\n",
-      "intrange = widgets.IntRangeWidget(parent=container)\n",
-      "display(intrange) # This line is needed since the `container` has already been displayed."
-     ],
-     "language": "python",
-     "metadata": {},
-     "outputs": [],
-     "prompt_number": 4
-    },
-    {
-     "cell_type": "heading",
-     "level": 1,
-     "metadata": {},
-     "source": [
-      "Changing Child Views"
-     ]
-    },
-    {
-     "cell_type": "markdown",
-     "metadata": {},
-     "source": [
-      "The view used to display a widget must defined by the time the widget is displayed.  If children widgets are to be displayed along with the parent in one call, their `view_name`s can't be set since all of the widgets are sharing the same display call.  Instead, their `default_view_name`s must be set (as seen below)."
-     ]
-    },
-    {
-     "cell_type": "code",
-     "collapsed": false,
-     "input": [
-      "\n",
-      "floatrange = widgets.FloatRangeWidget()\n",
-      "floatrange.default_view_name = \"FloatTextView\" # It can be set as a property.\n",
-      "\n",
-      "string = widgets.StringWidget(default_view_name = \"TextAreaView\") # It can also be set in the constructor.\n",
-      "container = widgets.MulticontainerWidget(children=[floatrange, string])\n",
-      "display(container)"
-     ],
-     "language": "python",
-     "metadata": {},
      "outputs": [],
-     "prompt_number": 6
+     "prompt_number": 2
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
-      "However, if the children are displayed after the parent, their `view_name` can also be set like normal.  Both methods will work.  The code below produces the same output as the code above."
+      "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.MulticontainerWidget()\n",
+      "container = widgets.ContainerWidget()\n",
       "display(container)\n",
       "\n",
-      "floatrange = widgets.FloatRangeWidget()\n",
-      "floatrange.parent=container\n",
-      "display(floatrange, view_name = \"FloatTextView\") # view_name can be set during display.\n",
-      "\n",
-      "string = widgets.StringWidget()\n",
-      "string.parent = container\n",
-      "string.default_view_name = \"TextAreaView\" # Setting default_view_name still works.\n",
-      "display(string)\n"
+      "intrange = widgets.IntSliderWidget()\n",
+      "container.children=[intrange]\n"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
-     "prompt_number": 6
+     "prompt_number": 3
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "source": [
       "Visibility"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
-      "Sometimes it's necessary to hide/show widget views in place, without ruining the order that they have been displayed on the page.  Using the `display` method, the views are always added to the end of their respective containers.  Instead the `visibility` property of widgets can be used to hide/show widgets that have already been displayed (as seen below)."
+      "Sometimes it's necessary to hide/show widget views in place, without having to redisplay the widget views.  The `visibility` property of widgets can be used to hide/show widgets that have already been displayed (as seen below)."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
-      "string = widgets.StringWidget(value=\"Hello World!\")\n",
-      "display(string, view_name=\"HTMLView\") "
+      "string = widgets.LatexWidget(value=\"Hello World!\")\n",
+      "display(string) "
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
-     "prompt_number": 7
+     "prompt_number": 4
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "string.visible=False"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
-     "prompt_number": 8
+     "prompt_number": 5
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "string.visible=True"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
-     "prompt_number": 9
+     "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.StringWidget(description=\"First Name:\")\n",
-      "last = widgets.StringWidget(description=\"Last Name:\")\n",
+      "first = widgets.TextBoxWidget(description=\"First Name:\")\n",
+      "last = widgets.TextBoxWidget(description=\"Last Name:\")\n",
       "\n",
-      "student = widgets.BoolWidget(description=\"Student:\", value=False)\n",
-      "form.children=[first, last, student]\n",
-      "display(form)"
-     ],
-     "language": "python",
-     "metadata": {},
-     "outputs": [],
-     "prompt_number": 2
-    },
-    {
-     "cell_type": "code",
-     "collapsed": false,
-     "input": [
-      "form = widgets.ContainerWidget()\n",
-      "first = widgets.StringWidget(description=\"First Name:\")\n",
-      "last = widgets.StringWidget(description=\"Last Name:\")\n",
-      "\n",
-      "student = widgets.BoolWidget(description=\"Student:\", value=False)\n",
+      "student = widgets.CheckBoxWidget(description=\"Student:\", value=False)\n",
       "school_info = widgets.ContainerWidget(visible=False, children=[\n",
-      "    widgets.StringWidget(description=\"School:\"),\n",
-      "    widgets.IntRangeWidget(description=\"Grade:\", min=0, max=12, default_view_name='IntTextView')\n",
+      "    widgets.TextBoxWidget(description=\"School:\"),\n",
+      "    widgets.IntTextWidget(description=\"Grade:\", min=0, max=12)\n",
       "    ])\n",
       "\n",
-      "pet = widgets.StringWidget(description=\"Pet's Name:\")\n",
+      "pet = widgets.TextBoxWidget(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",
-      "    print 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": [
-      {
-       "output_type": "stream",
-       "stream": "stdout",
-       "text": [
-        "True\n"
-       ]
-      },
-      {
-       "output_type": "stream",
-       "stream": "stdout",
-       "text": [
-        "False\n"
-       ]
-      },
-      {
-       "output_type": "stream",
-       "stream": "stdout",
-       "text": [
-        "True\n"
-       ]
-      },
-      {
-       "output_type": "stream",
-       "stream": "stdout",
-       "text": [
-        "False\n"
-       ]
-      },
-      {
-       "output_type": "stream",
-       "stream": "stdout",
-       "text": [
-        "True\n"
-       ]
-      },
-      {
-       "output_type": "stream",
-       "stream": "stdout",
-       "text": [
-        "False\n"
-       ]
-      }
-     ],
-     "prompt_number": 2
-    },
-    {
-     "cell_type": "code",
-     "collapsed": false,
-     "input": [],
-     "language": "python",
-     "metadata": {},
-     "outputs": []
+     "outputs": [],
+     "prompt_number": 7
     }
    ],
    "metadata": {}
   }
  ]
 }
  No newline at end of file

examples/widgets/Part 4 - Styles.ipynb

@@ -1,344 +1,341 b''
 {
  "metadata": {
   "cell_tags": [
    [
     "<None>",
     null
    ]
   ],
   "name": ""
  },
  "nbformat": 3,
  "nbformat_minor": 0,
  "worksheets": [
   {
    "cells": [
     {
      "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.  Widget views are DOM (document object model) elements that can be controlled with CSS.  There are two helper methods defined on widget that allow the manipulation of the widget's CSS.  The first is the `set_css` method, whos doc string is displayed below.  This method allows one or more CSS attributes to be set at once.  "
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
-      "print(widgets.Widget.set_css.__doc__)"
+      "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 (shared among all of the\n",
-        "        views).  This function has two signatures:\n",
-        "        - set_css(css_dict, [selector=''])\n",
-        "        - set_css(key, value, [selector=''])\n",
+        "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)\n",
-        "            JQuery selector to use to apply the CSS key/value.\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 attributes that have been set to be read.  Note that this method will only read CSS attributes that have been set using the `set_css` method.  `get_css`'s doc string is displayed below."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
-      "print(widgets.Widget.get_css.__doc__)"
+      "print(widgets.DOMWidget.get_css.__doc__)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "output_type": "stream",
        "stream": "stdout",
        "text": [
-        "Get a CSS property of the widget.  Note, this function does not\n",
-        "        actually request the CSS from the front-end;  Only properties that have\n",
-        "        been set with set_css can be read.\n",
+        "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.StringWidget(default_view_name=\"HTMLView\")\n",
-      "label.value = \"<strong>ALERT: </strong> Hello World!\"\n",
+      "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": [
       "DOM Classes"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "In some cases it's necessary to apply DOM classes to your widgets.  DOM classes allow DOM elements to be indentified by Javascript and CSS.  The notebook defines its own set of classes to stylize its elements.  The `add_class` widget method allows you to add DOM classes to your widget's definition.  The `add_class` method's doc string can be seen below."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
-      "print(widgets.Widget.add_class.__doc__)"
+      "print(widgets.DOMWidget.add_class.__doc__)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "output_type": "stream",
        "stream": "stdout",
        "text": [
-        "Add class[es] to a DOM element\n",
+        "Add class[es] to a DOM element.\n",
         "\n",
         "        Parameters\n",
         "        ----------\n",
-        "        class_name: unicode\n",
-        "            Class name(s) to add to the DOM element(s).  Multiple class names\n",
-        "            must be space separated.\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` if a DOM operation, it will only affect widgets that have been displayed.  `add_class` must be called after the widget has been displayed.  Extending the example above, the corners of the container can be rounded by adding the `corner-all` notebook class to the container (as seen below).  "
      ]
     },
     {
      "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.StringWidget(default_view_name=\"HTMLView\")\n",
-      "label.value = \"<strong>ALERT: </strong> Hello World!\"\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": 7
+     "prompt_number": 6
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "The IPython notebook uses bootstrap for styling.  The example above can be simplified by using a bootstrap class (as seen below).  Bootstrap documentation can be found at http://getbootstrap.com/\u200e ."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
-      "label = widgets.StringWidget(value = \"<strong>ALERT: </strong> Hello World!\")\n",
-      "display(label, view_name=\"HTMLView\")\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\")"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
-     "prompt_number": 11
+     "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": 12
+     "prompt_number": 8
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "It's also useful to be able to remove DOM classes from widgets.  The `remove_class` widget method allows you to remove classes from widgets that have been displayed.  Like `add_widget`, it must be called after the widget has been displayed.  The doc string of `remove_class` can be seen below."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
-      "print(widgets.Widget.remove_class.__doc__)"
+      "print(widgets.DOMWidget.remove_class.__doc__)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "output_type": "stream",
        "stream": "stdout",
        "text": [
-        "Remove class[es] from a DOM element\n",
+        "Remove class[es] from a DOM element.\n",
         "\n",
         "        Parameters\n",
         "        ----------\n",
-        "        class_name: unicode\n",
-        "            Class name(s) to remove from  the DOM element(s).  Multiple class\n",
-        "            names must be space separated.\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": 13
+     "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.StringWidget(value = \"<strong>ALERT: </strong> Hello World!\")\n",
-      "display(label, view_name=\"HTMLView\")\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": 14
-    },
-    {
-     "cell_type": "code",
-     "collapsed": false,
-     "input": [],
-     "language": "python",
-     "metadata": {},
-     "outputs": []
+     "prompt_number": 10
     }
    ],
    "metadata": {}
   }
  ]
 }
  No newline at end of file

examples/widgets/Part 5 - Alignment.ipynb

@@ -1,312 +1,313 b''
 {
  "metadata": {
   "cell_tags": [
    [
     "<None>",
     null
    ]
   ],
   "name": ""
  },
  "nbformat": 3,
  "nbformat_minor": 0,
  "worksheets": [
   {
    "cells": [
     {
      "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` property which allows a label for the widget to be defined.  The label of the widget has a fixed minimum width.  The text of the label is always right aligned and the widget is left aligned (as seen below) "
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
-      "display(widgets.StringWidget(description=\"a:\"))\n",
-      "display(widgets.StringWidget(description=\"aa:\"))\n",
-      "display(widgets.StringWidget(description=\"aaa:\"))"
+      "display(widgets.TextBoxWidget(description=\"a:\"))\n",
+      "display(widgets.TextBoxWidget(description=\"aa:\"))\n",
+      "display(widgets.TextBoxWidget(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 (as seen below)."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
-      "display(widgets.StringWidget(description=\"a:\"))\n",
-      "display(widgets.StringWidget(description=\"aa:\"))\n",
-      "display(widgets.StringWidget(description=\"aaa:\"))\n",
-      "display(widgets.StringWidget(description=\"aaaaaaaaaaaaaaaaaa:\"))"
+      "display(widgets.TextBoxWidget(description=\"a:\"))\n",
+      "display(widgets.TextBoxWidget(description=\"aa:\"))\n",
+      "display(widgets.TextBoxWidget(description=\"aaa:\"))\n",
+      "display(widgets.TextBoxWidget(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 (as seen below)."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
-      "display(widgets.StringWidget(description=\"a:\"))\n",
-      "display(widgets.StringWidget(description=\"aa:\"))\n",
-      "display(widgets.StringWidget(description=\"aaa:\"))\n",
-      "display(widgets.StringWidget())"
+      "display(widgets.TextBoxWidget(description=\"a:\"))\n",
+      "display(widgets.TextBoxWidget(description=\"aa:\"))\n",
+      "display(widgets.TextBoxWidget(description=\"aaa:\"))\n",
+      "display(widgets.TextBoxWidget())"
      ],
      "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.  The `hbox` and `vbox` methods (parameterless) cause the `ContainerWidget` to both horizontally and vertically align its children.  The following example compares `vbox` to `hbox`."
      ]
     },
     {
      "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",
-      "    display(widgets.StringWidget(default_view_name='HTMLView', value='<h2><br>' + title + '</h2>'))\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('background', '#999999')\n",
       "    display(container)\n",
       "    return container\n",
       "\n",
       "def fill_container(container):\n",
       "    components = []\n",
       "    for i in range(3):\n",
-      "        components.append(widgets.StringWidget(default_view_name='HTMLView', value=\"ABC\"[i]))\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.vbox()\n",
+      "container.add_class('vbox')\n",
       "fill_container(container)\n",
       "\n",
       "container = make_container('HBox')\n",
-      "container.hbox()\n",
+      "container.add_class('hbox')\n",
       "fill_container(container)\n"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 5
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "The `ContainerWidget` `pack_start`, `pack_center`, and `pack_end` methods (parameterless) adjust the alignment of the widgets on the axis that they are being rendered on.  Below is an example of the different alignments."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "container = make_container('HBox Pack Start')\n",
-      "container.hbox()\n",
-      "container.pack_start()\n",
+      "container.add_class('hbox')\n",
+      "container.add_class('start')\n",
       "fill_container(container)\n",
       "    \n",
       "container = make_container('HBox Pack Center')\n",
-      "container.hbox()\n",
-      "container.pack_center()\n",
+      "container.add_class('hbox')\n",
+      "container.add_class('center')\n",
       "fill_container(container)\n",
       "    \n",
       "container = make_container('HBox Pack End')\n",
-      "container.hbox()\n",
-      "container.pack_end()\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 `ContainerWidget` `flex0`, `flex1`, and `flex2` methods (parameterless) modify the containers flexibility.  Changing a container flexibility affects how and if the container will occupy the remaining space.  Setting `flex0` has the same result as setting no 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(parent=container))\n",
+      "        components.append(widgets.ContainerWidget())\n",
       "        components[i].set_css(child_style)\n",
       "        \n",
-      "        label = widgets.StringWidget(parent=components[i], default_view_name='HTMLView', value=str(flexes[i]))\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].flex0()\n",
+      "            components[i].add_class('box-flex0')\n",
       "        elif flexes[i] == 1:\n",
-      "            components[i].flex1()\n",
+      "            components[i].add_class('box-flex1')\n",
       "        elif flexes[i] == 2:\n",
-      "            components[i].flex2()\n",
-      "    container.children = components\n",
+      "            components[i].add_class('box-flex2')\n",
       "        \n",
       "container = make_container('Different Flex Configurations')\n",
-      "container.hbox()\n",
+      "container.add_class('hbox')\n",
       "fill_container(container, [0, 0, 0])\n",
       "        \n",
       "container = make_container('')\n",
-      "container.hbox()\n",
+      "container.add_class('hbox')\n",
       "fill_container(container, [0, 0, 1])\n",
       "        \n",
       "container = make_container('')\n",
-      "container.hbox()\n",
+      "container.add_class('hbox')\n",
       "fill_container(container, [0, 1, 1])\n",
       "        \n",
       "container = make_container('')\n",
-      "container.hbox()\n",
+      "container.add_class('hbox')\n",
       "fill_container(container, [0, 2, 2])\n",
       "        \n",
       "container = make_container('')\n",
-      "container.hbox()\n",
+      "container.add_class('hbox')\n",
       "fill_container(container, [0, 1, 2])\n",
       "        \n",
       "container = make_container('')\n",
-      "container.hbox()\n",
+      "container.add_class('hbox')\n",
       "fill_container(container, [1, 1, 2])"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
-     "prompt_number": 8
+     "prompt_number": 7
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "The `ContainerWidget` `align_start`, `align_center`, and `align_end` methods (parameterless) 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.StringWidget(parent=container, default_view_name='HTMLView', value=\"ABC\"[i]))\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.hbox()\n",
-      "container.align_start()\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.hbox()\n",
-      "container.align_center()\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.hbox()\n",
-      "container.align_end()\n",
+      "container.add_class(\"hbox\")\n",
+      "container.add_class(\"align-end\")\n",
       "fill_container(container)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
-     "prompt_number": 9
+     "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.hbox()\n",
-      "container.children=[widgets.FloatRangeWidget(orientation='vertical', description=str(i+1), value=50.0) \n",
+      "container.children=[widgets.FloatSliderWidget(orientation='vertical', description=str(i+1), value=50.0) \n",
       "                    for i in range(15)]\n",
-      "display(container)"
+      "display(container)\n",
+      "container.add_class('hbox')"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
-     "prompt_number": 11
-    },
-    {
-     "cell_type": "code",
-     "collapsed": false,
-     "input": [],
-     "language": "python",
-     "metadata": {},
-     "outputs": []
+     "prompt_number": 9
     }
    ],
    "metadata": {}
   }
  ]
 }
  No newline at end of file

examples/widgets/Part 6 - Custom Widget.ipynb

@@ -1,1246 +1,1065 b''
 {
  "metadata": {
   "cell_tags": [
    [
     "<None>",
     null
    ]
   ],
   "name": ""
  },
  "nbformat": 3,
  "nbformat_minor": 0,
  "worksheets": [
   {
    "cells": [
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Before reading, the author recommends the reader 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"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
-     "prompt_number": 15
+     "prompt_number": 19
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "The 3 part of this tutorial requires the 3rd party `dateutil` library.  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": 16
+     "prompt_number": 20
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "source": [
       "Abstract"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "This notebook implements a custom date picker widget.  The purpose of this notebook is to demonstrate the widget creation process.  To create a custom widget, custom Python and JavaScript 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 an overly simplified base to verify that the underlying framework is working as expected.  To start we will create an empty widget and make sure that it can be rendered.  The first step is to create the widget in Python."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "# Import the base Widget class and the traitlets Unicode class.\n",
-      "from IPython.html.widgets import Widget\n",
+      "from IPython.html.widgets import DOMWidget\n",
       "from IPython.utils.traitlets import Unicode\n",
       "\n",
       "# Define our DateWidget and its target model and default view.\n",
-      "class DateWidget(Widget):\n",
-      "    target_name = Unicode('DateWidgetModel')\n",
-      "    default_view_name = Unicode('DatePickerView')"
+      "class DateWidget(DOMWidget):\n",
+      "    _view_name = Unicode('DatePickerView', sync=True)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
-     "prompt_number": 17
+     "prompt_number": 21
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
-      "- **target_name** is a special `Widget` property that tells the widget framework which Backbone model in the front-end corresponds to this widget.\n",
-      "- **default_view_name** is the default Backbone view to display when the user calls `display` to display an instance of this widget.\n"
+      "- **_view_name** is the default Backbone view to display when the user calls `display` to display an instance of this widget.\n"
      ]
     },
     {
      "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.  All IPython widget code depends on `notebook/js/widget.js`.  In it the base widget model, base view, and widget manager are defined.  We need to use require.js to include this file:"
+      "In the IPython notebook [require.js](http://requirejs.org/) is used to load JavaScript dependencies.  All IPython widget code depends on `notebook/js/widgets/widget.js`.  In it the base widget model and base view are defined.  We need to use require.js to include this file:"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "%%javascript\n",
       "\n",
-      "require([\"notebook/js/widgets/\"], function(){\n",
+      "require([\"notebook/js/widgets/widget\"], function(WidgetManager){\n",
       "\n",
       "});"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "javascript": [
         "\n",
-        "require([\"notebook/js/widget\"], function(){\n",
+        "require([\"notebook/js/widgets/widget\"], function(WidgetManager){\n",
         "\n",
         "});"
        ],
        "metadata": {},
        "output_type": "display_data",
        "text": [
-        "<IPython.core.display.Javascript at 0x10a26a850>"
+        "<IPython.core.display.Javascript at 0x1e409d0>"
        ]
       }
      ],
-     "prompt_number": 18
-    },
-    {
-     "cell_type": "markdown",
-     "metadata": {},
-     "source": [
-      "The next step is to add a definition for the widget's model.  It's important to extend the `IPython.WidgetModel` which extends the Backbone.js base model instead of trying to extend the Backbone.js base model directly.  After defining the model, it needs to be registed with the widget manager using the `target_name` used in the Python code."
-     ]
-    },
-    {
-     "cell_type": "code",
-     "collapsed": false,
-     "input": [
-      "%%javascript\n",
-      "\n",
-      "require([\"notebook/js/widgets/base\"], function(){\n",
-      "    \n",
-      "    // Define the DateModel and register it with the widget manager.\n",
-      "    var DateModel = IPython.WidgetModel.extend({});\n",
-      "    IPython.widget_manager.register_widget_model('DateWidgetModel', DateModel);\n",
-      "});"
-     ],
-     "language": "python",
-     "metadata": {},
-     "outputs": [
-      {
-       "javascript": [
-        "\n",
-        "require([\"notebook/js/widgets/base\"], function(){\n",
-        "    \n",
-        "    // Define the DateModel and register it with the widget manager.\n",
-        "    var DateModel = IPython.WidgetModel.extend({});\n",
-        "    IPython.widget_manager.register_widget_model('DateWidgetModel', DateModel);\n",
-        "});"
-       ],
-       "metadata": {},
-       "output_type": "display_data",
-       "text": [
-        "<IPython.core.display.Javascript at 0x10a26aa10>"
-       ]
-      }
-     ],
-     "prompt_number": 20
+     "prompt_number": 22
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
-      "Now that the model is defined, we need to define a view that can be used to represent the model.  To do this, the `IPython.WidgetView` is extended.  A render function must be defined.  The render function is used to render a widget view instance to the DOM.  For now the render function renders a div that contains the text *Hello World!*  Lastly, the view needs to be registered with the widget manager like the model was.\n",
+      "Now we need to define a view that can be used to represent the model.  To do this, the `IPython.DOMWidgetView` is extended.  A render function must be defined.  The render function is used to render a widget view instance to the DOM.  For now the render function renders a div that contains the text *Hello World!*  Lastly, the view needs to be registered with the widget manager like the model was.\n",
       "\n",
       "**Final JavaScript code below:**"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "%%javascript\n",
       "\n",
-      "require([\"notebook/js/widgets/base\"], function(){\n",
-      "    \n",
-      "    // Define the DateModel and register it with the widget manager.\n",
-      "    var DateModel = IPython.WidgetModel.extend({});\n",
-      "    IPython.widget_manager.register_widget_model('DateWidgetModel', DateModel);\n",
+      "require([\"notebook/js/widgets/widget\"], function(WidgetManager){\n",
       "    \n",
       "    // Define the DatePickerView\n",
-      "    var DatePickerView = IPython.WidgetView.extend({\n",
-      "        \n",
-      "        render: function(){\n",
-      "            this.$el = $('<div />')\n",
-      "                .html('Hello World!');\n",
-      "        },\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",
-      "    IPython.widget_manager.register_widget_view('DatePickerView', DatePickerView);\n",
+      "    WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
       "});"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "javascript": [
         "\n",
-        "require([\"notebook/js/widgets/base\"], function(){\n",
-        "    \n",
-        "    // Define the DateModel and register it with the widget manager.\n",
-        "    var DateModel = IPython.WidgetModel.extend({});\n",
-        "    IPython.widget_manager.register_widget_model('DateWidgetModel', DateModel);\n",
+        "require([\"notebook/js/widgets/widget\"], function(WidgetManager){\n",
         "    \n",
         "    // Define the DatePickerView\n",
-        "    var DatePickerView = IPython.WidgetView.extend({\n",
-        "        \n",
-        "        render: function(){\n",
-        "            this.$el = $('<div />')\n",
-        "                .html('Hello World!');\n",
-        "        },\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",
-        "    IPython.widget_manager.register_widget_view('DatePickerView', DatePickerView);\n",
+        "    WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
         "});"
        ],
        "metadata": {},
        "output_type": "display_data",
        "text": [
-        "<IPython.core.display.Javascript at 0x10a26ae90>"
+        "<IPython.core.display.Javascript at 0x1e40a50>"
        ]
       }
      ],
      "prompt_number": 23
     },
     {
      "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)"
+      "DateWidget()"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 24
     },
     {
      "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!*  There was no custom state information associated with the widget.  To make an actual date widget, we need to add a property that will be synced between the Python model and the JavaScript model.  The new property must be a traitlet property so the widget machinery can automatically handle it.  The property needs to be added to the the `_keys` list.  The `_keys` list tells the widget machinery what traitlets should be synced with the front-end.  Adding this to the code from the last section:"
+      "In the last section we created a simple widget that displayed *Hello World!*  To make an actual date widget, we need to add a property that will be synced between the Python model and the JavaScript model.  The new property must be a traitlet property so the widget machinery can automatically handle it.  The property needs to be constructed with a `sync=True` keyword argument so the widget machinery knows to syncronize it with the fron-end.  Adding this to the code from the last section:"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "# Import the base Widget class and the traitlets Unicode class.\n",
-      "from IPython.html.widgets import Widget\n",
+      "from IPython.html.widgets import DOMWidget\n",
       "from IPython.utils.traitlets import Unicode\n",
       "\n",
       "# Define our DateWidget and its target model and default view.\n",
-      "class DateWidget(Widget):\n",
-      "    target_name = Unicode('DateWidgetModel')\n",
-      "    default_view_name = Unicode('DatePickerView')\n",
-      "    \n",
-      "    # Define the custom state properties to sync with the front-end\n",
-      "    _keys = ['value']\n",
-      "    value = Unicode()"
+      "class DateWidget(DOMWidget):\n",
+      "    _view_name = Unicode('DatePickerView', sync=True)\n",
+      "    value = Unicode(sync=True)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 25
     },
     {
      "cell_type": "heading",
      "level": 2,
      "metadata": {},
      "source": [
       "JavaScript"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "In the JavaScript there is no need to define the same properties in the JavaScript model.  When the JavaScript model is created for the first time, it copies all of the attributes from the Python model.  We need to replace *Hello World!* with an actual HTML date picker widget."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "%%javascript\n",
       "\n",
-      "require([\"notebook/js/widgets/base\"], function(){\n",
-      "    \n",
-      "    // Define the DateModel and register it with the widget manager.\n",
-      "    var DateModel = IPython.WidgetModel.extend({});\n",
-      "    IPython.widget_manager.register_widget_model('DateWidgetModel', DateModel);\n",
+      "require([\"notebook/js/widgets/widget\"], function(WidgetManager){\n",
       "    \n",
       "    // Define the DatePickerView\n",
-      "    var DatePickerView = IPython.WidgetView.extend({\n",
-      "        \n",
+      "    var DatePickerView = IPython.DOMWidgetView.extend({\n",
       "        render: function(){\n",
       "            \n",
-      "            // Create a div to hold our widget.\n",
-      "            this.$el = $('<div />');\n",
-      "            \n",
       "            // Create the date picker control.\n",
       "            this.$date = $('<input />')\n",
-      "                .attr('type', 'date');\n",
+      "                .attr('type', 'date')\n",
+      "                .appendTo(this.$el);\n",
       "        },\n",
       "    });\n",
       "    \n",
       "    // Register the DatePickerView with the widget manager.\n",
-      "    IPython.widget_manager.register_widget_view('DatePickerView', DatePickerView);\n",
+      "    WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
       "});"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "javascript": [
         "\n",
-        "require([\"notebook/js/widgets/base\"], function(){\n",
-        "    \n",
-        "    // Define the DateModel and register it with the widget manager.\n",
-        "    var DateModel = IPython.WidgetModel.extend({});\n",
-        "    IPython.widget_manager.register_widget_model('DateWidgetModel', DateModel);\n",
+        "require([\"notebook/js/widgets/widget\"], function(WidgetManager){\n",
         "    \n",
         "    // Define the DatePickerView\n",
-        "    var DatePickerView = IPython.WidgetView.extend({\n",
-        "        \n",
+        "    var DatePickerView = IPython.DOMWidgetView.extend({\n",
         "        render: function(){\n",
         "            \n",
-        "            // Create a div to hold our widget.\n",
-        "            this.$el = $('<div />');\n",
-        "            \n",
         "            // Create the date picker control.\n",
         "            this.$date = $('<input />')\n",
-        "                .attr('type', 'date');\n",
+        "                .attr('type', 'date')\n",
+        "                .appendTo(this.$el);\n",
         "        },\n",
         "    });\n",
         "    \n",
         "    // Register the DatePickerView with the widget manager.\n",
-        "    IPython.widget_manager.register_widget_view('DatePickerView', DatePickerView);\n",
+        "    WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
         "});"
        ],
        "metadata": {},
        "output_type": "display_data",
        "text": [
-        "<IPython.core.display.Javascript at 0x10a274050>"
+        "<IPython.core.display.Javascript at 0x1e40810>"
        ]
       }
      ],
      "prompt_number": 26
     },
     {
      "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([\"notebook/js/widgets/base\"], function(){\n",
-      "    \n",
-      "    // Define the DateModel and register it with the widget manager.\n",
-      "    var DateModel = IPython.WidgetModel.extend({});\n",
-      "    IPython.widget_manager.register_widget_model('DateWidgetModel', DateModel);\n",
+      "require([\"notebook/js/widgets/widget\"], function(WidgetManager){\n",
       "    \n",
       "    // Define the DatePickerView\n",
-      "    var DatePickerView = IPython.WidgetView.extend({\n",
-      "        \n",
+      "    var DatePickerView = IPython.DOMWidgetView.extend({\n",
       "        render: function(){\n",
       "            \n",
-      "            // Create a div to hold our widget.\n",
-      "            this.$el = $('<div />');\n",
-      "            \n",
       "            // Create the date picker control.\n",
       "            this.$date = $('<input />')\n",
-      "                .attr('type', 'date');\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 IPython.WidgetView.prototype.update.call(this);\n",
+      "            return DatePickerView.__super__.update.apply(this);\n",
       "        },\n",
       "    });\n",
       "    \n",
       "    // Register the DatePickerView with the widget manager.\n",
-      "    IPython.widget_manager.register_widget_view('DatePickerView', DatePickerView);\n",
+      "    WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
       "});"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "javascript": [
         "\n",
-        "require([\"notebook/js/widgets/base\"], function(){\n",
-        "    \n",
-        "    // Define the DateModel and register it with the widget manager.\n",
-        "    var DateModel = IPython.WidgetModel.extend({});\n",
-        "    IPython.widget_manager.register_widget_model('DateWidgetModel', DateModel);\n",
+        "require([\"notebook/js/widgets/widget\"], function(WidgetManager){\n",
         "    \n",
         "    // Define the DatePickerView\n",
-        "    var DatePickerView = IPython.WidgetView.extend({\n",
-        "        \n",
+        "    var DatePickerView = IPython.DOMWidgetView.extend({\n",
         "        render: function(){\n",
         "            \n",
-        "            // Create a div to hold our widget.\n",
-        "            this.$el = $('<div />');\n",
-        "            \n",
         "            // Create the date picker control.\n",
         "            this.$date = $('<input />')\n",
-        "                .attr('type', 'date');\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 IPython.WidgetView.prototype.update.call(this);\n",
+        "            return DatePickerView.__super__.update.apply(this);\n",
         "        },\n",
         "    });\n",
         "    \n",
         "    // Register the DatePickerView with the widget manager.\n",
-        "    IPython.widget_manager.register_widget_view('DatePickerView', DatePickerView);\n",
+        "    WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
         "});"
        ],
        "metadata": {},
        "output_type": "display_data",
        "text": [
-        "<IPython.core.display.Javascript at 0x10a2740d0>"
+        "<IPython.core.display.Javascript at 0x1e40390>"
        ]
       }
      ],
      "prompt_number": 27
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
-      "To get the changed value from the front-end to publish itself to the back-end, we need to listen to the change event triggered by the HTM date control and set the value in the model.  By setting the `this.$el` property of the view, we break the Backbone powered event handling.  To fix this, a call to `this.delegateEvents()` must be added after `this.$el` is set.  \n",
-      "\n",
-      "After the date change event fires and the new value is set in the model, it's very important that we call `update_other_views(this)` to make the other views on the page update and to let the widget machinery know which view changed the model.  This is important because the widget machinery needs to know which cell to route the message callbacks to.\n",
+      "To get the changed value from the front-end to publish itself to the back-end, we need to listen to the change event triggered by the HTM date control and set the value in the model.  After the date change event fires and the new value is set in the model, it's very important that we call `this.touch()` to let the widget machinery know which view changed the model.  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",
-      "require([\"notebook/js/widgets/base\"], function(){\n",
-      "    \n",
-      "    // Define the DateModel and register it with the widget manager.\n",
-      "    var DateModel = IPython.WidgetModel.extend({});\n",
-      "    IPython.widget_manager.register_widget_model('DateWidgetModel', DateModel);\n",
+      "\n",
+      "require([\"notebook/js/widgets/widget\"], function(WidgetManager){\n",
       "    \n",
       "    // Define the DatePickerView\n",
-      "    var DatePickerView = IPython.WidgetView.extend({\n",
-      "        \n",
+      "    var DatePickerView = IPython.DOMWidgetView.extend({\n",
       "        render: function(){\n",
       "            \n",
-      "            // Create a div to hold our widget.\n",
-      "            this.$el = $('<div />');\n",
-      "            this.delegateEvents();\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 IPython.WidgetView.prototype.update.call(this);\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",
       "    \n",
       "    // Register the DatePickerView with the widget manager.\n",
-      "    IPython.widget_manager.register_widget_view('DatePickerView', DatePickerView);\n",
+      "    WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
       "});"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "javascript": [
         "\n",
-        "require([\"notebook/js/widgets/base\"], function(){\n",
-        "    \n",
-        "    // Define the DateModel and register it with the widget manager.\n",
-        "    var DateModel = IPython.WidgetModel.extend({});\n",
-        "    IPython.widget_manager.register_widget_model('DateWidgetModel', DateModel);\n",
+        "\n",
+        "require([\"notebook/js/widgets/widget\"], function(WidgetManager){\n",
         "    \n",
         "    // Define the DatePickerView\n",
-        "    var DatePickerView = IPython.WidgetView.extend({\n",
-        "        \n",
+        "    var DatePickerView = IPython.DOMWidgetView.extend({\n",
         "        render: function(){\n",
         "            \n",
-        "            // Create a div to hold our widget.\n",
-        "            this.$el = $('<div />');\n",
-        "            this.delegateEvents();\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 IPython.WidgetView.prototype.update.call(this);\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",
         "    \n",
         "    // Register the DatePickerView with the widget manager.\n",
-        "    IPython.widget_manager.register_widget_view('DatePickerView', DatePickerView);\n",
+        "    WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
         "});"
        ],
        "metadata": {},
        "output_type": "display_data",
        "text": [
-        "<IPython.core.display.Javascript at 0x10a274a10>"
+        "<IPython.core.display.Javascript at 0x1e40890>"
        ]
       }
      ],
-     "prompt_number": 52
+     "prompt_number": 28
     },
     {
      "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": 29
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Display the widget again to make sure that both views remain in sync."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
-      "display(my_widget)"
+      "my_widget"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 30
     },
     {
      "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": 37,
+       "prompt_number": 31,
        "text": [
-        "u'1998-12-01'"
+        "u''"
        ]
       }
      ],
-     "prompt_number": 37
+     "prompt_number": 31
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Set the date from Python"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "my_widget.value = \"1998-12-01\" # December 1st, 1999"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
-     "prompt_number": 34
+     "prompt_number": 32
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "source": [
       "Section 3 - Extra credit"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "In the last section we created a fully working date picker widget.  Now we will add custom validation and support for labels.  Currently only the ISO date format \"YYYY-MM-DD\" is supported.  We will add support for all of the date formats recognized by the 3rd party Python dateutil library."
      ]
     },
     {
      "cell_type": "heading",
      "level": 2,
      "metadata": {},
      "source": [
       "Python"
      ]
     },
     {
      "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.  We can take advantage of this to perform validation and parsing of different date string formats.  Below a method that listens to value has been added to the DateWidget."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "# Import the base Widget class and the traitlets Unicode class.\n",
-      "from IPython.html.widgets import Widget\n",
+      "from IPython.html.widgets import DOMWidget\n",
       "from IPython.utils.traitlets import Unicode\n",
       "\n",
       "# Define our DateWidget and its target model and default view.\n",
-      "class DateWidget(Widget):\n",
-      "    target_name = Unicode('DateWidgetModel')\n",
-      "    default_view_name = Unicode('DatePickerView')\n",
-      "    \n",
-      "    # Define the custom state properties to sync with the front-end\n",
-      "    _keys = ['value']\n",
-      "    value = Unicode()\n",
+      "class DateWidget(DOMWidget):\n",
+      "    _view_name = Unicode('DatePickerView', sync=True)\n",
+      "    value = 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\n",
       "    "
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
-     "prompt_number": 38
+     "prompt_number": 33
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Now the function that parses the date string and only sets it in the correct format can be added."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
+      "# Import the dateutil library to parse date strings.\n",
+      "from dateutil import parser\n",
       "\n",
       "# Import the base Widget class and the traitlets Unicode class.\n",
-      "from IPython.html.widgets import Widget\n",
+      "from IPython.html.widgets import DOMWidget\n",
       "from IPython.utils.traitlets import Unicode\n",
       "\n",
       "# Define our DateWidget and its target model and default view.\n",
-      "class DateWidget(Widget):\n",
-      "    target_name = Unicode('DateWidgetModel')\n",
-      "    default_view_name = Unicode('DatePickerView')\n",
-      "    \n",
-      "    # Define the custom state properties to sync with the front-end\n",
-      "    _keys = ['value']\n",
-      "    value = Unicode()\n",
+      "class DateWidget(DOMWidget):\n",
+      "    _view_name = Unicode('DatePickerView', sync=True)\n",
+      "    value = 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": 39
+     "prompt_number": 34
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "The standard property name used for widget labels is `description`.  In the code block below, `description` has been added to the Python widget."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "# Import the dateutil library to parse date strings.\n",
       "from dateutil import parser\n",
       "\n",
       "# Import the base Widget class and the traitlets Unicode class.\n",
-      "from IPython.html.widgets import Widget\n",
+      "from IPython.html.widgets import DOMWidget\n",
       "from IPython.utils.traitlets import Unicode\n",
       "\n",
       "# Define our DateWidget and its target model and default view.\n",
-      "class DateWidget(Widget):\n",
-      "    target_name = Unicode('DateWidgetModel')\n",
-      "    default_view_name = Unicode('DatePickerView')\n",
-      "    \n",
-      "    # Define the custom state properties to sync with the front-end\n",
-      "    _keys = ['value', 'description']\n",
-      "    value = Unicode()\n",
-      "    description = Unicode()\n",
+      "class DateWidget(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": 40
+     "prompt_number": 35
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Finally, a callback list is added so the user can perform custom validation.  If any one of the callbacks returns False, the new date time is not set.\n",
       "\n",
       "**Final Python code below:**"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "# Import the dateutil library to parse date strings.\n",
       "from dateutil import parser\n",
       "\n",
       "# Import the base Widget class and the traitlets Unicode class.\n",
-      "from IPython.html.widgets import Widget\n",
+      "from IPython.html.widgets import DOMWidget, CallbackDispatcher\n",
       "from IPython.utils.traitlets import Unicode\n",
       "\n",
       "# Define our DateWidget and its target model and default view.\n",
-      "class DateWidget(Widget):\n",
-      "    target_name = Unicode('DateWidgetModel')\n",
-      "    default_view_name = Unicode('DatePickerView')\n",
-      "    \n",
-      "    # Define the custom state properties to sync with the front-end\n",
-      "    _keys = ['value', 'description']\n",
-      "    value = Unicode()\n",
-      "    description = Unicode()\n",
+      "class DateWidget(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",
-      "        self._validation_callbacks = []\n",
+      "        \n",
+      "        # Specify the number of positional arguments supported.  For \n",
+      "        # validation we only are worried about one parameter, the\n",
+      "        # new value that should be validated.\n",
+      "        self.validation = CallbackDispatcher(acceptable_nargs=[1])\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 = None\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",
-      "            if self.handle_validate(parsed_date):\n",
+      "            validation = self.validation(parsed_date)\n",
+      "            if validation is None or validation == 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.\n",
-      "                \n",
-      "    \n",
-      "    # Allow the user to register custom validation callbacks.\n",
-      "    # callback(new value as a datetime object)\n",
-      "    def on_validate(self, callback, remove=False):\n",
-      "        if remove and callback in self._validation_callbacks:\n",
-      "            self._validation_callbacks.remove(callback)\n",
-      "        elif (not remove) and (not callback in self._validation_callbacks):\n",
-      "            self._validation_callbacks.append(callback)\n",
-      "    \n",
-      "    # Call user validation callbacks.  Return True if valid.\n",
-      "    def handle_validate(self, new_value):\n",
-      "        for callback in self._validation_callbacks:\n",
-      "            if not callback(new_value):\n",
-      "                return False\n",
-      "        return True\n",
-      "        "
+      "                                  # to make sure that the date control date doesn't change."
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
-     "prompt_number": 41
+     "prompt_number": 45
     },
     {
      "cell_type": "heading",
      "level": 2,
      "metadata": {},
      "source": [
       "JavaScript"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Using the Javascript code from the last section, we add a label to the date time object.  The label is a div with the `widget-hlabel` class applied to it.  The `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.  Similar to the `widget-hlabel` class is the `widget-hbox-single` class.  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([\"notebook/js/widgets/base\"], function(){\n",
-      "    \n",
-      "    // Define the DateModel and register it with the widget manager.\n",
-      "    var DateModel = IPython.WidgetModel.extend({});\n",
-      "    IPython.widget_manager.register_widget_model('DateWidgetModel', DateModel);\n",
+      "\n",
+      "require([\"notebook/js/widgets/widget\"], function(WidgetManager){\n",
       "    \n",
       "    // Define the DatePickerView\n",
-      "    var DatePickerView = IPython.WidgetView.extend({\n",
-      "        \n",
+      "    var DatePickerView = IPython.DOMWidgetView.extend({\n",
       "        render: function(){\n",
-      "            \n",
-      "            // Create a div to hold our widget.\n",
-      "            this.$el = $('<div />')\n",
-      "                .addClass('widget-hbox-single'); // Apply this class to the widget container to make\n",
-      "                                                 // it fit with the other built in widgets.\n",
-      "            this.delegateEvents();\n",
-      "            \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.html(description);\n",
+      "                this.$label.text(description);\n",
       "            }\n",
       "            \n",
-      "            return IPython.WidgetView.prototype.update.call(this);\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",
       "    \n",
       "    // Register the DatePickerView with the widget manager.\n",
-      "    IPython.widget_manager.register_widget_view('DatePickerView', DatePickerView);\n",
+      "    WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
       "});"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "javascript": [
         "\n",
-        "require([\"notebook/js/widgets/base\"], function(){\n",
-        "    \n",
-        "    // Define the DateModel and register it with the widget manager.\n",
-        "    var DateModel = IPython.WidgetModel.extend({});\n",
-        "    IPython.widget_manager.register_widget_model('DateWidgetModel', DateModel);\n",
+        "\n",
+        "require([\"notebook/js/widgets/widget\"], function(WidgetManager){\n",
         "    \n",
         "    // Define the DatePickerView\n",
-        "    var DatePickerView = IPython.WidgetView.extend({\n",
-        "        \n",
+        "    var DatePickerView = IPython.DOMWidgetView.extend({\n",
         "        render: function(){\n",
-        "            \n",
-        "            // Create a div to hold our widget.\n",
-        "            this.$el = $('<div />')\n",
-        "                .addClass('widget-hbox-single'); // Apply this class to the widget container to make\n",
-        "                                                 // it fit with the other built in widgets.\n",
-        "            this.delegateEvents();\n",
-        "            \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.html(description);\n",
+        "                this.$label.text(description);\n",
         "            }\n",
         "            \n",
-        "            return IPython.WidgetView.prototype.update.call(this);\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",
         "    \n",
         "    // Register the DatePickerView with the widget manager.\n",
-        "    IPython.widget_manager.register_widget_view('DatePickerView', DatePickerView);\n",
+        "    WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
         "});"
        ],
        "metadata": {},
        "output_type": "display_data",
        "text": [
-        "<IPython.core.display.Javascript at 0x10a274a10>"
+        "<IPython.core.display.Javascript at 0x1efe210>"
        ]
       }
      ],
-     "prompt_number": 53
+     "prompt_number": 40
     },
     {
      "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.StringWidget(description=\"First:\"))\n",
-      "display(widgets.StringWidget(description=\"Last:\"))\n",
+      "display(widgets.TextBoxWidget(description=\"First:\"))\n",
+      "display(widgets.TextBoxWidget(description=\"Last:\"))\n",
       "\n",
-      "my_widget = DateWidget(description=\"DOB:\")\n",
-      "display(my_widget)"
-     ],
-     "language": "python",
-     "metadata": {},
-     "outputs": [],
-     "prompt_number": 43
-    },
-    {
-     "cell_type": "markdown",
-     "metadata": {},
-     "source": [
-      "Since the date widget uses `value` and `description`, we can also display its value using a `TextBoxView`.  The allows us to look at the raw date value being passed to and from the back-end and front-end."
-     ]
-    },
-    {
-     "cell_type": "code",
-     "collapsed": false,
-     "input": [
-      "display(my_widget, view_name=\"TextBoxView\")"
+      "my_widget = DateWidget()\n",
+      "display(my_widget)\n",
+      "my_widget.description=\"DOB:\""
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
-     "prompt_number": 44
+     "prompt_number": 46
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
-      "Now we will try to create a widget that only accepts dates in the year 2013.  We render the widget without a description to verify that it can still render without a label."
+      "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 validate_date(date):\n",
-      "    return not date is None and date.year == 2013\n",
-      "my_widget.on_validate(validate_date)"
+      "    return not date is None and date.year == 2014\n",
+      "my_widget.validation.register_callback(validate_date)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
-     "prompt_number": 57
+     "prompt_number": 47
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "# Try setting a valid date\n",
-      "my_widget.value = \"December 2, 2013\""
+      "my_widget.value = \"December 2, 2014\""
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
-     "prompt_number": 46
+     "prompt_number": 48
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "# Try setting an invalid date\n",
       "my_widget.value = \"June 12, 1999\""
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
-     "prompt_number": 48
+     "prompt_number": 49
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "my_widget.value"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "metadata": {},
        "output_type": "pyout",
-       "prompt_number": 58,
+       "prompt_number": 50,
        "text": [
-        "u''"
+        "u'2014-12-02'"
        ]
       }
      ],
-     "prompt_number": 58
-    },
-    {
-     "cell_type": "code",
-     "collapsed": false,
-     "input": [],
-     "language": "python",
-     "metadata": {},
-     "outputs": []
+     "prompt_number": 50
     }
    ],
    "metadata": {}
   }
  ]
 }
  No newline at end of file