Context Navigation

helloworld.html

Visit:

Revision 9513, 9.2 kB (checked in by BradNeuberg, 14 months ago)
Removed reference to old Dojo Offline runtime

Line
1	<html>
2	<head>
3	<script type="text/javascript" src="../../../../dojo/dojo.js" djConfig="isDebug: true"></script>
4	<script type="text/javascript" src="../../../../dojox/off/offline.js"></script>
5
6	<style type="text/css">
7	@import "../../../../dojo/resources/dojo.css";
8
9	/* Bring in the CSS for the default
10	Dojo Offline UI widget */
11	@import "../../../../dojox/off/resources/offline-widget.css";
12	</style>
13
14	<script>
15	// configure how we should work offline
16
17	// set our application name
18	dojox.off.ui.appName = "Hello World";
19
20	// automatically "slurp" the page and
21	// capture the resources we need offline
22	dojox.off.files.slurp();
23
24	var helloWorld = {
25	/ hello world messages to be sent /
26	_messages: [],
27
28	initialize: function(){
29	console.debug("helloWorld.initialize");
30
31	// Dojo Offline and Dojo Storage are ready to be used;
32	// the page is also finished loading
33
34	// listen for syncing events; there are several different
35	// syncing event types returned, but we only care about
36	// two: "download" and "finished"
37	var self = this;
38	dojo.connect(dojox.off.sync, "onSync", this, function(type){
39	if(type == "download"){
40	// the syncing process is at the download stage --
41	// download any data that is necessary to work
42	// offline
43
44	// call some network service -- in our case
45	// we just add some fake data.
46	self._messages.push("Hi! This is fake downloaded data!");
47
48	// persist this fake data into Dojo Storage
49	dojox.storage.put("messages", self._messages);
50
51	// now tell Dojo Sync to continue its syncing
52	// process; a real network service would be
53	// asychronous, so we would have to tell the
54	// syncing system to continue at a later point
55	// when we got our network results back
56	dojox.off.sync.finishedDownloading();
57	}else if(type == "finished"){
58	// the syncing process is finished
59	this._messages = [];
60	dojox.storage.remove("messages");
61	}
62	});
63
64	// While offline, as a user works, we create action objects
65	// to represent what they have done while offline, adding
66	// them to an action log that will automatically be persisted.
67	// When we go back online, Dojo Sync will replay each of
68	// these action, handing them to our onReplay handler
69	// for us to handle and act upon now that we have a network
70	dojo.connect(dojox.off.sync.actions, "onReplay", this,
71	function(action, actionLog){
72	if(action.name == "new hello world message"){
73	// this was a hello world message created while offline
74
75	// In a real application, we would probably call some network
76	// service to replay this action, such as sending an email,
77	// creating a task, etc. Instead, we just do an alert box.
78	var message = action.data;
79	self.sendMessage(message);
80
81	// In a real application, the network call would be
82	// asynchronous so we don't lock up the UI. For this reason,
83	// we have to tell Dojo Sync when to continue replaying the
84	// Action Log
85	actionLog.continueReplay();
86	}
87	});
88
89	// did the page load with us already offline? if so,
90	// we will have to load our data from persistent storage for
91	// the user to be able to work with since we can't
92	// load it from the network
93	if(!dojox.off.isOnline){
94	this.loadOfflineData();
95	}
96
97	// print out what messages we have
98	this.printMessages();
99	},
100
101	loadOfflineData: function(){
102	console.debug("We are already offline -- loading Hello World",
103	"messages from persistent storage");
104
105	dojo.debug("We are already offline -- loading Hello World messages from Dojo Storage");
106
107	// get our Hello World messages from Dojo Storage
108	this._messages = dojox.storage.get("messages");
109	if(!dojo.exists("_messages", this)){
110	this._messages = [];
111	}
112	},
113
114	printMessages: function(){
115	if(!this._messages.length){
116	console.debug("No Hello World messages available");
117	return;
118	}
119
120	console.debug("The following Hello World messages are persistently stored:");
121	dojo.forEach(this._messages, console.debug);
122	},
123
124	send: function(){
125	// called when the send button is pressed
126
127	// get the text to send
128	var inputElem = dojo.byId("helloInput");
129	var message = inputElem.value;
130	if(!message){
131	alert("Please enter a Hello World message to send");
132	return;
133	}
134
135	// if we are online, immediately 'send' this
136	// message to a network service
137	if(dojox.off.isOnline){
138	this.sendMessage(message);
139	inputElem.value = "";
140	return;
141	}else{
142	// we are offline
143	this.saveOfflineSend(message);
144	inputElem.value = "";
145	}
146	},
147
148	sendMessage: function(message){
149	// fake 'sending' of Hello World message to a network service -- we
150	// just do an alert box
151	alert("Sent the following Hello World message to server: "
152	+ message);
153	},
154
155	saveOfflineSend: function(message){
156	// first, add this to our list of messages
157	this._messages.push(message);
158
159	// now, persist this into Dojo Storage so it is available
160	// in the future if we don't reach a network while the
161	// browser is open
162	dojox.storage.put("messages", this._messages);
163
164	// Dojo Sync has us represent offline actions as action
165	// objects -- these can have anything we want inside of them.
166	// When we create them, they will be added to an offline
167	// Action Log, and when we go back online this log will
168	// simply be replayed. Each of the action objects that we
169	// added while offline will be handed to our onReplay handler
170	// for us to deal with later, so we have to place enough info
171	// in here to be useful later on
172	var action = {name: "new hello world message", data: message};
173	dojox.off.sync.actions.add(action);
174
175	alert("This message has been saved for sending when we go back online");
176	}
177	}
178
179	// Wait until Dojo Offline is ready
180	// before we initialize ourselves. When this gets called the page
181	// is also finished loading.
182	dojo.connect(dojox.off.ui, "onLoad", helloWorld, "initialize");
183
184	// tell Dojo Offline we are ready for it to initialize itself now
185	// that we have finished configuring it for our application
186	dojox.off.initialize();
187	</script>
188
189	</head>
190
191	<body style="padding: 2em;">
192	<h1>Hello World</h1>
193
194	<h2>This is a simple Hello World program using
195	Dojo Offline. It doesn't really do much --
196	it gives a code sample of how to work with
197	Dojo Offline, Dojo Sync, and Dojo SQL.</h2>
198
199	<p>In our HTML, we create a DIV with the special id "dot-widget", which
200	Dojo Offline will automagically fill with a default
201	Dojo Offline widget that tells the user when they are online
202	or offline; gives them sync messages; and provides instructions
203	on how to download and install the small Dojo Offline client
204	runtime. It basically handles all of the UI tedium and hard
205	stuff of providing good offline feedback to a user.
206	Here is that widget inserted into the page:</p>
207
208	<!--
209	Place the Dojo Offline widget here; it will be automagically
210	filled into any element with ID "dot-widget".
211	-->
212	<div id="dot-widget"></div>
213
214	<p>The default Dojo Offline UI will fill in your application
215	name automatically into the UI based on what you set
216	dojox.off.ui.appName to in your JavaScript
217	file; in our case we set it to "Hello World".</p>
218
219	<p>It will also fill out the Learn How link with your
220	app name; click that link now to see an autogenerated
221	page that helps your users make sure they can work
222	with your application offline. That page automatically
223	figures out if Dojo Offline is installed or not, and
224	provides instructions on downloading it if not and
225	providing an easy link to running your application
226	offline (which is just autoset to be the URL of this
227	current page, btw)</p>
228
229	<p>Do a View Source on this page to see the JavaScript
230	necessary to create an offline web application.</p>
231
232	<p>As you play with this example, after installing the
233	Google Gears plugin, experiment with
234	dropping the network and going off- and on-line.</p>
235
236	<p>To be somewhat of a real example, we need to be able
237	to have an action that can be performend either on or
238	offline. The following input lets you 'send' Hello
239	World messages to a server (it's fake -- we don't
240	really send messages). When we are online, entering
241	a message and sending it will cause the action to
242	happen immediately (we fake send it to a server); when
243	offline, we queue this up to be sent when we next go
244	online:</p>
245
246	<div id="helloMessage" style="margin: 1em;">
247	<label for="helloInput"
248	style="margin-right: 0.2em;">
249	Enter Hello World Message:
250	</label>
251
252	<input name="helloInput"
253	id="helloInput"
254	style="margin-right: 0.2em;">
255
256	<button id="sendMessage"
257	onclick="helloWorld.send()"
258	style="margin-right: 0.2em;">Send</button>
259	</div>
260
261	<p>Debug output:</p>
262	</body>
263	</html>

Note: See TracBrowser for help on using the browser.

Context Navigation

root / dojox / trunk / off / demos / helloworld / helloworld.html

Download in other formats: