Context Navigation

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

Rev	Line
[256]	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>
[319]	6	<link rel="stylesheet" type="text/css" href="dojotoolkit/dijit/themes/gamelab/gamelab.css" />
[311]	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" />
[281]	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>
[316]	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',
[331]	43	'rft/ui/LargeButton',
	44	'rft/ui/BlockButton',
[316]	45	'dojo/domReady!'
	46	],function(parser){
	47	parser.parse();
	48	});
	49	</script>
[319]	50
[256]	51	</head>
[319]	52	<body class="dijitReset gamelab">
[316]	53	<div class="header">
[319]	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>
[256]	61	</div>
[319]	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>
[256]	68	</div>
[316]	69	<div class="content" data-dojo-type="dijit.layout.ContentPane">
	70	<div class="title">
[331]	71	<div class="rftIcon rftMainIcon rftMainIconSurvey"></div><h2 class="titleText">Survey 123 [Editing]</h2>
[316]	72	</div>
[331]	73	<div data-dojo-type="dijit.layout.BorderContainer" style="height: 500px;">
[316]	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">
[331]	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>
[316]	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>
[331]	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>
[316]	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 "serious games" 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'">
[331]	116	Nothing here! yet....
	117
	118	//sooooooon......
	119
[316]	120	</div>
	121	</div>
	122	</div>
[256]	123	</div>
	124	</body>
	125	</html>

Note: See TracBrowser for help on using the repository browser.

Download in other formats: