How to make SenchaTouch update the UI when called from an iOS native plugin?

Question

We have a Phonegap/Cordova (1.6.0) application using SenchaTouch (1) for its UI and a custom native (iOS) plugin for unzipping files in the Documents folder. The plugin does not have its own GUI.

We would like to show progress during the unzip operation by updating a progress bar (or simply a dialog) in our Sencha app. We have implemented an update function in the native plugin that uses the "writeJavascript" method to invoke Javascript code from native code.

Invoking that functionality works, but none of the GUI updates we make in our Sencha UI are actually shown, debug log statements are also not show. Only if we add a Javascript alert box in between our code we can observe that the Sencha updates are processed and that something changes in the UI. It feels as though Sencha does everything asynchronously and that code is blocked somehow.

What are we missing?

Answer 1

This was a classic example of a long running operation blocking the UI thread. I guess things never change in software development.

The basic issue is that if you invoke a Phonegap plugin from your HTML application, the graphics thread (and there is only one thread) for your Phonegap application is blocked. The solution is simple: return as soon as you can from your plugin.

For long running operations this means starting them in a separate thread. A very elegant mechanism on iOS is to use Grand Central Dispatch for this, as demonstrated by another Stackoverflow answer.

You perform your long running operation in the dispatch_async( dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{ }); block and then send updates back to the Phonegap UI in the nested dispatch_async( dispatch_get_main_queue(), ^{ }); block using writeJavascript.