Changeset 381

Timestamp:

07/27/12 14:42:38 (13 years ago)

Author:

jkraaijeveld

Message:

Created the IntegerInput? inner widget. Stores properly and allows for a lot of customization.

Location:

Dev/branches/rest-dojo-ui/client/rft

Files:

• css/layout.css (modified) (1 diff)
• run.js (modified) (2 diffs)
• ui/InnerWidgetFactory.js (modified) (3 diffs)
• ui/QuestionEditorPreviewItem.js (modified) (2 diffs)

Dev/branches/rest-dojo-ui/client/rft/css/layout.css

@@ -494 +494 @@
     overflow: auto;
 }
+
+
+/* Two column tables */
+.labelsAndValues-labelCell {
+  padding-left: 5px;
+}
+
+.labelsAndValues-valueCell {
+  padding-left: 20px;
+}

Dev/branches/rest-dojo-ui/client/rft/run.js

@@ -27 +27 @@
     'dijit/form/ComboBox',
     'dijit/form/Select',
+    'dijit/form/NumberSpinner',
     'dojox/grid/DataGrid',
     'dojox/widget/TitleGroup',
@@ -43 +44 @@
     'rft/ui/Selector',
     'rft/ui/TitleGroup',
-    /*PreviewWidgets*/
     'rft/ui/InnerWidgetFactory',
     // pages -> load dynamically?

Dev/branches/rest-dojo-ui/client/rft/ui/InnerWidgetFactory.js

@@ -1 @@
-define( ['dojo', 'dijit'],
-        function(dojo, dijit) {
+define( ['dojo', 'dijit', 'dojo/_base/lang', 'dojox/layout/TableContainer',
+                 'dijit/layout/StackContainer'],
+        function(dojo, dijit, lang, TableContainer, StackContainer) {
                 dojo.provide('rft.ui.InnerWidgetFactory');
-                dojo.provide('rft.ui.HeaderItem');
                 dojo.declare('rft.ui.InnerWidgetFactory', [],{
                         /* No default type, all should be valid */
@@ -24 +24 @@
                         createFreeTextInputWidget: function(options) {
                                 return new rft.ui.FreeTextInput();
+                        },
+                        createIntegerInputWidget: function(options) {
+                                var integerWidget = new rft.ui.IntegerInput();
+                                integerWidget.setObject(options);
+                                return integerWidget;
                         }
                 });
@@ -66 +71 @@
                         }
                 });
+
+                dojo.declare('rft.ui.IntegerInput', StackContainer, {
+                        _numberSpinner:  null,
+                        _simpleTable: null,
+                        _editWidgets: null,
+                        _editTable: null,
+                        postCreate: function() {
+                                this.inherited(arguments);
+                                this._numberSpinner = new dijit.form.NumberSpinner( { title: "Answer", value: 0 });     
+                                this._numberSpinner.startup();
+                                this._simpleTable = new TableContainer({ cols: 1, customClass: "labelsAndValues", labelWidth : 150} );
+                                this._simpleTable.addChild(this._numberSpinner);
+                                
+                                this._editTable = new TableContainer({ cols: 1, customClass: "labelsAndValues"} );
+
+                                this.addChild(this._simpleTable);
+                        },
+                        edit: function() {
+                                this.removeChild(this._simpleTable);
+                                this.addChild(this._editTable);
+                        },
+                        save: function () {
+                                for (widget in this._editWidgets) {
+                                        var w = this._editWidgets[widget];
+                                        if (w.value) {
+                                                if (w.constraint)
+                                                        this._numberSpinner.constraints[w.field] = w.value;
+                                                else 
+                                                        this._numberSpinner.set(w.field, w.value);
+                                        }
+                                }
+                                this.removeChild(this._editTable);
+                                this.addChild(this._simpleTable);
+                                this._simpleTable.layout();
+                        },
+                        setObject: function(object) {
+                                if(object.contents) {
+                                        lang.mixin(this._numberSpinner, object.contents);
+                                        this._setupEditWidgets(object.contents);
+                                }
+                                else {
+                                        //Create widgets with default values
+                                        this._setupEditWidgets(this.getObject().contents);
+                                }
+                        },
+                        _setupEditWidgets: function(contents) {
+                                //Set up widgets which should appear once edit is pressed.
+                                this._editWidgets = [];
+                                this._editWidgets.push(new dijit.form.NumberSpinner( { field: "value", title: "Default value" }))
+                                this._editWidgets.push(new dijit.form.NumberSpinner( { field: "smallDelta", title: "Increment size" }));
+                                this._editWidgets.push(new dijit.form.NumberSpinner( { constraint: true, field: "max", title: "Maximum value" }));
+                                this._editWidgets.push(new dijit.form.NumberSpinner( { constraint: true, field: "min", title: "Minimum value" }));
+                                this._editWidgets.push(new dijit.form.TextBox ( { field: "invalidMessage", title: "Invalid message" }));
+                                this._editWidgets.push(new dijit.form.TextBox ( { field: "title", title: "Label" }));
+                                for (widget in this._editWidgets) {
+                                        var w = this._editWidgets[widget];
+                                        if (w.constraint)
+                                                w.set('value', contents.constraints[w.field]);
+                                        else
+                                                w.set('value', contents[w.field]);
+                                        this._editTable.addChild(w);
+                                }
+                                this._editTable.startup();
+                        },
+                        getObject: function() {
+
+                                return { widgetType: 'IntegerInput',
+                                                 contents: 
+                                                 { 
+                                                        value: this._numberSpinner.value,
+                                                    smallDelta: this._numberSpinner.smallDelta,
+                                                        constraints: this._numberSpinner.constraints,
+                                                        invalidMessage: this._numberSpinner.invalidMessage,
+                                                        title: this._numberSpinner.title
+                                                 }
+                                };
+                        }
+                });
         }
 )

Dev/branches/rest-dojo-ui/client/rft/ui/QuestionEditorPreviewItem.js

@@ -41 +41 @@
                                         this.editButtonNode.iconNode.className = this.editButtonNode.iconNode.className.replace("rftIconAccept", "rftIconEdit");
                                         this.editButtonNode.set("label", "Edit");
+                                        this.innerWidget.save();
                                 }
                                 else {
                                         this.editButtonNode.iconNode.className = this.editButtonNode.iconNode.className.replace("rftIconEdit", "rftIconAccept");
                                         this.editButtonNode.set("label", "Save");
+                                        this.innerWidget.edit();
                                 }
                                 this._editing = !this._editing;
@@ -102 +104 @@
                                         break;
                                 }*/
+                                this.innerWidget.startup();
                                 this.innerWidget.placeAt(this.containerNode);
                         }