Merge pull request #4374 from jdfreder/widget-msg

IPEP 23: Backbone.js Widgets

IPython/html/static/notebook/js/widgetmanager.js

@@ -0,0 +1,210 b''
+//----------------------------------------------------------------------------
+//  Copyright (C) 2013  The IPython Development Team
+//
+//  Distributed under the terms of the BSD License.  The full license is in
+//  the file COPYING, distributed as part of this software.
+//----------------------------------------------------------------------------
+
+//============================================================================
+// WidgetModel, WidgetView, and WidgetManager
+//============================================================================
+/**
+ * Base Widget classes
+ * @module IPython
+ * @namespace IPython
+ * @submodule widget
+ */
+
+(function () {
+    "use strict";
+
+    // Use require.js 'define' method so that require.js is intelligent enough to
+    // syncronously load everything within this file when it is being 'required' 
+    // elsewhere.
+    define(["underscore",
+             "backbone",
+            ], function (Underscore, Backbone) {
+
+        //--------------------------------------------------------------------
+        // WidgetManager class
+        //--------------------------------------------------------------------
+        var WidgetManager = function (comm_manager) {
+            // Public constructor
+            WidgetManager._managers.push(this);
+
+            // Attach a comm manager to the 
+            this.comm_manager = comm_manager;
+            this._models = {}; /* Dictionary of model ids and model instances */
+
+            // Register already-registered widget model types with the comm manager.
+            var that = this;
+            _.each(WidgetManager._model_types, function(model_type, model_name) {
+                that.comm_manager.register_target(model_name, $.proxy(that._handle_comm_open, that));
+            });
+        };
+
+        //--------------------------------------------------------------------
+        // Class level
+        //--------------------------------------------------------------------
+        WidgetManager._model_types = {}; /* Dictionary of model type names (target_name) and model types. */
+        WidgetManager._view_types = {}; /* Dictionary of view names and view types. */
+        WidgetManager._managers = []; /* List of widget managers */
+
+        WidgetManager.register_widget_model = function (model_name, model_type) {
+            // Registers a widget model by name.
+            WidgetManager._model_types[model_name] = model_type;
+
+            // Register the widget with the comm manager.  Make sure to pass this object's context
+            // in so `this` works in the call back.
+            _.each(WidgetManager._managers, function(instance, i) {
+                if (instance.comm_manager !== null) {
+                    instance.comm_manager.register_target(model_name, $.proxy(instance._handle_comm_open, instance));
+                }
+            });
+        };
+
+        WidgetManager.register_widget_view = function (view_name, view_type) {
+            // Registers a widget view by name.
+            WidgetManager._view_types[view_name] = view_type;
+        };
+
+        //--------------------------------------------------------------------
+        // Instance level
+        //--------------------------------------------------------------------
+        WidgetManager.prototype.display_view = function(msg, model) {
+            // Displays a view for a particular model.
+            var cell = this.get_msg_cell(msg.parent_header.msg_id);
+            if (cell === null) {
+                console.log("Could not determine where the display" + 
+                    " message was from.  Widget will not be displayed");
+            } else {
+                var view = this.create_view(model, {cell: cell});
+                if (view === null) {
+                    console.error("View creation failed", model);
+                }
+                if (cell.widget_subarea) {
+                    
+                    cell.widget_area.show();
+                    cell.widget_subarea.append(view.$el);
+                }
+            }
+        };
+
+        WidgetManager.prototype.create_view = function(model, options, view) {
+            // Creates a view for a particular model.
+            var view_name = model.get('_view_name');
+            var ViewType = WidgetManager._view_types[view_name];
+            if (ViewType) {
+
+                // If a view is passed into the method, use that view's cell as
+                // the cell for the view that is created.
+                options = options || {};
+                if (view !== undefined) {
+                    options.cell = view.options.cell;
+                }
+
+                // Create and render the view...
+                var parameters = {model: model, options: options};
+                view = new ViewType(parameters);
+                view.render();
+                model.views.push(view);
+                model.on('destroy', view.remove, view);
+
+                this._handle_new_view(view);
+                return view;
+            }
+            return null;
+        };
+
+        WidgetManager.prototype._handle_new_view = function (view) {
+            // Called when a view has been created and rendered.
+
+            // If the view has a well defined element, inform the keyboard
+            // manager about the view's element, so as the element can
+            // escape the dreaded command mode.
+            if (view.$el) {
+                IPython.keyboard_manager.register_events(view.$el);
+            }
+        };
+
+        WidgetManager.prototype.get_msg_cell = function (msg_id) {
+            var cell = null;
+            // First, check to see if the msg was triggered by cell execution.
+            if (IPython.notebook) {
+                cell = IPython.notebook.get_msg_cell(msg_id);
+            }
+            if (cell !== null) {
+                return cell;
+            }
+            // Second, check to see if a get_cell callback was defined
+            // for the message.  get_cell callbacks are registered for
+            // widget messages, so this block is actually checking to see if the
+            // message was triggered by a widget.
+            var kernel = this.comm_manager.kernel;
+            if (kernel) {
+                var callbacks = kernel.get_callbacks_for_msg(msg_id);
+                if (callbacks && callbacks.iopub &&
+                    callbacks.iopub.get_cell !== undefined) {
+                    return callbacks.iopub.get_cell();
+                }
+            }
+            
+            // Not triggered by a cell or widget (no get_cell callback 
+            // exists).
+            return null;
+        };
+
+        WidgetManager.prototype.callbacks = function (view) {
+            // callback handlers specific a view
+            var callbacks = {};
+            if (view && view.options.cell) {
+
+                // Try to get output handlers
+                var cell = view.options.cell;
+                var handle_output = null;
+                var handle_clear_output = null;
+                if (cell.output_area) {
+                    handle_output = $.proxy(cell.output_area.handle_output, cell.output_area);
+                    handle_clear_output = $.proxy(cell.output_area.handle_clear_output, cell.output_area);
+                }
+
+                // Create callback dict using what is known
+                var that = this;
+                callbacks = {
+                    iopub : {
+                        output : handle_output,
+                        clear_output : handle_clear_output,
+
+                        // Special function only registered by widget messages.
+                        // Allows us to get the cell for a message so we know
+                        // where to add widgets if the code requires it.
+                        get_cell : function () {
+                            return cell;
+                        },
+                    },
+                };
+            }
+            return callbacks;
+        };
+
+        WidgetManager.prototype.get_model = function (model_id) {
+            // Look-up a model instance by its id.
+            var model = this._models[model_id];
+            if (model !== undefined && model.id == model_id) {
+                return model;
+            }
+            return null;
+        };
+
+        WidgetManager.prototype._handle_comm_open = function (comm, msg) {
+            // Handle when a comm is opened.
+            var model_id = comm.comm_id;
+            var widget_type_name = msg.content.target_name;
+            var widget_model = new WidgetManager._model_types[widget_type_name](this, model_id, comm);
+            this._models[model_id] = widget_model;
+        };
+        
+        IPython.WidgetManager = WidgetManager;
+        return IPython.WidgetManager;
+    });
+}());

IPython/html/static/notebook/js/widgets/init.js

@@ -0,0 +1,22 b''
+//----------------------------------------------------------------------------
+//  Copyright (C) 2013 The IPython Development Team
+//
+//  Distributed under the terms of the BSD License.  The full license is in
+//  the file COPYING, distributed as part of this software.
+//----------------------------------------------------------------------------
+
+//============================================================================
+// Basic Widgets
+//============================================================================
+
+define([
+    "notebook/js/widgets/widget_bool",
+    "notebook/js/widgets/widget_button",
+    "notebook/js/widgets/widget_container",
+    "notebook/js/widgets/widget_float",
+    "notebook/js/widgets/widget_image",
+    "notebook/js/widgets/widget_int",
+    "notebook/js/widgets/widget_selection",
+    "notebook/js/widgets/widget_selectioncontainer",
+    "notebook/js/widgets/widget_string",
+], function(){ return true; });

IPython/html/static/notebook/js/widgets/widget.js

@@ -0,0 +1,418 b''
+//----------------------------------------------------------------------------
+//  Copyright (C) 2013 The IPython Development Team
+//
+//  Distributed under the terms of the BSD License.  The full license is in
+//  the file COPYING, distributed as part of this software.
+//----------------------------------------------------------------------------
+
+//============================================================================
+// Base Widget Model and View classes
+//============================================================================
+
+/**
+ * @module IPython
+ * @namespace IPython
+ **/
+
+define(["notebook/js/widgetmanager",
+        "underscore",
+        "backbone"], 
+function(WidgetManager, Underscore, Backbone){
+
+    var WidgetModel = Backbone.Model.extend({
+        constructor: function (widget_manager, model_id, comm) {
+            // Constructor
+            //
+            // Creates a WidgetModel instance.
+            //
+            // Parameters
+            // ----------
+            // widget_manager : WidgetManager instance
+            // model_id : string
+            //      An ID unique to this model.
+            // comm : Comm instance (optional)
+            this.widget_manager = widget_manager;
+            this.pending_msgs = 0;
+            this.msg_throttle = 3;
+            this.msg_buffer = null;
+            this.key_value_lock = null;
+            this.id = model_id;
+            this.views = [];
+
+            if (comm !== undefined) {
+                // Remember comm associated with the model.
+                this.comm = comm;
+                comm.model = this;
+
+                // Hook comm messages up to model.
+                comm.on_close($.proxy(this._handle_comm_closed, this));
+                comm.on_msg($.proxy(this._handle_comm_msg, this));
+            }
+            return Backbone.Model.apply(this);
+        },
+
+        send: function (content, callbacks) {
+            // Send a custom msg over the comm.
+            if (this.comm !== undefined) {
+                var data = {method: 'custom', content: content};
+                this.comm.send(data, callbacks);
+                this.pending_msgs++;
+            }
+        },
+
+        _handle_comm_closed: function (msg) {
+            // Handle when a widget is closed.
+            this.trigger('comm:close');
+            delete this.comm.model; // Delete ref so GC will collect widget model.
+            delete this.comm;
+            delete this.model_id; // Delete id from model so widget manager cleans up.
+            _.each(this.views, function(view, i) {
+                view.remove();
+            });
+        },
+
+        _handle_comm_msg: function (msg) {
+            // Handle incoming comm msg.
+            var method = msg.content.data.method;
+            switch (method) {
+                case 'update':
+                    this.apply_update(msg.content.data.state);
+                    break;
+                case 'custom':
+                    this.trigger('msg:custom', msg.content.data.content);
+                    break;
+                case 'display':
+                    this.widget_manager.display_view(msg, this);
+                    break;
+            }
+        },
+
+        apply_update: function (state) {
+            // Handle when a widget is updated via the python side.
+            var that = this;
+            _.each(state, function(value, key) {
+                that.key_value_lock = [key, value];
+                try {
+                    that.set(key, that._unpack_models(value));
+                } finally {
+                    that.key_value_lock = null;
+                }
+            });
+        },
+
+        _handle_status: function (msg, callbacks) {
+            // Handle status msgs.
+
+            // execution_state : ('busy', 'idle', 'starting')
+            if (this.comm !== undefined) {
+                if (msg.content.execution_state ==='idle') {
+                    // Send buffer if this message caused another message to be
+                    // throttled.
+                    if (this.msg_buffer !== null &&
+                        this.msg_throttle === this.pending_msgs) {
+                        var data = {method: 'backbone', sync_method: 'update', sync_data: this.msg_buffer};
+                        this.comm.send(data, callbacks);
+                        this.msg_buffer = null;
+                    } else {
+                        --this.pending_msgs;
+                    }
+                }
+            }
+        },
+
+        callbacks: function(view) {
+            // Create msg callbacks for a comm msg.
+            var callbacks = this.widget_manager.callbacks(view);
+
+            if (callbacks.iopub === undefined) {
+                callbacks.iopub = {};
+            }
+
+            var that = this;
+            callbacks.iopub.status = function (msg) {
+                that._handle_status(msg, callbacks);
+            };
+            return callbacks;
+        },
+
+        sync: function (method, model, options) {
+            // Handle sync to the back-end.  Called when a model.save() is called.
+
+            // Make sure a comm exists.
+            var error = options.error || function() {
+                console.error('Backbone sync error:', arguments);
+            };
+            if (this.comm === undefined) {
+                error();
+                return false;
+            }
+
+            // Delete any key value pairs that the back-end already knows about.
+            var attrs = (method === 'patch') ? options.attrs : model.toJSON(options);
+            if (this.key_value_lock !== null) {
+                var key = this.key_value_lock[0];
+                var value = this.key_value_lock[1];
+                if (attrs[key] === value) {
+                    delete attrs[key];
+                }
+            }
+
+            // Only sync if there are attributes to send to the back-end.
+            if (_.size(attrs) > 0) {
+
+                // If this message was sent via backbone itself, it will not
+                // have any callbacks.  It's important that we create callbacks
+                // so we can listen for status messages, etc...
+                var callbacks = options.callbacks || this.callbacks();
+
+                // Check throttle.
+                if (this.pending_msgs >= this.msg_throttle) {
+                    // The throttle has been exceeded, buffer the current msg so
+                    // it can be sent once the kernel has finished processing 
+                    // some of the existing messages.
+                    
+                    // Combine updates if it is a 'patch' sync, otherwise replace updates
+                    switch (method) {
+                        case 'patch':
+                            this.msg_buffer = $.extend(this.msg_buffer || {}, attrs);
+                            break;
+                        case 'update':
+                        case 'create':
+                            this.msg_buffer = attrs;
+                            break;
+                        default:
+                            error();
+                            return false;
+                    }
+                    this.msg_buffer_callbacks = callbacks;
+
+                } else {
+                    // We haven't exceeded the throttle, send the message like 
+                    // normal.
+                    var data = {method: 'backbone', sync_data: attrs};
+                    this.comm.send(data, callbacks);
+                    this.pending_msgs++;
+                }
+            }
+            // Since the comm is a one-way communication, assume the message 
+            // arrived.  Don't call success since we don't have a model back from the server
+            // this means we miss out on the 'sync' event.
+        },
+
+        save_changes: function(callbacks) {
+            // Push this model's state to the back-end
+            //
+            // This invokes a Backbone.Sync.
+            this.save(this.changedAttributes(), {patch: true, callbacks: callbacks});
+        },
+
+        _pack_models: function(value) {
+            // Replace models with model ids recursively.
+            if (value instanceof Backbone.Model) {
+                return value.id;
+            } else if (value instanceof Object) {
+                var packed = {};
+                var that = this;
+                _.each(value, function(sub_value, key) {
+                    packed[key] = that._pack_models(sub_value);
+                });
+                return packed;
+            } else {
+                return value;
+            }
+        },
+
+        _unpack_models: function(value) {
+            // Replace model ids with models recursively.
+            if (value instanceof Object) {
+                var unpacked = {};
+                var that = this;
+                _.each(value, function(sub_value, key) {
+                    unpacked[key] = that._unpack_models(sub_value);
+                });
+                return unpacked;
+            } else {
+                var model = this.widget_manager.get_model(value);
+                if (model) {
+                    return model;
+                } else {
+                    return value;
+                }
+            }
+        },
+
+    });
+    WidgetManager.register_widget_model('WidgetModel', WidgetModel);
+
+
+    var WidgetView = Backbone.View.extend({
+        initialize: function(parameters) {
+            // Public constructor.
+            this.model.on('change',this.update,this);
+            this.options = parameters.options;
+            this.child_views = [];
+            this.model.views.push(this);
+        },
+
+        update: function(){
+            // Triggered on model change.
+            //
+            // Update view to be consistent with this.model
+        },
+
+        create_child_view: function(child_model, options) {
+            // Create and return a child view.
+            //
+            // -given a model and (optionally) a view name if the view name is 
+            // not given, it defaults to the model's default view attribute.
+        
+            // TODO: this is hacky, and makes the view depend on this cell attribute and widget manager behavior
+            // it would be great to have the widget manager add the cell metadata
+            // to the subview without having to add it here.
+            var child_view = this.model.widget_manager.create_view(child_model, options || {}, this);
+            this.child_views[child_model.id] = child_view;
+            return child_view;
+        },
+
+        delete_child_view: function(child_model, options) {
+            // Delete a child view that was previously created using create_child_view.
+            var view = this.child_views[child_model.id];
+            if (view !== undefined) {
+                delete this.child_views[child_model.id];
+                view.remove();
+            }
+        },
+
+        do_diff: function(old_list, new_list, removed_callback, added_callback) {
+            // Difference a changed list and call remove and add callbacks for 
+            // each removed and added item in the new list.
+            //
+            // Parameters
+            // ----------
+            // old_list : array
+            // new_list : array
+            // removed_callback : Callback(item)
+            //      Callback that is called for each item removed.
+            // added_callback : Callback(item)
+            //      Callback that is called for each item added.
+
+
+            // removed items
+            _.each(_.difference(old_list, new_list), function(item, index, list) {
+                removed_callback(item);
+            }, this);
+
+            // added items
+            _.each(_.difference(new_list, old_list), function(item, index, list) {
+                added_callback(item);
+            }, this);
+        },
+
+        callbacks: function(){
+            // Create msg callbacks for a comm msg.
+            return this.model.callbacks(this);
+        },
+
+        render: function(){
+            // Render the view.
+            //
+            // By default, this is only called the first time the view is created
+        },
+
+        send: function (content) {
+            // Send a custom msg associated with this view.
+            this.model.send(content, this.callbacks());
+        },
+
+        touch: function () {
+            this.model.save_changes(this.callbacks());
+        },
+    });
+
+
+    var DOMWidgetView = WidgetView.extend({
+        initialize: function (options) {
+            // Public constructor
+
+            // In the future we may want to make changes more granular 
+            // (e.g., trigger on visible:change).
+            this.model.on('change', this.update, this);
+            this.model.on('msg:custom', this.on_msg, this);
+            DOMWidgetView.__super__.initialize.apply(this, arguments);
+        },
+        
+        on_msg: function(msg) {
+            // Handle DOM specific msgs.
+            switch(msg.msg_type) {
+                case 'add_class':
+                    this.add_class(msg.selector, msg.class_list);
+                    break;
+                case 'remove_class':
+                    this.remove_class(msg.selector, msg.class_list);
+                    break;
+            }
+        },
+
+        add_class: function (selector, class_list) {
+            // Add a DOM class to an element.
+            this._get_selector_element(selector).addClass(class_list);
+        },
+        
+        remove_class: function (selector, class_list) {
+            // Remove a DOM class from an element.
+            this._get_selector_element(selector).removeClass(class_list);
+        },
+    
+        update: function () {
+            // Update the contents of this view
+            //
+            // Called when the model is changed.  The model may have been 
+            // changed by another view or by a state update from the back-end.
+            //      The very first update seems to happen before the element is 
+            // finished rendering so we use setTimeout to give the element time 
+            // to render
+            var e = this.$el;
+            var visible = this.model.get('visible');
+            setTimeout(function() {e.toggle(visible);},0);
+     
+            var css = this.model.get('_css');
+            if (css === undefined) {return;}
+            var that = this;
+            _.each(css, function(css_traits, selector){
+                // Apply the css traits to all elements that match the selector.
+                var elements = that._get_selector_element(selector);
+                if (elements.length > 0) {
+                    _.each(css_traits, function(css_value, css_key){
+                        elements.css(css_key, css_value);
+                    });
+                }
+            });
+        },
+
+        _get_selector_element: function (selector) {
+            // Get the elements via the css selector.
+
+            // If the selector is blank, apply the style to the $el_to_style 
+            // element.  If the $el_to_style element is not defined, use apply 
+            // the style to the view's element.
+            var elements;
+            if (!selector) {
+                if (this.$el_to_style === undefined) {
+                    elements = this.$el;
+                } else {
+                    elements = this.$el_to_style;
+                }
+            } else {
+                elements = this.$el.find(selector);
+            }
+            return elements;
+        },
+    });
+
+    IPython.WidgetModel = WidgetModel;
+    IPython.WidgetView = WidgetView;
+    IPython.DOMWidgetView = DOMWidgetView;
+
+    // Pass through WidgetManager namespace.
+    return WidgetManager;
+});

IPython/html/static/notebook/js/widgets/widget_bool.js

@@ -0,0 +1,125 b''
+//----------------------------------------------------------------------------
+//  Copyright (C) 2013 The IPython Development Team
+//
+//  Distributed under the terms of the BSD License.  The full license is in
+//  the file COPYING, distributed as part of this software.
+//----------------------------------------------------------------------------
+
+//============================================================================
+// BoolWidget
+//============================================================================
+
+/**
+ * @module IPython
+ * @namespace IPython
+ **/
+
+define(["notebook/js/widgets/widget"], function(WidgetManager){
+
+    var CheckboxView = IPython.DOMWidgetView.extend({
+        render : function(){
+            // Called when view is rendered.
+            this.$el
+                .addClass('widget-hbox-single');
+            this.$label = $('<div />')
+                .addClass('widget-hlabel')
+                .appendTo(this.$el)
+                .hide();
+            this.$checkbox = $('<input />')
+                .attr('type', 'checkbox')
+                .appendTo(this.$el)
+                .click($.proxy(this.handle_click, this));
+
+            this.$el_to_style = this.$checkbox; // Set default element to style
+            this.update(); // Set defaults.
+        },
+
+        handle_click: function() {
+            // Handles when the checkbox is clicked.
+
+            // Calling model.set will trigger all of the other views of the 
+            // model to update.
+            var value = this.model.get('value');
+            this.model.set('value', ! value, {updated_view: this});
+            this.touch();
+        },
+        
+        update : function(options){
+            // Update the contents of this view
+            //
+            // Called when the model is changed.  The model may have been 
+            // changed by another view or by a state update from the back-end.
+            this.$checkbox.prop('checked', this.model.get('value'));
+
+            if (options === undefined || options.updated_view != this) {
+                var disabled = this.model.get('disabled');
+                this.$checkbox.prop('disabled', disabled);
+
+                var description = this.model.get('description');
+                if (description.length === 0) {
+                    this.$label.hide();
+                } else {
+                    this.$label.text(description);
+                    this.$label.show();
+                }
+            }
+            return CheckboxView.__super__.update.apply(this);
+        },
+        
+    });
+    WidgetManager.register_widget_view('CheckboxView', CheckboxView);
+
+
+    var ToggleButtonView = IPython.DOMWidgetView.extend({
+        render : function() {
+            // Called when view is rendered.
+            var that = this;
+            this.setElement($('<button />')
+                .addClass('btn')
+                .attr('type', 'button')
+                .on('click', function (e) {
+                    e.preventDefault();
+                    that.handle_click();
+                }));
+
+            this.update(); // Set defaults.
+        },
+        
+        update : function(options){
+            // Update the contents of this view
+            //
+            // Called when the model is changed.  The model may have been 
+            // changed by another view or by a state update from the back-end.
+            if (this.model.get('value')) {
+                this.$el.addClass('active');
+            } else {
+                this.$el.removeClass('active');
+            }
+
+            if (options === undefined || options.updated_view != this) {
+
+                var disabled = this.model.get('disabled');
+                this.$el.prop('disabled', disabled);
+
+                var description = this.model.get('description');
+                if (description.length === 0) {
+                    this.$el.text(' '); // Preserve button height
+                } else {
+                    this.$el.text(description);
+                }
+            }
+            return ToggleButtonView.__super__.update.apply(this);
+        },
+        
+        handle_click: function(e) { 
+            // Handles and validates user input.
+
+            // Calling model.set will trigger all of the other views of the 
+            // model to update.
+            var value = this.model.get('value');
+            this.model.set('value', ! value, {updated_view: this});
+            this.touch();
+        },
+    });
+    WidgetManager.register_widget_view('ToggleButtonView', ToggleButtonView);
+});

IPython/html/static/notebook/js/widgets/widget_button.js

@@ -0,0 +1,60 b''
+//----------------------------------------------------------------------------
+//  Copyright (C) 2013 The IPython Development Team
+//
+//  Distributed under the terms of the BSD License.  The full license is in
+//  the file COPYING, distributed as part of this software.
+//----------------------------------------------------------------------------
+
+//============================================================================
+// ButtonWidget
+//============================================================================
+
+/**
+ * @module IPython
+ * @namespace IPython
+ **/
+
+define(["notebook/js/widgets/widget"], function(WidgetManager){
+
+    var ButtonView = IPython.DOMWidgetView.extend({
+        render : function(){
+            // Called when view is rendered.
+            this.setElement($("<button />")
+                .addClass('btn'));
+
+            this.update(); // Set defaults.
+        },
+        
+        update : function(){
+            // Update the contents of this view
+            //
+            // Called when the model is changed.  The model may have been 
+            // changed by another view or by a state update from the back-end.
+            var description = this.model.get('description');
+            if (description.length === 0) {
+                this.$el.text(' '); // Preserve button height
+            } else {
+                this.$el.text(description);
+            }
+            
+            if (this.model.get('disabled')) {
+                this.$el.attr('disabled','disabled');
+            } else {
+                this.$el.removeAttr('disabled');
+            }
+
+            return ButtonView.__super__.update.apply(this);
+        },
+
+        events: {
+            // Dictionary of events and their handlers.
+            'click': '_handle_click',
+        },
+        
+        _handle_click: function(){
+            // Handles when the button is clicked.
+            this.send({event: 'click'});
+        },
+    });
+    WidgetManager.register_widget_view('ButtonView', ButtonView);
+});

IPython/html/static/notebook/js/widgets/widget_container.js

