Changeset 316


Ignore:
Timestamp:
03/23/12 17:26:55 (13 years ago)
Author:
hendrikvanantwerpen
Message:

Mockup included.

Location:
Dev/branches/rest-dojo-ui/client
Files:
4 added
6 edited
1 copied

Legend:

Unmodified
Added
Removed

  • Dev/branches/rest-dojo-ui/client/mockup.html

    r315 r316  
    1010        <link rel="stylesheet" type="text/css" href="rft/css/main.css" />
    1111        <script type="text/javascript" src="dojotoolkit/dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: false, tlmSiblingOfDojo: false, isDebug: true, baseUrl: '', packagePaths: {'dojotoolkit':['dojo','dijit', 'dojox'], '.':['rft']}"></script>
    12         <script type="text/javascript" src="rft/run.js"></script>
     12        <script type="text/javascript">
     13            require([
     14                'dojo/parser',
     15                'dijit/DropDownMenu',
     16                'dijit/layout/AccordionContainer',
     17                'dijit/layout/BorderContainer',
     18                'dijit/layout/ContentPane',
     19                'dijit/layout/TabContainer',
     20                'dijit/layout/SplitContainer',
     21                'dijit/MenuBar',
     22                'dijit/MenuBarItem',
     23                'dijit/form/Button',
     24                'dijit/form/ComboBox',
     25                'dijit/form/Form',
     26                'dijit/form/Select',
     27                'dijit/form/SimpleTextarea',
     28                'dijit/form/TextBox',
     29                'dijit/form/Textarea',
     30                'dijit/PopupMenuBarItem',
     31                'dijit/TitlePane',
     32                'dojox/grid/DataGrid',
     33                'dojox/widget/TitleGroup',
     34                'rft/ui/List',
     35                'rft/ui/MainMenu',
     36                'rft/ui/MenuBarLink',
     37                'rft/ui/MenuLink',
     38                'rft/ui/Notifications',
     39                'rft/ui/LineWithActionsWidget',
     40                'rft/ui/QuestionWidget',
     41                'rft/ui/Selector',
     42                'rft/ui/TitleGroup',
     43                'dojo/domReady!'
     44            ],function(parser){
     45                parser.parse();
     46            });
     47        </script>
     48        <style>
     49            .dijitTab {
     50                width: 120px;
     51                white-space: normal;
     52            }
     53
     54            .rftLineWithButtons {
     55                display: table;
     56                width: 100%;
     57                border: 1px gray solid;
     58                margin: 2px;
     59            }
     60            .rftLineWithButtons.includedQuestion {
     61                background-color: lightgreen;
     62            }
     63            .rftLineWithButtons.conflictedQuestion {
     64                background-color: lightcoral;
     65            }
     66            .rftLineWithButtons.dijitSelected {
     67                background-color: lightblue;
     68            }
     69            .rftLineWithButtonsTitle {
     70                display: table-cell;
     71                padding-left: 4px;
     72            }
     73            .rftLineWithButtonsButtons {
     74                display: table-cell;
     75                text-align: right;
     76            }
     77        </style>
    1378    </head>
    14     <body class="claro">
    15         <div id="header" class="mainHeader">
    16             <div id="menu" class="mainMenu"  data-dojo-type="rft.ui.MainMenu">
     79    <body class="dijitReset claro">
     80        <div class="header">
     81            <div data-dojo-type="dijit.MenuBar">
     82                <div data-dojo-type="dijit.MenuBarItem">Research tool</div>
     83                <div data-dojo-type="dijit.MenuBarItem">Sessions</div>
     84                <div data-dojo-type="dijit.MenuBarItem">Content</div>
     85                <div data-dojo-type="dijit.MenuBarItem">Results</div>
     86                <div data-dojo-type="dijit.MenuBarItem">Log out</div>
    1787            </div>
     88            <div class="breadcrumbs">Home > Sessions > Session A > Survey 123 [Editing]</div>
    1889        </div>
    19         <div id="content" data-dojo-type="dijit.layout.ContentPane" style="width: 100%; height: 100%;">
    20         </div>
    21         <div id="toaster" data-dojo-type="rft.ui.Notifications">
     90        <div class="content" data-dojo-type="dijit.layout.ContentPane">
     91            <div class="title">
     92                <span class="titleIcon"></span><span class="titleText">Survey 123 [Editing]</span>
     93            </div>
     94            <div data-dojo-type="dijit.layout.BorderContainer" style="width: 100%; height: 500px;">
     95                <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'">
     96                    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
     97                        <span>Load preset</span>
     98                        <select data-dojo-type="dijit.form.ComboBox">
     99                            <option>Preset A</option>
     100                            <option>Preset B</option>
     101                        </select>
     102                    </div>
     103                    <div data-dojo-type="dijit.layout.TabContainer" data-dojo-props="region:'center',tabPosition:'left-h'">
     104                        <div title="Emotional, moral and relational attitudes" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Emotional, moral and relational attitudes'"></div>
     105                        <div title="The professional as a participant" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="selected:true">
     106                            <div data-dojo-type="rft.ui.Selector" data-dojo-props="title:'Intrinsic motivation'"></div>
     107                            <div data-dojo-type="rft.ui.Selector" data-dojo-props="title:'Extrinsic motivation'"></div>
     108                            <div data-dojo-type="rft.ui.Selector" data-dojo-props="title:'Motivation to participate'"></div>
     109                            <div data-dojo-type="rft.ui.Selector" data-dojo-props="title:'Experience with games'"></div>
     110                            <div data-dojo-type="rft.ui.Selector" data-dojo-props="title:'Participant context'"></div>
     111                        </div>
     112                        <div title="Declarative, procedural and stragegic knowledge" data-dojo-type="dijit.layout.ContentPane"></div>
     113                        <div title="Motoric, cognitive and social skills" data-dojo-type="dijit.layout.ContentPane"></div>
     114                        <div title="Scientific, competitive and commercial acchievements" data-dojo-type="dijit.layout.ContentPane"></div>
     115                    </div>
     116                    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
     117                        <div>Legend</div>
     118                        <div>Selected question is included in survey.</div>
     119                        <div>Selected question is not yet in survey. These van be included in the survey.</div>
     120                        <div>Selected question conflicts with an included question. You can only swap these.</div>
     121                    </div>
     122                </div>
     123                <div title="Included questions" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'right',splitter:true">
     124                    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
     125                        <span>Included questions</span>
     126                        <div data-dojo-type="rft.ui.List">
     127                            <div class="includedQuestion" data-dojo-type="rft.ui.LineWithActionsWidget" data-dojo-props="title:'Why are you participating in this session?',actions:{'+':function(){ alert('Bah!'); }},onClick:function(evt){ alert('Buh!'); return false; }"></div>
     128                            <div class="conflictedQuestion" data-dojo-type="rft.ui.LineWithActionsWidget" data-dojo-props="title:'Is this a long-term goal or immediate?',actions:{'+':function(){ alert('Bah!'); }},onClick:function(evt){ alert('Buh!'); return false; }"></div>
     129                            <div class="includedQuestion" data-dojo-type="rft.ui.LineWithActionsWidget" data-dojo-props="title:'Have you played &quot;serious games&quot; before?',actions:{'+':function(){ alert('Bah!'); }},onClick:function(evt){ alert('Buh!'); return false; }"></div>
     130                        </div>
     131                    </div>
     132                    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
     133                        <button data-dojo-type="dijit.form.Button" data-dojo-props="iconClass:'dijitIconConfigure'">Properties</button>
     134                        <button data-dojo-type="dijit.form.Button" data-dojo-props="iconClass:'dijitIconSample'">Preview</button>
     135                        <button data-dojo-type="dijit.form.Button" data-dojo-props="iconClass:'dijitIconUndo'">Discard</button>
     136                        <button data-dojo-type="dijit.form.Button" data-dojo-props="iconClass:'dijitIconSave'">Save</button>
     137                    </div>
     138                </div>
     139            </div>
    22140        </div>
    23141    </body>

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

    r305 r316  
    1010                this._store = store.getStore('Question');
    1111                this._list = new AccordionList({
    12                     store: this._store,
    1312                    actions: {
    1413                        'Edit': lang.hitch(this,'_editQuestion')
    1514                    },
     15                    idProperty: this._store.idProperty,
    1616                    categoryProperty: 'category',
    1717                    titleProperty: 'title'
    … …  
    2121            },
    2222            _refresh: function() {
    23                 this._list.refresh();
     23                Deferred.when(this._store.query())
     24                .then(lang.hitch(this,function(items){
     25                    this._list.setItems(items);
     26                }));
    2427            },
    2528            onNewQuestion: function() {

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

    r303 r316  
    11<div data-dojo-type="rft.pages.survey">
    22    <h1 data-rft-attach-point="header">(default)</h1>
    3     <div>Created by <span data-rft-attach-point="creator"></span><div>
     3    <div>Created by <span data-rft-attach-point="creator"></span></div>
    44    <form data-dojo-type="dijit.form.Form" data-rft-attach-point="form" data-rft-attach-event="onSubmit:onSave">
    55        <div style="display: block; clear: both;">
    … …  
    1111        <label for="description" class="loginLabel">Description</label>
    1212        <textarea name="description" data-dojo-type="dijit.form.SimpleTextarea" class="loginInput"></textarea>
     13        <div>
     14            <div style="width: 45%; float: left; clear: left;"><div data-rft-attach-point="allQuestions"></div></div>
     15            <div style="width: 45%; float: left;"><div data-rft-attach-point="surveyQuestions"></div></div>
     16        </div>
    1317    </form>
    1418</div>

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

    r311 r316  
    1 define(['dojo/_base/declare','dojo/_base/lang','dojo/_base/event','dojo/_base/Deferred','rft/store','rft/ui/_Page','rft/api'],
    2     function(declare,lang,event,Deferred,store,_Page,api){
     1define(['dojo/_base/declare','dojo/_base/lang','dojo/_base/event',
     2    'dojo/_base/Deferred','rft/ui/AccordionList','rft/ui/LineWithActionsWidget',
     3    'rft/store','rft/ui/_Page','rft/api'],
     4    function(declare,lang,event,Deferred,AccordionList,LineWithActionsWidget,store,_Page,api){
    35        return declare('rft.pages.survey',[_Page],{
    46            object: null,
    57            postCreate: function() {
    68                this.inherited(arguments);
    7                 this._store = store.getStore('Survey');
     9                this._surveyStore = store.getStore('Survey');
     10                this._questionStore = store.getStore('Question');
    811            },
    912            onVisit: function() {
    1013                if ( this.pageArgs.uid ) {
    11                     Deferred.when(this._store.get(this.pageArgs.uid))
     14                    Deferred.when(this._surveyStore.get(this.pageArgs.uid))
    1215                    .then(lang.hitch(this,function(obj){
    1316                        this.object = obj;
    … …  
    1720                    .then(lang.hitch(this,function(obj){
    1821                        this.creator.innerHTML = (obj && obj.email) || 'unknown';
     22                    }));
     23                    Deferred.when(this._questionStore.query())
     24                    .then(lang.hitch(this,function(items){
     25                        this._questionList = new AccordionList({
     26                            store: this._surveyStore,
     27                            actions: {
     28                                'Add': lang.hitch(this,'_addQuestion')
     29                            },
     30                            idProperty: this._questionStore.idProperty,
     31                            categoryProperty: 'category',
     32                            titleProperty: 'title'
     33                        },this.allQuestions);
     34                        this._questionList.startup();
     35                        this._questionList.setItems(items);
    1936                    }));
    2037                } else {
    … …  
    4259                this.header.innerHTML = "Edit survey '"+(obj.title || '(undefined)')+"'";
    4360                obj && this.form.set('value',obj);
     61            },
     62            _addQuestion: function(obj) {
     63                var d = {};
     64                d.widget = new LineWithActionsWidget({
     65                    title:obj.title,
     66                    userObj: obj,
     67                    actions:{
     68                        "Remove": lang.hitch(this,'_removeQuestion',d)
     69                    }
     70                });
     71                d.widget.placeAt(this.surveyQuestions);
     72            },
     73            _removeQuestion: function(data,obj) {
     74                data.widget.destroy();
    4475            }
    4576        });

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

    r311 r316  
    99        return declare('rft.ui.AccordionList',[_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin],{
    1010            templateString: template,
    11             store: null,
    1211            idProperty: null,
    1312            categoryProperty: null,
    … …  
    1817                this._widgets = {};
    1918            },
    20             postCreate: function() {
    21                 this.idProperty = this.idProperty || this.store.idProperty;
    22                 this.refresh(true);
    23             },
    24             refresh: function(initial) {
    25                 Deferred.when( this.store.query() )
    26                 .then(lang.hitch(this,'_addItems',initial));
    27             },
    28             _addItems: function(initial,items) {
    29                 var newWidgets = {};
    30                 array.forEach(this._widgets,domConstruct.destroy); // get everything out of the dom
    31                 array.forEach(items,lang.hitch(this,function(item){
    32                     var widget = this._getWidgetForItem(item);
    33                     var id = this._getItemProperty(this.idProperty,item);
    34                     var container = this._getContainerForItem(item);
    35                     widget.placeAt(container.containerNode);
    36                     newWidgets[id] = widget;
    37                 }));
    38                 var oldWidgets = array.filter(this.items,function(widget){
    39                     return array.indexOf(newWidgets,widget) < 0;
     19            setItems: function(items) {
     20                var obsoleteWidgets = array.filter(this.widgets,function(item){
     21                    return array.indexOf(items,item) < 0;
    4022                });
    41                 array.forEach(oldWidgets,function(widget){
     23                array.forEach(obsoleteWidgets,function(widget){
    4224                    widget.destroy();
    4325                });
    44                 this._widgets = newWidgets; // overwrite, releasing any non-existing items
    45                 initial && this.accordion.selectChild(true);
     26                array.forEach(this._widgets,domConstruct.destroy); // get everything out of the dom
     27                array.forEach(items,lang.hitch(this,"_addItem"));
    4628                this._cleanupEmptyContainers();
     29            },
     30            addItems: function(items) {
     31                array.forEach(items,lang.hitch(this,"_addItem"));
     32                this._cleanupEmptyContainers();
     33            },
     34            addItem: function(item) {
     35                this._addItem(item);
     36                this._cleanupEmptyContainers();
     37            },
     38            _addItem: function(item) {
     39                var widget = this._getWidgetForItem(item);
     40                var container = this._getContainerForItem(item);
     41                widget.placeAt(container.containerNode);
     42            },
     43            removeItem: function(item) {
     44                var id = this._getItemProperty(this.idProperty,item);
     45                var widget = this._getWidgetForItem(item);
     46                widget && widget.destroy();
     47                delete this._widgets[id];
    4748            },
    4849            _getWidgetForItem: function(item) {

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

    r288 r316  
    1 define(['dojo/_base/declare','dojo/_base/lang','dijit/form/Button',
     1define(['dojo/_base/declare','dojo/_base/lang','dojo/on','dojo/dom','dijit/form/Button',
    22    'dijit/_WidgetBase','dijit/_TemplatedMixin','dijit/_WidgetsInTemplateMixin',
    33    'dojo/text!./templates/LineWithActionsWidget.html'],
    4     function(declare,lang,Button,_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,templateString){
     4    function(declare,lang,on,dom,Button,_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,templateString){
    55        return declare('rft.ui.LineWithActionsWidget',[_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin],{
    66            templateString: templateString,
     7            baseClass: 'rftLineWithButtons',
    78            title: '',
    89            userObject: null,
    910            actions: {},
     11            postCreate: function() {
     12                dom.setSelectable(this.domNode, false);
     13                on(this.titleNode,'click',lang.hitch(this,'_onClick'));
     14            },
    1015            startup: function() {
    1116                this.inherited(arguments);
    … …  
    1722                    new Button({
    1823                        label: action,
     24                        //iconClass: 'dijitIconSearch',
     25                        //showLabel: false,
    1926                        onClick: lang.hitch(this,function(){
    2027                            this.actions[action](this.userObject);
    2128                        })
    22                     }).placeAt(this.actionBar);
     29                    }).placeAt(this.buttonsNode);
    2330                }
    2431            },
    2532            refresh: function() {
    2633                this.titleNode.innerHTML = this.title;
    27             }
     34            },
     35            _onClick: function(e){
     36                var preventDefault = this.onClick(e) === false;
     37                if(preventDefault){
     38                    e.preventDefault();
     39                }
     40                return !preventDefault;
     41            },
     42            onClick: function(e) {}
    2843        });
    2944    });

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

    r288 r316  
    1 <div>
    2     <span data-dojo-attach-point="actionBar"></span>
    3     <span data-dojo-attach-point="titleNode"></span>
     1<div class="${baseClass}">
     2    <span class="${baseClass}Title" data-dojo-attach-point="titleNode"></span>
     3    <span class="${baseClass}Buttons" data-dojo-attach-point="buttonsNode"></span>
    44</div>
Note: See TracChangeset for help on using the changeset viewer.