PullToRefresh

Pull-To-Refresh is now accepted as a common tool to refresh content since Apple and Google supports it natively.

Cobalt provides an easy way to enable pull-to-refresh on your webviews. The gesture and the pull-to-refresh small header is done on the native side so it is smooth as you like, it is prepackaged and it can be customized.

Enable Pull-to-Refresh in cobalt.json

To enable the pull-to-refresh on a cobalt controller, use the boolean in cobalt.json .

Here is an example :

{
    "controllers": {
        "default": {
            "ios":"ViewController",
            "android":".MyActivity",
            "pullToRefresh": true
        }
    }
}

For more details on this file, see cobalt.json and navigation.

Handle the message on the web side

When you enable the pull-to-refresh in the config file, the webview will receive an event when the user pulls the webview.

You will have to :

• catch this message,
• refresh your content (call a webservice or anything),
• call a function to dismiss the native spinner once content is here.

If you don't do this last step, the pull-to-refresh control will stay deployed, in the "refreshing" state.

Here is how you do that, in javascript :

cobalt.subscribe('cobalt:onPullToRefresh', function(){
	// message is catched! now, update your content !
	myApp.update();
	// then, release the control :
    cobalt.pullToRefresh.dismiss();
 });

If your app calls a webservice to refresh its content, be sure to call cobalt.pullToRefresh.dismiss only once it's over. It will seems more natural for your users. They will see the loading message and be happy to have a feedback when it's done.

That's all ! If you are satisfied with the default pull-to-refresh we implemented, you can jump to the next functionality of your app.

Check the HelloWorld in the sample directory for a working example.

Customize the Pull-To-Refresh header

On iOS, tint and text of the refresh control are customizable.

On Android, the four colors scheme of progress animation is customizable.

You can see example of this in the Cobalt Catalog app from the samples list.