Changeset 288 for Dev/branches/rest-dojo-ui/client/rft/ui

Timestamp:

02/24/12 16:09:22 (13 years ago)

Author:

hendrikvanantwerpen

Message:

[Client] MultipleChoiceWidget? for editing multiple choice questions
[Client] Move templates to separate directories.
[Client] Created QuestionWidget? to edit complete questions.
[Client] Fixed startup race condition where parsing was started before all classes were loaded.

Location:

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

Files:

• LineWithActionsWidget.js (modified) (1 diff)
• LoginDialog.js (modified) (1 diff)
• MultipleChoiceWidget.js (added)
• QuestionWidget.js (modified) (1 diff)
• TitleGroup.js (modified) (1 diff)
• _Page.js (modified) (1 diff)
• templates (added)
• templates/LineWithActionsWidget.html (moved) (moved from Dev/branches/rest-dojo-ui/client/rft/ui/LineWithActionsWidget.html)
• templates/LoginDialog.html (moved) (moved from Dev/branches/rest-dojo-ui/client/rft/ui/LoginDialog.html)
• templates/MultipleChoiceWidget.html (added)
• templates/QuestionWidget.html (moved) (moved from Dev/branches/rest-dojo-ui/client/rft/ui/QuestionWidget.html) (1 diff)

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

