Merge pull request #304 from SylvainCorlay/default_values

Default values for widget model attributes

Author: jdfreder

examples/development/web/index.js

@@ -14,15 +14,14 @@ document.addEventListener("DOMContentLoaded", function(event) {
 
         // Create the widget model.
         return manager.new_widget({
-            model_name: 'WidgetModel',
-            widget_class: 'ipywidgets.' + widgetType,
+            model_name: widgetType + 'Model',
+            widget_class: 'jupyter.' + widgetType,
             model_id: uuid()
         // Create a view for the model.
         }).then(function(model) {
             console.log(widgetType + ' model created', model);
 
             model.set({
-                _view_name: widgetType + 'View',
                 description: description || '',
                 value: value || null,
                 visible: true

examples/notebooks/Widget Layout.ipynb

@@ -130,7 +130,7 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "**5.** Colorpicker alignment, short and long version"
+    "**5.** Colorpicker alignment, concise and long version"
    ]
   },
   {
@@ -152,7 +152,7 @@
    },
    "outputs": [],
    "source": [
-    "cp.short = True"
+    "cp.concise = True"
    ]
   },
   {
@@ -163,7 +163,7 @@
    },
    "outputs": [],
    "source": [
-    "cp.short = False"
+    "cp.concise = False"
    ]
   },
   {
@@ -196,7 +196,7 @@
    },
    "outputs": [],
    "source": [
-    "cp2.short = True"
+    "cp2.concise = True"
    ]
   },
   {
@@ -207,7 +207,7 @@
    },
    "outputs": [],
    "source": [
-    "cp2.short = False"
+    "cp2.concise = False"
    ]
   },
   {

ipywidgets/static/widgets/js/layout.js

@@ -12,9 +12,40 @@ define([
     "jquery"
 ], function(widget, _, Backbone, $) {
 
+    /**
+     * css properties exposed by the layout widget with their default values.
+     */
+    var css_properties = {
+        align_content: "",
+        align_items: "",
+        align_self: "",
+        border: "",
+        bottom: "",
+        display: "",
+        flex: "",
+        flex_flow: "",
+        height: "",
+        justify_content: "",
+        left: "",
+        margin: "",
+        overflow: "",
+        padding: "",
+        right: "",
+        top: "",
+        visibility: "",
+        width: ""
+    };
+
     /**
      * Represents a group of CSS style attributes
      */
+    var LayoutModel = widget.WidgetModel.extend({
+        defaults: _.extend({}, widget.WidgetModel.prototype.defaults, {
+            _model_name: "LayoutModel",
+            _view_name: "LayoutView"
+        }, css_properties),
+    });
+
     var LayoutView = widget.WidgetView.extend({
 
         /**
@@ -24,33 +55,7 @@ define([
             LayoutView.__super__.initialize.apply(this, arguments);
             // Register the traits that live on the Python side
             this._traitNames = [];
-            this.initTraits();
-        },
-
-        /**
-         * Initialize the traits for this layout object
-         */
-        initTraits: function() {
-            this.registerTraits(
-                'align_content',
-                'align_items',
-                'align_self',
-                'border',
-                'bottom',
-                'display',
-                'flex',
-                'flex_flow',
-                'height',
-                'justify_content',
-                'left',
-                'margin',
-                'overflow',
-                'padding',
-                'right',
-                'top',
-                'visibility',
-                'width'
-            );
+            this.registerTraits(Object.keys(css_properties));
         },
 
         /**
@@ -126,6 +131,7 @@ define([
     });
 
     return {
-        LayoutView: LayoutView
+        LayoutView: LayoutView,
+        LayoutModel: LayoutModel
     };
 });

ipywidgets/static/widgets/js/requirejs-shim.js

@@ -11,13 +11,14 @@ function requireLocalFiles() {
     require('./utils');
     require('./widget');
     require('./widget_int');
+    require('./widget_box');
     require('./manager-base');
     require('../css/widgets.min.css');
 }
 
 module.exports = function createDefine(targetModule) {
     var amdefine = require('amdefine')(targetModule, require);
-    
+
     return function define() {
         var args = Array.prototype.slice.call(arguments);
         if (args.length > 1) {

ipywidgets/static/widgets/js/widget.js

@@ -39,6 +39,15 @@ define(["./utils",
     };
 
     var WidgetModel = Backbone.Model.extend({
+
+        defaults: {
+            _model_module: null,
+            _model_name: "WidgetModel",
+            _view_module: "",
+            _view_name: null,
+            msg_throttle: 3
+        },
+
         constructor: function (widget_manager, model_id, comm) {
             /**
              * Constructor
@@ -240,7 +249,7 @@ define(["./utils",
             // Handle when a widget is updated via the python side.
             this.state_lock = state;
             try {
-                WidgetModel.__super__.set.call(this, state);
+                this.set(state);
                 if (this._first_state) {
                     this.trigger('ready', this);
                     this._first_state = false;
@@ -305,10 +314,16 @@ define(["./utils",
              */
             var return_value = WidgetModel.__super__.set.apply(this, arguments);
 
-            // Backbone only remembers the diff of the most recent set()
-            // operation.  Calling set multiple times in a row results in a
-            // loss of diff information.  Here we keep our own running diff.
-            this._buffered_state_diff = _.extend(this._buffered_state_diff, this.changedAttributes() || {});
+            if (!this._first_state) {
+                // Backbone only remembers the diff of the most recent set()
+                // operation.  Calling set multiple times in a row results in a
+                // loss of diff information.  Here we keep our own running diff.
+                //
+                // However, we don't buffer the initial state comming from the
+                // backend or the default values specified in `defaults`.
+                // 
+                this._buffered_state_diff = _.extend(this._buffered_state_diff, this.changedAttributes() || {});
+            }
             return return_value;
         },
 
@@ -548,7 +563,11 @@ define(["./utils",
         }
     };
 
-    var DOMWidgetModel = WidgetModel.extend({}, {
+    var DOMWidgetModel = WidgetModel.extend({
+        defaults: _.extend({}, WidgetModel.prototype.defaults, {
+            layout: undefined,
+        }),
+    }, {
         serializers: _.extend({
             layout: {deserialize: unpack_models},
         }, WidgetModel.serializers),
@@ -830,24 +849,24 @@ define(["./utils",
             });
         },
     });
-    
+
     managerBase.ManagerBase.register_widget_model('WidgetModel', WidgetModel);
 
     // For backwards compatibility.
     var WidgetView = Backbone.View.extend(WidgetViewMixin);
     var DOMWidgetView = WidgetView.extend(DOMWidgetViewMixin);
 
     var widget = {
-        'unpack_models': unpack_models,
-        'WidgetModel': WidgetModel,
-        'WidgetViewMixin': WidgetViewMixin,
-        'DOMWidgetViewMixin': DOMWidgetViewMixin,
-        'ViewList': ViewList,
-        'DOMWidgetModel': DOMWidgetModel,
+        unpack_models: unpack_models,
+        WidgetModel: WidgetModel,
+        WidgetViewMixin: WidgetViewMixin,
+        DOMWidgetViewMixin: DOMWidgetViewMixin,
+        ViewList: ViewList,
+        DOMWidgetModel: DOMWidgetModel,
 
         // For backwards compatibility.
-        'WidgetView': WidgetView,
-        'DOMWidgetView': DOMWidgetView,
+        WidgetView: WidgetView,
+        DOMWidgetView: DOMWidgetView,
     };
 
     return widget;

ipywidgets/static/widgets/js/widget_bool.js

@@ -7,11 +7,28 @@ if (typeof define !== 'function') { var define = require('./requirejs-shim')(mod
 define([
     "./widget",
     "jquery",
+    "underscore",
     "bootstrap",
-], function(widget, $){
+], function(widget, $, _) {
+
+    var BoolModel = widget.DOMWidgetModel.extend({
+        defaults: _.extend({}, widget.DOMWidgetModel.prototype.defaults, {
+            value: false,
+            description: "",
+            disabled: false,
+            _model_name: "BoolModel"
+        }),
+    });
+
+    var CheckboxModel = BoolModel.extend({
+        defaults: _.extend({}, BoolModel.prototype.defaults, {
+            _view_name: "CheckboxView",
+            _model_name: "CheckboxModel"
+        }),
+    });
 
     var CheckboxView = widget.DOMWidgetView.extend({
-        render : function(){
+        render: function(){
             /**
              * Called when view is rendered.
              */
@@ -52,7 +69,7 @@ define([
             this.touch();
         },
 
-        update : function(options){
+        update: function(options){
             /**
              * Update the contents of this view
              *
@@ -76,9 +93,18 @@ define([
         },
     });
 
+    var ToggleButtonModel = BoolModel.extend({
+        defaults: _.extend({}, BoolModel.prototype.defaults, {
+            _view_name: "ToggleButtonView",
+            _model_name: "ToggleButtonModel",
+            tooltip: "",
+            icon: "",
+            button_style: "",
+        }),
+    });
 
     var ToggleButtonView = widget.DOMWidgetView.extend({
-        render : function() {
+        render: function() {
             /**
              * Called when view is rendered.
              */
@@ -108,7 +134,7 @@ define([
             this.update_mapped_classes(class_map, 'button_style');
         },
 
-        update : function(options){
+        update: function(options){
             /**
              * Update the contents of this view
              *
@@ -150,6 +176,13 @@ define([
         },
     });
 
+    var ValidModel = BoolModel.extend({
+        defaults: _.extend({}, BoolModel.prototype.defaults, {
+            readout: "Invalid",
+            _view_name: "ValidView",
+            _model_name: "ValidModel"
+        }),
+    });
 
     var ValidView = widget.DOMWidgetView.extend({
         render: function() {
@@ -160,6 +193,7 @@ define([
             this.listenTo(this.model, "change", this.update, this);
             this.update();
         },
+
         update: function() {
             /**
              * Update the contents of this view
@@ -188,8 +222,12 @@ define([
 
 
     return {
-        'CheckboxView': CheckboxView,
-        'ToggleButtonView': ToggleButtonView,
-        'ValidView': ValidView,
+        BoolModel: BoolModel,
+        CheckboxModel: CheckboxModel,
+        CheckboxView: CheckboxView,
+        ToggleButtonModel: ToggleButtonModel,
+        ToggleButtonView: ToggleButtonView,
+        ValidModel: ValidModel,
+        ValidView: ValidView,
     };
 });