Button

From WebOS101

Contents 1 Introduction 2 Button Setup 2.1 Attributes 2.1.1 Attribute Properties 2.2 Model 2.3 Instantiating the Button 2.4 Button Events 3 Examples 3.1 Activity Button 3.1.1 HTML 3.1.2 Mojo 4 Custom Styling

Introduction

Mojo's button widget is perhaps the most used, as well as simplest widget which displays (as the name suggests) a button. Setting up Mojo buttons is extremely easy and is a good place to start learning about Mojo Widgets.

Button Setup

Attributes

A default Mojo button does not require any attributes.

Attribute Properties

• label - the default label if one is not supplied by the model.
• type - the default type of a Button Widget is Mojo.Widget.defaultButton. Another type is Mojo.Widget.activityButton which embeds a small Spinner Widget in the button that can be controlled via the element's mojo.activate() and mojo.deactivate() methods.
• disabledProperty - a name to use in the model for the disabled property.
• labelProperty - a name to use in the model for the label property.

Model

A buttons model allows you to change the appearance of the button. Setting up a button generally uses the following model:

this.buttonModel = {
      buttonLabel: "Text On Button",
      disabled: false
};

Additionally (as well as optionally), you can use buttonClass to change the class of the button.

Instantiating the Button

Like all widgets, a button must be properly set up before it can be displayed. The normal way to set up a button is to create it during your scene assistant's setup function:

this.controller.setupWidget("buttonWidget", {}, this.buttonModel);

Button Events

Mojo's button widget only has one type of event, Mojo.Event.tap.

Examples

Activity Button

HTML

<div id="activityButton" x-mojo-element="Button"></div>

Mojo

SomeAssistant.prototype.setup = function() {
    this.activityButton = {
        'attributes': {
            'label': 'Activity Button',
            'type': Mojo.Widget.activityButton
        },
        'model': {
            'disabled': false
        }
    }
 
	/* use Mojo.View.render to render view templates and add them to the scene, if needed. */
 
	/* setup widgets here */
    this.controller.setupWidget('activityButton', this.activityButton.attributes, this.activityButton.model);
 
	/* add event handlers to listen to events from widgets */
    Mojo.Event.listen(this.controller.get('activityButton'), Mojo.Event.tap, this.doSomething.bindAsEventListener(this));
 
}
 
SomeAssistant.prototype.doSomething = function(event) {
    // some awesome code doing awesome things means the spinner is spinning
    this.controller.get('activityButton').mojo.activate();
 
    // the awesome code is finished doing awesome things, so stop the spinner
    this.controller.get('activityButton').mojo.deactivate();
}

Custom Styling

You can override the styling on Mojo buttons relatively easily. The following example will replace the standard Mojo button with a custom image:

First, add your own class to the button:

<div x-mojo-element="Button" id="my-button"  class="my-button"></div>

Then, add CSS to your app's stylesheet to override the defaults:

.my-button .palm-button {
   background-image: url(../images/button.png);
   height: 63px;
   -webkit-border-image: none; }
 
.my-button .palm-button.selected {
   background-image: url(../images/button-selected.png);
   height: 63px;
   -webkit-border-image: none; }