/plugins/org.dojotoolkit.dojo.1.3/samples/offline/helloworld/helloworld.html
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>