Renamed widgets...

TextWidget, TextareaWidget, CheckboxWidget, and SelectWidget

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

@@ -1,125 +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({
+    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);
+            return CheckboxView.__super__.update.apply(this);
         },
         
     });
-    WidgetManager.register_widget_view('CheckBoxView', CheckBoxView);
+    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_selection.js

@@ -1,376 +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 ListBoxView = IPython.DOMWidgetView.extend({    
+    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 ListBoxView.__super__.update.apply(this);
+            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('ListBoxView', ListBoxView);
+    WidgetManager.register_widget_view('SelectView', SelectView);
 });

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

@@ -1,222 +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({  
+    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);
+            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);
+    WidgetManager.register_widget_view('TextareaView', TextareaView);
 
 
-    var TextBoxView = IPython.DOMWidgetView.extend({  
+    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 TextBoxView.__super__.update.apply(this);
+            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('TextBoxView', TextBoxView);
+    WidgetManager.register_widget_view('TextView', TextView);
 });

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

@@ -1,69 +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.TextBoxWidget()\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

@@ -1,86 +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' +
+        '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_multicontainer.js

@@ -1,108 +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.TextBoxWidget()\n' +
-        'page2 = widgets.TextBoxWidget()\n' +
-        'page3 = widgets.TextBoxWidget()\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.TextBoxWidget()\n' +
         'page2 = widgets.TextBoxWidget()\n' +
         'page3 = widgets.TextBoxWidget()\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

@@ -1,133 +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.ListBoxWidget(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

@@ -1,52 +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.TextBoxWidget(value = "xyz"),\n' +
-        '    widgets.TextAreaWidget(value = "xyz"),\n' +
+        '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

@@ -1,11 +1,11 b''
 from .widget import Widget, DOMWidget, CallbackDispatcher
 
-from .widget_bool import CheckBoxWidget, ToggleButtonWidget
+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, ListBoxWidget
+from .widget_selection import RadioButtonsWidget, ToggleButtonsWidget, DropdownWidget, SelectWidget
 from .widget_selectioncontainer import TabWidget, AccordionWidget
-from .widget_string import HTMLWidget, LatexWidget, TextBoxWidget, TextAreaWidget
+from .widget_string import HTMLWidget, LatexWidget, TextWidget, TextareaWidget

IPython/html/widgets/widget_bool.py

@@ -1,34 +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 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_selection.py

@@ -1,95 +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 ListBoxWidget(_SelectionWidget):
-    _view_name = Unicode('ListBoxView', sync=True)
+class SelectWidget(_SelectionWidget):
+    _view_name = Unicode('SelectView', sync=True)

IPython/html/widgets/widget_string.py

@@ -1,72 +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)
+class TextareaWidget(_StringWidget):
+    _view_name = Unicode('TextareaView', sync=True)
 
     def scroll_to_bottom(self):
         self.send({"method": "scroll_to_bottom"})
 
 
-class TextBoxWidget(_StringWidget):
-    _view_name = Unicode('TextBoxView', sync=True)
+class TextWidget(_StringWidget):
+    _view_name = Unicode('TextView', sync=True)
 
     def __init__(self, **kwargs):
-        super(TextBoxWidget, self).__init__(**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)

examples/widgets/Export As (nbconvert).ipynb

@@ -1,186 +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 textbox Widget without displaying it.  The widget will be used to store the notebook's name which is otherwise only available in the front-end."
+      "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.TextBoxWidget()"
+      "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

@@ -1,248 +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 0x22870d0>"
+        "<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

@@ -1,227 +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 = widgets.TextareaWidget()\n",
       "output_box.set_css(console_style)\n",
       "output_box.set_css('height', '400px')\n",
       "\n",
-      "input_box = widgets.TextBoxWidget()\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():\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

@@ -1,314 +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",
+      "- 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",
-      "- ListBoxWidget\n",
+      "- SelectWidget\n",
       "- HTMLWidget\n",
       "- LatexWidget\n",