@@ -0,0 +1,272 b''
+//----------------------------------------------------------------------------
+//  Copyright (C) 2013 The IPython Development Team
+//
+//  Distributed under the terms of the BSD License.  The full license is in
+//  the file COPYING, distributed as part of this software.
+//----------------------------------------------------------------------------
+
+//============================================================================
+// ContainerWidget
+//============================================================================
+
+/**
+ * @module IPython
+ * @namespace IPython
+ **/
+
+define(["notebook/js/widgets/widget"], function(WidgetManager) {
+
+    var ContainerView = IPython.DOMWidgetView.extend({
+        render: function(){
+            // Called when view is rendered.
+            this.$el.addClass('widget-container');
+            this.children={};
+            this.update_children([], this.model.get('_children'));
+            this.model.on('change:_children', function(model, value, options) {
+                this.update_children(model.previous('_children'), value);
+            }, this);
+            this.update();
+        },
+        
+        update_children: function(old_list, new_list) {
+            // Called when the children list changes.
+            this.do_diff(old_list,
+                new_list, 
+                $.proxy(this.remove_child_model, this),
+                $.proxy(this.add_child_model, this));
+        },
+
+        remove_child_model: function(model) {
+            // Called when a model is removed from the children list.
+            this.child_views[model.id].remove();
+            this.delete_child_view(model);
+        },
+
+        add_child_model: function(model) {
+            // Called when a model is added to the children list.
+            var view = this.create_child_view(model);
+            this.$el.append(view.$el);
+        },
+        
+        update: function(){
+            // Update the contents of this view
+            //
+            // Called when the model is changed.  The model may have been 
+            // changed by another view or by a state update from the back-end.
+            return ContainerView.__super__.update.apply(this);
+        },
+    });
+    
+    WidgetManager.register_widget_view('ContainerView', ContainerView);
+    
+    var PopupView = IPython.DOMWidgetView.extend({
+        render: function(){
+            // Called when view is rendered.
+            var that = this;
+            this.children={};
+            
+            this.$el.on("remove", function(){
+                    that.$window.remove();
+                });
+            this.$window = $('<div />')
+                .addClass('modal widget-modal')
+                .appendTo($('#notebook-container'))
+                .mousedown(function(){
+                    that.bring_to_front();
+                });
+            this.$title_bar = $('<div />')
+                .addClass('popover-title')
+                .appendTo(this.$window)
+                .mousedown(function(){
+                    that.bring_to_front();
+                });
+            this.$close = $('<button />')
+                .addClass('close icon-remove')
+                .css('margin-left', '5px')
+                .appendTo(this.$title_bar)
+                .click(function(){
+                    that.hide();
+                    event.stopPropagation();
+                });
+            this.$minimize = $('<button />')
+                .addClass('close icon-arrow-down')
+                .appendTo(this.$title_bar)
+                .click(function(){
+                    that.popped_out = !that.popped_out;
+                    if (!that.popped_out) {
+                        that.$minimize
+                            .removeClass('icon-arrow-down')
+                            .addClass('icon-arrow-up');
+                            
+                        that.$window
+                            .draggable('destroy')
+                            .resizable('destroy')
+                            .removeClass('widget-modal modal')
+                            .addClass('docked-widget-modal')
+                            .detach()
+                            .insertBefore(that.$show_button);
+                        that.$show_button.hide();
+                        that.$close.hide();
+                    } else {
+                        that.$minimize
+                            .addClass('icon-arrow-down')
+                            .removeClass('icon-arrow-up');
+
+                        that.$window
+                            .removeClass('docked-widget-modal')
+                            .addClass('widget-modal modal')
+                            .detach()
+                            .appendTo($('#notebook-container'))
+                            .draggable({handle: '.popover-title', snap: '#notebook, .modal', snapMode: 'both'})
+                            .resizable()
+                            .children('.ui-resizable-handle').show();
+                        that.show();
+                        that.$show_button.show();
+                        that.$close.show();
+                    }
+                    event.stopPropagation();
+                });
+            this.$title = $('<div />')
+                .addClass('widget-modal-title')
+                .text(' ')
+                .appendTo(this.$title_bar);
+            this.$body = $('<div />')
+                .addClass('modal-body')
+                .addClass('widget-modal-body')
+                .addClass('widget-container')
+                .appendTo(this.$window);
+            
+            this.$show_button = $('<button />')
+                .text(' ')
+                .addClass('btn btn-info widget-modal-show')
+                .appendTo(this.$el)
+                .click(function(){
+                    that.show();
+                });
+            
+            this.$window.draggable({handle: '.popover-title', snap: '#notebook, .modal', snapMode: 'both'});
+            this.$window.resizable();
+            this.$window.on('resize', function(){
+                that.$body.outerHeight(that.$window.innerHeight() - that.$title_bar.outerHeight());
+            });
+
+            this.$el_to_style = this.$body;
+            this._shown_once = false;
+            this.popped_out = true;
+
+            this.update_children([], this.model.get('_children'));
+            this.model.on('change:_children', function(model, value, options) {
+                this.update_children(model.previous('_children'), value);
+            }, this);
+            this.update();
+        },
+        
+        hide: function() {
+            // Called when the modal hide button is clicked.
+            this.$window.hide();
+            this.$show_button.removeClass('btn-info');
+        },
+        
+        show: function() {
+            // Called when the modal show button is clicked.
+            this.$show_button.addClass('btn-info');
+            this.$window.show();
+            if (this.popped_out) {
+                this.$window.css("positon", "absolute");
+                this.$window.css("top", "0px");
+                this.$window.css("left", Math.max(0, (($('body').outerWidth() - this.$window.outerWidth()) / 2) + 
+                    $(window).scrollLeft()) + "px");
+                this.bring_to_front();
+            }
+        },
+        
+        bring_to_front: function() {
+            // Make the modal top-most, z-ordered about the other modals.
+            var $widget_modals = $(".widget-modal");
+            var max_zindex = 0;
+            $widget_modals.each(function (index, el){
+                max_zindex = Math.max(max_zindex, parseInt($(el).css('z-index')));
+            });
+            
+            // Start z-index of widget modals at 2000
+            max_zindex = Math.max(max_zindex, 2000);
+
+            $widget_modals.each(function (index, el){
+                $el = $(el);
+                if (max_zindex == parseInt($el.css('z-index'))) {
+                    $el.css('z-index', max_zindex - 1);
+                }
+            });
+            this.$window.css('z-index', max_zindex);
+        },
+        
+        update_children: function(old_list, new_list) {
+            // Called when the children list is modified.
+            this.do_diff(old_list, 
+                new_list, 
+                $.proxy(this.remove_child_model, this),
+                $.proxy(this.add_child_model, this));
+        },
+
+        remove_child_model: function(model) {
+            // Called when a child is removed from children list.
+            this.child_views[model.id].remove();
+            this.delete_child_view(model);
+        },
+
+        add_child_model: function(model) {
+            // Called when a child is added to children list.
+            var view = this.create_child_view(model);
+            this.$body.append(view.$el);
+        },
+        
+        update: function(){
+            // Update the contents of this view
+            //
+            // Called when the model is changed.  The model may have been 
+            // changed by another view or by a state update from the back-end.
+            var description = this.model.get('description');
+            if (description.length === 0) {
+                this.$title.text(' '); // Preserve title height
+            } else {
+                this.$title.text(description);
+            }
+            
+            var button_text = this.model.get('button_text');
+            if (button_text.length === 0) {
+                this.$show_button.text(' '); // Preserve button height
+            } else {
+                this.$show_button.text(button_text);
+            }
+            
+            if (!this._shown_once) {
+                this._shown_once = true;
+                this.show();
+            }
+            
+            return PopupView.__super__.update.apply(this);
+        },
+        
+        _get_selector_element: function(selector) {
+            // Get an element view a 'special' jquery selector.  (see widget.js)
+            //
+            // Since the modal actually isn't within the $el in the DOM, we need to extend
+            // the selector logic to allow the user to set css on the modal if need be.
+            // The convention used is:
+            // "modal" - select the modal div
+            // "modal [selector]" - select element(s) within the modal div.
+            // "[selector]" - select elements within $el
+            // "" - select the $el_to_style
+            if (selector.substring(0, 5) == 'modal') {
+                if (selector == 'modal') {
+                    return this.$window;
+                } else {
+                    return this.$window.find(selector.substring(6));
+                }
+            } else {
+                return PopupView.__super__._get_selector_element.apply(this, [selector]);
+            }
+        },
+    });
+    WidgetManager.register_widget_view('PopupView', PopupView);
+});

IPython/html/static/notebook/js/widgets/widget_float.js

@@ -0,0 +1,42 b''
+//----------------------------------------------------------------------------
+//  Copyright (C) 2013 The IPython Development Team
+//
+//  Distributed under the terms of the BSD License.  The full license is in
+//  the file COPYING, distributed as part of this software.
+//----------------------------------------------------------------------------
+
+//============================================================================
+// FloatWidget
+//============================================================================
+
+/**
+ * @module IPython
+ * @namespace IPython
+ **/
+
+define(["notebook/js/widgets/widget", 
+    "notebook/js/widgets/widget_int"], 
+        function(WidgetManager, int_widgets){
+
+    var IntSliderView = int_widgets[0];
+    var IntTextView = int_widgets[1];
+
+
+    var FloatSliderView = IntSliderView.extend({
+        _validate_slide_value: function(x) {
+            // Validate the value of the slider before sending it to the back-end
+            // and applying it to the other views on the page.
+            return x;
+        },
+    });
+    WidgetManager.register_widget_view('FloatSliderView', FloatSliderView);
+
+
+    var FloatTextView = IntTextView.extend({
+        _parse_value: function(value) {
+            // Parse the value stored in a string.
+            return  parseFloat(value);
+        },
+    });
+    WidgetManager.register_widget_view('FloatTextView', FloatTextView);
+});

IPython/html/static/notebook/js/widgets/widget_image.js

@@ -0,0 +1,51 b''
+//----------------------------------------------------------------------------
+//  Copyright (C) 2013 The IPython Development Team
+//
+//  Distributed under the terms of the BSD License.  The full license is in
+//  the file COPYING, distributed as part of this software.
+//----------------------------------------------------------------------------
+
+//============================================================================
+// ImageWidget
+//============================================================================
+
+/**
+ * @module IPython
+ * @namespace IPython
+ **/
+
+define(["notebook/js/widgets/widget"], function(WidgetManager){
+
+    var ImageView = IPython.DOMWidgetView.extend({  
+        render : function(){
+            // Called when view is rendered.
+            this.setElement($("<img />"));
+            this.update(); // Set defaults.
+        },
+        
+        update : function(){
+            // Update the contents of this view
+            //
+            // Called when the model is changed.  The model may have been 
+            // changed by another view or by a state update from the back-end.
+            var image_src = 'data:image/' + this.model.get('format') + ';base64,' + this.model.get('_b64value');
+            this.$el.attr('src', image_src);
+            
+            var width = this.model.get('width');
+            if (width !== undefined && width.length > 0) {
+                this.$el.attr('width', width);
+            } else {
+                this.$el.removeAttr('width');
+            }
+            
+            var height = this.model.get('height');
+            if (height !== undefined && height.length > 0) {
+                this.$el.attr('height', height);
+            } else {
+                this.$el.removeAttr('height');
+            }
+            return ImageView.__super__.update.apply(this);
+        },
+    });
+    WidgetManager.register_widget_view('ImageView', ImageView);
+});

IPython/html/static/notebook/js/widgets/widget_int.js

@@ -0,0 +1,284 b''
+//----------------------------------------------------------------------------
+//  Copyright (C) 2013 The IPython Development Team
+//
+//  Distributed under the terms of the BSD License.  The full license is in
+//  the file COPYING, distributed as part of this software.
+//----------------------------------------------------------------------------
+
+//============================================================================
+// IntWidget
+//============================================================================
+
+/**
+ * @module IPython
+ * @namespace IPython
+ **/
+
+define(["notebook/js/widgets/widget"], function(WidgetManager){
+
+    var IntSliderView = IPython.DOMWidgetView.extend({
+        render : function(){
+            // Called when view is rendered.
+            this.$el
+                .addClass('widget-hbox-single');
+            this.$label = $('<div />')
+                .appendTo(this.$el)
+                .addClass('widget-hlabel')
+                .hide();
+            this.$slider = $('<div />')
+                .slider({})
+                .addClass('slider');
+            
+            // Put the slider in a container 
+            this.$slider_container = $('<div />')
+                .addClass('widget-hslider')
+                .append(this.$slider);
+            this.$el_to_style = this.$slider_container; // Set default element to style
+            this.$el.append(this.$slider_container);
+            
+            // Set defaults.
+            this.update();
+        },
+        
+        update : function(options){
+            // Update the contents of this view
+            //
+            // Called when the model is changed.  The model may have been 
+            // changed by another view or by a state update from the back-end.
+            if (options === undefined || options.updated_view != this) {
+                // JQuery slider option keys.  These keys happen to have a
+                // one-to-one mapping with the corrosponding keys of the model.
+                var jquery_slider_keys = ['step', 'max', 'min', 'disabled'];
+                var that = this;
+                _.each(jquery_slider_keys, function(key, i) {
+                    var model_value = that.model.get(key);
+                    if (model_value !== undefined) {
+                        that.$slider.slider("option", key, model_value);
+                    }
+                });
+
+                // WORKAROUND FOR JQUERY SLIDER BUG.
+                // The horizontal position of the slider handle
+                // depends on the value of the slider at the time
+                // of orientation change.  Before applying the new
+                // workaround, we set the value to the minimum to
+                // make sure that the horizontal placement of the
+                // handle in the vertical slider is always 
+                // consistent.
+                var orientation = this.model.get('orientation');
+                var value = this.model.get('min');
+                this.$slider.slider('option', 'value', value);
+                this.$slider.slider('option', 'orientation', orientation);
+                value = this.model.get('value');
+                this.$slider.slider('option', 'value', value);
+
+                // Use the right CSS classes for vertical & horizontal sliders
+                if (orientation=='vertical') {
+                    this.$slider_container
+                        .removeClass('widget-hslider')
+                        .addClass('widget-vslider');
+                    this.$el
+                        .removeClass('widget-hbox-single')
+                        .addClass('widget-vbox-single');
+                    this.$label
+                        .removeClass('widget-hlabel')
+                        .addClass('widget-vlabel');
+
+                } else {
+                    this.$slider_container
+                        .removeClass('widget-vslider')
+                        .addClass('widget-hslider');
+                    this.$el
+                        .removeClass('widget-vbox-single')
+                        .addClass('widget-hbox-single');
+                    this.$label
+                        .removeClass('widget-vlabel')
+                        .addClass('widget-hlabel');
+                }
+
+                var description = this.model.get('description');
+                if (description.length === 0) {
+                    this.$label.hide();
+                } else {
+                    this.$label.text(description);
+                    this.$label.show();
+                }
+            }
+            return IntSliderView.__super__.update.apply(this);
+        },
+        
+        events: {
+            // Dictionary of events and their handlers.
+            "slide" : "handleSliderChange"
+        }, 
+
+        handleSliderChange: function(e, ui) { 
+            // Called when the slider value is changed.
+
+            // Calling model.set will trigger all of the other views of the 
+            // model to update.
+            this.model.set('value', this._validate_slide_value(ui.value), {updated_view: this});
+            this.touch();
+        },
+
+        _validate_slide_value: function(x) {
+            // Validate the value of the slider before sending it to the back-end
+            // and applying it to the other views on the page.
+
+            // Double bit-wise not truncates the decimel (int cast).
+            return ~~x;
+        },
+    });
+    WidgetManager.register_widget_view('IntSliderView', IntSliderView);
+
+
+    var IntTextView = IPython.DOMWidgetView.extend({    
+        render : function(){
+            // Called when view is rendered.
+            this.$el
+                .addClass('widget-hbox-single');
+            this.$label = $('<div />')
+                .appendTo(this.$el)
+                .addClass('widget-hlabel')
+                .hide();
+            this.$textbox = $('<input type="text" />')
+                .addClass('input')
+                .addClass('widget-numeric-text')
+                .appendTo(this.$el);
+            this.$el_to_style = this.$textbox; // Set default element to style
+            this.update(); // Set defaults.
+        },
+        
+        update : function(options){
+            // Update the contents of this view
+            //
+            // Called when the model is changed.  The model may have been 
+            // changed by another view or by a state update from the back-end.
+            if (options === undefined || options.updated_view != this) {
+                var value = this.model.get('value');
+                if (this._parse_value(this.$textbox.val()) != value) {
+                    this.$textbox.val(value);
+                }
+                
+                if (this.model.get('disabled')) {
+                    this.$textbox.attr('disabled','disabled');
+                } else {
+                    this.$textbox.removeAttr('disabled');
+                }
+
+                var description = this.model.get('description');
+                if (description.length === 0) {
+                    this.$label.hide();
+                } else {
+                    this.$label.text(description);
+                    this.$label.show();
+                }
+            }
+            return IntTextView.__super__.update.apply(this);
+        },
+
+        events: {
+            // Dictionary of events and their handlers.
+            "keyup input"  : "handleChanging",
+            "paste input"  : "handleChanging",
+            "cut input"    : "handleChanging",
+
+            // Fires only when control is validated or looses focus.
+            "change input" : "handleChanged"
+        }, 
+        
+        handleChanging: function(e) { 
+            // Handles and validates user input.
+            
+            // Try to parse value as a int.
+            var numericalValue = 0;
+            if (e.target.value !== '') {
+                numericalValue = this._parse_value(e.target.value);
+            }
+            
+            // If parse failed, reset value to value stored in model.
+            if (isNaN(numericalValue)) {
+                e.target.value = this.model.get('value');
+            } else if (!isNaN(numericalValue)) {
+                if (this.model.get('max') !== undefined) {
+                    numericalValue = Math.min(this.model.get('max'), numericalValue);
+                }
+                if (this.model.get('min') !== undefined) {
+                    numericalValue = Math.max(this.model.get('min'), numericalValue);
+                }
+                
+                // Apply the value if it has changed.
+                if (numericalValue != this.model.get('value')) {
+            
+                    // Calling model.set will trigger all of the other views of the 
+                    // model to update.
+                    this.model.set('value', numericalValue, {updated_view: this});
+                    this.touch();
+                }
+            }
+        },
+        
+        handleChanged: function(e) {
+            // Applies validated input.
+            if (this.model.get('value') != e.target.value) {
+                e.target.value = this.model.get('value');
+            }
+        },
+
+        _parse_value: function(value) {
+            // Parse the value stored in a string.
+            return  parseInt(value);
+        },
+    });
+    WidgetManager.register_widget_view('IntTextView', IntTextView);
+
+
+    var ProgressView = IPython.DOMWidgetView.extend({
+        render : function(){
+            // Called when view is rendered.
+            this.$el
+                .addClass('widget-hbox-single');
+            this.$label = $('<div />')
+                .appendTo(this.$el)
+                .addClass('widget-hlabel')
+                .hide();
+            this.$progress = $('<div />')
+                .addClass('progress')
+                .addClass('widget-progress')
+                .appendTo(this.$el);
+            this.$el_to_style = this.$progress; // Set default element to style
+            this.$bar = $('<div />')
+                .addClass('bar')
+                .css('width', '50%')
+                .appendTo(this.$progress);
+            this.update(); // Set defaults.
+        },
+        
+        update : function(){
+            // Update the contents of this view
+            //
+            // Called when the model is changed.  The model may have been 
+            // changed by another view or by a state update from the back-end.
+            var value = this.model.get('value');
+            var max = this.model.get('max');
+            var min = this.model.get('min');
+            var percent = 100.0 * (value - min) / (max - min);
+            this.$bar.css('width', percent + '%');
+            
+            var description = this.model.get('description');
+            if (description.length === 0) {
+                this.$label.hide();
+            } else {
+                this.$label.text(description);
+                this.$label.show();
+            }
+            return ProgressView.__super__.update.apply(this);
+        }, 
+    });
+    WidgetManager.register_widget_view('ProgressView', ProgressView);
+
+
+    // Return the slider and text views so they can be inheritted to create the
+    // float versions.
+    return [IntSliderView, IntTextView];
+});

IPython/html/static/notebook/js/widgets/widget_selection.js

@@ -0,0 +1,376 b''
+//----------------------------------------------------------------------------
+//  Copyright (C) 2013 The IPython Development Team
+//
+//  Distributed under the terms of the BSD License.  The full license is in
+//  the file COPYING, distributed as part of this software.
+//----------------------------------------------------------------------------
+
+//============================================================================
+// SelectionWidget
+//============================================================================
+
+/**
+ * @module IPython
+ * @namespace IPython
+ **/
+
+define(["notebook/js/widgets/widget"], function(WidgetManager){
+
+    var DropdownView = IPython.DOMWidgetView.extend({
+        render : function(){
+            // Called when view is rendered.
+            this.$el
+                .addClass('widget-hbox-single');
+            this.$label = $('<div />')
+                .appendTo(this.$el)
+                .addClass('widget-hlabel')
+                .hide();
+            this.$buttongroup = $('<div />')
+                .addClass('widget_item')
+                .addClass('btn-group')
+                .appendTo(this.$el);
+            this.$el_to_style = this.$buttongroup; // Set default element to style
+            this.$droplabel = $('<button />')
+                .addClass('btn')
+                .addClass('widget-combo-btn')
+                .text(' ')
+                .appendTo(this.$buttongroup);
+            this.$dropbutton = $('<button />')
+                .addClass('btn')
+                .addClass('dropdown-toggle')
+                .addClass('widget-combo-carrot-btn')
+                .attr('data-toggle', 'dropdown')
+                .append($('<span />').addClass("caret"))
+                .appendTo(this.$buttongroup);
+            this.$droplist = $('<ul />')
+                .addClass('dropdown-menu')
+                .appendTo(this.$buttongroup);
+            
+            // Set defaults.
+            this.update();
+        },
+        
+        update : function(options){
+            // Update the contents of this view
+            //
+            // Called when the model is changed.  The model may have been 
+            // changed by another view or by a state update from the back-end.
+
+            if (options === undefined || options.updated_view != this) {
+                var selected_item_text = this.model.get('_value');
+                if (selected_item_text.length === 0) {
+                    this.$droplabel.text(' ');
+                } else {
+                    this.$droplabel.text(selected_item_text);
+                }
+                
+                var items = this.model.get('labels');
+                var $replace_droplist = $('<ul />')
+                    .addClass('dropdown-menu');
+                var that = this;
+                _.each(items, function(item, i) {
+                    var item_button = $('<a href="#"/>')
+                        .text(item)
+                        .on('click', $.proxy(that.handle_click, that));
+                    $replace_droplist.append($('<li />').append(item_button));
+                });
+
+                this.$droplist.replaceWith($replace_droplist);
+                this.$droplist.remove();
+                this.$droplist = $replace_droplist;
+                
+                if (this.model.get('disabled')) {
+                    this.$buttongroup.attr('disabled','disabled');
+                    this.$droplabel.attr('disabled','disabled');
+                    this.$dropbutton.attr('disabled','disabled');
+                    this.$droplist.attr('disabled','disabled');
+                } else {
+                    this.$buttongroup.removeAttr('disabled');
+                    this.$droplabel.removeAttr('disabled');
+                    this.$dropbutton.removeAttr('disabled');
+                    this.$droplist.removeAttr('disabled');
+                }
+
+                var description = this.model.get('description');
+                if (description.length === 0) {
+                    this.$label.hide();
+                } else {
+                    this.$label.text(description);
+                    this.$label.show();
+                }
+            }
+            return DropdownView.__super__.update.apply(this);
+        },
+
+        handle_click: function (e) {
+            // Handle when a value is clicked.
+            
+            // Calling model.set will trigger all of the other views of the 
+            // model to update.
+            this.model.set('_value', $(e.target).text(), {updated_view: this});
+            this.touch();
+        },
+        
+    });
+    WidgetManager.register_widget_view('DropdownView', DropdownView);
+
+
+    var RadioButtonsView = IPython.DOMWidgetView.extend({    
+        render : function(){
+            // Called when view is rendered.
+            this.$el
+                .addClass('widget-hbox');
+            this.$label = $('<div />')
+                .appendTo(this.$el)
+                .addClass('widget-hlabel')
+                .hide();
+            this.$container = $('<div />')
+                .appendTo(this.$el)
+                .addClass('widget-container')
+                .addClass('vbox');
+            this.$el_to_style = this.$container; // Set default element to style
+            this.update();
+        },
+        
+        update : function(options){
+            // Update the contents of this view
+            //
+            // Called when the model is changed.  The model may have been 
+            // changed by another view or by a state update from the back-end.
+            if (options === undefined || options.updated_view != this) {
+                // Add missing items to the DOM.
+                var items = this.model.get('labels');
+                var disabled = this.model.get('disabled');
+                var that = this;
+                _.each(items, function(item, index) {
+                    var item_query = ' :input[value="' + item + '"]';
+                    if (that.$el.find(item_query).length === 0) {
+                        var $label = $('<label />')
+                            .addClass('radio')
+                            .text(item)
+                            .appendTo(that.$container);
+                        
+                        $('<input />')
+                            .attr('type', 'radio')
+                            .addClass(that.model)
+                            .val(item)
+                            .prependTo($label)
+                            .on('click', $.proxy(that.handle_click, that));
+                    }
+                    
+                    var $item_element = that.$container.find(item_query);
+                    if (that.model.get('_value') == item) {
+                        $item_element.prop('checked', true);
+                    } else {
+                        $item_element.prop('checked', false);
+                    }
+                    $item_element.prop('disabled', disabled);
+                });
+                
+                // Remove items that no longer exist.
+                this.$container.find('input').each(function(i, obj) {
+                    var value = $(obj).val();
+                    var found = false;
+                    _.each(items, function(item, index) {
+                        if (item == value) {
+                            found = true;
+                            return false;
+                        }
+                    });
+                    
+                    if (!found) {
+                        $(obj).parent().remove();
+                    }
+                });
+
+                var description = this.model.get('description');
+                if (description.length === 0) {
+                    this.$label.hide();
+                } else {
+                    this.$label.text(description);
+                    this.$label.show();
+                }
+            }
+            return RadioButtonsView.__super__.update.apply(this);
+        },
+
+        handle_click: function (e) {
+            // Handle when a value is clicked.
+            
+            // Calling model.set will trigger all of the other views of the 
+            // model to update.
+            this.model.set('_value', $(e.target).val(), {updated_view: this});
+            this.touch();
+        },
+    });
+    WidgetManager.register_widget_view('RadioButtonsView', RadioButtonsView);
+
+
+    var ToggleButtonsView = IPython.DOMWidgetView.extend({    
+        render : function(){
+            // Called when view is rendered.
+            this.$el
+                .addClass('widget-hbox-single');
+            this.$label = $('<div />')
+                .appendTo(this.$el)
+                .addClass('widget-hlabel')
+                .hide();
+            this.$buttongroup = $('<div />')
+                .addClass('btn-group')
+                .attr('data-toggle', 'buttons-radio')
+                .appendTo(this.$el);
+            this.$el_to_style = this.$buttongroup; // Set default element to style
+            this.update();
+        },
+        
+        update : function(options){
+            // Update the contents of this view
+            //
+            // Called when the model is changed.  The model may have been 
+            // changed by another view or by a state update from the back-end.
+            if (options === undefined || options.updated_view != this) {
+                // Add missing items to the DOM.
+                var items = this.model.get('labels');
+                var disabled = this.model.get('disabled');
+                var that = this;
+                _.each(items, function(item, index) {
+                   var item_query = ' :contains("' + item + '")';
+                    if (that.$buttongroup.find(item_query).length === 0) {
+                        $('<button />')
+                            .attr('type', 'button')
+                            .addClass('btn')
+                            .text(item)
+                            .appendTo(that.$buttongroup)
+                            .on('click', $.proxy(that.handle_click, that));
+                    }
+                    
+                    var $item_element = that.$buttongroup.find(item_query);
+                    if (that.model.get('_value') == item) {
+                        $item_element.addClass('active');
+                    } else {
+                        $item_element.removeClass('active');
+                    }
+                    $item_element.prop('disabled', disabled); 
+                });
+                
+                // Remove items that no longer exist.
+                this.$buttongroup.find('button').each(function(i, obj) {
+                    var value = $(obj).text();
+                    var found = false;
+                    _.each(items, function(item, index) {
+                        if (item == value) {
+                            found = true;
+                            return false;
+                        }
+                    });
+
+                    if (!found) {
+                        $(obj).remove();
+                    }
+                });
+
+                var description = this.model.get('description');
+                if (description.length === 0) {
+                    this.$label.hide();
+                } else {
+                    this.$label.text(description);
+                    this.$label.show();
+                }
+            }
+            return ToggleButtonsView.__super__.update.apply(this);
+        },
+
+        handle_click: function (e) {
+            // Handle when a value is clicked.
+            
+            // Calling model.set will trigger all of the other views of the 
+            // model to update.
+            this.model.set('_value', $(e.target).text(), {updated_view: this});
+            this.touch();
+        },    
+    });
+    WidgetManager.register_widget_view('ToggleButtonsView', ToggleButtonsView);
+
+
+    var SelectView = IPython.DOMWidgetView.extend({    
+        render : function(){
+            // Called when view is rendered.
+            this.$el
+                .addClass('widget-hbox');
+            this.$label = $('<div />')
+                .appendTo(this.$el)
+                .addClass('widget-hlabel')
+                .hide();
+            this.$listbox = $('<select />')
+                .addClass('widget-listbox')
+                .attr('size', 6)
+                .appendTo(this.$el);
+            this.$el_to_style = this.$listbox; // Set default element to style
+            this.update();
+        },
+        
+        update : function(options){
+            // Update the contents of this view
+            //
+            // Called when the model is changed.  The model may have been 
+            // changed by another view or by a state update from the back-end.
+            if (options === undefined || options.updated_view != this) {
+                // Add missing items to the DOM.
+                var items = this.model.get('labels');
+                var that = this;
+                _.each(items, function(item, index) {
+                   var item_query = ' :contains("' + item + '")';
+                    if (that.$listbox.find(item_query).length === 0) {
+                        $('<option />')
+                            .text(item)
+                            .attr('_value', item)
+                            .appendTo(that.$listbox)
+                            .on('click', $.proxy(that.handle_click, that));
+                    } 
+                });
+
+                // Select the correct element
+                this.$listbox.val(this.model.get('_value'));
+                
+                // Disable listbox if needed
+                var disabled = this.model.get('disabled');
+                this.$listbox.prop('disabled', disabled);
+
+                // Remove items that no longer exist.
+                this.$listbox.find('option').each(function(i, obj) {
+                    var value = $(obj).text();
+                    var found = false;
+                    _.each(items, function(item, index) {
+                        if (item == value) {
+                            found = true;
+                            return false;
+                        }
+                    });
+                    
+                    if (!found) {
+                        $(obj).remove();
+                    }
+                });
+
+                var description = this.model.get('description');
+                if (description.length === 0) {
+                    this.$label.hide();
+                } else {
+                    this.$label.text(description);
+                    this.$label.show();
+                }
+            }
+            return SelectView.__super__.update.apply(this);
+        },
+
+        handle_click: function (e) {
+            // Handle when a value is clicked.
+            
+            // Calling model.set will trigger all of the other views of the 
+            // model to update.
+            this.model.set('_value', $(e.target).text(), {updated_view: this});
+            this.touch();
+        },    
+    });
+    WidgetManager.register_widget_view('SelectView', SelectView);
+});

