- Timestamp:
- 08/26/12 22:39:02 (13 years ago)
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
Dev/branches/rest-dojo-ui/client/rft/ui/content/ContentWidgetFactory.js
r400 r402 1 1 define([ 2 'dojo/_base/array', 2 3 'dojo/_base/declare', 3 4 'dojo/_base/lang', 5 'dojo/dom-construct', 4 6 'dijit/_WidgetBase', 5 7 'dijit/_Container', 8 'dijit/form/Button', 9 'dijit/form/CheckBox', 6 10 'dijit/form/NumberSpinner', 11 'dijit/form/RadioButton', 7 12 'dijit/form/Textarea', 8 13 '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'); 35 352 }); 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; 97 355 } 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; 253 431 } 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 });
Note: See TracChangeset
for help on using the changeset viewer.