Spinner

From WebOS101

Contents 1 Introduction 2 Setup 2.1 Declaration 2.2 Instantiation 2.3 Attributes 2.4 Model Properties 2.5 Methods 2.6 Events 3 Example Usage 4 Advanced uses 5 Useful Links

Introduction

The Spinner widget is a very simple widget that can be used to show that activity is taking place in your app. It is small or large spinning circle that you can start or stop at will.

Setup

As with most all widgets you must first include some HTML in your view to indicate where the Spinner should be positioned and the instantiate the widget somewhere in your code. It's often helpful to hide the Spinner, show it when needed and then hide it when not needed.

Declaration

<div x-mojo-element="Spinner" id="spinnerId" class="spinnerClass" name="spinnerName"></div>

Properties	Required	Value	Description
x-mojo-element	Required	Spinner	Declares the widget as type 'Spinner'
id	Required	Any String	Identifies the widget element for use when instantiating or rendering
class	Optional	Any String	Spinner uses the .palm-spinner-container by default but you override this setting
name	Optional	Any String	Add a unique name to the spinner widget; generally used in templates when used

Instantiation

this.controller.setupWidget("spinnerId",
    this.attributes = {
        spinnerSize: "large"
    },
    this.model = {
        spinning: false
    }
);

Attributes

Attribute Property	Type	Required	Default	Description
property	String	Optional	spinning	DEPRECATED Name of model property for this widget instance
modelProperty	String	Optional	spinning	Name of model property for this widget instance; default is "spinning"
spinnerSize	String	Optional	Mojo.Widget.spinnerSmall	Either Mojo.Widget.spinnerLarge or Mojo.Widget.spinnerSmall (small=32 or large=128)
superClass	String	Optional	.palm-activity-indicator	Specifies the CSS class name for the background image when you specify a custom
startFrameCount	Integer	Optional	None	if the spinner widget is in custom mode, this specifies the number of frames allocated to the pre-main loop animation
mainFrameCount	Integer	Optional	10	if the spinner widget is in custom mode, this specifies the number of frames allocated to the main loop animation
finalFrameCount	Integer	Optional	None	if the spinner widget is in custom mode, this specifies the number of frames allocated to the post-main loop animation
frameHeight	Integer	Optional	small	Explicitly sets the frame height of the animation (small=32 or large=128)
fps	Integer	Optional	10	Number of frames per second

Model Properties

The Spinner only has one model property: spinning. It can be either true or false.

Model Property	Type	Required	Default	Description
spinning	Boolean	Required	false	Spinner state, true is spinning

Methods

Method	Arguments	Description
start	None	Start the spinner
stop	None	Stop the spinner
toggle	None	Change the spinner (spinning to not, stopped to spinning)

Events

The Spinner has no events.

Example Usage

Advanced uses

Here's the Extended widgets example of a Mojo Spinner Widget:

Extended Spinner

Useful Links

• Palm Developer Center: Mojo.Widget.Spinner