IPython/html/static/notebook/js/widgets/widget_selectioncontainer.js

@@ -0,0 +1,244 b''
+//----------------------------------------------------------------------------
+//  Copyright (C) 2013 The IPython Development Team
+//
+//  Distributed under the terms of the BSD License.  The full license is in
+//  the file COPYING, distributed as part of this software.
+//----------------------------------------------------------------------------
+
+//============================================================================
+// SelectionContainerWidget
+//============================================================================
+
+/**
+ * @module IPython
+ * @namespace IPython
+ **/
+
+define(["notebook/js/widgets/widget"], function(WidgetManager){
+
+    var AccordionView = IPython.DOMWidgetView.extend({
+        render: function(){
+            // Called when view is rendered.
+            var guid = 'accordion' + IPython.utils.uuid();
+            this.$el
+                .attr('id', guid)
+                .addClass('accordion');
+            this.containers = [];
+            this.model_containers = {};
+            this.update_children([], this.model.get('_children'));
+            this.model.on('change:_children', function(model, value, options) {
+                this.update_children(model.previous('_children'), value);
+            }, this);
+        },
+        
+        update: function(options) {
+            // Update the contents of this view
+            //
+            // Called when the model is changed.  The model may have been 
+            // changed by another view or by a state update from the back-end.
+            if (options === undefined || options.updated_view != this) {
+                // Set tab titles
+                var titles = this.model.get('_titles');
+                var that = this;
+                _.each(titles, function(title, page_index) {
+                    var accordian = that.containers[page_index];
+                    if (accordian !== undefined) {
+                        accordian
+                            .find('.accordion-heading')
+                            .find('.accordion-toggle')
+                            .text(title);
+                    }
+                });
+
+                // Set selected page
+                var selected_index = this.model.get("selected_index");
+                if (0 <= selected_index && selected_index < this.containers.length) {
+                    _.each(this.containers, function(container, index) {
+                        if (index==selected_index) {
+                            container.find('.accordion-body').collapse('show');    
+                        } else {
+                            container.find('.accordion-body').collapse('hide');    
+                        }
+                    });
+                }
+            }
+            return AccordionView.__super__.update.apply(this);
+        },
+        
+        update_children: function(old_list, new_list) {
+            // Called when the children list is modified.
+            this.do_diff(old_list, 
+                new_list, 
+                $.proxy(this.remove_child_model, this),
+                $.proxy(this.add_child_model, this));
+        },
+
+        remove_child_model: function(model) {
+            // Called when a child is removed from children list.
+            var accordion_group = this.model_containers[model.id];
+            this.containers.splice(accordion_group.container_index, 1);
+            delete this.model_containers[model.id];
+            accordion_group.remove();
+            this.delete_child_view(model);
+        },
+
+        add_child_model: function(model) {
+            // Called when a child is added to children list.
+            var view = this.create_child_view(model);
+            var index = this.containers.length;
+            var uuid = IPython.utils.uuid();
+            var accordion_group = $('<div />')
+                .addClass('accordion-group')
+                .appendTo(this.$el);
+            var accordion_heading = $('<div />')
+                .addClass('accordion-heading')
+                .appendTo(accordion_group);
+            var that = this;
+            var accordion_toggle = $('<a />')
+                .addClass('accordion-toggle')
+                .attr('data-toggle', 'collapse')
+                .attr('data-parent', '#' + this.$el.attr('id'))
+                .attr('href', '#' + uuid)
+                .click(function(evt){ 
+            
+                    // Calling model.set will trigger all of the other views of the 
+                    // model to update.
+                    that.model.set("selected_index", index, {updated_view: this});
+                    that.touch();
+                 })
+                .text('Page ' + index)
+                .appendTo(accordion_heading);
+            var accordion_body = $('<div />', {id: uuid})
+                .addClass('accordion-body collapse')
+                .appendTo(accordion_group);
+            var accordion_inner = $('<div />')
+                .addClass('accordion-inner')
+                .appendTo(accordion_body);
+            var container_index = this.containers.push(accordion_group) - 1;
+            accordion_group.container_index = container_index;
+            this.model_containers[model.id] = accordion_group;
+            accordion_inner.append(view.$el);
+
+            this.update();
+
+            // Stupid workaround to close the bootstrap accordion tabs which
+            // open by default even though they don't have the `in` class
+            // attached to them.  For some reason a delay is required.  
+            // TODO: Better fix.
+            setTimeout(function(){ that.update(); }, 500);
+        },
+    });
+    WidgetManager.register_widget_view('AccordionView', AccordionView);
+    
+
+    var TabView = IPython.DOMWidgetView.extend({    
+        initialize: function() {
+            // Public constructor.
+            this.containers = [];
+            TabView.__super__.initialize.apply(this, arguments);
+        },
+
+        render: function(){
+            // Called when view is rendered.
+            var uuid = 'tabs'+IPython.utils.uuid();
+            var that = this;
+            this.$tabs = $('<div />', {id: uuid})
+                .addClass('nav')
+                .addClass('nav-tabs')
+                .appendTo(this.$el);
+            this.$tab_contents = $('<div />', {id: uuid + 'Content'})
+                .addClass('tab-content')
+                .appendTo(this.$el);
+            this.containers = [];
+            this.update_children([], this.model.get('_children'));
+            this.model.on('change:_children', function(model, value, options) {
+                this.update_children(model.previous('_children'), value);
+            }, this);
+        },
+
+        update_children: function(old_list, new_list) {
+            // Called when the children list is modified.
+            this.do_diff(old_list, 
+                new_list, 
+                $.proxy(this.remove_child_model, this),
+                $.proxy(this.add_child_model, this));
+        },
+
+        remove_child_model: function(model) {
+            // Called when a child is removed from children list.
+            var view = this.child_views[model.id];
+            this.containers.splice(view.parent_tab.tab_text_index, 1);
+            view.parent_tab.remove();
+            view.parent_container.remove();
+            view.remove();
+            this.delete_child_view(model);
+        },
+
+        add_child_model: function(model) {
+            // Called when a child is added to children list.
+            var view = this.create_child_view(model);
+            var index = this.containers.length;
+            var uuid = IPython.utils.uuid();
+
+            var that = this;
+            var tab = $('<li />')
+                .css('list-style-type', 'none')
+                .appendTo(this.$tabs);
+            view.parent_tab = tab;
+
+            var tab_text = $('<a />')
+                .attr('href', '#' + uuid)
+                .attr('data-toggle', 'tab') 
+                .text('Page ' + index)
+                .appendTo(tab)
+                .click(function (e) {
+            
+                    // Calling model.set will trigger all of the other views of the 
+                    // model to update.
+                    that.model.set("selected_index", index, {updated_view: this});
+                    that.touch();
+                    that.select_page(index);
+                });
+            tab.tab_text_index = this.containers.push(tab_text) - 1;
+
+            var contents_div = $('<div />', {id: uuid})
+                .addClass('tab-pane')
+                .addClass('fade')
+                .append(view.$el)
+                .appendTo(this.$tab_contents);
+            view.parent_container = contents_div;
+        },
+
+        update: function(options) {
+            // Update the contents of this view
+            //
+            // Called when the model is changed.  The model may have been 
+            // changed by another view or by a state update from the back-end.
+            if (options === undefined || options.updated_view != this) {
+                // Set tab titles
+                var titles = this.model.get('_titles');
+                var that = this;
+                _.each(titles, function(title, page_index) {
+                   var tab_text = that.containers[page_index];
+                    if (tab_text !== undefined) {
+                        tab_text.text(title);
+                    } 
+                });
+
+                var selected_index = this.model.get('selected_index');
+                if (0 <= selected_index && selected_index < this.containers.length) {
+                    this.select_page(selected_index);
+                }
+            }
+            return TabView.__super__.update.apply(this);
+        },
+
+        select_page: function(index) {
+            // Select a page.
+            this.$tabs.find('li')
+                .removeClass('active');
+            this.containers[index].tab('show');
+        },
+    });
+    WidgetManager.register_widget_view('TabView', TabView);
+});

IPython/html/static/notebook/js/widgets/widget_string.js

@@ -0,0 +1,222 b''
+//----------------------------------------------------------------------------
+//  Copyright (C) 2013 The IPython Development Team
+//
+//  Distributed under the terms of the BSD License.  The full license is in
+//  the file COPYING, distributed as part of this software.
+//----------------------------------------------------------------------------
+
+//============================================================================
+// StringWidget
+//============================================================================
+
+/**
+ * @module IPython
+ * @namespace IPython
+ **/
+
+define(["notebook/js/widgets/widget"], function(WidgetManager){
+
+    var HTMLView = IPython.DOMWidgetView.extend({  
+        render : function(){
+            // Called when view is rendered.
+            this.update(); // Set defaults.
+        },
+        
+        update : function(){
+            // Update the contents of this view
+            //
+            // Called when the model is changed.  The model may have been 
+            // changed by another view or by a state update from the back-end.
+            this.$el.html(this.model.get('value')); // CAUTION! .html(...) CALL MANDITORY!!!
+            return HTMLView.__super__.update.apply(this);
+        },
+    });
+    WidgetManager.register_widget_view('HTMLView', HTMLView);
+
+
+    var LatexView = IPython.DOMWidgetView.extend({  
+        render : function(){
+            // Called when view is rendered.
+            this.update(); // Set defaults.
+        },
+        
+        update : function(){
+            // Update the contents of this view
+            //
+            // Called when the model is changed.  The model may have been 
+            // changed by another view or by a state update from the back-end.
+            this.$el.text(this.model.get('value'));
+            MathJax.Hub.Queue(["Typeset",MathJax.Hub,this.$el.get(0)]);
+
+            return LatexView.__super__.update.apply(this);
+        }, 
+    });
+    WidgetManager.register_widget_view('LatexView', LatexView);
+
+
+    var TextareaView = IPython.DOMWidgetView.extend({  
+        render: function(){
+            // Called when view is rendered.
+            this.$el
+                .addClass('widget-hbox');
+            this.$label = $('<div />')
+                .appendTo(this.$el)
+                .addClass('widget-hlabel')
+                .hide();
+            this.$textbox = $('<textarea />')
+                .attr('rows', 5)
+                .addClass('widget-text')
+                .appendTo(this.$el);
+            this.$el_to_style = this.$textbox; // Set default element to style
+            this.update(); // Set defaults.
+
+            this.model.on('msg:custom', $.proxy(this._handle_textarea_msg, this));
+        },
+
+        _handle_textarea_msg: function (content){
+            // Handle when a custom msg is recieved from the back-end.
+            if (content.method == "scroll_to_bottom") {
+                this.scroll_to_bottom();                
+            }
+        },
+
+        scroll_to_bottom: function (){
+            // Scroll the text-area view to the bottom.
+            this.$textbox.scrollTop(this.$textbox[0].scrollHeight);
+        },
+
+        update: function(options){
+            // Update the contents of this view
+            //
+            // Called when the model is changed.  The model may have been 
+            // changed by another view or by a state update from the back-end.
+            if (options === undefined || options.updated_view != this) {
+                this.$textbox.val(this.model.get('value'));
+
+                var disabled = this.model.get('disabled');
+                this.$textbox.prop('disabled', disabled);
+
+                var description = this.model.get('description');
+                if (description.length === 0) {
+                    this.$label.hide();
+                } else {
+                    this.$label.text(description);
+                    this.$label.show();
+                }
+            }
+            return TextareaView.__super__.update.apply(this);
+        },
+        
+        events: {
+            // Dictionary of events and their handlers.
+            "keyup textarea" : "handleChanging",
+            "paste textarea" : "handleChanging",
+            "cut textarea"   : "handleChanging"
+        },
+        
+        handleChanging: function(e) { 
+            // Handles and validates user input.
+            
+            // Calling model.set will trigger all of the other views of the 
+            // model to update.
+            this.model.set('value', e.target.value, {updated_view: this});
+            this.touch();
+        },
+    });
+    WidgetManager.register_widget_view('TextareaView', TextareaView);
+
+
+    var TextView = IPython.DOMWidgetView.extend({  
+        render: function(){
+            // Called when view is rendered.
+            this.$el
+                .addClass('widget-hbox-single');
+            this.$label = $('<div />')
+                .addClass('widget-hlabel')
+                .appendTo(this.$el)
+                .hide();
+            this.$textbox = $('<input type="text" />')
+                .addClass('input')
+                .addClass('widget-text')
+                .appendTo(this.$el);
+            this.$el_to_style = this.$textbox; // Set default element to style
+            this.update(); // Set defaults.
+        },
+        
+        update: function(options){
+            // Update the contents of this view
+            //
+            // Called when the model is changed.  The model may have been 
+            // changed by another view or by a state update from the back-end.
+            if (options === undefined || options.updated_view != this) {
+                if (this.$textbox.val() != this.model.get('value')) {
+                    this.$textbox.val(this.model.get('value'));
+                }
+
+                var disabled = this.model.get('disabled');
+                this.$textbox.prop('disabled', disabled);
+
+                var description = this.model.get('description');
+                if (description.length === 0) {
+                    this.$label.hide();
+                } else {
+                    this.$label.text(description);
+                    this.$label.show();
+                }
+            }
+            return TextView.__super__.update.apply(this);
+        },
+        
+        events: {
+            // Dictionary of events and their handlers.
+            "keyup input"    : "handleChanging",
+            "paste input"    : "handleChanging",
+            "cut input"      : "handleChanging",
+            "keypress input" : "handleKeypress",
+            "blur input" : "handleBlur",
+            "focusout input" : "handleFocusOut"
+        },
+        
+        handleChanging: function(e) { 
+            // Handles user input.
+
+            // Calling model.set will trigger all of the other views of the 
+            // model to update.
+            this.model.set('value', e.target.value, {updated_view: this});
+            this.touch();
+        },
+        
+        handleKeypress: function(e) { 
+            // Handles text submition
+            if (e.keyCode == 13) { // Return key
+                this.send({event: 'submit'});
+                event.stopPropagation();
+                event.preventDefault();
+                return false;
+            }
+        },
+
+        handleBlur: function(e) { 
+            // Prevent a blur from firing if the blur was not user intended.
+            // This is a workaround for the return-key focus loss bug.
+            // TODO: Is the original bug actually a fault of the keyboard
+            // manager?
+            if (e.relatedTarget === null) {
+                event.stopPropagation();
+                event.preventDefault();
+                return false;
+            }
+        },
+
+        handleFocusOut: function(e) { 
+            // Prevent a blur from firing if the blur was not user intended.
+            // This is a workaround for the return-key focus loss bug.
+            if (e.relatedTarget === null) {
+                event.stopPropagation();
+                event.preventDefault();
+                return false;
+            }
+        },
+    });
+    WidgetManager.register_widget_view('TextView', TextView);
+});

IPython/html/static/notebook/less/widgets.less

@@ -0,0 +1,251 b''
+.widget-area {
+    /*
+    LESS file that styles IPython notebook widgets and the area they sit in.
+
+    The widget area typically looks something like this:
+     +------------------------------------------+
+     | widget-area                              |
+     |  +--------+---------------------------+  |
+     |  | prompt | widget-subarea            |  |
+     |  |        | +--------+  +--------+    |  |
+     |  |        | | widget |  | widget |    |  |
+     |  |        | +--------+  +--------+    |  |
+     |  +--------+---------------------------+  |
+     +------------------------------------------+
+    */
+
+    page-break-inside : avoid;
+    .hbox();
+
+    .widget-subarea {
+        padding     : 0.44em 0.4em 0.4em 1px;
+        margin-left : 6px;
+
+        .border-box-sizing();
+        .vbox();
+        .box-flex2();
+    }
+}
+
+/* THE CLASSES BELOW CAN APPEAR ANYWHERE IN THE DOM (POSSIBLEY OUTSIDE OF
+   THE WIDGET AREA). */
+
+.widget-hlabel {
+    /* Horizontal Label */
+    min-width      : 10ex;
+    padding-right  : 8px;
+    padding-top    : 3px;
+    text-align     : right;
+    vertical-align : text-top;
+}
+
+.widget-vlabel {
+    /* Vertical Label */
+    padding-bottom : 5px;
+    text-align     : center;
+    vertical-align : text-bottom;
+}
+
+.slide-track {
+    /* Slider Track */
+    border     : 1px solid #CCCCCC;
+    background : #FFFFFF;
+
+    .corner-all(); /* Round the corners of the slide track */
+}
+
+.widget-hslider {
+    /* Horizontal jQuery Slider 
+
+    Both the horizontal and vertical versions of the slider are characterized
+    by a styled div that contains an invisible jQuery slide div which 
+    contains a visible slider handle div.  This is requred so we can control
+    how the slider is drawn and 'fix' the issue where the slide handle 
+    doesn't stop at the end of the slide.
+
+    Both horizontal and vertical sliders have this div nesting:
+    +------------------------------------------+
+    | widget-(h/v)slider                       |
+    |  +--------+---------------------------+  |
+    |  | ui-slider                          |  |
+    |  |          +------------------+      |  |
+    |  |          | ui-slider-handle |      |  |
+    |  |          +------------------+      |  |
+    |  +--------+---------------------------+  |
+    +------------------------------------------+
+    */
+
+    /* Fix the padding of the slide track so the ui-slider is sized 
+    correctly. */
+    padding-left  : 8px;
+    padding-right : 5px;
+    overflow      : visible;
+
+    /* Default size of the slider */
+    width      : 348px; 
+    height     : 5px;
+    max-height : 5px;
+    margin-top : 11px;
+    
+    /* Style the slider track */
+    .slide-track();
+
+    /* Make the div a flex box (makes FF behave correctly). */
+    .hbox();
+
+    .ui-slider {
+        /* Inner, invisible slide div */
+        border     : 0px !important;
+        background : none !important;
+        
+        .hbox();
+        .box-flex1();
+
+        .ui-slider-handle {
+            width      : 14px !important;
+            height     : 28px !important;
+            margin-top : -8px !important;
+        }
+    }
+}
+
+.widget-vslider {
+    /* Vertical jQuery Slider */
+    
+    /* Fix the padding of the slide track so the ui-slider is sized 
+    correctly. */
+    padding-bottom : 8px;
+    overflow       : visible; 
+
+    /* Default size of the slider */
+    width       : 5px;
+    max-width   : 5px;
+    height      : 250px;
+    margin-left : 12px;
+    
+    /* Style the slider track */
+    .slide-track();
+
+    /* Make the div a flex box (makes FF behave correctly). */
+    .vbox();
+    
+    .ui-slider {
+        /* Inner, invisible slide div */
+        border      : 0px !important;
+        background  : none !important;
+        margin-left : -4px;
+        margin-top  : 5px;
+        
+        .vbox();
+        .box-flex1();
+
+        .ui-slider-handle {
+            width       : 28px !important;
+            height      : 14px !important;
+            margin-left : -9px;
+        }
+    }
+}
+
+.widget-text {
+    /* String Textbox - used for TextBoxView and TextAreaView */
+    width         : 350px;
+    margin-bottom : 0px;
+}
+
+.widget-listbox {
+    /* Listbox */
+    width         : 364px;
+    margin-bottom : 0px;
+}
+
+.widget-numeric-text {
+    /* Single Line Textbox - used for IntTextView and FloatTextView */
+    width : 150px;
+}
+
+.widget-progress {
+    /* Progress Bar */
+    width : 363px;
+
+    .bar {
+        /* Disable progress bar animation */
+        -webkit-transition : none;
+        -moz-transition    : none;
+        -ms-transition     : none;
+        -o-transition      : none;
+        transition         : none;
+    }
+}
+
+.widget-combo-btn {
+    /* ComboBox Main Button */
+    min-width : 138px; /* + 26px drop arrow btn = 164px */
+}
+
+.widget-box {
+    /* The following section sets the style for the invisible div that
+    hold widgets and their accompanying labels.
+
+    Looks like this:
+    +-----------------------------+
+    | widget-box (or similar)     |
+    |  +-------+---------------+  |
+    |  | Label | Actual Widget |  |
+    |  +-------+---------------+  |
+    +-----------------------------+
+    */
+    margin : 5px;
+
+    .start();
+    .widget-container();
+}
+
+.widget-hbox {
+    /* Horizontal widgets */
+    .widget-box();
+    .hbox();
+}
+
+.widget-hbox-single {
+    /* Single line horizontal widgets */
+    height : 30px;
+
+    .widget-hbox();
+}
+
+.widget-vbox-single {
+    /* For vertical slides */ 
+    width : 30px;
+
+    .widget-box();
+    .vbox();
+}
+
+.widget-modal {
+    /* ContainerWidget - ModalView */   
+    overflow    : hidden; 
+    position    : absolute !important;
+    top         : 0px; 
+    left        : 0px; 
+    margin-left : 0px !important;
+}
+
+.widget-modal-body {
+    /* ContainerWidget - ModalView Body */
+    max-height: none !important;
+}
+
+.widget-container {
+    /* ContainerWidget */
+    .border-box-sizing();
+}
+
+.docked-widget-modal {
+    /* Horizontal Label */
+    overflow: hidden; 
+    position: relative !important;
+    top: 0px !important; 
+    left: 0px !important; 
+    margin-left: 0px !important;
+}
  No newline at end of file

