This dojo offline page works in dojo 1.1 but not in dojo 1.2.
Why?
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../dojoroot/dojo/dojo.js" djConfig="isDebug: true"></script>
<script type="text/javascript" src="../dojoroot/dojox/off/offline.js"></script>
<style type="text/css">
@import "../dojoroot/dojo/resources/dojo.css";
/* Bring in the CSS for the default
Dojo Offline UI widget */
@import "../dojoroot/dojox/off/resources/offline-widget.css";
</style>
<script>
// configure how we should work offline
// set our application name
dojox.off.ui.appName = "FakeCom";
// automatically "slurp" the page and
// capture the resources we need offline
dojox.off.files.slurp();
var helloWorld = {// myNoteC: this is a big var
/* FakeCom messages to be sent */
_messages: [],
initialize: function(){//myNoteQ
console.debug("FakeCom offline is enabling...");
// 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;//myNoteQ
dojo.connect(dojox.off.sync, "onSync", this, function(type){
console.debug("type is:"+type);//myNote
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!");
console.debug("self._messages when download:"+self._messages);//myNote
// persist this fake data into Dojo Storage
dojox.storage.put("messages", self._messages);
console.debug("self._messages got from storage when download:"+dojox.storage.get("messages"));//myNote
// 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");
}else if(type == "upload"){//this else if is myNote
// the syncing process is finished
console.debug("self._messages when upload:"+self._messages);//myNote
// persist this fake data into Dojo Storage
dojox.storage.put("messages", self._messages);
console.debug("self._messages got from storage when upload:"+dojox.storage.get("messages"));//myNote
}
});//for dojo.connect(
// 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){//myNoteQ: where is action, actionLog from??
console.debug("onReplay: myNoteQ: where is action, actionLog from??");//myNote
console.debug("onReplay: action.name:"+action.name);//myNote
console.debug("onReplay: action.data:"+action.data);//myNote
console.debug("onReplay: actionLog:"+actionLog);//myNoteC: this is a JSON
if(action.name == "new FakeCom message"){//myNoteQ: where is action.name from??
// this was a FakeCom 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);
console.debug("onReplay: sending message:"+message);//myNote
// 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();
}
});//for dojo.connect(
// 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){
console.debug("did the page load with us already offline? YES!"," so loadOfflineData");//myNote
this.loadOfflineData();
}
// print out what messages we have
this.printMessages();
},//for: initialize: function(){
loadOfflineData: function(){
console.debug("We are already offline -- loading FakeCom",
"messages from persistent storage");
dojo.debug("We are already offline -- loading FakeCom messages from Dojo Storage");
// get our FakeCom messages from Dojo Storage
this._messages = dojox.storage.get("messages");
if(!dojo.exists("_messages", this)){
this._messages = [];
}
},//for initialize: function(){
printMessages: function(){
if(!this._messages.length){
console.debug("No FakeCom messages available");
return;
}
console.debug("The following FakeCom 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 FakeCom message to send");
return;
}
// if we are online, immediately 'send' this
// message to a network service
if(dojox.off.isOnline){
console.debug ("isOnline is:"+dojox.off.isOnline);//myNote
console.debug ("so sending directly to server, message is:"+message);//myNote
this.sendMessage(message);
inputElem.value = "";
return;
}else{
// we are offline
this.saveOfflineSend(message);
inputElem.value = "";
}
},
sendMessage: function(message){
// fake 'sending' of FakeCom message to a network service -- we
// just do an alert box
//alert("Sent the following FakeCom message to server: " + message);//original
console.debug("Sending the following FakeCom message to server: "
+ message);//myNoteM
},
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 FakeCom message", data: message};
dojox.off.sync.actions.add(action);
console.debug("This message has been saved for sending when we go back online: "
+ message);//myNoteM
//alert("This message has been saved for sending when we go back online");//original
}
}// for var helloWorld = { // myNoteC: this is a big var
// 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;">
Firefox: <a title="Clear Gears Cache" href="javascript:(function(){new GearsFactory().create('beta.localserver', '1.0').removeStore('dot_store_'+window.location.href.replace(/[^0-9A-Za-z_]/g, '_'));dojox.storage.remove('oldVersion', '_dot');}())">Clear Gears Cache</a>
Internet Explorer: <a title="Clear Gears Cache" href="javascript:(function(){new ActiveXObject('Gears.Factory').create('beta.localserver', '1.0').removeStore('dot_store_'+window.location.href.replace(/[^0-9A-Za-z_]/g, '_'));dojox.storage.remove('oldVersion', '_dot');}())">Clear Gears Cache</a>
<h1>FakeCom</h1>
<div id="dot-widget"></div>
<div id="helloMessage" style="margin: 1em;">
<label for="helloInput"
style="margin-right: 0.2em;">
Enter FakeCom 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>
Debug output:
</body>
page code
I failed to put page code. I would try soon.
updated: I put < pre > ...my page code < / pre >, then this over-active forum interpreter displays my page code as up. Without < pre >, it just killed all my codes. :-)