[Note: This blog post is out of date. For up to date information on Dojo Offline please see the official web page.]
We have posted up the default user-interface widget for Dojo Offline; this is all coded up now in JavaScript and is complete. This means all the default user-interface code, which lives in dojo.dot.ui, is done. The UI is ‘driven’ by the rest of the Dojo Offline framework, which includes dojo.dot and dojo.sync. Note that there is no real code inside of dojo.dot and dojo.sync; these are just stubs for now and return suitable ‘fake’ data to drive the UI. The next step is to actually code the inside of dojo.dot and dojo.sync, which actually persist data and do syncing.
I have updated Moxie, a demo offline web based word processor, to use the new Dojo Offline UI. Check it out. I have confirmed that the UI widget works in Safari, Internet Explorer, and Firefox, cross-platform. Play around with the widget and tell me if you find any glitches. Please note that the Dojo Offline Widget’s UI doesn’t currently actually do any persisting or synchronizing; it is ‘dumb’ and is just driven by the rest of Dojo Offline (dojo.dot and dojo.sync, which isn’t currently implemented.
From a coding perspective, bringing the Dojo Offline default UI into Moxie was very easy. First, inside my editor.html file, all I have to do is place a DIV with the ID ‘dot-widget’ in my HTML:
<code> <!-- Place the Dojo Offline widget here --></code>
<div id="dot-widget"> //Dojo Offline automatically fills this out with the default Offline Widget.
I also have to bring in the Dojo Offline Widget’s CSS stylesheet:
<link rel="stylesheet" />
type="text/css"
xhref="../../src/dot/ui-template/widget.css" mce_href="../../src/dot/ui-template/widget.css" >
At the top of my Moxie JavaScript code, I simply add the following as well:
// configure how we should work offline
// set our application name
dojo.dot.ui.appName = "Moxie";
// we aren't going to need a real offline cache for now;
// we will just have our server return good HTTP/1.1
// caching headers and rely on the browser's native cache
dojo.dot.requireOfflineCache = false;
This defines my app’s name, which is dynamically inserted into the default Dojo Offline UI (including the Learn More page you get if you click the ‘learn more’ link). I also indicate that I won’t be using a real offline cache for now. See details on what this means here.