IPython/html/tests/casperjs/test_cases/widgets.js

@@ -0,0 +1,69 b''
+// Test the widget framework.
+casper.notebook_test(function () {
+    var index;
+    
+    this.then(function () {
+    
+        // Check if the WidgetManager class is defined.
+        this.test.assert(this.evaluate(function() {
+            return IPython.WidgetManager !== undefined; 
+        }), 'WidgetManager class is defined');
+    });
+
+    index = this.append_cell(
+        'from IPython.html import widgets\n' + 
+        'from IPython.display import display, clear_output\n' +
+        'print("Success")');
+    this.execute_cell_then(index);
+
+    this.wait(500); // Wait for require.js async callbacks to load dependencies.
+
+    this.then(function () {
+        // Check if the widget manager has been instantiated.
+        this.test.assert(this.evaluate(function() {
+            return IPython.notebook.kernel.widget_manager !== undefined; 
+        }), 'Notebook widget manager instantiated');
+    });
+
+    throttle_index = this.append_cell(
+        'import time\n' +
+        'textbox = widgets.TextWidget()\n' +
+        'display(textbox)\n'+
+        'textbox.add_class("my-throttle-textbox")\n' +
+        'def handle_change(name, old, new):\n' +
+        '    print(len(new))\n' +
+        '    time.sleep(0.5)\n' +
+        'textbox.on_trait_change(handle_change, "value")\n' +
+        'print("Success")');
+    this.execute_cell_then(throttle_index, function(index){
+        this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
+            'Test throttling cell executed with correct output');
+
+        this.test.assert(this.cell_element_exists(index, 
+            '.widget-area .widget-subarea'),
+            'Widget subarea exists.');
+
+        this.test.assert(this.cell_element_exists(index, 
+            '.my-throttle-textbox'), 'Textbox exists.');
+
+        // Send 20 characters
+        this.sendKeys('.my-throttle-textbox', '....................');
+    });
+
+    this.wait(2000); // Wait for clicks to execute in kernel
+
+    this.then(function(){
+        var outputs = this.evaluate(function(i) {
+            return IPython.notebook.get_cell(i).output_area.outputs;
+        }, {i : throttle_index});
+
+        // Only 4 outputs should have printed, but because of timing, sometimes
+        // 5 outputs will print.  All we need to do is verify num outputs <= 5
+        // because that is much less than 20.
+        this.test.assert(outputs.length <= 5, 'Messages throttled.');
+
+        // We also need to verify that the last state sent was correct.
+        var last_state = outputs[outputs.length-1].text;
+        this.test.assertEquals(last_state, "20\n", "Last state sent when throttling.");
+    });
+});

IPython/html/tests/casperjs/test_cases/widgets_bool.js

@@ -0,0 +1,86 b''
+// Test widget bool class
+casper.notebook_test(function () {
+    index = this.append_cell(
+        'from IPython.html import widgets\n' + 
+        'from IPython.display import display, clear_output\n' +
+        'print("Success")');
+    this.execute_cell_then(index);
+
+    var bool_index = this.append_cell(
+        'bool_widgets = [widgets.CheckboxWidget(description="Title", value=True),\n' +
+        '    widgets.ToggleButtonWidget(description="Title", value=True)]\n' +
+        'display(bool_widgets[0])\n' +
+        'display(bool_widgets[1])\n' +
+        'print("Success")');
+    this.execute_cell_then(bool_index, function(index){
+
+        this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
+            'Create bool widget cell executed with correct output.');
+
+        this.test.assert(this.cell_element_exists(index, 
+            '.widget-area .widget-subarea'),
+            'Widget subarea exists.');
+
+        this.test.assert(this.cell_element_exists(index, 
+            '.widget-area .widget-subarea .widget-hbox-single input'),
+            'Checkbox exists.');
+
+        this.test.assert(this.cell_element_function(index, 
+            '.widget-area .widget-subarea .widget-hbox-single input', 'prop', ['checked']),
+            'Checkbox is checked.');
+
+        this.test.assert(this.cell_element_exists(index, 
+            '.widget-area .widget-subarea .widget-hbox-single .widget-hlabel'),
+            'Checkbox label exists.');
+
+        this.test.assert(this.cell_element_function(index, 
+            '.widget-area .widget-subarea .widget-hbox-single .widget-hlabel', 'html')=="Title",
+            'Checkbox labeled correctly.');
+
+        this.test.assert(this.cell_element_exists(index, 
+            '.widget-area .widget-subarea button'),
+            'Toggle button exists.');
+
+        this.test.assert(this.cell_element_function(index, 
+            '.widget-area .widget-subarea button', 'html')=="Title",
+            'Toggle button labeled correctly.');
+
+        this.test.assert(this.cell_element_function(index, 
+            '.widget-area .widget-subarea button', 'hasClass', ['active']),
+            'Toggle button is toggled.');
+
+    });
+
+    index = this.append_cell(
+        'bool_widgets[0].value = False\n' +
+        'bool_widgets[1].value = False\n' +
+        'print("Success")');
+    this.execute_cell_then(index, function(index){
+
+        this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
+            'Change bool widget value cell executed with correct output.');
+
+        this.test.assert(! this.cell_element_function(bool_index, 
+            '.widget-area .widget-subarea .widget-hbox-single input', 'prop', ['checked']),
+            'Checkbox is not checked. (1)');
+
+        this.test.assert(! this.cell_element_function(bool_index, 
+            '.widget-area .widget-subarea button', 'hasClass', ['active']),
+            'Toggle button is not toggled. (1)');
+ 
+        // Try toggling the bool by clicking on the checkbox.
+        this.cell_element_function(bool_index, '.widget-area .widget-subarea .widget-hbox-single input', 'click');
+
+        this.test.assert(this.cell_element_function(bool_index, 
+            '.widget-area .widget-subarea .widget-hbox-single input', 'prop', ['checked']),
+            'Checkbox is checked. (2)');
+
+        // Try toggling the bool by clicking on the toggle button.
+        this.cell_element_function(bool_index, '.widget-area .widget-subarea button', 'click');
+
+        this.test.assert(this.cell_element_function(bool_index, 
+            '.widget-area .widget-subarea button', 'hasClass', ['active']),
+            'Toggle button is toggled. (3)');
+
+    });
+});
  No newline at end of file

IPython/html/tests/casperjs/test_cases/widgets_button.js

@@ -0,0 +1,43 b''
+// Test widget button class
+casper.notebook_test(function () {
+    index = this.append_cell(
+        'from IPython.html import widgets\n' + 
+        'from IPython.display import display, clear_output\n' +
+        'print("Success")');
+    this.execute_cell_then(index);
+
+    var button_index = this.append_cell(
+        'button = widgets.ButtonWidget(description="Title")\n' +
+        'display(button)\n'+
+        'print("Success")\n' +
+        'def handle_click(sender):\n' +
+        '    print("Clicked")\n' +
+        'button.on_click(handle_click)');
+    this.execute_cell_then(button_index, function(index){
+
+        this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
+            'Create button cell executed with correct output.');
+
+        this.test.assert(this.cell_element_exists(index, 
+            '.widget-area .widget-subarea'),
+            'Widget subarea exists.');
+
+        this.test.assert(this.cell_element_exists(index, 
+            '.widget-area .widget-subarea button'),
+            'Widget button exists.');
+
+        this.test.assert(this.cell_element_function(index, 
+            '.widget-area .widget-subarea button', 'html')=='Title',
+            'Set button description.');
+
+        this.cell_element_function(index, 
+            '.widget-area .widget-subarea button', 'click');
+    });
+
+    this.wait(500); // Wait for click to execute in kernel and write output
+
+    this.then(function () {
+        this.test.assertEquals(this.get_output_cell(button_index, 1).text, 'Clicked\n', 
+            'Button click event fires.');
+    });
+});
  No newline at end of file

IPython/html/tests/casperjs/test_cases/widgets_container.js

@@ -0,0 +1,80 b''
+// Test container class
+casper.notebook_test(function () {
+    index = this.append_cell(
+        'from IPython.html import widgets\n' + 
+        'from IPython.display import display, clear_output\n' +
+        'print("Success")');
+    this.execute_cell_then(index);
+
+    var container_index = this.append_cell(
+        'container = widgets.ContainerWidget()\n' +
+        'button = widgets.ButtonWidget()\n'+
+        'container.children = [button]\n'+
+        'display(container)\n'+
+        'container.add_class("my-test-class")\n'+
+        'print("Success")\n');
+    this.execute_cell_then(container_index, function(index){
+
+        this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
+            'Create container cell executed with correct output.');
+
+        this.test.assert(this.cell_element_exists(index, 
+            '.widget-area .widget-subarea'),
+            'Widget subarea exists.');
+
+        this.test.assert(this.cell_element_exists(index, 
+            '.widget-area .widget-subarea .widget-container'),
+            'Widget container exists.');
+
+        this.test.assert(this.cell_element_exists(index, 
+            '.widget-area .widget-subarea .my-test-class'),
+            'add_class works.');
+
+        this.test.assert(this.cell_element_exists(index, 
+            '.widget-area .widget-subarea .my-test-class button'),
+            'Container parent/child relationship works.');
+    });
+
+    index = this.append_cell(
+        'container.set_css("float", "right")\n'+
+        'print("Success")\n');
+    this.execute_cell_then(index, function(index){
+
+        this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
+            'Set container class CSS cell executed with correct output.');
+        
+        this.test.assert(this.cell_element_function(container_index, 
+            '.widget-area .widget-subarea .my-test-class', 'css', ['float'])=='right',
+            'set_css works.');
+    });
+
+    index = this.append_cell(
+        'container.remove_class("my-test-class")\n'+
+        'print("Success")\n');
+    this.execute_cell_then(index, function(index){
+
+        this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
+            'Remove container class cell executed with correct output.');
+
+        this.test.assert(! this.cell_element_exists(container_index, 
+            '.widget-area .widget-subarea .my-test-class'),
+            'remove_class works.');
+    });
+
+    index = this.append_cell(
+        'display(button)\n'+
+        'print("Success")\n');
+    this.execute_cell_then(index, function(index){
+
+        this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
+            'Display container child executed with correct output.');
+
+        this.test.assert(! this.cell_element_exists(index, 
+            '.widget-area .widget-subarea .widget-container'),
+            'Parent container not displayed.');
+
+        this.test.assert(this.cell_element_exists(index, 
+            '.widget-area .widget-subarea button'),
+            'Child displayed.');
+    });
+});
  No newline at end of file

IPython/html/tests/casperjs/test_cases/widgets_float.js

@@ -0,0 +1,108 b''
+// Test widget float class
+casper.notebook_test(function () {
+    index = this.append_cell(
+        'from IPython.html import widgets\n' + 
+        'from IPython.display import display, clear_output\n' +
+        'print("Success")');
+    this.execute_cell_then(index);
+
+    var float_text_query_2 = '.widget-area .widget-subarea .widget-hbox-single .my-second-float-text';
+
+    var float_index = this.append_cell(
+        'float_widget = widgets.FloatTextWidget()\n' +
+        'display(float_widget)\n' + 
+        'float_widget.add_class("my-second-float-text")\n' + 
+        'print("Success")\n');
+    this.execute_cell_then(float_index, function(index){
+
+        this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
+            'Create float cell executed with correct output.');
+
+        this.test.assert(this.cell_element_exists(index, 
+            '.widget-area .widget-subarea'),
+            'Widget subarea exists.');
+
+        this.test.assert(this.cell_element_exists(index, float_text_query_2),
+            'Widget float textbox exists.');
+
+        this.cell_element_function(float_index, float_text_query_2, 'val', ['']);
+        this.sendKeys(float_text_query_2, '1.05');
+    });
+
+    this.wait(500); // Wait for change to execute in kernel
+
+    index = this.append_cell('print(float_widget.value)\n');
+    this.execute_cell_then(index, function(index){
+        this.test.assertEquals(this.get_output_cell(index).text, '1.05\n', 
+            'Float textbox value set.');
+        this.cell_element_function(float_index, float_text_query_2, 'val', ['']);
+        this.sendKeys(float_text_query_2, '123456789.0');
+    });
+
+    this.wait(500); // Wait for change to execute in kernel
+
+    index = this.append_cell('print(float_widget.value)\n');
+    this.execute_cell_then(index, function(index){
+        this.test.assertEquals(this.get_output_cell(index).text, '123456789.0\n', 
+            'Long float textbox value set (probably triggers throttling).');
+        this.cell_element_function(float_index, float_text_query_2, 'val', ['']);
+        this.sendKeys(float_text_query_2, '12hello');
+    });
+
+    this.wait(500); // Wait for change to execute in kernel
+
+    index = this.append_cell('print(float_widget.value)\n');
+    this.execute_cell_then(index, function(index){
+        this.test.assertEquals(this.get_output_cell(index).text, '12.0\n', 
+            'Invald float textbox value caught and filtered.');
+    });
+    
+    index = this.append_cell(
+        'from IPython.html import widgets\n' + 
+        'from IPython.display import display, clear_output\n' +
+        'print("Success")');
+    this.execute_cell_then(index);
+
+    var slider_query = '.widget-area .widget-subarea .widget-hbox-single .slider';
+    var float_text_query = '.widget-area .widget-subarea .widget-hbox-single .widget-numeric-text';
+
+    var floatrange_index = this.append_cell(
+        'floatrange = [widgets.BoundedFloatTextWidget(), \n' +
+        '    widgets.FloatSliderWidget()]\n' +
+        '[display(floatrange[i]) for i in range(2)]\n' + 
+        'print("Success")\n');
+    this.execute_cell_then(floatrange_index, function(index){
+
+        this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
+            'Create float range cell executed with correct output.');
+
+        this.test.assert(this.cell_element_exists(index, 
+            '.widget-area .widget-subarea'),
+            'Widget subarea exists.');
+
+        this.test.assert(this.cell_element_exists(index, slider_query),
+            'Widget slider exists.');
+
+        this.test.assert(this.cell_element_exists(index, float_text_query),
+            'Widget float textbox exists.');
+    });
+
+    index = this.append_cell(
+        'for widget in floatrange:\n' +
+        '    widget.max = 50.0\n' +
+        '    widget.min = -50.0\n' +
+        '    widget.value = 25.0\n' +
+        'print("Success")\n');
+    this.execute_cell_then(index, function(index){
+
+        this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
+            'Float range properties cell executed with correct output.');
+
+        this.test.assert(this.cell_element_exists(floatrange_index, slider_query), 
+            'Widget slider exists.');
+
+        this.test.assert(this.cell_element_function(floatrange_index, slider_query, 
+            'slider', ['value']) == 25.0,
+            'Slider set to Python value.');
+    });
+});
  No newline at end of file

IPython/html/tests/casperjs/test_cases/widgets_image.js

@@ -0,0 +1,60 b''
+// Test image class
+casper.notebook_test(function () {
+    index = this.append_cell(
+        'from IPython.html import widgets\n' + 
+        'from IPython.display import display, clear_output\n' +
+        'print("Success")');
+    this.execute_cell_then(index);
+
+    // Get the temporary directory that the test server is running in.
+    var cwd = '';
+    index = this.append_cell('!echo $(pwd)');
+    this.execute_cell_then(index, function(index){
+        cwd = this.get_output_cell(index).text.trim();
+    });
+
+    test_jpg = '/9j/4AAQSkZJRgABAQEASABIAAD//gATQ3JlYXRlZCB3aXRoIEdJTVD/2wBDACAWGBwYFCAcGhwkIiAmMFA0MCwsMGJGSjpQdGZ6eHJmcG6AkLicgIiuim5woNqirr7EztDOfJri8uDI8LjKzsb/2wBDASIkJDAqMF40NF7GhHCExsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsb/wgARCAABAAEDAREAAhEBAxEB/8QAFAABAAAAAAAAAAAAAAAAAAAAA//EABUBAQEAAAAAAAAAAAAAAAAAAAME/9oADAMBAAIQAxAAAAECv//EABQQAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQEAAQUCf//EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQMBAT8Bf//EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQIBAT8Bf//EABQQAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQEABj8Cf//EABQQAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQEAAT8hf//aAAwDAQACAAMAAAAQn//EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQMBAT8Qf//EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQIBAT8Qf//EABQQAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQEAAT8Qf//Z';
+    test_results = '/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAyADIDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDi6KKK+ZP3EKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooA//Z';
+
+    var image_index = this.append_cell(
+        'import base64\n' + 
+        'data = base64.b64decode("' + test_jpg + '")\n' +
+        'image = widgets.ImageWidget()\n' +
+        'image.format = "jpeg"\n' +
+        'image.value = data\n' +
+        'image.width = "50px"\n' +
+        'image.height = "50px"\n' +
+        // Set css that will make the image render within the PhantomJS visible
+        // window.  If we don't do this, the captured image will be black.
+        'image.set_css({"background": "blue", "z-index": "9999", "position": "fixed", "top": "0px", "left": "0px"})\n' + 
+        'display(image)\n' + 
+        'image.add_class("my-test-image")\n' + 
+        'print("Success")\n');
+    this.execute_cell_then(image_index, function(index){
+
+        this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
+            'Create image executed with correct output.');
+
+        this.test.assert(this.cell_element_exists(index, 
+            '.widget-area .widget-subarea'),
+            'Widget subarea exists.');
+
+        this.test.assert(this.cell_element_exists(index, 
+            '.widget-area .widget-subarea img'),
+            'Image exists.');
+
+        // Capture a screenshot of the img element as a base64 string.
+        var fs = require('fs');
+        capture_filename = cwd + fs.separator + 'captured.jpg';
+        this.captureSelector(capture_filename, '.my-test-image');
+        var stream = fs.open(capture_filename, 'rb');
+        var captured = btoa(stream.read());
+        stream.close();
+        fs.remove(capture_filename);
+
+        // Uncomment line below to output captured image data to a text file.
+        // fs.write('./captured.txt', captured, 'w');
+
+        this.test.assertEquals(test_results, captured, "Red image data displayed correctly.");
+    });    
+});
  No newline at end of file

IPython/html/tests/casperjs/test_cases/widgets_int.js

@@ -0,0 +1,151 b''
+// Test widget int class
+casper.notebook_test(function () {
+    index = this.append_cell(
+        'from IPython.html import widgets\n' + 
+        'from IPython.display import display, clear_output\n' +
+        'print("Success")');
+    this.execute_cell_then(index);
+
+    var int_text_query_2 = '.widget-area .widget-subarea .widget-hbox-single .my-second-int-text';
+
+    var int_index = this.append_cell(
+        'int_widget = widgets.IntTextWidget()\n' +
+        'display(int_widget)\n' + 
+        'int_widget.add_class("my-second-int-text")\n' + 
+        'print("Success")\n');
+    this.execute_cell_then(int_index, function(index){
+
+        this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
+            'Create int cell executed with correct output.');
+
+        this.test.assert(this.cell_element_exists(index, 
+            '.widget-area .widget-subarea'),
+            'Widget subarea exists.');
+
+        this.test.assert(this.cell_element_exists(index, int_text_query_2),
+            'Widget int textbox exists.');
+
+        this.cell_element_function(int_index, int_text_query_2, 'val', ['']);
+        this.sendKeys(int_text_query_2, '1.05');
+    });
+
+    this.wait(500); // Wait for change to execute in kernel
+
+    index = this.append_cell('print(int_widget.value)\n');
+    this.execute_cell_then(index, function(index){
+        this.test.assertEquals(this.get_output_cell(index).text, '1\n', 
+            'Int textbox value set.');
+        this.cell_element_function(int_index, int_text_query_2, 'val', ['']);
+        this.sendKeys(int_text_query_2, '123456789');
+    });
+
+    this.wait(500); // Wait for change to execute in kernel
+
+    index = this.append_cell('print(int_widget.value)\n');
+    this.execute_cell_then(index, function(index){
+        this.test.assertEquals(this.get_output_cell(index).text, '123456789\n', 
+            'Long int textbox value set (probably triggers throttling).');
+        this.cell_element_function(int_index, int_text_query_2, 'val', ['']);
+        this.sendKeys(int_text_query_2, '12hello');
+    });
+
+    this.wait(500); // Wait for change to execute in kernel
+
+    index = this.append_cell('print(int_widget.value)\n');
+    this.execute_cell_then(index, function(index){
+        this.test.assertEquals(this.get_output_cell(index).text, '12\n', 
+            'Invald int textbox value caught and filtered.');
+    });
+    
+    index = this.append_cell(
+        'from IPython.html import widgets\n' + 
+        'from IPython.display import display, clear_output\n' +
+        'print("Success")');
+    this.execute_cell_then(index);
+
+    var slider_query = '.widget-area .widget-subarea .widget-hbox-single .slider';
+    var int_text_query = '.widget-area .widget-subarea .widget-hbox-single .my-second-num-test-text';
+
+    var intrange_index = this.append_cell(
+        'intrange = [widgets.BoundedIntTextWidget(),\n' +
+        '    widgets.IntSliderWidget()]\n' +
+        '[display(intrange[i]) for i in range(2)]\n' +
+        'intrange[0].add_class("my-second-num-test-text")\n' +  
+        'print("Success")\n');
+    this.execute_cell_then(intrange_index, function(index){
+
+        this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
+            'Create int range cell executed with correct output.');
+
+        this.test.assert(this.cell_element_exists(index, 
+            '.widget-area .widget-subarea'),
+            'Widget subarea exists.');
+
+        this.test.assert(this.cell_element_exists(index, slider_query),
+            'Widget slider exists.');
+
+        this.test.assert(this.cell_element_exists(index, int_text_query),
+            'Widget int textbox exists.');
+    });
+
+    index = this.append_cell(
+        'for widget in intrange:\n' +
+        '    widget.max = 50\n' +
+        '    widget.min = -50\n' +
+        '    widget.value = 25\n' +
+        'print("Success")\n');
+    this.execute_cell_then(index, function(index){
+
+        this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
+            'Int range properties cell executed with correct output.');
+
+        this.test.assert(this.cell_element_exists(intrange_index, slider_query), 
+            'Widget slider exists.');
+
+        this.test.assert(this.cell_element_function(intrange_index, slider_query, 
+            'slider', ['value']) == 25,
+            'Slider set to Python value.');
+
+        this.test.assert(this.cell_element_function(intrange_index, int_text_query,
+            'val') == 25, 'Int textbox set to Python value.');
+
+        // Clear the int textbox value and then set it to 1 by emulating
+        // keyboard presses.
+        this.cell_element_function(intrange_index, int_text_query, 'val', ['']);
+        this.sendKeys(int_text_query, '1');
+    });
+
+    this.wait(500); // Wait for change to execute in kernel
+
+    index = this.append_cell('print(intrange[0].value)\n');
+    this.execute_cell_then(index, function(index){
+        this.test.assertEquals(this.get_output_cell(index).text, '1\n', 
+            'Int textbox set int range value');
+
+        // Clear the int textbox value and then set it to 120 by emulating
+        // keyboard presses.
+        this.cell_element_function(intrange_index, int_text_query, 'val', ['']);
+        this.sendKeys(int_text_query, '120');
+    });
+
+    this.wait(500); // Wait for change to execute in kernel
+
+    index = this.append_cell('print(intrange[0].value)\n');
+    this.execute_cell_then(index, function(index){
+        this.test.assertEquals(this.get_output_cell(index).text, '50\n', 
+            'Int textbox value bound');
+
+        // Clear the int textbox value and then set it to 'hello world' by 
+        // emulating keyboard presses.  'hello world' should get filtered...
+        this.cell_element_function(intrange_index, int_text_query, 'val', ['']);
+        this.sendKeys(int_text_query, 'hello world');
+    });
+
+    this.wait(500); // Wait for change to execute in kernel
+
+    index = this.append_cell('print(intrange[0].value)\n');
+    this.execute_cell_then(index, function(index){
+        this.test.assertEquals(this.get_output_cell(index).text, '50\n', 
+            'Invalid int textbox characters ignored');
+    });    
+});
  No newline at end of file

IPython/html/tests/casperjs/test_cases/widgets_multicontainer.js

