WebOS SDK – Making buttons

From a post I made in the Palm developer forums (hope it is helpful to someone):

Here is my summary of making a button (from lots of trial)

In the scene HTML declare this

<div x-mojo-element="Button" id="RefreshBtn" class="myButton"> </div>

Notice that this is a div not an input element like traditional html. The x-mojo-element=”Button” is what what links the div to the mojo framework that does all the button drawing stuff.

The id is important and should be unique in the app. Good practice is to put something like “Btn” or “Button” in the name just to remind yourself when you are in your javascript what you are working with. The class declaration is only needed if you are changing the appearance some way in your own CSS.

Next in the scene assistant you need three things. Setup, control, and cleanup.

Setup:
In the Scene Assistant setup function – usually something like FirstAssistant.prototype.setup = function () {}; there are 4 substeps

1 Attributes :
Technically these are all optional (if you just need a regular button) but I feel it is good practice to declare at least the button type like thus:

// a local object for button attributes
this.RefreshBtnAttributes = {
type : "Mojo.Widget.defaultButton"
};

again just to remind myself this is a regular button rather than an Mojo.Widget.activityButton (unless you want one and then you must declare it)

2 Model :

// a local object for button model
this.RefreshBtnModel = {
label : "Refresh",
buttonClass : "primary",
disabled : false
};

Again all are technically optional for the defaults, except the label needs to appear in either the attribute or the model. Legal values for button class are “primary”, “secondary”, “affirmative”, and “negative”.

3: setup the button

// set up the button
this.controller.setupWidget("RefreshBtn", this.RefreshBtnAttributes,
              this.RefreshBtnModel);

Straight forward. this is where your ID links in from the HTML.

4. Bind the button

// bind the button to its handler
this.RefreshBtnBind = this.refreshButtonPress.bind(this);
this.controller.listen(this.controller.get("RefreshBtn"), Mojo.Event.tap,
               this.RefreshBtnBind);

refreshButtonPress will be the name of the handler to be declared. Again notice the link to the ID from the HTML.

Control :
The “simplest” part – define what to do when the button is pressed (“tapped”) like thus :

FirstAssistant.prototype.refreshButtonPress = function(event){

// do something here

};

Cleanup:

Finally make sure you clean up something like this :

FirstAssistant.prototype.cleanup = function(event) {
this.controller.stopListening("RefreshBtn", Mojo.Event.tap,
               this.RefreshBtnBind);
};

Add the stopListening counterparts to the listen binds of any other widgets you declare for the scene as well.