Hot off the presses, here is another release of the Dojo Offline Toolkit. For the demo inclined, here is Moxie, our test web application, with the new release.

A few things to see here. First, last week we finished the Dojo Offline Toolkit's default widget UI, but the internals were 'fake'. More of the real part of the system have been filled out. First, we now cache parts of web application's UI that are needed offline. At the top of Moxie you will see us caching whatever UI resources we need offline with calls to dojo.dot.files.cache:

// add our list resources we need offline
// Moxie resources
dojo.dot.files.cache([
					"editor.html",
					"editor.js",
					"about.html"
					]);

// Dojo resources
dojo.dot.files.cache([
					djConfig.baseRelativePath + "dojo.js"
					]);
					
// The Dojo Editor Widget's resources
dojo.dot.files.cache([
					djConfig.baseRelativePath + "src/widget/templates/Toolbar.css",
					djConfig.baseRelativePath + "src/widget/templates/images/tab_close.gif",
					djConfig.baseRelativePath + "src/widget/templates/richtextframe.html",
					djConfig.baseRelativePath + "src/widget/templates/images/toolbar-bg.gif",
					djConfig.baseRelativePath + "src/widget/templates/buttons/bold.gif",
					djConfig.baseRelativePath + "src/widget/templates/buttons/italic.gif",
					djConfig.baseRelativePath + "src/widget/templates/buttons/underline.gif",
					djConfig.baseRelativePath + "src/widget/templates/buttons/strikethrough.gif",
					djConfig.baseRelativePath + "src/widget/templates/buttons/sep.gif",
					djConfig.baseRelativePath + "src/widget/templates/buttons/justifyleft.gif",
					djConfig.baseRelativePath + "src/widget/templates/buttons/justifycenter.gif",
					djConfig.baseRelativePath + "src/widget/templates/buttons/justifyright.gif",
					djConfig.baseRelativePath + "src/widget/templates/buttons/forecolor.gif",
					djConfig.baseRelativePath + "src/widget/templates/buttons/hilitecolor.gif",
					djConfig.baseRelativePath + "src/widget/templates/buttons/insertorderedlist.gif",
					djConfig.baseRelativePath + "src/widget/templates/buttons/insertunorderedlist.gif",
					djConfig.baseRelativePath + "src/widget/templates/buttons/outdent.gif",
					djConfig.baseRelativePath + "src/widget/templates/buttons/indent.gif",
					djConfig.baseRelativePath + "src/widget/templates/buttons/createlink.gif",
					djConfig.baseRelativePath + "src/widget/templates/buttons/insertimage.gif",
					djConfig.baseRelativePath + "src/widget/templates/buttons/inserthorizontalrule.gif"
					]);

During syncing, Dojo Offline now cycles through resources that were indicated above and refreshes them to make sure they are available in the browser or offline cache when away from the network.

Another cool thing to see in the demo put up today: we now have a background "thread" that is checking every 15 seconds on whether our web application is available through the network or not. If a web app disappears or reappears on the network, we correctly set our on- or offline status automatically. Play with dropping your network connection while using the Moxie demo, and notice that after about 15 seconds Dojo Offline picks up on this status change and changes your offline status appropriately.

The final thing to see in today's release is that we are now customizing the Dojo Offline widget. This is as easy as taking parts of widget.html, the default Dojo Offline widget's template file, that you want and leaving behind parts that you don't want -- Dojo Offline will correctly work with the removal or addition of stuff to the default UI. In Moxie, we now just take a few small parts to create a more minimal offline UI; all we have to do is leave the default dot- HTML ID names:

<!-- Customize what parts of the Offline Widget we see -->
<div id="dot-widget-container" style="visibility: hidden;">
     <div id="dot-widget-title-bar">
         <span id="dot-widget-network-indicator">
             <img id="dot-widget-network-indicator-online" />
             <img id="dot-widget-network-indicator-offline" />
         </span>
         <span id="dot-widget-title-text"></span>
     </div>
     
     <div id="dot-widget-contents">
         <div id="dot-sync-status">
             <img id="dot-roller" />
             <img id="dot-success-checkmark" />
             <span id="dot-sync-messages"></span>
             <span id="dot-sync-details">
                 (<a id="dot-sync-details-button" href="#">details</a>)
             </span>
         </div>
         
         <div id="dot-widget-learn-how">
             <a id="dot-widget-learn-how-link" target="_blank" href="#">Learn How</a> 
             to use <span id="dot-widget-learn-how-app-name"></span>&nbsp;Offline!
         </div>
     </div>
 </div>

We also style our CSS to change the layout a bit. Of course, if you don't want to do anything custom, Dojo Offline still makes it very easy to get the default widget by simply adding the ID dot-widget to a DIV in your HTML code:

<!-- 
    Place the Dojo Offline widget here; it will be automagically
    filled into any element with ID "dot-widget".
 -->
<div id="dot-widget"></div>