@@ -0,0 +1,108 b''
+// Test multicontainer class
+casper.notebook_test(function () {
+    index = this.append_cell(
+        'from IPython.html import widgets\n' + 
+        'from IPython.display import display, clear_output\n' +
+        'print("Success")');
+    this.execute_cell_then(index);
+
+    // Test tab view
+    var multicontainer1_query = '.widget-area .widget-subarea div div.nav-tabs';
+    var multicontainer1_index = this.append_cell(
+        'multicontainer = widgets.TabWidget()\n' +
+        'page1 = widgets.TextWidget()\n' +
+        'page2 = widgets.TextWidget()\n' +
+        'page3 = widgets.TextWidget()\n' +
+        'multicontainer.children = [page1, page2, page3]\n' +
+        'display(multicontainer)\n' +
+        'multicontainer.selected_index = 0\n' +
+        'print("Success")\n');
+    this.execute_cell_then(multicontainer1_index, function(index){
+        
+        this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
+            'Create multicontainer cell executed with correct output. (1)');
+
+        this.test.assert(this.cell_element_exists(index, 
+            '.widget-area .widget-subarea'),
+            'Widget subarea exists.');
+
+        this.test.assert(this.cell_element_exists(index, multicontainer1_query),
+            'Widget tab list exists.');
+
+        this.test.assert(this.cell_element_exists(index, multicontainer1_query),
+            'First widget tab list exists.');
+
+        // JQuery selector is 1 based
+        this.click(multicontainer1_query + ' li:nth-child(2) a');
+    });
+
+    this.wait(500); // Wait for change to execute in kernel
+
+    index = this.append_cell(
+        'print(multicontainer.selected_index)\n' +
+        'multicontainer.selected_index = 2'); // 0 based
+    this.execute_cell_then(index, function(index){
+        this.test.assertEquals(this.get_output_cell(index).text, '1\n', // 0 based
+            'selected_index property updated with tab change.');
+
+        // JQuery selector is 1 based
+        this.test.assert(!this.cell_element_function(multicontainer1_index, multicontainer1_query + ' li:nth-child(1)', 'hasClass', ['active']),
+                "Tab 1 is not selected.");
+        this.test.assert(!this.cell_element_function(multicontainer1_index, multicontainer1_query + ' li:nth-child(2)', 'hasClass', ['active']),
+                "Tab 2 is not selected.");
+        this.test.assert(this.cell_element_function(multicontainer1_index, multicontainer1_query + ' li:nth-child(3)', 'hasClass', ['active']),
+                "Tab 3 is selected.");
+    });
+
+    index = this.append_cell('multicontainer.set_title(1, "hello")\nprint("Success")'); // 0 based
+    this.execute_cell_then(index, function(index){
+        this.test.assert(this.cell_element_function(multicontainer1_index, multicontainer1_query +
+            ' li:nth-child(2) a', 'html') == 'hello',
+            'Tab page title set (after display).');
+    });
+
+    // Test accordion view
+    var multicontainer2_query = '.widget-area .widget-subarea .accordion';
+    var multicontainer2_index = this.append_cell(
+        'multicontainer = widgets.AccordionWidget()\n' +
+        'page1 = widgets.TextWidget()\n' +
+        'page2 = widgets.TextWidget()\n' +
+        'page3 = widgets.TextWidget()\n' +
+        'multicontainer.children = [page1, page2, page3]\n' +
+        'multicontainer.set_title(2, "good")\n' +
+        'display(multicontainer)\n' +
+        'multicontainer.selected_index = 0\n' +
+        'print("Success")\n');
+    this.execute_cell_then(multicontainer2_index, function(index){
+
+        this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
+            'Create multicontainer cell executed with correct output. (2)');
+
+        this.test.assert(this.cell_element_exists(index, 
+            '.widget-area .widget-subarea'),
+            'Widget subarea exists.');
+
+        this.test.assert(this.cell_element_exists(index, multicontainer2_query),
+            'Widget accordion exists.');
+
+        this.test.assert(this.cell_element_exists(index, multicontainer2_query + 
+            ' .accordion-group:nth-child(1) .accordion-body'),
+            'First accordion page exists.');
+
+        // JQuery selector is 1 based
+        this.test.assert(this.cell_element_function(index, multicontainer2_query + 
+            ' .accordion-group:nth-child(3) .accordion-heading .accordion-toggle', 
+            'html')=='good', 'Accordion page title set (before display).');
+
+        // JQuery selector is 1 based
+        this.click(multicontainer2_query + ' .accordion-group:nth-child(2) .accordion-heading .accordion-toggle');
+    });
+
+    this.wait(500); // Wait for change to execute in kernel
+
+    index = this.append_cell('print(multicontainer.selected_index)'); // 0 based
+    this.execute_cell_then(index, function(index){
+        this.test.assertEquals(this.get_output_cell(index).text, '1\n', // 0 based
+            'selected_index property updated with tab change.');
+    });
+});
  No newline at end of file

IPython/html/tests/casperjs/test_cases/widgets_selection.js

@@ -0,0 +1,133 b''
+// Test selection class
+casper.notebook_test(function () {
+    index = this.append_cell(
+        'from IPython.html import widgets\n' + 
+        'from IPython.display import display, clear_output\n' +
+        'print("Success")');
+    this.execute_cell_then(index);
+
+    var combo_selector = '.widget-area .widget-subarea .widget-hbox-single .btn-group .widget-combo-btn';
+    var multibtn_selector = '.widget-area .widget-subarea .widget-hbox-single .btn-group[data-toggle="buttons-radio"]';
+    var radio_selector = '.widget-area .widget-subarea .widget-hbox .vbox';
+    var list_selector = '.widget-area .widget-subarea .widget-hbox .widget-listbox';
+
+    var selection_index;
+    var selection_values = 'abcd';
+    var check_state = function(context, index, state){
+        if (0 <= index && index < selection_values.length) {
+            var multibtn_state = context.cell_element_function(selection_index, multibtn_selector + ' .btn:nth-child(' + (index + 1) + ')', 'hasClass', ['active']);
+            var radio_state = context.cell_element_function(selection_index, radio_selector + ' .radio:nth-child(' + (index + 1) + ') input', 'prop', ['checked']);
+            var list_val = context.cell_element_function(selection_index, list_selector, 'val');
+            var combo_val = context.cell_element_function(selection_index, combo_selector, 'html');
+            
+            var val = selection_values.charAt(index);
+            var list_state = (val == list_val);
+            var combo_state = (val == combo_val);
+
+            return multibtn_state == state &&
+                radio_state == state &&
+                list_state == state &&
+                combo_state == state;
+        }
+        return true;
+    };
+
+    var verify_selection = function(context, index){
+        for (var i = 0; i < selection_values.length; i++) {
+            if (!check_state(context, i, i==index)) {
+                return false;
+            }
+        }
+        return true;
+    };
+
+//values=["' + selection_values + '"[i] for i in range(4)]
+    selection_index = this.append_cell(
+        'values=["' + selection_values + '"[i] for i in range(4)]\n' +
+        'selection = [widgets.DropdownWidget(values=values),\n' +
+        '    widgets.ToggleButtonsWidget(values=values),\n' +
+        '    widgets.RadioButtonsWidget(values=values),\n' +
+        '    widgets.SelectWidget(values=values)]\n' +
+        '[display(selection[i]) for i in range(4)]\n' +
+        'for widget in selection:\n' +
+        '    def handle_change(name,old,new):\n' +
+        '        for other_widget in selection:\n' +
+        '            other_widget.value = new\n' +
+        '    widget.on_trait_change(handle_change, "value")\n' +
+        'print("Success")\n');
+    this.execute_cell_then(selection_index, function(index){
+        this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
+            'Create selection cell executed with correct output.');
+
+        this.test.assert(this.cell_element_exists(index, 
+            '.widget-area .widget-subarea'),
+            'Widget subarea exists.');
+
+        this.test.assert(this.cell_element_exists(index, combo_selector),
+             'Widget combobox exists.');
+
+        this.test.assert(this.cell_element_exists(index, multibtn_selector),
+            'Widget multibutton exists.');
+
+        this.test.assert(this.cell_element_exists(index, radio_selector),
+            'Widget radio buttons exists.');
+
+        this.test.assert(this.cell_element_exists(index, list_selector),
+            'Widget list exists.');
+
+        // Verify that no items are selected.
+        this.test.assert(verify_selection(this, -1), 'No items selected.');
+    });
+
+    index = this.append_cell(
+        'for widget in selection:\n' +
+        '    widget.value = "a"\n' +
+        'print("Success")\n');
+    this.execute_cell_then(index, function(index){
+        this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
+            'Python select item executed with correct output.');
+
+        // Verify that the first item is selected.
+        this.test.assert(verify_selection(this, 0), 'Python selected');
+
+        // Verify that selecting a radio button updates all of the others.
+        this.cell_element_function(selection_index, radio_selector + ' .radio:nth-child(2) input', 'click');
+    });
+    this.wait(500);
+    this.then(function () {
+        this.test.assert(verify_selection(this, 1), 'Radio button selection updated view states correctly.');
+
+        // Verify that selecting a list option updates all of the others.
+        this.cell_element_function(selection_index, list_selector + ' option:nth-child(3)', 'click');
+    });
+    this.wait(500);
+    this.then(function () {
+        this.test.assert(verify_selection(this, 2), 'List selection updated view states correctly.');
+
+        // Verify that selecting a multibutton option updates all of the others.
+        this.cell_element_function(selection_index, multibtn_selector + ' .btn:nth-child(4)', 'click');
+    });
+    this.wait(500);
+    this.then(function () {
+        this.test.assert(verify_selection(this, 3), 'Multibutton selection updated view states correctly.');
+
+        // Verify that selecting a combobox option updates all of the others.
+        this.cell_element_function(selection_index, '.widget-area .widget-subarea .widget-hbox-single .btn-group ul.dropdown-menu li:nth-child(3) a', 'click');
+    });
+    this.wait(500);
+    this.then(function () {
+        this.test.assert(verify_selection(this, 2), 'Combobox selection updated view states correctly.');
+    });
+
+    this.wait(500); // Wait for change to execute in kernel
+
+    index = this.append_cell(
+        'for widget in selection:\n' +
+        '    widget.values = list(widget.values) + ["z"]\n' +
+        'selection[0].value = "z"');
+    this.execute_cell_then(index, function(index){
+
+        // Verify that selecting a combobox option updates all of the others.
+        this.test.assert(verify_selection(this, 4), 'Item added to selection widget.');
+    });
+});
  No newline at end of file

IPython/html/tests/casperjs/test_cases/widgets_string.js

@@ -0,0 +1,52 b''
+// Test widget string class
+casper.notebook_test(function () {
+    index = this.append_cell(
+        'from IPython.html import widgets\n' + 
+        'from IPython.display import display, clear_output\n' +
+        'print("Success")');
+    this.execute_cell_then(index);
+
+    var string_index = this.append_cell(
+        'string_widget = [widgets.TextWidget(value = "xyz"),\n' +
+        '    widgets.TextareaWidget(value = "xyz"),\n' +
+        '    widgets.HTMLWidget(value = "xyz"),\n' +
+        '    widgets.LatexWidget(value = "$\\\\LaTeX{}$")]\n' +
+        '[display(widget) for widget in string_widget]\n'+
+        'print("Success")');
+    this.execute_cell_then(string_index, function(index){
+
+        this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
+            'Create string widget cell executed with correct output.');
+
+        this.test.assert(this.cell_element_exists(index, 
+            '.widget-area .widget-subarea'),
+            'Widget subarea exists.');
+
+        this.test.assert(this.cell_element_exists(index, 
+            '.widget-area .widget-subarea .widget-hbox-single input[type=text]'),
+            'Textbox exists.');
+
+        this.test.assert(this.cell_element_exists(index, 
+            '.widget-area .widget-subarea .widget-hbox textarea'),
+            'Textarea exists.');
+
+        this.test.assert(this.cell_element_function(index, 
+            '.widget-area .widget-subarea .widget-hbox textarea', 'val')=='xyz',
+            'Python set textarea value.');
+
+        this.test.assert(this.cell_element_function(index, 
+            '.widget-area .widget-subarea .widget-hbox-single input[type=text]', 'val')=='xyz',
+            'Python set textbox value.');
+
+    });
+
+    this.wait(500); // Wait for change to execute in kernel
+
+    index = this.append_cell('print(string_widget.value)');
+    this.execute_cell_then(index, function(index){
+
+        this.test.assert(this.cell_element_exists(string_index, 
+            '.widget-area .widget-subarea div span.MathJax_Preview'),
+            'MathJax parsed the LaTeX successfully.');
+    });
+});
  No newline at end of file

IPython/html/widgets/__init__.py

@@ -0,0 +1,11 b''
+from .widget import Widget, DOMWidget, CallbackDispatcher
+
+from .widget_bool import CheckboxWidget, ToggleButtonWidget
+from .widget_button import ButtonWidget
+from .widget_container import ContainerWidget, PopupWidget
+from .widget_float import FloatTextWidget, BoundedFloatTextWidget, FloatSliderWidget, FloatProgressWidget
+from .widget_image import ImageWidget
+from .widget_int import IntTextWidget, BoundedIntTextWidget, IntSliderWidget, IntProgressWidget
+from .widget_selection import RadioButtonsWidget, ToggleButtonsWidget, DropdownWidget, SelectWidget
+from .widget_selectioncontainer import TabWidget, AccordionWidget
+from .widget_string import HTMLWidget, LatexWidget, TextWidget, TextareaWidget

IPython/html/widgets/widget.py

@@ -0,0 +1,419 b''
+"""Base Widget class.  Allows user to create widgets in the back-end that render
+in the IPython notebook front-end.
+"""
+#-----------------------------------------------------------------------------
+# Copyright (c) 2013, the IPython Development Team.
+#
+# Distributed under the terms of the Modified BSD License.
+#
+# The full license is in the file COPYING.txt, distributed with this software.
+#-----------------------------------------------------------------------------
+
+#-----------------------------------------------------------------------------
+# Imports
+#-----------------------------------------------------------------------------
+from contextlib import contextmanager
+
+from IPython.kernel.comm import Comm
+from IPython.config import LoggingConfigurable
+from IPython.utils.traitlets import Unicode, Dict, Instance, Bool, List, Tuple
+from IPython.utils.py3compat import string_types
+
+#-----------------------------------------------------------------------------
+# Classes
+#-----------------------------------------------------------------------------
+class CallbackDispatcher(LoggingConfigurable):
+    """A structure for registering and running callbacks"""
+    callbacks = List()
+    
+    def __call__(self, *args, **kwargs):
+        """Call all of the registered callbacks."""
+        value = None
+        for callback in self.callbacks:
+            try:
+                local_value = callback(*args, **kwargs)
+            except Exception as e:
+                self.log.warn("Exception in callback %s: %s", callback, e)
+            else:
+                value = local_value if local_value is not None else value
+        return value
+
+    def register_callback(self, callback, remove=False):
+        """(Un)Register a callback
+
+        Parameters
+        ----------
+        callback: method handle
+            Method to be registered or unregistered.
+        remove=False: bool
+            Whether to unregister the callback."""
+        
+        # (Un)Register the callback.
+        if remove and callback in self.callbacks:
+            self.callbacks.remove(callback)
+        elif not remove and callback not in self.callbacks:
+            self.callbacks.append(callback)
+
+
+class Widget(LoggingConfigurable):
+    #-------------------------------------------------------------------------
+    # Class attributes
+    #-------------------------------------------------------------------------
+    _widget_construction_callback = None
+    widgets = {}
+
+    @staticmethod
+    def on_widget_constructed(callback):
+        """Registers a callback to be called when a widget is constructed.
+
+        The callback must have the following signature:
+        callback(widget)"""
+        Widget._widget_construction_callback = callback
+
+    @staticmethod
+    def _call_widget_constructed(widget):
+        """Static method, called when a widget is constructed."""
+        if Widget._widget_construction_callback is not None and callable(Widget._widget_construction_callback):
+            Widget._widget_construction_callback(widget)
+
+    #-------------------------------------------------------------------------
+    # Traits
+    #-------------------------------------------------------------------------
+    model_name = Unicode('WidgetModel', help="""Name of the backbone model 
+        registered in the front-end to create and sync this widget with.""")
+    _view_name = Unicode(help="""Default view registered in the front-end
+        to use to represent the widget.""", sync=True)
+    _comm = Instance('IPython.kernel.comm.Comm')
+    
+    closed = Bool(False)
+    
+    keys = List()
+    def _keys_default(self):
+        return [name for name in self.traits(sync=True)]
+    
+    _property_lock = Tuple((None, None))
+    
+    _display_callbacks = Instance(CallbackDispatcher, ())
+    _msg_callbacks = Instance(CallbackDispatcher, ())
+    
+    #-------------------------------------------------------------------------
+    # (Con/de)structor
+    #-------------------------------------------------------------------------
+    def __init__(self, **kwargs):
+        """Public constructor"""
+        super(Widget, self).__init__(**kwargs)
+
+        self.on_trait_change(self._handle_property_changed, self.keys)
+        Widget._call_widget_constructed(self)
+
+    def __del__(self):
+        """Object disposal"""
+        self.close()
+
+    #-------------------------------------------------------------------------
+    # Properties
+    #-------------------------------------------------------------------------
+
+    @property
+    def comm(self):
+        """Gets the Comm associated with this widget.
+
+        If a Comm doesn't exist yet, a Comm will be created automagically."""
+        if self._comm is None:
+            # Create a comm.
+            self._comm = Comm(target_name=self.model_name)
+            self._comm.on_msg(self._handle_msg)
+            self._comm.on_close(self._close)
+            Widget.widgets[self.model_id] = self
+
+            # first update
+            self.send_state()
+        return self._comm
+    
+    @property
+    def model_id(self):
+        """Gets the model id of this widget.
+
+        If a Comm doesn't exist yet, a Comm will be created automagically."""
+        return self.comm.comm_id
+
+    #-------------------------------------------------------------------------
+    # Methods
+    #-------------------------------------------------------------------------
+    def _close(self):
+        """Private close - cleanup objects, registry entries"""
+        del Widget.widgets[self.model_id]
+        self._comm = None
+        self.closed = True
+
+    def close(self):
+        """Close method.
+
+        Closes the widget which closes the underlying comm.
+        When the comm is closed, all of the widget views are automatically
+        removed from the front-end."""
+        if not self.closed:
+            self._comm.close()
+            self._close()
+
+    def send_state(self, key=None):
+        """Sends the widget state, or a piece of it, to the front-end.
+
+        Parameters
+        ----------
+        key : unicode (optional)
+            A single property's name to sync with the front-end.
+        """
+        self._send({
+            "method" : "update",
+            "state"  : self.get_state()
+        })
+
+    def get_state(self, key=None):
+        """Gets the widget state, or a piece of it.
+
+        Parameters
+        ----------
+        key : unicode (optional)
+            A single property's name to get.
+        """
+        keys = self.keys if key is None else [key]
+        return {k: self._pack_widgets(getattr(self, k)) for k in keys} 
+
+    def send(self, content):
+        """Sends a custom msg to the widget model in the front-end.
+
+        Parameters
+        ----------
+        content : dict
+            Content of the message to send.
+        """
+        self._send({"method": "custom", "content": content})
+
+    def on_msg(self, callback, remove=False):
+        """(Un)Register a custom msg receive callback.
+
+        Parameters
+        ----------
+        callback: callable
+            callback will be passed two arguments when a message arrives:
+                callback(widget, content)
+        remove: bool
+            True if the callback should be unregistered."""
+        self._msg_callbacks.register_callback(callback, remove=remove)
+
+    def on_displayed(self, callback, remove=False):
+        """(Un)Register a widget displayed callback.
+
+        Parameters
+        ----------
+        callback: method handler
+            Must have a signature of:
+                callback(widget, **kwargs)
+            kwargs from display are passed through without modification.
+        remove: bool
+            True if the callback should be unregistered."""
+        self._display_callbacks.register_callback(callback, remove=remove)
+
+    #-------------------------------------------------------------------------
+    # Support methods
+    #-------------------------------------------------------------------------
+    @contextmanager
+    def _lock_property(self, key, value):
+        """Lock a property-value pair.
+
+        NOTE: This, in addition to the single lock for all state changes, is 
+        flawed.  In the future we may want to look into buffering state changes 
+        back to the front-end."""
+        self._property_lock = (key, value)
+        try:
+            yield
+        finally:
+            self._property_lock = (None, None)
+
+    def _should_send_property(self, key, value):
+        """Check the property lock (property_lock)"""
+        return key != self._property_lock[0] or \
+        value != self._property_lock[1]
+    
+    # Event handlers
+    def _handle_msg(self, msg):
+        """Called when a msg is received from the front-end"""
+        data = msg['content']['data']
+        method = data['method']
+        if not method in ['backbone', 'custom']:
+            self.log.error('Unknown front-end to back-end widget msg with method "%s"' % method)
+
+        # Handle backbone sync methods CREATE, PATCH, and UPDATE all in one.
+        if method == 'backbone' and 'sync_data' in data:
+            sync_data = data['sync_data']
+            self._handle_receive_state(sync_data) # handles all methods
+
+        # Handle a custom msg from the front-end
+        elif method == 'custom':
+            if 'content' in data:
+                self._handle_custom_msg(data['content'])
+
+    def _handle_receive_state(self, sync_data):
+        """Called when a state is received from the front-end."""
+        for name in self.keys:
+            if name in sync_data:
+                value = self._unpack_widgets(sync_data[name])
+                with self._lock_property(name, value):
+                    setattr(self, name, value)
+
+    def _handle_custom_msg(self, content):
+        """Called when a custom msg is received."""
+        self._msg_callbacks(self, content)
+
+    def _handle_property_changed(self, name, old, new):
+        """Called when a property has been changed."""
+        # Make sure this isn't information that the front-end just sent us.
+        if self._should_send_property(name, new):
+            # Send new state to front-end
+            self.send_state(key=name)
+
+    def _handle_displayed(self, **kwargs):
+        """Called when a view has been displayed for this widget instance"""
+        self._display_callbacks(self, **kwargs)
+
+    def _pack_widgets(self, x):
+        """Recursively converts all widget instances to model id strings.
+
+        Children widgets will be stored and transmitted to the front-end by 
+        their model ids.  Return value must be JSON-able."""
+        if isinstance(x, dict):
+            return {k: self._pack_widgets(v) for k, v in x.items()}
+        elif isinstance(x, list):
+            return [self._pack_widgets(v) for v in x]
+        elif isinstance(x, Widget):
+            return x.model_id
+        else:
+            return x # Value must be JSON-able
+
+    def _unpack_widgets(self, x):
+        """Recursively converts all model id strings to widget instances.
+
+        Children widgets will be stored and transmitted to the front-end by 
+        their model ids."""
+        if isinstance(x, dict):
+            return {k: self._unpack_widgets(v) for k, v in x.items()}
+        elif isinstance(x, list):
+            return [self._unpack_widgets(v) for v in x]
+        elif isinstance(x, string_types):
+            return x if x not in Widget.widgets else Widget.widgets[x]
+        else:
+            return x
+
+    def _ipython_display_(self, **kwargs):
+        """Called when `IPython.display.display` is called on the widget."""
+        # Show view.  By sending a display message, the comm is opened and the
+        # initial state is sent.
+        self._send({"method": "display"})
+        self._handle_displayed(**kwargs)
+
+    def _send(self, msg):
+        """Sends a message to the model in the front-end."""
+        self.comm.send(msg)
+
+
+class DOMWidget(Widget):
+    visible = Bool(True, help="Whether the widget is visible.", sync=True)
+    _css = Dict(sync=True) # Internal CSS property dict
+
+    def get_css(self, key, selector=""):
+        """Get a CSS property of the widget.
+
+        Note: This function does not actually request the CSS from the 
+        front-end;  Only properties that have been set with set_css can be read.
+
+        Parameters
+        ----------
+        key: unicode
+            CSS key
+        selector: unicode (optional)
+            JQuery selector used when the CSS key/value was set.
+        """
+        if selector in self._css and key in self._css[selector]:
+            return self._css[selector][key]
+        else:
+            return None
+
+    def set_css(self, dict_or_key, value=None, selector=''):
+        """Set one or more CSS properties of the widget.
+
+        This function has two signatures:
+        - set_css(css_dict, selector='')
+        - set_css(key, value, selector='')
+
+        Parameters
+        ----------
+        css_dict : dict
+            CSS key/value pairs to apply
+        key: unicode
+            CSS key
+        value:
+            CSS value
+        selector: unicode (optional, kwarg only)
+            JQuery selector to use to apply the CSS key/value.  If no selector 
+            is provided, an empty selector is used.  An empty selector makes the 
+            front-end try to apply the css to a default element.  The default
+            element is an attribute unique to each view, which is a DOM element
+            of the view that should be styled with common CSS (see 
+            `$el_to_style` in the Javascript code).
+        """
+        if not selector in self._css:
+            self._css[selector] = {}
+        my_css = self._css[selector]
+        
+        if value is None:
+            css_dict = dict_or_key
+        else:
+            css_dict = {dict_or_key: value}
+        
+        for (key, value) in css_dict.items():
+            if not (key in my_css and value == my_css[key]):
+                my_css[key] = value
+        self.send_state('_css')
+
+    def add_class(self, class_names, selector=""):
+        """Add class[es] to a DOM element.
+
+        Parameters
+        ----------
+        class_names: unicode or list
+            Class name(s) to add to the DOM element(s).
+        selector: unicode (optional)
+            JQuery selector to select the DOM element(s) that the class(es) will
+            be added to.
+        """
+        class_list = class_names
+        if isinstance(class_list, list):
+            class_list = ' '.join(class_list)
+
+        self.send({
+            "msg_type"   : "add_class",
+            "class_list" : class_list,
+            "selector"   : selector
+        })
+
+    def remove_class(self, class_names, selector=""):
+        """Remove class[es] from a DOM element.
+
+        Parameters
+        ----------
+        class_names: unicode or list
+            Class name(s) to remove from  the DOM element(s).
+        selector: unicode (optional)
+            JQuery selector to select the DOM element(s) that the class(es) will
+            be removed from.
+        """
+        class_list = class_names
+        if isinstance(class_list, list):
+            class_list = ' '.join(class_list)
+
+        self.send({
+            "msg_type"   : "remove_class",
+            "class_list" : class_list,
+            "selector"   : selector,
+        })

IPython/html/widgets/widget_bool.py

@@ -0,0 +1,34 b''
+"""BoolWidget class.  
+
+Represents a boolean using a widget.
+"""
+#-----------------------------------------------------------------------------
+# Copyright (c) 2013, the IPython Development Team.
+#
+# Distributed under the terms of the Modified BSD License.
+#
+# The full license is in the file COPYING.txt, distributed with this software.
+#-----------------------------------------------------------------------------
+
+#-----------------------------------------------------------------------------
+# Imports
+#-----------------------------------------------------------------------------
+from .widget import DOMWidget
+from IPython.utils.traitlets import Unicode, Bool, List
+
+#-----------------------------------------------------------------------------
+# Classes
+#-----------------------------------------------------------------------------
+class _BoolWidget(DOMWidget):
+    value = Bool(False, help="Bool value", sync=True)
+    description = Unicode('', help="Description of the boolean (label).", sync=True) 
+    disabled = Bool(False, help="Enable or disable user changes.", sync=True)
+
+
+class CheckboxWidget(_BoolWidget):
+    _view_name = Unicode('CheckboxView', sync=True)
+
+
+class ToggleButtonWidget(_BoolWidget):
+    _view_name = Unicode('ToggleButtonView', sync=True)
+    
  No newline at end of file

IPython/html/widgets/widget_button.py