-      "- TextAreaWidget\n",
-      "- TextBoxWidget\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",
+        " '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",
-        " 'ListBoxWidget',\n",
         " 'PopupWidget',\n",
         " 'RadioButtonsWidget',\n",
+        " 'SelectWidget',\n",
         " 'TabWidget',\n",
-        " 'TextAreaWidget',\n",
-        " 'TextBoxWidget',\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

@@ -1,276 +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": [
-      {
-       "output_type": "stream",
-       "stream": "stdout",
-       "text": [
-        "1\n"
-       ]
-      },
-      {
-       "output_type": "stream",
-       "stream": "stdout",
-       "text": [
-        "2\n"
-       ]
-      },
-      {
-       "output_type": "stream",
-       "stream": "stdout",
-       "text": [
-        "3\n"
-       ]
-      }
-     ],
+     "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

@@ -1,187 +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.TextBoxWidget(value='hi')\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.TextBoxWidget(description=\"First Name:\")\n",
-      "last = widgets.TextBoxWidget(description=\"Last Name:\")\n",
+      "first = widgets.TextWidget(description=\"First Name:\")\n",
+      "last = widgets.TextWidget(description=\"Last Name:\")\n",
       "\n",
-      "student = widgets.CheckBoxWidget(description=\"Student:\", value=False)\n",
+      "student = widgets.CheckboxWidget(description=\"Student:\", value=False)\n",
       "school_info = widgets.ContainerWidget(visible=False, children=[\n",
-      "    widgets.TextBoxWidget(description=\"School:\"),\n",
+      "    widgets.TextWidget(description=\"School:\"),\n",
       "    widgets.IntTextWidget(description=\"Grade:\", min=0, max=12)\n",
       "    ])\n",
       "\n",
-      "pet = widgets.TextBoxWidget(description=\"Pet's Name:\")\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 5 - Alignment.ipynb

@@ -1,331 +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.TextBoxWidget(description=\"a:\"))\n",
-      "display(widgets.TextBoxWidget(description=\"aa:\"))\n",
-      "display(widgets.TextBoxWidget(description=\"aaa:\"))"
+      "display(widgets.TextWidget(description=\"a:\"))\n",
+      "display(widgets.TextWidget(description=\"aa:\"))\n",
+      "display(widgets.TextWidget(description=\"aaa:\"))"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
-     "prompt_number": 3
+     "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.TextBoxWidget(description=\"a:\"))\n",
-      "display(widgets.TextBoxWidget(description=\"aa:\"))\n",
-      "display(widgets.TextBoxWidget(description=\"aaa:\"))\n",
-      "display(widgets.TextBoxWidget(description=\"aaaaaaaaaaaaaaaaaa:\"))"
+      "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": 4
+     "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.TextBoxWidget(description=\"a:\"))\n",
-      "display(widgets.TextBoxWidget(description=\"aa:\"))\n",
-      "display(widgets.TextBoxWidget(description=\"aaa:\"))\n",
-      "display(widgets.TextBoxWidget())"
+      "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": 5
+     "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": 6
+     "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

@@ -1,1058 +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.TextBoxWidget(description=\"First:\"))\n",
-      "display(widgets.TextBoxWidget(description=\"Last:\"))\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/index.ipynb

@@ -1,69 +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": [
-      "- [Widget Tester](Widget Tester.ipynb)  \n",
       "- [Variable Inspector](Variable Inspector.ipynb)  \n",
       "- [Export As (nbconvert)](Export As (nbconvert%29.ipynb)  \n",
       "- [Nonblocking Console](Nonblocking Console.ipynb)  \n",
-      "- [D3](D3.ipynb)  \n",
       "- [File Upload Widget](File Upload Widget.ipynb)  "
      ]
     }
    ],
    "metadata": {}
   }
  ]
 }
  No newline at end of file