helloworld.html | searchcode

/plugins/org.dojotoolkit.dojo.1.3/samples/offline/helloworld/helloworld.html

https://github.com/victor-homyakov/frameworks
HTML | 263 lines | 213 code | 46 blank | 4 comment | 0 complexity | 1fb4af18bfd89c33d9e4b71826f3ca20 MD5 | raw file
Possible License(s): BSD-3-Clause, LGPL-2.0, MIT

<html>

	<head>

		<script type="text/javascript" src="../lib/dojo/dojo.js" djConfig="isDebug: true"></script>

		<script type="text/javascript" src="../lib/dojox/off/offline.js"></script>

		

		<style type="text/css">

			@import "../lib/dojo/resources/dojo.css";

			

			/* Bring in the CSS for the default 

			   Dojo Offline UI widget */

			@import "../lib/dojox/off/resources/offline-widget.css";

	    </style>

		

		<script>	

			// configure how we should work offline



			// set our application name

			dojox.off.ui.appName = "Hello World";



			// automatically "slurp" the page and

			// capture the resources we need offline

			dojox.off.files.slurp();

			

			var helloWorld = {

				/* hello world messages to be sent */

				_messages: [],

				

				initialize: function(){

					console.debug("helloWorld.initialize");

					

					// Dojo Offline and Dojo Storage are ready to be used;

					// the page is also finished loading

					

					// listen for syncing events; there are several different

					// syncing event types returned, but we only care about 

					// two: "download" and "finished"

					var self = this;

					dojo.connect(dojox.off.sync, "onSync", this, function(type){

						if(type == "download"){

							// the syncing process is at the download stage --

							// download any data that is necessary to work

							// offline

							

							// call some network service -- in our case

							// we just add some fake data.

							self._messages.push("Hi! This is fake downloaded data!");

					

							// persist this fake data into Dojo Storage

							dojox.storage.put("messages", self._messages);

					

							// now tell Dojo Sync to continue its syncing

							// process; a real network service would be

							// asychronous, so we would have to tell the

							// syncing system to continue at a later point

							// when we got our network results back

							dojox.off.sync.finishedDownloading();

						}else if(type == "finished"){

							// the syncing process is finished

							this._messages = [];

							dojox.storage.remove("messages");

						}

					});

					

					// While offline, as a user works, we create action objects

					// to represent what they have done while offline, adding

					// them to an action log that will automatically be persisted. 

					// When we go back online, Dojo Sync will replay each of 

					// these action, handing them to our onReplay handler

					// for us to handle and act upon now that we have a network

					dojo.connect(dojox.off.sync.actions, "onReplay", this, 

								function(action, actionLog){

									if(action.name == "new hello world message"){

										// this was a hello world message created while offline

						

										// In a real application, we would probably call some network

										// service to replay this action, such as sending an email,

										// creating a task, etc. Instead, we just do an alert box.

										var message = action.data;

										self.sendMessage(message);

						

										// In a real application, the network call would be

										// asynchronous so we don't lock up the UI. For this reason,

										// we have to tell Dojo Sync when to continue replaying the

										// Action Log

										actionLog.continueReplay();

									}

					});

					

					// did the page load with us already offline? if so, 

					// we will have to load our data from persistent storage for 

					// the user to be able to work with since we can't 

					// load it from the network

					if(!dojox.off.isOnline){

						this.loadOfflineData();

					}

					

					// print out what messages we have

					this.printMessages();

				},

				

				loadOfflineData: function(){

					console.debug("We are already offline -- loading Hello World",

									"messages from persistent storage");

					

					dojo.debug("We are already offline -- loading Hello World messages from Dojo Storage");

					

					// get our Hello World messages from Dojo Storage

					this._messages = dojox.storage.get("messages");

					if(!dojo.exists("_messages", this)){

						this._messages = [];

					}

				},

				

				printMessages: function(){

					if(!this._messages.length){

						console.debug("No Hello World messages available");

						return;

					}

					

					console.debug("The following Hello World messages are persistently stored:");

					dojo.forEach(this._messages, console.debug);

				},

				

				send: function(){

					// called when the send button is pressed

					

					// get the text to send

					var inputElem = dojo.byId("helloInput");

					var message = inputElem.value;

					if(!message){

						alert("Please enter a Hello World message to send");

						return;

					}

					

					// if we are online, immediately 'send' this

					// message to a network service

					if(dojox.off.isOnline){

						this.sendMessage(message);

						inputElem.value = "";

						return;

					}else{

						// we are offline

						this.saveOfflineSend(message);

						inputElem.value = "";

					}

				},

				

				sendMessage: function(message){

					// fake 'sending' of Hello World message to a network service -- we

					// just do an alert box

					alert("Sent the following Hello World message to server: "

									+ message);

				},

				

				saveOfflineSend: function(message){	

					// first, add this to our list of messages

					this._messages.push(message);

					

					// now, persist this into Dojo Storage so it is available

					// in the future if we don't reach a network while the

					// browser is open

					dojox.storage.put("messages", this._messages);

					

					// Dojo Sync has us represent offline actions as action

					// objects -- these can have anything we want inside of them.

					// When we create them, they will be added to an offline 

					// Action Log, and when we go back online this log will

					// simply be replayed. Each of the action objects that we

					// added while offline will be handed to our onReplay handler

					// for us to deal with later, so we have to place enough info

					// in here to be useful later on

					var action = {name: "new hello world message", data: message};

					dojox.off.sync.actions.add(action);

					

					alert("This message has been saved for sending when we go back online");

				}

			}

					

			// Wait until Dojo Offline is ready

			// before we initialize ourselves. When this gets called the page

			// is also finished loading.

			dojo.connect(dojox.off.ui, "onLoad", helloWorld, "initialize");

			

			// tell Dojo Offline we are ready for it to initialize itself now

			// that we have finished configuring it for our application

			dojox.off.initialize();

		</script>

		

	</head>

	

	<body style="padding: 2em;">

		<h1>Hello World</h1>

		

		<h2>This is a simple Hello World program using

			Dojo Offline. It doesn't really do much --

			it gives a code sample of how to work with

			Dojo Offline, Dojo Sync, and Dojo SQL.</h2>

			

		<p>In our HTML, we create a DIV with the special id "dot-widget", which

			Dojo Offline will automagically fill with a default

			Dojo Offline widget that tells the user when they are online

			or offline; gives them sync messages; and provides instructions

			on how to download and install the small Dojo Offline client

			runtime. It basically handles all of the UI tedium and hard

			stuff of providing good offline feedback to a user.

			Here is that widget inserted into the page:</p>

			

		<!-- 

			Place the Dojo Offline widget here; it will be automagically

		 	filled into any element with ID "dot-widget".

		 -->

		<div id="dot-widget"></div>	

		

		<p>The default Dojo Offline UI will fill in your application

			name automatically into the UI based on what you set 

			dojox.off.ui.appName to in your JavaScript 

			file; in our case we set it to "Hello World".</p>

			

		<p>It will also fill out the Learn How link with your

			app name; click that link now to see an autogenerated

			page that helps your users make sure they can work

			with your application offline. That page automatically

			figures out if Dojo Offline is installed or not, and

			provides instructions on downloading it if not and

			providing an easy link to running your application

			offline (which is just autoset to be the URL of this

			current page, btw)</p>

			

		<p>Do a View Source on this page to see the JavaScript

			necessary to create an offline web application.</p>

			

		<p>As you play with this example, after installing the

				Google Gears plugin, experiment with 

				dropping the network and going off- and on-line.</p>

			

		<p>To be somewhat of a real example, we need to be able

			to have an action that can be performend either on or

			offline. The following input lets you 'send' Hello

			World messages to a server (it's fake -- we don't 

			really send messages). When we are online, entering

			a message and sending it will cause the action to

			happen immediately (we fake send it to a server); when

			offline, we queue this up to be sent when we next go

			online:</p>

			

		<div id="helloMessage" style="margin: 1em;">

			<label for="helloInput" 

							style="margin-right: 0.2em;">

				Enter Hello World Message:

			</label>

			

			<input name="helloInput" 

							id="helloInput" 

							style="margin-right: 0.2em;">

			

			<button id="sendMessage" 

							onclick="helloWorld.send()"

							style="margin-right: 0.2em;">Send</button>

		</div>

			

		<p>Debug output:</p>

	</body>

</html>