@@ -0,0 +1,56 b''
+"""ButtonWidget class.  
+
+Represents a button in the frontend using a widget.  Allows user to listen for
+click events on the button and trigger backend code when the clicks are fired.
+"""
+#-----------------------------------------------------------------------------
+# Copyright (c) 2013, the IPython Development Team.
+#
+# Distributed under the terms of the Modified BSD License.
+#
+# The full license is in the file COPYING.txt, distributed with this software.
+#-----------------------------------------------------------------------------
+
+#-----------------------------------------------------------------------------
+# Imports
+#-----------------------------------------------------------------------------
+from .widget import DOMWidget, CallbackDispatcher
+from IPython.utils.traitlets import Unicode, Bool
+
+#-----------------------------------------------------------------------------
+# Classes
+#-----------------------------------------------------------------------------
+class ButtonWidget(DOMWidget):
+    _view_name = Unicode('ButtonView', sync=True)
+
+    # Keys
+    description = Unicode('', help="Description of the button (label).", sync=True)
+    disabled = Bool(False, help="Enable or disable user changes.", sync=True)
+    
+    def __init__(self, **kwargs):
+        """Constructor"""
+        super(ButtonWidget, self).__init__(**kwargs)
+        self._click_handlers = CallbackDispatcher()
+        self.on_msg(self._handle_button_msg)
+
+    def on_click(self, callback, remove=False):
+        """Register a callback to execute when the button is clicked.
+
+        The callback will be called with one argument,
+        the clicked button widget instance.
+
+        Parameters
+        ----------
+        remove : bool (optional)
+            Set to true to remove the callback from the list of callbacks."""
+        self._click_handlers.register_callback(callback, remove=remove)
+
+    def _handle_button_msg(self, _, content):
+        """Handle a msg from the front-end.
+
+        Parameters
+        ----------
+        content: dict
+            Content of the msg."""
+        if content.get('event', '') == 'click':
+            self._click_handlers(self)

IPython/html/widgets/widget_container.py

@@ -0,0 +1,51 b''
+"""ContainerWidget class.  
+
+Represents a container that can be used to group other widgets.
+"""
+#-----------------------------------------------------------------------------
+# Copyright (c) 2013, the IPython Development Team.
+#
+# Distributed under the terms of the Modified BSD License.
+#
+# The full license is in the file COPYING.txt, distributed with this software.
+#-----------------------------------------------------------------------------
+
+#-----------------------------------------------------------------------------
+# Imports
+#-----------------------------------------------------------------------------
+from .widget import DOMWidget
+from IPython.utils.traitlets import Unicode, Bool, List, Instance
+
+#-----------------------------------------------------------------------------
+# Classes
+#-----------------------------------------------------------------------------
+class ContainerWidget(DOMWidget):
+    _view_name = Unicode('ContainerView', sync=True)
+
+    # Keys, all private and managed by helper methods.  Flexible box model
+    # classes...
+    children = List(Instance(DOMWidget))
+    _children = List(Instance(DOMWidget), sync=True)
+
+    def _children_changed(self, name, old, new):
+        """Validate children list.
+
+        Makes sure only one instance of any given model can exist in the 
+        children list.
+        An excellent post on uniqifiers is available at 
+            http://www.peterbe.com/plog/uniqifiers-benchmark
+        which provides the inspiration for using this implementation.  Below
+        I've implemented the `f5` algorithm using Python comprehensions."""
+        if new is not None and isinstance(new, list):
+            seen = {}
+            def add_item(i):
+                seen[i.model_id] = True
+                return i
+            self._children = [add_item(i) for i in new if not i.model_id in seen]
+
+
+class PopupWidget(ContainerWidget):
+    _view_name = Unicode('PopupView', sync=True)
+    
+    description = Unicode(sync=True)
+    button_text = Unicode(sync=True)

IPython/html/widgets/widget_float.py

@@ -0,0 +1,59 b''
+"""FloatWidget class.  
+
+Represents an unbounded float using a widget.
+"""
+#-----------------------------------------------------------------------------
+# Copyright (c) 2013, the IPython Development Team.
+#
+# Distributed under the terms of the Modified BSD License.
+#
+# The full license is in the file COPYING.txt, distributed with this software.
+#-----------------------------------------------------------------------------
+
+#-----------------------------------------------------------------------------
+# Imports
+#-----------------------------------------------------------------------------
+from .widget import DOMWidget
+from IPython.utils.traitlets import Unicode, CFloat, Bool, List, Enum
+
+#-----------------------------------------------------------------------------
+# Classes
+#-----------------------------------------------------------------------------
+class _FloatWidget(DOMWidget):
+    value = CFloat(0.0, help="Float value", sync=True) 
+    disabled = Bool(False, help="Enable or disable user changes", sync=True)
+    description = Unicode(help="Description of the value this widget represents", sync=True)
+
+
+class _BoundedFloatWidget(_FloatWidget):
+    max = CFloat(100.0, help="Max value", sync=True)
+    min = CFloat(0.0, help="Min value", sync=True)
+    step = CFloat(0.1, help="Minimum step that the value can take (ignored by some views)", sync=True)
+
+    def __init__(self, *pargs, **kwargs):
+        """Constructor"""
+        DOMWidget.__init__(self, *pargs, **kwargs)
+        self.on_trait_change(self._validate, ['value', 'min', 'max'])
+
+    def _validate(self, name, old, new):
+        """Validate value, max, min."""
+        if self.min > new or new > self.max:
+            self.value = min(max(new, self.min), self.max)
+
+
+class FloatTextWidget(_FloatWidget):
+    _view_name = Unicode('FloatTextView', sync=True)
+
+
+class BoundedFloatTextWidget(_BoundedFloatWidget):
+    _view_name = Unicode('FloatTextView', sync=True)
+
+
+class FloatSliderWidget(_BoundedFloatWidget):
+    _view_name = Unicode('FloatSliderView', sync=True)
+    orientation = Enum([u'horizontal', u'vertical'], u'horizontal', 
+        help="Vertical or horizontal.", sync=True)
+
+
+class FloatProgressWidget(_BoundedFloatWidget):
+    _view_name = Unicode('ProgressView', sync=True)

IPython/html/widgets/widget_image.py

@@ -0,0 +1,36 b''
+"""ButtonWidget class.  
+
+Represents a button in the frontend using a widget.  Allows user to listen for
+click events on the button and trigger backend code when the clicks are fired.
+"""
+#-----------------------------------------------------------------------------
+# Copyright (c) 2013, the IPython Development Team.
+#
+# Distributed under the terms of the Modified BSD License.
+#
+# The full license is in the file COPYING.txt, distributed with this software.
+#-----------------------------------------------------------------------------
+
+#-----------------------------------------------------------------------------
+# Imports
+#-----------------------------------------------------------------------------
+import base64
+
+from .widget import DOMWidget
+from IPython.utils.traitlets import Unicode, CUnicode, Bytes
+
+#-----------------------------------------------------------------------------
+# Classes
+#-----------------------------------------------------------------------------
+class ImageWidget(DOMWidget):
+    _view_name = Unicode('ImageView', sync=True)
+    
+    # Define the custom state properties to sync with the front-end
+    format = Unicode('png', sync=True)
+    width = CUnicode(sync=True)
+    height = CUnicode(sync=True)
+    _b64value = Unicode(sync=True)
+    
+    value = Bytes()
+    def _value_changed(self, name, old, new):
+        self._b64value = base64.b64encode(new)
  No newline at end of file

IPython/html/widgets/widget_int.py

@@ -0,0 +1,59 b''
+"""IntWidget class.  
+
+Represents an unbounded int using a widget.
+"""
+#-----------------------------------------------------------------------------
+# Copyright (c) 2013, the IPython Development Team.
+#
+# Distributed under the terms of the Modified BSD License.
+#
+# The full license is in the file COPYING.txt, distributed with this software.
+#-----------------------------------------------------------------------------
+
+#-----------------------------------------------------------------------------
+# Imports
+#-----------------------------------------------------------------------------
+from .widget import DOMWidget
+from IPython.utils.traitlets import Unicode, CInt, Bool, List, Enum
+
+#-----------------------------------------------------------------------------
+# Classes
+#-----------------------------------------------------------------------------
+class _IntWidget(DOMWidget):
+    value = CInt(0, help="Int value", sync=True) 
+    disabled = Bool(False, help="Enable or disable user changes", sync=True)
+    description = Unicode(help="Description of the value this widget represents", sync=True)
+
+
+class _BoundedIntWidget(_IntWidget):
+    step = CInt(1, help="Minimum step that the value can take (ignored by some views)", sync=True)
+    max = CInt(100, help="Max value", sync=True)
+    min = CInt(0, help="Min value", sync=True)
+
+    def __init__(self, *pargs, **kwargs):
+        """Constructor"""
+        DOMWidget.__init__(self, *pargs, **kwargs)
+        self.on_trait_change(self._validate, ['value', 'min', 'max'])
+
+    def _validate(self, name, old, new):
+        """Validate value, max, min."""
+        if self.min > new or new > self.max:
+            self.value = min(max(new, self.min), self.max)
+
+
+class IntTextWidget(_IntWidget):
+    _view_name = Unicode('IntTextView', sync=True)
+
+
+class BoundedIntTextWidget(_BoundedIntWidget):
+    _view_name = Unicode('IntTextView', sync=True)
+
+
+class IntSliderWidget(_BoundedIntWidget):
+    _view_name = Unicode('IntSliderView', sync=True)
+    orientation = Enum([u'horizontal', u'vertical'], u'horizontal', 
+        help="Vertical or horizontal.", sync=True)
+
+
+class IntProgressWidget(_BoundedIntWidget):
+    _view_name = Unicode('ProgressView', sync=True)

IPython/html/widgets/widget_selection.py

@@ -0,0 +1,95 b''
+"""SelectionWidget class.  
+
+Represents an enumeration using a widget.
+"""
+#-----------------------------------------------------------------------------
+# Copyright (c) 2013, the IPython Development Team.
+#
+# Distributed under the terms of the Modified BSD License.
+#
+# The full license is in the file COPYING.txt, distributed with this software.
+#-----------------------------------------------------------------------------
+
+#-----------------------------------------------------------------------------
+# Imports
+#-----------------------------------------------------------------------------
+from threading import Lock
+
+from .widget import DOMWidget
+from IPython.utils.traitlets import Unicode, List, Bool, Any, Dict
+
+#-----------------------------------------------------------------------------
+# SelectionWidget
+#-----------------------------------------------------------------------------
+class _SelectionWidget(DOMWidget):
+    value = Any(help="Selected value") 
+    values = List(help="List of values the user can select")
+    labels = List(help="""List of string representations for each value.  
+        These string representations are used to display the values in the
+        front-end.""", sync=True) # Only synced to the back-end.
+    disabled = Bool(False, help="Enable or disable user changes", sync=True)
+    description = Unicode(help="Description of the value this widget represents", sync=True)
+
+    _value = Unicode(sync=True) # Bi-directionally synced.
+
+    def __init__(self, *pargs, **kwargs):
+        """Constructor"""
+        self.value_lock = Lock()
+        self.on_trait_change(self._string_value_set, ['_value'])
+        DOMWidget.__init__(self, *pargs, **kwargs)
+
+    def _labels_changed(self, name=None, old=None, new=None):
+        """Handles when the value_names Dict has been changed.
+
+        This method sets the _reverse_value_names Dict to the inverse of the new
+        value for the value_names Dict."""
+        if len(new) != len(self.values):
+            raise TypeError('Labels list must be the same size as the values list.')
+
+    def _values_changed(self, name=None, old=None, new=None):
+        """Handles when the value_names Dict has been changed.
+
+        This method sets the _reverse_value_names Dict to the inverse of the new
+        value for the value_names Dict."""
+        if len(new) != len(self.labels):
+            self.labels = [(self.labels[i] if i < len(self.labels) else str(v)) for i, v in enumerate(new)]
+
+    def _value_changed(self, name, old, new):
+        """Called when value has been changed"""
+        if self.value_lock.acquire(False):
+            try:
+                # Make sure the value is in the list of values.
+                if new in self.values:
+                    # Set the string version of the value.
+                    self._value = self.labels[self.values.index(new)]
+                else:
+                    raise TypeError('Value must be a value in the values list.')
+            finally:
+                self.value_lock.release()
+
+    def _string_value_set(self, name, old, new):
+        """Called when _value has been changed."""
+        if self.value_lock.acquire(False):
+            try:
+                if new in self.labels:
+                    self.value = self.values[self.labels.index(new)]
+                else:
+                    self.value = None
+            finally:
+                self.value_lock.release()
+
+
+class ToggleButtonsWidget(_SelectionWidget):
+    _view_name = Unicode('ToggleButtonsView', sync=True)
+
+
+class DropdownWidget(_SelectionWidget):
+    _view_name = Unicode('DropdownView', sync=True)
+
+
+class RadioButtonsWidget(_SelectionWidget):
+    _view_name = Unicode('RadioButtonsView', sync=True)
+    
+
+class SelectWidget(_SelectionWidget):
+    _view_name = Unicode('SelectView', sync=True)

IPython/html/widgets/widget_selectioncontainer.py

@@ -0,0 +1,58 b''
+"""SelectionContainerWidget class.  
+
+Represents a multipage container that can be used to group other widgets into
+pages.
+"""
+#-----------------------------------------------------------------------------
+# Copyright (c) 2013, the IPython Development Team.
+#
+# Distributed under the terms of the Modified BSD License.
+#
+# The full license is in the file COPYING.txt, distributed with this software.
+#-----------------------------------------------------------------------------
+
+#-----------------------------------------------------------------------------
+# Imports
+#-----------------------------------------------------------------------------
+from .widget_container import ContainerWidget
+from IPython.utils.traitlets import Unicode, Dict, CInt, List, Instance
+
+#-----------------------------------------------------------------------------
+# Classes
+#-----------------------------------------------------------------------------
+class _SelectionContainerWidget(ContainerWidget):
+    _titles = Dict(help="Titles of the pages", sync=True)
+    selected_index = CInt(0, sync=True)
+
+    # Public methods
+    def set_title(self, index, title):
+        """Sets the title of a container page.
+
+        Parameters
+        ----------
+        index : int
+            Index of the container page
+        title : unicode
+            New title"""
+        self._titles[index] = title
+        self.send_state('_titles')
+
+    def get_title(self, index):
+        """Gets the title of a container pages.
+
+        Parameters
+        ----------
+        index : int
+            Index of the container page"""
+        if index in self._titles:
+            return self._titles[index]
+        else:
+            return None
+
+
+class AccordionWidget(_SelectionContainerWidget):
+    _view_name = Unicode('AccordionView', sync=True)
+
+
+class TabWidget(_SelectionContainerWidget):
+    _view_name = Unicode('TabView', sync=True)

IPython/html/widgets/widget_string.py

@@ -0,0 +1,72 b''
+"""StringWidget class.  
+
+Represents a unicode string using a widget.
+"""
+#-----------------------------------------------------------------------------
+# Copyright (c) 2013, the IPython Development Team.
+#
+# Distributed under the terms of the Modified BSD License.
+#
+# The full license is in the file COPYING.txt, distributed with this software.
+#-----------------------------------------------------------------------------
+
+#-----------------------------------------------------------------------------
+# Imports
+#-----------------------------------------------------------------------------
+from .widget import DOMWidget, CallbackDispatcher
+from IPython.utils.traitlets import Unicode, Bool, List
+
+#-----------------------------------------------------------------------------
+# Classes
+#-----------------------------------------------------------------------------
+class _StringWidget(DOMWidget):
+    value = Unicode(help="String value", sync=True)
+    disabled = Bool(False, help="Enable or disable user changes", sync=True)
+    description = Unicode(help="Description of the value this widget represents", sync=True)
+
+
+class HTMLWidget(_StringWidget):
+    _view_name = Unicode('HTMLView', sync=True)
+
+
+class LatexWidget(_StringWidget):
+    _view_name = Unicode('LatexView', sync=True)
+
+
+class TextareaWidget(_StringWidget):
+    _view_name = Unicode('TextareaView', sync=True)
+
+    def scroll_to_bottom(self):
+        self.send({"method": "scroll_to_bottom"})
+
+
+class TextWidget(_StringWidget):
+    _view_name = Unicode('TextView', sync=True)
+
+    def __init__(self, **kwargs):
+        super(TextWidget, self).__init__(**kwargs)
+        self._submission_callbacks = CallbackDispatcher()
+        self.on_msg(self._handle_string_msg)
+
+    def _handle_string_msg(self, _, content):
+        """Handle a msg from the front-end.
+
+        Parameters
+        ----------
+        content: dict
+            Content of the msg."""
+        if content.get('event', '') == 'submit':
+            self._submission_callbacks(self)
+
+    def on_submit(self, callback, remove=False):
+        """(Un)Register a callback to handle text submission.
+
+        Triggered when the user clicks enter.
+
+        Parameters
+        ----------
+        callback: callable
+            Will be called with exactly one argument: the Widget instance
+        remove: bool (optional)
+            Whether to unregister the callback"""
+        self._submission_callbacks.register_callback(callback, remove=remove)

docs/source/whatsnew/pr/widgets.rst

@@ -0,0 +1,25 b''
+Notebook Widgets
+----------------
+
+Available in the new `IPython.html.widgets` namespace, widgets provide an easy
+way for IPython notebook users to display GUI controls in the IPython notebook.
+IPython comes with bundle of built-in widgets and also the ability for users
+to define their own widgets.  A widget is displayed in the front-end using
+using a view.  For example, a FloatRangeWidget can be displayed using a
+FloatSliderView (which is the default if no view is specified when displaying
+the widget).  IPython also comes with a bundle of views and the ability for the
+user to define custom views.  One widget can be displayed multiple times, in on
+or more cells, using one or more views.  All views will automatically remain in
+sync with the widget which is accessible in the back-end.
+
+The widget layer provides an MVC-like architecture on top of the comm layer. 
+It's useful for widgets that can be expressed via a list of properties. 
+Widgets work by synchronizing IPython traitlet models in the back-end with 
+backbone models in the front-end. The widget layer automatically handles
+
+* delta compression (only sending the state information that has changed)
+* wiring the message callbacks to the correct cells automatically
+* inter-view synchronization (handled by backbone)
+* message throttling (to avoid flooding the kernel)
+* parent/child relationships between views (which one can override to specify custom parent/child relationships)
+* ability to manipulate the widget view's DOM from python using CSS, $().addClass, and $().removeClass methods

examples/widgets/Export As (nbconvert).ipynb

@@ -0,0 +1,186 b''
+{
+ "metadata": {
+  "name": ""
+ },
+ "nbformat": 3,
+ "nbformat_minor": 0,
+ "worksheets": [
+  {
+   "cells": [
+    {
+     "cell_type": "code",
+     "collapsed": false,
+     "input": [
+      "# Widget related imports\n",
+      "from IPython.html import widgets\n",
+      "from IPython.display import display, clear_output, Javascript\n",
+      "from IPython.utils.traitlets import Unicode\n",
+      "\n",
+      "# nbconvert related imports\n",
+      "from IPython.nbconvert import get_export_names, export_by_name\n",
+      "from IPython.nbconvert.writers import FilesWriter\n",
+      "from IPython.nbformat import current"
+     ],
+     "language": "python",
+     "metadata": {},
+     "outputs": [],
+     "prompt_number": 1
+    },
+    {
+     "cell_type": "markdown",
+     "metadata": {},
+     "source": [
+      "Create a text Widget without displaying it.  The widget will be used to store the notebook's name which is otherwise only available in the front-end."
+     ]
+    },
+    {
+     "cell_type": "code",
+     "collapsed": false,
+     "input": [
+      "notebook_name = widgets.TextWidget()"
+     ],
+     "language": "python",
+     "metadata": {},
+     "outputs": [],
+     "prompt_number": 2
+    },
+    {
+     "cell_type": "markdown",
+     "metadata": {},
+     "source": [
+      "Get the current notebook's name by pushing JavaScript to the browser that sets the notebook name in a string widget."
+     ]
+    },
+    {
+     "cell_type": "code",
+     "collapsed": false,
+     "input": [
+      "js = \"\"\"var model = IPython.notebook.kernel.widget_manager.get_model('{model_id}');\n",
+      "model.set('value', IPython.notebook.notebook_name);\n",
+      "model.save();\"\"\".format(model_id=notebook_name.model_id)\n",
+      "display(Javascript(data=js))"
+     ],
+     "language": "python",
+     "metadata": {},
+     "outputs": [
+      {
+       "javascript": [
+        "var model = IPython.notebook.kernel.widget_manager.get_model('8c6583524eb3422c99491730a3e1ce6c');\n",
+        "model.set('value', IPython.notebook.notebook_name);\n",
+        "model.save();"
+       ],
+       "metadata": {},
+       "output_type": "display_data",
+       "text": [
+        "<IPython.core.display.Javascript at 0x164ea50>"
+       ]
+      }
+     ],
+     "prompt_number": 3
+    },
+    {
+     "cell_type": "code",
+     "collapsed": false,
+     "input": [
+      "filename = notebook_name.value\n",
+      "filename"
+     ],
+     "language": "python",
+     "metadata": {},
+     "outputs": [
+      {
+       "metadata": {},
+       "output_type": "pyout",
+       "prompt_number": 4,
+       "text": [
+        "u'Export As (nbconvert).ipynb'"
+       ]
+      }
+     ],
+     "prompt_number": 4
+    },
+    {
+     "cell_type": "markdown",
+     "metadata": {},
+     "source": [
+      "Create the widget that will allow the user to Export the current notebook."
+     ]
+    },
+    {
+     "cell_type": "code",
+     "collapsed": false,
+     "input": [
+      "exporter_names = widgets.DropdownWidget(values=get_export_names(), value='html')\n",
+      "export_button = widgets.ButtonWidget(description=\"Export\")\n",
+      "download_link = widgets.HTMLWidget(visible=False)"
+     ],
+     "language": "python",
+     "metadata": {},
+     "outputs": [],
+     "prompt_number": 5
+    },
+    {
+     "cell_type": "markdown",
+     "metadata": {},
+     "source": [
+      "Export the notebook when the export button is clicked."
+     ]
+    },
+    {
+     "cell_type": "code",
+     "collapsed": false,
+     "input": [
+      "file_writer = FilesWriter()\n",
+      "\n",
+      "def export(name, nb):\n",
+      "    \n",
+      "    # Get a unique key for the notebook and set it in the resources object.\n",
+      "    notebook_name = name[:name.rfind('.')]\n",
+      "    resources = {}\n",
+      "    resources['unique_key'] = notebook_name\n",
+      "    resources['output_files_dir'] = '%s_files' % notebook_name\n",
+      "\n",
+      "    # Try to export\n",
+      "    try:\n",
+      "        output, resources = export_by_name(exporter_names.value, nb)\n",
+      "    except ConversionException as e:\n",
+      "        download_link.value = \"<br>Could not export notebook!\"\n",
+      "    else:\n",
+      "        write_results = file_writer.write(output, resources, notebook_name=notebook_name)\n",
+      "    \n",
+      "        download_link.value = \"<br>Results: <a href='files/{filename}'><i>\\\"{filename}\\\"</i></a>\".format(filename=write_results)\n",
+      "        download_link.visible = True\n",
+      "        \n",
+      "def handle_export():\n",
+      "    with open(filename, 'r') as f:\n",
+      "        export(filename, current.read(f, 'json'))\n",
+      "export_button.on_click(handle_export)"
+     ],
+     "language": "python",
+     "metadata": {},
+     "outputs": [],
+     "prompt_number": 6
+    },
+    {
+     "cell_type": "markdown",
+     "metadata": {},
+     "source": [
+      "Display the controls."
+     ]
+    },
+    {
+     "cell_type": "code",
+     "collapsed": false,
+     "input": [
+      "display(exporter_names, export_button, download_link)"
+     ],
+     "language": "python",
+     "metadata": {},
+     "outputs": [],
+     "prompt_number": 7
+    }
+   ],
+   "metadata": {}
+  }
+ ]
+}
  No newline at end of file

examples/widgets/File Upload Widget.ipynb