@@ -1 @@
-define(['dojo/_base/declare','dojo/_base/lang','dijit/form/Button','dijit/_WidgetBase','dijit/_TemplatedMixin','dijit/_WidgetsInTemplateMixin','dojo/text!rft/ui/LineWithActionsWidget.html'],
+define(['dojo/_base/declare','dojo/_base/lang','dijit/form/Button',
+    'dijit/_WidgetBase','dijit/_TemplatedMixin','dijit/_WidgetsInTemplateMixin',
+    'dojo/text!./templates/LineWithActionsWidget.html'],
     function(declare,lang,Button,_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,templateString){
         return declare('rft.ui.LineWithActionsWidget',[_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin],{

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

@@ -1 +1 @@
 define(['dojo/_base/declare','dojo/_base/lang','dojo/_base/event','dijit/Dialog',
-    'dijit/_WidgetsInTemplateMixin','../auth', 'dojo/text!./LoginDialog.html',
+    'dijit/_WidgetsInTemplateMixin','../auth', 'dojo/text!./templates/LoginDialog.html',
     '../content','dijit/form/Form','dijit/form/Button','dijit/form/TextBox'],
     function (declare, lang, event, Dialog, _WidgetsInTemplateMixin, auth, template, content) {

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

@@ -1 @@
-require(['dojo/_base/declare','dijit/_WidgetBase','dijit/_TemplatedMixin','dijit/_WidgetsInTemplateMixin','dojo/text!rft/ui/QuestionWidget.html','dijit/form/TextBox'],
-    function(declare,_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,templateString,TextBox){
-        declare('rft.ui.QuestionWidget',[_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin],{
+define(['dojo/_base/declare','dojo/dom-construct','dijit/_WidgetBase',
+    'dijit/_TemplatedMixin','dijit/_WidgetsInTemplateMixin',
+    'dojo/text!./templates/QuestionWidget.html','dijit/form/TextBox',
+    'dijit/form/Textarea','./MultipleChoiceWidget'],
+    function(declare,domConstruct,_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,templateString,TextBox,Textarea,MultipleChoiceWidget){
+        return declare('rft.ui.QuestionWidget',[_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin],{
             templateString: templateString,
             mode: 'view', // view || edit
-            type: 'string',
-            _w: null,
+            name: '',
+            _type: null,
+            _widgetCache: null,
+            constructor: function() {
+                this.inherited(arguments);
+                this._widgetCache = {};
+            },
             postCreate: function() {
-                this._setType(this.type);
+                this.typeSelector.set('disabled', this.mode == 'edit');
             },
-            _setType: function(type) {
-                if ( !this._w || this.type != type ) {
-                    if ( this._w ) {
-                        this._w.destroy();
-                        this._w = null;
-                    }
-                    this.type = type;
-                    switch(type) {
-                        case 'string':
-                            this._getStringWidget().placeAt(this.typeDetails);
-                            break;
-                        case 'text':
-                            break;
-                        case 'multipleChoice':
-                            break;
-                    }
-                }
-            },
-            _getStringWidget: function() {
-                if ( !this._stringWidget ) {
-                    this._stringWidget = new TextBox({
-                        name: 'answers',
-                        disabled: this.mode == 'view'
-                    });
-                }
-                return this._stringWidget;
+            _setValueAttr: function(value) {
+                value.type && this._onTypeChange(value.type);
+                this.ourForm.set('value',value);
             },
             _getValueAttr: function() {
                 return this.ourForm.get('value');
             },
-            _setValueAttr: function(value) {
-                return this.ourForm.set('value',value);
+            _onTypeChange: function(type) {
+                if ( this._type == type ) return;
+                this._type = type;
+                domConstruct.empty(this.typeDetails);
+                var widget = this._getTypeWidget(type);
+                widget && widget.placeAt(this.typeDetails,'only');
+            },
+            _getTypeWidget: function(type) {
+                var widget = this._widgetCache[type];
+                if (!widget) {
+                    switch(type) {
+                        case 'string':
+                            widget = new TextBox({
+                                name: 'answers',
+                                disabled: this.mode == 'view'
+                            });
+                            break;
+                        case 'text':
+                            widget = new Textarea({
+                                name: 'answers',
+                                disabled: this.mode == 'view',
+                                style: 'min-height: 120px'
+                            });
+                            break;
+                        case 'singleChoice':
+                        case 'multipleChoice':
+                            widget = new MultipleChoiceWidget({
+                                name: 'answers',
+                                mode: this.mode,
+                                allowMultiple: type == 'multipleChoice'
+                            });
+                            break;
+                    }
+                    this._widgetCache[type] = widget;
+                }
+                return widget;
             }
         });

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

@@ -1 @@
-require(['dojo/_base/declare','dojo/_base/query','dijit/registry','dojox/widget/TitleGroup'],function(declare,query,registry,TitleGroup){
-    declare('rft.ui.TitleGroup',[TitleGroup],{
-        getChildren: function() {
-            return query("> .dijitTitlePane", this.domNode)
-            .map(function(node){
-                return registry.byNode(node);
-            });
-        }
+require(['dojo/_base/declare','dojo/_base/query','dijit/registry','dojox/widget/TitleGroup'],
+    function(declare,query,registry,TitleGroup){
+        return declare('rft.ui.TitleGroup',[TitleGroup],{
+            getChildren: function() {
+                return query("> .dijitTitlePane", this.domNode)
+                .map(function(node){
+                    return registry.byNode(node);
+                });
+            }
+        });
     });
-});

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

@@ -1 @@
-define(['dojo/_base/declare','dojo/_base/lang','dojo/_base/array','dojo/parser','dojo/query','dojo/dom-attr','dojo/_base/connect','dijit','dijit/_WidgetBase','dijit/_Container','dijit/_Contained'],
+define(['dojo/_base/declare','dojo/_base/lang','dojo/_base/array','dojo/parser',
+    'dojo/query','dojo/dom-attr','dojo/_base/connect','dijit','dijit/_WidgetBase',
+    'dijit/_Container','dijit/_Contained'],
     function(declare,lang,array,parser,query,attr,connect,dijit,_WidgetBase,_Container,_Contained){
         return declare('rft.ui._Page',[_WidgetBase],{

Dev/branches/rest-dojo-ui/client/rft/ui/templates/QuestionWidget.html

@@ -1 +1 @@
 <div>
     <form data-dojo-type="dijit.form.Form" data-dojo-attach-point="ourForm">
-        <select data-dojo-type="dijit.form.Select" data-dojo-attach-point="typeSelector" name="type">
-            <option value="string" selected>String</option>
-            <option value="text">Text</option>
-            <option value="multipleChoice">Multiple choice</option>
-        </select>
-        <div data-dojo-attach-point="typeDetails">
-        </div>
+        <fieldset>
+            <input data-dojo-type="dijit.form.TextBox" name="uid" type="text" class="dijitHidden" />
+            <label for="code" class="loginLabel">Code</label>
+            <input data-dojo-type="dijit.form.TextBox" name="code" type="text" class="loginInput" />
+            <label for="question" class="loginLabel">Title</label>
+            <input data-dojo-type="dijit.form.TextBox" name="title" type="text" class="loginInput" />
+            <label for="question" class="loginLabel">Description</label>
+            <input data-dojo-type="dijit.form.Textarea" name="description" type="text" class="loginInput"/>
+            <label for="category" class="loginLabel">Category</label>
+            <input data-dojo-type="dijit.form.TextBox" name="category" type="text" class="loginInput" />
+        </fieldset>
+        <fieldset>
+            <select data-dojo-type="dijit.form.Select" data-dojo-attach-point="typeSelector" data-dojo-attach-event="onChange:_onTypeChange" name="type">
+                <option value="string" selected>String</option>
+                <option value="text">Text</option>
+                <option value="singleChoice">Single choice</option>
+                <option value="multipleChoice">Multiple choice</option>
+            </select>
+            <div data-dojo-attach-point="typeDetails"></div>
+        </fieldset>
     </form>
 </div>