Attempt 1, HBox and VBox implementation.

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

@@ -169,7 +169,7 @@ define(["static/components/underscore/underscore-min.js",
 
             // Add the view's element to cell's widget div.
             widget_area
-                .append($("<div />").append(widget_view.$el))
+                .append(widget_view.$el)
                 .parent().show(); // Show the widget_area (parent of widget_subarea)
 
             // Update the view based on the model contents.
@@ -204,6 +204,7 @@ define(["static/components/underscore/underscore-min.js",
 
         // Handle when a widget is updated via the python side.
         WidgetManager.prototype.handle_update = function (comm, state) {
+            this.updating = true;
             for (var key in state) {
                 if (state.hasOwnProperty(key)) {
                     if (key=="_css"){
@@ -214,6 +215,7 @@ define(["static/components/underscore/underscore-min.js",
                 }
             }
             comm.model.save();
+            this.updating = false;
         }
 
         // Handle when a widget is closed.
@@ -233,21 +235,25 @@ define(["static/components/underscore/underscore-min.js",
 
         // Send widget state to python backend.
         WidgetManager.prototype.send_sync = function (method, model) {
-            
-            // Create a callback for the output if the widget has an output area associate with it.
-            var callbacks = {};
-            var comm = model.comm;
-            var outputarea = this._get_comm_outputarea(comm);
-            if (outputarea != null) {
-                callbacks = {
-                    iopub : {
-                    output : $.proxy(outputarea.handle_output, outputarea),
-                    clear_output : $.proxy(outputarea.handle_clear_output, outputarea)}
-                };
-            };
             var model_json = model.toJSON();
-            var data = {sync_method: method, sync_data: model_json};
-            comm.send(data, callbacks);
+
+            // Only send updated state if the state hasn't been changed during an update.
+            if (!this.updating) {
+                // Create a callback for the output if the widget has an output area associate with it.
+                var callbacks = {};
+                var comm = model.comm;
+                var outputarea = this._get_comm_outputarea(comm);
+                if (outputarea != null) {
+                    callbacks = {
+                        iopub : {
+                        output : $.proxy(outputarea.handle_output, outputarea),
+                        clear_output : $.proxy(outputarea.handle_clear_output, outputarea)}
+                    };
+                };
+                var data = {sync_method: method, sync_data: model_json};
+                comm.send(data, callbacks);    
+            }
+            
             return model_json;
         }
 

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

@@ -10,6 +10,7 @@ require(["notebook/js/widget"], function(){
         render : function(){
             this.$el
                 .html('')
+                .addClass('widget_item')
                 .addClass(this.model.comm.comm_id);
 
             var $label = $('<label />')
@@ -19,6 +20,7 @@ require(["notebook/js/widget"], function(){
                 .attr('type', 'checkbox')
                 .appendTo($label);
             this.$checkbox_label = $('<div />')
+                .addClass('widget_item')
                 .appendTo($label);
 
             this.update(); // Set defaults.

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

@@ -5,14 +5,23 @@ require(["notebook/js/widget"], function(){
     var ContainerView = IPython.WidgetView.extend({
         
         render : function(){
-            this.$el.html('');
-            this.$container = $('<div />')
-                .addClass('container')
+            this.$el = $('<div />')
                 .addClass(this.model.comm.comm_id);
-            this.$el.append(this.$container);
         },
         
-        update : function(){},
+        update : function(){
+            if (this.model.get('vbox')) {
+                this.$el.addClass('vbox');
+            } else {
+                this.$el.removeClass('vbox');
+            }
+            
+            if (this.model.get('hbox')) {
+                this.$el.addClass('hbox');
+            } else {
+                this.$el.removeClass('hbox');
+            }
+        },
     });
 
     IPython.notebook.widget_manager.register_widget_view('ContainerView', ContainerView);

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

@@ -9,8 +9,10 @@ require(["notebook/js/widget"], function(){
             
             this.$el
                 .html('')
+                .addClass('widget_item')
                 .addClass(this.model.comm.comm_id);
             this.$buttongroup = $('<div />')
+                                .addClass('widget_item')
                                 .addClass('btn-group')
                                 .appendTo(this.$el);
             this.$droplabel = $('<button />')
@@ -43,6 +45,7 @@ require(["notebook/js/widget"], function(){
                     .html(items[index])
                     .on('click', function(e){
                         that.model.set('value', $(e.target).html(), this );
+                        that.model.apply(that);
                     })
                 
                 this.$droplist.append($('<li />').append(item_button))
@@ -71,6 +74,7 @@ require(["notebook/js/widget"], function(){
         render : function(){
             this.$el
                 .html('')
+                .addClass('widget_item')
                 .addClass(this.model.comm.comm_id);
             this.update();
         },
@@ -136,8 +140,10 @@ require(["notebook/js/widget"], function(){
         render : function(){
             this.$el
                 .html('')
+                .addClass('widget_item')
                 .addClass(this.model.comm.comm_id);
             this.$buttongroup = $('<div />')
+                .addClass('widget_item')
                 .addClass('btn-group')
                 .attr('data-toggle', 'buttons-radio')
                 .appendTo(this.$el);

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

@@ -6,18 +6,16 @@ require(["notebook/js/widget"], function(){
       
         // Called when view is rendered.
         render : function(){
-            this.$el
-                .html('');
-            this.$label = $('<div />')
-                .addClass(this.model.comm.comm_id)
-                .appendTo(this.$el);
+            this.$el = $('<div />')
+                .addClass('widget_item')
+                .addClass(this.model.comm.comm_id);
             this.update(); // Set defaults.
         },
         
         // Handles: Backend -> Frontend Sync
         //          Frontent -> Frontend Sync
         update : function(){
-            this.$label.html(this.model.get('value'));
+            this.$el.html(this.model.get('value'));
         },
         
     });
@@ -30,6 +28,7 @@ require(["notebook/js/widget"], function(){
         render : function(){
             this.$el
                 .html('')
+                .addClass('widget_item')
                 .addClass(this.model.comm.comm_id);
             this.$textbox = $('<textarea />')
                 .attr('rows', 5)
@@ -66,6 +65,7 @@ require(["notebook/js/widget"], function(){
         render : function(){
             this.$el
                 .html('')
+                .addClass('widget_item')
                 .addClass(this.model.comm.comm_id);
             this.$textbox = $('<input type="text" />')
                 .addClass('input')

IPython/html/static/notebook/less/widgetarea.less

@@ -1,8 +1,21 @@
+
 div.widget_area {
     page-break-inside: avoid;
+    .vbox();
+}
+
+div.widget_hbox {
     .hbox();
 }
 
+div.widget_vbox {
+    .vbox();
+}
+
+div.widget_item {
+    display: inline-block;
+}
+
 /* This class is for the widget subarea inside the widget_area and after
    the prompt div. */
 div.widget_subarea {

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

@@ -152,3 +152,18 @@ div.text_cell_input{color:#000000;border:1px solid #cfcfcf;border-radius:4px;bac
 div.text_cell_render{outline:none;resize:none;width:inherit;border-style:none;padding:5px;color:#000000;}
 a.anchor-link:link{text-decoration:none;padding:0px 20px;visibility:hidden;}
 h1:hover .anchor-link,h2:hover .anchor-link,h3:hover .anchor-link,h4:hover .anchor-link,h5:hover .anchor-link,h6:hover .anchor-link{visibility:visible;}
+.toolbar{padding:0px 10px;margin-top:-5px;}.toolbar select,.toolbar label{width:auto;height:26px;vertical-align:middle;margin-right:2px;margin-bottom:0px;display:inline;font-size:92%;margin-left:0.3em;margin-right:0.3em;padding:0px;padding-top:3px;}
+.toolbar .btn{padding:2px 8px;}
+.toolbar .btn-group{margin-top:0px;}
+.toolbar-inner{border:none !important;-webkit-box-shadow:none !important;-moz-box-shadow:none !important;box-shadow:none !important;}
+#maintoolbar{margin-bottom:0px;}
+@-moz-keyframes fadeOut{from{opacity:1;} to{opacity:0;}}@-webkit-keyframes fadeOut{from{opacity:1;} to{opacity:0;}}@-moz-keyframes fadeIn{from{opacity:0;} to{opacity:1;}}@-webkit-keyframes fadeIn{from{opacity:0;} to{opacity:1;}}.bigtooltip{overflow:auto;height:200px;-webkit-transition-property:height;-webkit-transition-duration:500ms;-moz-transition-property:height;-moz-transition-duration:500ms;transition-property:height;transition-duration:500ms;}
+.smalltooltip{-webkit-transition-property:height;-webkit-transition-duration:500ms;-moz-transition-property:height;-moz-transition-duration:500ms;transition-property:height;transition-duration:500ms;text-overflow:ellipsis;overflow:hidden;height:80px;}
+.tooltipbuttons{position:absolute;padding-right:15px;top:0px;right:0px;}
+.tooltiptext{padding-right:30px;}
+.ipython_tooltip{max-width:700px;-webkit-animation:fadeOut 400ms;-moz-animation:fadeOut 400ms;animation:fadeOut 400ms;-webkit-animation:fadeIn 400ms;-moz-animation:fadeIn 400ms;animation:fadeIn 400ms;vertical-align:middle;background-color:#f7f7f7;overflow:visible;border:#ababab 1px solid;outline:none;padding:3px;margin:0px;padding-left:7px;font-family:monospace;min-height:50px;-moz-box-shadow:0px 6px 10px -1px #adadad;-webkit-box-shadow:0px 6px 10px -1px #adadad;box-shadow:0px 6px 10px -1px #adadad;border-radius:4px;position:absolute;z-index:2;}.ipython_tooltip a{float:right;}
+.ipython_tooltip .tooltiptext pre{border:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;font-size:100%;background-color:#f7f7f7;}
+.pretooltiparrow{left:0px;margin:0px;top:-16px;width:40px;height:16px;overflow:hidden;position:absolute;}
+.pretooltiparrow:before{background-color:#f7f7f7;border:1px #ababab solid;z-index:11;content:"";position:absolute;left:15px;top:10px;width:25px;height:25px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);}
+div.widget_area{page-break-inside:avoid;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch;}
+div.widget_subarea{padding:0.44em 0.4em 0.4em 1px;margin-left:6px;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;}

IPython/html/widgets/widget_container.py

@@ -1,7 +1,10 @@
 from base import Widget
-from IPython.utils.traitlets import Unicode
+from IPython.utils.traitlets import Unicode, Bool
 
 class ContainerWidget(Widget):
     target_name = Unicode('container_widget')
     default_view_name = Unicode('ContainerView')
-    
+    _keys = ['vbox', 'hbox']
+
+    hbox = Bool(True)
+    vbox = Bool(False)