@@ -0,0 +1,248 b''
+{
+ "metadata": {
+  "cell_tags": [
+   [
+    "<None>",
+    null
+   ]
+  ],
+  "name": ""
+ },
+ "nbformat": 3,
+ "nbformat_minor": 0,
+ "worksheets": [
+  {
+   "cells": [
+    {
+     "cell_type": "code",
+     "collapsed": false,
+     "input": [
+      "import base64\n",
+      "from __future__ import print_function # py 2.7 compat.\n",
+      "from IPython.html import widgets # Widget definitions.\n",
+      "from IPython.utils.traitlets import Unicode # Traitlet needed to add synced attributes to the widget."
+     ],
+     "language": "python",
+     "metadata": {},
+     "outputs": [],
+     "prompt_number": 1
+    },
+    {
+     "cell_type": "markdown",
+     "metadata": {},
+     "source": [
+      "This is a custom widget that allows the user to upload file data to the notebook server.  The file data is sent via a statefull `value` attribute of the widget.  The widget has an upload failed event that fires in the front-end and is echoed to the back-end using a custom msg."
+     ]
+    },
+    {
+     "cell_type": "code",
+     "collapsed": false,
+     "input": [
+      "class FileWidget(widgets.DOMWidget):\n",
+      "    _view_name = Unicode('FilePickerView', sync=True)\n",
+      "    value = Unicode(sync=True)\n",
+      "    filename = Unicode(sync=True)\n",
+      "    \n",
+      "    def __init__(self, **kwargs):\n",
+      "        \"\"\"Constructor\"\"\"\n",
+      "        widgets.DOMWidget.__init__(self, **kwargs) # Call the base.\n",
+      "        \n",
+      "        # Allow the user to register error callbacks with the following signatures:\n",
+      "        #    callback()\n",
+      "        #    callback(sender)\n",
+      "        self.errors = widgets.CallbackDispatcher(accepted_nargs=[0, 1])\n",
+      "        \n",
+      "        # Listen for custom msgs\n",
+      "        self.on_msg(self._handle_custom_msg)\n",
+      "\n",
+      "    def _handle_custom_msg(self, content):\n",
+      "        \"\"\"Handle a msg from the front-end.\n",
+      "\n",
+      "        Parameters\n",
+      "        ----------\n",
+      "        content: dict\n",
+      "            Content of the msg.\"\"\"\n",
+      "        if 'event' in content and content['event'] == 'error':\n",
+      "            self.errors()\n",
+      "            self.errors(self)\n",
+      "    "
+     ],
+     "language": "python",
+     "metadata": {},
+     "outputs": [],
+     "prompt_number": 2
+    },
+    {
+     "cell_type": "code",
+     "collapsed": false,
+     "input": [
+      "%%javascript\n",
+      "\n",
+      "require([\"notebook/js/widgets/widget\"], function(WidgetManager){\n",
+      "\n",
+      "    var FilePickerView = IPython.WidgetView.extend({\n",
+      "        render: function(){\n",
+      "            // Render the view.\n",
+      "            this.setElement($('<input />')\n",
+      "                .attr('type', 'file'));\n",
+      "        },\n",
+      "        \n",
+      "        events: {\n",
+      "            // List of events and their handlers.\n",
+      "            'change': 'handle_file_change',\n",
+      "        },\n",
+      "       \n",
+      "        handle_file_change: function(evt) { \n",
+      "            // Handle when the user has changed the file.\n",
+      "            \n",
+      "            // Retrieve the first (and only!) File from the FileList object\n",
+      "            var file = evt.target.files[0];\n",
+      "            if (file) {\n",
+      "\n",
+      "                // Read the file's textual content and set value to those contents.\n",
+      "                var that = this;\n",
+      "                var file_reader = new FileReader();\n",
+      "                file_reader.onload = function(e) {\n",
+      "                    that.model.set('value', e.target.result);\n",
+      "                    that.touch();\n",
+      "                }\n",
+      "                file_reader.readAsText(file);\n",
+      "            } else {\n",
+      "\n",
+      "                // The file couldn't be opened.  Send an error msg to the\n",
+      "                // back-end.\n",
+      "                this.send({ 'event': 'error' });\n",
+      "            }\n",
+      "\n",
+      "            // Set the filename of the file.\n",
+      "            this.model.set('filename', file.name);\n",
+      "            this.touch();\n",
+      "        },\n",
+      "    });\n",
+      "        \n",
+      "    // Register the DatePickerView with the widget manager.\n",
+      "    WidgetManager.register_widget_view('FilePickerView', FilePickerView);\n",
+      "});"
+     ],
+     "language": "python",
+     "metadata": {},
+     "outputs": [
+      {
+       "javascript": [
+        "\n",
+        "require([\"notebook/js/widgets/widget\"], function(WidgetManager){\n",
+        "\n",
+        "    var FilePickerView = IPython.WidgetView.extend({\n",
+        "        render: function(){\n",
+        "            // Render the view.\n",
+        "            this.setElement($('<input />')\n",
+        "                .attr('type', 'file'));\n",
+        "        },\n",
+        "        \n",
+        "        events: {\n",
+        "            // List of events and their handlers.\n",
+        "            'change': 'handle_file_change',\n",
+        "        },\n",
+        "       \n",
+        "        handle_file_change: function(evt) { \n",
+        "            // Handle when the user has changed the file.\n",
+        "            \n",
+        "            // Retrieve the first (and only!) File from the FileList object\n",
+        "            var file = evt.target.files[0];\n",
+        "            if (file) {\n",
+        "\n",
+        "                // Read the file's textual content and set value to those contents.\n",
+        "                var that = this;\n",
+        "                var file_reader = new FileReader();\n",
+        "                file_reader.onload = function(e) {\n",
+        "                    that.model.set('value', e.target.result);\n",
+        "                    that.touch();\n",
+        "                }\n",
+        "                file_reader.readAsText(file);\n",
+        "            } else {\n",
+        "\n",
+        "                // The file couldn't be opened.  Send an error msg to the\n",
+        "                // back-end.\n",
+        "                this.send({ 'event': 'error' });\n",
+        "            }\n",
+        "\n",
+        "            // Set the filename of the file.\n",
+        "            this.model.set('filename', file.name);\n",
+        "            this.touch();\n",
+        "        },\n",
+        "    });\n",
+        "        \n",
+        "    // Register the DatePickerView with the widget manager.\n",
+        "    WidgetManager.register_widget_view('FilePickerView', FilePickerView);\n",
+        "});"
+       ],
+       "metadata": {},
+       "output_type": "display_data",
+       "text": [
+        "<IPython.core.display.Javascript at 0x36df2d0>"
+       ]
+      }
+     ],
+     "prompt_number": 3
+    },
+    {
+     "cell_type": "markdown",
+     "metadata": {},
+     "source": [
+      "The following shows how the file widget can be used."
+     ]
+    },
+    {
+     "cell_type": "code",
+     "collapsed": false,
+     "input": [
+      "file_widget = FileWidget()\n",
+      "\n",
+      "# Register an event to echo the filename when it has been changed.\n",
+      "def file_loading():\n",
+      "    print(\"Loading %s\" % file_widget.filename)\n",
+      "file_widget.on_trait_change(file_loading, 'filename')\n",
+      "\n",
+      "# Register an event to echo the filename and contents when a file\n",
+      "# has been uploaded.\n",
+      "def file_loaded():\n",
+      "    print(\"Loaded, file contents: %s\" % file_widget.value)\n",
+      "file_widget.on_trait_change(file_loaded, 'value')\n",
+      "\n",
+      "# Register an event to print an error message when a file could not\n",
+      "# be opened.  Since the error messages are not handled through\n",
+      "# traitlets but instead handled through custom msgs, the registration\n",
+      "# of the handler is different than the two examples above.  Instead\n",
+      "# the API provided by the CallbackDispatcher must be used.\n",
+      "def file_failed():\n",
+      "    print(\"Could not load file contents of %s\" % file_widget.filename)\n",
+      "file_widget.errors.register_callback(file_failed)\n",
+      "\n",
+      "file_widget"
+     ],
+     "language": "python",
+     "metadata": {},
+     "outputs": [
+      {
+       "output_type": "stream",
+       "stream": "stdout",
+       "text": [
+        "Loading test.txt\n"
+       ]
+      },
+      {
+       "output_type": "stream",
+       "stream": "stdout",
+       "text": [
+        "Loaded, file contents: Hello World!\n",
+        "\n"
+       ]
+      }
+     ],
+     "prompt_number": 4
+    }
+   ],
+   "metadata": {}
+  }
+ ]
+}
  No newline at end of file

examples/widgets/Nonblocking Console.ipynb

@@ -0,0 +1,227 b''
+{
+ "metadata": {
+  "name": ""
+ },
+ "nbformat": 3,
+ "nbformat_minor": 0,
+ "worksheets": [
+  {
+   "cells": [
+    {
+     "cell_type": "code",
+     "collapsed": false,
+     "input": [
+      "# Console related imports.\n",
+      "from subprocess import Popen, PIPE\n",
+      "import fcntl\n",
+      "import os\n",
+      "from IPython.utils.py3compat import bytes_to_str, string_types\n",
+      "\n",
+      "# Widget related imports.\n",
+      "from IPython.html import  widgets\n",
+      "from IPython.display import display"
+     ],
+     "language": "python",
+     "metadata": {},
+     "outputs": [],
+     "prompt_number": 1
+    },
+    {
+     "cell_type": "markdown",
+     "metadata": {},
+     "source": [
+      "Define function to run a process without blocking the input."
+     ]
+    },
+    {
+     "cell_type": "code",
+     "collapsed": false,
+     "input": [
+      "def read_process(process, append_output):\n",
+      "    \"\"\" Try to read the stdout and stderr of a process and render it using \n",
+      "    the append_output method provided\n",
+      "    \n",
+      "    Parameters\n",
+      "    ----------\n",
+      "    process: Popen handle\n",
+      "    append_output: method handle\n",
+      "        Callback to render output.  Signature of\n",
+      "        append_output(output, [prefix=])\"\"\"\n",
+      "    \n",
+      "    try:\n",
+      "        stdout = process.stdout.read()\n",
+      "        if stdout is not None and len(stdout) > 0:\n",
+      "            append_output(stdout, prefix='    ')\n",
+      "    except:\n",
+      "        pass\n",
+      "        \n",
+      "    try:\n",
+      "        stderr = process.stderr.read()\n",
+      "        if stderr is not None and len(stderr) > 0:\n",
+      "            append_output(stderr, prefix='ERR ')\n",
+      "    except:\n",
+      "        pass\n",
+      "\n",
+      "\n",
+      "def set_pipe_nonblocking(pipe):\n",
+      "    \"\"\"Set a pipe as non-blocking\"\"\"\n",
+      "    fl = fcntl.fcntl(pipe, fcntl.F_GETFL)\n",
+      "    fcntl.fcntl(pipe, fcntl.F_SETFL, fl | os.O_NONBLOCK)\n",
+      "\n",
+      "\n",
+      "kernel = get_ipython().kernel\n",
+      "def run_command(command, append_output, has_user_exited=None):\n",
+      "    \"\"\"Run a command asyncronously\n",
+      "    \n",
+      "    Parameters\n",
+      "    ----------\n",
+      "    command: str\n",
+      "        Shell command to launch a process with.\n",
+      "    append_output: method handle\n",
+      "        Callback to render output.  Signature of\n",
+      "        append_output(output, [prefix=])\n",
+      "    has_user_exited: method handle\n",
+      "        Check to see if the user wants to stop the command.\n",
+      "        Must return a boolean.\"\"\"\n",
+      "    \n",
+      "    # Echo input.\n",
+      "    append_output(command, prefix='>>> ')\n",
+      "    \n",
+      "    # Create the process.  Make sure the pipes are set as non-blocking.\n",
+      "    process = Popen(command, shell=True, stdout=PIPE, stderr=PIPE)\n",
+      "    set_pipe_nonblocking(process.stdout)\n",
+      "    set_pipe_nonblocking(process.stderr)\n",
+      "    \n",
+      "    # Only continue to read from the command \n",
+      "    while (has_user_exited is None or not has_user_exited()) and process.poll() is None:\n",
+      "        read_process(process, append_output)\n",
+      "        kernel.do_one_iteration() # Run IPython iteration.  This is the code that\n",
+      "                                  # makes this operation non-blocking.  This will\n",
+      "                                  # allow widget messages and callbacks to be \n",
+      "                                  # processed.\n",
+      "        \n",
+      "    # If the process is still running, the user must have exited.\n",
+      "    if process.poll() is None:\n",
+      "        process.kill()\n",
+      "    else:\n",
+      "        read_process(process, append_output) # Read remainer\n",
+      "        \n",
+      "    \n",
+      "        \n",
+      "        "
+     ],
+     "language": "python",
+     "metadata": {},
+     "outputs": [],
+     "prompt_number": 2
+    },
+    {
+     "cell_type": "markdown",
+     "metadata": {},
+     "source": [
+      "Create the console widgets without displaying them."
+     ]
+    },
+    {
+     "cell_type": "code",
+     "collapsed": false,
+     "input": [
+      "console_container = widgets.ContainerWidget(visible=False)\n",
+      "console_container.set_css('padding', '10px')\n",
+      "\n",
+      "console_style = {\n",
+      "    'font-family': 'monospace',\n",
+      "    'color': '#AAAAAA',\n",
+      "    'background': 'black',\n",
+      "    'width': '800px',\n",
+      "}\n",
+      "\n",
+      "output_box = widgets.TextareaWidget()\n",
+      "output_box.set_css(console_style)\n",
+      "output_box.set_css('height', '400px')\n",
+      "\n",
+      "input_box = widgets.TextWidget()\n",
+      "input_box.set_css(console_style)\n",
+      "\n",
+      "console_container.children = [output_box, input_box]"
+     ],
+     "language": "python",
+     "metadata": {},
+     "outputs": [],
+     "prompt_number": 3
+    },
+    {
+     "cell_type": "markdown",
+     "metadata": {},
+     "source": [
+      "Hook the process execution methods up to our console widgets."
+     ]
+    },
+    {
+     "cell_type": "code",
+     "collapsed": false,
+     "input": [
+      "\n",
+      "def append_output(output, prefix):\n",
+      "    if isinstance(output, string_types):\n",
+      "        output_str = output\n",
+      "    else:\n",
+      "        output_str = bytes_to_str(output)\n",
+      "    output_lines = output_str.split('\\n')\n",
+      "    formatted_output = '\\n'.join([prefix + line for line in output_lines if len(line) > 0]) + '\\n'\n",
+      "    output_box.value += formatted_output\n",
+      "    output_box.scroll_to_bottom()\n",
+      "    \n",
+      "def has_user_exited():\n",
+      "    return not console_container.visible\n",
+      "\n",
+      "def handle_input(sender):\n",
+      "    sender.disabled = True\n",
+      "    try:\n",
+      "        command = sender.value\n",
+      "        sender.value = ''\n",
+      "        run_command(command, append_output=append_output, has_user_exited=has_user_exited)\n",
+      "    finally:\n",
+      "        sender.disabled = False\n",
+      "        \n",
+      "input_box.on_submit(handle_input)"
+     ],
+     "language": "python",
+     "metadata": {},
+     "outputs": [],
+     "prompt_number": 4
+    },
+    {
+     "cell_type": "markdown",
+     "metadata": {},
+     "source": [
+      "Create the button that will be used to display and hide the console.  Display both the console container and the new button used to toggle it."
+     ]
+    },
+    {
+     "cell_type": "code",
+     "collapsed": false,
+     "input": [
+      "toggle_button = widgets.ButtonWidget(description=\"Start Console\")\n",
+      "def toggle_console(sender):\n",
+      "    console_container.visible = not console_container.visible\n",
+      "    if console_container.visible:\n",
+      "        toggle_button.description=\"Stop Console\"\n",
+      "        input_box.disabled = False\n",
+      "    else:\n",
+      "        toggle_button.description=\"Start Console\"\n",
+      "toggle_button.on_click(toggle_console)\n",
+      "\n",
+      "display(toggle_button)\n",
+      "display(console_container)"
+     ],
+     "language": "python",
+     "metadata": {},
+     "outputs": [],
+     "prompt_number": 5
+    }
+   ],
+   "metadata": {}
+  }
+ ]
+}
  No newline at end of file

examples/widgets/Part 1 - Basics.ipynb

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

examples/widgets/Part 2 - Events.ipynb

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

examples/widgets/Part 3 - Placement.ipynb

@@ -0,0 +1,187 b''
+{
+ "metadata": {
+  "cell_tags": [
+   [
+    "<None>",
+    null
+   ]
+  ],
+  "name": ""
+ },
+ "nbformat": 3,
+ "nbformat_minor": 0,
+ "worksheets": [
+  {
+   "cells": [
+    {
+     "cell_type": "markdown",
+     "metadata": {},
+     "source": [
+      "[< Back to Part 2](Part 2 - Events.ipynb) or [Index](index.ipynb)"
+     ]
+    },
+    {
+     "cell_type": "code",
+     "collapsed": false,
+     "input": [
+      "from IPython.html import widgets # Widget definitions\n",
+      "from IPython.display import display # Used to display widgets in the notebook"
+     ],
+     "language": "python",
+     "metadata": {},
+     "outputs": [],
+     "prompt_number": 1
+    },
+    {
+     "cell_type": "heading",
+     "level": 1,
+     "metadata": {},
+     "source": [
+      "Parent/Child Relationships"
+     ]
+    },
+    {
+     "cell_type": "markdown",
+     "metadata": {},
+     "source": [
+      "To display widget A inside widget B, widget A must be a child of widget B.  Only one instance of any particular widget can be child of another.  In other words, *widget A* cannot have *widget B* listed twice in it's list of children.\n",
+      "\n",
+      "Widgets that can contain other widgets have a `children` attribute.  This attribute can be set via a kwarg in the widget's constructor or after construction.  Calling display on an object with children automatically displays those children, too."
+     ]
+    },
+    {
+     "cell_type": "code",
+     "collapsed": false,
+     "input": [
+      "float_range = widgets.FloatSliderWidget()\n",
+      "string = widgets.TextWidget(value='hi')\n",
+      "container = widgets.ContainerWidget(children=[float_range, string])\n",
+      "\n",
+      "display(container) # Displays the `container` and all of it's children."
+     ],
+     "language": "python",
+     "metadata": {},
+     "outputs": [],
+     "prompt_number": 2
+    },
+    {
+     "cell_type": "markdown",
+     "metadata": {},
+     "source": [
+      "Children can also be added to parents after the parent has been displayed.  The parent is responsible for rendering its children."
+     ]
+    },
+    {
+     "cell_type": "code",
+     "collapsed": false,
+     "input": [
+      "container = widgets.ContainerWidget()\n",
+      "display(container)\n",
+      "\n",
+      "int_range = widgets.IntSliderWidget()\n",
+      "container.children=[int_range]\n"
+     ],
+     "language": "python",
+     "metadata": {},
+     "outputs": [],
+     "prompt_number": 3
+    },
+    {
+     "cell_type": "heading",
+     "level": 1,
+     "metadata": {},
+     "source": [
+      "Visibility"
+     ]
+    },
+    {
+     "cell_type": "markdown",
+     "metadata": {},
+     "source": [
+      "Sometimes it is necessary to hide or show widgets in place, without having to redisplay the widget.\n",
+      "The `visibility` property of widgets can be used to hide or show widgets that have already been displayed (as seen below)."
+     ]
+    },
+    {
+     "cell_type": "code",
+     "collapsed": false,
+     "input": [
+      "string = widgets.LatexWidget(value=\"Hello World!\")\n",
+      "display(string) "
+     ],
+     "language": "python",
+     "metadata": {},
+     "outputs": [],
+     "prompt_number": 4
+    },
+    {
+     "cell_type": "code",
+     "collapsed": false,
+     "input": [
+      "string.visible=False"
+     ],
+     "language": "python",
+     "metadata": {},
+     "outputs": [],
+     "prompt_number": 5
+    },
+    {
+     "cell_type": "code",
+     "collapsed": false,
+     "input": [
+      "string.visible=True"
+     ],
+     "language": "python",
+     "metadata": {},
+     "outputs": [],
+     "prompt_number": 6
+    },
+    {
+     "cell_type": "markdown",
+     "metadata": {},
+     "source": [
+      "In the example below, a form is rendered, which conditionally displays widgets depending on the state of other widgets.  Try toggling the student checkbox."
+     ]
+    },
+    {
+     "cell_type": "code",
+     "collapsed": false,
+     "input": [
+      "form = widgets.ContainerWidget()\n",
+      "first = widgets.TextWidget(description=\"First Name:\")\n",
+      "last = widgets.TextWidget(description=\"Last Name:\")\n",
+      "\n",
+      "student = widgets.CheckboxWidget(description=\"Student:\", value=False)\n",
+      "school_info = widgets.ContainerWidget(visible=False, children=[\n",
+      "    widgets.TextWidget(description=\"School:\"),\n",
+      "    widgets.IntTextWidget(description=\"Grade:\", min=0, max=12)\n",
+      "    ])\n",
+      "\n",
+      "pet = widgets.TextWidget(description=\"Pet's Name:\")\n",
+      "form.children = [first, last, student, school_info, pet]\n",
+      "display(form)\n",
+      "\n",
+      "def on_student_toggle(name, value):\n",
+      "    if value:\n",
+      "        school_info.visible = True\n",
+      "    else:\n",
+      "        school_info.visible = False\n",
+      "student.on_trait_change(on_student_toggle, 'value')\n"
+     ],
+     "language": "python",
+     "metadata": {},
+     "outputs": [],
+     "prompt_number": 7
+    },
+    {
+     "cell_type": "markdown",
+     "metadata": {},
+     "source": [
+      "In [Part 4](Part 4 - Styles.ipynb) of this [series](index.ipynb), you will learn about widget styling."
+     ]
+    }
+   ],
+   "metadata": {}
+  }
+ ]
+}
  No newline at end of file

examples/widgets/Part 4 - Styles.ipynb

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

examples/widgets/Part 5 - Alignment.ipynb

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

examples/widgets/Part 6 - Custom Widget.ipynb

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

examples/widgets/Variable Inspector.ipynb

@@ -0,0 +1,203 b''
+{
+ "metadata": {
+  "name": ""
+ },
+ "nbformat": 3,
+ "nbformat_minor": 0,
+ "worksheets": [
+  {
+   "cells": [
+    {
+     "cell_type": "heading",
+     "level": 1,
+     "metadata": {},
+     "source": [
+      "Variable Inspector Widget"
+     ]
+    },
+    {
+     "cell_type": "heading",
+     "level": 2,
+     "metadata": {},
+     "source": [
+      "A short example implementation"
+     ]
+    },
+    {
+     "cell_type": "markdown",
+     "metadata": {},
+     "source": [
+      "This notebook demonstrates how one can use the widgets already built-in to IPython to create a working variable inspector much like the ones seen in popular commercial scientific computing environments."
+     ]
+    },
+    {
+     "cell_type": "code",
+     "collapsed": false,
+     "input": [
+      "from IPython.html import widgets # Loads the Widget framework.\n",
+      "from IPython.core.magics.namespace import NamespaceMagics # Used to query namespace.\n",
+      "\n",
+      "# For this example, hide these names, just to avoid polluting the namespace further\n",
+      "get_ipython().user_ns_hidden['widgets'] = widgets\n",
+      "get_ipython().user_ns_hidden['NamespaceMagics'] = NamespaceMagics"
+     ],
+     "language": "python",
+     "metadata": {},
+     "outputs": [],
+     "prompt_number": 1
+    },
+    {
+     "cell_type": "code",
+     "collapsed": false,
+     "input": [
+      "class VariableInspectorWindow(object):\n",
+      "    instance = None\n",
+      "    \n",
+      "    def __init__(self, ipython):\n",
+      "        \"\"\"Public constructor.\"\"\"\n",
+      "        if VariableInspectorWindow.instance is not None:\n",
+      "            raise Exception(\"\"\"Only one instance of the Variable Inspector can exist at a \n",
+      "                time.  Call close() on the active instance before creating a new instance.\n",
+      "                If you have lost the handle to the active instance, you can re-obtain it\n",
+      "                via `VariableInspectorWindow.instance`.\"\"\")\n",
+      "        \n",
+      "        VariableInspectorWindow.instance = self\n",
+      "        self.closed = False\n",
+      "        self.namespace = NamespaceMagics()\n",
+      "        self.namespace.shell = ipython.kernel.shell\n",
+      "        \n",
+      "        self._popout = widgets.PopupWidget()\n",
+      "        self._popout.description = \"Variable Inspector\"\n",
+      "        self._popout.button_text = self._popout.description\n",
+      "\n",
+      "        self._modal_body = widgets.ContainerWidget()\n",
+      "        self._modal_body.set_css('overflow-y', 'scroll')\n",
+      "\n",
+      "        self._modal_body_label = widgets.HTMLWidget(value = 'Not hooked')\n",
+      "        self._modal_body.children = [self._modal_body_label]\n",
+      "\n",
+      "        self._modal_footer = widgets.ContainerWidget()\n",
+      "        self._var_filter = widgets.ToggleButtonsWidget(description=\"Method:\", values=['List', 'Details'], value='List')\n",
+      "        self._modal_footer.children = [self._var_filter]\n",
+      "\n",
+      "        self._popout.children = [\n",
+      "            self._modal_body, \n",
+      "            self._modal_footer,\n",
+      "        ]\n",
+      "        \n",
+      "        self._ipython = ipython\n",
+      "        self._ipython.register_post_execute(self._fill)\n",
+      "        self._var_filter.on_trait_change(self._fill, 'value')\n",
+      "\n",
+      "    def close(self):\n",
+      "        \"\"\"Close and remove hooks.\"\"\"\n",
+      "        if not self.closed:\n",
+      "            del self._ipython._post_execute[self._fill]\n",
+      "            self._popout.close()\n",
+      "            self.closed = True\n",
+      "            VariableInspectorWindow.instance = None\n",
+      "\n",
+      "    def _fill(self):\n",
+      "        \"\"\"Fill self with variable information.\"\"\"\n",
+      "        values = self.namespace.who_ls()\n",
+      "        mode = self._var_filter.value\n",
+      "        if mode == \"List\":\n",
+      "            self._modal_body_label.value = '<br>'.join(values)\n",
+      "        elif mode == \"Details\":\n",
+      "            self._modal_body_label.value = '<table class=\"table table-bordered table-striped\"><tr><th>Name</th><th>Type</th><th>Value</th></tr><tr><td>' + \\\n",
+      "                '</td></tr><tr><td>'.join(['{0}</td><td>{1}</td><td>{2}'.format(v, type(eval(v)).__name__, str(eval(v))) for v in values]) + \\\n",
+      "                '</td></tr></table>'\n",
+      "\n",
+      "    def _ipython_display_(self):\n",
+      "        \"\"\"Called when display() or pyout is used to display the Variable \n",
+      "        Inspector.\"\"\"\n",
+      "        self._popout._ipython_display_()\n",
+      "        self._modal_footer.add_class('modal-footer')\n",
+      "        self._popout.add_class('vbox')\n",
+      "        self._modal_body.add_class('box-flex1')\n"
+     ],
+     "language": "python",
+     "metadata": {},
+     "outputs": [],
+     "prompt_number": 2
+    },
+    {
+     "cell_type": "code",
+     "collapsed": false,
+     "input": [
+      "inspector = VariableInspectorWindow(get_ipython())\n",
+      "inspector"
+     ],
+     "language": "python",
+     "metadata": {},
+     "outputs": [],
+     "prompt_number": 3
+    },
+    {
+     "cell_type": "heading",
+     "level": 1,
+     "metadata": {},
+     "source": [
+      "Test"
+     ]
+    },
+    {
+     "cell_type": "code",
+     "collapsed": false,
+     "input": [
+      "a = 5"
+     ],
+     "language": "python",
+     "metadata": {},
+     "outputs": [],
+     "prompt_number": 4
+    },
+    {
+     "cell_type": "code",
+     "collapsed": false,
+     "input": [
+      "b = 3.0"
+     ],
+     "language": "python",
+     "metadata": {},
+     "outputs": [],
+     "prompt_number": 5
+    },
+    {
+     "cell_type": "code",
+     "collapsed": false,
+     "input": [
+      "c = a * b"
+     ],
+     "language": "python",
+     "metadata": {},
+     "outputs": [],
+     "prompt_number": 6
+    },
+    {
+     "cell_type": "code",
+     "collapsed": false,
+     "input": [
+      "d = \"String\""
+     ],
+     "language": "python",
+     "metadata": {},
+     "outputs": [],
+     "prompt_number": 7
+    },
+    {
+     "cell_type": "code",
+     "collapsed": false,
+     "input": [
+      "del b"
+     ],
+     "language": "python",
+     "metadata": {},
+     "outputs": [],
+     "prompt_number": 8
+    }
+   ],
+   "metadata": {}
+  }
+ ]
+}
  No newline at end of file

