Updating the User Interface for Online Synchronization

We have now enhanced our custom library with a function to synchronize the offline data with an online storage solution, but in order to test it we need to add some user interaction. Therefore, we have to work on our user interface layer and see how we can bind a back-end function to a visually interactive action. Let’s add a button called “Synchronize” to the main screen:

<ul class="buttons"> <li><a class="changeview" href="#alltasks">Show All Tasks</a></li> <li><a class="changeview" href="#add">Add New</a></li> <li class="changeview"><a href="#" class="synchronize">Synchronize</a></li>

</ul> Now we have to bind the click event to our new synchronizeOnline() function: activateMain: function() {

TODOLIST.Storage.getMostImportantTask(function(task) { if (task) { // the no tasks message may be displayed, so remove it jQuery("#main .notasks").remove();

// update the task details showTaskDetails("#main .task", task);

// attach a click handler to the complete task button jQuery("#main .task-complete").unbind().click(function() {

jQuery("#main .task").slideUp();

// mark the task as complete task.complete();

// save the task back to storage TODOLIST.Storage.saveTask(task, module.activateMain);

jQuery("#main .synchronize").unbind().click(function() { TODOLIST.Storage.synchronizeTasks(); });

} else {

jQuery("#main .notasks").remove(); jQuery("#main .task").slideUp().after("<p class='notasks'>You have no tasks

to complete</p>"); } }); }

Then we simply expose the synchronizeOnline function through the Storage submodule as the synchronizeTasks function:

CHAPTER 5: Synchronizing with the Cloud

Storage: (function() { ...

var subModule = { ... synchronizeTasks: synchronizeOnline, ...

return subModule; })()

Refresh your application, and you will see your updated user interface, as shown in Figure 5–1.

Figure 5–1. Adding a Synchronize button We can now just click the Synchronize button, and all the offline data will be flushed into

a modern and ultra-scalable JSON storage system! That’s nice, but so far we don’t have any feedback about this process—it happens all under the hood. To remedy that, let’s display an info banner once the synchronization process is done.

First, we add an "info" div element just before the button stack: ...

<div id="info"></div> <ul class="buttons"> <li><a class="changeview" href="#alltasks">Show All Tasks</a></li>

<li><a class="changeview" href="#add">Add New</a></li> <li class="changeview"><a href="#" class="synchronize">synchronize</a></li>

</ul>

CHAPTER 5: Synchronizing with the Cloud

Then add some styling for this div: #info {

margin: 8px 6px 2px 6px; padding: 6px 14px; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0,

#71D90F), color-stop(0.7, #529E0B)); -webkit-border-radius: 4px; color: white; display: none;

} Notice the display:none attribute, which ensures that the div won’t be visible until we

explicitly want it to be displayed. To display the notification message, let’s make a change to our activateMain function

to show some information once the synchronization process has been initiated: activateMain: function() {

TODOLIST.Storage.getMostImportantTask(function(task) { if (task) { ...

jQuery("#main .synchronize").unbind().click(function() {

TODOLIST.Storage.synchronizeTasks(function(updateCount) { $("#info") .html("Completed : " + updateCount + " task(s) have been synchronized !")

All we’re doing here is updating the info div HTML. Now, when the synchronization process completes, the info banner will be displayed, as shown in Figure 5–2.

CHAPTER 5: Synchronizing with the Cloud

Figure 5–2. Visual synchronization feedback Now that we’re sure our synchronization process is working, we need a client interface

that will read the data from our online storage solution.

Updating the User Interface for Online Synchronization