source: Dev/branches/rest-dojo-ui/client/mockup.html @ 331

Last change on this file since 331 was 331, checked in by tjcschipper, 13 years ago
  • Added two custom Button classes inheriting from dijit/form/Button. These automatically set CSS classes to properly style these buttons. Both classes take an iconType property (to set icon, null if no icon) and highlightColor property (to set the base/highlight color for the button).

-Proper styling for these classes and the rest of the mockup depends on the dijit/themes/gamelab folder and dijit/icons folder. These are marked as external references, so cannot be committed at this time.
File size: 7.9 KB
Line 
1<!DOCTYPE html>
2<html>
3    <head>
4        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5        <title>Research Facilitator Tool</title>
6        <link rel="stylesheet" type="text/css" href="dojotoolkit/dijit/themes/gamelab/gamelab.css" />
7        <link rel="stylesheet" type="text/css" href="dojotoolkit/dojox/grid/resources/Grid.css" />
8        <link rel="stylesheet" type="text/css" href="dojotoolkit/dojox/grid/resources/claroGrid.css" />
9        <link rel="stylesheet" type="text/css" href="dojotoolkit/dojox/widget/Toaster/Toaster.css" />
10        <link rel="stylesheet" type="text/css" href="rft/css/main.css" />
11        <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">
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                'rft/ui/LargeButton',
44                'rft/ui/BlockButton',
45                'dojo/domReady!'
46            ],function(parser){
47                parser.parse();
48            });
49        </script>
50
51    </head>
52    <body class="dijitReset gamelab">
53        <div class="header">
54            <div class="mainLogo">Research Tool</div>
55
56            <div data-dojo-type="dijit.MenuBar" class="mainMenu">
57                <div data-dojo-type="dijit.MenuBarItem" >Sessions</div>
58                <div data-dojo-type="dijit.MenuBarItem" >Content</div>
59                <div data-dojo-type="dijit.MenuBarItem" >Results</div>
60                <div data-dojo-type="dijit.MenuBarItem" >Log out</div>
61            </div>
62            <div class="breadcrumbs">
63                <span class="breadcrumb">Home > </span>
64                <span class="breadcrumb">Sessions > </span>
65                <span class="breadcrumb">Session A > </span>
66                <span class="breadcrumb breadcrumbCurrent">Survey 123 [Editing]</span>
67            </div>
68        </div>
69        <div class="content" data-dojo-type="dijit.layout.ContentPane">
70            <div class="title">
71                <div class="rftIcon rftMainIcon rftMainIconSurvey"></div><h2 class="titleText">Survey 123 [Editing]</h2>
72            </div>
73            <div data-dojo-type="dijit.layout.BorderContainer" style="height: 500px;">
74                <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'">
75                    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
76                        <span>Load preset</span>
77                        <select data-dojo-type="dijit.form.ComboBox">
78                            <option>Preset A</option>
79                            <option>Preset B</option>
80                        </select>
81                    </div>
82                    <div data-dojo-type="dijit.layout.TabContainer" data-dojo-props="region:'center',tabPosition:'left-h'">
83                        <div title="Emotional, moral and relational attitudes" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Emotional, moral and relational attitudes'"></div>
84                        <div title="The professional as a participant" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="selected:true">
85                            <div data-dojo-type="rft.ui.Selector" class="survey" data-dojo-props="title:'Intrinsic motivation'"></div>
86                            <div data-dojo-type="rft.ui.Selector" class="survey" data-dojo-props="title:'Extrinsic motivation'"></div>
87                            <div data-dojo-type="rft.ui.Selector" class="survey" data-dojo-props="title:'Motivation to participate'"></div>
88                            <div data-dojo-type="rft.ui.Selector" class="survey" data-dojo-props="title:'Experience with games'"></div>
89                            <div data-dojo-type="rft.ui.Selector" class="survey" data-dojo-props="title:'Participant context'"></div>
90                        </div>
91                        <div title="Declarative, procedural and stragegic knowledge" data-dojo-type="dijit.layout.ContentPane"></div>
92                        <div title="Motoric, cognitive and social skills" data-dojo-type="dijit.layout.ContentPane"></div>
93                        <div title="Scientific, competitive and commercial acchievements" data-dojo-type="dijit.layout.ContentPane"></div>
94                    </div>
95                    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
96                        <div>Legend</div>
97                        <div>Selected question is included in survey.</div>
98                        <div>Selected question is not yet in survey. These van be included in the survey.</div>
99                        <div>Selected question conflicts with an included question. You can only swap these.</div>
100                        --BUTTON TESTS--
101                        <button data-dojo-type="rft.ui.LargeButton" data-dojo-props="iconType: 'Save'">Save</button>
102                        <button data-dojo-type="rft.ui.LargeButton" data-dojo-props="iconType: 'Cancel'">Cancel</button>
103                        <button data-dojo-type="rft.ui.BlockButton" data-dojo-props="highlightColor: 'Orange', iconType: null">Add to survey</button>
104                    </div>
105                </div>
106                <div title="Included questions" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'right',splitter:true">
107                    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
108                        <span>Included questions</span>
109                        <div data-dojo-type="rft.ui.List">
110                            <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>
111                            <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>
112                            <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>
113                        </div>
114                    </div>
115                    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
116                        Nothing here! yet....
117
118                        //sooooooon......
119
120                    </div>
121                </div>
122            </div>
123        </div>
124    </body>
125</html>
Note: See TracBrowser for help on using the repository browser.