Remove init_widget_js, use require.js for everything

Updated examples
Fixed bug with message throttling

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

@@ -1,127 +1,128 b''
 //----------------------------------------------------------------------------
 //  Copyright (C) 2011  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.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // On document ready
 //============================================================================
 "use strict";
 
 // for the time beeing, we have to pass marked as a parameter here,
 // as injecting require.js make marked not to put itself in the globals,
 // which make both this file fail at setting marked configuration, and textcell.js
 // which search marked into global.
-require(['components/marked/lib/marked'],
+require(['components/marked/lib/marked',
+         'notebook/js/widgets/basic_widgets'],
 
 function (marked) {
 
     window.marked = marked
 
     // monkey patch CM to be able to syntax highlight cell magics
     // bug reported upstream,
     // see https://github.com/marijnh/CodeMirror2/issues/670
     if(CodeMirror.getMode(1,'text/plain').indent == undefined ){
         console.log('patching CM for undefined indent');
         CodeMirror.modes.null = function() {
             return {token: function(stream) {stream.skipToEnd();},indent : function(){return 0}}
         }
     }
 
     CodeMirror.patchedGetMode = function(config, mode){
             var cmmode = CodeMirror.getMode(config, mode);
             if(cmmode.indent == null)
             {
                 console.log('patch mode "' , mode, '" on the fly');
                 cmmode.indent = function(){return 0};
             }
             return cmmode;
         }
     // end monkey patching CodeMirror
 
     IPython.mathjaxutils.init();
 
     $('#ipython-main-app').addClass('border-box-sizing');
     $('div#notebook_panel').addClass('border-box-sizing');
 
     var baseProjectUrl = $('body').data('baseProjectUrl');
     var notebookPath = $('body').data('notebookPath');
     var notebookName = $('body').data('notebookName');
     notebookName = decodeURIComponent(notebookName);
     notebookPath = decodeURIComponent(notebookPath);
     console.log(notebookName);
     if (notebookPath == 'None'){
         notebookPath = "";
     }
 
     IPython.page = new IPython.Page();
     IPython.layout_manager = new IPython.LayoutManager();
     IPython.pager = new IPython.Pager('div#pager', 'div#pager_splitter');
     IPython.quick_help = new IPython.QuickHelp();
     IPython.login_widget = new IPython.LoginWidget('span#login_widget',{baseProjectUrl:baseProjectUrl});
     IPython.notebook = new IPython.Notebook('div#notebook',{baseProjectUrl:baseProjectUrl, notebookPath:notebookPath, notebookName:notebookName});
     IPython.keyboard_manager = new IPython.KeyboardManager();
     IPython.save_widget = new IPython.SaveWidget('span#save_widget');
     IPython.menubar = new IPython.MenuBar('#menubar',{baseProjectUrl:baseProjectUrl, notebookPath: notebookPath})
     IPython.toolbar = new IPython.MainToolBar('#maintoolbar-container')
     IPython.tooltip = new IPython.Tooltip()
     IPython.notification_area = new IPython.NotificationArea('#notification_area')
     IPython.notification_area.init_notification_widgets();
 
     IPython.layout_manager.do_resize();
 
     $('body').append('<div id="fonttest"><pre><span id="test1">x</span>'+
                      '<span id="test2" style="font-weight: bold;">x</span>'+
                      '<span id="test3" style="font-style: italic;">x</span></pre></div>')
     var nh = $('#test1').innerHeight();
     var bh = $('#test2').innerHeight();
     var ih = $('#test3').innerHeight();
     if(nh != bh || nh != ih) {
         $('head').append('<style>.CodeMirror span { vertical-align: bottom; }</style>');
     }
     $('#fonttest').remove();
 
     IPython.page.show();
 
     IPython.layout_manager.do_resize();
     var first_load = function () {
         IPython.layout_manager.do_resize();
         var hash = document.location.hash;
         if (hash) {
             document.location.hash = '';
             document.location.hash = hash;
         }
         IPython.notebook.set_autosave_interval(IPython.notebook.minimum_autosave_interval);
         // only do this once
         $([IPython.events]).off('notebook_loaded.Notebook', first_load);
     };
     
     $([IPython.events]).on('notebook_loaded.Notebook', first_load);
     $([IPython.events]).trigger('app_initialized.NotebookApp');
     IPython.notebook.load_notebook(notebookName, notebookPath);
 
     if (marked) {
         marked.setOptions({
             gfm : true,
             tables: true,
             langPrefix: "language-",
             highlight: function(code, lang) {
                 if (!lang) {
                     // no language, no highlight
                     return code;
                 }
                 var highlighted;
                 try {
                     highlighted = hljs.highlight(lang, code, false);
                 } catch(err) {
                     highlighted = hljs.highlightAuto(code);
                 }
                 return highlighted.value;
             }
         })
     }
 }
 
 );

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

@@ -1,2213 +1,2215 b''
 //----------------------------------------------------------------------------
 //  Copyright (C) 2011  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.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // Notebook
 //============================================================================
 
 var IPython = (function (IPython) {
     "use strict";
 
     var utils = IPython.utils;
 
     /**
      * A notebook contains and manages cells.
      * 
      * @class Notebook
      * @constructor
      * @param {String} selector A jQuery selector for the notebook's DOM element
      * @param {Object} [options] A config object
      */
     var Notebook = function (selector, options) {
         var options = options || {};
         this._baseProjectUrl = options.baseProjectUrl;
         this.notebook_path = options.notebookPath;
         this.notebook_name = options.notebookName;
         this.element = $(selector);
         this.element.scroll();
         this.element.data("notebook", this);
         this.next_prompt_number = 1;
         this.session = null;
         this.kernel = null;
         this.clipboard = null;
         this.undelete_backup = null;
         this.undelete_index = null;
         this.undelete_below = false;
         this.paste_enabled = false;
         // It is important to start out in command mode to match the intial mode
         // of the KeyboardManager.
         this.mode = 'command';
         this.set_dirty(false);
         this.metadata = {};
         this._checkpoint_after_save = false;
         this.last_checkpoint = null;
         this.checkpoints = [];
         this.autosave_interval = 0;
         this.autosave_timer = null;
         // autosave *at most* every two minutes
         this.minimum_autosave_interval = 120000;
         // single worksheet for now
         this.worksheet_metadata = {};
         this.notebook_name_blacklist_re = /[\/\\:]/;
         this.nbformat = 3 // Increment this when changing the nbformat
         this.nbformat_minor = 0 // Increment this when changing the nbformat
         this.style();
         this.create_elements();
         this.bind_events();
     };
 
     /**
      * Tweak the notebook's CSS style.
      * 
      * @method style
      */
     Notebook.prototype.style = function () {
         $('div#notebook').addClass('border-box-sizing');
     };
 
     /**
      * Get the root URL of the notebook server.
      * 
      * @method baseProjectUrl
      * @return {String} The base project URL
      */
     Notebook.prototype.baseProjectUrl = function() {
         return this._baseProjectUrl || $('body').data('baseProjectUrl');
     };
 
     Notebook.prototype.notebookName = function() {
         return $('body').data('notebookName');
     };
     
     Notebook.prototype.notebookPath = function() {
         return $('body').data('notebookPath');
     };
     
     /**
      * Create an HTML and CSS representation of the notebook.
      * 
      * @method create_elements
      */
     Notebook.prototype.create_elements = function () {
         var that = this;
         this.element.attr('tabindex','-1');
         this.container = $("<div/>").addClass("container").attr("id", "notebook-container");
         // We add this end_space div to the end of the notebook div to:
         // i) provide a margin between the last cell and the end of the notebook
         // ii) to prevent the div from scrolling up when the last cell is being
         // edited, but is too low on the page, which browsers will do automatically.
         var end_space = $('<div/>').addClass('end_space');
         end_space.dblclick(function (e) {
             var ncells = that.ncells();
             that.insert_cell_below('code',ncells-1);
         });
         this.element.append(this.container);
         this.container.append(end_space);
     };
 
     /**
      * Bind JavaScript events: key presses and custom IPython events.
      * 
      * @method bind_events
      */
     Notebook.prototype.bind_events = function () {
         var that = this;
 
         $([IPython.events]).on('set_next_input.Notebook', function (event, data) {
             var index = that.find_cell_index(data.cell);
             var new_cell = that.insert_cell_below('code',index);
             new_cell.set_text(data.text);
             that.dirty = true;
         });
 
         $([IPython.events]).on('set_dirty.Notebook', function (event, data) {
             that.dirty = data.value;
         });
 
         $([IPython.events]).on('select.Cell', function (event, data) {
             var index = that.find_cell_index(data.cell);
             that.select(index);
         });
 
         $([IPython.events]).on('edit_mode.Cell', function (event, data) {
             var index = that.find_cell_index(data.cell);
             that.select(index);
             that.edit_mode();
         });
 
         $([IPython.events]).on('command_mode.Cell', function (event, data) {
             that.command_mode();
         });
 
         $([IPython.events]).on('status_autorestarting.Kernel', function () {
             IPython.dialog.modal({
                 title: "Kernel Restarting",
                 body: "The kernel appears to have died. It will restart automatically.",
                 buttons: {
                     OK : {
                         class : "btn-primary"
                     }
                 }
             });
         });
 
         var collapse_time = function (time) {
             var app_height = $('#ipython-main-app').height(); // content height
             var splitter_height = $('div#pager_splitter').outerHeight(true);
             var new_height = app_height - splitter_height;
             that.element.animate({height : new_height + 'px'}, time);
         };
 
         this.element.bind('collapse_pager', function (event, extrap) {
             var time = (extrap != undefined) ? ((extrap.duration != undefined ) ? extrap.duration : 'fast') : 'fast';
             collapse_time(time);
         });
 
         var expand_time = function (time) {
             var app_height = $('#ipython-main-app').height(); // content height
             var splitter_height = $('div#pager_splitter').outerHeight(true);
             var pager_height = $('div#pager').outerHeight(true);
             var new_height = app_height - pager_height - splitter_height;
             that.element.animate({height : new_height + 'px'}, time);
         };
 
         this.element.bind('expand_pager', function (event, extrap) {
             var time = (extrap != undefined) ? ((extrap.duration != undefined ) ? extrap.duration : 'fast') : 'fast';
             expand_time(time);
         });
         
         // Firefox 22 broke $(window).on("beforeunload")
         // I'm not sure why or how.
         window.onbeforeunload = function (e) {
             // TODO: Make killing the kernel configurable.
             var kill_kernel = false;
             if (kill_kernel) {
                 that.session.kill_kernel();
             }
             // if we are autosaving, trigger an autosave on nav-away.
             // still warn, because if we don't the autosave may fail.
             if (that.dirty) {
                 if ( that.autosave_interval ) {
                     // schedule autosave in a timeout
                     // this gives you a chance to forcefully discard changes
                     // by reloading the page if you *really* want to.
                     // the timer doesn't start until you *dismiss* the dialog.
                     setTimeout(function () {
                         if (that.dirty) {
                             that.save_notebook();
                         }
                     }, 1000);
                     return "Autosave in progress, latest changes may be lost.";
                 } else {
                     return "Unsaved changes will be lost.";
                 }
             };
             // Null is the *only* return value that will make the browser not
             // pop up the "don't leave" dialog.
             return null;
         };
     };
 
     /**
      * Set the dirty flag, and trigger the set_dirty.Notebook event
      * 
      * @method set_dirty
      */
     Notebook.prototype.set_dirty = function (value) {
         if (value === undefined) {
             value = true;
         }
         if (this.dirty == value) {
             return;
         }
         $([IPython.events]).trigger('set_dirty.Notebook', {value: value});
     };
 
     /**
      * Scroll the top of the page to a given cell.
      * 
      * @method scroll_to_cell
      * @param {Number} cell_number An index of the cell to view
      * @param {Number} time Animation time in milliseconds
      * @return {Number} Pixel offset from the top of the container
      */
     Notebook.prototype.scroll_to_cell = function (cell_number, time) {
         var cells = this.get_cells();
         var time = time || 0;
         cell_number = Math.min(cells.length-1,cell_number);
         cell_number = Math.max(0             ,cell_number);
         var scroll_value = cells[cell_number].element.position().top-cells[0].element.position().top ;
         this.element.animate({scrollTop:scroll_value}, time);
         return scroll_value;
     };
 
     /**
      * Scroll to the bottom of the page.
      * 
      * @method scroll_to_bottom
      */
     Notebook.prototype.scroll_to_bottom = function () {
         this.element.animate({scrollTop:this.element.get(0).scrollHeight}, 0);
     };
 
     /**
      * Scroll to the top of the page.
      * 
      * @method scroll_to_top
      */
     Notebook.prototype.scroll_to_top = function () {
         this.element.animate({scrollTop:0}, 0);
     };
 
     // Edit Notebook metadata
 
     Notebook.prototype.edit_metadata = function () {
         var that = this;
         IPython.dialog.edit_metadata(this.metadata, function (md) {
             that.metadata = md;
         }, 'Notebook');
     };
 
     // Cell indexing, retrieval, etc.
 
     /**
      * Get all cell elements in the notebook.
      * 
      * @method get_cell_elements
      * @return {jQuery} A selector of all cell elements
      */
     Notebook.prototype.get_cell_elements = function () {
         return this.container.children("div.cell");
     };
 
     /**
      * Get a particular cell element.
      * 
      * @method get_cell_element
      * @param {Number} index An index of a cell to select
      * @return {jQuery} A selector of the given cell.
      */
     Notebook.prototype.get_cell_element = function (index) {
         var result = null;
         var e = this.get_cell_elements().eq(index);
         if (e.length !== 0) {
             result = e;
         }
         return result;
     };
 
     /**
      * Count the cells in this notebook.
      * 
      * @method ncells
      * @return {Number} The number of cells in this notebook
      */
     Notebook.prototype.ncells = function () {
         return this.get_cell_elements().length;
     };
 
     /**
      * Get all Cell objects in this notebook.
      * 
      * @method get_cells
      * @return {Array} This notebook's Cell objects
      */
     // TODO: we are often calling cells as cells()[i], which we should optimize
     // to cells(i) or a new method.
     Notebook.prototype.get_cells = function () {
         return this.get_cell_elements().toArray().map(function (e) {
             return $(e).data("cell");
         });
     };
 
     /**
      * Get a Cell object from this notebook.
      * 
      * @method get_cell
      * @param {Number} index An index of a cell to retrieve
      * @return {Cell} A particular cell
      */
     Notebook.prototype.get_cell = function (index) {
         var result = null;
         var ce = this.get_cell_element(index);
         if (ce !== null) {
             result = ce.data('cell');
         }
         return result;
     }
 
     /**
      * Get the cell below a given cell.
      * 
      * @method get_next_cell
      * @param {Cell} cell The provided cell
      * @return {Cell} The next cell
      */
     Notebook.prototype.get_next_cell = function (cell) {
         var result = null;
         var index = this.find_cell_index(cell);
         if (this.is_valid_cell_index(index+1)) {
             result = this.get_cell(index+1);
         }
         return result;
     }
 
     /**
      * Get the cell above a given cell.
      * 
      * @method get_prev_cell
      * @param {Cell} cell The provided cell
      * @return {Cell} The previous cell
      */
     Notebook.prototype.get_prev_cell = function (cell) {
         // TODO: off-by-one
         // nb.get_prev_cell(nb.get_cell(1)) is null
         var result = null;
         var index = this.find_cell_index(cell);
         if (index !== null && index > 1) {
             result = this.get_cell(index-1);
         }
         return result;
     }
     
     /**
      * Get the numeric index of a given cell.
      * 
      * @method find_cell_index
      * @param {Cell} cell The provided cell
      * @return {Number} The cell's numeric index
      */
     Notebook.prototype.find_cell_index = function (cell) {
         var result = null;
         this.get_cell_elements().filter(function (index) {
             if ($(this).data("cell") === cell) {
                 result = index;
             };
         });
         return result;
     };
 
     /**
      * Get a given index , or the selected index if none is provided.
      * 
      * @method index_or_selected
      * @param {Number} index A cell's index
      * @return {Number} The given index, or selected index if none is provided.
      */
     Notebook.prototype.index_or_selected = function (index) {
         var i;
         if (index === undefined || index === null) {
             i = this.get_selected_index();
             if (i === null) {
                 i = 0;
             }
         } else {
             i = index;
         }
         return i;
     };
 
     /**
      * Get the currently selected cell.
      * @method get_selected_cell
      * @return {Cell} The selected cell
      */
     Notebook.prototype.get_selected_cell = function () {
         var index = this.get_selected_index();
         return this.get_cell(index);
     };
 
     /**
      * Check whether a cell index is valid.
      * 
      * @method is_valid_cell_index
      * @param {Number} index A cell index
      * @return True if the index is valid, false otherwise
      */
     Notebook.prototype.is_valid_cell_index = function (index) {
         if (index !== null && index >= 0 && index < this.ncells()) {
             return true;
         } else {
             return false;
         };
     }
 
     /**
      * Get the index of the currently selected cell.
      
      * @method get_selected_index
      * @return {Number} The selected cell's numeric index
      */
     Notebook.prototype.get_selected_index = function () {
         var result = null;
         this.get_cell_elements().filter(function (index) {
             if ($(this).data("cell").selected === true) {
                 result = index;
             };
         });
         return result;
     };
 
 
     // Cell selection.
 
     /**
      * Programmatically select a cell.
      * 
      * @method select
      * @param {Number} index A cell's index
      * @return {Notebook} This notebook
      */
     Notebook.prototype.select = function (index) {
         if (this.is_valid_cell_index(index)) {
             var sindex = this.get_selected_index()
             if (sindex !== null && index !== sindex) {
                 this.command_mode();
                 this.get_cell(sindex).unselect();
             };
             var cell = this.get_cell(index);
             cell.select();
             if (cell.cell_type === 'heading') {
                 $([IPython.events]).trigger('selected_cell_type_changed.Notebook',
                     {'cell_type':cell.cell_type,level:cell.level}
                 );
             } else {
                 $([IPython.events]).trigger('selected_cell_type_changed.Notebook',
                     {'cell_type':cell.cell_type}
                 );
             };
         };
         return this;
     };
 
     /**
      * Programmatically select the next cell.
      *
      * @method select_next
      * @return {Notebook} This notebook
      */
     Notebook.prototype.select_next = function () {
         var index = this.get_selected_index();
         this.select(index+1);
         return this;
     };
 
     /**
      * Programmatically select the previous cell.
      *
      * @method select_prev
      * @return {Notebook} This notebook
      */
     Notebook.prototype.select_prev = function () {
         var index = this.get_selected_index();
         this.select(index-1);
         return this;
     };
 
 
     // Edit/Command mode
 
     Notebook.prototype.get_edit_index = function () {
         var result = null;
         this.get_cell_elements().filter(function (index) {
             if ($(this).data("cell").mode === 'edit') {
                 result = index;
             };
         });
         return result;
     };
 
     Notebook.prototype.command_mode = function () {
         if (this.mode !== 'command') {
             var index = this.get_edit_index();
             var cell = this.get_cell(index);
             if (cell) {
                 cell.command_mode();
             };
             this.mode = 'command';
             IPython.keyboard_manager.command_mode();
         };
     };
 
     Notebook.prototype.edit_mode = function () {
         if (this.mode !== 'edit') {
             var cell = this.get_selected_cell();
             if (cell === null) {return;}  // No cell is selected
             // We need to set the mode to edit to prevent reentering this method
             // when cell.edit_mode() is called below.
             this.mode = 'edit';
             IPython.keyboard_manager.edit_mode();
             cell.edit_mode();
         };
     };
 
     Notebook.prototype.focus_cell = function () {
         var cell = this.get_selected_cell();
         if (cell === null) {return;}  // No cell is selected
         cell.focus_cell();
     };
 
     // Cell movement
 
     /**
      * Move given (or selected) cell up and select it.
      * 
      * @method move_cell_up
      * @param [index] {integer} cell index
      * @return {Notebook} This notebook
      **/
     Notebook.prototype.move_cell_up = function (index) {
         var i = this.index_or_selected(index);
         if (this.is_valid_cell_index(i) && i > 0) {
             var pivot = this.get_cell_element(i-1);
             var tomove = this.get_cell_element(i);
             if (pivot !== null && tomove !== null) {
                 tomove.detach();
                 pivot.before(tomove);
                 this.select(i-1);
                 var cell = this.get_selected_cell();
                 cell.focus_cell();
             };
             this.set_dirty(true);
         };
         return this;
     };
 
 
     /**
      * Move given (or selected) cell down and select it
      * 
      * @method move_cell_down
      * @param [index] {integer} cell index
      * @return {Notebook} This notebook
      **/
     Notebook.prototype.move_cell_down = function (index) {
         var i = this.index_or_selected(index);
         if (this.is_valid_cell_index(i) && this.is_valid_cell_index(i+1)) {
             var pivot = this.get_cell_element(i+1);
             var tomove = this.get_cell_element(i);
             if (pivot !== null && tomove !== null) {
                 tomove.detach();
                 pivot.after(tomove);
                 this.select(i+1);
                 var cell = this.get_selected_cell();
                 cell.focus_cell();
             };
         };
         this.set_dirty();
         return this;
     };
 
 
     // Insertion, deletion.
 
     /**
      * Delete a cell from the notebook.
      * 
      * @method delete_cell
      * @param [index] A cell's numeric index
      * @return {Notebook} This notebook
      */
     Notebook.prototype.delete_cell = function (index) {
         var i = this.index_or_selected(index);
         var cell = this.get_selected_cell();
         this.undelete_backup = cell.toJSON();
         $('#undelete_cell').removeClass('disabled');
         if (this.is_valid_cell_index(i)) {
             var old_ncells = this.ncells();
             var ce = this.get_cell_element(i);
             ce.remove();
             if (i === 0) {
                 // Always make sure we have at least one cell.
                 if (old_ncells === 1) {
                     this.insert_cell_below('code');
                 }
                 this.select(0);
                 this.undelete_index = 0;
                 this.undelete_below = false;
             } else if (i === old_ncells-1 && i !== 0) {
                 this.select(i-1);
                 this.undelete_index = i - 1;
                 this.undelete_below = true;
             } else {
                 this.select(i);
                 this.undelete_index = i;
                 this.undelete_below = false;
             };
             $([IPython.events]).trigger('delete.Cell', {'cell': cell, 'index': i});
             this.set_dirty(true);
         };
         return this;
     };
 
     /**
      * Restore the most recently deleted cell.
      * 
      * @method undelete
      */
     Notebook.prototype.undelete_cell = function() {
         if (this.undelete_backup !== null && this.undelete_index !== null) {
             var current_index = this.get_selected_index();
             if (this.undelete_index < current_index) {
                 current_index = current_index + 1;
             }
             if (this.undelete_index >= this.ncells()) {
                 this.select(this.ncells() - 1);
             }
             else {
                 this.select(this.undelete_index);
             }
             var cell_data = this.undelete_backup;
             var new_cell = null;
             if (this.undelete_below) {
                 new_cell = this.insert_cell_below(cell_data.cell_type);
             } else {
                 new_cell = this.insert_cell_above(cell_data.cell_type);
             }
             new_cell.fromJSON(cell_data);
             if (this.undelete_below) {
                 this.select(current_index+1);
             } else {
                 this.select(current_index);
             }
             this.undelete_backup = null;
             this.undelete_index = null;
         }
         $('#undelete_cell').addClass('disabled');
     }
 
     /**
      * Insert a cell so that after insertion the cell is at given index.
      *
      * Similar to insert_above, but index parameter is mandatory
      *
      * Index will be brought back into the accissible range [0,n]
      *
      * @method insert_cell_at_index
      * @param type {string} in ['code','markdown','heading']
      * @param [index] {int} a valid index where to inser cell
      *
      * @return cell {cell|null} created cell or null
      **/
     Notebook.prototype.insert_cell_at_index = function(type, index){
 
         var ncells = this.ncells();
         var index = Math.min(index,ncells);
             index = Math.max(index,0);
         var cell = null;
 
         if (ncells === 0 || this.is_valid_cell_index(index) || index === ncells) {
             if (type === 'code') {
                 cell = new IPython.CodeCell(this.kernel);
                 cell.set_input_prompt();
             } else if (type === 'markdown') {
                 cell = new IPython.MarkdownCell();
             } else if (type === 'raw') {
                 cell = new IPython.RawCell();
             } else if (type === 'heading') {
                 cell = new IPython.HeadingCell();
             }
 
             if(this._insert_element_at_index(cell.element,index)) {
                 cell.render();
                 $([IPython.events]).trigger('create.Cell', {'cell': cell, 'index': index});
                 cell.refresh();
                 // We used to select the cell after we refresh it, but there
                 // are now cases were this method is called where select is
                 // not appropriate. The selection logic should be handled by the
                 // caller of the the top level insert_cell methods.
                 this.set_dirty(true);
             }
         }
         return cell;
 
     };
 
     /**
      * Insert an element at given cell index.
      *
      * @method _insert_element_at_index
      * @param element {dom element} a cell element
      * @param [index] {int} a valid index where to inser cell
      * @private
      *
      * return true if everything whent fine.
      **/
     Notebook.prototype._insert_element_at_index = function(element, index){
         if (element === undefined){
             return false;
         }
 
         var ncells = this.ncells();
 
         if (ncells === 0) {
             // special case append if empty
             this.element.find('div.end_space').before(element);
         } else if ( ncells === index ) {
             // special case append it the end, but not empty
             this.get_cell_element(index-1).after(element);
         } else if (this.is_valid_cell_index(index)) {
             // otherwise always somewhere to append to
             this.get_cell_element(index).before(element);
         } else {
             return false;
         }
 
         if (this.undelete_index !== null && index <= this.undelete_index) {
             this.undelete_index = this.undelete_index + 1;
             this.set_dirty(true);
         }
         return true;
     };
 
     /**
      * Insert a cell of given type above given index, or at top
      * of notebook if index smaller than 0.
      *
      * default index value is the one of currently selected cell
      *
      * @method insert_cell_above
      * @param type {string} cell type
      * @param [index] {integer}
      *
      * @return handle to created cell or null
      **/
     Notebook.prototype.insert_cell_above = function (type, index) {
         index = this.index_or_selected(index);
         return this.insert_cell_at_index(type, index);
     };
 
     /**
      * Insert a cell of given type below given index, or at bottom
      * of notebook if index greater thatn number of cell
      *
      * default index value is the one of currently selected cell
      *
      * @method insert_cell_below
      * @param type {string} cell type
      * @param [index] {integer}
      *
      * @return handle to created cell or null
      *
      **/
     Notebook.prototype.insert_cell_below = function (type, index) {
         index = this.index_or_selected(index);
         return this.insert_cell_at_index(type, index+1);
     };
 
 
     /**
      * Insert cell at end of notebook
      *
      * @method insert_cell_at_bottom
      * @param {String} type cell type
      *
      * @return the added cell; or null
      **/
     Notebook.prototype.insert_cell_at_bottom = function (type){
         var len = this.ncells();
         return this.insert_cell_below(type,len-1);
     };
 
     /**
      * Turn a cell into a code cell.
      * 
      * @method to_code
      * @param {Number} [index] A cell's index
      */
     Notebook.prototype.to_code = function (index) {
         var i = this.index_or_selected(index);
         if (this.is_valid_cell_index(i)) {
             var source_element = this.get_cell_element(i);
             var source_cell = source_element.data("cell");
             if (!(source_cell instanceof IPython.CodeCell)) {
                 var target_cell = this.insert_cell_below('code',i);
                 var text = source_cell.get_text();
                 if (text === source_cell.placeholder) {
                     text = '';
                 }
                 target_cell.set_text(text);
                 // make this value the starting point, so that we can only undo
                 // to this state, instead of a blank cell
                 target_cell.code_mirror.clearHistory();
                 source_element.remove();
                 this.select(i);
                 this.edit_mode();
                 this.set_dirty(true);
             };
         };
     };
 
     /**
      * Turn a cell into a Markdown cell.
      * 
      * @method to_markdown
      * @param {Number} [index] A cell's index
      */
     Notebook.prototype.to_markdown = function (index) {
         var i = this.index_or_selected(index);
         if (this.is_valid_cell_index(i)) {
             var source_element = this.get_cell_element(i);
             var source_cell = source_element.data("cell");
             if (!(source_cell instanceof IPython.MarkdownCell)) {
                 var target_cell = this.insert_cell_below('markdown',i);
                 var text = source_cell.get_text();
                 if (text === source_cell.placeholder) {
                     text = '';
                 };
                 // We must show the editor before setting its contents
                 target_cell.unrender();
                 target_cell.set_text(text);
                 // make this value the starting point, so that we can only undo
                 // to this state, instead of a blank cell
                 target_cell.code_mirror.clearHistory();
                 source_element.remove();
                 this.select(i);
                 this.edit_mode();
                 this.set_dirty(true);
             };
         };
     };
 
     /**
      * Turn a cell into a raw text cell.
      * 
      * @method to_raw
      * @param {Number} [index] A cell's index
      */
     Notebook.prototype.to_raw = function (index) {
         var i = this.index_or_selected(index);
         if (this.is_valid_cell_index(i)) {
             var source_element = this.get_cell_element(i);
             var source_cell = source_element.data("cell");
             var target_cell = null;
             if (!(source_cell instanceof IPython.RawCell)) {
                 target_cell = this.insert_cell_below('raw',i);
                 var text = source_cell.get_text();
                 if (text === source_cell.placeholder) {
                     text = '';
                 };
                 // We must show the editor before setting its contents
                 target_cell.unrender();
                 target_cell.set_text(text);
                 // make this value the starting point, so that we can only undo
                 // to this state, instead of a blank cell
                 target_cell.code_mirror.clearHistory();
                 source_element.remove();
                 this.select(i);
                 this.edit_mode();
                 this.set_dirty(true);
             };
         };
     };
 
     /**
      * Turn a cell into a heading cell.
      * 
      * @method to_heading
      * @param {Number} [index] A cell's index
      * @param {Number} [level] A heading level (e.g., 1 becomes &lt;h1&gt;)
      */
     Notebook.prototype.to_heading = function (index, level) {
         level = level || 1;
         var i = this.index_or_selected(index);
         if (this.is_valid_cell_index(i)) {
             var source_element = this.get_cell_element(i);
             var source_cell = source_element.data("cell");
             var target_cell = null;
             if (source_cell instanceof IPython.HeadingCell) {
                 source_cell.set_level(level);
             } else {
                 target_cell = this.insert_cell_below('heading',i);
                 var text = source_cell.get_text();
                 if (text === source_cell.placeholder) {
                     text = '';
                 };
                 // We must show the editor before setting its contents
                 target_cell.set_level(level);
                 target_cell.unrender();
                 target_cell.set_text(text);
                 // make this value the starting point, so that we can only undo
                 // to this state, instead of a blank cell
                 target_cell.code_mirror.clearHistory();
                 source_element.remove();
                 this.select(i);
             };
             this.edit_mode();
             this.set_dirty(true);
             $([IPython.events]).trigger('selected_cell_type_changed.Notebook',
                 {'cell_type':'heading',level:level}
             );
         };
     };
 
 
     // Cut/Copy/Paste
 
     /**
      * Enable UI elements for pasting cells.
      * 
      * @method enable_paste
      */
     Notebook.prototype.enable_paste = function () {
         var that = this;
         if (!this.paste_enabled) {
             $('#paste_cell_replace').removeClass('disabled')
                 .on('click', function () {that.paste_cell_replace();});
             $('#paste_cell_above').removeClass('disabled')
                 .on('click', function () {that.paste_cell_above();});
             $('#paste_cell_below').removeClass('disabled')
                 .on('click', function () {that.paste_cell_below();});
             this.paste_enabled = true;
         };
     };
 
     /**
      * Disable UI elements for pasting cells.
      * 
      * @method disable_paste
      */
     Notebook.prototype.disable_paste = function () {
         if (this.paste_enabled) {
             $('#paste_cell_replace').addClass('disabled').off('click');
             $('#paste_cell_above').addClass('disabled').off('click');
             $('#paste_cell_below').addClass('disabled').off('click');
             this.paste_enabled = false;
         };
     };
 
     /**
      * Cut a cell.
      * 
      * @method cut_cell
      */
     Notebook.prototype.cut_cell = function () {
         this.copy_cell();
         this.delete_cell();
     }
 
     /**
      * Copy a cell.
      * 
      * @method copy_cell
      */
     Notebook.prototype.copy_cell = function () {
         var cell = this.get_selected_cell();
         this.clipboard = cell.toJSON();
         this.enable_paste();
     };
 
     /**
      * Replace the selected cell with a cell in the clipboard.
      * 
      * @method paste_cell_replace
      */
     Notebook.prototype.paste_cell_replace = function () {
         if (this.clipboard !== null && this.paste_enabled) {
             var cell_data = this.clipboard;
             var new_cell = this.insert_cell_above(cell_data.cell_type);
             new_cell.fromJSON(cell_data);
             var old_cell = this.get_next_cell(new_cell);
             this.delete_cell(this.find_cell_index(old_cell));
             this.select(this.find_cell_index(new_cell));
         };
     };
 
     /**
      * Paste a cell from the clipboard above the selected cell.
      * 
      * @method paste_cell_above
      */
     Notebook.prototype.paste_cell_above = function () {
         if (this.clipboard !== null && this.paste_enabled) {
             var cell_data = this.clipboard;
             var new_cell = this.insert_cell_above(cell_data.cell_type);
             new_cell.fromJSON(cell_data);
         };
     };
 
     /**
      * Paste a cell from the clipboard below the selected cell.
      * 
      * @method paste_cell_below
      */
     Notebook.prototype.paste_cell_below = function () {
         if (this.clipboard !== null && this.paste_enabled) {
             var cell_data = this.clipboard;
             var new_cell = this.insert_cell_below(cell_data.cell_type);
             new_cell.fromJSON(cell_data);
         };
     };
 
     // Split/merge
 
     /**
      * Split the selected cell into two, at the cursor.
      * 
      * @method split_cell
      */
     Notebook.prototype.split_cell = function () {
         var mdc = IPython.MarkdownCell;
         var rc = IPython.RawCell;
         var cell = this.get_selected_cell();
         if (cell.is_splittable()) {
             var texta = cell.get_pre_cursor();
             var textb = cell.get_post_cursor();
             if (cell instanceof IPython.CodeCell) {
                 // In this case the operations keep the notebook in its existing mode
                 // so we don't need to do any post-op mode changes.
                 cell.set_text(textb);
                 var new_cell = this.insert_cell_above('code');
                 new_cell.set_text(texta);
             } else if ((cell instanceof mdc && !cell.rendered) || (cell instanceof rc)) {
                 // We know cell is !rendered so we can use set_text.
                 cell.set_text(textb);
                 var new_cell = this.insert_cell_above(cell.cell_type);
                 // Unrender the new cell so we can call set_text.
                 new_cell.unrender();
                 new_cell.set_text(texta);
             }
         };
     };
 
     /**
      * Combine the selected cell into the cell above it.
      * 
      * @method merge_cell_above
      */
     Notebook.prototype.merge_cell_above = function () {
         var mdc = IPython.MarkdownCell;
         var rc = IPython.RawCell;
         var index = this.get_selected_index();
         var cell = this.get_cell(index);
         var render = cell.rendered;
         if (!cell.is_mergeable()) {
             return;
         }
         if (index > 0) {
             var upper_cell = this.get_cell(index-1);
             if (!upper_cell.is_mergeable()) {
                 return;
             }
             var upper_text = upper_cell.get_text();
             var text = cell.get_text();
             if (cell instanceof IPython.CodeCell) {
                 cell.set_text(upper_text+'\n'+text);
             } else if ((cell instanceof mdc) || (cell instanceof rc)) {
                 cell.unrender(); // Must unrender before we set_text.
                 cell.set_text(upper_text+'\n\n'+text);
                 if (render) {
                     // The rendered state of the final cell should match
                     // that of the original selected cell;
                     cell.render();
                 }
             };
             this.delete_cell(index-1);
             this.select(this.find_cell_index(cell));
         };
     };
 
     /**
      * Combine the selected cell into the cell below it.
      * 
      * @method merge_cell_below
      */
     Notebook.prototype.merge_cell_below = function () {
         var mdc = IPython.MarkdownCell;
         var rc = IPython.RawCell;
         var index = this.get_selected_index();
         var cell = this.get_cell(index);
         var render = cell.rendered;
         if (!cell.is_mergeable()) {
             return;
         }
         if (index < this.ncells()-1) {
             var lower_cell = this.get_cell(index+1);
             if (!lower_cell.is_mergeable()) {
                 return;
             }
             var lower_text = lower_cell.get_text();
             var text = cell.get_text();
             if (cell instanceof IPython.CodeCell) {
                 cell.set_text(text+'\n'+lower_text);
             } else if ((cell instanceof mdc) || (cell instanceof rc)) {
                 cell.unrender(); // Must unrender before we set_text.
                 cell.set_text(text+'\n\n'+lower_text);
                 if (render) {
                     // The rendered state of the final cell should match
                     // that of the original selected cell;
                     cell.render();
                 }
             };
             this.delete_cell(index+1);
             this.select(this.find_cell_index(cell));
         };
     };
 
 
     // Cell collapsing and output clearing
 
     /**
      * Hide a cell's output.
      * 
      * @method collapse
      * @param {Number} index A cell's numeric index
      */
     Notebook.prototype.collapse = function (index) {
         var i = this.index_or_selected(index);
         this.get_cell(i).collapse();
         this.set_dirty(true);
     };
 
     /**
      * Show a cell's output.
      * 
      * @method expand
      * @param {Number} index A cell's numeric index
      */
     Notebook.prototype.expand = function (index) {
         var i = this.index_or_selected(index);
         this.get_cell(i).expand();
         this.set_dirty(true);
     };
 
     /** Toggle whether a cell's output is collapsed or expanded.
      * 
      * @method toggle_output
      * @param {Number} index A cell's numeric index
      */
     Notebook.prototype.toggle_output = function (index) {
         var i = this.index_or_selected(index);
         this.get_cell(i).toggle_output();
         this.set_dirty(true);
     };
 
     /**
      * Toggle a scrollbar for long cell outputs.
      * 
      * @method toggle_output_scroll
      * @param {Number} index A cell's numeric index
      */
     Notebook.prototype.toggle_output_scroll = function (index) {
         var i = this.index_or_selected(index);
         this.get_cell(i).toggle_output_scroll();
     };
 
     /**
      * Hide each code cell's output area.
      * 
      * @method collapse_all_output
      */
     Notebook.prototype.collapse_all_output = function () {
         var ncells = this.ncells();
         var cells = this.get_cells();
         for (var i=0; i<ncells; i++) {
             if (cells[i] instanceof IPython.CodeCell) {
                 cells[i].output_area.collapse();
             }
         };
         // this should not be set if the `collapse` key is removed from nbformat
         this.set_dirty(true);
     };
 
     /**
      * Expand each code cell's output area, and add a scrollbar for long output.
      * 
      * @method scroll_all_output
      */
     Notebook.prototype.scroll_all_output = function () {
         var ncells = this.ncells();
         var cells = this.get_cells();
         for (var i=0; i<ncells; i++) {
             if (cells[i] instanceof IPython.CodeCell) {
                 cells[i].output_area.expand();
                 cells[i].output_area.scroll_if_long();
             }
         };
         // this should not be set if the `collapse` key is removed from nbformat
         this.set_dirty(true);
     };
 
     /**
      * Expand each code cell's output area, and remove scrollbars.
      * 
      * @method expand_all_output
      */
     Notebook.prototype.expand_all_output = function () {
         var ncells = this.ncells();
         var cells = this.get_cells();
         for (var i=0; i<ncells; i++) {
             if (cells[i] instanceof IPython.CodeCell) {
                 cells[i].output_area.expand();
                 cells[i].output_area.unscroll_area();
             }
         };
         // this should not be set if the `collapse` key is removed from nbformat
         this.set_dirty(true);
     };
 
     /**
      * Clear each code cell's output area.
      * 
      * @method clear_all_output
      */
     Notebook.prototype.clear_all_output = function () {
         var ncells = this.ncells();
         var cells = this.get_cells();
         for (var i=0; i<ncells; i++) {
             if (cells[i] instanceof IPython.CodeCell) {
                 cells[i].clear_output();
                 // Make all In[] prompts blank, as well
                 // TODO: make this configurable (via checkbox?)
                 cells[i].set_input_prompt();
             }
         };
         this.set_dirty(true);
     };
 
 
     // Other cell functions: line numbers, ...
 
     /**
      * Toggle line numbers in the selected cell's input area.
      * 
      * @method cell_toggle_line_numbers
      */
     Notebook.prototype.cell_toggle_line_numbers = function() {
         this.get_selected_cell().toggle_line_numbers();
     };
 
     // Session related things
 
     /**
      * Start a new session and set it on each code cell.
      * 
      * @method start_session
      */
     Notebook.prototype.start_session = function () {
         this.session = new IPython.Session(this.notebook_name, this.notebook_path, this);
         this.session.start($.proxy(this._session_started, this));
     };
 
 
     /**
-     * Once a session is started, link the code cells to the kernel
+     * Once a session is started, link the code cells to the kernel and pass the 
+     * comm manager to the widget manager
      *
      */
     Notebook.prototype._session_started = function(){
         this.kernel = this.session.kernel;
+        IPython.widget_manager.attach_comm_manager(this.kernel.comm_manager);
         var ncells = this.ncells();
         for (var i=0; i<ncells; i++) {
             var cell = this.get_cell(i);
             if (cell instanceof IPython.CodeCell) {
                 cell.set_kernel(this.session.kernel);
             };
         };  
     };
     
     /**
      * Prompt the user to restart the IPython kernel.
      * 
      * @method restart_kernel
      */
     Notebook.prototype.restart_kernel = function () {
         var that = this;
         IPython.dialog.modal({
             title : "Restart kernel or continue running?",
             body : $("<p/>").html(
                 'Do you want to restart the current kernel?  You will lose all variables defined in it.'
             ),
             buttons : {
                 "Continue running" : {},
                 "Restart" : {
                     "class" : "btn-danger",
                     "click" : function() {
                         that.session.restart_kernel();
                     }
                 }
             }
         });
     };
     
     /**
      * Execute or render cell outputs and go into command mode.
      * 
      * @method execute_cell
      */
     Notebook.prototype.execute_cell = function () {
         // mode = shift, ctrl, alt
         var cell = this.get_selected_cell();
         var cell_index = this.find_cell_index(cell);
         
         cell.execute();
         this.command_mode();
         cell.focus_cell();
         this.set_dirty(true);
     }
 
     /**
      * Execute or render cell outputs and insert a new cell below.
      * 
      * @method execute_cell_and_insert_below
      */
     Notebook.prototype.execute_cell_and_insert_below = function () {
         var cell = this.get_selected_cell();
         var cell_index = this.find_cell_index(cell);
         
         cell.execute();
 
         // If we are at the end always insert a new cell and return
         if (cell_index === (this.ncells()-1)) {
             this.insert_cell_below('code');
             this.select(cell_index+1);
             this.edit_mode();
             this.scroll_to_bottom();
             this.set_dirty(true);
             return;
         }
   
         // Only insert a new cell, if we ended up in an already populated cell
         var next_text = this.get_cell(cell_index+1).get_text();
         if (/\S/.test(next_text) === true) {
             this.insert_cell_below('code');
         }
         this.select(cell_index+1);
         this.edit_mode();
         this.set_dirty(true);
     };
 
     /**
      * Execute or render cell outputs and select the next cell.
      * 
      * @method execute_cell_and_select_below
      */
     Notebook.prototype.execute_cell_and_select_below = function () {
 
         var cell = this.get_selected_cell();
         var cell_index = this.find_cell_index(cell);
         
         cell.execute();
 
         // If we are at the end always insert a new cell and return
         if (cell_index === (this.ncells()-1)) {
             this.insert_cell_below('code');
             this.select(cell_index+1);
             this.edit_mode();
             this.scroll_to_bottom();
             this.set_dirty(true);
             return;
         }
 
         this.select(cell_index+1);
         this.get_cell(cell_index+1).focus_cell();
         this.set_dirty(true);
     };
 
     /**
      * Execute all cells below the selected cell.
      * 
      * @method execute_cells_below
      */
     Notebook.prototype.execute_cells_below = function () {
         this.execute_cell_range(this.get_selected_index(), this.ncells());
         this.scroll_to_bottom();
     };
 
     /**
      * Execute all cells above the selected cell.
      * 
      * @method execute_cells_above
      */
     Notebook.prototype.execute_cells_above = function () {
         this.execute_cell_range(0, this.get_selected_index());
     };
 
     /**
      * Execute all cells.
      * 
      * @method execute_all_cells
      */
     Notebook.prototype.execute_all_cells = function () {
         this.execute_cell_range(0, this.ncells());
         this.scroll_to_bottom();
     };
 
     /**
      * Execute a contiguous range of cells.
      * 
      * @method execute_cell_range
      * @param {Number} start Index of the first cell to execute (inclusive)
      * @param {Number} end Index of the last cell to execute (exclusive)
      */
     Notebook.prototype.execute_cell_range = function (start, end) {
         for (var i=start; i<end; i++) {
             this.select(i);
             this.execute_cell();
         };
     };
 
     // Persistance and loading
 
     /**
      * Getter method for this notebook's name.
      * 
      * @method get_notebook_name
      * @return {String} This notebook's name
      */
     Notebook.prototype.get_notebook_name = function () {
         var nbname = this.notebook_name.substring(0,this.notebook_name.length-6);
         return nbname;
     };
 
     /**
      * Setter method for this notebook's name.
      *
      * @method set_notebook_name
      * @param {String} name A new name for this notebook
      */
     Notebook.prototype.set_notebook_name = function (name) {
         this.notebook_name = name;
     };
 
     /**
      * Check that a notebook's name is valid.
      * 
      * @method test_notebook_name
      * @param {String} nbname A name for this notebook
      * @return {Boolean} True if the name is valid, false if invalid
      */
     Notebook.prototype.test_notebook_name = function (nbname) {
         nbname = nbname || '';
         if (this.notebook_name_blacklist_re.test(nbname) == false && nbname.length>0) {
             return true;
         } else {
             return false;
         };
     };
 
     /**
      * Load a notebook from JSON (.ipynb).
      * 
      * This currently handles one worksheet: others are deleted.
      * 
      * @method fromJSON
      * @param {Object} data JSON representation of a notebook
      */
     Notebook.prototype.fromJSON = function (data) {
         var content = data.content;
         var ncells = this.ncells();
         var i;
         for (i=0; i<ncells; i++) {
             // Always delete cell 0 as they get renumbered as they are deleted.
             this.delete_cell(0);
         };
         // Save the metadata and name.
         this.metadata = content.metadata;
         this.notebook_name = data.name;
         // Only handle 1 worksheet for now.
         var worksheet = content.worksheets[0];
         if (worksheet !== undefined) {
             if (worksheet.metadata) {
                 this.worksheet_metadata = worksheet.metadata;
             }
             var new_cells = worksheet.cells;
             ncells = new_cells.length;
             var cell_data = null;
             var new_cell = null;
             for (i=0; i<ncells; i++) {
                 cell_data = new_cells[i];
                 // VERSIONHACK: plaintext -> raw
                 // handle never-released plaintext name for raw cells
                 if (cell_data.cell_type === 'plaintext'){
                     cell_data.cell_type = 'raw';
                 }
 
                 new_cell = this.insert_cell_at_index(cell_data.cell_type, i);
                 new_cell.fromJSON(cell_data);
             };
         };
         if (content.worksheets.length > 1) {
             IPython.dialog.modal({
                 title : "Multiple worksheets",
                 body : "This notebook has " + data.worksheets.length + " worksheets, " +
                     "but this version of IPython can only handle the first.  " +
                     "If you save this notebook, worksheets after the first will be lost.",
                 buttons : {
                     OK : {
                         class : "btn-danger"
                     }
                 }
             });
         }
     };
 
     /**
      * Dump this notebook into a JSON-friendly object.
      * 
      * @method toJSON
      * @return {Object} A JSON-friendly representation of this notebook.
      */
     Notebook.prototype.toJSON = function () {
         var cells = this.get_cells();
         var ncells = cells.length;
         var cell_array = new Array(ncells);
         for (var i=0; i<ncells; i++) {
             cell_array[i] = cells[i].toJSON();
         };
         var data = {
             // Only handle 1 worksheet for now.
             worksheets : [{
                 cells: cell_array,
                 metadata: this.worksheet_metadata
             }],
             metadata : this.metadata
         };
         return data;
     };
 
     /**
      * Start an autosave timer, for periodically saving the notebook.
      * 
      * @method set_autosave_interval
      * @param {Integer} interval the autosave interval in milliseconds
      */
     Notebook.prototype.set_autosave_interval = function (interval) {
         var that = this;
         // clear previous interval, so we don't get simultaneous timers
         if (this.autosave_timer) {
             clearInterval(this.autosave_timer);
         }
         
         this.autosave_interval = this.minimum_autosave_interval = interval;
         if (interval) {
             this.autosave_timer = setInterval(function() {
                 if (that.dirty) {
                     that.save_notebook();
                 }
             }, interval);
             $([IPython.events]).trigger("autosave_enabled.Notebook", interval);
         } else {
             this.autosave_timer = null;
             $([IPython.events]).trigger("autosave_disabled.Notebook");
         };
     };
     
     /**
      * Save this notebook on the server.
      * 
      * @method save_notebook
      */
     Notebook.prototype.save_notebook = function (extra_settings) {
         // Create a JSON model to be sent to the server.
         var model = {};
         model.name = this.notebook_name;
         model.path = this.notebook_path;
         model.content = this.toJSON();
         model.content.nbformat = this.nbformat;
         model.content.nbformat_minor = this.nbformat_minor;
         // time the ajax call for autosave tuning purposes.
         var start =  new Date().getTime();
         // We do the call with settings so we can set cache to false.
         var settings = {
             processData : false,
             cache : false,
             type : "PUT",
             data : JSON.stringify(model),
             headers : {'Content-Type': 'application/json'},
             success : $.proxy(this.save_notebook_success, this, start),
             error : $.proxy(this.save_notebook_error, this)
         };
         if (extra_settings) {
             for (var key in extra_settings) {
                 settings[key] = extra_settings[key];
             }
         }
         $([IPython.events]).trigger('notebook_saving.Notebook');
         var url = utils.url_join_encode(
             this._baseProjectUrl,
             'api/notebooks',
             this.notebook_path,
             this.notebook_name
         );
         $.ajax(url, settings);
     };
     
     /**
      * Success callback for saving a notebook.
      * 
      * @method save_notebook_success
      * @param {Integer} start the time when the save request started
      * @param {Object} data JSON representation of a notebook
      * @param {String} status Description of response status
      * @param {jqXHR} xhr jQuery Ajax object
      */
     Notebook.prototype.save_notebook_success = function (start, data, status, xhr) {
         this.set_dirty(false);
         $([IPython.events]).trigger('notebook_saved.Notebook');
         this._update_autosave_interval(start);
         if (this._checkpoint_after_save) {
             this.create_checkpoint();
             this._checkpoint_after_save = false;
         };
     };
     
     /**
      * update the autosave interval based on how long the last save took
      * 
      * @method _update_autosave_interval
      * @param {Integer} timestamp when the save request started
      */
     Notebook.prototype._update_autosave_interval = function (start) {
         var duration = (new Date().getTime() - start);
         if (this.autosave_interval) {
             // new save interval: higher of 10x save duration or parameter (default 30 seconds)
             var interval = Math.max(10 * duration, this.minimum_autosave_interval);
             // round to 10 seconds, otherwise we will be setting a new interval too often
             interval = 10000 * Math.round(interval / 10000);
             // set new interval, if it's changed
             if (interval != this.autosave_interval) {
                 this.set_autosave_interval(interval);
             }
         }
     };
     
     /**
      * Failure callback for saving a notebook.
      * 
      * @method save_notebook_error
      * @param {jqXHR} xhr jQuery Ajax object
      * @param {String} status Description of response status
      * @param {String} error HTTP error message
      */
     Notebook.prototype.save_notebook_error = function (xhr, status, error) {
         $([IPython.events]).trigger('notebook_save_failed.Notebook', [xhr, status, error]);
     };
 
     Notebook.prototype.new_notebook = function(){
         var path = this.notebook_path;
         var base_project_url = this._baseProjectUrl;
         var settings = {
             processData : false,
             cache : false,
             type : "POST",
             dataType : "json",
             async : false,
             success : function (data, status, xhr){
                 var notebook_name = data.name;
                 window.open(
                     utils.url_join_encode(
                         base_project_url,
                         'notebooks',
                         path,
                         notebook_name
                     ),
                     '_blank'
                 );
             }
         };
         var url = utils.url_join_encode(
             base_project_url,
             'api/notebooks',
             path
         );
         $.ajax(url,settings);
     };
 
 
     Notebook.prototype.copy_notebook = function(){
         var path = this.notebook_path;
         var base_project_url = this._baseProjectUrl;
         var settings = {
             processData : false,
             cache : false,
             type : "POST",
             dataType : "json",
             data : JSON.stringify({copy_from : this.notebook_name}),
             async : false,
             success : function (data, status, xhr) {
                 window.open(utils.url_join_encode(
                     base_project_url,
                     'notebooks',
                     data.path,
                     data.name
                 ), '_blank');
             }
         };
         var url = utils.url_join_encode(
             base_project_url,
             'api/notebooks',
             path
         );
         $.ajax(url,settings);
     };
 
     Notebook.prototype.rename = function (nbname) {
         var that = this;
         var data = {name: nbname + '.ipynb'};
         var settings = {
             processData : false,
             cache : false,
             type : "PATCH",
             data : JSON.stringify(data),
             dataType: "json",
             headers : {'Content-Type': 'application/json'},
             success : $.proxy(that.rename_success, this),
             error : $.proxy(that.rename_error, this)
         };
         $([IPython.events]).trigger('rename_notebook.Notebook', data);
         var url = utils.url_join_encode(
             this._baseProjectUrl,
             'api/notebooks',
             this.notebook_path,
             this.notebook_name
         );
         $.ajax(url, settings);
     };
     
     
     Notebook.prototype.rename_success = function (json, status, xhr) {
         this.notebook_name = json.name;
         var name = this.notebook_name;
         var path = json.path;
         this.session.rename_notebook(name, path);
         $([IPython.events]).trigger('notebook_renamed.Notebook', json);
     }
 
     Notebook.prototype.rename_error = function (xhr, status, error) {
         var that = this;
         var dialog = $('<div/>').append(
             $("<p/>").addClass("rename-message")
             .html('This notebook name already exists.')
         )
         $([IPython.events]).trigger('notebook_rename_failed.Notebook', [xhr, status, error]);
         IPython.dialog.modal({
             title: "Notebook Rename Error!",
             body: dialog,
             buttons : {
                 "Cancel": {},
                 "OK": {
                     class: "btn-primary",
                     click: function () {
                         IPython.save_widget.rename_notebook();
                 }}
                 },
             open : function (event, ui) {
                 var that = $(this);
                 // Upon ENTER, click the OK button.
                 that.find('input[type="text"]').keydown(function (event, ui) {
                     if (event.which === utils.keycodes.ENTER) {
                         that.find('.btn-primary').first().click();
                     }
                 });
                 that.find('input[type="text"]').focus();
             }
         });
     }
 
     /**
      * Request a notebook's data from the server.
      * 
      * @method load_notebook
      * @param {String} notebook_name and path A notebook to load
      */
     Notebook.prototype.load_notebook = function (notebook_name, notebook_path) {
         var that = this;
         this.notebook_name = notebook_name;
         this.notebook_path = notebook_path;
         // We do the call with settings so we can set cache to false.
         var settings = {
             processData : false,
             cache : false,
             type : "GET",
             dataType : "json",
             success : $.proxy(this.load_notebook_success,this),
             error : $.proxy(this.load_notebook_error,this),
         };
         $([IPython.events]).trigger('notebook_loading.Notebook');
         var url = utils.url_join_encode(
             this._baseProjectUrl,
             'api/notebooks',
             this.notebook_path,
             this.notebook_name
         );
         $.ajax(url, settings);
     };
 
     /**
      * Success callback for loading a notebook from the server.
      * 
      * Load notebook data from the JSON response.
      * 
      * @method load_notebook_success
      * @param {Object} data JSON representation of a notebook
      * @param {String} status Description of response status
      * @param {jqXHR} xhr jQuery Ajax object
      */
     Notebook.prototype.load_notebook_success = function (data, status, xhr) {
         this.fromJSON(data);
         if (this.ncells() === 0) {
             this.insert_cell_below('code');
             this.select(0);
             this.edit_mode();
         } else {
             this.select(0);
             this.command_mode();
         };
         this.set_dirty(false);
         this.scroll_to_top();
         if (data.orig_nbformat !== undefined && data.nbformat !== data.orig_nbformat) {
             var msg = "This notebook has been converted from an older " +
             "notebook format (v"+data.orig_nbformat+") to the current notebook " +
             "format (v"+data.nbformat+"). The next time you save this notebook, the " +
             "newer notebook format will be used and older versions of IPython " +
             "may not be able to read it. To keep the older version, close the " +
             "notebook without saving it.";
             IPython.dialog.modal({
                 title : "Notebook converted",
                 body : msg,
                 buttons : {
                     OK : {
                         class : "btn-primary"
                     }
                 }
             });
         } else if (data.orig_nbformat_minor !== undefined && data.nbformat_minor !== data.orig_nbformat_minor) {
             var that = this;
             var orig_vs = 'v' + data.nbformat + '.' + data.orig_nbformat_minor;
             var this_vs = 'v' + data.nbformat + '.' + this.nbformat_minor;
             var msg = "This notebook is version " + orig_vs + ", but we only fully support up to " +
             this_vs + ".  You can still work with this notebook, but some features " +
             "introduced in later notebook versions may not be available."
 
             IPython.dialog.modal({
                 title : "Newer Notebook",
                 body : msg,
                 buttons : {
                     OK : {
                         class : "btn-danger"
                     }
                 }
             });
 
         }
         
         // Create the session after the notebook is completely loaded to prevent
         // code execution upon loading, which is a security risk.
         if (this.session == null) {
             this.start_session();
         }
         // load our checkpoint list
         this.list_checkpoints();
         
         // load toolbar state
         if (this.metadata.celltoolbar) {
             IPython.CellToolbar.global_show();
             IPython.CellToolbar.activate_preset(this.metadata.celltoolbar);
         }
         
         $([IPython.events]).trigger('notebook_loaded.Notebook');
     };
 
     /**
      * Failure callback for loading a notebook from the server.
      * 
      * @method load_notebook_error
      * @param {jqXHR} xhr jQuery Ajax object
      * @param {String} status Description of response status
      * @param {String} error HTTP error message
      */
     Notebook.prototype.load_notebook_error = function (xhr, status, error) {
         $([IPython.events]).trigger('notebook_load_failed.Notebook', [xhr, status, error]);
         if (xhr.status === 400) {
             var msg = error;
         } else if (xhr.status === 500) {
             var msg = "An unknown error occurred while loading this notebook. " +
             "This version can load notebook formats " +
             "v" + this.nbformat + " or earlier.";
         }
         IPython.dialog.modal({
             title: "Error loading notebook",
             body : msg,
             buttons : {
                 "OK": {}
             }
         });
     }
 
     /*********************  checkpoint-related  *********************/
     
     /**
      * Save the notebook then immediately create a checkpoint.
      * 
      * @method save_checkpoint
      */
     Notebook.prototype.save_checkpoint = function () {
         this._checkpoint_after_save = true;
         this.save_notebook();
     };
     
     /**
      * Add a checkpoint for this notebook.
      * for use as a callback from checkpoint creation.
      * 
      * @method add_checkpoint
      */
     Notebook.prototype.add_checkpoint = function (checkpoint) {
         var found = false;
         for (var i = 0; i < this.checkpoints.length; i++) {
             var existing = this.checkpoints[i];
             if (existing.id == checkpoint.id) {
                 found = true;
                 this.checkpoints[i] = checkpoint;
                 break;
             }
         }
         if (!found) {
             this.checkpoints.push(checkpoint);
         }
         this.last_checkpoint = this.checkpoints[this.checkpoints.length - 1];
     };
     
     /**
      * List checkpoints for this notebook.
      * 
      * @method list_checkpoints
      */
     Notebook.prototype.list_checkpoints = function () {
         var url = utils.url_join_encode(
             this._baseProjectUrl,
             'api/notebooks',
             this.notebook_path,
             this.notebook_name,
             'checkpoints'
         );
         $.get(url).done(
             $.proxy(this.list_checkpoints_success, this)
         ).fail(
             $.proxy(this.list_checkpoints_error, this)
         );
     };
 
     /**
      * Success callback for listing checkpoints.
      * 
      * @method list_checkpoint_success
      * @param {Object} data JSON representation of a checkpoint
      * @param {String} status Description of response status
      * @param {jqXHR} xhr jQuery Ajax object
      */
     Notebook.prototype.list_checkpoints_success = function (data, status, xhr) {
         var data = $.parseJSON(data);
         this.checkpoints = data;
         if (data.length) {
             this.last_checkpoint = data[data.length - 1];
         } else {
             this.last_checkpoint = null;
         }
         $([IPython.events]).trigger('checkpoints_listed.Notebook', [data]);
     };
 
     /**
      * Failure callback for listing a checkpoint.
      * 
      * @method list_checkpoint_error
      * @param {jqXHR} xhr jQuery Ajax object
      * @param {String} status Description of response status
      * @param {String} error_msg HTTP error message
      */
     Notebook.prototype.list_checkpoints_error = function (xhr, status, error_msg) {
         $([IPython.events]).trigger('list_checkpoints_failed.Notebook');
     };
     
     /**
      * Create a checkpoint of this notebook on the server from the most recent save.
      * 
      * @method create_checkpoint
      */
     Notebook.prototype.create_checkpoint = function () {
         var url = utils.url_join_encode(
             this._baseProjectUrl,
             'api/notebooks',
             this.notebookPath(),
             this.notebook_name,
             'checkpoints'
         );
         $.post(url).done(
             $.proxy(this.create_checkpoint_success, this)
         ).fail(
             $.proxy(this.create_checkpoint_error, this)
         );
     };
 
     /**
      * Success callback for creating a checkpoint.
      * 
      * @method create_checkpoint_success
      * @param {Object} data JSON representation of a checkpoint
      * @param {String} status Description of response status
      * @param {jqXHR} xhr jQuery Ajax object
      */
     Notebook.prototype.create_checkpoint_success = function (data, status, xhr) {
         var data = $.parseJSON(data);
         this.add_checkpoint(data);
         $([IPython.events]).trigger('checkpoint_created.Notebook', data);
     };
 
     /**
      * Failure callback for creating a checkpoint.
      * 
      * @method create_checkpoint_error
      * @param {jqXHR} xhr jQuery Ajax object
      * @param {String} status Description of response status
      * @param {String} error_msg HTTP error message
      */
     Notebook.prototype.create_checkpoint_error = function (xhr, status, error_msg) {
         $([IPython.events]).trigger('checkpoint_failed.Notebook');
     };
     
     Notebook.prototype.restore_checkpoint_dialog = function (checkpoint) {
         var that = this;
         var checkpoint = checkpoint || this.last_checkpoint;
         if ( ! checkpoint ) {
             console.log("restore dialog, but no checkpoint to restore to!");
             return;
         }
         var body = $('<div/>').append(
             $('<p/>').addClass("p-space").text(
                 "Are you sure you want to revert the notebook to " +
                 "the latest checkpoint?"
             ).append(
                 $("<strong/>").text(
                     " This cannot be undone."
                 )
             )
         ).append(
             $('<p/>').addClass("p-space").text("The checkpoint was last updated at:")
         ).append(
             $('<p/>').addClass("p-space").text(
                 Date(checkpoint.last_modified)
             ).css("text-align", "center")
         );
         
         IPython.dialog.modal({
             title : "Revert notebook to checkpoint",
             body : body,
             buttons : {
                 Revert : {
                     class : "btn-danger",
                     click : function () {
                         that.restore_checkpoint(checkpoint.id);
                     }
                 },
                 Cancel : {}
                 }
         });
     }
     
     /**
      * Restore the notebook to a checkpoint state.
      * 
      * @method restore_checkpoint
      * @param {String} checkpoint ID
      */
     Notebook.prototype.restore_checkpoint = function (checkpoint) {
         $([IPython.events]).trigger('notebook_restoring.Notebook', checkpoint);
         var url = utils.url_join_encode(
             this._baseProjectUrl,
             'api/notebooks',
             this.notebookPath(),
             this.notebook_name,
             'checkpoints',
             checkpoint
         );
         $.post(url).done(
             $.proxy(this.restore_checkpoint_success, this)
         ).fail(
             $.proxy(this.restore_checkpoint_error, this)
         );
     };
     
     /**
      * Success callback for restoring a notebook to a checkpoint.
      * 
      * @method restore_checkpoint_success
      * @param {Object} data (ignored, should be empty)
      * @param {String} status Description of response status
      * @param {jqXHR} xhr jQuery Ajax object
      */
     Notebook.prototype.restore_checkpoint_success = function (data, status, xhr) {
         $([IPython.events]).trigger('checkpoint_restored.Notebook');
         this.load_notebook(this.notebook_name, this.notebook_path);
     };
 
     /**
      * Failure callback for restoring a notebook to a checkpoint.
      * 
      * @method restore_checkpoint_error
      * @param {jqXHR} xhr jQuery Ajax object
      * @param {String} status Description of response status
      * @param {String} error_msg HTTP error message
      */
     Notebook.prototype.restore_checkpoint_error = function (xhr, status, error_msg) {
         $([IPython.events]).trigger('checkpoint_restore_failed.Notebook');
     };
     
     /**
      * Delete a notebook checkpoint.
      * 
      * @method delete_checkpoint
      * @param {String} checkpoint ID
      */
     Notebook.prototype.delete_checkpoint = function (checkpoint) {
         $([IPython.events]).trigger('notebook_restoring.Notebook', checkpoint);
         var url = utils.url_join_encode(
             this._baseProjectUrl,
             'api/notebooks',
             this.notebookPath(),
             this.notebook_name,
             'checkpoints',
             checkpoint
         );
         $.ajax(url, {
             type: 'DELETE',
             success: $.proxy(this.delete_checkpoint_success, this),
             error: $.proxy(this.delete_notebook_error,this)
         });
     };
     
     /**
      * Success callback for deleting a notebook checkpoint
      * 
      * @method delete_checkpoint_success
      * @param {Object} data (ignored, should be empty)
      * @param {String} status Description of response status
      * @param {jqXHR} xhr jQuery Ajax object
      */
     Notebook.prototype.delete_checkpoint_success = function (data, status, xhr) {
         $([IPython.events]).trigger('checkpoint_deleted.Notebook', data);
         this.load_notebook(this.notebook_name, this.notebook_path);
     };
 
     /**
      * Failure callback for deleting a notebook checkpoint.
      * 
      * @method delete_checkpoint_error
      * @param {jqXHR} xhr jQuery Ajax object
      * @param {String} status Description of response status
      * @param {String} error_msg HTTP error message
      */
     Notebook.prototype.delete_checkpoint_error = function (xhr, status, error_msg) {
         $([IPython.events]).trigger('checkpoint_delete_failed.Notebook');
     };
 
 
     IPython.Notebook = Notebook;
 
 
     return IPython;
 
 }(IPython));
  No newline at end of file

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

@@ -1,468 +1,476 b''
 //----------------------------------------------------------------------------
 //  Copyright (C) 2013  The IPython Development Team
 //
 //  Distributed under the terms of the BSD License.  The full license is in
 //  the file COPYING, distributed as part of this software.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // WidgetModel, WidgetView, and WidgetManager
 //============================================================================
 /**
  * Base Widget classes
  * @module IPython
  * @namespace IPython
  * @submodule widget
  */
 
 "use strict";
 
 // Use require.js 'define' method so that require.js is intelligent enough to
 // syncronously load everything within this file when it is being 'required' 
 // elsewhere.
 define(["components/underscore/underscore-min",
          "components/backbone/backbone-min",
         ], function(){
 
-    // Only run once on a notebook.
-    if (IPython.notebook.widget_manager == undefined) {
 
         //--------------------------------------------------------------------
         // WidgetModel class
         //--------------------------------------------------------------------
         var WidgetModel = Backbone.Model.extend({
             constructor: function(comm_manager, comm, widget_view_types) {
                 this.comm_manager = comm_manager;
                 this.widget_view_types = widget_view_types;
                 this.pending_msgs = 0;
                 this.msg_throttle = 3;
                 this.msg_buffer = null;
                 this.views = {};
 
                 // Remember comm associated with the model.
                 this.comm = comm;
                 comm.model = this;
 
                 // Hook comm messages up to model.
                 comm.on_close($.proxy(this.handle_comm_closed, this));
                 comm.on_msg($.proxy(this.handle_comm_msg, this));
 
                 return Backbone.Model.apply(this);
             },
 
 
             update_other_views: function(caller) {
                 this.last_modified_view = caller;
                 this.save(this.changedAttributes(), {patch: true});
 
                 for (var output_area in this.views) {
                     var views = this.views[output_area];
                     for (var view_index in views) {
                         var view = views[view_index];
                         if (view !== caller) {
                             view.update();    
                         }
                     }
                 }
             },
 
 
             handle_status: function (output_area, msg) {
                 //execution_state : ('busy', 'idle', 'starting')
                 if (msg.content.execution_state=='idle') {
                     
                     // Send buffer if this message caused another message to be
                     // throttled.
-                    if (this.msg_buffer != null) {
-                        if (this.msg_throttle == this.pending_msgs && 
+                if (this.msg_buffer != null &&
+                    this.msg_throttle == this.pending_msgs && 
                             this.msg_buffer.length > 0) {
                             
                             var output_area = this._get_msg_output_area(msg);
                             var callbacks = this._make_callbacks(output_area);
                             var data = {sync_method: 'update', sync_data: this.msg_buffer};
                             comm.send(data, callbacks);   
                             this.msg_buffer = null;
                         } else {
 
                             // Only decrease the pending message count if the buffer
                             // doesn't get flushed (sent).
                             --this.pending_msgs;
                         }
                     }
-                }
             },
 
 
             // Custom syncronization logic.
             handle_sync: function (method, options) {
                 var model_json = this.toJSON();
 
                 // Only send updated state if the state hasn't been changed 
                 // during an update.
                 if (!this.updating) {
                     if (this.pending_msgs >= this.msg_throttle) {
                         // The throttle has been exceeded, buffer the current msg so
                         // it can be sent once the kernel has finished processing 
                         // some of the existing messages.
                         if (method=='patch') {
                             if (this.msg_buffer == null) {
                                 this.msg_buffer = $.extend({}, model_json); // Copy
                             }
                             for (var attr in options.attrs) {
                                 this.msg_buffer[attr] = options.attrs[attr];
                             }
                         } else {
                             this.msg_buffer = $.extend({}, model_json); // Copy
                         }
 
                     } else {
                         // We haven't exceeded the throttle, send the message like 
                         // normal.  If this is a patch operation, just send the 
                         // changes.
                         var send_json = model_json;
                         if (method=='patch') {
                             send_json = {};
                             for (var attr in options.attrs) {
                                 send_json[attr] = options.attrs[attr];
                             }
                         }
 
                         var data = {sync_method: method, sync_data: send_json};
                         var output_area = this.last_modified_view.output_area;
                         var callbacks = this._make_callbacks(output_area);
                         this.comm.send(data, callbacks);    
                         this.pending_msgs++;
                     }
                 }
                 
                 // Since the comm is a one-way communication, assume the message 
                 // arrived.
                 return model_json;
             },
 
 
             // Handle incomming comm msg.
             handle_comm_msg: function (msg) {
                 var method = msg.content.data.method;
                 switch (method){
                     case 'display':
 
                         // Try to get the cell index.
                         var output_area = this._get_output_area(msg.parent_header.msg_id);
                         if (output_area == null) {
                             console.log("Could not determine where the display" + 
                                 " message was from.  Widget will not be displayed")
                         } else {
                             this.display_view(msg.content.data.view_name, 
                             msg.content.data.parent,
                             output_area);
                         }
                         break;
                     case 'update':
                         this.handle_update(msg.content.data.state);
                         break;
                 }
             },
 
 
             // Handle when a widget is updated via the python side.
             handle_update: function (state) {
                 this.updating = true;
                 try {
                     for (var key in state) {
                         if (state.hasOwnProperty(key)) {
                             if (key == "_css"){
                                 this.css = state[key];
                             } else {
                                 this.set(key, state[key]); 
                             }
                         }
                     }
                     this.id = this.comm.comm_id;
                     this.save();
                 } finally {
                     this.updating = false;
                 }
             },
 
 
             // Handle when a widget is closed.
             handle_comm_closed: function (msg) {
                 for (var output_area in this.views) {
                     var views = this.views[output_area];
                     for (var view_index in views) {
                         var view = views[view_index];
                         view.remove();
                     }
                 }
             },
 
 
             // Create view that represents the model.
             display_view: function (view_name, parent_comm_id, output_area) {
                 var new_views = [];
 
                 var displayed = false;
                 if (parent_comm_id != undefined) {
                     var parent_comm = this.comm_manager.comms[parent_comm_id];
                     var parent_model = parent_comm.model;
                     var parent_views = parent_model.views[output_area];
                     for (var parent_view_index in parent_views) {
                         var parent_view = parent_views[parent_view_index];
                         if (parent_view.display_child != undefined) {
                             var view = this._create_view(view_name, output_area);
                             new_views.push(view);
                             parent_view.display_child(view);
                             displayed = true;
                         }
                     }
                 }
 
                 if (!displayed) {
                     // No parent view is defined or exists.  Add the view's 
                     // element to cell's widget div.
                     var view = this._create_view(view_name, output_area);
                     new_views.push(view);
                     this._get_widget_area_element(output_area, true)
                         .append(view.$el);
                 
                 }
 
                 for (var view_index in new_views) {
                     var view = new_views[view_index];
                     view.update();
                 }
             },
 
 
             // Create a view
             _create_view: function (view_name, output_area) {
                 var view = new this.widget_view_types[view_name]({model: this});
                 view.render();
                 if (this.views[output_area]==undefined) {
                     this.views[output_area] = []
                 }
                 this.views[output_area].push(view);
                 view.output_area = output_area;
 
                 // Handle when the view element is remove from the page.
                 var that = this;
                 view.$el.on("remove", function(){ 
                     var index = that.views[output_area].indexOf(view);
                     if (index > -1) {
                         that.views[output_area].splice(index, 1);
                     }
                     view.remove(); // Clean-up view 
                     if (that.views[output_area].length()==0) {
                         delete that.views[output_area];
                     }
 
                     // Close the comm if there are no views left.
                     if (that.views.length()==0) {
                         that.comm.close();     
                     }
                 });
                 return view;
             },
 
 
             // Build a callback dict.
             _make_callbacks: function (output_area) {
                 var callbacks = {};
                 if (output_area != null) {
                     var that = this;
                     callbacks = {
                         iopub : {
                             output : $.proxy(output_area.handle_output, output_area),
                             clear_output : $.proxy(output_area.handle_clear_output, output_area),
                             status : function(msg){
                                 that.handle_status(output_area, msg);
                             },
                             get_output_area : function() {
                                 if (that.last_modified_view != undefined && 
                                     that.last_modified_view.output_area != undefined) {
                                     return that.last_modified_view.output_area;
                                 } else {
                                     return null
                                 }
                             },
                         },
                     };
                 }
                 return callbacks;
             },
 
 
             // Get the output area corresponding to the msg_id.
             // output_area is an instance of Ipython.OutputArea
             _get_output_area: function (msg_id) {
                 
                 // First, guess cell.execute triggered
                 var cells = IPython.notebook.get_cells();
                 for (var cell_index in cells) {
                     if (cells[cell_index].last_msg_id == msg_id) {
                         var cell = IPython.notebook.get_cell(cell_index)
                         return cell.output_area;
                     }
                 }
 
                 // Second, guess widget triggered
                 var callbacks = this.comm_manager.kernel.get_callbacks_for_msg(msg_id)
                 if (callbacks != undefined && callbacks.iopub != undefined && callbacks.iopub.get_output_area != undefined) {
                     var output_area = callbacks.iopub.get_output_area();
                     if (output_area != null) {
                         return output_area;
                     }
                 }
                 
                 // Not triggered by a widget or a cell
                 return null;
             },
 
             // Gets widget output area (as a JQuery element) from the 
             // output_area (Ipython.OutputArea instance)
             _get_widget_area_element: function (output_area, show) {
                 var widget_area = output_area.element
                     .parent() // output_wrapper
                     .parent() // cell
                     .find('.widget-area');
                 if (show) { widget_area.show(); }
                 return widget_area.find('.widget-subarea');
             },
 
         });
 
 
         //--------------------------------------------------------------------
         // WidgetView class
         //--------------------------------------------------------------------
         var WidgetView = Backbone.View.extend({
             
             initialize: function() {
                 this.visible = true;
                 this.model.on('change',this.update,this);
                 this._add_class_calls = this.model.get('_add_class')[0];
                 this._remove_class_calls = this.model.get('_remove_class')[0];
             },
             
             update: function() {
                 if (this.model.get('visible') != undefined) {
                     if (this.visible != this.model.get('visible')) {
                         this.visible = this.model.get('visible');
                         if (this.visible) {
                             this.$el.show();
                         } else {
                             this.$el.hide();
                         }
                     }
                 }
 
                 if (this.model.css != undefined) {
                     for (var selector in this.model.css) {
                         if (this.model.css.hasOwnProperty(selector)) {
                             
                             // Apply the css traits to all elements that match the selector.
                             var elements = this.get_selector_element(selector);
                             if (elements.length > 0) {
                                 var css_traits = this.model.css[selector];    
                                 for (var css_key in css_traits) {
                                     if (css_traits.hasOwnProperty(css_key)) {
                                         elements.css(css_key, css_traits[css_key]);
                                     }
                                 }
                             }
                         }
                     }
                 }
 
                 var add_class = this.model.get('_add_class');
                 if (add_class != undefined){
                     var add_class_calls = add_class[0];
                     if (add_class_calls > this._add_class_calls) {
                         this._add_class_calls = add_class_calls;
                         var elements = this.get_selector_element(add_class[1]);
                         if (elements.length > 0) {
                             elements.addClass(add_class[2]);
                         }
                     }    
                 }
 
                 var remove_class = this.model.get('_remove_class');
                 if (remove_class != undefined){
                     var remove_class_calls = remove_class[0];
                     if (remove_class_calls > this._remove_class_calls) {
                         this._remove_class_calls = remove_class_calls;
                         var elements = this.get_selector_element(remove_class[1]);
                         if (elements.length > 0) {
                             elements.removeClass(remove_class[2]);
                         }
                     }    
                 }
             },
 
             get_selector_element: function(selector) {
                 // Get the elements via the css selector.  If the selector is
                 // blank, apply the style to the $el_to_style element.  If
                 // the $el_to_style element is not defined, use apply the 
                 // style to the view's element.
                 var elements = this.$el.find(selector);
                 if (selector=='') {
                     if (this.$el_to_style == undefined) {
                         elements = this.$el;
                     } else {
                         elements = this.$el_to_style;
                     }
                 }
                 return elements;
             },
         });
 
 
         //--------------------------------------------------------------------
         // WidgetManager class
         //--------------------------------------------------------------------
-        var WidgetManager = function(comm_manager){
-            this.comm_manager = comm_manager;
+    var WidgetManager = function(){
+        this.comm_manager = null;
             this.widget_model_types = {};
             this.widget_view_types = {};
             
             var that = this;
             Backbone.sync = function(method, model, options, error) {
                 var result = model.handle_sync(method, options);
                 if (options.success) {
                   options.success(result);
                 }
             }; 
         }
 
 
+    WidgetManager.prototype.attach_comm_manager = function (comm_manager) {
+        this.comm_manager = comm_manager;
+
+        // Register already register widget model types with the comm manager.
+        for (var widget_model_name in this.widget_model_types) {
+            this.comm_manager.register_target(widget_model_name, $.proxy(this.handle_com_open, this));
+        }
+    }
+
+
         WidgetManager.prototype.register_widget_model = function (widget_model_name, widget_model_type) {
             // Register the widget with the comm manager.  Make sure to pass this object's context
             // in so `this` works in the call back.
+        if (this.comm_manager!=null) {
             this.comm_manager.register_target(widget_model_name, $.proxy(this.handle_com_open, this));
+        }
             this.widget_model_types[widget_model_name] = widget_model_type;
         }
 
 
         WidgetManager.prototype.register_widget_view = function (widget_view_name, widget_view_type) {
             this.widget_view_types[widget_view_name] = widget_view_type;
         }
 
 
         WidgetManager.prototype.handle_com_open = function (comm, msg) {
             var widget_type_name = msg.content.target_name;
             var widget_model = new this.widget_model_types[widget_type_name](this.comm_manager, comm, this.widget_view_types);
         }
 
 
         //--------------------------------------------------------------------
         // Init code
         //--------------------------------------------------------------------
         IPython.WidgetManager = WidgetManager;
         IPython.WidgetModel = WidgetModel;
         IPython.WidgetView = WidgetView;
 
-        IPython.notebook.widget_manager = new WidgetManager(IPython.notebook.kernel.comm_manager);    
+    IPython.widget_manager = new WidgetManager();
 
-    };
 });

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

@@ -1,109 +1,109 b''
 
-require(["notebook/js/widget"], function(){
+define(["notebook/js/widget"], function(){
     
     var BoolWidgetModel = IPython.WidgetModel.extend({});
-    IPython.notebook.widget_manager.register_widget_model('BoolWidgetModel', BoolWidgetModel);
+    IPython.widget_manager.register_widget_model('BoolWidgetModel', BoolWidgetModel);
 
     var CheckboxView = IPython.WidgetView.extend({
       
         // Called when view is rendered.
         render : function(){
             this.$el = $('<div />')
                 .addClass('widget-hbox-single');
             this.$label = $('<div />')
                 .addClass('widget-hlabel')
                 .appendTo(this.$el)
                 .hide();
             var that = this;
             this.$checkbox = $('<input />')
                 .attr('type', 'checkbox')
                 .click(function(el) {
                     that.user_invoked_update = true;
                     that.model.set('value', that.$checkbox.prop('checked'));
                     that.model.update_other_views(that);
                     that.user_invoked_update = false;
                 })
                 .appendTo(this.$el);
 
             this.$el_to_style = this.$checkbox; // Set default element to style
             this.update(); // Set defaults.
         },
         
         // Handles: Backend -> Frontend Sync
         //          Frontent -> Frontend Sync
         update : function(){
             if (!this.user_invoked_update) {
                 this.$checkbox.prop('checked', this.model.get('value'));
 
                 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.html(description);
                     this.$label.show();
                 }
             }
             return IPython.WidgetView.prototype.update.call(this);
         },
         
     });
 
-    IPython.notebook.widget_manager.register_widget_view('CheckboxView', CheckboxView);
+    IPython.widget_manager.register_widget_view('CheckboxView', CheckboxView);
 
     var ToggleButtonView = IPython.WidgetView.extend({
       
         // Called when view is rendered.
         render : function(){
             this.$el
                 .html('');
 
             this.$button = $('<button />')
                 .addClass('btn')
                 .attr('type', 'button')
                 .attr('data-toggle', 'button')
                 .appendTo(this.$el);
             this.$el_to_style = this.$button; // Set default element to style
 
             this.update(); // Set defaults.
         },
         
         // Handles: Backend -> Frontend Sync
         //          Frontent -> Frontend Sync
         update : function(){
             if (!this.user_invoked_update) {
                 if (this.model.get('value')) {
                     this.$button.addClass('active');
                 } else {
                     this.$button.removeClass('active');
                 }
 
                 var disabled = this.model.get('disabled');
                 this.$button.prop('disabled', disabled);
 
                 var description = this.model.get('description');
                 if (description.length == 0) {
                     this.$button.html(' '); // Preserve button height
                 } else {
                     this.$button.html(description);
                 }
             }
             return IPython.WidgetView.prototype.update.call(this);
         },
         
         events: {"click button" : "handleClick"},
         
         // Handles and validates user input.
         handleClick: function(e) { 
             this.user_invoked_update = true;
             this.model.set('value', ! $(e.target).hasClass('active'));
             this.model.update_other_views(this);
             this.user_invoked_update = false;
         },
     });
 
-    IPython.notebook.widget_manager.register_widget_view('ToggleButtonView', ToggleButtonView);
+    IPython.widget_manager.register_widget_view('ToggleButtonView', ToggleButtonView);
 
 });

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

@@ -1,39 +1,39 b''
 
-require(["notebook/js/widget"], function(){
+define(["notebook/js/widget"], function(){
     
     var ButtonWidgetModel = IPython.WidgetModel.extend({});
-    IPython.notebook.widget_manager.register_widget_model('ButtonWidgetModel', ButtonWidgetModel);
+    IPython.widget_manager.register_widget_model('ButtonWidgetModel', ButtonWidgetModel);
 
     var ButtonView = IPython.WidgetView.extend({
       
         // Called when view is rendered.
         render : function(){
             var that = this;
             this.$el = $("<button />")
                 .addClass('btn')
                 .click(function() {
                     that.model.set('clicks', that.model.get('clicks') + 1);
                     that.model.update_other_views(that);
                 });
 
             this.update(); // Set defaults.
         },
         
         // Handles: Backend -> Frontend Sync
         //          Frontent -> Frontend Sync
         update : function(){
             var description = this.model.get('description');
             if (description.length==0) {
                 this.$el.html(' '); // Preserve button height
             } else {
                 this.$el.html(description);
             }
             
             return IPython.WidgetView.prototype.update.call(this);
         },
         
     });
 
-    IPython.notebook.widget_manager.register_widget_view('ButtonView', ButtonView);
+    IPython.widget_manager.register_widget_view('ButtonView', ButtonView);
 
 });

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

@@ -1,46 +1,46 b''
-require(["notebook/js/widget"], function(){
+define(["notebook/js/widget"], function(){
     var ContainerModel = IPython.WidgetModel.extend({});
-    IPython.notebook.widget_manager.register_widget_model('ContainerWidgetModel', ContainerModel);
+    IPython.widget_manager.register_widget_model('ContainerWidgetModel', ContainerModel);
 
     var ContainerView = IPython.WidgetView.extend({
         
         render: function(){
             this.$el = $('<div />')
                 .addClass('widget-container');
         },
         
         update: function(){
 
             // Apply flexible box model properties by adding and removing
             // corrosponding CSS classes.
             // Defined in IPython/html/static/base/less/flexbox.less
             this.set_flex_property('vbox', this.model.get('_vbox'));
             this.set_flex_property('hbox', this.model.get('_hbox'));
             this.set_flex_property('start', this.model.get('_pack_start'));
             this.set_flex_property('center', this.model.get('_pack_center'));
             this.set_flex_property('end', this.model.get('_pack_end'));
             this.set_flex_property('align-start', this.model.get('_align_start'));
             this.set_flex_property('align-center', this.model.get('_align_center'));
             this.set_flex_property('align-end', this.model.get('_align_end'));
             this.set_flex_property('box-flex0', this.model.get('_flex0'));
             this.set_flex_property('box-flex1', this.model.get('_flex1'));
             this.set_flex_property('box-flex2', this.model.get('_flex2'));
 
             return IPython.WidgetView.prototype.update.call(this);
         },
 
         set_flex_property: function(property_name, enabled) {
             if (enabled) {
                 this.$el.addClass(property_name);
             } else {
                 this.$el.removeClass(property_name);
             }
         },
 
         display_child: function(view) {
             this.$el.append(view.$el);
         },
     });
 
-    IPython.notebook.widget_manager.register_widget_view('ContainerView', ContainerView);
+    IPython.widget_manager.register_widget_view('ContainerView', ContainerView);
 });
  No newline at end of file

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

@@ -1,4 +1,4 b''
-require(["notebook/js/widget"], function(){
+define(["notebook/js/widget"], function(){
     var FloatWidgetModel = IPython.WidgetModel.extend({});
-    IPython.notebook.widget_manager.register_widget_model('FloatWidgetModel', FloatWidgetModel);
+    IPython.widget_manager.register_widget_model('FloatWidgetModel', FloatWidgetModel);
 });
  No newline at end of file

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

@@ -1,239 +1,239 b''
-require(["notebook/js/widget"], function(){
+define(["notebook/js/widget"], function(){
     var FloatRangeWidgetModel = IPython.WidgetModel.extend({});
-    IPython.notebook.widget_manager.register_widget_model('FloatRangeWidgetModel', FloatRangeWidgetModel);
+    IPython.widget_manager.register_widget_model('FloatRangeWidgetModel', FloatRangeWidgetModel);
 
     var FloatSliderView = IPython.WidgetView.extend({
         
         // Called when view is rendered.
         render : function(){
             this.$el
                 .addClass('widget-hbox-single')
                 .html('');
             this.$label = $('<div />')
                 .appendTo(this.$el)
                 .addClass('widget-hlabel')
                 .hide();
             this.$slider = $('<div />')
                 .slider({})
                 .addClass('slider');
             
             // Put the slider in a container 
             this.$slider_container = $('<div />')
                 .addClass('widget-hslider')
                 .append(this.$slider);    
             this.$el_to_style = this.$slider_container; // Set default element to style
             this.$el.append(this.$slider_container);
             
             // Set defaults.
             this.update();
         },
         
         // Handles: Backend -> Frontend Sync
         //          Frontent -> Frontend Sync
         update : function(){
             // Slider related keys.
             var _keys = ['step', 'max', 'min', 'disabled'];
             for (var index in _keys) {
                 var key = _keys[index];
                 if (this.model.get(key) != undefined) {
                     this.$slider.slider("option", key, this.model.get(key));
                 }
             }
 
             // WORKAROUND FOR JQUERY SLIDER BUG.
             // The horizontal position of the slider handle
             // depends on the value of the slider at the time
             // of orientation change.  Before applying the new
             // workaround, we set the value to the minimum to
             // make sure that the horizontal placement of the
             // handle in the vertical slider is always 
             // consistent.
             var orientation = this.model.get('orientation');
             var value = this.model.get('min');
             this.$slider.slider('option', 'value', value);
             this.$slider.slider('option', 'orientation', orientation);
             var value = this.model.get('value');
             this.$slider.slider('option', 'value', value);
 
             // Use the right CSS classes for vertical & horizontal sliders
             if (orientation=='vertical') {
                 this.$slider_container
                     .removeClass('widget-hslider')
                     .addClass('widget-vslider');
                 this.$el
                     .removeClass('widget-hbox-single')
                     .addClass('widget-vbox-single');
                 this.$label
                     .removeClass('widget-hlabel')
                     .addClass('widget-vlabel');
 
             } else {
                 this.$slider_container
                     .removeClass('widget-vslider')
                     .addClass('widget-hslider');
                 this.$el
                     .removeClass('widget-vbox-single')
                     .addClass('widget-hbox-single');
                 this.$label
                     .removeClass('widget-vlabel')
                     .addClass('widget-hlabel');
             }
 
             var description = this.model.get('description');
             if (description.length == 0) {
                 this.$label.hide();
             } else {
                 this.$label.html(description);
                 this.$label.show();
             }
             return IPython.WidgetView.prototype.update.call(this);
         },
         
         // Handles: User input
         events: { "slide" : "handleSliderChange" }, 
         handleSliderChange: function(e, ui) { 
             this.model.set('value', ui.value); 
             this.model.update_other_views(this);
         },
     });
 
-    IPython.notebook.widget_manager.register_widget_view('FloatSliderView', FloatSliderView);
+    IPython.widget_manager.register_widget_view('FloatSliderView', FloatSliderView);
 
 
     var FloatTextView = IPython.WidgetView.extend({
         
         // Called when view is rendered.
         render : function(){
             this.$el
                 .addClass('widget-hbox-single')
                 .html('');
             this.$label = $('<div />')
                 .appendTo(this.$el)
                 .addClass('widget-hlabel')
                 .hide();
             this.$textbox = $('<input type="text" />')
                 .addClass('input')
                 .addClass('widget-numeric-text')
                 .appendTo(this.$el);
             this.$el_to_style = this.$textbox; // Set default element to style
             this.update(); // Set defaults.
         },
         
         // Handles: Backend -> Frontend Sync
         //          Frontent -> Frontend Sync
         update : function(){
             var value = this.model.get('value');
             if (!this.changing && parseFloat(this.$textbox.val()) != value) {
                 this.$textbox.val(value);
             }
             
             if (this.model.get('disabled')) {
                 this.$textbox.attr('disabled','disabled');
             } else {
                 this.$textbox.removeAttr('disabled');
             }
 
             var description = this.model.get('description');
             if (description.length == 0) {
                 this.$label.hide();
             } else {
                 this.$label.html(description);
                 this.$label.show();
             }
             return IPython.WidgetView.prototype.update.call(this);
         },
         
         
         events: {"keyup input" : "handleChanging",
                 "paste input" : "handleChanging",
                 "cut input" : "handleChanging",
                 "change input" : "handleChanged"}, // Fires only when control is validated or looses focus.
         
         // Handles and validates user input.
         handleChanging: function(e) { 
             
             // Try to parse value as a float.
             var numericalValue = 0.0;
             if (e.target.value != '') {
                 numericalValue = parseFloat(e.target.value);
             }
             
             // If parse failed, reset value to value stored in model.
             if (isNaN(numericalValue)) {
                 e.target.value = this.model.get('value');
             } else if (!isNaN(numericalValue)) {
                 if (this.model.get('max') != undefined) {
                     numericalValue = Math.min(this.model.get('max'), numericalValue);
                 }
                 if (this.model.get('min') != undefined) {
                     numericalValue = Math.max(this.model.get('min'), numericalValue);
                 }
 
                 // Apply the value if it has changed.
                 if (numericalValue != this.model.get('value')) {
                     this.changing = true;
                     this.model.set('value', numericalValue);
                     this.model.update_other_views(this);
                     this.changing = false;
                 }
             }
         },
         
         // Applies validated input.
         handleChanged: function(e) { 
             // Update the textbox
             if (this.model.get('value') != e.target.value) {
                 e.target.value = this.model.get('value');
             }
         }
     });
 
-    IPython.notebook.widget_manager.register_widget_view('FloatTextView', FloatTextView);
+    IPython.widget_manager.register_widget_view('FloatTextView', FloatTextView);
 
 
     var ProgressView = IPython.WidgetView.extend({
         
         // Called when view is rendered.
         render : function(){
             this.$el
                 .addClass('widget-hbox-single')
                 .html('');
             this.$label = $('<div />')
                 .appendTo(this.$el)
                 .addClass('widget-hlabel')
                 .hide();
             this.$progress = $('<div />')
                 .addClass('progress')
                 .addClass('widget-progress')
                 .appendTo(this.$el);
             this.$el_to_style = this.$progress; // Set default element to style
             this.$bar = $('<div />')
                 .addClass('bar')
                 .css('width', '50%')
                 .appendTo(this.$progress);
             this.update(); // Set defaults.
         },
         
         // Handles: Backend -> Frontend Sync
         //          Frontent -> Frontend Sync
         update : function(){
             var value = this.model.get('value');
             var max = this.model.get('max');
             var min = this.model.get('min');
             var percent = 100.0 * (value - min) / (max - min);
             this.$bar.css('width', percent + '%');
             
             var description = this.model.get('description');
             if (description.length == 0) {
                 this.$label.hide();
             } else {
                 this.$label.html(description);
                 this.$label.show();
             }
             return IPython.WidgetView.prototype.update.call(this);
         },
         
     });
 
-    IPython.notebook.widget_manager.register_widget_view('ProgressView', ProgressView);
+    IPython.widget_manager.register_widget_view('ProgressView', ProgressView);
 });

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

@@ -1,4 +1,4 b''
-require(["notebook/js/widget"], function(){
+define(["notebook/js/widget"], function(){
     var IntWidgetModel = IPython.WidgetModel.extend({});
-    IPython.notebook.widget_manager.register_widget_model('IntWidgetModel', IntWidgetModel);
+    IPython.widget_manager.register_widget_model('IntWidgetModel', IntWidgetModel);
 });
  No newline at end of file

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

@@ -1,191 +1,191 b''
-require(["notebook/js/widget"], function(){
+define(["notebook/js/widget"], function(){
     var IntRangeWidgetModel = IPython.WidgetModel.extend({});
-    IPython.notebook.widget_manager.register_widget_model('IntRangeWidgetModel', IntRangeWidgetModel);
+    IPython.widget_manager.register_widget_model('IntRangeWidgetModel', IntRangeWidgetModel);
 
     var IntSliderView = IPython.WidgetView.extend({
         
         // Called when view is rendered.
         render : function(){
             this.$el
                 .addClass('widget-hbox-single')
                 .html('');
             this.$label = $('<div />')
                 .appendTo(this.$el)
                 .addClass('widget-hlabel')
                 .hide();
             this.$slider = $('<div />')
                 .slider({})
                 .addClass('slider');
             
             // Put the slider in a container 
             this.$slider_container = $('<div />')
                 .addClass('widget-hslider')
                 .append(this.$slider);    
             this.$el_to_style = this.$slider_container; // Set default element to style
             this.$el.append(this.$slider_container);
             
             // Set defaults.
             this.update();
         },
         
         // Handles: Backend -> Frontend Sync
         //          Frontent -> Frontend Sync
         update : function(){
             // Slider related keys.
             var _keys = ['step', 'max', 'min', 'disabled'];
             for (var index in _keys) {
                 var key = _keys[index];
                 if (this.model.get(key) != undefined) {
                     this.$slider.slider("option", key, this.model.get(key));
                 }
             }
 
             // WORKAROUND FOR JQUERY SLIDER BUG.
             // The horizontal position of the slider handle
             // depends on the value of the slider at the time
             // of orientation change.  Before applying the new
             // workaround, we set the value to the minimum to
             // make sure that the horizontal placement of the
             // handle in the vertical slider is always 
             // consistent.
             var orientation = this.model.get('orientation');
             var value = this.model.get('min');
             this.$slider.slider('option', 'value', value);
             this.$slider.slider('option', 'orientation', orientation);
             var value = this.model.get('value');
             this.$slider.slider('option', 'value', value);
 
             // Use the right CSS classes for vertical & horizontal sliders
             if (orientation=='vertical') {
                 this.$slider_container
                     .removeClass('widget-hslider')
                     .addClass('widget-vslider');
                 this.$el
                     .removeClass('widget-hbox-single')
                     .addClass('widget-vbox-single');
                 this.$label
                     .removeClass('widget-hlabel')
                     .addClass('widget-vlabel');
 
             } else {
                 this.$slider_container
                     .removeClass('widget-vslider')
                     .addClass('widget-hslider');
                 this.$el
                     .removeClass('widget-vbox-single')
                     .addClass('widget-hbox-single');
                 this.$label
                     .removeClass('widget-vlabel')
                     .addClass('widget-hlabel');
             }
 
             var description = this.model.get('description');
             if (description.length == 0) {
                 this.$label.hide();
             } else {
                 this.$label.html(description);
                 this.$label.show();
             }
             return IPython.WidgetView.prototype.update.call(this);
         },
         
         // Handles: User input
         events: { "slide" : "handleSliderChange" }, 
         handleSliderChange: function(e, ui) { 
             this.model.set('value', ~~ui.value); // Double bit-wise not to truncate decimel
             this.model.update_other_views(this);
         },
     });
 
-    IPython.notebook.widget_manager.register_widget_view('IntSliderView', IntSliderView);
+    IPython.widget_manager.register_widget_view('IntSliderView', IntSliderView);
 
     var IntTextView = IPython.WidgetView.extend({
         
         // Called when view is rendered.
         render : function(){
             this.$el
                 .addClass('widget-hbox-single')
                 .html('');
             this.$label = $('<div />')
                 .appendTo(this.$el)
                 .addClass('widget-hlabel')
                 .hide();
             this.$textbox = $('<input type="text" />')
                 .addClass('input')
                 .addClass('widget-numeric-text')
                 .appendTo(this.$el);
             this.$el_to_style = this.$textbox; // Set default element to style
             this.update(); // Set defaults.
         },
         
         // Handles: Backend -> Frontend Sync
         //          Frontent -> Frontend Sync
         update : function(){
             var value = this.model.get('value');
             if (!this.changing && parseInt(this.$textbox.val()) != value) {
                 this.$textbox.val(value);
             }
             
             if (this.model.get('disabled')) {
                 this.$textbox.attr('disabled','disabled');
             } else {
                 this.$textbox.removeAttr('disabled');
             }
 
             var description = this.model.get('description');
             if (description.length == 0) {
                 this.$label.hide();
             } else {
                 this.$label.html(description);
                 this.$label.show();
             }
             return IPython.WidgetView.prototype.update.call(this);
         },
         
         
         events: {"keyup input" : "handleChanging",
                 "paste input" : "handleChanging",
                 "cut input" : "handleChanging",
                 "change input" : "handleChanged"}, // Fires only when control is validated or looses focus.
         
         // Handles and validates user input.
         handleChanging: function(e) { 
             
             // Try to parse value as a float.
             var numericalValue = 0;
             if (e.target.value != '') {
                 numericalValue = parseInt(e.target.value);
             }
             
             // If parse failed, reset value to value stored in model.
             if (isNaN(numericalValue)) {
                 e.target.value = this.model.get('value');
             } else if (!isNaN(numericalValue)) {
                 if (this.model.get('max') != undefined) {
                     numericalValue = Math.min(this.model.get('max'), numericalValue);
                 }
                 if (this.model.get('min') != undefined) {
                     numericalValue = Math.max(this.model.get('min'), numericalValue);
                 }
                 
                 // Apply the value if it has changed.
                 if (numericalValue != this.model.get('value')) {
                     this.changing = true;
                     this.model.set('value', numericalValue);
                     this.model.update_other_views(this);
                     this.changing = false;
                 }
             }
         },
         
         // Applies validated input.
         handleChanged: function(e) { 
             // Update the textbox
             if (this.model.get('value') != e.target.value) {
                 e.target.value = this.model.get('value');
             }
         }
     });
 
-    IPython.notebook.widget_manager.register_widget_view('IntTextView', IntTextView);
+    IPython.widget_manager.register_widget_view('IntTextView', IntTextView);
 });

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

@@ -1,139 +1,139 b''
-require(["notebook/js/widget"], function(){
+define(["notebook/js/widget"], function(){
     var MulticontainerModel = IPython.WidgetModel.extend({});
-    IPython.notebook.widget_manager.register_widget_model('MulticontainerWidgetModel', MulticontainerModel);
+    IPython.widget_manager.register_widget_model('MulticontainerWidgetModel', MulticontainerModel);
 
     var AccordionView = IPython.WidgetView.extend({
         
         render: function(){
             this.$el = $('<div />', {id: IPython.utils.uuid()})
                 .addClass('accordion');
             this.containers = [];
         },
         
         update: function() {
             // Set tab titles
             var titles = this.model.get('_titles');
             for (var page_index in titles) {
 
                 var accordian = this.containers[page_index]
                 if (accordian != undefined) {
                     accordian
                         .find('.accordion-heading')
                         .find('.accordion-toggle')
                         .html(titles[page_index]);
                 }
             }
 
             return IPython.WidgetView.prototype.update.call(this);
         },
 
         display_child: function(view) {
 
             var index = this.containers.length;
             var uuid = IPython.utils.uuid();
             var accordion_group = $('<div />')
                 .addClass('accordion-group')
                 .appendTo(this.$el);
             var accordion_heading = $('<div />')
                 .addClass('accordion-heading')
                 .appendTo(accordion_group);
             var accordion_toggle = $('<a />')
                 .addClass('accordion-toggle')
                 .attr('data-toggle', 'collapse')
                 .attr('data-parent', '#' + this.$el.attr('id'))
                 .attr('href', '#' + uuid)
                 .html('Page ' + index)
                 .appendTo(accordion_heading);
             var accordion_body = $('<div />', {id: uuid})
                 .addClass('accordion-body collapse')
                 .appendTo(accordion_group);
             var accordion_inner = $('<div />')
                 .addClass('accordion-inner')
                 .appendTo(accordion_body);
             this.containers.push(accordion_group);
 
             accordion_inner.append(view.$el);
             this.update();
         },
     });
 
-    IPython.notebook.widget_manager.register_widget_view('AccordionView', AccordionView);
+    IPython.widget_manager.register_widget_view('AccordionView', AccordionView);
     
     var TabView = IPython.WidgetView.extend({
         
         render: function(){
             this.$el = $('<div />');
             var uuid = IPython.utils.uuid();
             var that = this;
             this.$tabs = $('<div />', {id: uuid})
                 .addClass('nav')
                 .addClass('nav-tabs')
                 .appendTo(this.$el);
             this.$tab_contents = $('<div />', {id: uuid + 'Content'})
                 .addClass('tab-content')
                 .appendTo(this.$el);
 
             this.containers = [];
         },
         
         update: function() {
             // Set tab titles
             var titles = this.model.get('_titles');
             for (var page_index in titles) {
                 var tab_text = this.containers[page_index]
                 if (tab_text != undefined) {
                     tab_text.html(titles[page_index]);
                 }
             }
 
             var selected_index = this.model.get('selected_index');
             if (0 <= selected_index && selected_index < this.containers.length) {
                 this.select_page(selected_index);
             }
 
             return IPython.WidgetView.prototype.update.call(this);
         },
 
         display_child: function(view) {
 
             var index = this.containers.length;
             var uuid = IPython.utils.uuid();
 
             var that = this;
             var tab = $('<li />')
                 .css('list-style-type', 'none')
                 .appendTo(this.$tabs);
             var tab_text = $('<a />')
                 .attr('href', '#' + uuid)
                 .attr('data-toggle', 'tab') 
                 .html('Page ' + index)
                 .appendTo(tab)
                 .click(function (e) {
                     that.model.set("selected_index", index);
                     that.model.update_other_views(that);
                     that.select_page(index);
                 });
             this.containers.push(tab_text);
 
             var contents_div = $('<div />', {id: uuid})
                 .addClass('tab-pane')
                 .addClass('fade')
                 .append(view.$el)
                 .appendTo(this.$tab_contents);
 
             if (index==0) {
                 tab_text.tab('show');
             }
             this.update();
         },
 
         select_page: function(index) {
             this.$tabs.find('li')
                 .removeClass('active');
             this.containers[index].tab('show');
         },
     });
 
-    IPython.notebook.widget_manager.register_widget_view('TabView', TabView);
+    IPython.widget_manager.register_widget_view('TabView', TabView);
 
 });

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

@@ -1,251 +1,251 b''
-require(["notebook/js/widget"], function(){
+define(["notebook/js/widget"], function(){
     var SelectionWidgetModel = IPython.WidgetModel.extend({});
-    IPython.notebook.widget_manager.register_widget_model('SelectionWidgetModel', SelectionWidgetModel);
+    IPython.widget_manager.register_widget_model('SelectionWidgetModel', SelectionWidgetModel);
 
     var DropdownView = IPython.WidgetView.extend({
         
         // Called when view is rendered.
         render : function(){
             
             this.$el
                 .addClass('widget-hbox-single')
                 .html('');
             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')
                                 .appendTo(this.$buttongroup);
             this.$dropbutton = $('<button />')
                                 .addClass('btn')
                                 .addClass('dropdown-toggle')
                                 .attr('data-toggle', 'dropdown')
                                 .html('<span class="caret"></span>')
                                 .appendTo(this.$buttongroup);
             this.$droplist = $('<ul />')
                                 .addClass('dropdown-menu')
                                 .appendTo(this.$buttongroup);
             
             // Set defaults.
             this.update();
         },
         
         // Handles: Backend -> Frontend Sync
         //          Frontent -> Frontend Sync
         update : function(){
             this.$droplabel.html(this.model.get('value'));
             
             var items = this.model.get('values');
             this.$droplist.html('');
             for (var index in items) {
                 var that = this;
                 var item_button = $('<a href="#"/>')
                     .html(items[index])
                     .on('click', function(e){
                         that.model.set('value', $(e.target).html(), this);
                         that.model.update_other_views(that);
                     })
                 
                 this.$droplist.append($('<li />').append(item_button))
             }
             
             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.html(description);
                 this.$label.show();
             }
             return IPython.WidgetView.prototype.update.call(this);
         },
         
     });
 
-    IPython.notebook.widget_manager.register_widget_view('DropdownView', DropdownView);
+    IPython.widget_manager.register_widget_view('DropdownView', DropdownView);
 
     var RadioButtonsView = IPython.WidgetView.extend({
         
         // Called when view is rendered.
         render : function(){
             this.$el
                 .addClass('widget-hbox')
                 .html('');
             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();
         },
         
         // Handles: Backend -> Frontend Sync
         //          Frontent -> Frontend Sync
         update : function(){
             
             // Add missing items to the DOM.
             var items = this.model.get('values');
             var disabled = this.model.get('disabled');
             for (var index in items) {
                 var item_query = ' :input[value="' + items[index] + '"]';
                 if (this.$el.find(item_query).length == 0) {
                     var $label = $('<label />')
                         .addClass('radio')
                         .html(items[index])
                         .appendTo(this.$container);
                     
                     var that = this;
                     $('<input />')
                         .attr('type', 'radio')
                         .addClass(this.model)
                         .val(items[index])
                         .prependTo($label)
                         .on('click', function(e){
                             that.model.set('value', $(e.target).val(), this);
                             that.model.update_other_views(that);
                         });
                 }
                 
                 var $item_element = this.$container.find(item_query);
                 if (this.model.get('value') == items[index]) {
                     $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;
                 for (var index in items) {
                     if (items[index] == value) {
                         found = true;
                         break;
                     }
                 }
                 
                 if (!found) {
                     $(obj).parent().remove();
                 }
             });
 
             var description = this.model.get('description');
             if (description.length == 0) {
                 this.$label.hide();
             } else {
                 this.$label.html(description);
                 this.$label.show();
             }
             return IPython.WidgetView.prototype.update.call(this);
         },
         
     });
 
-    IPython.notebook.widget_manager.register_widget_view('RadioButtonsView', RadioButtonsView);
+    IPython.widget_manager.register_widget_view('RadioButtonsView', RadioButtonsView);
 
 
     var ToggleButtonsView = IPython.WidgetView.extend({
         
         // Called when view is rendered.
         render : function(){
             this.$el
                 .addClass('widget-hbox-single')
                 .html('');
             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();
         },
         
         // Handles: Backend -> Frontend Sync
         //          Frontent -> Frontend Sync
         update : function(){
             
             // Add missing items to the DOM.
             var items = this.model.get('values');
             var disabled = this.model.get('disabled');
             for (var index in items) {
                 var item_query = ' :contains("' + items[index] + '")';
                 if (this.$buttongroup.find(item_query).length == 0) {
                     
                     var that = this;
                     $('<button />')
                         .attr('type', 'button')
                         .addClass('btn')
                         .html(items[index])
                         .appendTo(this.$buttongroup)
                         .on('click', function(e){
                             that.model.set('value', $(e.target).html(), this);
                             that.model.update_other_views(that);
                         });
                 }
                 
                 var $item_element = this.$buttongroup.find(item_query);
                 if (this.model.get('value') == items[index]) {
                     $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).html();
                 var found = false;
                 for (var index in items) {
                     if (items[index] == value) {
                         found = true;
                         break;
                     }
                 }
                 
                 if (!found) {
                     $(obj).remove();
                 }
             });
 
             var description = this.model.get('description');
             if (description.length == 0) {
                 this.$label.hide();
             } else {
                 this.$label.html(description);
                 this.$label.show();
             }
             return IPython.WidgetView.prototype.update.call(this);
         },
         
     });
 
-    IPython.notebook.widget_manager.register_widget_view('ToggleButtonsView', ToggleButtonsView);
+    IPython.widget_manager.register_widget_view('ToggleButtonsView', ToggleButtonsView);
 });

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

@@ -1,131 +1,131 b''
-require(["notebook/js/widget"], function(){
+define(["notebook/js/widget"], function(){
     var StringWidgetModel = IPython.WidgetModel.extend({});
-    IPython.notebook.widget_manager.register_widget_model('StringWidgetModel', StringWidgetModel);
+    IPython.widget_manager.register_widget_model('StringWidgetModel', StringWidgetModel);
 
     var LabelView = IPython.WidgetView.extend({
       
         // Called when view is rendered.
         render : function(){
             this.$el = $('<div />');
             this.update(); // Set defaults.
         },
         
         // Handles: Backend -> Frontend Sync
         //          Frontent -> Frontend Sync
         update : function(){
             this.$el.html(this.model.get('value'));
             return IPython.WidgetView.prototype.update.call(this);
         },
         
     });
 
-    IPython.notebook.widget_manager.register_widget_view('LabelView', LabelView);
+    IPython.widget_manager.register_widget_view('LabelView', LabelView);
 
     var TextAreaView = IPython.WidgetView.extend({
       
         // Called when view is rendered.
         render : function(){
             this.$el
                 .addClass('widget-hbox')
                 .html('');
             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.
         },
         
         // Handles: Backend -> Frontend Sync
         //          Frontent -> Frontend Sync
         update : function(){
             if (!this.user_invoked_update) {
                 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.html(description);
                 this.$label.show();
             }
             return IPython.WidgetView.prototype.update.call(this);
         },
         
         events: {"keyup textarea" : "handleChanging",
                 "paste textarea" : "handleChanging",
                 "cut textarea" : "handleChanging"},
         
         // Handles and validates user input.
         handleChanging: function(e) { 
             this.user_invoked_update = true;
             this.model.set('value', e.target.value);
             this.model.update_other_views(this);
             this.user_invoked_update = false;
         },
     });
 
-    IPython.notebook.widget_manager.register_widget_view('TextAreaView', TextAreaView);
+    IPython.widget_manager.register_widget_view('TextAreaView', TextAreaView);
 
     var TextBoxView = IPython.WidgetView.extend({
       
         // Called when view is rendered.
         render : function(){
             this.$el
                 .addClass('widget-hbox-single')
                 .html('');
             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.
         },
         
         // Handles: Backend -> Frontend Sync
         //          Frontent -> Frontend Sync
         update : function(){
             if (!this.user_invoked_update) {
                 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.html(description);
                 this.$label.show();
             }
             return IPython.WidgetView.prototype.update.call(this);
         },
         
         events: {"keyup input" : "handleChanging",
                 "paste input" : "handleChanging",
                 "cut input" : "handleChanging"},
         
         // Handles and validates user input.
         handleChanging: function(e) { 
             this.user_invoked_update = true;
             this.model.set('value', e.target.value);
             this.model.update_other_views(this);
             this.user_invoked_update = false;
         },
     });
 
-    IPython.notebook.widget_manager.register_widget_view('TextBoxView', TextBoxView);
+    IPython.widget_manager.register_widget_view('TextBoxView', TextBoxView);
 });

IPython/html/widgets/__init__.py

@@ -1,12 +1,12 b''
-from .widget import Widget, init_widget_js
+from .widget import Widget
 
 from .widget_bool import BoolWidget
 from .widget_button import ButtonWidget
 from .widget_container import ContainerWidget
 from .widget_float import FloatWidget
 from .widget_float_range import FloatRangeWidget
 from .widget_int import IntWidget
 from .widget_int_range import IntRangeWidget
 from .widget_multicontainer import MulticontainerWidget
 from .widget_selection import SelectionWidget
 from .widget_string import StringWidget

IPython/html/widgets/widget.py

@@ -1,365 +1,352 b''
 """Base Widget class.  Allows user to create widgets in the backend that render
 in the IPython notebook frontend.
 """
 #-----------------------------------------------------------------------------
 # 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 copy import copy
 from glob import glob
 import uuid
 import sys
 import os
 import inspect
 
 import IPython
 from IPython.kernel.comm import Comm
 from IPython.config import LoggingConfigurable
 from IPython.utils.traitlets import Unicode, Dict, List, Instance, Bool
 from IPython.display import Javascript, display
 from IPython.utils.py3compat import string_types
 
-#-----------------------------------------------------------------------------
-# Shared
-#-----------------------------------------------------------------------------
-def init_widget_js():
-    path = os.path.split(os.path.abspath( __file__ ))[0]
-    for filepath in glob(os.path.join(path, "*.py")):
-        filename = os.path.split(filepath)[1]
-        name = filename.rsplit('.', 1)[0]
-        if not (name == 'widget' or name == '__init__') and name.startswith('widget_'):
-            # Remove 'widget_' from the start of the name before compiling the path.
-            js_path = 'static/notebook/js/widgets/%s.js' % name[7:]
-            display(Javascript(data='$.getScript($("body").data("baseProjectUrl") + "%s");' % js_path), exclude="text/plain")  
-
 
 #-----------------------------------------------------------------------------
 # Classes
 #-----------------------------------------------------------------------------
 class Widget(LoggingConfigurable):
 
     # Shared declarations
     _keys = []
     
     # Public declarations
     target_name = Unicode('widget', help="""Name of the backbone model 
         registered in the frontend to create and sync this widget with.""")
     default_view_name = Unicode(help="""Default view registered in the frontend
         to use to represent the widget.""")
     parent = Instance('IPython.html.widgets.widget.Widget')
     visible = Bool(True, help="Whether or not the widget is visible.")
 
     def _parent_changed(self, name, old, new):
         if self._displayed:
             raise Exception('Parent cannot be set because widget has been displayed.')
         elif new == self:
             raise Exception('Parent cannot be set to self.')
         else:
 
             # Parent/child association
             if new is not None and not self in new._children:
                 new._children.append(self)
             if old is not None and self in old._children:
                 old._children.remove(self)                
 
     # Private/protected declarations
     _property_lock = False
     _css = Dict() # Internal CSS property dict
     _add_class = List() # Used to add a js class to a DOM element (call#, selector, class_name)
     _remove_class = List() # Used to remove a js class from a DOM element (call#, selector, class_name)
     _displayed = False
     _comm = None
     
     
     def __init__(self, **kwargs):
         """Public constructor
 
         Parameters
         ----------
         parent : Widget instance (optional)
             Widget that this widget instance is child of.  When the widget is
             displayed in the frontend, it's corresponding view will be made
             child of the parent's view if the parent's view exists already.  If
             the parent's view is displayed, it will automatically display this 
             widget's default view as it's child.  The default view can be set
             via the default_view_name property.
         """
         self._children = []
         self._add_class = [0]
         self._remove_class = [0]
         self._display_callbacks = []
         super(Widget, self).__init__(**kwargs)
                 
         # Register after init to allow default values to be specified
         self.on_trait_change(self._handle_property_changed, self.keys)
         
         
     def __del__(self):
         """Object disposal"""
         self.close()
     
 
     def close(self):
         """Close method.  Closes the widget which closes the underlying comm.
         When the comm is closed, all of the widget views are automatically 
         removed from the frontend."""
         self._comm.close()
         del self._comm
     
     
     # Properties      
     def _get_keys(self):
         keys = ['visible', '_css', '_add_class', '_remove_class']
         keys.extend(self._keys)
         return keys
     keys = property(_get_keys)
     
     
     # Event handlers
     def _handle_msg(self, msg):
         """Called when a msg is recieved from the frontend"""
         # Handle backbone sync methods CREATE, PATCH, and UPDATE
         sync_method = msg['content']['data']['sync_method']
         sync_data = msg['content']['data']['sync_data']
         self._handle_recieve_state(sync_data) # handles all methods
     
     
     def _handle_recieve_state(self, sync_data):
         """Called when a state is recieved from the frontend."""
         self._property_lock = True
         try:
             
             # Use _keys instead of keys - Don't get retrieve the css from the client side.
             for name in self._keys:
                 if name in sync_data:
                     setattr(self, name, sync_data[name])
         finally:
             self._property_lock = False
     
     
     def _handle_property_changed(self, name, old, new):
         """Called when a proeprty has been changed."""
         if not self._property_lock and self._comm is not None:
             # TODO: Validate properties.
             # Send new state to frontend
             self.send_state(key=name)
 
 
     def _handle_close(self):
         """Called when the comm is closed by the frontend."""
         self._comm = None
     
     
     # Public methods
     def send_state(self, key=None):
         """Sends the widget state, or a piece of it, to the frontend.
 
         Parameters
         ----------
         key : unicode (optional)
             A single property's name to sync with the frontend.
         """
         if self._comm is not None:
             state = {}
 
             # If a key is provided, just send the state of that key.
             keys = []
             if key is None:
                 keys.extend(self.keys)
             else:
                 keys.append(key)
             for key in self.keys:
                 try:
                     state[key] = getattr(self, key)
                 except Exception as e:
                     pass # Eat errors, nom nom nom
             self._comm.send({"method": "update",
                             "state": state})
 
 
     def get_css(self, key, selector=""):
         """Get a CSS property of the widget.  Note, this function does not 
         actually request the CSS from the front-end;  Only properties that have 
         been set with set_css can be read.
 
         Parameters
         ----------
         key: unicode
             CSS key
         selector: unicode (optional)
             JQuery selector used when the CSS key/value was set.
         """
         if selector in self._css and key in self._css[selector]:
             return self._css[selector][key]
         else:
             return None
 
 
     def set_css(self, *args, **kwargs):
         """Set one or more CSS properties of the widget (shared among all of the 
         views).  This function has two signatures:
         - set_css(css_dict, [selector=''])
         - set_css(key, value, [selector=''])
 
         Parameters
         ----------
         css_dict : dict
             CSS key/value pairs to apply
         key: unicode
             CSS key
         value
             CSS value
         selector: unicode (optional)
             JQuery selector to use to apply the CSS key/value.
         """
         selector = kwargs.get('selector', '')
 
         # Signature 1: set_css(css_dict, [selector=''])
         if len(args) == 1:
             if isinstance(args[0], dict):
                 for (key, value) in args[0].items():
                     self.set_css(key, value, selector=selector)
             else:
                 raise Exception('css_dict must be a dict.')
 
         # Signature 2: set_css(key, value, [selector=''])
         elif len(args) == 2 or len(args) == 3:
 
             # Selector can be a positional arg if it's the 3rd value
             if len(args) == 3:
                 selector = args[2]
             if selector not in self._css:
                 self._css[selector] = {}
                 
             # Only update the property if it has changed.
             key = args[0]
             value = args[1]
             if not (key in self._css[selector] and value in self._css[selector][key]):
                 self._css[selector][key] = value
                 self.send_state('_css') # Send new state to client.
         else:
             raise Exception('set_css only accepts 1-3 arguments')
 
 
     def add_class(self, class_name, selector=""):
         """Add class[es] to a DOM element
 
         Parameters
         ----------
         class_name: unicode
             Class name(s) to add to the DOM element(s).  Multiple class names 
             must be space separated.
         selector: unicode (optional)
             JQuery selector to select the DOM element(s) that the class(es) will 
             be added to.
         """
         self._add_class = [self._add_class[0] + 1, selector, class_name]
         self.send_state(key='_add_class')
 
 
     def remove_class(self, class_name, selector=""):
         """Remove class[es] from a DOM element
 
         Parameters
         ----------
         class_name: unicode
             Class name(s) to remove from  the DOM element(s).  Multiple class 
             names must be space separated.
         selector: unicode (optional)
             JQuery selector to select the DOM element(s) that the class(es) will 
             be removed from.
         """
         self._remove_class = [self._remove_class[0] + 1, selector, class_name]
         self.send_state(key='_remove_class')
 
 
     def on_displayed(self, callback, remove=False):
         """Register a callback to be called when the widget has been displayed
 
         Parameters
         ----------
         callback: method handler
             Can have a signature of:
             - callback()
             - callback(sender)
             - callback(sender, view_name)
         remove: bool
             True if the callback should be unregistered."""
         if remove:
             self._display_callbacks.remove(callback)
         elif not callback in self._display_callbacks:
             self._display_callbacks.append(callback)
 
 
     def handle_displayed(self, view_name):
         """Called when a view has been displayed for this widget instance
 
         Parameters
         ----------
         view_name: unicode
             Name of the view that was displayed."""
         for handler in self._display_callbacks:
             if callable(handler):
                 argspec = inspect.getargspec(handler)
                 nargs = len(argspec[0])
 
                 # Bound methods have an additional 'self' argument
                 if isinstance(handler, types.MethodType):
                     nargs -= 1
 
                 # Call the callback
                 if nargs == 0:
                     handler()
                 elif nargs == 1:
                     handler(self)
                 elif nargs == 2:
                     handler(self, view_name)
                 else:
                     raise TypeError('Widget display callback must ' \
                         'accept 0-2 arguments, not %d.' % nargs)
 
 
     # Support methods
     def _repr_widget_(self, view_name=None):
         """Function that is called when `IPython.display.display` is called on
         the widget.
 
         Parameters
         ----------
         view_name: unicode (optional)
             View to display in the frontend.  Overrides default_view_name."""
 
         if not view_name:
             view_name = self.default_view_name
         
         # Create a comm.
         if self._comm is None:
             self._comm = Comm(target_name=self.target_name)
             self._comm.on_msg(self._handle_msg)
             self._comm.on_close(self._handle_close)
         
         # Make sure model is syncronized
         self.send_state()
             
         # Show view.
         if self.parent is None or self.parent._comm is None:
             self._comm.send({"method": "display", "view_name": view_name})
         else:
             self._comm.send({"method": "display", 
                             "view_name": view_name,
                             "parent": self.parent._comm.comm_id})
         self._displayed = True
         self.handle_displayed(view_name)
 
         # Now display children if any.
         for child in self._children:
             if child != self:
                 child._repr_widget_()
         return None

examples/widgets/File Upload Widget.ipynb

@@ -1,295 +1,220 b''
 {
  "metadata": {
   "cell_tags": [
    [
     "<None>",
     null
    ]
   ],
   "name": ""
  },
  "nbformat": 3,
  "nbformat_minor": 0,
  "worksheets": [
   {
    "cells": [
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "from IPython.html import widgets # Widget definitions\n",
-      "from IPython.display import display # Used to display widgets in the notebook\n",
-      "\n",
-      "# Enable widgets in this notebook\n",
-      "widgets.init_widget_js()"
+      "from IPython.display import display # Used to display widgets in the notebook"
      ],
      "language": "python",
      "metadata": {},
-     "outputs": [
-      {
-       "javascript": [
-        "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/button.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/int_range.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/string.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/multicontainer.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/bool.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/int.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/selection.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/float.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/float_range.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/container.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      }
-     ],
+     "outputs": [],
      "prompt_number": 1
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "source": [
       "Custom Widget"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "# Import the base Widget class and the traitlets Unicode class.\n",
       "from IPython.html.widgets import Widget\n",
       "from IPython.utils.traitlets import Unicode, Int\n",
       "\n",
       "# Define our FileWidget and its target model and default view.\n",
       "class FileWidget(Widget):\n",
       "    target_name = Unicode('FileWidgetModel')\n",
       "    default_view_name = Unicode('FilePickerView')\n",
       "    \n",
       "    # Define the custom state properties to sync with the front-end\n",
       "    _keys = ['value', 'filename']\n",
       "    value = Unicode('')\n",
       "    filename = Unicode('')\n",
       "    on_failed = Int(0)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 2
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "%%javascript\n",
       "\n",
       "require([\"notebook/js/widget\"], function(){\n",
       "    \n",
       "    // Define the FileModel and register it with the widget manager.\n",
       "    var FileModel = IPython.WidgetModel.extend({});\n",
-      "    IPython.notebook.widget_manager.register_widget_model('FileWidgetModel', FileModel);\n",
+      "    IPython.widget_manager.register_widget_model('FileWidgetModel', FileModel);\n",
       "    \n",
       "    // Define the FilePickerView\n",
       "    var FilePickerView = IPython.WidgetView.extend({\n",
       "        \n",
       "        render: function(){\n",
       "            var that = this;\n",
       "            this.$el = $('<input />')\n",
       "                .attr('type', 'file')\n",
       "                .change(function(evt){ that.handleFileChange(evt) });\n",
       "        },\n",
       "        \n",
       "        // Handles: User input\n",
       "        handleFileChange: function(evt) { \n",
       "            \n",
       "            //Retrieve the first (and only!) File from the FileList object\n",
       "            var that = this;\n",
       "            var f = evt.target.files[0];\n",
       "            if (f) {\n",
       "                var r = new FileReader();\n",
       "                r.onload = function(e) {\n",
       "                    that.model.set('value', e.target.result);\n",
       "                    that.model.update_other_views(that);\n",
       "                }\n",
       "                r.readAsText(f);\n",
       "            } else {\n",
       "                this.model.set('on_failed', this.model.get('on_failed') + 1);\n",
       "                this.model.update_other_views(this);\n",
       "            }\n",
       "            this.model.set('filename', f.name);\n",
       "            this.model.update_other_views(this);\n",
       "        },\n",
       "    });\n",
       "        \n",
       "    // Register the DatePickerView with the widget manager.\n",
-      "    IPython.notebook.widget_manager.register_widget_view('FilePickerView', FilePickerView);\n",
+      "    IPython.widget_manager.register_widget_view('FilePickerView', FilePickerView);\n",
       "});"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "javascript": [
         "\n",
         "require([\"notebook/js/widget\"], function(){\n",
         "    \n",
         "    // Define the FileModel and register it with the widget manager.\n",
         "    var FileModel = IPython.WidgetModel.extend({});\n",
-        "    IPython.notebook.widget_manager.register_widget_model('FileWidgetModel', FileModel);\n",
+        "    IPython.widget_manager.register_widget_model('FileWidgetModel', FileModel);\n",
         "    \n",
         "    // Define the FilePickerView\n",
         "    var FilePickerView = IPython.WidgetView.extend({\n",
         "        \n",
         "        render: function(){\n",
         "            var that = this;\n",
         "            this.$el = $('<input />')\n",
         "                .attr('type', 'file')\n",
         "                .change(function(evt){ that.handleFileChange(evt) });\n",
         "        },\n",
         "        \n",
         "        // Handles: User input\n",
-        "        events: { \"change\" : \"handleFileChange\" }, \n",
         "        handleFileChange: function(evt) { \n",
         "            \n",
         "            //Retrieve the first (and only!) File from the FileList object\n",
         "            var that = this;\n",
         "            var f = evt.target.files[0];\n",
         "            if (f) {\n",
         "                var r = new FileReader();\n",
         "                r.onload = function(e) {\n",
         "                    that.model.set('value', e.target.result);\n",
         "                    that.model.update_other_views(that);\n",
         "                }\n",
         "                r.readAsText(f);\n",
         "            } else {\n",
         "                this.model.set('on_failed', this.model.get('on_failed') + 1);\n",
         "                this.model.update_other_views(this);\n",
         "            }\n",
         "            this.model.set('filename', f.name);\n",
         "            this.model.update_other_views(this);\n",
         "        },\n",
         "    });\n",
         "        \n",
         "    // Register the DatePickerView with the widget manager.\n",
-        "    IPython.notebook.widget_manager.register_widget_view('FilePickerView', FilePickerView);\n",
+        "    IPython.widget_manager.register_widget_view('FilePickerView', FilePickerView);\n",
         "});"
        ],
        "metadata": {},
        "output_type": "display_data",
        "text": [
-        "<IPython.core.display.Javascript at 0x2fa80d0>"
+        "<IPython.core.display.Javascript at 0x319fe90>"
        ]
       }
      ],
      "prompt_number": 3
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "source": [
       "Usage"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "file_widget = FileWidget()\n",
       "display(file_widget)\n",
       "\n",
       "def file_loading():\n",
       "    print \"Loading %s\" % file_widget.filename\n",
       "\n",
       "def file_loaded():\n",
       "    print \"Loaded, file contents: %s\" % file_widget.value\n",
       "\n",
       "def file_failed(name, old_value, new_value):\n",
       "    if new_value > old_value:\n",
       "        print \"Could not load file contents of %s\" % file_widget.filename\n",
       "\n",
       "\n",
       "file_widget.on_trait_change(file_loading, 'filename')\n",
       "file_widget.on_trait_change(file_loaded, 'value')\n",
       "file_widget.on_trait_change(file_failed, 'on_failed')"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "output_type": "stream",
        "stream": "stdout",
        "text": [
         "Loading test.txt\n"
        ]
       },
       {
        "output_type": "stream",
        "stream": "stdout",
        "text": [
         "Loaded, file contents:  \n",
         "hello world!\n"
        ]
       }
      ],
      "prompt_number": 4
     }
    ],
    "metadata": {}
   }
  ]
 }
  No newline at end of file

examples/widgets/Part 1 - Basics.ipynb

@@ -1,391 +1,323 b''
 {
  "metadata": {
+  "cell_tags": [
+   [
+    "<None>",
+    null
+   ]
+  ],
   "name": ""
  },
  "nbformat": 3,
  "nbformat_minor": 0,
  "worksheets": [
   {
    "cells": [
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
-      "To enable the use IPython widgets in the notebook, the widget namespace and display function need to be imported.  The Javascript dependencies need to be loaded via `IPython.html.widgets.init_widget_js()`.  This method needs to be called each time the notebook webpage is refreshed."
+      "To use IPython widgets in the notebook, the widget namespace and display function need 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\n",
-      "\n",
-      "# Enable widgets in this notebook\n",
-      "widgets.init_widget_js()"
+      "from IPython.display import display # Used to display widgets in the notebook"
      ],
      "language": "python",
      "metadata": {},
-     "outputs": [
-      {
-       "javascript": [
-        "$.getScript(\"/static/notebook/js/widgets/bool.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript(\"/static/notebook/js/widgets/int_range.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript(\"/static/notebook/js/widgets/int.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript(\"/static/notebook/js/widgets/selection.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript(\"/static/notebook/js/widgets/string.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript(\"/static/notebook/js/widgets/float.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript(\"/static/notebook/js/widgets/container.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript(\"/static/notebook/js/widgets/multicontainer.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript(\"/static/notebook/js/widgets/button.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript(\"/static/notebook/js/widgets/float_range.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      }
-     ],
+     "outputs": [],
      "prompt_number": 1
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "source": [
       "Basic Widgets"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "The IPython notebook comes preloaded with basic widgets that represent common data types.  These widgets are\n",
       "\n",
       "- BoolWidget : boolean  \n",
       "- FloatRangeWidget : bounded float  \n",
       "- FloatWidget : unbounded float  \n",
       "- IntRangeWidget : bounded integer  \n",
       "- IntWidget : unbounded integer  \n",
       "- SelectionWidget : enumeration  \n",
       "- StringWidget : string  \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",
       "- ButtonWidget  \n",
       "- ContainerWidget  \n",
       "- MulticontainerWidget  \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": [
         "['BoolWidget',\n",
         " 'ButtonWidget',\n",
         " 'ContainerWidget',\n",
         " 'FloatRangeWidget',\n",
         " 'FloatWidget',\n",
         " 'IntRangeWidget',\n",
         " 'IntWidget',\n",
         " 'MulticontainerWidget',\n",
         " 'SelectionWidget',\n",
         " 'StringWidget',\n",
         " 'Widget']"
        ]
       }
      ],
      "prompt_number": 2
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "The basic widgets can all be constructed without arguments.  The following creates a FloatRangeWidget without displaying it"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "mywidget = widgets.FloatRangeWidget()"
      ],
      "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.  `mywidget` is displayed by"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "display(mywidget)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 4
     },
     {
      "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 properties (traitlets).  The names of these instance properties are listed in the widget's `keys` property (as seen below).  A few of these properties are common to most, if not all, widgets.  The common properties are `value`, `description`, `visible`, and `disabled`.  `_css`, `_add_class`, and `_remove_class` are internal properties 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": 5,
        "text": [
         "['visible',\n",
         " '_css',\n",
         " '_add_class',\n",
         " '_remove_class',\n",
         " 'value',\n",
         " 'step',\n",
         " 'max',\n",
         " 'min',\n",
         " 'disabled',\n",
         " 'orientation',\n",
         " 'description']"
        ]
       }
      ],
      "prompt_number": 5
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Changing a widget's property value will automatically update that widget everywhere it is displayed in the notebook.  Here the value of `mywidget` is set.  The slider shown above (after input 4) updates automatically to the new value.  In reverse, 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": 6
     },
     {
      "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": 7,
        "text": [
         "0.0"
        ]
       }
      ],
      "prompt_number": 7
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Widget property values can also be set with kwargs during the construction of the widget (as seen below)."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "mysecondwidget = widgets.SelectionWidget(values=[\"Item A\", \"Item B\", \"Item C\"], value=\"Nothing Selected\")\n",
       "display(mysecondwidget)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 8
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "source": [
       "Views"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "The data types that most of the widgets represent can be displayed more than one way.  A `view` is a visual representation of a widget in the notebook.  In the example in the section above, the default `view` for the `FloatRangeWidget` is used.  The default view is set in the widgets `default_view_name` instance property (as seen below)."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "mywidget.default_view_name"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "metadata": {},
        "output_type": "pyout",
        "prompt_number": 9,
        "text": [
         "u'FloatSliderView'"
        ]
       }
      ],
      "prompt_number": 9
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "When a widget is displayed using `display(...)`, the `default_view_name` is used to determine what view type should be used to display the widget.  View names are case sensitive.  Sometimes the default view isn't the best view to represent a piece of data.  To change what view is used, either the `default_view_name` can be changed or the `view_name` kwarg of `display` can be set.  This also can be used to display one widget multiple ways in one output (as seen below)."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "display(mywidget)\n",
       "display(mywidget, view_name=\"FloatTextView\")"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 10
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Some views work with multiple different widget types and some views only work with one.  The complete list of views and supported widgets is below.  The default views are italicized.\n",
       "\n",
       "| Widget Name            | View Names          |\n",
       "|:-----------------------|:--------------------|\n",
       "| BoolWidget             |   *CheckboxView*    |\n",
       "|                        |   ToggleButtonView  |\n",
       "| ButtonWidget           |   *ButtonView*      |\n",
       "| ContainerWidget        |   *ContainerView*   |\n",
       "| FloatRangeWidget       |   *FloatSliderView* |\n",
       "|                        |   FloatTextView     |\n",
       "|                        |   ProgressView      |\n",
       "| FloatWidget            |   *FloatTextView*   |\n",
       "| IntRangeWidget         |   *IntSliderView*   |\n",
       "|                        |   IntTextView       |\n",
       "|                        |   ProgressView      |\n",
       "| IntWidget              |   *IntTextView*     |\n",
       "| MulticontainerWidget   |   AccordionView     |\n",
       "|                        |   *TabView*         |\n",
       "| SelectionWidget        |   ToggleButtonsView |\n",
       "|                        |   RadioButtonsView  |\n",
       "|                        |   *DropdownView*    |\n",
       "| StringWidget           |   LabelView         |\n",
       "|                        |   TextAreaView      |\n",
       "|                        |   *TextBoxView*     |\n"
      ]
     }
    ],
    "metadata": {}
   }
  ]
 }
  No newline at end of file

examples/widgets/Part 2 - Events.ipynb

@@ -1,310 +1,242 b''
 {
  "metadata": {
+  "cell_tags": [
+   [
+    "<None>",
+    null
+   ]
+  ],
   "name": ""
  },
  "nbformat": 3,
  "nbformat_minor": 0,
  "worksheets": [
   {
    "cells": [
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "from IPython.html import widgets # Widget definitions\n",
-      "from IPython.display import display # Used to display widgets in the notebook\n",
-      "\n",
-      "# Enable widgets in this notebook\n",
-      "widgets.init_widget_js()"
+      "from IPython.display import display # Used to display widgets in the notebook"
      ],
      "language": "python",
      "metadata": {},
-     "outputs": [
-      {
-       "javascript": [
-        "$.getScript(\"/static/notebook/js/widgets/bool.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript(\"/static/notebook/js/widgets/int_range.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript(\"/static/notebook/js/widgets/int.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript(\"/static/notebook/js/widgets/selection.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript(\"/static/notebook/js/widgets/string.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript(\"/static/notebook/js/widgets/float.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript(\"/static/notebook/js/widgets/container.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript(\"/static/notebook/js/widgets/multicontainer.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript(\"/static/notebook/js/widgets/button.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript(\"/static/notebook/js/widgets/float_range.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      }
-     ],
+     "outputs": [],
      "prompt_number": 1
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "source": [
       "Traitlet Events"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "The widget properties are IPython traitlets.  Traitlets are eventful.  To handle property value changes, the `on_trait_change` method of the widget can be used to register an event handling callback.  The doc string 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",
       "An example of how to output an IntRangeWiget's value as it is changed can be seen below."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "intrange = widgets.IntRangeWidget()\n",
       "display(intrange)\n",
       "\n",
       "def on_value_change(name, value):\n",
       "    print value\n",
       "\n",
       "intrange.on_trait_change(on_value_change, 'value')"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 3
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "source": [
       "Specialized Events"
      ]
     },
     {
      "cell_type": "heading",
      "level": 2,
      "metadata": {},
      "source": [
       "Button On Click Event"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "The `ButtonWidget` is a special widget, like the `ContainerWidget` and `MulticontainerWidget`, 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 a click even handler.  The doc string 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.  The\n",
         "        callback can either accept no parameters or one sender parameter:\n",
         "        - callback()\n",
         "        - callback(sender)\n",
         "        If the callback has a sender parameter, the ButtonWidget instance that\n",
         "        called the callback will be passed into the method as the sender.\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 tracked by the `clicks` property of the button widget.  By using the `on_click` method and the `clicks` property, a button that outputs how many times 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(sender):\n",
       "    print(\"Button clicked %d times.\" % sender.clicks)\n",
       "\n",
       "button.on_click(on_button_clicked)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "output_type": "stream",
        "stream": "stdout",
        "text": [
         "Button clicked 1 times.\n"
        ]
       },
       {
        "output_type": "stream",
        "stream": "stdout",
        "text": [
         "Button clicked 2 times.\n"
        ]
       },
       {
        "output_type": "stream",
        "stream": "stdout",
        "text": [
         "Button clicked 3 times.\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 show_button(sender=None):\n",
       "    button = widgets.ButtonWidget()\n",
       "    button.description = \"%d\" % (sender.clicks if sender is not None else 0)\n",
       "    display(button)\n",
       "    button.on_click(show_button)\n",
       "show_button()\n",
       "    "
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 6
     }
    ],
    "metadata": {}
   }
  ]
 }
  No newline at end of file

examples/widgets/Part 3 - Placement.ipynb

@@ -1,326 +1,258 b''
 {
  "metadata": {
+  "cell_tags": [
+   [
+    "<None>",
+    null
+   ]
+  ],
   "name": ""
  },
  "nbformat": 3,
  "nbformat_minor": 0,
  "worksheets": [
   {
    "cells": [
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "from IPython.html import widgets # Widget definitions\n",
-      "from IPython.display import display # Used to display widgets in the notebook\n",
-      "\n",
-      "# Enable widgets in this notebook\n",
-      "widgets.init_widget_js()"
+      "from IPython.display import display # Used to display widgets in the notebook"
      ],
      "language": "python",
      "metadata": {},
-     "outputs": [
-      {
-       "javascript": [
-        "$.getScript(\"/static/notebook/js/widgets/bool.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript(\"/static/notebook/js/widgets/int_range.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript(\"/static/notebook/js/widgets/int.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript(\"/static/notebook/js/widgets/selection.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript(\"/static/notebook/js/widgets/string.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript(\"/static/notebook/js/widgets/float.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript(\"/static/notebook/js/widgets/container.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript(\"/static/notebook/js/widgets/multicontainer.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript(\"/static/notebook/js/widgets/button.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript(\"/static/notebook/js/widgets/float_range.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      }
-     ],
+     "outputs": [],
      "prompt_number": 1
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "source": [
       "Parent/Child Relationships"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "To display widget A inside widget B, widget A must be a child of widget B.  With IPython widgets, the widgets are instances that live in the back-end (usally Python).  There can be multiple views displayed in the front-end that represent one widget in the backend.  Each view can be displayed at a different time, or even displayed two or more times in the same output.   Because of this, the parent of a widget can only be set before the widget has been displayed.\n",
       "\n",
       "Every widget has a `parent` property.  This property can be set via a kwarg in the widget's constructor or after construction, but before display.  Calling display on an object with children automatically displays those children too (as seen below)."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "container = widgets.MulticontainerWidget()\n",
       "\n",
       "floatrange = widgets.FloatRangeWidget(parent=container) # You can set the parent in the constructor,\n",
       "\n",
       "string = widgets.StringWidget()\n",
       "string.parent = container # or after the widget has been created.\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.  If the children are added after the parent has already been displayed, the children must be displayed themselves.\n",
       "\n",
       "In the example below, the IntRangeWidget is never rendered since display was called on the parent before the parent/child relationship was established."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "container = widgets.MulticontainerWidget()\n",
       "display(container)\n",
       "\n",
       "intrange = widgets.IntRangeWidget(parent=container) # Never gets displayed."
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 3
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Calling display on the child fixes the problem."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "container = widgets.MulticontainerWidget()\n",
       "display(container)\n",
       "\n",
       "intrange = widgets.IntRangeWidget(parent=container)\n",
       "display(intrange) # This line is needed since the `container` has already been displayed."
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 4
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "source": [
       "Changing Child Views"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "The view used to display a widget must defined by the time the widget is displayed.  If children widgets are to be displayed along with the parent in one call, their `view_name`s can't be set since all of the widgets are sharing the same display call.  Instead, their `default_view_name`s must be set (as seen below)."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "container = widgets.MulticontainerWidget()\n",
       "\n",
       "floatrange = widgets.FloatRangeWidget(parent=container)\n",
       "floatrange.default_view_name = \"FloatTextView\" # It can be set as a property.\n",
       "\n",
       "string = widgets.StringWidget(default_view_name = \"TextAreaView\") # It can also be set in the constructor.\n",
       "string.parent = container\n",
       "\n",
       "display(container)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 5
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "However, if the children are displayed after the parent, their `view_name` can also be set like normal.  Both methods will work.  The code below produces the same output as the code above."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "container = widgets.MulticontainerWidget()\n",
       "display(container)\n",
       "\n",
       "floatrange = widgets.FloatRangeWidget()\n",
       "floatrange.parent=container\n",
       "display(floatrange, view_name = \"FloatTextView\") # view_name can be set during display.\n",
       "\n",
       "string = widgets.StringWidget()\n",
       "string.parent = container\n",
       "string.default_view_name = \"TextAreaView\" # Setting default_view_name still works.\n",
       "display(string)\n"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 6
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "source": [
       "Visibility"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Sometimes it's necessary to hide/show widget views in place, without ruining the order that they have been displayed on the page.  Using the `display` method, the views are always added to the end of their respective containers.  Instead the `visibility` property of widgets can be used to hide/show widgets that have already been displayed (as seen below)."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "string = widgets.StringWidget(value=\"Hello World!\")\n",
       "display(string, view_name=\"LabelView\") "
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 7
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "string.visible=False"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 8
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "string.visible=True"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 9
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "In the example below, a form is rendered which conditionally displays widgets depending on the state of other widgets.  Try toggling the student checkbox."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "form = widgets.ContainerWidget()\n",
       "first = widgets.StringWidget(description=\"First Name:\", parent=form)\n",
       "last = widgets.StringWidget(description=\"Last Name:\", parent=form)\n",
       "\n",
       "student = widgets.BoolWidget(description=\"Student:\", value=False, parent=form)\n",
       "school_info = widgets.ContainerWidget(visible=False, parent=form)\n",
       "school = widgets.StringWidget(description=\"School:\", parent=school_info)\n",
       "grade = widgets.IntRangeWidget(description=\"Grade:\", min=0, max=12, default_view_name='IntTextView', parent=school_info)\n",
       "\n",
       "pet = widgets.StringWidget(description=\"Pet's Name:\", parent=form)\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": 10
     }
    ],
    "metadata": {}
   }
  ]
 }
  No newline at end of file

examples/widgets/Part 4 - Styles.ipynb

@@ -1,405 +1,337 b''
 {
  "metadata": {
+  "cell_tags": [
+   [
+    "<None>",
+    null
+   ]
+  ],
   "name": ""
  },
  "nbformat": 3,
  "nbformat_minor": 0,
  "worksheets": [
   {
    "cells": [
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "from IPython.html import widgets # Widget definitions\n",
-      "from IPython.display import display # Used to display widgets in the notebook\n",
-      "\n",
-      "# Enable widgets in this notebook\n",
-      "widgets.init_widget_js()"
+      "from IPython.display import display # Used to display widgets in the notebook"
      ],
      "language": "python",
      "metadata": {},
-     "outputs": [
-      {
-       "javascript": [
-        "$.getScript(\"../static/notebook/js/widgets/bool.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript(\"../static/notebook/js/widgets/int_range.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript(\"../static/notebook/js/widgets/int.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript(\"../static/notebook/js/widgets/selection.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript(\"../static/notebook/js/widgets/string.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript(\"../static/notebook/js/widgets/float.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript(\"../static/notebook/js/widgets/container.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript(\"../static/notebook/js/widgets/multicontainer.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript(\"../static/notebook/js/widgets/button.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript(\"../static/notebook/js/widgets/float_range.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      }
-     ],
+     "outputs": [],
      "prompt_number": 1
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "source": [
       "CSS"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "When trying to design an attractive widget GUI, styling becomes important.  Widget views are DOM (document object model) elements that can be controlled with CSS.  There are two helper methods defined on widget that allow the manipulation of the widget's CSS.  The first is the `set_css` method, whos doc string is displayed below.  This method allows one or more CSS attributes to be set at once.  "
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "print(widgets.Widget.set_css.__doc__)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "output_type": "stream",
        "stream": "stdout",
        "text": [
         "Set one or more CSS properties of the widget (shared among all of the \n",
         "        views).  This function has two signatures:\n",
         "        - set_css(css_dict, [selector=''])\n",
         "        - set_css(key, value, [selector=''])\n",
         "\n",
         "        Parameters\n",
         "        ----------\n",
         "        css_dict : dict\n",
         "            CSS key/value pairs to apply\n",
         "        key: unicode\n",
         "            CSS key\n",
         "        value\n",
         "            CSS value\n",
         "        selector: unicode (optional)\n",
         "            JQuery selector to use to apply the CSS key/value.\n",
         "        \n"
        ]
       }
      ],
      "prompt_number": 2
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "The second is `get_css` which allows CSS attributes that have been set to be read.  Note that this method will only read CSS attributes that have been set using the `set_css` method.  `get_css`'s doc string is displayed below."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "print(widgets.Widget.get_css.__doc__)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "output_type": "stream",
        "stream": "stdout",
        "text": [
         "Get a CSS property of the widget.  Note, this function does not \n",
         "        actually request the CSS from the front-end;  Only properties that have \n",
         "        been set with set_css can be read.\n",
         "\n",
         "        Parameters\n",
         "        ----------\n",
         "        key: unicode\n",
         "            CSS key\n",
         "        selector: unicode (optional)\n",
         "            JQuery selector used when the CSS key/value was set.\n",
         "        \n"
        ]
       }
      ],
      "prompt_number": 3
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Below is an example that applies CSS attributes to a container to emphasize text."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "container = widgets.ContainerWidget()\n",
       "\n",
       "# set_css used to set a single CSS attribute.\n",
       "container.set_css('border', '3px solid black') # Border the container\n",
       "\n",
       "# set_css used to set multiple CSS attributes.\n",
       "container.set_css({'padding': '6px', # Add padding to the container\n",
       "                   'background': 'yellow'}) # Fill the container yellow\n",
       "\n",
       "label = widgets.StringWidget(default_view_name=\"LabelView\", parent=container)\n",
       "label.value = \"<strong>ALERT: </strong> Hello World!\"\n",
       "\n",
       "display(container)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 4
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "source": [
       "DOM Classes"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "In some cases it's necessary to apply DOM classes to your widgets.  DOM classes allow DOM elements to be indentified by Javascript and CSS.  The notebook defines its own set of classes to stylize its elements.  The `add_class` widget method allows you to add DOM classes to your widget's definition.  The `add_class` method's doc string can be seen below."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "print(widgets.Widget.add_class.__doc__)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "output_type": "stream",
        "stream": "stdout",
        "text": [
         "Add class[es] to a DOM element\n",
         "\n",
         "        Parameters\n",
         "        ----------\n",
         "        class_name: unicode\n",
         "            Class name(s) to add to the DOM element(s).  Multiple class names \n",
         "            must be space separated.\n",
         "        selector: unicode (optional)\n",
         "            JQuery selector to select the DOM element(s) that the class(es) will \n",
         "            be added to.\n",
         "        \n"
        ]
       }
      ],
      "prompt_number": 5
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Since `add_class` if a DOM operation, it will only affect widgets that have been displayed.  `add_class` must be called after the widget has been displayed.  Extending the example above, the corners of the container can be rounded by adding the `corner-all` notebook class to the container (as seen below).  "
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "container = widgets.ContainerWidget()\n",
       "container.set_css({'border': '3px solid black',\n",
       "                   'padding': '6px',\n",
       "                   'background': 'yellow'}) \n",
       "\n",
       "label = widgets.StringWidget(default_view_name=\"LabelView\", parent=container) \n",
       "label.value = \"<strong>ALERT: </strong> Hello World!\"\n",
       "\n",
       "display(container)\n",
       "container.add_class('corner-all') # Must be called AFTER display"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 6
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "The IPython notebook uses bootstrap for styling.  The example above can be simplified by using a bootstrap class (as seen below).  Bootstrap documentation can be found at http://getbootstrap.com/\u200e ."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "label = widgets.StringWidget(value = \"<strong>ALERT: </strong> Hello World!\")\n",
       "display(label, view_name=\"LabelView\")\n",
       "\n",
       "# Apply twitter bootstrap alert class to the label.\n",
       "label.add_class(\"alert\")"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 7
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "The example below shows how bootstrap classes can be used to change button apearance."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "# List of the bootstrap button styles\n",
       "button_classes = ['Default', 'btn-primary', 'btn-info', 'btn-success', \n",
       "                  'btn-warning', 'btn-danger', 'btn-inverse', 'btn-link']\n",
       "\n",
       "# Create each button and apply the style.  Also add margin to the buttons so they space\n",
       "# themselves nicely.\n",
       "for i in range(8):\n",
       "    button = widgets.ButtonWidget(description=button_classes[i])\n",
       "    button.set_css(\"margin\", \"5px\")\n",
       "    display(button)\n",
       "    if i > 0: # Don't add a class the first button.\n",
       "        button.add_class(button_classes[i])\n",
       "    "
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 8
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "It's also useful to be able to remove DOM classes from widgets.  The `remove_class` widget method allows you to remove classes from widgets that have been displayed.  Like `add_widget`, it must be called after the widget has been displayed.  The doc string of `remove_class` can be seen below."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "print(widgets.Widget.remove_class.__doc__)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "output_type": "stream",
        "stream": "stdout",
        "text": [
         "Remove class[es] from a DOM element\n",
         "\n",
         "        Parameters\n",
         "        ----------\n",
         "        class_name: unicode\n",
         "            Class name(s) to remove from  the DOM element(s).  Multiple class \n",
         "            names must be space separated.\n",
         "        selector: unicode (optional)\n",
         "            JQuery selector to select the DOM element(s) that the class(es) will \n",
         "            be removed from.\n",
         "        \n"
        ]
       }
      ],
      "prompt_number": 9
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "The example below animates an alert using different bootstrap styles."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "import time\n",
       "label = widgets.StringWidget(value = \"<strong>ALERT: </strong> Hello World!\")\n",
       "display(label, view_name=\"LabelView\")\n",
       "\n",
       "# Apply twitter bootstrap alert class to the label.\n",
       "label.add_class(\"alert\")\n",
       "\n",
       "# Animate through additional bootstrap label styles 3 times\n",
       "additional_alert_styles = ['alert-error', 'alert-info', 'alert-success']\n",
       "for i in range(3 * len(additional_alert_styles)):\n",
       "    label.add_class(additional_alert_styles[i % 3])\n",
       "    label.remove_class(additional_alert_styles[(i-1) % 3])\n",
       "    time.sleep(1)\n",
       "        "
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 10
     }
    ],
    "metadata": {}
   }
  ]
 }
  No newline at end of file

examples/widgets/Part 5 - Alignment.ipynb

@@ -1,378 +1,304 b''
 {
  "metadata": {
   "cell_tags": [
    [
     "<None>",
     null
    ]
   ],
   "name": ""
  },
  "nbformat": 3,
  "nbformat_minor": 0,
  "worksheets": [
   {
    "cells": [
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "from IPython.html import widgets # Widget definitions\n",
-      "from IPython.display import display # Used to display widgets in the notebook\n",
-      "\n",
-      "# Enable widgets in this notebook\n",
-      "widgets.init_widget_js()"
+      "from IPython.display import display # Used to display widgets in the notebook"
      ],
      "language": "python",
      "metadata": {},
-     "outputs": [
-      {
-       "javascript": [
-        "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/button.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/int_range.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/string.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/multicontainer.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/bool.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/int.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/selection.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/float.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/float_range.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/container.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      }
-     ],
+     "outputs": [],
      "prompt_number": 1
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "source": [
       "Alignment"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Most widgets have a `description` property which allows a label for the widget to be defined.  The label of the widget has a fixed minimum width.  The text of the label is always right aligned and the widget is left aligned (as seen below) "
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "display(widgets.StringWidget(description=\"a:\"))\n",
       "display(widgets.StringWidget(description=\"aa:\"))\n",
       "display(widgets.StringWidget(description=\"aaa:\"))"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 2
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "If a label is longer than the minimum width, the widget is shifted to the right (as seen below)."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "display(widgets.StringWidget(description=\"a:\"))\n",
       "display(widgets.StringWidget(description=\"aa:\"))\n",
       "display(widgets.StringWidget(description=\"aaa:\"))\n",
       "display(widgets.StringWidget(description=\"aaaaaaaaaaaaaaaaaa:\"))"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 3
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "If a `description` is not set for the widget, the label is not displayed (as seen below)."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "display(widgets.StringWidget(description=\"a:\"))\n",
       "display(widgets.StringWidget(description=\"aa:\"))\n",
       "display(widgets.StringWidget(description=\"aaa:\"))\n",
       "display(widgets.StringWidget())"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 4
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "source": [
       "Custom Alignment"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "`ContainerWidget`s allow for custom alignment of widgets.  The `hbox` and `vbox` methods (parameterless) cause the `ContainerWidget` to both horizontally and vertically align its children.  The following example compares `vbox` to `hbox`."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "child_style = {\n",
       "    'background': '#77CC77',\n",
       "    'padding': '25px',\n",
       "    'margin': '5px',\n",
       "    'font-size': 'xx-large',\n",
       "    'color': 'white',\n",
       "}\n",
       "\n",
       "def make_container(title):\n",
       "    display(widgets.StringWidget(default_view_name='LabelView', value='<h2><br>' + title + '</h2>'))\n",
       "    container = widgets.ContainerWidget()\n",
       "    container.set_css('background', '#999999')\n",
       "    display(container)\n",
       "    return container\n",
       "\n",
       "def fill_container(container):\n",
       "    components = []\n",
       "    for i in range(3):\n",
       "        components.append(widgets.StringWidget(parent=container, default_view_name='LabelView', value=\"ABC\"[i]))\n",
       "        components[i].set_css(child_style)\n",
       "        display(components[i])\n",
       "    \n",
       "container = make_container('VBox')\n",
       "container.vbox()\n",
       "fill_container(container)\n",
       "\n",
       "container = make_container('HBox')\n",
       "container.hbox()\n",
       "fill_container(container)\n"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 5
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "The `ContainerWidget` `pack_start`, `pack_center`, and `pack_end` methods (parameterless) adjust the alignment of the widgets on the axis that they are being rendered on.  Below is an example of the different alignments."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "container = make_container('HBox Pack Start')\n",
       "container.hbox()\n",
       "container.pack_start()\n",
       "fill_container(container)\n",
       "    \n",
       "container = make_container('HBox Pack Center')\n",
       "container.hbox()\n",
       "container.pack_center()\n",
       "fill_container(container)\n",
       "    \n",
       "container = make_container('HBox Pack End')\n",
       "container.hbox()\n",
       "container.pack_end()\n",
       "fill_container(container)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 6
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "The `ContainerWidget` `flex0`, `flex1`, and `flex2` methods (parameterless) modify the containers flexibility.  Changing a container flexibility affects how and if the container will occupy the remaining space.  Setting `flex0` has the same result as setting no flex.  Below is an example of different flex configurations.  The number on the boxes correspond to the applied flex."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "def fill_container(container, flexes):\n",
       "    components = []\n",
       "    for i in range(len(flexes)):\n",
       "        components.append(widgets.ContainerWidget(parent=container))\n",
       "        components[i].set_css(child_style)\n",
       "        \n",
       "        label = widgets.StringWidget(parent=components[i], default_view_name='LabelView', value=str(flexes[i]))\n",
       "        \n",
       "        if flexes[i] == 0:\n",
       "            components[i].flex0()\n",
       "        elif flexes[i] == 1:\n",
       "            components[i].flex1()\n",
       "        elif flexes[i] == 2:\n",
       "            components[i].flex2()\n",
       "        display(components[i])\n",
       "        \n",
       "container = make_container('Different Flex Configurations')\n",
       "container.hbox()\n",
       "fill_container(container, [0, 0, 0])\n",
       "        \n",
       "container = make_container('')\n",
       "container.hbox()\n",
       "fill_container(container, [0, 0, 1])\n",
       "        \n",
       "container = make_container('')\n",
       "container.hbox()\n",
       "fill_container(container, [0, 1, 1])\n",
       "        \n",
       "container = make_container('')\n",
       "container.hbox()\n",
       "fill_container(container, [0, 2, 2])\n",
       "        \n",
       "container = make_container('')\n",
       "container.hbox()\n",
       "fill_container(container, [0, 1, 2])\n",
       "        \n",
       "container = make_container('')\n",
       "container.hbox()\n",
       "fill_container(container, [1, 1, 2])"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 7
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "The `ContainerWidget` `align_start`, `align_center`, and `align_end` methods (parameterless) adjust the alignment of the widgets on the axis perpindicular to the one that they are being rendered on.  Below is an example of the different alignments."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "def fill_container(container):\n",
       "    components = []\n",
       "    for i in range(3):\n",
       "        components.append(widgets.StringWidget(parent=container, default_view_name='LabelView', value=\"ABC\"[i]))\n",
       "        components[i].set_css(child_style)\n",
       "        components[i].set_css('height', str((i+1) * 50) + 'px')\n",
       "        display(components[i])\n",
       "\n",
       "container = make_container('HBox Align Start')\n",
       "container.hbox()\n",
       "container.align_start()\n",
       "fill_container(container)\n",
       "    \n",
       "container = make_container('HBox Align Center')\n",
       "container.hbox()\n",
       "container.align_center()\n",
       "fill_container(container)\n",
       "    \n",
       "container = make_container('HBox Align End')\n",
       "container.hbox()\n",
       "container.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.hbox()\n",
       "for i in range(15):\n",
       "    widgets.FloatRangeWidget(orientation='vertical', parent=container, description=str(i+1), value=50.0)\n",
       "display(container)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 9
     }
    ],
    "metadata": {}
   }
  ]
 }
  No newline at end of file

examples/widgets/Part 6 - Custom Widget.ipynb

@@ -1,1278 +1,1203 b''
 {
  "metadata": {
   "cell_tags": [
    [
     "<None>",
     null
    ]
   ],
   "name": ""
  },
  "nbformat": 3,
  "nbformat_minor": 0,
  "worksheets": [
   {
    "cells": [
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Before reading, the author recommends the reader to review\n",
       "\n",
       "- [MVC prgramming](http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller)\n",
       "- [Backbone.js](https://www.codeschool.com/courses/anatomy-of-backbonejs)\n",
       "- [The widget IPEP](https://github.com/ipython/ipython/wiki/IPEP-23%3A-Backbone.js-Widgets)\n",
       "- [The original widget PR discussion](https://github.com/ipython/ipython/pull/4374)"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "from IPython.html import widgets # Widget definitions\n",
-      "from IPython.display import display # Used to display widgets in the notebook\n",
-      "\n",
-      "# Enable widgets in this notebook\n",
-      "widgets.init_widget_js()"
+      "from IPython.display import display # Used to display widgets in the notebook"
      ],
      "language": "python",
      "metadata": {},
-     "outputs": [
-      {
-       "javascript": [
-        "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/button.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/int_range.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/string.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/multicontainer.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/bool.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/int.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/selection.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/float.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/float_range.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      },
-      {
-       "javascript": [
-        "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/container.js\");"
-       ],
-       "metadata": {},
-       "output_type": "display_data"
-      }
-     ],
+     "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.  The purpose of this notebook is to demonstrate the widget creation process.  To create a custom widget, custom Python and JavaScript is required."
      ]
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "source": [
       "Section 1 - Basics"
      ]
     },
     {
      "cell_type": "heading",
      "level": 2,
      "metadata": {},
      "source": [
       "Python"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "When starting a project like this, it is often easiest to make an overly simplified base to verify that the underlying framework is working as expected.  To start we will create an empty widget and make sure that it can be rendered.  The first step is to create the widget in Python."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "# Import the base Widget class and the traitlets Unicode class.\n",
       "from IPython.html.widgets import Widget\n",
       "from IPython.utils.traitlets import Unicode\n",
       "\n",
       "# Define our DateWidget and its target model and default view.\n",
       "class DateWidget(Widget):\n",
       "    target_name = Unicode('DateWidgetModel')\n",
       "    default_view_name = Unicode('DatePickerView')"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 2
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "- **target_name** is a special `Widget` property that tells the widget framework which Backbone model in the front-end corresponds to this widget.\n",
       "- **default_view_name** is the default Backbone view to display when the user calls `display` to display an instance of this widget.\n"
      ]
     },
     {
      "cell_type": "heading",
      "level": 2,
      "metadata": {},
      "source": [
       "JavaScript"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "In the IPython notebook [require.js](http://requirejs.org/) is used to load JavaScript dependencies.  All IPython widget code depends on `notebook/js/widget.js`.  In it the base widget model, base view, and widget manager are defined.  We need to use require.js to include this file:"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "%%javascript\n",
       "\n",
       "require([\"notebook/js/widget\"], function(){\n",
       "\n",
       "});"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "javascript": [
         "\n",
         "require([\"notebook/js/widget\"], function(){\n",
         "\n",
         "});"
        ],
        "metadata": {},
        "output_type": "display_data",
        "text": [
-        "<IPython.core.display.Javascript at 0x168b0d0>"
+        "<IPython.core.display.Javascript at 0x21f8f10>"
        ]
       }
      ],
      "prompt_number": 3
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "The next step is to add a definition for the widget's model.  It's important to extend the `IPython.WidgetModel` which extends the Backbone.js base model instead of trying to extend the Backbone.js base model directly.  After defining the model, it needs to be registed with the widget manager using the `target_name` used in the Python code."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "%%javascript\n",
       "\n",
       "require([\"notebook/js/widget\"], function(){\n",
       "    \n",
       "    // Define the DateModel and register it with the widget manager.\n",
       "    var DateModel = IPython.WidgetModel.extend({});\n",
-      "    IPython.notebook.widget_manager.register_widget_model('DateWidgetModel', DateModel);\n",
+      "    IPython.widget_manager.register_widget_model('DateWidgetModel', DateModel);\n",
       "});"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "javascript": [
         "\n",
         "require([\"notebook/js/widget\"], function(){\n",
         "    \n",
         "    // Define the DateModel and register it with the widget manager.\n",
         "    var DateModel = IPython.WidgetModel.extend({});\n",
-        "    IPython.notebook.widget_manager.register_widget_model('DateWidgetModel', DateModel);\n",
+        "    IPython.widget_manager.register_widget_model('DateWidgetModel', DateModel);\n",
         "});"
        ],
        "metadata": {},
        "output_type": "display_data",
        "text": [
-        "<IPython.core.display.Javascript at 0x168df50>"
+        "<IPython.core.display.Javascript at 0x21f8ed0>"
        ]
       }
      ],
      "prompt_number": 4
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Now that the model is defined, we need to define a view that can be used to represent the model.  To do this, the `IPython.WidgetView` is extended.  A render function must be defined.  The render function is used to render a widget view instance to the DOM.  For now the render function renders a div that contains the text *Hello World!*  Lastly, the view needs to be registered with the widget manager like the model was.\n",
       "\n",
       "**Final JavaScript code below:**"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "%%javascript\n",
       "\n",
       "require([\"notebook/js/widget\"], function(){\n",
       "    \n",
       "    // Define the DateModel and register it with the widget manager.\n",
       "    var DateModel = IPython.WidgetModel.extend({});\n",
-      "    IPython.notebook.widget_manager.register_widget_model('DateWidgetModel', DateModel);\n",
+      "    IPython.widget_manager.register_widget_model('DateWidgetModel', DateModel);\n",
       "    \n",
       "    // Define the DatePickerView\n",
       "    var DatePickerView = IPython.WidgetView.extend({\n",
       "        \n",
       "        render: function(){\n",
       "            this.$el = $('<div />')\n",
       "                .html('Hello World!');\n",
       "        },\n",
       "    });\n",
       "    \n",
       "    // Register the DatePickerView with the widget manager.\n",
-      "    IPython.notebook.widget_manager.register_widget_view('DatePickerView', DatePickerView);\n",
+      "    IPython.widget_manager.register_widget_view('DatePickerView', DatePickerView);\n",
       "});"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "javascript": [
         "\n",
         "require([\"notebook/js/widget\"], function(){\n",
         "    \n",
         "    // Define the DateModel and register it with the widget manager.\n",
         "    var DateModel = IPython.WidgetModel.extend({});\n",
-        "    IPython.notebook.widget_manager.register_widget_model('DateWidgetModel', DateModel);\n",
+        "    IPython.widget_manager.register_widget_model('DateWidgetModel', DateModel);\n",
         "    \n",
         "    // Define the DatePickerView\n",
         "    var DatePickerView = IPython.WidgetView.extend({\n",
         "        \n",
         "        render: function(){\n",
         "            this.$el = $('<div />')\n",
         "                .html('Hello World!');\n",
         "        },\n",
         "    });\n",
         "    \n",
         "    // Register the DatePickerView with the widget manager.\n",
-        "    IPython.notebook.widget_manager.register_widget_view('DatePickerView', DatePickerView);\n",
+        "    IPython.widget_manager.register_widget_view('DatePickerView', DatePickerView);\n",
         "});"
        ],
        "metadata": {},
        "output_type": "display_data",
        "text": [
-        "<IPython.core.display.Javascript at 0x168f050>"
+        "<IPython.core.display.Javascript at 0x21f8cd0>"
        ]
       }
      ],
      "prompt_number": 5
     },
     {
      "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": 6
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "source": [
       "Section 2 - Something useful"
      ]
     },
     {
      "cell_type": "heading",
      "level": 2,
      "metadata": {},
      "source": [
       "Python"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "In the last section we created a simple widget that displayed *Hello World!*  There was no custom state information associated with the widget.  To make an actual date widget, we need to add a property that will be synced between the Python model and the JavaScript model.  The new property must be a traitlet property so the widget machinery can automatically handle it.  The property needs to be added to the the `_keys` list.  The `_keys` list tells the widget machinery what traitlets should be synced with the front-end.  Adding this to the code from the last section:"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "# Import the base Widget class and the traitlets Unicode class.\n",
       "from IPython.html.widgets import Widget\n",
       "from IPython.utils.traitlets import Unicode\n",
       "\n",
       "# Define our DateWidget and its target model and default view.\n",
       "class DateWidget(Widget):\n",
       "    target_name = Unicode('DateWidgetModel')\n",
       "    default_view_name = Unicode('DatePickerView')\n",
       "    \n",
       "    # Define the custom state properties to sync with the front-end\n",
       "    _keys = ['value']\n",
       "    value = Unicode()"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 7
     },
     {
      "cell_type": "heading",
      "level": 2,
      "metadata": {},
      "source": [
       "JavaScript"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "In the JavaScript there is no need to define the same properties in the JavaScript model.  When the JavaScript model is created for the first time, it copies all of the attributes from the Python model.  We need to replace *Hello World!* with an actual HTML date picker widget."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "%%javascript\n",
       "\n",
       "require([\"notebook/js/widget\"], function(){\n",
       "    \n",
       "    // Define the DateModel and register it with the widget manager.\n",
       "    var DateModel = IPython.WidgetModel.extend({});\n",
-      "    IPython.notebook.widget_manager.register_widget_model('DateWidgetModel', DateModel);\n",
+      "    IPython.widget_manager.register_widget_model('DateWidgetModel', DateModel);\n",
       "    \n",
       "    // Define the DatePickerView\n",
       "    var DatePickerView = IPython.WidgetView.extend({\n",
       "        \n",
       "        render: function(){\n",
       "            \n",
       "            // Create a div to hold our widget.\n",
       "            this.$el = $('<div />');\n",
       "            \n",
       "            // Create the date picker control.\n",
       "            this.$date = $('<input />')\n",
       "                .attr('type', 'date');\n",
       "        },\n",
       "    });\n",
       "    \n",
       "    // Register the DatePickerView with the widget manager.\n",
-      "    IPython.notebook.widget_manager.register_widget_view('DatePickerView', DatePickerView);\n",
+      "    IPython.widget_manager.register_widget_view('DatePickerView', DatePickerView);\n",
       "});"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "javascript": [
         "\n",
         "require([\"notebook/js/widget\"], function(){\n",
         "    \n",
         "    // Define the DateModel and register it with the widget manager.\n",
         "    var DateModel = IPython.WidgetModel.extend({});\n",
-        "    IPython.notebook.widget_manager.register_widget_model('DateWidgetModel', DateModel);\n",
+        "    IPython.widget_manager.register_widget_model('DateWidgetModel', DateModel);\n",
         "    \n",
         "    // Define the DatePickerView\n",
         "    var DatePickerView = IPython.WidgetView.extend({\n",
         "        \n",
         "        render: function(){\n",
         "            \n",
         "            // Create a div to hold our widget.\n",
         "            this.$el = $('<div />');\n",
         "            \n",
         "            // Create the date picker control.\n",
         "            this.$date = $('<input />')\n",
         "                .attr('type', 'date');\n",
         "        },\n",
         "    });\n",
         "    \n",
         "    // Register the DatePickerView with the widget manager.\n",
-        "    IPython.notebook.widget_manager.register_widget_view('DatePickerView', DatePickerView);\n",
+        "    IPython.widget_manager.register_widget_view('DatePickerView', DatePickerView);\n",
         "});"
        ],
        "metadata": {},
        "output_type": "display_data",
        "text": [
-        "<IPython.core.display.Javascript at 0x17822d0>"
+        "<IPython.core.display.Javascript at 0x21fc310>"
        ]
       }
      ],
      "prompt_number": 8
     },
     {
      "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/widget\"], function(){\n",
       "    \n",
       "    // Define the DateModel and register it with the widget manager.\n",
       "    var DateModel = IPython.WidgetModel.extend({});\n",
-      "    IPython.notebook.widget_manager.register_widget_model('DateWidgetModel', DateModel);\n",
+      "    IPython.widget_manager.register_widget_model('DateWidgetModel', DateModel);\n",
       "    \n",
       "    // Define the DatePickerView\n",
       "    var DatePickerView = IPython.WidgetView.extend({\n",
       "        \n",
       "        render: function(){\n",
       "            \n",
       "            // Create a div to hold our widget.\n",
       "            this.$el = $('<div />');\n",
       "            \n",
       "            // Create the date picker control.\n",
       "            this.$date = $('<input />')\n",
       "                .attr('type', 'date');\n",
       "        },\n",
       "        \n",
       "        update: function() {\n",
       "            \n",
       "            // Set the value of the date control and then call base.\n",
       "            this.$date.val(this.model.get('value')); // ISO format \"YYYY-MM-DDTHH:mm:ss.sssZ\" is required\n",
       "            return IPython.WidgetView.prototype.update.call(this);\n",
       "        },\n",
       "    });\n",
       "    \n",
       "    // Register the DatePickerView with the widget manager.\n",
-      "    IPython.notebook.widget_manager.register_widget_view('DatePickerView', DatePickerView);\n",
+      "    IPython.widget_manager.register_widget_view('DatePickerView', DatePickerView);\n",
       "});"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "javascript": [
         "\n",
         "require([\"notebook/js/widget\"], function(){\n",
         "    \n",
         "    // Define the DateModel and register it with the widget manager.\n",
         "    var DateModel = IPython.WidgetModel.extend({});\n",
-        "    IPython.notebook.widget_manager.register_widget_model('DateWidgetModel', DateModel);\n",
+        "    IPython.widget_manager.register_widget_model('DateWidgetModel', DateModel);\n",
         "    \n",
         "    // Define the DatePickerView\n",
         "    var DatePickerView = IPython.WidgetView.extend({\n",
         "        \n",
         "        render: function(){\n",
         "            \n",
         "            // Create a div to hold our widget.\n",
         "            this.$el = $('<div />');\n",
         "            \n",
         "            // Create the date picker control.\n",
         "            this.$date = $('<input />')\n",
         "                .attr('type', 'date');\n",
         "        },\n",
         "        \n",
         "        update: function() {\n",
         "            \n",
         "            // Set the value of the date control and then call base.\n",
         "            this.$date.val(this.model.get('value')); // ISO format \"YYYY-MM-DDTHH:mm:ss.sssZ\" is required\n",
         "            return IPython.WidgetView.prototype.update.call(this);\n",
         "        },\n",
         "    });\n",
         "    \n",
         "    // Register the DatePickerView with the widget manager.\n",
-        "    IPython.notebook.widget_manager.register_widget_view('DatePickerView', DatePickerView);\n",
+        "    IPython.widget_manager.register_widget_view('DatePickerView', DatePickerView);\n",
         "});"
        ],
        "metadata": {},
        "output_type": "display_data",
        "text": [
-        "<IPython.core.display.Javascript at 0x1782390>"
+        "<IPython.core.display.Javascript at 0x21fc290>"
        ]
       }
      ],
      "prompt_number": 9
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "To get the changed value from the front-end to publish itself to the back-end, we need to listen to the change event triggered by the HTM date control and set the value in the model.  By setting the `this.$el` property of the view, we break the Backbone powered event handling.  To fix this, a call to `this.delegateEvents()` must be added after `this.$el` is set.  \n",
       "\n",
       "After the date change event fires and the new value is set in the model, it's very important that we call `update_other_views(this)` to make the other views on the page update and to let the widget machinery know which view changed the model.  This is important because the widget machinery needs to know which cell to route the message callbacks to.\n",
       "\n",
       "**Final JavaScript code below:**"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "%%javascript\n",
       "\n",
       "require([\"notebook/js/widget\"], function(){\n",
       "    \n",
       "    // Define the DateModel and register it with the widget manager.\n",
       "    var DateModel = IPython.WidgetModel.extend({});\n",
-      "    IPython.notebook.widget_manager.register_widget_model('DateWidgetModel', DateModel);\n",
+      "    IPython.widget_manager.register_widget_model('DateWidgetModel', DateModel);\n",
       "    \n",
       "    // Define the DatePickerView\n",
       "    var DatePickerView = IPython.WidgetView.extend({\n",
       "        \n",
       "        render: function(){\n",
       "            \n",
       "            // Create a div to hold our widget.\n",
       "            this.$el = $('<div />');\n",
       "            this.delegateEvents();\n",
       "            \n",
       "            // Create the date picker control.\n",
       "            this.$date = $('<input />')\n",
       "                .attr('type', 'date')\n",
       "                .appendTo(this.$el);\n",
       "        },\n",
       "        \n",
       "        update: function() {\n",
       "            \n",
       "            // Set the value of the date control and then call base.\n",
       "            this.$date.val(this.model.get('value')); // ISO format \"YYYY-MM-DDTHH:mm:ss.sssZ\" is required\n",
       "            return IPython.WidgetView.prototype.update.call(this);\n",
       "        },\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.model.update_other_views(this);\n",
       "        },\n",
       "        \n",
       "    });\n",
       "    \n",
       "    // Register the DatePickerView with the widget manager.\n",
-      "    IPython.notebook.widget_manager.register_widget_view('DatePickerView', DatePickerView);\n",
+      "    IPython.widget_manager.register_widget_view('DatePickerView', DatePickerView);\n",
       "});"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "javascript": [
         "\n",
         "require([\"notebook/js/widget\"], function(){\n",
         "    \n",
         "    // Define the DateModel and register it with the widget manager.\n",
         "    var DateModel = IPython.WidgetModel.extend({});\n",
-        "    IPython.notebook.widget_manager.register_widget_model('DateWidgetModel', DateModel);\n",
+        "    IPython.widget_manager.register_widget_model('DateWidgetModel', DateModel);\n",
         "    \n",
         "    // Define the DatePickerView\n",
         "    var DatePickerView = IPython.WidgetView.extend({\n",
         "        \n",
         "        render: function(){\n",
         "            \n",
         "            // Create a div to hold our widget.\n",
         "            this.$el = $('<div />');\n",
         "            this.delegateEvents();\n",
         "            \n",
         "            // Create the date picker control.\n",
         "            this.$date = $('<input />')\n",
         "                .attr('type', 'date')\n",
         "                .appendTo(this.$el);\n",
         "        },\n",
         "        \n",
         "        update: function() {\n",
         "            \n",
         "            // Set the value of the date control and then call base.\n",
         "            this.$date.val(this.model.get('value')); // ISO format \"YYYY-MM-DDTHH:mm:ss.sssZ\" is required\n",
         "            return IPython.WidgetView.prototype.update.call(this);\n",
         "        },\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.model.update_other_views(this);\n",
         "        },\n",
         "        \n",
         "    });\n",
         "    \n",
         "    // Register the DatePickerView with the widget manager.\n",
-        "    IPython.notebook.widget_manager.register_widget_view('DatePickerView', DatePickerView);\n",
+        "    IPython.widget_manager.register_widget_view('DatePickerView', DatePickerView);\n",
         "});"
        ],
        "metadata": {},
        "output_type": "display_data",
        "text": [
-        "<IPython.core.display.Javascript at 0x17821d0>"
+        "<IPython.core.display.Javascript at 0x21fc3d0>"
        ]
       }
      ],
      "prompt_number": 10
     },
     {
      "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": 11
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Display the widget again to make sure that both views remain in sync."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "display(my_widget)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 12
     },
     {
      "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": 13,
        "text": [
-        "u''"
+        "u'2013-11-14'"
        ]
       }
      ],
      "prompt_number": 13
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Set the date from Python"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "my_widget.value = \"1999-12-01\" # December 1st, 1999"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 14
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "source": [
       "Section 3 - Extra credit"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "In the last section we created a fully working date picker widget.  Now we will add custom validation and support for labels.  Currently only the ISO date format \"YYYY-MM-DD\" is supported.  We will add support for all of the date formats recognized by the 3rd party Python dateutil library."
      ]
     },
     {
      "cell_type": "heading",
      "level": 2,
      "metadata": {},
      "source": [
       "Python"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "The traitlet machinery searches the class that the trait is defined in for methods with \"`_changed`\" suffixed onto their names.  Any method with the format \"`X_changed`\" will be called when \"`X`\" is modified.  We can take advantage of this to perform validation and parsing of different date string formats.  Below a method that listens to value has been added to the DateWidget."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "# Import the base Widget class and the traitlets Unicode class.\n",
       "from IPython.html.widgets import Widget\n",
       "from IPython.utils.traitlets import Unicode\n",
       "\n",
       "# Define our DateWidget and its target model and default view.\n",
       "class DateWidget(Widget):\n",
       "    target_name = Unicode('DateWidgetModel')\n",
       "    default_view_name = Unicode('DatePickerView')\n",
       "    \n",
       "    # Define the custom state properties to sync with the front-end\n",
       "    _keys = ['value']\n",
       "    value = Unicode()\n",
       "    \n",
       "    # This function automatically gets called by the traitlet machinery when\n",
       "    # value is modified because of this function's name.\n",
       "    def _value_changed(self, name, old_value, new_value):\n",
       "        pass\n",
       "    "
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 15
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Now the function that parses the date string and only sets it in the correct format can be added."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "# Import the dateutil library to parse date strings.\n",
       "from dateutil import parser\n",
       "\n",
       "# Import the base Widget class and the traitlets Unicode class.\n",
       "from IPython.html.widgets import Widget\n",
       "from IPython.utils.traitlets import Unicode\n",
       "\n",
       "# Define our DateWidget and its target model and default view.\n",
       "class DateWidget(Widget):\n",
       "    target_name = Unicode('DateWidgetModel')\n",
       "    default_view_name = Unicode('DatePickerView')\n",
       "    \n",
       "    # Define the custom state properties to sync with the front-end\n",
       "    _keys = ['value']\n",
       "    value = Unicode()\n",
       "    \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": 16
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "The standard property name used for widget labels is `description`.  In the code block below, `description` has been added to the Python widget."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "# Import the dateutil library to parse date strings.\n",
       "from dateutil import parser\n",
       "\n",
       "# Import the base Widget class and the traitlets Unicode class.\n",
       "from IPython.html.widgets import Widget\n",
       "from IPython.utils.traitlets import Unicode\n",
       "\n",
       "# Define our DateWidget and its target model and default view.\n",
       "class DateWidget(Widget):\n",
       "    target_name = Unicode('DateWidgetModel')\n",
       "    default_view_name = Unicode('DatePickerView')\n",
       "    \n",
       "    # Define the custom state properties to sync with the front-end\n",
       "    _keys = ['value', 'description']\n",
       "    value = Unicode()\n",
       "    description = Unicode()\n",
       "    \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 callback list is added so the user can perform custom validation.  If any one of the callbacks returns False, the new date time is not set.\n",
       "\n",
       "**Final Python code below:**"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "# Import the dateutil library to parse date strings.\n",
       "from dateutil import parser\n",
       "\n",
       "# Import the base Widget class and the traitlets Unicode class.\n",
       "from IPython.html.widgets import Widget\n",
       "from IPython.utils.traitlets import Unicode\n",
       "\n",
       "# Define our DateWidget and its target model and default view.\n",
       "class DateWidget(Widget):\n",
       "    target_name = Unicode('DateWidgetModel')\n",
       "    default_view_name = Unicode('DatePickerView')\n",
       "    \n",
       "    # Define the custom state properties to sync with the front-end\n",
       "    _keys = ['value', 'description']\n",
       "    value = Unicode()\n",
       "    description = Unicode()\n",
       "    \n",
       "    def __init__(self, **kwargs):\n",
       "        super(DateWidget, self).__init__(**kwargs)\n",
       "        self._validation_callbacks = []\n",
       "    \n",
       "    # This function automatically gets called by the traitlet machinery when\n",
       "    # value is modified because of this function's name.\n",
       "    def _value_changed(self, name, old_value, new_value):\n",
       "        \n",
       "        # Parse the date time value.\n",
       "        try:\n",
       "            parsed_date = parser.parse(new_value)\n",
       "            parsed_date_string = parsed_date.strftime(\"%Y-%m-%d\")\n",
       "        except:\n",
       "            parsed_date = None\n",
       "            parsed_date_string = ''\n",
       "        \n",
       "        # Set the parsed date string if the current date string is different.\n",
       "        if old_value != new_value:\n",
       "            if self.handle_validate(parsed_date):\n",
       "                self.value = parsed_date_string\n",
       "            else:\n",
       "                self.value = old_value\n",
       "                self.send_state() # The traitlet event won't fire since the value isn't changing.\n",
       "                                  # We need to force the back-end to send the front-end the state\n",
       "                                  # to make sure that the date control date doesn't change.\n",
       "                \n",
       "    \n",
       "    # Allow the user to register custom validation callbacks.\n",
       "    # callback(new value as a datetime object)\n",
       "    def on_validate(self, callback, remove=False):\n",
       "        if remove and callback in self._validation_callbacks:\n",
       "            self._validation_callbacks.remove(callback)\n",
       "        elif (not remove) and (not callback in self._validation_callbacks):\n",
       "            self._validation_callbacks.append(callback)\n",
       "    \n",
       "    # Call user validation callbacks.  Return True if valid.\n",
       "    def handle_validate(self, new_value):\n",
       "        for callback in self._validation_callbacks:\n",
       "            if not callback(new_value):\n",
       "                return False\n",
       "        return True\n",
       "        "
      ],
      "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, we add a label to the date time object.  The label is a div with the `widget-hlabel` class applied to it.  The `widget-hlabel`  is a class provided by the widget framework that applies special styling to a div to make it look like the rest of the horizontal labels used with the built in widgets.  Similar to the `widget-hlabel` class is the `widget-hbox-single` class.  The `widget-hbox-single` class applies special styling to widget containers that store a single line horizontal widget.  \n",
       "\n",
       "We hide the label if the description value is blank."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "%%javascript\n",
       "\n",
       "require([\"notebook/js/widget\"], function(){\n",
       "    \n",
       "    // Define the DateModel and register it with the widget manager.\n",
       "    var DateModel = IPython.WidgetModel.extend({});\n",
-      "    IPython.notebook.widget_manager.register_widget_model('DateWidgetModel', DateModel);\n",
+      "    IPython.widget_manager.register_widget_model('DateWidgetModel', DateModel);\n",
       "    \n",
       "    // Define the DatePickerView\n",
       "    var DatePickerView = IPython.WidgetView.extend({\n",
       "        \n",
       "        render: function(){\n",
       "            \n",
       "            // Create a div to hold our widget.\n",
       "            this.$el = $('<div />')\n",
       "                .addClass('widget-hbox-single'); // Apply this class to the widget container to make\n",
       "                                                 // it fit with the other built in widgets.\n",
       "            this.delegateEvents();\n",
       "            \n",
       "            // Create a label.\n",
       "            this.$label = $('<div />')\n",
       "                .addClass('widget-hlabel')\n",
       "                .appendTo(this.$el)\n",
       "                .hide(); // Hide the label by default.\n",
       "            \n",
       "            // Create the date picker control.\n",
       "            this.$date = $('<input />')\n",
       "                .attr('type', 'date')\n",
       "                .appendTo(this.$el);\n",
       "        },\n",
       "        \n",
       "        update: function() {\n",
       "            \n",
       "            // Set the value of the date control and then call base.\n",
       "            this.$date.val(this.model.get('value')); // ISO format \"YYYY-MM-DDTHH:mm:ss.sssZ\" is required\n",
       "            \n",
       "            // Hide or show the label depending on the existance of a description.\n",
       "            var description = this.model.get('description');\n",
       "            if (description == undefined || description == '') {\n",
       "                this.$label.hide();\n",
       "            } else {\n",
       "                this.$label.show();\n",
       "                this.$label.html(description);\n",
       "            }\n",
       "            \n",
       "            return IPython.WidgetView.prototype.update.call(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.model.update_other_views(this);\n",
       "        },\n",
       "        \n",
       "    });\n",
       "    \n",
       "    // Register the DatePickerView with the widget manager.\n",
-      "    IPython.notebook.widget_manager.register_widget_view('DatePickerView', DatePickerView);\n",
+      "    IPython.widget_manager.register_widget_view('DatePickerView', DatePickerView);\n",
       "});"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "javascript": [
         "\n",
         "require([\"notebook/js/widget\"], function(){\n",
         "    \n",
         "    // Define the DateModel and register it with the widget manager.\n",
         "    var DateModel = IPython.WidgetModel.extend({});\n",
-        "    IPython.notebook.widget_manager.register_widget_model('DateWidgetModel', DateModel);\n",
+        "    IPython.widget_manager.register_widget_model('DateWidgetModel', DateModel);\n",
         "    \n",
         "    // Define the DatePickerView\n",
         "    var DatePickerView = IPython.WidgetView.extend({\n",
         "        \n",
         "        render: function(){\n",
         "            \n",
         "            // Create a div to hold our widget.\n",
         "            this.$el = $('<div />')\n",
         "                .addClass('widget-hbox-single'); // Apply this class to the widget container to make\n",
         "                                                 // it fit with the other built in widgets.\n",
         "            this.delegateEvents();\n",
         "            \n",
         "            // Create a label.\n",
         "            this.$label = $('<div />')\n",
         "                .addClass('widget-hlabel')\n",
         "                .appendTo(this.$el)\n",
         "                .hide(); // Hide the label by default.\n",
         "            \n",
         "            // Create the date picker control.\n",
         "            this.$date = $('<input />')\n",
         "                .attr('type', 'date')\n",
         "                .appendTo(this.$el);\n",
         "        },\n",
         "        \n",
         "        update: function() {\n",
         "            \n",
         "            // Set the value of the date control and then call base.\n",
         "            this.$date.val(this.model.get('value')); // ISO format \"YYYY-MM-DDTHH:mm:ss.sssZ\" is required\n",
         "            \n",
         "            // Hide or show the label depending on the existance of a description.\n",
         "            var description = this.model.get('description');\n",
         "            if (description == undefined || description == '') {\n",
         "                this.$label.hide();\n",
         "            } else {\n",
         "                this.$label.show();\n",
         "                this.$label.html(description);\n",
         "            }\n",
         "            \n",
         "            return IPython.WidgetView.prototype.update.call(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.model.update_other_views(this);\n",
         "        },\n",
         "        \n",
         "    });\n",
         "    \n",
         "    // Register the DatePickerView with the widget manager.\n",
-        "    IPython.notebook.widget_manager.register_widget_view('DatePickerView', DatePickerView);\n",
+        "    IPython.widget_manager.register_widget_view('DatePickerView', DatePickerView);\n",
         "});"
        ],
        "metadata": {},
        "output_type": "display_data",
        "text": [
-        "<IPython.core.display.Javascript at 0x179f790>"
+        "<IPython.core.display.Javascript at 0x221a850>"
        ]
       }
      ],
      "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.StringWidget(description=\"First:\"))\n",
       "display(widgets.StringWidget(description=\"Last:\"))\n",
       "\n",
       "my_widget = DateWidget(description=\"DOB:\")\n",
       "display(my_widget)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 20
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Since the date widget uses `value` and `description`, we can also display its value using a `TextBoxView`.  The allows us to look at the raw date value being passed to and from the back-end and front-end."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
-      "\n",
       "display(my_widget, view_name=\"TextBoxView\")"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 21
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Now we will try to create a widget that only accepts dates in the year 2013.  We render the widget without a description to verify that it can still render without a label."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "my_widget = DateWidget()\n",
       "display(my_widget)\n",
       "\n",
       "def validate_date(date):\n",
       "    return not date is None and date.year == 2013\n",
       "my_widget.on_validate(validate_date)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 22
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "# Try setting a valid date\n",
       "my_widget.value = \"December 2, 2013\""
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 23
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "# Try setting an invalid date\n",
       "my_widget.value = \"June 12, 1999\""
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 24
     }
    ],
    "metadata": {}
   }
  ]
 }
  No newline at end of file