A few weeks back I blogged about some of the JavaScript APIs you have available when building hybrid mobile applications with IBM MobileFirst. I had meant to follow up on this a bit sooner but recent trips got in the way. Today I took some time to look at a few more of the APIs.

WL.Badge.setNumber

As you can guess, this API lets you set the badge number for your application icon. It only applies to iOS and Windows Phone. The API is incredibly simple. You set a number. It shows up in the icon. If you set it to 0, the number is cleared. Yep, that's it.

I wired up two buttons in an Ionic app for quick testing of this. Here is the JavaScript code I used:

$scope.testBadge = function(e) {
    console.log("ok, test badge");
    WL.Badge.setNumber(2);
}

$scope.clearBadge = function(e) {
    console.log("ok, clear badge");
    WL.Badge.setNumber(0);
}

Here is a screen shot of the icon updated:

Unfortunately, it appears as if iOS 8 has new requirements for apps that try to add badges. In my testing with the iOS 8.X simulator, I got an error in my console stating that permission was required for this action. I'll try to get back to this later, but for now, keep that in mind.

WL.BusyIndicator

You can probably guess what this one does too - show and hide a "busy" indicator. The docs explain the full API, but the general usage is to create an instance of the indicator with the appropriate options and then call show on it. Where things get interesting is on Android. iOS supports an option to automatically hide the dialog, Android does not. So if you really want a "timed" dialog then you'll need to set a timeout:

$scope.doBusy = function(e) {
    console.log("ok, do busy");
    var busy = new WL.BusyIndicator("body", {
	text:"This is text",
	bounceAnimation:false,
	textColor:"red",
	fullScreen:false,
	duration:5
    });
    busy.show();
    window.setTimeout(function() {
	busy.hide();
    }, 5*1000);
}

The options you see above are just some of the options, mainly the ones I was curious about. bounceAnimation (which defaults to false) was a bit weird when enabled so I don't see using it often. fullScreen also seemed to a bit too much on iPad, but could be ok on iPhone. In a real app the hide() call would be in the async callback of whatever thing you are waiting for.

Here is how the indicator looks in iOS:

I think it looks nice, outside of the red text which I specifically asked for. (Remember, I'm where good design goes to die.)

And here it is in Android.

That's it for today. As a reminder, if you want to see all of the hybrid API, check out the client-side API docs.