examples/widgets/index.ipynb

@@ -0,0 +1,67 b''
+{
+ "metadata": {
+  "name": ""
+ },
+ "nbformat": 3,
+ "nbformat_minor": 0,
+ "worksheets": [
+  {
+   "cells": [
+    {
+     "cell_type": "heading",
+     "level": 1,
+     "metadata": {},
+     "source": [
+      "Widgets"
+     ]
+    },
+    {
+     "cell_type": "markdown",
+     "metadata": {},
+     "source": [
+      "This directory includes a tutorial and collection of examples related to the IPython notebook widget framework."
+     ]
+    },
+    {
+     "cell_type": "heading",
+     "level": 2,
+     "metadata": {},
+     "source": [
+      "Tutorial"
+     ]
+    },
+    {
+     "cell_type": "markdown",
+     "metadata": {},
+     "source": [
+      "- [Part 1 - Basics](Part 1 - Basics.ipynb)  \n",
+      "- [Part 2 - Events](Part 2 - Events.ipynb)  \n",
+      "- [Part 3 - Placement](Part 3 - Placement.ipynb)  \n",
+      "- [Part 4 - Styles](Part 4 - Styles.ipynb)  \n",
+      "- [Part 5 - Alignment](Part 5 - Alignment.ipynb)  \n",
+      "- [Part 6 - Custom Widget](Part 6 - Custom Widget.ipynb)  "
+     ]
+    },
+    {
+     "cell_type": "heading",
+     "level": 2,
+     "metadata": {},
+     "source": [
+      "Examples"
+     ]
+    },
+    {
+     "cell_type": "markdown",
+     "metadata": {},
+     "source": [
+      "- [Variable Inspector](Variable Inspector.ipynb)  \n",
+      "- [Export As (nbconvert)](Export As (nbconvert%29.ipynb)  \n",
+      "- [Nonblocking Console](Nonblocking Console.ipynb)  \n",
+      "- [File Upload Widget](File Upload Widget.ipynb)  "
+     ]
+    }
+   ],
+   "metadata": {}
+  }
+ ]
+}
  No newline at end of file

IPython/core/display.py

@@ -110,12 +110,23 b' def display(*objs, **kwargs):'
 
     from IPython.core.interactiveshell import InteractiveShell
 
-    if raw:
-        for obj in objs:
-            publish_display_data('display', obj, metadata)
-    else:
+    if not raw:
         format = InteractiveShell.instance().display_formatter.format
-        for obj in objs:
+
+    for obj in objs:
+
+        # If _ipython_display_ is defined, use that to display this object.
+        display_method = getattr(obj, '_ipython_display_', None)
+        if display_method is not None:
+            try:
+                display_method(**kwargs)
+            except NotImplementedError:
+                pass
+            else:
+                continue
+        if raw:
+            publish_display_data('display', obj, metadata)
+        else:
             format_dict, md_dict = format(obj, include=include, exclude=exclude)
             if metadata:
                 # kwarg-specified metadata gets precedence

IPython/core/displayhook.py

@@ -241,6 +241,14 b' class DisplayHook(Configurable):'
         """
         self.check_for_underscore()
         if result is not None and not self.quiet():
+            # If _ipython_display_ is defined, use that to display this object.
+            display_method = getattr(result, '_ipython_display_', None)
+            if display_method is not None:
+                try:
+                    return display_method()
+                except NotImplementedError:
+                    pass
+            
             self.start_displayhook()
             self.write_output_prompt()
             format_dict, md_dict = self.compute_format_data(result)

IPython/html/static/base/less/flexbox.less

@@ -101,3 +101,21 b''
     -moz-box-pack: center;
     box-pack: center;
 }
+
+.align-start {
+	-webkit-box-align: start;
+	-moz-box-align: start;
+	box-align: start;
+}
+
+.align-end {
+	-webkit-box-align: end;
+	-moz-box-align: end;
+	box-align: end;
+}
+
+.align-center {
+	-webkit-box-align: center;
+	-moz-box-align: center;
+	box-align: center;
+}

IPython/html/static/notebook/js/codecell.js

@@ -105,6 +105,7 b' var IPython = (function (IPython) {'
         }
     };
 
+    CodeCell.msg_cells = {};
 
     CodeCell.prototype = new IPython.Cell();
 
@@ -132,8 +133,28 b' var IPython = (function (IPython) {'
         $(this.code_mirror.getInputField()).attr("spellcheck", "false");
         inner_cell.append(input_area);
         input.append(prompt).append(inner_cell);
+
+        var widget_area = $('<div/>')
+            .addClass('widget-area')
+            .hide();
+        this.widget_area = widget_area;
+        var widget_prompt = $('<div/>')
+            .addClass('prompt')
+            .appendTo(widget_area);
+        var widget_subarea = $('<div/>')
+            .addClass('widget-subarea')
+            .appendTo(widget_area);
+        this.widget_subarea = widget_subarea;
+        var widget_clear_buton = $('<button />')
+            .addClass('close')
+            .html('&times;')
+            .click(function() {
+                widget_area.slideUp('', function(){ widget_subarea.html(''); });
+                })
+            .appendTo(widget_prompt);
+
         var output = $('<div></div>');
-        cell.append(input).append(output);
+        cell.append(input).append(widget_area).append(output);
         this.element = cell;
         this.output_area = new IPython.OutputArea(output, true);
         this.completer = new IPython.Completer(this);
@@ -283,6 +304,13 b' var IPython = (function (IPython) {'
      */
     CodeCell.prototype.execute = function () {
         this.output_area.clear_output();
+        
+        // Clear widget area
+        this.widget_subarea.html('');
+        this.widget_subarea.height('');
+        this.widget_area.height('');
+        this.widget_area.hide();
+
         this.set_input_prompt('*');
         this.element.addClass("running");
         if (this.last_msg_id) {
@@ -290,7 +318,12 b' var IPython = (function (IPython) {'
         }
         var callbacks = this.get_callbacks();
         
+        var old_msg_id = this.last_msg_id;
         this.last_msg_id = this.kernel.execute(this.get_text(), callbacks, {silent: false, store_history: true});
+        if (old_msg_id) {
+            delete CodeCell.msg_cells[old_msg_id];
+        }
+        CodeCell.msg_cells[this.last_msg_id] = this;
     };
     
     /**

IPython/html/static/notebook/js/main.js

@@ -14,7 +14,8 b''
 // as injecting require.js make marked not to put itself in the globals,
 // which make both this file fail at setting marked configuration, and textcell.js
 // which search marked into global.
-require(['components/marked/lib/marked'],
+require(['components/marked/lib/marked',
+         'notebook/js/widgets/init'],
 
 function (marked) {
 

IPython/html/static/notebook/js/notebook.js

@@ -301,6 +301,17 b' var IPython = (function (IPython) {'
     };
 
     /**
+     * Try to get a particular cell by msg_id.
+     * 
+     * @method get_msg_cell
+     * @param {String} msg_id A message UUID
+     * @return {Cell} Cell or null if no cell was found.
+     */
+    Notebook.prototype.get_msg_cell = function (msg_id) {
+        return IPython.CodeCell.msg_cells[msg_id] || null;
+    };
+
+    /**
      * Count the cells in this notebook.
      * 
      * @method ncells
@@ -1295,7 +1306,8 b' var IPython = (function (IPython) {'
 
 
     /**
-     * Once a session is started, link the code cells to the kernel
+     * Once a session is started, link the code cells to the kernel and pass the 
+     * comm manager to the widget manager
      *
      */
     Notebook.prototype._session_started = function(){

IPython/html/static/notebook/less/style.less

@@ -11,5 +11,3 b''
 @import "savewidget.less";
 @import "toolbar.less";
 @import "tooltip.less";
-
-

IPython/html/static/notebook/less/style_noapp.less

@@ -7,3 +7,4 b''
 @import "outputarea.less";
 @import "renderedhtml.less";
 @import "textcell.less";
+@import "widgets.less";

IPython/html/static/services/kernels/js/comm.js

@@ -86,7 +86,7 b' var IPython = (function (IPython) {'
         try {
             f(comm, msg);
         } catch (e) {
-            console.log("Exception opening new comm:", e, msg);
+            console.log("Exception opening new comm:", e, e.stack, msg);
             comm.close();
             this.unregister_comm(comm);
         }
@@ -102,7 +102,7 b' var IPython = (function (IPython) {'
         try {
             comm.handle_close(msg);
         } catch (e) {
-            console.log("Exception closing comm: ", e, msg);
+            console.log("Exception closing comm: ", e, e.stack, msg);
         }
     };
     
@@ -115,7 +115,7 b' var IPython = (function (IPython) {'
         try {
             comm.handle_msg(msg);
         } catch (e) {
-            console.log("Exception handling comm msg: ", e, msg);
+            console.log("Exception handling comm msg: ", e, e.stack, msg);
         }
     };
     
@@ -176,7 +176,7 b' var IPython = (function (IPython) {'
             try {
                 callback(msg);
             } catch (e) {
-                console.log("Exception in Comm callback", e, msg);
+                console.log("Exception in Comm callback", e, e.stack, msg);
             }
         }
     };

IPython/html/static/services/kernels/js/kernel.js

@@ -47,6 +47,7 b' var IPython = (function (IPython) {'
         this.bind_events();
         this.init_iopub_handlers();
         this.comm_manager = new IPython.CommManager(this);
+        this.widget_manager = new IPython.WidgetManager(this.comm_manager);
     };
 
 
@@ -507,7 +508,7 b' var IPython = (function (IPython) {'
             try {
                 callbacks.iopub.status(msg);
             } catch (e) {
-                console.log("Exception in status msg handler", e);
+                console.log("Exception in status msg handler", e, e.stack);
             }
         }
         

IPython/html/static/style/ipython.min.css

@@ -18,6 +18,9 b''
 .start{-webkit-box-pack:start;-moz-box-pack:start;box-pack:start;}
 .end{-webkit-box-pack:end;-moz-box-pack:end;box-pack:end;}
 .center{-webkit-box-pack:center;-moz-box-pack:center;box-pack:center;}
+.align-start{-webkit-box-align:start;-moz-box-align:start;box-align:start;}
+.align-end{-webkit-box-align:end;-moz-box-align:end;box-align:end;}
+.align-center{-webkit-box-align:center;-moz-box-align:center;box-align:center;}
 div.error{margin:2em;text-align:center;}
 div.error>h1{font-size:500%;line-height:normal;}
 div.error>p{font-size:200%;line-height:normal;}
@@ -152,3 +155,22 b' div.text_cell_input{color:#000000;border:1px solid #cfcfcf;border-radius:4px;bac'
 div.text_cell_render{outline:none;resize:none;width:inherit;border-style:none;padding:5px;color:#000000;}
 a.anchor-link:link{text-decoration:none;padding:0px 20px;visibility:hidden;}
 h1:hover .anchor-link,h2:hover .anchor-link,h3:hover .anchor-link,h4:hover .anchor-link,h5:hover .anchor-link,h6:hover .anchor-link{visibility:visible;}
+.widget-area{page-break-inside:avoid;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch;}.widget-area .widget-subarea{padding:0.44em 0.4em 0.4em 1px;margin-left:6px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%;-webkit-box-flex:2;-moz-box-flex:2;box-flex:2;}
+.widget-hlabel{min-width:10ex;padding-right:8px;padding-top:3px;text-align:right;vertical-align:text-top;}
+.widget-vlabel{padding-bottom:5px;text-align:center;vertical-align:text-bottom;}
+.slide-track{border:1px solid #CCCCCC;background:#FFFFFF;border-radius:4px;}
+.widget-hslider{padding-left:8px;padding-right:5px;overflow:visible;width:348px;height:5px;max-height:5px;margin-top:11px;border:1px solid #CCCCCC;background:#FFFFFF;border-radius:4px;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch;}.widget-hslider .ui-slider{border:0px !important;background:none !important;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;}.widget-hslider .ui-slider .ui-slider-handle{width:14px !important;height:28px !important;margin-top:-8px !important;}
+.widget-vslider{padding-bottom:8px;overflow:visible;width:5px;max-width:5px;height:250px;margin-left:12px;border:1px solid #CCCCCC;background:#FFFFFF;border-radius:4px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%;}.widget-vslider .ui-slider{border:0px !important;background:none !important;margin-left:-4px;margin-top:5px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;}.widget-vslider .ui-slider .ui-slider-handle{width:28px !important;height:14px !important;margin-left:-9px;}
+.widget-text{width:350px;margin-bottom:0px;}
+.widget-listbox{width:364px;margin-bottom:0px;}
+.widget-numeric-text{width:150px;}
+.widget-progress{width:363px;}.widget-progress .bar{-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}
+.widget-combo-btn{min-width:138px;}
+.widget-box{-webkit-box-pack:start;-moz-box-pack:start;box-pack:start;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;margin:5px;}
+.widget-hbox{-webkit-box-pack:start;-moz-box-pack:start;box-pack:start;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;margin:5px;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch;}
+.widget-hbox-single{-webkit-box-pack:start;-moz-box-pack:start;box-pack:start;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;margin:5px;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch;height:30px;}
+.widget-vbox-single{-webkit-box-pack:start;-moz-box-pack:start;box-pack:start;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;margin:5px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%;width:30px;}
+.widget-modal{overflow:hidden;position:absolute !important;top:0px;left:0px;margin-left:0px !important;}
+.widget-modal-body{max-height:none !important;}
+.widget-container{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
+.docked-widget-modal{overflow:hidden;position:relative !important;top:0px !important;left:0px !important;margin-left:0px !important;}

IPython/html/static/style/style.min.css

@@ -1385,6 +1385,9 b' ul.icons-ul{list-style-type:none;text-indent:-0.7142857142857143em;margin-left:2'
 .start{-webkit-box-pack:start;-moz-box-pack:start;box-pack:start;}
 .end{-webkit-box-pack:end;-moz-box-pack:end;box-pack:end;}
 .center{-webkit-box-pack:center;-moz-box-pack:center;box-pack:center;}
+.align-start{-webkit-box-align:start;-moz-box-align:start;box-align:start;}
+.align-end{-webkit-box-align:end;-moz-box-align:end;box-align:end;}
+.align-center{-webkit-box-align:center;-moz-box-align:center;box-align:center;}
 div.error{margin:2em;text-align:center;}
 div.error>h1{font-size:500%;line-height:normal;}
 div.error>p{font-size:200%;line-height:normal;}
@@ -1533,6 +1536,25 b' div.text_cell_input{color:#000000;border:1px solid #cfcfcf;border-radius:4px;bac'
 div.text_cell_render{outline:none;resize:none;width:inherit;border-style:none;padding:5px;color:#000000;}
 a.anchor-link:link{text-decoration:none;padding:0px 20px;visibility:hidden;}
 h1:hover .anchor-link,h2:hover .anchor-link,h3:hover .anchor-link,h4:hover .anchor-link,h5:hover .anchor-link,h6:hover .anchor-link{visibility:visible;}
+.widget-area{page-break-inside:avoid;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch;}.widget-area .widget-subarea{padding:0.44em 0.4em 0.4em 1px;margin-left:6px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%;-webkit-box-flex:2;-moz-box-flex:2;box-flex:2;}
+.widget-hlabel{min-width:10ex;padding-right:8px;padding-top:3px;text-align:right;vertical-align:text-top;}
+.widget-vlabel{padding-bottom:5px;text-align:center;vertical-align:text-bottom;}
+.slide-track{border:1px solid #CCCCCC;background:#FFFFFF;border-radius:4px;}
+.widget-hslider{padding-left:8px;padding-right:5px;overflow:visible;width:348px;height:5px;max-height:5px;margin-top:11px;border:1px solid #CCCCCC;background:#FFFFFF;border-radius:4px;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch;}.widget-hslider .ui-slider{border:0px !important;background:none !important;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;}.widget-hslider .ui-slider .ui-slider-handle{width:14px !important;height:28px !important;margin-top:-8px !important;}
+.widget-vslider{padding-bottom:8px;overflow:visible;width:5px;max-width:5px;height:250px;margin-left:12px;border:1px solid #CCCCCC;background:#FFFFFF;border-radius:4px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%;}.widget-vslider .ui-slider{border:0px !important;background:none !important;margin-left:-4px;margin-top:5px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;}.widget-vslider .ui-slider .ui-slider-handle{width:28px !important;height:14px !important;margin-left:-9px;}
+.widget-text{width:350px;margin-bottom:0px;}
+.widget-listbox{width:364px;margin-bottom:0px;}
+.widget-numeric-text{width:150px;}
+.widget-progress{width:363px;}.widget-progress .bar{-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}
+.widget-combo-btn{min-width:138px;}
+.widget-box{-webkit-box-pack:start;-moz-box-pack:start;box-pack:start;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;margin:5px;}
+.widget-hbox{-webkit-box-pack:start;-moz-box-pack:start;box-pack:start;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;margin:5px;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch;}
+.widget-hbox-single{-webkit-box-pack:start;-moz-box-pack:start;box-pack:start;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;margin:5px;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch;height:30px;}
+.widget-vbox-single{-webkit-box-pack:start;-moz-box-pack:start;box-pack:start;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;margin:5px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%;width:30px;}
+.widget-modal{overflow:hidden;position:absolute !important;top:0px;left:0px;margin-left:0px !important;}
+.widget-modal-body{max-height:none !important;}
+.widget-container{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
+.docked-widget-modal{overflow:hidden;position:relative !important;top:0px !important;left:0px !important;margin-left:0px !important;}
 body{background-color:#ffffff;}
 body.notebook_app{overflow:hidden;}
 span#notebook_name{height:1em;line-height:1em;padding:3px;border:none;font-size:146.5%;}

IPython/html/templates/page.html

@@ -21,7 +21,18 b''
       require.config({
           baseUrl: '{{static_url("")}}',
           paths: {
-            nbextensions : '{{ base_project_url }}nbextensions'
+            nbextensions : '{{ base_project_url }}nbextensions',
+            underscore : '{{static_url("components/underscore/underscore-min")}}',
+            backbone : '{{static_url("components/backbone/backbone-min")}}', 
+          },
+          shim: {
+            underscore: {
+              exports: '_'
+            },
+            backbone: {
+              deps: ["underscore", "jquery"],
+              exports: "Backbone"
+            }
           }
       });
     </script>

IPython/html/tests/casperjs/util.js

@@ -59,19 +59,17 b' casper.delete_current_notebook = function () {'
 
 // wait for output in a given cell
 casper.wait_for_output = function (cell_num) {
-    this.then(function() {
-        this.waitFor(function (c) {
-            return this.evaluate(function get_output(c) {
-                var cell = IPython.notebook.get_cell(c);
-                return cell.output_area.outputs.length != 0;
-            },
-            // pass parameter from the test suite js to the browser code js
-            {c : cell_num});
+    this.waitFor(function (c) {
+        return this.evaluate(function get_output(c) {
+            var cell = IPython.notebook.get_cell(c);
+            return cell.output_area.outputs.length != 0;
         },
-        function then() { },
-        function timeout() {
-            this.echo("wait_for_output timedout!");
-        });
+        // pass parameter from the test suite js to the browser code js
+        {c : cell_num});
+    },
+    function then() { },
+    function timeout() {
+        this.echo("wait_for_output timed out!");
     });
 };
 

examples/notebooks/Custom Display Logic.ipynb

@@ -8546,13 +8546,104 b''
        ],
        "metadata": {},
        "output_type": "pyout",
-       "prompt_number": 16,
+       "prompt_number": 17,
        "text": [
         "Polynomial([-20.,  71., -15.,   1.], [-1.,  1.], [-1.,  1.])"
        ]
       }
      ],
-     "prompt_number": 16
+     "prompt_number": 17
+    },
+    {
+     "cell_type": "heading",
+     "level": 2,
+     "metadata": {},
+     "source": [
+      "More complex display with `_ipython_display_`"
+     ]
+    },
+    {
+     "cell_type": "markdown",
+     "metadata": {},
+     "source": [
+      "Rich reprs can only display one object or mime-type at a time.\n",
+      "Sometimes this is not enough,\n",
+      "because you need to get javascript on the page, or you want LaTeX and a PNG.\n",
+      "This can be done with multiple calls to display easily enough,\n",
+      "but then users need to know more than they should.\n",
+      "\n",
+      "In **IPython 2.0**, we added a special `_ipython_display_` method,\n",
+      "that allows your objects to take control of displaying.\n",
+      "If this method is defined, IPython will call it, and make no effort to display the object itself.\n",
+      "It's a way for you to say \"Back off, IPython, I got this.\""
+     ]
+    },
+    {
+     "cell_type": "code",
+     "collapsed": false,
+     "input": [
+      "import json\n",
+      "import uuid\n",
+      "from IPython.display import display_javascript, display_html, display\n",
+      "\n",
+      "class FlotPlot(object):\n",
+      "    def __init__(self, x, y):\n",
+      "        self.x = x\n",
+      "        self.y = y\n",
+      "        self.uuid = str(uuid.uuid4())\n",
+      "    \n",
+      "    def _ipython_display_(self):\n",
+      "        json_data = json.dumps(zip(self.x, self.y))\n",
+      "        display_html('<div id=\"{}\" style=\"height: 300px; width:80%;\"></div>'.format(self.uuid),\n",
+      "            raw=True\n",
+      "        )\n",
+      "        display_javascript(\"\"\"\n",
+      "        require([\"//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js\"], function() {\n",
+      "          var line = JSON.parse(\"%s\");\n",
+      "          console.log(line);\n",
+      "          $.plot(\"#%s\", [line]);\n",
+      "        });\n",
+      "        \"\"\" % (json_data, self.uuid), raw=True)\n"
+     ],
+     "language": "python",
+     "metadata": {},
+     "outputs": [],
+     "prompt_number": 17
+    },
+    {
+     "cell_type": "code",
+     "collapsed": false,
+     "input": [
+      "import numpy as np\n",
+      "x = np.linspace(0,10)\n",
+      "y = np.sin(x)\n",
+      "FlotPlot(x, np.sin(x))"
+     ],
+     "language": "python",
+     "metadata": {},
+     "outputs": [
+      {
+       "html": [
+        "<div id=\"6cc58a29-42e4-43ff-9204-1043632e90f4\" style=\"height: 300px; width:80%;\"></div>"
+       ],
+       "metadata": {},
+       "output_type": "display_data"
+      },
+      {
+       "javascript": [
+        "\n",
+        "        require([\"//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js\"], function() {\n",
+        "          var line = JSON.parse(\"[[0.0, 0.0], [0.20408163265306123, 0.20266793654820095], [0.40816326530612246, 0.39692414892492234], [0.61224489795918369, 0.57470604121617908], [0.81632653061224492, 0.72863478346935029], [1.0204081632653061, 0.85232156971961837], [1.2244897959183674, 0.94063278511248671], [1.4285714285714286, 0.98990307637212394], [1.6326530612244898, 0.99808748213471832], [1.8367346938775511, 0.96484630898376322], [2.0408163265306123, 0.89155923041100371], [2.2448979591836737, 0.7812680235262639], [2.4489795918367347, 0.63855032022660208], [2.6530612244897958, 0.46932961277720098], [2.8571428571428572, 0.28062939951435684], [3.0612244897959187, 0.080281674842813497], [3.2653061224489797, -0.12339813736217871], [3.4693877551020407, -0.32195631507261868], [3.6734693877551021, -0.50715170948451438], [3.8775510204081636, -0.67129779355193209], [4.0816326530612246, -0.80758169096833643], [4.2857142857142856, -0.91034694431078278], [4.4897959183673475, -0.97532828606704558], [4.6938775510204085, -0.99982866838408957], [4.8979591836734695, -0.98283120392563061], [5.1020408163265305, -0.92504137173820289], [5.3061224489795915, -0.82885773637304272], [5.5102040816326534, -0.69827239556539955], [5.7142857142857144, -0.53870528838615628], [5.9183673469387754, -0.35677924089893803], [6.1224489795918373, -0.16004508604325057], [6.3265306122448983, 0.043331733368683463], [6.5306122448979593, 0.24491007101197931], [6.7346938775510203, 0.43632342647181932], [6.9387755102040813, 0.6096271964908323], [7.1428571428571432, 0.75762841539272019], [7.3469387755102042, 0.87418429881973347], [7.5510204081632653, 0.95445719973875187], [7.7551020408163271, 0.99511539477766364], [7.9591836734693882, 0.99447136726361685], [8.1632653061224492, 0.95255184753146038], [8.3673469387755102, 0.87109670348232071], [8.5714285714285712, 0.75348672743963763], [8.7755102040816322, 0.60460331650615429], [8.979591836734695, 0.43062587038273736], [9.183673469387756, 0.23877531564403087], [9.387755102040817, 0.037014401485062368], [9.591836734693878, -0.16628279384875641], [9.795918367346939, -0.36267842882654883], [10.0, -0.54402111088936989]]\");\n",
+        "          console.log(line);\n",
+        "          $.plot(\"#6cc58a29-42e4-43ff-9204-1043632e90f4\", [line]);\n",
+        "        });\n",
+        "        "
+       ],
+       "metadata": {},
+       "output_type": "display_data"
+      }
+     ],
+     "prompt_number": 19
     }
    ],
    "metadata": {}