This section includes all of the Mojo widgets. Each widget section includes a brief description repeating some of the information from Chapters 3, 4, and 5, followed by an enumeration of the widget’s attribute and model properties, relevant events, and public methods.
Buttons are the most basic UI element, bounding an action to a region. When a button is pushed, it can change state but gracefully returns to the previous state, like a doorbell.
Events |
---|
Mojo.Event.tap |
Methods | |
---|---|
activate() | For an activity button, start the spinner |
deactivate() | For an activity button, stop the spinner |
A Check Box widget is used to control and indicate a binary state value in one element.
Model properties | Type | Description |
---|---|---|
value | Boolean | Current value of widget |
disabled | Boolean | Default property that when true, disables the widget |
Events |
---|
Mojo.Event.propertyChange |
The date picker allows selection of month, day, and year values.
Model properties | Type | Description |
---|---|---|
date | Date | Date object set to the widget value |
Events |
---|
None |
Drawers are container widgets that can be open, allowing child content to be displayed normally, or closed, keeping it out of view.
Model properties | Type | Description |
---|---|---|
open | Boolean | Current state of the widget; set to true when open |
Events |
---|
Mojo.Event.propertyChange |
Methods | |
---|---|
setOpenState(open) | Sets the open state to open or closed |
getOpenState() | Returns current value of open state |
toggleState() | Change the drawer’s open state to the opposite of what it is now |
Mojo.FilePicker.pickFile (params,
stageController) |
The File Picker presents a file browser that lets the user navigate the directory structure and optionally select a file. The File Picker lets users view and select files from the media partition, and allows filtering by file type (e.g., file, image, audio, or video).
Events |
---|
None |
The Filter Field can be applied to any case where you want to process the field contents and update on-screen elements based on the entered string.
Attribute properties | Type | Description |
---|---|---|
delay | Integer | Delay between key strokes for a filter event, in milliseconds |
disabledProperty | String | Name of model property for disabled state |
Model properties | Type | Description |
---|---|---|
disabled | Boolean | Default property that, when true, disables the widget |
Events |
---|
Mojo.Event.filter |
Methods | |
---|---|
open() | Open the widget |
close() | Close the widget |
setCount(integer) | Set the number to be shown in the results bubble in the Filter Field |
The Filter List combines a Filter Field and a List. It is intended to display a variable length list of objects, built by a special callback function that filters the list based on the contents of the filter field.
Model properties | Type | Description |
---|---|---|
disabled | Boolean | Default property that, when true, disables the widget |
Events |
---|
Mojo.Event.listChange Mojo.Event.listTap Mojo.Event.listAdd Mojo.Event.listDelete Mojo.Event.listReorder Mojo.Event.filter |
You can use an ImageView
for
displaying single images, but it is intended as a scrolling viewer,
flicking left and right through a series of images.
Attribute properties | Type | Description |
---|---|---|
highResolutionLoad | Integer | Time to wait before switching photo to high res |
noExtractFS | Boolean | Flag to prevent looking up a high res version |
fslimitZoom | Boolean | Flag to prevent or limit zooming |
Model properties | Type | Description |
---|---|---|
onLeftFunction | Function | Called after a left scroll and transition |
onRightFunction | Function | Called after a right scroll and transition |
Events |
---|
Mojo.Event.imageViewChanged |
The Integer Picker offers a selection between minimum and maximum integer values, both of which are specified as properties.
Model properties | Type | Description |
---|---|---|
value | Integer | Current value of the widget |
Events |
---|
Mojo.Event.propertyChange |
List is the most common and possibly the most powerful Mojo widget. Objects are rendered into list items using provided HTML templates, and may be variable height and/or include other widgets.
Model properties | Type | Description |
---|---|---|
items | Array | An array of objects to
display in the list; required unless |
Events |
---|
Mojo.Event.listChange Mojo.Event.listTap Mojo.Event.listAdd Mojo.Event.listDelete Mojo.Event.listReorder |
The List Selector enables the selection of one of many options, presented in a pop-up list in which there is no practical limit to the number of options presented. This is similar to the Submenu widget behavior.
Events |
---|
Mojo.Event.propertyChange |
A text field used for passwords or some other type of confidential information, the Password Field provides many of the Text Field features, but masks the display. Any entered text is displayed as a bullet or “•” character.
Model properties | Type | Description |
---|---|---|
value | Boolean | Plain-text value of the widget |
Events |
---|
Mojo.Event.propertyChange |
Progress Bar displays a narrow horizontal bar with an incremental internal bar to show progress. Use a Progress Bar or Pill to show download progress, when loading from a database, or anytime you initiate a long-running operation and have a sense of the duration.
Model properties | Type | Description |
---|---|---|
value | Integer | Value of the widget |
title | String | Dynamic title to show on bar |
image | String | File path relative to application folder for dynamic image to show on bar |
Events |
---|
Mojo.Event.progressComplete |
Methods | |
---|---|
reset() | Reset progress to 0 |
cancelProgress() | Stop the progress and freeze bar display in current state |
Progress Pill displays a broad horizontal bar with an incremental pill to show progress. Use a Progress Bar or Pill to show download progress, when loading from a database, or anytime you initiate a long-running operation and have a sense of the duration.
Model properties | Type | Description |
---|---|---|
value | Integer | Value of the widget |
title | String | Dynamic title to show on bar |
image | String | File path relative to application folder for dynamic image to show on bar |
Events |
---|
Mojo.Event.progressIconTap Mojo.Event.progressComplete |
Methods | |
---|---|
reset() | Reset progress to 0 |
cancelProgress() | Stop the progress and freeze bar display in current state |
For media or other applications in which you want to show progress as part of a tracking slider, the Progress Slider is an ideal choice. Combining the Slider widget with the Progress Pill, the behavior is fully integrated, but not all of the configuration options are represented.
Model properties | Type | Description |
---|---|---|
value | Integer | Value of the widget |
Events |
---|
Mojo.Event.propertyChange Mojo.Event.progressComplete |
Methods | |
---|---|
reset() | Reset progress to 0 |
The Radio Button presents each button as a labeled selection option in a horizontal array, where only one option can be selected at a time.
Model properties | Type | Description |
---|---|---|
value | Boolean | Current value of widget |
disabled | Boolean | Default property that, when true, disables the widget |
Events |
---|
Mojo.Event.propertyChange |
There is a simple Rich Text Edit widget that behaves similar to a multi-line
text field, but in addition supports applying Bold, Italic, and
Underline styles to arbitrary runs of
text within the field. To enable the styling, set the
Application menu’s RichTextEditItems
property to
true
.
The Scroller widget provides the scrolling behavior in Mojo. Scrollers can be applied to any div content and set to one of six scrolling modes.
Attribute properties | Type | Description |
---|---|---|
| String | Scrolling mode; one of
|
Model properties | Type | Description |
---|---|---|
snapElements | Array | Array of DOM elements used as snap points for horizontal or vertical scrolling |
Events |
---|
Mojo.Event.propertyChange |
The Slider presents a range of selection options in the form of a horizontal slider with a control knob that can be dragged to the desired location.
Model properties | Type | Description |
---|---|---|
value | Integer | Value of the widget |
Events |
---|
Mojo.Event.propertyChange |
Use a Spinner to show that an activity is taking place. The framework uses a Spinner as part of any activity button, and you’ll see it used in the core applications. There are two sizes: the large Spinner is 128 × 128 pixels, and the small Spinner is 32 × 32.
Model properties | Type | Description |
---|---|---|
spinning | Boolean | Spinner state; set to true if spinning |
Events |
---|
Mojo.Event.propertyChange |
Methods | |
---|---|
start() | Start the spinner |
stop() | Stop the spinner |
toggle() | Change the spinner from start to stop or from stop to start |
The basic text widget that supports all general text requirements: single or multi-line text entry, with common styles for labels, titles, headings, body text, line items, and item details. The editing tools include basic entry and deletion, symbol and alternate character sets, cursor movement, selection, cut/copy/paste, and auto text correction.
Model properties | Type | Description |
---|---|---|
value | Boolean | Value of the widget |
disabled | Boolean | Default property that when true, disables the widget |
Events |
---|
Mojo.Event.propertyChange |
The Time Picker enables selection of hours, minutes, and either A.M. or P.M. for time selection. The picker will suppress the A.M./P.M. capsule if the 24-hour time format is selected in the user preferences or by the locale.
Model properties | Type | Description |
---|---|---|
time | Date | Date object set to the widget value |
Events |
---|
Mojo.Event.propertyChange |
The Toggle Button is another widget for displaying and controlling a binary state value. As with the Check Box, the Toggle Button will switch between two states each time it is tapped.
Model properties | Type | Description |
---|---|---|
value | Boolean | Current value of widget |
disabled | Boolean | Default property that, when true, disables the widget |
Events |
---|
Mojo.Event.propertyChange |
To embed a contained web object, declare and instantiate a WebView
widget. You can use it render local
markup or to load an external URL; as long as you can define the source
as a reachable URL, you can use a WebView
to render that resource.
Model properties | Type | Description |
---|---|---|
None |
3.145.155.91