Changeset 402


Ignore:
Timestamp:
08/26/12 22:39:02 (13 years ago)
Author:
hendrikvanantwerpen
Message:

Created widgets for several input types.
Work on multiplechoice widget, see if we can make OrderedList? work with
form items? Maybe make the item the widget iso a data item.

Location:
Dev/branches/rest-dojo-ui/client/rft
Files:
7 edited

Legend:

Unmodified
Added
Removed

  • Dev/branches/rest-dojo-ui/client/rft/css/surveyEditor.css

    r398 r402  
    33        display: block;
    44        color: #ffffff;
    5         padding: 0 8px;
     5        /*padding: 0 8px;*/
    66}
    77
    … …  
    5454
    5555/* Drag and drop anchor highlighting */
     56.claro .dojoDndItemAnchor, .claro .dojoDndItemOver {
     57    background-color: inherit;
     58}
     59/*
    5660.claro div.blue.dojoDndItemAnchor .topBorder,
    5761.claro .blue .dojoDndItemAnchor .topBorder {
    … …  
    7478        background-color: #993dec;
    7579}
     80*/

  • Dev/branches/rest-dojo-ui/client/rft/pages/survey.js

    r399 r402  
    9999            },
    100100            _onShowPreview: function() {
    101                 content.goTo('previewSurvey', {uid: store.getIdentity(this.survey)});
     101                content.goTo('viewSurvey', {uid: store.getIdentity(this.survey)});
    102102            }
    103103        });

  • Dev/branches/rest-dojo-ui/client/rft/store.js

    r379 r402  
    1 define(['dojo/_base/declare','dojo/_base/lang','dojo/_base/array','dojo/_base/Deferred','dojo/_base/xhr','dojo/json','dojo/store/util/QueryResults'],
    2     function(declare,lang,array,Deferred,xhr,JSON,QueryResults){
     1define(['dojo/_base/declare','dojo/_base/json','dojo/_base/lang','dojo/_base/array','dojo/_base/Deferred','dojo/_base/xhr','dojo/store/util/QueryResults'],
     2    function(declare,json,lang,array,Deferred,xhr,QueryResults){
    33   
    44        var CouchStore = declare(null, {
    … …  
    5858                        xhr(hasId ? "PUT" : "POST", {
    5959                                    url: hasId ? this.target + id : this.target,
    60                                     postData: JSON.stringify(object),
     60                                    postData: json.toJson(object),
    6161                                    handleAs: "json",
    6262                                    headers:{
    … …  
    193193
    194194                for (var qp in queryOpts) {
    195                     queryOpts[qp] = JSON.stringify(queryOpts[qp]);
     195                    queryOpts[qp] = json.toJson(queryOpts[qp]);
    196196                }
    197197                            query += '?' + xhr.objectToQuery(queryOpts);

  • Dev/branches/rest-dojo-ui/client/rft/ui/LineWithActionsWidget.js

    r396 r402  
    1919                        userObject: null,
    2020
    21                         actions: {},
     21                        actions: null,
    2222                        postCreate: function() {
    2323                                dom.setSelectable(this.domNode, false); // Text selection, has nothing to do with object selection!
    … …  
    3131                        },
    3232                        _setupActions: function() {
     33                if ( this.actions === null ) {
     34                    return;
     35                }
    3336                                for (var action in this.actions) {
    3437                                        var properties;

  • Dev/branches/rest-dojo-ui/client/rft/ui/QuestionEditorToolkit.js

    r391 r402  
    2525            _categories : null,
    2626
    27             _contentItems: [{
    28                     label: "Header",
    29                     content: {
    30                         type: "Header"
    31                     },
    32                     icon: "Header"
    33                 },{
    34                     label: "Text",
    35                     content: {
    36                         type: "Text"
    37                     },
    38                     icon: "TextBox"
    39                 },{
    40                     label: "Image",
    41                     content: {
    42                         type: "Image"
    43                     },
    44                     icon: "Image"
    45                 },{
    46                     label: "External media",
    47                     content: {
    48                         type: "ExternalMedia"
    49                     },
    50                     icon: "External"
    51                 },{
    52                     label: "Divider",
    53                     content: {
    54                         type: "Divider"
    55                     },
    56                     icon: "Divider"
    57                 }],
    58             _inputsItems: [{
    59                     label: "Free text",
    60                     content: {
    61                         type: "FreeTextInput"
    62                     },
    63                     icon: "Text"
    64                 },{
    65                     label: "Integer",
    66                     content: {
    67                         type: "IntegerInput"
    68                     },
    69                     icon: "Integer"
    70                 },{
    71                     label: "Scale",
    72                     content: {
    73                         type: "ScaleInput"
    74                     },
    75                     icon: "Scale"
    76                 },{
    77                     label: "Cards",
    78                     content: {
    79                         type: "CardsInput"
    80                     },
    81                     icon: "Cards"
    82                 },{
    83                     label: "Multiple Choice",
    84                     content: {
    85                         type: "MultipleChoiceInput"
    86                     },
    87                     icon: "MultipleChoice"
    88                 }],
     27            _contentItems: [
     28                { type: "Header" },
     29                { type: "Text" },
     30                { type: "Image" },
     31                { type: "ExternalMedia" },
     32                { type: "Divider" }
     33            ],
     34            _inputsItems: [
     35                { type: "StringInput" },
     36                { type: "TextInput" },
     37                { type: "IntegerInput" },
     38                { type: "ScaleInput" },
     39                { type: "MultipleChoiceInput" }
     40            ],
     41            _labelMap: {
     42                "Header": "Header",
     43                "Text": "Text",
     44                "Image": "Image",
     45                "ExternalMedia": "External media",
     46                "Divider": "Divider",
     47                "StringInput": "Text line",
     48                "TextInput": "Free text",
     49                "IntegerInput": "Integer number",
     50                "ScaleInput": "Scale",
     51                "MultipleChoiceInput": "Multiple choice"
     52            },
     53            _iconMap: {
     54                "Header": "Header",
     55                "Text": "TextBox",
     56                "Image": "Image",
     57                "ExternalMedia": "External",
     58                "Divider": "Divider",
     59                "StringInput": "Text",
     60                "TextInput": "Text",
     61                "IntegerInput": "Integer",
     62                "ScaleInput": "Scale",
     63                "MultipleChoiceInput": "MultipleChoice"
     64            },
    8965
    9066            postCreate: function(){
    9167                this.inherited(arguments);
     68                var creator = lang.hitch(this,"_creator");
    9269                this.contentSource = new Source(this.ToolkitContentSourceNode, {
    9370                    accept: [],
    … …  
    9572                    selfAccept: false,
    9673                    singular: true,
    97                     creator: this._creator
     74                    creator: creator
    9875                });
    9976                this.inputsSource = new Source(this.ToolkitInputsSourceNode, {
    … …  
    10279                    selfAccept: false,
    10380                    singular: true,
    104                     creator: this._creator
     81                    creator: creator
    10582                });
    10683                this.contentSource.insertNodes(false, this._contentItems);
    … …  
    127104                if (hint == "avatar") {
    128105                    node = domConstruct.create('span',{
    129                         innerHTML: item.label
     106                        innerHTML: this._labelMap[item.type] || item.type
    130107                    });
    131108                } else {
    132109                    var w = new Button({
    133110                        baseClass: "rftLargeButton",
    134                         iconClass: "rftIcon rftIcon"+item.icon,
    135                         label: item.label,
     111                        iconClass: "rftIcon rftIcon"+(this._iconMap[item.type]||"Unknown"),
     112                        label: this._labelMap[item.type] || item.type,
    136113                        showLabel: true,
    137114                        'class': "newline"
    … …  
    139116                    node = w.domNode;
    140117                }
    141                 return {node: node, data: item.content, type: ["questionContent"]};
     118                return {node: node, data: item, type: ["questionContent"]};
    142119            },
    143120            _setupListView: function() {

  • Dev/branches/rest-dojo-ui/client/rft/ui/content/ContentWidgetFactory.js

    r400 r402  
    11define([
     2    'dojo/_base/array',
    23    'dojo/_base/declare',
    34    'dojo/_base/lang',
     5    'dojo/dom-construct',
    46    'dijit/_WidgetBase',
    57    'dijit/_Container',
     8    'dijit/form/Button',
     9    'dijit/form/CheckBox',
    610    'dijit/form/NumberSpinner',
     11    'dijit/form/RadioButton',
    712    'dijit/form/Textarea',
    813    'dijit/form/TextBox',
    9     'dijit/form/CheckBox',
    10     'dijit/layout/StackContainer',
    11     'dojox/form/CheckedMultiSelect',
    12     'dojox/layout/TableContainer'
    13     ],function(declare, lang, _WidgetBase, _Container, NumberSpinner, Textarea, TextBox, CheckBox, StackContainer, CheckedMultiSelect, TableContainer) {
    14         var factory = declare('rft.ui.content.ContentWidgetFactory', [], {
    15             /* No default type, all should be valid */
    16             createViewWidget: function(/*Object*/options) {
    17                 // options: Object
    18                 //            type: "header", "text", textinput, etc.
    19                 //            other type specific fields
    20                 var fun = this['create'+options.type+'ViewWidget'];
    21                 var view = fun !== undefined ? fun(options) : null;
    22                 return view;
    23             },
    24             createEditWidget: function(/*Object*/options) {
    25                 var fun = this['create'+options.type+'EditWidget'];
    26                 var view = fun !== undefined ? fun() : null;
    27                 if(view)
    28                     view.set('value', options);
    29                 return view;
    30             },
    31 
    32             createHeaderViewWidget: function(options) {
    33                 return new HeaderViewItem({
    34                     options: options
     14    'dojox/layout/TableContainer',
     15    './../lists/OrderedList'
     16],function(array, declare, lang, domConstruct, _WidgetBase, _Container, Button, CheckBox, NumberSpinner, RadioButton, Textarea, TextBox, TableContainer, OrderedList) {
     17    var factory = declare('rft.ui.content.ContentWidgetFactory', [], {
     18        /* No default type, all should be valid */
     19        createViewWidget: function(/*Object*/options) {
     20            // options: Object
     21            //            type: "header", "text", textinput, etc.
     22            //            other type specific fields
     23            var fun = this['create'+options.type+'ViewWidget'];
     24            var view = fun !== undefined ? fun(options) : null;
     25            return view;
     26        },
     27        createEditWidget: function(/*Object*/options) {
     28            var fun = this['create'+options.type+'EditWidget'];
     29            var view = fun !== undefined ? fun() : null;
     30            if(view)
     31                view.set('value', options);
     32            return view;
     33        },
     34
     35        createHeaderViewWidget: function(options) {
     36            return new HeaderView({
     37                options: options
     38            });
     39        },
     40        createHeaderEditWidget: function() {
     41            return new HeaderEdit();
     42        },
     43
     44        createTextViewWidget: function(options) {
     45            return new TextView({
     46                options: options
     47            });
     48        },
     49        createTextEditWidget: function() {
     50            return new TextEdit();
     51        },
     52
     53        createDividerViewWidget: function(options) {
     54            return new DividerView({
     55                options: options
     56            });
     57        },
     58
     59        createStringInputViewWidget: function(options) {
     60            return new StringInputView({
     61                options: options
     62            });
     63        },
     64        createStringInputEditWidget: function() {
     65            return new StringInputEdit();
     66        },
     67
     68        createTextInputViewWidget: function(options) {
     69            return new TextInputView({
     70                options: options
     71            });
     72        },
     73        createTextInputEditWidget: function() {
     74            return new TextInputEdit();
     75        },
     76
     77        createIntegerInputViewWidget: function(options) {
     78            return new IntegerInputView({
     79                options: options
     80            });
     81        },
     82        createIntegerInputEditWidget: function() {
     83            return new IntegerInputEdit();
     84        },
     85
     86        createMultipleChoiceInputViewWidget: function(options) {
     87            return new MultipleChoiceInputView({
     88                options: options
     89            });
     90        },
     91        createMultipleChoiceInputEditWidget: function() {
     92            return new MultipleChoiceInputEdit();
     93        }
     94    });
     95
     96    var HeaderView = declare([_WidgetBase], {
     97        postCreate: function() {
     98            this.domNode.innerHTML = "<h2>"+this.options.content+"</h2>";
     99        }
     100    });
     101
     102    var HeaderEdit = declare([_WidgetBase, _Container], {
     103        _textBox: null,
     104        postCreate: function() {
     105            this._textBox = new TextBox();
     106            this.addChild(this._textBox);
     107            this._textBox.startup();
     108        },
     109        _setValueAttr: function(value) {
     110            this._textBox.set('value', value.content || "");
     111        },
     112        _getValueAttr: function() {
     113            return { type: 'Header',
     114                 content: this._textBox.get('displayedValue')
     115            };
     116        }
     117    });
     118
     119    var TextView = declare([_WidgetBase], {
     120        postCreate: function() {
     121            this.domNode.innerHTML = "<p>"+this.options.content+"</p>";
     122        }
     123    });
     124
     125    var TextEdit = declare([_WidgetBase, _Container], {
     126        _textArea: null,
     127        postCreate: function() {
     128            this._textArea = new Textarea();
     129            this.addChild(this._textArea);
     130            this._textArea.startup();
     131        },
     132        _setValueAttr: function(value) {
     133            this._textArea.set('value', value.content || "");
     134        },
     135        _getValueAttr: function() {
     136            return { type: 'Text',
     137                 content: this._textArea.get('displayedValue')
     138            };
     139        }
     140    })
     141
     142    var DividerView = declare([_WidgetBase], {
     143        postCreate: function() {
     144            this.domNode.innerHTML = "<hr>";
     145        }
     146    });
     147
     148    var StringInputView = declare([_WidgetBase, _Container],{
     149        _textBox: null,
     150        postCreate: function() {
     151            this._textBox = new TextBox();
     152            this.addChild(this._textBox);
     153            this._textBox.startup();
     154        },
     155        _setReadOnlyAttr: function(value) {
     156            this._textBox.set('readOnly', value);
     157        },
     158        _getCodeAttr: function() {
     159            return this.options.code;
     160        },
     161        _getValueAttr: function() {
     162            return this._textBox.get('value') || "";
     163        },
     164        _setValueAttr: function(value) {
     165            this._textBox.set('value',value || "");
     166        }
     167    });
     168
     169    var StringInputEdit = declare([_WidgetBase, _Container],{
     170        _codeInput: null,
     171        postCreate: function() {
     172            var table = new TableContainer({ cols: 1, customClass: "labelsAndValues"} );
     173
     174            this._codeInput = new TextBox({
     175                title: "Code"
     176            });
     177            table.addChild(this._codeInput);
     178            this._codeInput.startup();
     179
     180            this.addChild(table);
     181            table.startup();
     182        },
     183        _getValueAttr: function() {
     184            return {
     185                type: "StringInput",
     186                code: this._codeInput.get('value') || ""
     187            };
     188        },
     189        _setValueAttr: function(value) {
     190            this._codeInput.set('value', value.code || "");
     191        }
     192    });
     193
     194    var TextInputView = declare([_WidgetBase, _Container], {
     195        _textArea: null,
     196        postCreate: function() {
     197            this._textArea = new Textarea();
     198            this._textArea.set('maxLength', this.options.maxLength || 1000);
     199            this._textArea.set('value', this.options.defaultValue || "");
     200            this.addChild(this._textArea);
     201            this._textArea.startup();
     202        },
     203        _getCodeAttr: function() {
     204            return this.options.code;
     205        },
     206        _getValueAttr: function() {
     207            return this._textArea.get('value');
     208        },
     209        _setReadOnlyAttr: function(value) {
     210            this._textArea.set('readOnly', value);
     211        }
     212    });
     213
     214    var TextInputEdit = declare([_WidgetBase, _Container], {
     215        _codeInput: null,
     216        _maxLengthInput: null,
     217        postCreate: function() {
     218            var table = new TableContainer({ cols: 1, customClass: "labelsAndValues"} );
     219
     220            this._codeInput = new TextBox({
     221                title: "Code"
     222            });
     223            table.addChild(this._codeInput);
     224            this._codeInput.startup();
     225
     226            this._maxLengthInput = new NumberSpinner({
     227                title: "Maximum length",
     228                constraints: {
     229                    min: 0
     230                }
     231            });
     232            table.addChild(this._maxLengthInput);
     233            this._maxLengthInput.startup();
     234
     235            this.addChild(table);
     236            table.startup();
     237        },
     238
     239        _setValueAttr: function(value) {
     240            this._codeInput.set('value', value.code || "");
     241            this._maxLengthInput.set('value', value.maxLength);
     242        },
     243        _getValueAttr: function() {
     244            return {
     245                type: "TextInput",
     246                code: this._codeInput.get('value') || "",
     247                maxLength: this._maxLengthInput.get('value')
     248            };
     249        }
     250    });
     251
     252    var IntegerInputView = declare([_WidgetBase, _Container], {
     253        _numberInput: null,
     254        postCreate: function() {
     255            this._numberInput = new NumberSpinner({
     256                constraints: {
     257                    min: this.options.min,
     258                    max: this.options.max,
     259                    smallDelta: this.options.step
     260                }
     261            });
     262            this.addChild(this._numberInput);
     263            this._numberInput.startup();
     264        },
     265        _getCodeAttr: function() {
     266            return this.options.code;
     267        },
     268        _getValueAttr: function() {
     269            return this._numberInput.get('value');
     270        },
     271        _setReadOnlyAttr: function(value) {
     272            this._numberInput.set('readOnly', value);
     273        }
     274    });
     275
     276    var IntegerInputEdit = declare([_WidgetBase, _Container], {
     277        _codeInput: null,
     278        _minInput: null,
     279        _maxInput: null,
     280        postCreate: function() {
     281            var table = new TableContainer({ cols: 1, customClass: "labelsAndValues"} );
     282
     283            this._codeInput = new TextBox({
     284                title: "Code"
     285            });
     286            table.addChild(this._codeInput);
     287            this._codeInput.startup();
     288
     289            this._minInput = new NumberSpinner({
     290                title: "Minimum"
     291            });
     292            table.addChild(this._minInput);
     293            this._minInput.startup();
     294
     295            this._maxInput = new NumberSpinner({
     296                title: "Maximum"
     297            });
     298            table.addChild(this._maxInput);
     299            this._maxInput.startup();
     300
     301            this._stepInput = new NumberSpinner({
     302                title: "Step"
     303            });
     304            table.addChild(this._stepInput);
     305            this._stepInput.startup();
     306
     307            this.addChild(table);
     308            table.startup();
     309        },
     310
     311        _setValueAttr: function(value) {
     312            this._codeInput.set('value', value.code || "");
     313            this._minInput.set('value', value.min);
     314            this._maxInput.set('value', value.max);
     315            this._stepInput.set('value', value.step);
     316        },
     317        _getValueAttr: function() {
     318            return {
     319                type: "IntegerInput",
     320                code: this._codeInput.get('value') || "",
     321                min: this._minInput.get('value'),
     322                max: this._maxInput.get('value'),
     323                step: this._stepInput.get('value')
     324            };
     325        }
     326    });
     327
     328    var MultipleChoiceInputView = declare([_WidgetBase, _Container], {
     329        postCreate: function() {
     330            var table = new TableContainer({ cols: 1, customClass: "labelsAndValues"} );
     331
     332            var ctor = this.options.multiple === true ? CheckBox : RadioButton;
     333            array.forEach(this.options.items || ["Aap", "Noot"],function(item){
     334                table.addChild(new ctor({
     335                    title: item
     336                }));
     337            },this);
     338
     339            this.addChild(table);
     340            table.startup();
     341        },
     342        _getCodeAttr: function() {
     343            return this.options.code;
     344        },
     345        _getValueAttr: function() {
     346            var checked = array.filter(this.getChildren(),function(child){
     347                return child.get('checked');
     348            });
     349            if ( this.options.multiple ) {
     350                return array.map(checked,function(child){
     351                    return child.get('value');
    35352                });
    36             },
    37             createHeaderEditWidget: function() {
    38                 return new HeaderEditItem();
    39             },
    40 
    41             createTextViewWidget: function(options) {
    42                 return new TextViewItem({
    43                     options: options
    44                 });
    45             },
    46             createTextEditWidget: function() {
    47                 return new TextEditItem();
    48             },
    49 
    50             createFreeTextInputViewWidget: function(options) {
    51                 return new FreeTextViewItem({
    52                     options: options
    53                 });
    54             },
    55             createFreeTextInputEditWidget: function() {
    56                 return new FreeTextEditItem();
    57             }/*,
    58 
    59             createIntegerViewWidget: function(options) {
    60                 return new IntegerViewItem({
    61                     options: options
    62                 });
    63             },
    64             createIntegerEditWidget: function(options) {
    65                 return new IntegerEditItem({
    66                     options: options
    67                 });
    68             },
    69 
    70             createMultipleChoiceViewWidget: function(options) {
    71                 return new MultipleChoiceViewItem({
    72                     options: options
    73                 });
    74             },
    75             createMultipleChoiceEditWidget: function(options) {
    76                 return new MultipleChoiceEditItem({
    77                     options: options
    78                 });
    79             }*/
    80         });
    81 
    82         /* Contents */
    83         var HeaderViewItem = declare([_WidgetBase, _Container], {
    84             _textBox: null,
    85             postCreate: function() {
    86                 this._textBox = new TextBox();
    87                 this._textBox.set('value', this.options.contents);
    88                 this.addChild(this._textBox);
    89             },
    90             _getValueAttr: function() {
    91                 return {    type: 'Header',
    92                             contents: this._textBox.get('displayedValue')
    93                 };
    94             },
    95             _setReadOnlyAttr: function(value) {
    96                 this._textBox.set('readOnly', value);
     353            } else {
     354                return checked.length > 0 ? checked[0].get('value') : null;
    97355            }
    98         });
    99 
    100         var HeaderEditItem = declare([_WidgetBase, _Container], {
    101             _textBox: null,
    102             postCreate: function() {
    103                 this._textBox = new TextBox();
    104                 this.addChild(this._textBox);
    105             },
    106             _setValueAttr: function(value) {
    107                 this._textBox.set('value', value.contents || "");
    108             },
    109             _getValueAttr: function() {
    110                 return { type: 'Header',
    111                          contents: this._textBox.get('displayedValue')
    112                 };
    113             }
    114         });
    115 
    116         var TextViewItem = declare([_WidgetBase, _Container], {
    117             _textArea: null,
    118             postCreate: function() {
    119                 this._textArea = new Textarea();
    120                 this._textArea.set('value', this.options.contents);
    121                 this.addChild(this._textArea);
    122             },
    123             _getValueAttr: function() {
    124                 return { type: 'Text',
    125                          contents: this._textArea.get('displayedValue')
    126                 };
    127             },
    128             _setReadOnlyAttr: function(value) {
    129                 this._textArea.set('readOnly', value);
    130             }
    131         });
    132 
    133         var TextEditItem = declare([_WidgetBase, _Container], {
    134             _textArea: null,
    135             postCreate: function() {
    136                 this._textArea = new Textarea();
    137                 this.addChild(this._textArea);
    138             },
    139             _setValueAttr: function(value) {
    140                 this._textArea.set('value', value.contents || "");
    141             },
    142             _getValueAttr: function() {
    143                 return { type: 'Text',
    144                          contents: this._textArea.get('displayedValue')
    145                 };
    146             }
    147         })
    148 
    149         /* Inputs */
    150         var FreeTextViewItem = declare([_WidgetBase, _Container], {
    151             _textArea: null,
    152             postCreate: function() {
    153                 this._textArea = new Textarea();
    154                 this._textArea.set('maxLength', this.options.maxLength || 1000);
    155                 this._textArea.set('value', this.options.defaultValue || "");
    156                 this.addChild(this._textArea);
    157             },
    158             _getValueAttr: function() {
    159                 return { type: "FreeTextInput",
    160                          defaultValue: this.options.defaultValue,
    161                          maxLength: this.options.maxLength
    162                 };
    163             },
    164             _setReadOnlyAttr: function(value) {
    165                 this._textArea.set('readOnly', value);
    166             }
    167         });
    168 
    169         var FreeTextEditItem = declare(StackContainer, {
    170             _propertiesTable: null,
    171             _maxLength: null, _readOnly: null, _defaultValue: null,
    172 
    173 
    174             postCreate: function() {
    175                 this._textArea = new Textarea();
    176                 this._propertiesTable = new TableContainer({ cols: 1, customClass: "labelsAndValues"} );
    177                 this._maxLength = new NumberSpinner( { title: "Maximum length", constraints: {min:0}} );
    178                 this._readOnly = new CheckBox( { title: "Read only" } );
    179                 this._defaultValue = new Textarea( { title: "Default value" });
    180                 this._propertiesTable.addChild(this._maxLength);
    181                 this._propertiesTable.addChild(this._readOnly);
    182                 this._propertiesTable.addChild(this._defaultValue);
    183                 this.addChild(this._propertiesTable);
    184             },
    185 
    186             _setValueAttr: function(value) {
    187                 this._maxLength.set('value', value.maxLength);
    188                 this._readOnly.set('value', value.readOnly);
    189                 this._defaultValue.set('value', value.defaultValue);
    190             },
    191             _getValueAttr: function() {
    192                 return { type: "FreeTextInput",
    193                          defaultValue: this._defaultValue.get('value'),
    194                          readOnly: this._readOnly.get('value'),
    195                          maxLength: this._maxLength.get('value')
    196                 };
    197             }
    198 
    199 
    200         })
    201 
    202         //Use CheckedMultiSelect
    203         var MultipleChoiceInput = declare(StackContainer, {
    204             _multiSelect: null,
    205             startup: function() {
    206                 this.inherited(arguments);
    207                 this._multiSelect = new CheckedMultiSelect();
    208                 this._multiSelect.addOption({ label: "Hurr durr", value: 1 });
    209                 this._multiSelect.addOption({ label: "This is a choice", value: 1 });
    210                 this._multiSelect.addOption({ label: "This too", value: 1 });
    211                 this._multiSelect.addOption({ label: "So because there are more", value: 1 });
    212                 this._multiSelect.addOption({ label: "This must be multiple choice.", value: 1 });
    213                 this.addChild(this._multiSelect);
    214             },
    215 
    216             setObject: function() {
    217                 return;
    218             },
    219 
    220             edit: function() {
    221                 return;
    222             }
    223 
    224         });
    225 
    226         var IntegerInput = declare(StackContainer, {
    227             _numberSpinner:  null,
    228             _simpleTable: null,
    229             _editWidgets: null,
    230             _editTable: null,
    231             startup: function() {
    232                 this.inherited(arguments);
    233                 this._numberSpinner = new NumberSpinner( { title: "Answer", value: 0, constraints: { min: -100, max: 100 } });   
    234                 this._simpleTable = new TableContainer({ cols: 1, customClass: "labelsAndValues", labelWidth : 150} );
    235                 this._simpleTable.addChild(this._numberSpinner);
    236                 this._editTable = new TableContainer({ cols: 1, customClass: "labelsAndValues"} );
    237                 this._simpleTable.startup();
    238                 this.addChild(this._simpleTable);
    239             },
    240             edit: function() {
    241                 this.removeChild(this._simpleTable);
    242                 this.addChild(this._editTable);
    243             },
    244             save: function () {
    245                 for (var widget in this._editWidgets) {
    246                     var w = this._editWidgets[widget];
    247                     if (w.value) {
    248                         if (w.constraint)
    249                             this._numberSpinner.constraints[w.field] = w.value;
    250                         else
    251                             this._numberSpinner.set(w.field, w.value);
    252                     }
     356        },
     357        _setReadOnlyAttr: function(value) {
     358            array.forEach(this.getChildren(),function(child){
     359                child.set('readOnly', value);
     360            },this);
     361        }
     362    });
     363
     364    var MCOptionItem = declare([_WidgetBase,_Container],{
     365        _textBox: null,
     366        postCreate: function() {
     367            this.innerHTML = '<span class="dojoDndHandle">=</span>';
     368
     369            this._textBox = new TextBox({});
     370            this.addChild(this._textBox);
     371            this._textBox.startup();
     372
     373            var del = new Button({
     374                label: "X",
     375                onClick: lang.hitch(this,'onDelete')
     376            });
     377            this.addChild(del);
     378            del.startup();
     379        },
     380        _getValueAttr: function() {
     381            return this._textBox.set('value');
     382        },
     383        _setValueAttr: function(value) {
     384            this._textBox.set('value',value);
     385        },
     386        onDelete: function(){}
     387    });
     388
     389    var MultipleChoiceInputEdit = declare([_WidgetBase, _Container], {
     390        _codeInput: null,
     391        _multipleInput: null,
     392        postCreate: function() {
     393            var table = new TableContainer({ cols: 1, customClass: "labelsAndValues"} );
     394
     395            this._codeInput = new TextBox({
     396                title: "Code"
     397            });
     398            table.addChild(this._codeInput);
     399            this._codeInput.startup();
     400
     401            this._multipleInput = new CheckBox({
     402                title: "Allow multiple"
     403            });
     404            table.addChild(this._multipleInput);
     405            this._multipleInput.startup();
     406
     407            var add = new Button({
     408                label: "Add",
     409                onClick: lang.hitch(this,'_addOption',"")
     410            });
     411            table.addChild(add);
     412            add.startup();
     413
     414            this._optionsList = new OrderedList({
     415                type: 'multipleChoiceOption',
     416                withHandles: true,
     417                _createAvatarNode: function(item){
     418                    return domConstruct.create("div",{
     419                        'class': 'dragAvatar',
     420                        innerHTML: item
     421                    });
     422                },
     423                _createListNode: function(item) {
     424                    var w = new MCOptionItem();
     425                    w.startup();
     426                    w.set('value',item);
     427                    w.on('delete',lang.hitch(this,function(){
     428                        this._optionsList.removeItem(w);
     429                    }));
     430                    return w.domNode;
    253431                }
    254                 this.removeChild(this._editTable);
    255                 this.addChild(this._simpleTable);
    256                 this._simpleTable.layout();
    257             },
    258             setObject: function(object) {
    259                 if(object.contents) {
    260                     lang.mixin(this._numberSpinner, object.contents);
    261                     this._setupEditWidgets(object.contents);
    262                 }
    263                 else {
    264                     //Create widgets with default values
    265                     this._setupEditWidgets(this.getObject().contents);
    266                 }
    267             },
    268             _setupEditWidgets: function(contents) {
    269                 //Set up widgets which should appear once edit is pressed.
    270                 this._editWidgets = [];
    271                 this._editWidgets.push(new NumberSpinner( { field: "value", title: "Default value" }))
    272                 this._editWidgets.push(new NumberSpinner( { field: "smallDelta", title: "Increment size" }));
    273                 this._editWidgets.push(new NumberSpinner( { constraint: true, field: "max", title: "Maximum value" }));
    274                 this._editWidgets.push(new NumberSpinner( { constraint: true, field: "min", title: "Minimum value" }));
    275                 this._editWidgets.push(new TextBox ( { field: "invalidMessage", title: "Invalid message" }));
    276                 this._editWidgets.push(new TextBox ( { field: "title", title: "Label" }));
    277                 for (var widget in this._editWidgets) {
    278                     var w = this._editWidgets[widget];
    279                     if (w.constraint)
    280                         w.set('value', contents.constraints[w.field]);
    281                     else
    282                         w.set('value', contents[w.field]);
    283                     this._editTable.addChild(w);
    284                 }
    285                 this._editTable.startup();
    286             },
    287             getObject: function() {
    288                 return {
    289                     type: 'IntegerInput',
    290                     contents: {
    291                         value: this._numberSpinner.value,
    292                         smallDelta: this._numberSpinner.smallDelta,
    293                         constraints: this._numberSpinner.constraints,
    294                         invalidMessage: this._numberSpinner.invalidMessage,
    295                         title: this._numberSpinner.title
    296                     }
    297                 };
    298             }
    299         });
    300 
    301         return factory;
    302     });
     432            });
     433            table.addChild(this._optionsList);
     434            this._optionsList.startup();
     435
     436            this.addChild(table);
     437            table.startup();
     438        },
     439
     440        _setValueAttr: function(value) {
     441            this._codeInput.set('value', value.code || "");
     442            this._multipleInput.set('checked', value.multiple);
     443            this._optionsList.deleteItems();
     444            this._optionsList.appendItems(value.items || []);
     445        },
     446        _getValueAttr: function() {
     447            return {
     448                type: "MultipleChoiceInput",
     449                code: this._codeInput.get('value') || "",
     450                multiple: this._multipleInput.get('checked'),
     451                items: array.map(this._optionsList.getItems(),function(item){
     452                    return item.get('value');
     453                },this)
     454            };
     455        }
     456    });
     457
     458    return factory;
     459});

  • Dev/branches/rest-dojo-ui/client/rft/ui/lists/List.js

    r392 r402  
    7272                this.source.getAllNodes()
    7373                .forEach(function(node){
    74                     registry.byNode(node).destroy();
     74                    registry.byNode(node).destroyRecursive();
    7575                });
    7676                this.source.sync();
Note: See TracChangeset for help on using the changeset viewer.