Mojo.Widget.Spinner

Namespace Detail

Overview

The Spinner widget provides all spinner behavior. Use the spinner to indicate that activity is taking place. The framework uses it as part of the activity button type, and you'll see it in many of the core applications. There are two sizes: the large Spinner is 128 pixels wide (and high) and the small Spinner is 32 pixels. (These dimensions are for the Pre screen and may vary on other devices, but the proportions and fit within the UI will be maintained.) All attribute properties are optional, but the spinnerSize is commonly used; set it to "large", the default, or "small". To start the Spinner, set its model property (default name is 'spinning') to true; to stop it, set the property to false.

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 .palm-spinner-container by default, but you can override this setting.
name Optional Any String Adds a unique name to the Spinner widget; generally used in templates.

Events

The Spinner widget has no events.

Instantiation

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

Attribute Properties

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

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

Methods

To invoke a method on a widget, use the scene controller's get method for the desired widget, and append mojo followed by the method.

Example:

this.controller.get('myWidget').mojo.getValue()

Method Arguments Description
start None Starts the spinner.
stop None Stops the spinner.
toggle None Changes the spinner state (spinning to not, stopped to spinning).