[Note: This blog post is out of date. For up to date information on Dojo Offline please see the official web page.]
dojo.dot.ui, is done. The UI is ‘driven’ by the rest of the Dojo Offline framework, which includes
dojo.sync. Note that there is no real code inside of
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.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.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" >
// 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.