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

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

Files:

• css/main.css (modified) (1 diff)
• pages/questions.html (modified) (1 diff)
• pages/questions.js (modified) (6 diffs)
• run.js (modified) (2 diffs)
• ui/LineWithActionsWidget.js (modified) (1 diff)
• ui/LoginDialog.js (modified) (1 diff)
• ui/MultipleChoiceWidget.js (added)
• ui/QuestionWidget.js (modified) (1 diff)
• ui/TitleGroup.js (modified) (1 diff)
• ui/_Page.js (modified) (1 diff)
• ui/templates (added)
• ui/templates/LineWithActionsWidget.html (moved) (moved from Dev/branches/rest-dojo-ui/client/rft/ui/LineWithActionsWidget.html)
• ui/templates/LoginDialog.html (moved) (moved from Dev/branches/rest-dojo-ui/client/rft/ui/LoginDialog.html)
• ui/templates/MultipleChoiceWidget.html (added)
• ui/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/css/main.css

@@ -34 +34 @@
     width: 150px;
 }
+
+.rftMultipleChoiceWidget {
+    display: table;
+}
+
+.rftMultipleChoiceWidget .row {
+    display: table-row;
+}
+
+.rftMultipleChoiceWidget .rowBox {
+    display: table-cell;
+}
+
+.rftMultipleChoiceWidget .rowText {
+    display: table-cell;
+    width: 100px;
+}
+
+.rftMultipleChoiceWidget .rowBtn {
+    display: table-cell;
+    width: 30px;
+}

Dev/branches/rest-dojo-ui/client/rft/pages/questions.html

@@ -6 +6 @@
     <div data-dojo-type="dijit.Dialog" title="Question" data-rft-attach-point="questionDialog">
         <form data-dojo-type="dijit.form.Form" data-rft-attach-point="questionForm" data-rft-attach-event="onSubmit:onSaveQuestion">
-            <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>
-                <div data-dojo-type="rft.ui.QuestionWidget" data-rft-attach-point="questionWidget" ></div>
-            </fieldset>
+            <div data-dojo-type="rft.ui.QuestionWidget" data-rft-attach-point="questionWidget"></div>
             <div style="float: right;">
                 <button type="button" data-dojo-type="dijit.form.Button" data-rft-attach-event="onClick:onCancelQuestion">Cancel</button>

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

@@ -1 +1 @@
 define(['dojo/_base/declare','dojo/_base/lang','dojo/_base/array','dojo/_base/event',
-    'dojo/_base/Deferred','dojo/store/JsonRest','dijit/layout/ContentPane','dijit/TitlePane',
+    'dojo/_base/Deferred','dojo/dom-construct','dojo/store/JsonRest','dijit/layout/ContentPane','dijit/TitlePane',
     'rft/ui/_Page','rft/ui/LineWithActionsWidget'],
-    function(declare,lang,array,event,Deferred,JsonRest,ContentPane,TitlePane,_Page,LineWithActionsWidget) {
+    function(declare,lang,array,event,Deferred,domConstruct,JsonRest,ContentPane,TitlePane,_Page,LineWithActionsWidget) {
         return declare('rft.pages.questions',[_Page],{
             constructor: function() {
@@ -13 +13 @@
                     idProperty: 'uid'
                 });
-                this._refresh();
+                this._refresh(true);
             },
-            _refresh: function() {
+            _refresh: function(initial) {
                 Deferred.when( this._store.query() ).then(lang.hitch(this,function(results){
                     array.forEach(results,lang.hitch(this,'_addQuestion'));
+                    initial && this.accordion.selectChild(true);
                 }));
             },
@@ -50 +51 @@
                 var category = q.category || 'Unsorted';
                 var widgets = this.accordion.getChildren();
-                var containerWidget;
-                var lastIndex = 'last';
+                var containerWidget = null;
+                var placeNode = this.accordion.domNode;
+                var placePos = 'last';
                 array.some(widgets,lang.hitch(this,function(widget,idx) {
                     if ( widget.title == category ) {
@@ -57 +59 @@
                         return true;
                     } else if ( widget.title > category  ) {
-                        lastIndex = idx;
+                        placeNode = widget.domNode;
+                        placePos = "before";
                         return true;
                     }
@@ -67 +70 @@
                     });
                     containerWidget.startup();
-                    this.accordion.addChild(containerWidget,lastIndex);
+                    domConstruct.place(containerWidget.domNode,placeNode,placePos);
                 }
                 return containerWidget;
@@ -87 +90 @@
             _editQuestion: function(question) {
                 this.questionForm.reset();
-                this.questionForm.set('value',question);
                 this.questionWidget.set('value',question);
                 this.questionDialog.show();
             },
             onSaveQuestion: function(evt) {
-                var value = this.questionForm.get('value');
-                var subvalue = this.questionWidget.get('value');
-                lang.mixin(value,subvalue);
+                var value = this.questionWidget.get('value');
                 Deferred.when( this._store.put(value) )
                 .then(lang.hitch(this,function(){

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

@@ -1 +1 @@
 require([
+    // functions required for run
+    'dojo/_base/window','dojo/parser', 'rft/ui/LoginDialog', 
+    'dojo/dom', 'dojo/_base/connect', 'rft/auth', 'rft/content',
+    'dojo/domReady!',
+    
+    // general widgets
     'dojo/data/ObjectStore',
     'dojo/store/JsonRest',
@@ -23 +29 @@
     'rft/ui/QuestionWidget',
     'rft/ui/TitleGroup',
-    'rft/pages/questions' // could this be done dynamically?
-]);
-
-require(['dojo/_base/window','dojo/parser', 'rft/ui/LoginDialog', 
-    'dojo/dom', 'dojo/_base/connect', 'rft/auth', 'rft/content',
-    'dojo/domReady!' ],
+    
+    // pages -> load dynamically?
+    'rft/pages/questions'],
     function(win,parser,LoginDialog,dom,connect,auth,content) {
         parser.parse();

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>