This little issue drove me insane: you can’t change the model on an activity button after it’s been activated.
So, first, a little background. webOS/Mojo has widgets and one type of widget is a button. Setting up a button requires attributes (to set type – default or activity button) and a model (to set the label, disable/enable, and associated CSS class). A type of Mojo.Widget.activityButton turns the button into an activity button, which adds a spinner (preloader) to the button when the Mojo.Widget.Button.activate() method is called. The Mojo framework also allows altering the model of any widget and calling the Mojo.Controller.SceneController.modelChanged() method to commit the updates.
Here’s some code to show how all of this pieces together. This code is correct and functions as expected.
function setupSignInButton()
{
var btnModel = {
buttonClass: "affirmative",
label : "Sign in",
disabled: false
}
var btnAttributes = {
type: Mojo.Widget.activityButton
}
ctrlr.setupWidget("signin-button", btnAttributes, btnModel);
Mojo.Event.listen(ctrlr.get('signin-button'), Mojo.Event.tap, function() {
btnModel.disabled = true;
btnModel.label = "Signing in...";
ctrlr.modelChanged(btnModel);
ctrlr.get('signin-button').activate();
});
}
Note, ctrlr is a reference to the scene controller (Mojo.Controller.SceneController).
When the button is tapped, the spinner is activated, the button is disabled, and the label for the button is changed to “Signing in…”, as shown below.
The problem is, if you move the call to activate { ctrlr.get(‘signin-button’).activate(); } above the call to change the model { ctrlr.modelChanged(btnModel); }, the model change does not occur. So you have an activated button without the model change, as shown below.
Note, deactivating the button and attempting the model change does not work.
Edit: After playing with the code a bit more, turns out there’s no need to call activate(), the activity button is activated automatically when the button is tapped. Also, the issue I mentioned above seems to all stem from the call to activate(). It seems no code after the activate() call is executed (I attempted to show an alert dialog) and very much looks like an issue where the activate() call is blocking.
Edit 2: Hmmm, turns out nothing was being blocked, but an uncaught exception was being thrown. If you call a method for a widget as I was doing above, something like the following is thrown:
TypeError: Object# has no method 'activate'
To call a method, you need to put ‘.mojo’ before the method name, so:
ctrlr.get('signin-button').mojo.activate();