Tuesday, January 23rd, 2007

Dojo Offline Toolkit in Code

Category: Dojo, Offline

Brad Neuberg keeps it moving with the Dojo Offline Toolkit API. His latest work details the early API via example. The example is a web based email system, and the code using the API is below (and shows you how you would use it).

The interesting news is that you can start work even without the local proxy that was mentioned before, as long as you set the right headers for development.

javascript

  1. // bring in Dojo Offline
  2. dojo.require("offline.*");
  3.  
  4. // indicate what files we want offline, such
  5. // as our application's images, HTML, CSS,
  6. // JavaScript, etc.
  7. offline.files.put(
  8.                   ["/images/toolbar.gif",
  9.                   "index.html",
  10.                   "/css/global.css",
  11.                   "dojo.js"
  12.                   ]);
  13.  
  14. // define our application's name; this will be used to
  15. // customize the default Offline Toolkit UI
  16. offline.ui.appName = "Web Outlook";
  17.  
  18. // define what elements we would like disabled when we go offline;
  19. // these will be re-enabled when we go online                      
  20. offline.ui.disableElementsOffline(
  21.                                   ["configurationLink",
  22.                                   "searchField"
  23.                                   ]);
  24.  
  25. var emails, contacts, tasks;
  26.  
  27. // called when the page is finished loading and the offline toolkit
  28. // is ready to be used
  29. offline.onLoad = function(){
  30.    // define where to put our offline user data; when
  31.    // we sync with the server, each kind of data will have
  32.    // an itemType, such as "emails", "tasks", etc. These
  33.    // data structures will automatically be kept in sync
  34.    // so we can use them in our application, and will
  35.    // automatically be persisted in local client-side
  36.    // storage
  37.    emails = offline.getDataStore("email");
  38.    contacts = offline.getDataStore("contact");
  39.    tasks = offline.getDataStore("task");
  40. }
  41.  
  42. // default implementation of offline.onOffline and offline.onOnline
  43. // will simply use the disableElementsOffline values
  44. // to enable and disable these elements, and do an automatic synchronization inside of onOnline
  45.  
  46. function addContact(contact){
  47.    contacts.newItem(contact);
  48. }
  49.  
  50. function displayEmails(){
  51.    var displayMe = null;
  52.  
  53.    if(offline.isOnline() == false){
  54.       displayMe = emails.find().items;
  55.    }else{
  56.       displayMe = // ...remotely fetch emails
  57.    }
  58.  
  59.    // do something with array of emails
  60. }
  61.  
  62. function deleteTask(task){
  63.    tasks.deleteItem(task);
  64. }
  65.  
  66. function sendEmail(email){
  67.    if(offline.isOnline == true){
  68.       // send this email to the server
  69.    }else{
  70.       // else we are offline; just queue this email up
  71.  
  72.       // store it's value in our offline cache
  73.       emails.newItem(email);
  74.  
  75.       // now create a custom sync log entry for a 'send' command
  76.       var c = new offline.sync.Command();
  77.       c.name = "send";
  78.       c.itemType = "email";
  79.       c.item = email;
  80.  
  81.       offline.sync.log.add(c);
  82.  
  83.       // later, when we sync, this command will be replayed to the
  84.       // server for the email to be sent
  85. }

Posted by Dion Almaer at 9:40 am
7 Comments

+++--
3.2 rating from 24 votes

7 Comments »

Comments feed TrackBack URI

I am excited about the progress. Looking forward to implementing offline capabilities in my WCM editor with this soon.

Comment by Ajax 2.0 Developer — January 23, 2007

Don’t get me wrong, Dojo and, in particular, the offline toolkit is amazing, but I can’t think of a project that I can use it for. Sure, there is e-mail and docs, but that’s all I can think of. Tinkered with creating a way users could add ESPN.com stories to a bag and have them available offline, but from research, there isn’t much of a market for it.

Comment by Cody Swann — January 23, 2007

@Ajax 2.0 developer –

Sure there is a market for this. Maybe not for traditional websites like news. But more for the backend web applications like content management systems, online blog editors, wikkis , order entry for mobile workers (CRM and lead management such as salesforce.com?) and the list goes on. I can think of at least a dozen more.

Comment by Nirav — January 23, 2007

I think that websites with Dojo offline wil have limited functionlity.
Sorting, searching in text and so on.. JavaScript cannot do this so good as server-side languages. And in other side, it will take a long time to implement all features of website in JS.

Comment by bsn — January 23, 2007

One case where this could be huge is offering a safety net for cases when the user has invested quite a bit of time in an app and then loses their network connection for some reason. If the app can’t access the server, it can store the data locally till the user re-connects. I’ve been using a background Auto-save for cases like that, but for large amounts of data and a slow connection, the auto-saving can be tricky, and the excuse “Well you have all of your data up till 5 minutes ago” tends not to go over very well when a client wrote that critical paragraph 3 minutes before the net went down…

Comment by Solsys — January 23, 2007

@Solsys, I see, thanks for explanation. In that case this toolkit will be really useful.

Comment by bsn — January 24, 2007

I think the offline toolkit will be very useful in web application, such as web application. If there is any new release to see what outcome could be or which level of data saving it can go up to. It will be great. (such as just form data, or some other features. )

Comment by Charlie Cheng — January 24, 2007

Leave a comment

You must be logged in to post a comment.