Context Navigation

demo.html

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago
Added Dojo 1.9.3 release.
File size: 11.2 KB

Line
1	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2	<html>
3	<head>
4	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
5	<meta name="apple-mobile-web-app-capable" content="yes" />
6	<title>Mobile MVC</title>
7	<link rel="stylesheet" type="text/css" href="demo.css"/>
8	<style>
9	html, body{
10	height: 100%;
11	overflow: hidden;
12	}
13	.mblEdgeToEdgeList {
14	background-color: #DBDDE2;
15	}
16	</style>
17	<script type="text/javascript" data-dojo-config="parseOnLoad:0,isDebug:1,async:1, mvc: {debugBindings: 1}" src="../../../../../dojo/dojo.js"></script>
18	<script type="text/javascript" src="src.js" charset="utf-8"></script>
19	</head>
20	<body>
21	<div id="wholepage" style="display:none">
22	<div id="foo" data-dojo-type="dojox/mobile/View" data-dojo-props="selected:'true'">
23	<h1 data-dojo-type="dojox/mobile/Heading">Mobile MVC Demo</h1>
24	<ul data-dojo-type="dojox/mobile/RoundRectList">
25	<li id="sdb" data-dojo-type="dojox/mobile/ListItem" data-dojo-props="transition: 'slide', moveTo: 'settings'">
26	Simple Data Binding
27	</li>
28	<li id="rdb" data-dojo-type="dojox/mobile/ListItem" data-dojo-props="transition: 'slide', moveTo: 'repeat'">
29	WidgetList Data Binding
30	</li>
31	<li id="sfg" data-dojo-type="dojox/mobile/ListItem" data-dojo-props="transition: 'slide', moveTo: 'generate'">
32	Generate Simple Form
33	</li>
34	</ul>
35	</div>
36	<span data-dojo-id="nameCtl"
37	data-dojo-type="dojox/mvc/tests/mobile/demo/MobileDemoContactController"
38	data-dojo-props="sourceModel: require('dojox/mvc/tests/mobile/demo/MobileDemoContactModel'),
39	cursorIndex: 'ShipTo'"></span>
40	<div id="settings" data-dojo-type="dojox/mobile/ScrollableView">
41	<h1 id="home" data-dojo-type="dojox/mobile/Heading" data-dojo-props="back: 'Back', moveTo: 'foo'">Data Binding Example</h1>
42	<form name="testForm" id="testForm">
43	<div class="field-title">Ship to - Bill to Address</div>
44	<div class="fieldset"
45	data-dojo-type="dojox/mvc/Group"
46	data-dojo-props="target: at(nameCtl, 'model')">
47	<table id="table" cellspacing="10" style="width: 100%">
48	<tr>
49	<td style="width: 100px;" class="layout">First</td>
50	<td class="layout">
51	<input id="firstInput1" data-dojo-type="dojox/mobile/TextBox"
52	data-dojo-props="value: at('rel:', 'First'), placeholder: 'First'">
53	</td>
54	</tr>
55	<tr>
56	<td style="width: 100px;" class="layout">Last Name</td>
57	<td class="layout">
58	<input id="lastInput1" data-dojo-type="dojox/mobile/TextBox"
59
60	data-dojo-props="placeholder: 'Last Name', value: at('rel:', 'Last')">
61	</td>
62	</tr>
63	<tr>
64	<td style="width: 100px;" class="layout">Email</td>
65	<td class="layout">
66	<input id="emailInput1" data-dojo-type="dojox/mobile/TextBox"
67	data-dojo-props="value: at('rel:', 'Email'), placeholder: 'Email'">
68	</td>
69	</tr>
70	</table>
71	<div class="spacer"></div>
72	<button id="shipto" type="button" class="mblBlueButton"
73	data-dojo-type="dojox/mobile/Button"
74	onclick="nameCtl.set('cursorIndex', 'ShipTo');">Ship To</button>
75	<button id="billto" type="button" class="mblBlueButton"
76	data-dojo-type="dojox/mobile/Button"
77	onclick="nameCtl.set('cursorIndex', 'BillTo');">Bill To</button>
78	<br/>
79	<div class="fieldset" id="addrGroup"
80	data-dojo-type="dojox/mvc/Group"
81	data-dojo-props="target: at(nameCtl, 'cursor')">
82	<table id="table" cellspacing="10" style="width: 100%">
83	<tr>
84	<td style="width: 100px;" class="layout">Street</td>
85	<td class="layout">
86	<input id="streetInput" data-dojo-type="dojox/mobile/TextBox"
87	data-dojo-props="value: at('rel:', 'Street'), placeholder: 'Street'">
88	</td>
89	</tr>
90	<tr>
91	<td style="width: 100px;" class="layout">City</td>
92	<td class="layout">
93	<input id="cityInput" data-dojo-type="dojox/mobile/TextBox"
94
95	data-dojo-props="placeholder: 'City', value: at('rel:', 'City')">
96	</td>
97	</tr>
98	<tr>
99	<td style="width: 100px;" class="layout">State</td>
100	<td class="layout">
101	<input id="StateInput" data-dojo-type="dojox/mobile/TextBox"
102	data-dojo-props="value: at('rel:', 'State'), placeholder: 'State'">
103	</td>
104	</tr>
105	<tr>
106	<td style="width: 100px;" class="layout">State</td>
107	<td class="layout">
108	<input id="ZipInput" data-dojo-type="dojox/mobile/TextBox"
109	data-dojo-props="value: at('rel:', 'Zip'), placeholder: 'Zip Code'">
110	</td>
111	</tr>
112	</table>
113	</div>
114	</div> <!-- end of outer group -->
115	<div class="spacer"></div>
116	<button id="reset1" type="button" data-dojo-type="dojox/mobile/Button" class="mblBlueButton" onclick="nameCtl.reset();">Reset</button>
117	</form>
118	</div>
119	<span data-dojo-id="listCtl"
120	data-dojo-type="dojox/mvc/tests/mobile/demo/MobileDemoContactListController"
121	data-dojo-props="model: require('dojox/mvc/tests/mobile/demo/MobileDemoContactListModel'),
122	summaryScrollableViewId: 'repeat',
123	detailScrollableViewId: 'repeatdetails',
124	initialFocusElementId: 'firstInput'"></span>
125	<div id="repeat" data-dojo-type="dojox/mobile/ScrollableView">
126	<h1 data-dojo-type="dojox/mobile/Heading"
127	data-dojo-props="back: 'Back', moveTo: 'foo'">
128	WidgetList Data
129	<span id="addbutton" data-dojo-type="dojox/mobile/ToolBarButton"
130	data-dojo-props="icon: 'mblDomButtonWhitePlus',
131	onClick: function(){ listCtl.addEmpty(); }"
132	style="float:right;"></span>
133	</h1>
134	<ul id="listItems"
135	data-dojo-type="dojox/mobile/RoundRectList"
136	data-dojo-mixins="dojox/mvc/WidgetList,dojox/mvc/_InlineTemplateMixin"
137	data-dojo-props="children: at(listCtl, 'model')"
138	data-mvc-child-type="dojox/mvc/Templated"
139	data-mvc-child-mixins="dojox/mobile/ListItem"
140	data-mvc-child-props="moveTo: 'repeatdetails',
141	uniqueId: at(this.target, 'uniqueId'),
142	transitionOptions: {title: 'Detail', target: 'details,detail'},
143	clickable: 'true',
144	callback: function(){ listCtl.setDetailsContext(this.uniqueId); }">
145	<script type="dojox/mvc/InlineTemplate">
146	<li data-dojo-type="dojox/mobile/ListItem"
147	<table>
148	<tr>
149	<td>
150	<div data-dojo-type="dojox/mobile/ToolBarButton"
151	data-dojo-props="icon: 'mblDomButtonRedCircleMinus',
152	onClick: function(){ listCtl.remove(this.uniqueId); return false; },
153	uniqueId: at('rel:', 'uniqueId')"
154	style="float: left; color: white; background-color: transparent; background-image: none; border: none; margin-top: 0px;"></div>
155	</td>
156	</tr>
157	</table>
158	<div class="mblListItemLabel" style="display: block;" data-dojo-type="dojox/mvc/Output" data-dojo-props="value: at('rel:', 'First')"></div>
159	</li>
160	</script>
161	</ul>
162	</div>
163	<div id="repeatdetails" data-dojo-type="dojox/mobile/ScrollableView">
164	<h1 id="detailsHeading" data-dojo-type="dojox/mobile/Heading" data-dojo-props="label: 'Details'" data-app-region="top">
165	<div id="detail_back" data-dojo-type="dojox/mobile/ToolBarButton"
166	data-dojo-props="onClick: function(e){ require('dijit/registry').byId('telInput').focus(); }, moveTo:'repeat', arrow: 'left', label: 'Back'" style="float:left"></div>
167	</h1>
168	<div id="detailsGroup" class="fieldset" data-dojo-type="dojox/mvc/Group"
169	data-dojo-props="target: at(listCtl, 'cursor')">
170	<div class="row">
171	<div style="display: inline-block;" id="detailsBanner">Details for selected index:</div>
172	<span class="cell" id="indexOutput"
173	data-dojo-type="dojox/mvc/Output"
174	data-dojo-props="value: at(listCtl, 'cursorIndex')"></span>
175	</div>
176	<table id="table" cellspacing="10" style="width: 100%">
177	<tr>
178	<td style="width: 100px;" class="layout">First Name</td>
179	<td class="layout">
180	<input id="firstInput" data-dojo-type="dojox/mobile/TextBox"
181	data-dojo-props="value: at('rel:', 'First'), placeholder: 'First Name'">
182	</td>
183	</tr>
184	<tr>
185	<td style="width: 100px;" class="layout">Last Name</td>
186	<td class="layout">
187	<input id="lastInput" data-dojo-type="dojox/mobile/TextBox"
188
189	data-dojo-props="placeholder: 'Last Name', value: at('rel:', 'Last')">
190	</td>
191	</tr>
192	<tr>
193	<td style="width: 100px;" class="layout">Email</td>
194	<td class="layout">
195	<input id="emailInput2" data-dojo-type="dojox/mobile/TextBox"
196	data-dojo-props="value: at('rel:', 'Email'), placeholder: 'Email'">
197	</td>
198	</tr>
199	<tr>
200	<td style="width: 100px;" class="layout">Telephone</td>
201	<td class="layout">
202	<input id="telInput" data-dojo-type="dojox/mobile/TextBox"
203	data-dojo-props="value: at('rel:', 'Tel'), placeholder: 'Telephone'">
204	</td>
205	</tr>
206	</table>
207	</div>
208	</div>
209	<div id="generate" data-dojo-type="dojox/mobile/ScrollableView">
210	<h1 data-dojo-type="dojox/mobile/Heading" data-dojo-props='back:"Back", moveTo:"foo"'>Simple Form Generate Example</h1>
211	<div class="field-title"></div>
212	<div id="main">
213	<div id="leftNav"></div>
214	<div id="mainContent" class="generate-maincontent">
215	<div id="outerModelArea">
216	<div id="generateModel">Model</div>
217	<div class="generate-textarea-row">
218	<textarea class="generate-textarea-cell"
219	data-dojo-type="dojox/mobile/TextArea" id="modelArea">
220	{
221	"Serial": "11111",
222	"First": "John",
223	"Last": "Doe",
224	"Email": "jdoe@example.com",
225	"Phones": [
226	{
227	"Office": "111-111-1111"
228	},
229	{
230	"Mobile": "222-222-2222"
231	}
232	]
233	}
234	</textarea>
235	</div>
236	<div class="fieldset">
237	<div class="spacer"></div>
238	<button id="generate1" type="button" class="mblBlueButton"
239	data-dojo-type="dojox/mobile/Button"
240	onclick="require('dojox/mvc/tests/mobile/demo/MobileDemoGenerateActions').switchToGenerated()">Generate Form</button>
241	</div>
242	</div>
243	<div id="viewArea" style="display:none">
244	<div id="generateView">Generated View</div>
245	<div class="fieldset">
246	<div id="view" data-dojo-type="dojox/mvc/Generate"
247	data-dojo-props="widgetMapping:{'String' : 'dojox/mobile/TextBox'},
248	idNameMapping: {String: 'TB'},
249	children: at('widget:modelArea', 'value').direction(at.from).transform({format: require('dojo/json').parse})">
250	</div>
251	</div>
252	<div class="fieldset">
253	<div class="spacer"></div>
254	<button id="updateModel" type="button" class="mblBlueButton"
255	data-dojo-type="dojox/mobile/Button"
256	onclick="require('dojox/mvc/tests/mobile/demo/MobileDemoGenerateActions').switchToData();">Update Model</button>
257	</div>
258	</div>
259	</div>
260	</div>
261	</div>
262	</div>
263	</body>
264	</html>

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

Context Navigation

source: Dev/trunk/src/client/dojox/mvc/tests/mobile/demo/demo.html

Download in other formats: