Ignore:
Timestamp:
09/05/12 14:41:13 (13 years ago)
Author:
hendrikvanantwerpen
Message:

Added build infrastructure and reorganised code to match it.

Page navigation is now done by the rft/app/Controller class. pages
inherit generally from rft/app/Page, which is a BorderContainer?. The
Page uses normal widget mechanism like templateString, all data-rft-*
are obsolete, use normal data-dojo-* options again in templates.
This is done so the pages of the app can be included in the build.
URLs are linked to pages through registration, which is done in
run.js. The routes are defined in the routes.js file. Page class names
and URLs are now independent.

Reduced includes in index.html to one CSS file and two JS files. Dojo
stylesheets are now included thorugh externals.css.

Dojo 1.8 doesn't require the dotted names in declares anymore. All these
are now removed (redundant with module path and JS filename anyway)
and in templates a module id is used, so iso 'dijit.form.Form' use
'dijit/form/Form' now. This is more consistent with requires in the JS
code and they are picked up by the build system.

Removed any old-style dojo.<function> code and use loaded modules
everywhere.

Lots of whitespace unification.

Location:
Dev/branches/rest-dojo-ui
Files:
18 edited

Legend:

Unmodified
Added
Removed

  • Dev/branches/rest-dojo-ui

    • Property svn:ignore

      •  

        old new  
        11nbproject
        22.project
         3release

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

    • Property svn:externals

      •  

        old new  
        1 dojotoolkit http://svn.dojotoolkit.org/src/tags/release-1.8.0
         1dojo http://svn.dojotoolkit.org/src/tags/release-1.8.0/dojo
         2dijit http://svn.dojotoolkit.org/src/tags/release-1.8.0/dijit
         3dojox http://svn.dojotoolkit.org/src/tags/release-1.8.0/dojox
         4util http://svn.dojotoolkit.org/src/tags/release-1.8.0/util

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

    r359 r407  
    1 <div data-dojo-type="rft.pages.index">
    2     <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'" style="height: 600px;">
    3         <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
    4             <h2>
    5                 <span class="rftIcon rftIconUser"></span>
    6                 <span class="headerText">Main Menu</span>
    7             </h2>
     1<div>
     2    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
     3        <h2>
     4            <span class="rftIcon rftIconUser"></span>
     5            <span class="headerText">Main Menu</span>
     6        </h2>
     7    </div>
     8
     9    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
     10
     11        <div class="rftIndexMenuBlock" title="Sessions">
     12            <div class="rftIndexMenuMask">
     13                <span class="rftIcon rftIconSession"></span><span class="label">Sessions</span>
     14            </div>
     15            <button data-dojo-attach-point="btnContentCreate" data-dojo-type="dijit/form/Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'green twoHeight', iconClass: 'rftIcon rftIconPlus'">Create and edit</button>
     16            <button data-dojo-attach-point="btnContentFacilitate" data-dojo-type="dijit/form/Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'green twoHeight', iconClass: 'rftIcon rftIconForward'">Facilitate</button>
    817        </div>
    918
    10         <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
     19        <div class="rftIndexMenuBlock" title="Content">
     20            <div class="rftIndexMenuMask">
     21                <span class="rftIcon rftIconInspect"></span><span class="label">Content</span>
     22            </div>
     23            <button data-dojo-attach-point="btnSurveys" data-dojo-type="dijit/form/Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'blue oneHeight', iconClass: 'rftIcon rftIconSurvey'">Surveys</button>
     24            <button data-dojo-attach-point="btnQuestions" data-dojo-type="dijit/form/Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'orange oneHeight', iconClass: 'rftIcon rftIconQuestion'">Questions</button>
     25            <button data-dojo-attach-point="btnApplications" data-dojo-type="dijit/form/Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'purple oneHeight', iconClass: 'rftIcon rftIconApplication'">Applications</button>
     26            <button data-dojo-attach-point="btnDashboards" data-dojo-type="dijit/form/Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'red oneHeight', iconClass: 'rftIcon rftIconDashboard'">Dashboards</button>
     27        </div>
    1128
    12             <div class="rftIndexMenuBlock" title="Sessions">
    13                 <div class="rftIndexMenuMask">
    14                     <span class="rftIcon rftIconSession"></span><span class="label">Sessions</span>
    15                 </div>
    16                 <button data-rft-attach-point="btnContentCreate" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'green twoHeight', iconClass: 'rftIcon rftIconPlus'">Create and edit</button>
    17                 <button data-rft-attach-point="btnContentFacilitate" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'green twoHeight', iconClass: 'rftIcon rftIconForward'">Facilitate</button>
     29        <div class="rftIndexMenuBlock" title="results">
     30            <div class="rftIndexMenuMask">
     31                <span class="rftIcon rftIconGameData"></span><span class="label">Results</span>
    1832            </div>
    19 
    20             <div class="rftIndexMenuBlock" title="Content">
    21                 <div class="rftIndexMenuMask">
    22                     <span class="rftIcon rftIconInspect"></span><span class="label">Content</span>
    23                 </div>
    24                 <button data-rft-attach-point="btnSurveys" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'blue oneHeight', iconClass: 'rftIcon rftIconSurvey'">Surveys</button>
    25                 <button data-rft-attach-point="btnQuestions" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'orange oneHeight', iconClass: 'rftIcon rftIconQuestion'">Questions</button>
    26                 <button data-rft-attach-point="btnApplications" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'purple oneHeight', iconClass: 'rftIcon rftIconApplication'">Applications</button>
    27                 <button data-rft-attach-point="btnDashboards" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'red oneHeight', iconClass: 'rftIcon rftIconDashboard'">Dashboards</button>
    28             </div>
    29 
    30             <div class="rftIndexMenuBlock" title="results">
    31                 <div class="rftIndexMenuMask">
    32                     <span class="rftIcon rftIconGameData"></span><span class="label">Results</span>
    33                 </div>
    34                 <button data-rft-attach-point="btnResults" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'blue fourHeight', iconClass: 'rftIcon rftIconGameData'">Results</button>
    35             </div>
     33            <button data-dojo-attach-point="btnResults" data-dojo-type="dijit/form/Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'blue fourHeight', iconClass: 'rftIcon rftIconGameData'">Results</button>
    3634        </div>
    3735    </div>
    3836
    39     <script>
    40     require([
    41         'dojo/on',
    42         'dojo/query',
    43         'dijit/registry',
    44         'rft/content',
    45         'dojo/domReady!'
    46         ], function(on, query, registry, content){
    47             debugger;
    48             registry.byId("btnSessionsCreate").on("click", function(){
    49                 content.goTo("sessions", null);
    50             });
    51             registry.byId("btnSessionsFacilitate").on("click", function(){
    52                 content.goTo("sessions", null);
    53             });
    54 
    55             registry.byId("btnSurveys").on("click", function(){
    56                 content.goTo("surveys", null);
    57             });
    58             registry.byId("btnQuestions").on("click", function(){
    59                 content.goTo("questions", null);
    60             });
    61             registry.byId("btnApplications").on("click", function(){
    62                 content.goTo("applications", null);
    63             });
    64             registry.byId("btnDashboards").on("click", function(){
    65                 content.goTo("dashboards", null);
    66             });
    67 
    68             registry.byId("btnResults").on("click", function(){
    69                 content.goTo("results", null);
    70             });
    71 
    72         });
    73     </script>
    7437</div>

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

    r359 r407  
    1 define(['dojo/_base/declare','dojo/_base/lang','rft/content','rft/ui/_Page'],
    2     function(declare,lang,content,_Page){
    3         return declare('rft.pages.index',[_Page],{
    4             selectedObject: null,
    5             onVisit: function() {
    6                 this.btnContentCreate.on("click",function(){ content.goTo("sessions"); });
    7                 this.btnContentFacilitate.on("click",function(){ content.goTo("run"); });
    8                 this.btnSurveys.on("click",function(){ content.goTo("surveys"); });
    9                 this.btnQuestions.on("click",function(){ content.goTo("questions"); });
    10                 this.btnApplications.on("click",function(){ content.goTo("applications"); });
    11                 this.btnDashboards.on("click",function(){ content.goTo("dashboards"); });
    12                 this.btnResults.on("click",function(){ content.goTo("results"); });
    13             }
    14         });
     1define([
     2    'dojo/_base/declare',
     3    '../app/Controller',
     4    '../app/Page',
     5    'dojo/text!./index.html'
     6],function(declare,Controller,Page,template){
     7    return declare([Page],{
     8        templateString: template,
     9        selectedObject: null,
     10        startup: function() {
     11            if ( this._started ) { return; }
     12            this.inherited(arguments);
     13            this.btnContentCreate.on("click",function(){ Controller.go("/sessions"); });
     14            this.btnContentFacilitate.on("click",function(){ Controller.go("/run"); });
     15            this.btnSurveys.on("click",function(){ Controller.go("/surveys"); });
     16            this.btnQuestions.on("click",function(){ Controller.go("/questions"); });
     17            this.btnApplications.on("click",function(){ Controller.go("/applications"); });
     18            this.btnDashboards.on("click",function(){ Controller.go("/dashboards"); });
     19            this.btnResults.on("click",function(){ Controller.go("/results"); });
     20        }
    1521    });
    16 
     22});

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

    r396 r407  
    1 <div data-dojo-type="rft.pages.question" class="orange">
    2     <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'" style="height: 500px;">
    3         <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
    4             <h2>
    5                 <span class="rftIcon rftIconSurvey"></span>
    6                 <span class="headerText">Question 123 [Editing]</span>
    7             </h2>
     1<div class="orange">
     2    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
     3        <h2>
     4            <span class="rftIcon rftIconSurvey"></span>
     5            <span class="headerText">Question 123 [Editing]</span>
     6        </h2>
     7    </div>
     8    <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="region:'left', design:'headline'" style="width: 300px;">
     9        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
     10            <div data-dojo-attach-point="QuestionEditorToolkitNode"></div>
    811        </div>
    9         <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'left', design:'headline'" style="width: 300px;">
    10             <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
    11                 <div data-rft-attach-point="QuestionEditorToolkitNode"></div>
    12             </div>
    13             <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
    14                 <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconCancel'" data-rft-attach-event="onClick:_onDiscard">Discard</button>
    15                 <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconAccept'" data-rft-attach-event="onClick:_onSave">Save and exit</button>
    16             </div>
     12        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
     13            <button data-dojo-type="dijit/form/Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconCancel'" data-dojo-attach-event="onClick:_onDiscard">Discard</button>
     14            <button data-dojo-type="dijit/form/Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconAccept'" data-dojo-attach-event="onClick:_onSave">Save and exit</button>
    1715        </div>
    18         <div data-rft-attach-point="QuestionEditorPreviewNode"></div>
    19 
     16    </div>
     17    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
     18        <div data-dojo-attach-point="QuestionEditorPreviewNode"></div>
    2019    </div>
    2120</div>

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

    r390 r407  
    44    'dojo/_base/event',
    55    'dojo/_base/lang',
    6     'rft/store',
    7     'rft/content',
    8     'rft/ui/_Page',
    9     'rft/ui/QuestionEditorPreview',
    10     'rft/ui/QuestionEditorToolkit'
    11     ],function(declare, Deferred, event, lang, store, content, _Page, QuestionEditorPreview, QuestionEditorToolkit){
    12         return declare('rft.pages.question', [_Page], {
    13             question: null,
    14             _toolkit: null,
    15             _preview: null,
    16            
    17             onVisit: function() {
    18                 if (this.pageArgs.uid) {
    19                     Deferred.when(store.get(this.pageArgs.uid))
    20                     .then(lang.hitch(this, function(obj) {
    21                         this.question = obj;
    22                         this._refresh();
    23                     }));
    24                 } else {
    25                     throw new Error("Error: no reference to object set!");
    26                 }
    27                 this._setupEditor();
    28             },
    29             onLeave: function() {
    30                 this.inherited(arguments);
    31             },
    32             _refresh: function () {
    33                 this._toolkit.set('value',this.question);
    34                 this._preview.appendItems(this.question.content || []);
    35             },
    36             _onSave: function(evt) {
    37                 lang.mixin(this.question, this._toolkit.get('value'));
    38                 this.question.content = this._preview.getItems();
    39                 store.put(this.question)
    40                 .then(function() {
    41                     content.goTo('questions');
    42                 });
    43                 evt && event.stop( evt );
    44                 return false;
    45             },
    46             _onDiscard: function() {
    47                 content.goTo('questions');
    48                 return true;
    49             },
    50             _setupEditor: function() {
    51                 this._toolkit = new QuestionEditorToolkit({
    52                 },this.QuestionEditorToolkitNode);
    53                 this._toolkit.on('submit',lang.hitch(this,"_onSave"));
    54                 this._toolkit.startup();
     6    '../store',
     7    '../app/Controller',
     8    '../app/Page',
     9    '../ui/QuestionEditorPreview',
     10    '../ui/QuestionEditorToolkit',
     11    'dojo/text!./question.html'
     12],function(declare, Deferred, event, lang, store, Controller, Page, QuestionEditorPreview, QuestionEditorToolkit, template){
     13    return declare([Page], {
     14        templateString: template,
     15        question: null,
     16        _toolkit: null,
     17        _preview: null,
     18       
     19        startup: function() {
     20            if ( this._started ) { return; }
     21            this.inherited(arguments);
     22            if (this.questionId) {
     23                Deferred.when(store.get(this.questionId))
     24                .then(lang.hitch(this, function(obj) {
     25                    this.question = obj;
     26                    this._refresh();
     27                }));
     28            } else {
     29                throw new Error("Error: no reference to object set!");
     30            }
     31            this._setupEditor();
     32        },
     33        onLeave: function() {
     34            this.inherited(arguments);
     35        },
     36        _refresh: function () {
     37            this._toolkit.set('value',this.question);
     38            this._preview.appendItems(this.question.content || []);
     39        },
     40        _onSave: function(evt) {
     41            lang.mixin(this.question, this._toolkit.get('value'));
     42            this.question.content = this._preview.getItems();
     43            store.put(this.question)
     44            .then(function() {
     45                Controller.go('/questions');
     46            });
     47            evt && event.stop( evt );
     48            return false;
     49        },
     50        _onDiscard: function() {
     51            Controller.go('/questions');
     52            return true;
     53        },
     54        _setupEditor: function() {
     55            this._toolkit = new QuestionEditorToolkit({
     56            },this.QuestionEditorToolkitNode);
     57            this._toolkit.on('submit',lang.hitch(this,"_onSave"));
     58            this._toolkit.startup();
    5559
    56                 this._preview = new QuestionEditorPreview({
    57                     region: 'center'
    58                 },this.QuestionEditorPreviewNode);
    59                 this._preview.startup();
    60                 this._supportingWidgets.push(this._toolkit, this._preview);
    61             }
    62         });
     60            this._preview = new QuestionEditorPreview({
     61            },this.QuestionEditorPreviewNode);
     62            this._preview.startup();
     63            this._supportingWidgets.push(this._toolkit, this._preview);
     64        }
     65    });
    6366});
    64 

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

    r370 r407  
    1 <div data-dojo-type="rft.pages.questions" class="blue">
    2     <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'" style="height: 500px;">
     1<div class="blue">
    32
    4         <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
    5             <h2>
    6                 <span class="rftIcon rftIconQuestion"></span>
    7                 <span class="headerText">Questions</span>
    8             </h2>
    9         </div>
    10        
    11         <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
    12             <div data-rft-attach-point="questionBrowser"></div>
    13         </div>
     3    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
     4        <h2>
     5            <span class="rftIcon rftIconQuestion"></span>
     6            <span class="headerText">Questions</span>
     7        </h2>
     8    </div>
     9   
     10    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
     11        <div data-dojo-attach-point="questionBrowser"></div>
     12    </div>
    1413
    15         <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
    16             <div data-dojo-type="dijit.form.Button" data-rft-attach-event="onClick:onNewQuestion" data-dojo-props="baseClass: 'rftLargeButton', iconClass:'rftIcon rftIconQuestion'">New question</div>
    17         </div>
     14    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'">
     15        <div data-dojo-type="dijit/form/Button" data-dojo-attach-event="onClick:onNewQuestion" data-dojo-props="baseClass: 'rftLargeButton', iconClass:'rftIcon rftIconQuestion'">New question</div>
     16    </div>
    1817
    19     </div>
    2018</div>

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

    r370 r407  
    44    'dojo/_base/event',
    55    'dojo/_base/lang',
    6     'rft/content',
    7     'rft/store',
    8     'rft/ui/_Page',
    9     'rft/ui/TabbedQuestionBrowser'
    10     ],function(declare,Deferred,event,lang,content,store,_Page,TabbedQuestionBrowser) {
    11         return declare('rft.pages.questions',[_Page],{
    12             constructor: function() {
    13                 this.inherited(arguments);
    14             },
    15             onVisit: function() {
    16                 this.questionBrowser = new TabbedQuestionBrowser({
    17                     region: 'center',
    18                     'class': 'blue',
    19                     itemActions: {
    20                         'Edit': {
    21                             callback: lang.hitch(this,"onEditQuestion"),
    22                                icon: 'Edit',
    23                                description: 'Edit question'
    24                         }
     6    '../app/Controller',
     7    '../store',
     8    '../app/Page',
     9    '../ui/TabbedQuestionBrowser',
     10    'dojo/text!./questions.html'
     11],function(declare,Deferred,event,lang,Controller,store,Page,TabbedQuestionBrowser,template) {
     12    return declare([Page],{
     13        templateString: template,
     14        startup: function() {
     15            if ( this._started ) { return; }
     16            this.inherited(arguments);
     17            this.questionBrowser = new TabbedQuestionBrowser({
     18                region: 'center',
     19                'class': 'blue',
     20                itemActions: {
     21                    'Edit': {
     22                        callback: lang.hitch(this,"onEditQuestion"),
     23                           icon: 'Edit',
     24                           description: 'Edit question'
    2525                    }
    26                 },this.questionBrowser);
    27                 this.questionBrowser.startup();
    28             },
    29             _refresh: function() {
    30                 Deferred.when(store.query('_design/default/_view/by_type',{key: 'Question'}))
    31                 .then(lang.hitch(this,function(items){
    32                     this._list.setItems(items);
    33                 }));
    34             },
    35             onNewQuestion: function() {
    36                 Deferred.when(store.add({type:'Question'}))
    37                 .then(lang.hitch(this,function(question){
    38                     this.onEditQuestion(question);
    39                 }));
    40             },
    41             onEditQuestion: function(question) {
    42                 content.goTo("question", {uid: question._id});
    43             }
    44         });
     26                }
     27            },this.questionBrowser);
     28            this.questionBrowser.startup();
     29        },
     30        _refresh: function() {
     31            Deferred.when(store.query('_design/default/_view/by_type',{key: 'Question'}))
     32            .then(lang.hitch(this,function(items){
     33                this._list.setItems(items);
     34            }));
     35        },
     36        onNewQuestion: function() {
     37            Deferred.when(store.add({type:'Question'}))
     38            .then(lang.hitch(this,function(question){
     39                this.onEditQuestion(question);
     40            }));
     41        },
     42        onEditQuestion: function(question) {
     43            Controller.go("/question/"+question._id);
     44        }
     45    });
    4546});

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

    r384 r407  
    1 <div data-dojo-type="rft.pages.session">
    2     <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'" style="height: 500px;">
    3         <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
    4             <h2>
    5                 <span class="rftIcon rftIconSurvey"></span>
    6                 <span data-rft-attach-point="titleNode" class="headerText">Untitled</span><span class="headerText"> [editing]</span>
    7             </h2>
    8         </div>
    9         <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'">
    10             <div data-dojo-type="dijit.layout.TabContainer" class="green" data-dojo-props="tabPosition:'left-h',region:'center'">
    11                 <div data-dojo-type="dijit.layout.ContentPane" title="Properties">
    12                     <div data-dojo-type="dijit.form.Form" data-rft-attach-point="propertiesForm" data-rft-attach-event="onSubmit:onSave">
     1<div>
     2    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
     3        <h2>
     4            <span class="rftIcon rftIconSurvey"></span>
     5            <span data-dojo-attach-point="titleNode" class="headerText">Untitled</span><span class="headerText"> [editing]</span>
     6        </h2>
     7    </div>
     8    <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="region:'center'">
     9        <div data-dojo-type="dijit/layout/TabContainer" class="green" data-dojo-props="tabPosition:'left-h',region:'center'">
     10            <div data-dojo-type="dijit/layout/ContentPane" title="Properties">
     11                <div data-dojo-type="dijit/form/Form" data-dojo-attach-point="propertiesForm" data-dojo-attach-event="onSubmit:onSave">
    1312
    14                         <h3>Basic</h3>
    15                         <fieldset class="align">
    16                             <label for="title">Title</label>
    17                             <input type="text" name="title" data-dojo-type="dijit.form.TextBox" data-dojo-props="placeHolder: 'Enter title here'" />
    18                             <br/>
    19                             <label for="description">Description</label>
    20                             <textarea name="description" rows="3" cols="54" data-dojo-type="dijit.form.SimpleTextarea" data-dojo-props="selectOnClick: true, placeHolder: 'Description shown in tooltips'"></textarea>
    21                             <br/>
    22                             <label for="plannedDate">Planned date</label>
    23                             <input type="text" name="plannedDate" data-dojo-type="dijit.form.DateTextBox" required="required" />
    24                         </fieldset>
     13                    <h3>Basic</h3>
     14                    <fieldset class="align">
     15                        <label for="title">Title</label>
     16                        <input type="text" name="title" data-dojo-type="dijit/form/TextBox" data-dojo-props="placeHolder: 'Enter title here'" />
     17                        <br/>
     18                        <label for="description">Description</label>
     19                        <textarea name="description" rows="3" cols="54" data-dojo-type="dijit/form/SimpleTextarea" data-dojo-props="selectOnClick: true, placeHolder: 'Description shown in tooltips'"></textarea>
     20                        <br/>
     21                        <label for="plannedDate">Planned date</label>
     22                        <input type="text" name="plannedDate" data-dojo-type="dijit/form/DateTextBox" required="required" />
     23                    </fieldset>
    2524
    26                         <h3>Accounts</h3>
    27                         <fieldset class="align">
    28                             <label for="accountSelector">Add new</label>
    29                             <select data-rft-attach-point="accountSelector"></select>
    30                             <button data-rft-attach-point="btnInvite" data-dojo-type="dijit.form.Button" data-rft-attach-event="onClick:onInvite" data-dojo-props="baseClass: 'rftBlockButton', class: 'green', iconClass: 'rftIcon rftIconPlus'">Invite</button>
    31                             <br/><br/>
    32                            
    33                             <div data-rft-attach-point="accountListNode" class="rftAccountListView">
    34                             </div>
    35                         </fieldset>
     25                    <h3>Accounts</h3>
     26                    <fieldset class="align">
     27                        <label for="accountSelector">Add new</label>
     28                        <select data-dojo-attach-point="accountSelector"></select>
     29                        <button data-dojo-attach-point="btnInvite" data-dojo-type="dijit/form/Button" data-dojo-attach-event="onClick:onInvite" data-dojo-props="baseClass: 'rftBlockButton', class: 'green', iconClass: 'rftIcon rftIconPlus'">Invite</button>
     30                        <br/><br/>
     31                       
     32                        <div data-dojo-attach-point="accountListNode" class="rftAccountListView">
     33                        </div>
     34                    </fieldset>
    3635
    37                         <button data-dojo-type="dijit.form.Button" data-rft-attach-event="onClick:onDiscard" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconCancel'">Discard changes</button>
    38                         <button data-dojo-type="dijit.form.Button" data-rft-attach-event="onClick:onSave" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconAccept'">Save changes</button>
    39 
    40                     </div>
     36                    <button data-dojo-type="dijit/form/Button" data-dojo-attach-event="onClick:onDiscard" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconCancel'">Discard changes</button>
     37                    <button data-dojo-type="dijit/form/Button" data-dojo-attach-event="onClick:onSave" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconAccept'">Save changes</button>
    4138
    4239                </div>
    43                 <div data-dojo-type="dijit.layout.ContentPane" title="Design">
    44                     <div class="rftSessionObject green">
    45                         <div class="rftIcon rftIconSurvey"></div>
    46                         <label>Survey name</label>
    47                     </div>
    48                     <div class="rftSessionObject green">
    49                         <div class="rftIcon rftIconSurvey"></div>
    50                         <label>Survey name, this one is really long.</label>
    51                     </div>
    5240
     41            </div>
     42            <div data-dojo-type="dijit/layout/ContentPane" title="Design">
     43                <div class="rftSessionObject green">
     44                    <div class="rftIcon rftIconSurvey"></div>
     45                    <label>Survey name</label>
    5346                </div>
     47                <div class="rftSessionObject green">
     48                    <div class="rftIcon rftIconSurvey"></div>
     49                    <label>Survey name, this one is really long.</label>
     50                </div>
     51
    5452            </div>
    5553        </div>

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

    r389 r407  
    55    'dojo/_base/event',
    66    'dojo/_base/Deferred',
    7     '../content',
     7    '../app/Controller',
    88    '../store',
    99    '../elastic/ElasticSearchFilteringSelect',
    1010    '../elastic/ElasticReadStore',
    11     '../ui/_Page',
    12     '../ui/lists/AccountListView'
    13     ],
    14     function(array,declare,lang,event,Deferred,ElasticSearchFilteringSelect,ElasticReadStore,store,_Page,content,AccountListView){
    15         return declare('rft.pages.session',[_Page],{
    16             session: null,
    17             _accountList: null,
    18             _select: null,
    19             onVisit: function() {
    20                 if ( this.pageArgs.uid ) {
    21                     Deferred.when(store.get(this.pageArgs.uid))
    22                     .then(lang.hitch(this,function(obj){
    23                         this.session = obj;
    24                         this._setupAccountList();
    25                         this._refresh();
    26                     }));
    27                     this._setupAutoComplete();
    28                 } else {
    29                     throw "No valid uid or session passed!";
    30                 }
    31             },
    32             _refresh: function() {
    33                 this.titleNode.innerHTML = this.session.title || '';
    34                 this.propertiesForm.set('value',this.session);
    35             },
    36             onInvite: function() {
    37                 this._addAccount(this._select.item.i);
    38                 this._select.reset();
    39             },
    40             onSave: function(evt) {
    41                 lang.mixin(this.session,this.propertiesForm.get('value'));
    42                 this.session.accounts = array.map(this._accountList.getItems(),function(item){
    43                     return store.getIdentity(item);
    44                 });
    45                 store.put(this.session)
    46                 .then(function(){
    47                     content.goTo('sessions');
    48                 });
    49                 event.stop(evt);
    50                 return false;
    51             },
    52             onDiscard: function(evt) {
    53                 this.propertiesForm.reset();
    54                 event.stop(evt);
    55                 content.goTo('sessions');
    56                 return false;
    57             },
    58             _addAccount: function(item) {
    59                 this._accountList.insertItem(item);
    60             },
    61             _setupAccountList: function() {
    62                 this._accountList = new AccountListView().placeAt(this.accountListNode);
    63                 this._accountList.startup();
    64                 for (var account in this.session.accounts) {
    65                     this._accountList.insertItem(this.session.accounts[account]);
    66                 }
    67             },
    68             _setupAutoComplete: function() {
    69                 var accountStore = new ElasticReadStore({
    70                     url: "http://localhost:9200/rft/_search",
    71                     requestMethod: "POST"
    72                 });
    73                 this._select = new ElasticSearchFilteringSelect({
    74                     store: accountStore,
    75                     autoComplete: false,
    76                     required: false,
    77                     labelType: "text",
    78                     placeHolder: "Enter email address here...",
    79                     pageSize: 10,
    80                     hasDownArrow: false,
    81                     style: "width: 400",
    82                     searchAttr: "title"
    83                 }, this.accountSelector);
    84                 this._select.startup();
     11    '../app/Page',
     12    '../ui/lists/AccountListView',
     13    'dojo/text!./session.html'
     14],function(array,declare,lang,event,Deferred,ElasticSearchFilteringSelect,ElasticReadStore,store,Page,Controller,AccountListView,template){
     15    return declare([Page],{
     16        templateString: template,
     17        session: null,
     18        _accountList: null,
     19        _select: null,
     20        startup: function() {
     21            if ( this._started ) { return; }
     22            this.inherited(arguments);
     23            if ( this.sessionId ) {
     24                Deferred.when(store.get(this.sessionId))
     25                .then(lang.hitch(this,function(obj){
     26                    this.session = obj;
     27                    this._setupAccountList();
     28                    this._refresh();
     29                }));
     30                this._setupAutoComplete();
     31            } else {
     32                throw "No valid uid or session passed!";
    8533            }
     34        },
     35        _refresh: function() {
     36            this.titleNode.innerHTML = this.session.title || '';
     37            this.propertiesForm.set('value',this.session);
     38        },
     39        onInvite: function() {
     40            this._addAccount(this._select.item.i);
     41            this._select.reset();
     42        },
     43        onSave: function(evt) {
     44            lang.mixin(this.session,this.propertiesForm.get('value'));
     45            this.session.accounts = array.map(this._accountList.getItems(),function(item){
     46                return store.getIdentity(item);
     47            });
     48            store.put(this.session)
     49            .then(function(){
     50                Controller.go('/sessions');
     51            });
     52            event.stop(evt);
     53            return false;
     54        },
     55        onDiscard: function(evt) {
     56            this.propertiesForm.reset();
     57            event.stop(evt);
     58            Controller.go('/sessions');
     59            return false;
     60        },
     61        _addAccount: function(item) {
     62            this._accountList.insertItem(item);
     63        },
     64        _setupAccountList: function() {
     65            this._accountList = new AccountListView().placeAt(this.accountListNode);
     66            this._accountList.startup();
     67            for (var account in this.session.accounts) {
     68                this._accountList.insertItem(this.session.accounts[account]);
     69            }
     70        },
     71        _setupAutoComplete: function() {
     72            var accountStore = new ElasticReadStore({
     73                url: "http://localhost:9200/rft/_search",
     74                requestMethod: "POST"
     75            });
     76            this._select = new ElasticSearchFilteringSelect({
     77                store: accountStore,
     78                autoComplete: false,
     79                required: false,
     80                labelType: "text",
     81                placeHolder: "Enter email address here...",
     82                pageSize: 10,
     83                hasDownArrow: false,
     84                style: "width: 400",
     85                searchAttr: "title"
     86            }, this.accountSelector);
     87            this._select.startup();
     88        }
    8689
    8790
    88         });
    8991    });
     92});
    9093

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

    r359 r407  
    1 <div data-dojo-type="rft.pages.sessions">
    2     <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'" style="height: 500px;">
    3         <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
    4             <h2>
    5                 <span class="rftIcon rftIconSession"></span>
    6                 <span class="headerText">Sessions</span>
    7             </h2>
    8         </div>
    9         <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'">
    10             <div data-rft-attach-point="tabContainer" data-dojo-type="dijit.layout.TabContainer" class="green" data-dojo-props="tabPosition:'left-h',region:'center'">
    11                 <div data-dojo-type="dijit.layout.BorderContainer" title="Templates" data-rft-attach-point="templatesTab">
    12                     <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center'" data-rft-attach-point="containerTemplates">
    13                     </div>
    14                     <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'bottom'" style="height: 40px;">
    15                         <div data-dojo-type="dijit.form.Button" data-dojo-props="region: 'bottom', baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconSessionTemplate'" data-rft-attach-event="onClick:onAddSessionTemplate">Create new template</div>
    16                     </div>
     1<div>
     2    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
     3        <h2>
     4            <span class="rftIcon rftIconSession"></span>
     5            <span class="headerText">Sessions</span>
     6        </h2>
     7    </div>
     8    <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="region:'center'">
     9        <div data-dojo-attach-point="tabContainer" data-dojo-type="dijit/layout/TabContainer" class="green" data-dojo-props="tabPosition:'left-h',region:'center'">
     10            <div data-dojo-type="dijit/layout/BorderContainer" title="Templates" data-dojo-attach-point="templatesTab">
     11                <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'" data-dojo-attach-point="containerTemplates">
    1712                </div>
    18                 <div data-dojo-type="dijit.layout.ContentPane" title="Sessions" data-rft-attach-point="sessionsTab">
    19                     <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center'" data-rft-attach-point="containerSessions">
    20                     </div>
    21                     <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'bottom'" style="height: 40px;">
    22                         <!-- Buttons? -->
    23                     </div>
     13                <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'bottom'" style="height: 40px;">
     14                    <div data-dojo-type="dijit/form/Button" data-dojo-props="region: 'bottom', baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconSessionTemplate'" data-dojo-attach-event="onClick:onAddSessionTemplate">Create new template</div>
     15                </div>
     16            </div>
     17            <div data-dojo-type="dijit/layout/ContentPane" title="Sessions" data-dojo-attach-point="sessionsTab">
     18                <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'" data-dojo-attach-point="containerSessions">
     19                </div>
     20                <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'bottom'" style="height: 40px;">
     21                    <!-- Buttons? -->
    2422                </div>
    2523            </div>

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

    r384 r407  
    33    'dojo/_base/lang',
    44    'dojo/date/stamp',
    5     'rft/store',
    6     'rft/content',
    7     'rft/ui/_Page',
    8     'rft/ui/ObjectBox'],
    9     function(declare,lang,dateStamp,store,content,_Page,ObjectBox){
    10         return declare('rft.pages.sessions',[_Page],{
    11             templateActions: null,
    12             sessionActions: null,
    13             onVisit: function() {
    14                 this.templateActions = {
    15                     "Edit": function(obj){
    16                         content.goTo('session',{uid:store.getIdentity(obj)});
    17                     },
    18                     "Delete": lang.hitch(this,function(obj){
    19                         store.remove(store.getIdentity(obj),store.getRevision(obj))
    20                         .then(lang.hitch(this,function(){
    21                             this._refresh();
    22                         }));
    23                     }),
    24                     "Publish": lang.hitch(this,this._publishSession)
    25                 };
    26                 this.sessionActions = {
    27                     "Facilitate": function(obj){
    28                         content.goTo('run',{uid:store.getIdentity(obj)});
    29                     },
    30                     "Delete": lang.hitch(this,function(obj){
    31                         store.remove(store.getIdentity(obj),store.getRevision(obj))
    32                         .then(lang.hitch(this,function(){
    33                             this._refresh();
    34                         }));
    35                     })
    36                 };
     5    '../store',
     6    '../app/Controller',
     7    '../app/Page',
     8    '../ui/ObjectBox',
     9    'dojo/text!./sessions.html'
     10],function(declare,lang,dateStamp,store,Controller,Page,ObjectBox,template){
     11    return declare([Page],{
     12        templateString: template,
     13        templateActions: null,
     14        sessionActions: null,
     15        startup: function() {
     16            if ( this._started ) { return; }
     17            this.inherited(arguments);
     18            this.templateActions = {
     19                "Edit": function(obj){
     20                    Controller.go('/session/'+store.getIdentity(obj));
     21                },
     22                "Delete": lang.hitch(this,function(obj){
     23                    store.remove(store.getIdentity(obj),store.getRevision(obj))
     24                    .then(lang.hitch(this,function(){
     25                        this._refresh();
     26                    }));
     27                }),
     28                "Publish": lang.hitch(this,this._publishSession)
     29            };
     30            this.sessionActions = {
     31                "Facilitate": function(obj){
     32                    Controller.go('run',{uid:store.getIdentity(obj)});
     33                },
     34                "Delete": lang.hitch(this,function(obj){
     35                    store.remove(store.getIdentity(obj),store.getRevision(obj))
     36                    .then(lang.hitch(this,function(){
     37                        this._refresh();
     38                    }));
     39                })
     40            };
     41            this._refresh();
     42        },
     43        _refresh: function() {
     44            this.containerTemplates.set('content','');
     45            this.containerSessions.set('content','');
     46            this._refreshByType('SessionTemplate',this.containerTemplates.domNode,this.templateActions);
     47            this._refreshByType('SessionInstance',this.containerSessions.domNode,this.sessionActions);
     48        },
     49        _refreshByType: function(type,container,actions) {
     50            store.query("_design/default/_view/by_type",{key:type})
     51            .forEach(lang.hitch(this,function(obj){
     52                var widget = new ObjectBox({
     53                    actions: actions
     54                }).placeAt(container, "last");
     55                widget.startup();
     56                widget.set('value',obj);
     57            }));
     58        },
     59        onAddSessionTemplate: function(){
     60            store.put({
     61                type: 'SessionTemplate'
     62            })
     63            .then(lang.hitch(this,function(obj){
     64                Controller.go('/session/'+store.getIdentity(obj));
     65            }));
     66        },
     67        _publishSession: function(sessionTemplate) {
     68            var session = lang.clone(sessionTemplate);
     69            delete session[store.idProperty];
     70            delete session[store.revProperty];
     71            session.type = "SessionInstance";
     72            session.publishedDate = dateStamp.toISOString(new Date(),{zulu: true});
     73            session.creator = "Igor Mayer";
     74            store.add(session)
     75            .then(lang.hitch(this,function(){
    3776                this._refresh();
    38             },
    39             _refresh: function() {
    40                 this.containerTemplates.set('content','');
    41                 this.containerSessions.set('content','');
    42                 this._refreshByType('SessionTemplate',this.containerTemplates.domNode,this.templateActions);
    43                 this._refreshByType('SessionInstance',this.containerSessions.domNode,this.sessionActions);
    44             },
    45             _refreshByType: function(type,container,actions) {
    46                 store.query("_design/default/_view/by_type",{key:type})
    47                 .forEach(lang.hitch(this,function(obj){
    48                     var widget = new ObjectBox({
    49                         actions: actions
    50                     }).placeAt(container, "last");
    51                     widget.startup();
    52                     widget.set('value',obj);
    53                 }));
    54             },
    55             onAddSessionTemplate: function(){
    56                 store.put({
    57                     type: 'SessionTemplate'
    58                 })
    59                 .then(lang.hitch(this,function(obj){
    60                     content.goTo('session',{uid:store.getIdentity(obj)});
    61                 }));
    62             },
    63             _publishSession: function(sessionTemplate) {
    64                 var session = lang.clone(sessionTemplate);
    65                 delete session[store.idProperty];
    66                 delete session[store.revProperty];
    67                 session.type = "SessionInstance";
    68                 session.publishedDate = dateStamp.toISOString(new Date(),{zulu: true});
    69                 session.creator = "Igor Mayer";
    70                 store.add(session)
    71                 .then(lang.hitch(this,function(){
    72                     this._refresh();
    73                     this.tabContainer.selectChild(this.sessionsTab);
    74                 }));
    75             }
    76         });
     77                this.tabContainer.selectChild(this.sessionsTab);
     78            }));
     79        }
    7780    });
    78 
     81});

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

    r382 r407  
    1 <div data-dojo-type="rft.pages.survey" class="blue">
    2     <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'" style="height: 500px;">
     1<div class="blue">
    32
    4         <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
    5             <h2>
    6                 <span class="rftIcon rftIconSurvey"></span>
    7                 <span class="headerText" data-rft-attach-point="titleNode">Survey Editor</span>
    8             </h2>
     3    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
     4        <h2>
     5            <span class="rftIcon rftIconSurvey"></span>
     6            <span class="headerText" data-dojo-attach-point="titleNode">Survey Editor</span>
     7        </h2>
     8    </div>
     9   
     10    <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="region:'center'">
     11        <div data-dojo-attach-point="questionBrowser"></div>
     12    </div>
     13   
     14    <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="region:'right'" style="width: 300px">
     15        <div data-dojo-attach-point="surveyListViewNode" class="rftSurveyListView">
    916        </div>
    10        
    11         <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'">
    12             <div data-rft-attach-point="questionBrowser"></div>
     17
     18        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'bottom'">
     19            <button data-dojo-type="dijit/form/Button"
     20                    data-dojo-attach-event="onClick:_onShowProperties"
     21                    data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconProperties'">
     22                Properties</button>
     23            <button data-dojo-type="dijit/form/Button"
     24                    data-dojo-attach-event="onClick:_onSave"
     25                    data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconAccept'">
     26                Save Changes</button>
     27            <button data-dojo-type="dijit/form/Button"
     28                    data-dojo-attach-event="onClick:_onDiscard"
     29                    data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconCancel'">
     30                Discard changes</button>
     31            <button data-dojo-type="dijit/form/Button"
     32                    data-dojo-attach-event="onClick:_onShowPreview"
     33                    data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconPreview'">
     34                Preview</button>
    1335        </div>
    14        
    15         <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'right'" style="width: 300px">
    16             <div data-rft-attach-point="surveyListViewNode" class="rftSurveyListView">
    17             </div>
    1836
    19             <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'bottom'">
    20                 <button data-dojo-type="dijit.form.Button"
    21                         data-rft-attach-event="onClick:_onShowProperties"
    22                         data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconProperties'">
    23                     Properties</button>
    24                 <button data-dojo-type="dijit.form.Button"
    25                         data-rft-attach-event="onClick:_onSave"
    26                         data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconAccept'">
    27                     Save Changes</button>
    28                 <button data-dojo-type="dijit.form.Button"
    29                         data-rft-attach-event="onClick:_onDiscard"
    30                         data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconCancel'">
    31                     Discard changes</button>
    32                 <button data-dojo-type="dijit.form.Button"
    33                         data-rft-attach-event="onClick:_onShowPreview"
    34                         data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconPreview'">
    35                     Preview</button>
    36             </div>
    37         </div>
    38     </div>
     37    <div data-dojo-type="dijit/Dialog"
     38         title="Survey properties"
     39         data-dojo-attach-point="propertiesDialog"
     40         data-dojo-attach-event="onSubmit:_onPropertiesOk">
    3941
    40     <div data-dojo-type="dijit.Dialog"
    41          title="Survey properties"
    42          data-rft-attach-point="propertiesDialog"
    43          data-rft-attach-event="onSubmit:_onPropertiesOk">
    44 
    45         <form data-dojo-type="dijit.form.Form"
    46               data-rft-attach-point="propertiesForm">
     42        <form data-dojo-type="dijit/form/Form"
     43              data-dojo-attach-point="propertiesForm">
    4744            <label for="title">Title</label>
    48             <input data-dojo-type="dijit.form.TextBox" name="title"/><br/>
     45            <input data-dojo-type="dijit/form/TextBox" name="title"/><br/>
    4946            <label for="description">Description</label>
    50             <input data-dojo-type="dijit.form.Textarea" name="description"/><br/>
     47            <input data-dojo-type="dijit/form/Textarea" name="description"/><br/>
    5148        </form>
    5249           
    5350        <div>
    54             <button data-dojo-type="dijit.form.Button"
     51            <button data-dojo-type="dijit/form/Button"
    5552                    type="submit"
    56                     data-rft-attach-event="onClick:_onPropertiesOk">
     53                    data-dojo-attach-event="onClick:_onPropertiesOk">
    5754                OK</button>
    58             <button data-dojo-type="dijit.form.Button"
     55            <button data-dojo-type="dijit/form/Button"
    5956                    type="button"
    60                     data-rft-attach-event="onClick:_onPropertiesCancel">
     57                    data-dojo-attach-event="onClick:_onPropertiesCancel">
    6158                Cancel</button>
    6259        </div>
     60
    6361    </div>
    6462

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

    r402 r407  
    55    'dojo/_base/event',
    66    'dojo/_base/lang',
    7     '../content',
     7    '../app/Controller',
    88    '../store',
    9     '../ui/_Page',
     9    '../app/Page',
    1010    '../ui/lists/QuestionListView',
    11     '../ui/TabbedQuestionBrowser'
    12     ],
    13     function(array,declare,Deferred,event,lang,content,store,_Page,
    14              QuestionListView,TabbedQuestionBrowser){
    15         return declare('rft.pages.survey',[_Page],{
    16             survey: null,
    17             questionList: null,
    18             _dataMap: null,
    19             constructor: function(){
    20                 this._dataMap = {};
    21             },
    22             onVisit: function() {
    23                 if ( this.pageArgs.uid ) {
    24                     this._setupQuestionBrowser();
    25                     this._setupListView();
    26                     Deferred.when(store.get(this.pageArgs.uid))
    27                     .then(lang.hitch(this,function(obj){
    28                         this.survey = obj;
    29                         store.query(null,{keys:this.survey.questions,include_docs:true})
    30                         .forEach(lang.hitch(this.questionList,'appendItem'));
    31                         this.refresh();
    32                     }));
    33                 } else {
    34                     throw "No valid uid or survey passed!";
     11    '../ui/TabbedQuestionBrowser',
     12    'dojo/text!./survey.html'
     13],function(array,declare,Deferred,event,lang,Controller,store,Page,
     14         QuestionListView,TabbedQuestionBrowser,template){
     15    return declare([Page],{
     16        templateString: template,
     17        survey: null,
     18        questionList: null,
     19        _dataMap: null,
     20        constructor: function(){
     21            this._dataMap = {};
     22        },
     23        startup: function() {
     24            if ( this._started ) { return; }
     25            this.inherited(arguments);
     26            if ( this.surveyId ) {
     27                this._setupQuestionBrowser();
     28                this._setupListView();
     29                Deferred.when(store.get(this.surveyId))
     30                .then(lang.hitch(this,function(obj){
     31                    this.survey = obj;
     32                    store.query(null,{keys:this.survey.questions,include_docs:true})
     33                    .forEach(lang.hitch(this.questionList,'appendItem'));
     34                    this.refresh();
     35                }));
     36            } else {
     37                throw "No valid uid or survey passed!";
     38            }
     39        },
     40        _setupQuestionBrowser: function() {
     41            this.questionBrowser = new TabbedQuestionBrowser({
     42                region: 'center',
     43                'class': 'blue',
     44                selectedActions: {
     45                    "Include": {
     46                        callback: lang.hitch(this,this._includeQuestion),
     47                        icon: "Accept",
     48                        description: "Include in survey"
     49                    }
     50                },
     51                itemActions: {
     52                    "Info": {
     53                        callback: function(item){ item.description && alert(item.description); },
     54                        icon: "Inspect",
     55                        description: "Show item description"
     56                    }
    3557                }
    36             },
    37             _setupQuestionBrowser: function() {
    38                 this.questionBrowser = new TabbedQuestionBrowser({
    39                     region: 'center',
    40                     'class': 'blue',
    41                     selectedActions: {
    42                         "Include": {
    43                             callback: lang.hitch(this,this._includeQuestion),
    44                             icon: "Accept",
    45                             description: "Include in survey"
    46                         }
    47                     },
    48                     itemActions: {
    49                         "Info": {
    50                             callback: function(item){ item.description && alert(item.description); },
    51                             icon: "Inspect",
    52                             description: "Show item description"
    53                         }
    54                     }
    55                 },this.questionBrowser);
    56                 this.questionBrowser.startup();
    57             },
    58             _includeQuestion: function(question) {
    59                 this.questionList.insertItem(question);
    60             },
    61             _setupListView: function() {
    62                 this.questionList = new QuestionListView({
    63                     region: 'center'
    64                 },this.surveyListViewNode);
    65                 this.questionList.startup();
    66             },
    67             refresh: function() {
    68                 this.titleNode.innerHTML = this.survey.title || "(set title in properties)";
    69                 this.propertiesForm.set('value',this.survey);
    70             },
    71             _onShowProperties: function(evt) {
    72                 this.propertiesDialog.show();
    73             },
    74             _onPropertiesOk: function(evt) {
    75                 this.propertiesDialog.hide();
    76                 lang.mixin(this.survey, this.propertiesForm.get('value'));
    77                 this.refresh();
    78                 event.stop(evt);
    79                 return false;
    80             },
    81             _onPropertiesCancel: function(evt) {
    82                 this.propertiesDialog.hide();
    83                 this.propertiesForm.set('value',this.survey);
    84                 event.stop(evt);
    85                 return false;
    86             },
    87             _onSave: function(evt) {
    88                 this.survey.questions = array.map(this.questionList.getItems(),function(item){
    89                     return store.getIdentity(item);
    90                 });
    91                 store.put(this.survey)
    92                 .then(function() {
    93                     content.goTo('surveys');
    94                 });
    95                 event.stop(evt);
    96                 return false;
    97             },
    98             _onDiscard: function(evt) {
    99             },
    100             _onShowPreview: function() {
    101                 content.goTo('viewSurvey', {uid: store.getIdentity(this.survey)});
    102             }
    103         });
     58            },this.questionBrowser);
     59            this.questionBrowser.startup();
     60        },
     61        _includeQuestion: function(question) {
     62            this.questionList.insertItem(question);
     63        },
     64        _setupListView: function() {
     65            this.questionList = new QuestionListView({
     66                region: 'center'
     67            },this.surveyListViewNode);
     68            this.questionList.startup();
     69        },
     70        refresh: function() {
     71            this.titleNode.innerHTML = this.survey.title || "(set title in properties)";
     72            this.propertiesForm.set('value',this.survey);
     73        },
     74        _onShowProperties: function(evt) {
     75            this.propertiesDialog.show();
     76        },
     77        _onPropertiesOk: function(evt) {
     78            this.propertiesDialog.hide();
     79            lang.mixin(this.survey, this.propertiesForm.get('value'));
     80            this.refresh();
     81            event.stop(evt);
     82            return false;
     83        },
     84        _onPropertiesCancel: function(evt) {
     85            this.propertiesDialog.hide();
     86            this.propertiesForm.set('value',this.survey);
     87            event.stop(evt);
     88            return false;
     89        },
     90        _onSave: function(evt) {
     91            this.survey.questions = array.map(this.questionList.getItems(),function(item){
     92                return store.getIdentity(item);
     93            });
     94            store.put(this.survey)
     95            .then(function() {
     96                Controller.go('/surveys');
     97            });
     98            event.stop(evt);
     99            return false;
     100        },
     101        _onDiscard: function(evt) {
     102        },
     103        _onShowPreview: function() {
     104            Controller.go('/viewSurvey/'+store.getIdentity(this.survey));
     105        }
     106    });
    104107});
    105108

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

    r358 r407  
    1 <div data-dojo-type="rft.pages.surveys">
    2         <button data-dojo-type="dijit.form.Button" class="blue" data-dojo-props="disabled: true, baseClass: 'rftBlockButton', iconClass: 'rftIcon rftIconEdit'" data-rft-attach-point="btnEdit">Edit</button>
    3         <button data-dojo-type="dijit.form.Button" class="blue" data-dojo-props="baseClass: 'rftBlockButton', iconClass: 'rftIcon rftIconPlus'" data-rft-attach-point="btnNew">New</button>
    4         <div data-dojo-type="dojox.grid.DataGrid" data-dojo-props="autoWidth:true,autoHeight:true,structure:[{name:'Title',field:'title'}]"
    5         data-rft-attach-point="grid"></div>
     1<div>
     2    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'">
     3        <button data-dojo-type="dijit/form/Button" class="blue" data-dojo-props="disabled: true, baseClass: 'rftBlockButton', iconClass: 'rftIcon rftIconEdit'" data-dojo-attach-point="btnEdit">Edit</button>
     4        <button data-dojo-type="dijit/form/Button" class="blue" data-dojo-props="baseClass: 'rftBlockButton', iconClass: 'rftIcon rftIconPlus'" data-dojo-attach-point="btnNew">New</button>
     5        <div data-dojo-type="dojox/grid/DataGrid" data-dojo-props="autoWidth:true,autoHeight:true,structure:[{name:'Title',field:'title'}]" data-dojo-attach-point="grid"></div>
     6    </div>
    67</div>

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

    r358 r407  
    1 define(['dojo/_base/declare','dojo/_base/lang','dojo/_base/Deferred','dojo/data/ObjectStore','rft/auth','rft/store','rft/content','rft/ui/_Page'],
    2     function(declare,lang,Deferred,ObjectStore,auth,store,content,_Page){
    3         return declare('rft.pages.surveys',[_Page],{
    4             selectedObject: null,
    5             onVisit: function() {
    6                 this.grid.setStore(
    7                     ObjectStore({objectStore: store}),
    8                     "_design/default/_view/by_type",{key:'Survey'});
     1define([
     2    'dojo/_base/declare',
     3    'dojo/_base/lang',
     4    'dojo/_base/Deferred',
     5    'dojo/data/ObjectStore',
     6    '../auth',
     7    '../store',
     8    '../app/Controller',
     9    '../app/Page',
     10    'dojo/text!./surveys.html'
     11],function(declare,lang,Deferred,ObjectStore,auth,store,Controller,Page,template){
     12    return declare([Page],{
     13        templateString: template,
     14        selectedObject: null,
     15        startup: function() {
     16            if ( this._started ) { return; }
     17            this.inherited(arguments);
     18            this.grid.setStore(
     19                ObjectStore({objectStore: store}),
     20                "_design/default/_view/by_type",{key:'Survey'});
     21           
     22            this.grid.on('rowclick',lang.hitch(this,function(evt){
     23                this.selectedObject = evt.grid.getItem(evt.rowIndex);
     24                this.btnEdit.set('disabled',!this.selectedObject);
     25            }));
     26
     27            this.grid.on('rowdblclick',lang.hitch(this,function(evt){
     28                var obj = evt.grid.getItem(evt.rowIndex);
     29                Controller.go('/survey/'+store.getIdentity(obj));
     30            }));
     31           
     32            this.btnNew.on('click',lang.hitch(this,function(){
     33                Deferred.when( store.add({type:'Survey',creator:auth.getUser()}) )
     34                .then(function(obj) {
     35                    Controller.go('/survey/'+store.getIdentity(obj));
     36                });
     37            }));
     38
     39            this.btnEdit.on('click',lang.hitch(this,function(){
     40                if ( this.selectedObject ) {
     41                    Controller.go('/survey/'+store.getIdentity(this.selectedObject));
     42                }
    943               
    10                 this.grid.on('rowclick',lang.hitch(this,function(evt){
    11                     this.selectedObject = evt.grid.getItem(evt.rowIndex);
    12                     this.btnEdit.set('disabled',!this.selectedObject);
    13                 }));
    14 
    15                 this.grid.on('rowdblclick',lang.hitch(this,function(evt){
    16                     var obj = evt.grid.getItem(evt.rowIndex);
    17                     content.goTo('/survey',{uid:store.getIdentity(obj)});
    18                 }));
    19                
    20                 this.btnNew.on('click',lang.hitch(this,function(){
    21                     Deferred.when( store.add({type:'Survey',creator:auth.getUser()}) )
    22                     .then(function(obj) {
    23                         content.goTo('/survey',{uid:store.getIdentity(obj)});
    24                     });
    25                 }));
    26 
    27                 this.btnEdit.on('click',lang.hitch(this,function(){
    28                     if ( this.selectedObject ) {
    29                         content.goTo('/survey',{uid:store.getIdentity(this.selectedObject)});
    30                     }
    31                    
    32                 }));
    33             }
    34         });
     44            }));
     45        }
     46    });
    3547});
    3648

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

    r406 r407  
    1 <div data-dojo-type="rft.pages.viewSurvey" class="blue">
    2     <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'" style="height: 500px;">
     1<div class="blue">
    32
    4         <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
    5             <h2>
    6                 <span class="rftIcon rftIconSurvey"></span>
    7                 <span class="headerText" data-rft-attach-point="titleNode">Survey</span>
    8             </h2>
    9         </div>
    10        
    11         <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'" data-rft-attach-point="questionsPane">
    12             <form data-dojo-type="dijit.form.Form" data-rft-attach-point="questionsForm"
    13                   data-rft-attach-event="onSubmit:_onSubmit"
    14                   style="overflow: auto">
    15                 <div data-rft-attach-point="questionsAnchor"></div>
    16             </form>
    17         </div>
    18        
    19         <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
    20             <button data-dojo-type="dijit.form.Button"
    21                     type="submit"
    22                     data-rft-attach-event="onClick:_onSubmit">
    23                 Submit</button>
    24             <button data-dojo-type="dijit.form.Button"
    25                     type="button"
    26                     data-rft-attach-event="onClick:_onCancel">
    27                 Cancel</button>
    28         </div>
     3    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
     4        <h2>
     5            <span class="rftIcon rftIconSurvey"></span>
     6            <span class="headerText" data-dojo-attach-point="titleNode">Survey</span>
     7        </h2>
     8    </div>
     9   
     10    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" data-dojo-attach-point="questionsPane">
     11        <form data-dojo-type="dijit/form/Form" data-dojo-attach-point="questionsForm"
     12              data-dojo-attach-event="onSubmit:_onSubmit"
     13              style="overflow: auto">
     14            <div data-dojo-attach-point="questionsAnchor"></div>
     15        </form>
     16    </div>
     17   
     18    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'">
     19        <button data-dojo-type="dijit/form/Button"
     20                type="submit"
     21                data-dojo-attach-event="onClick:_onSubmit">
     22            Submit</button>
     23        <button data-dojo-type="dijit/form/Button"
     24                type="button"
     25                data-dojo-attach-event="onClick:_onCancel">
     26            Cancel</button>
     27    </div>
    2928
    30     </div>
    3129</div>

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

    r406 r407  
    66    'dojo/_base/lang',
    77    '../store',
    8     '../ui/_Page',
    9     '../ui/content/ContentWidgetFactory'
    10     ],
    11     function(array,declare,Deferred,event,lang,store,_Page,ContentWidgetFactory){
    12         return declare('rft.pages.viewSurvey',[_Page],{
    13             survey: null,
    14             constructor: function(){
    15                 this._dataMap = {};
    16             },
    17             onVisit: function() {
    18                 if ( this.pageArgs.uid ) {
    19                     Deferred.when(store.get(this.pageArgs.uid))
    20                     .then(lang.hitch(this,function(obj){
    21                         var f = new ContentWidgetFactory();
    22                         this.survey = obj;
    23                         store.query(null,{keys:this.survey.questions,include_docs:true})
    24                         .forEach(function(question){
    25                             array.forEach(question.content || [],function(item){
    26                                 var w = f.createViewWidget(item,{
    27                                     name: question.code+'.'+item.code
    28                                 });
    29                                 if ( w !== null ) {
    30                                     w.placeAt(this.questionsAnchor,'before');
    31                                 }
    32                             },this);
     8    '../app/Page',
     9    '../ui/content/ContentWidgetFactory',
     10    'dojo/text!./viewSurvey.html'
     11],function(array,declare,Deferred,event,lang,store,Page,ContentWidgetFactory,template){
     12    return declare([Page],{
     13        templateString: template,
     14        survey: null,
     15        constructor: function(){
     16            this._dataMap = {};
     17        },
     18        startup: function() {
     19            if ( this._started ) { return; }
     20            this.inherited(arguments);
     21            if ( this.surveyId ) {
     22                Deferred.when(store.get(this.surveyId))
     23                .then(lang.hitch(this,function(obj){
     24                    var f = new ContentWidgetFactory();
     25                    this.survey = obj;
     26                    store.query(null,{keys:this.survey.questions,include_docs:true})
     27                    .forEach(function(question){
     28                        array.forEach(question.content || [],function(item){
     29                            var w = f.createViewWidget(item,{
     30                                name: question.code+'.'+item.code
     31                            });
     32                            if ( w !== null ) {
     33                                w.placeAt(this.questionsAnchor,'before');
     34                            }
    3335                        },this);
    34                     }));
    35                 } else {
    36                     throw "No valid uid or survey passed!";
    37                 }
    38             },
    39             _onSubmit: function(evt) {
    40                 var value = this.questionsForm.get('value');
    41                 this.questionsPane.set('content','<pre>'+JSON.stringify(value)+'</pre>');
    42                 event.stop(evt);
    43                 return false;
    44             },
    45             _onCancel: function(evt) {
    46                 event.stop(evt);
    47                 return false;
     36                    },this);
     37                }));
     38            } else {
     39                throw "No valid uid or survey passed!";
    4840            }
    49         });
     41        },
     42        _onSubmit: function(evt) {
     43            var value = this.questionsForm.get('value');
     44            this.questionsPane.set('content','<pre>'+JSON.stringify(value)+'</pre>');
     45            event.stop(evt);
     46            return false;
     47        },
     48        _onCancel: function(evt) {
     49            event.stop(evt);
     50            return false;
     51        }
     52    });
    5053});
    51 
Note: See TracChangeset for help on using the changeset viewer.