Mod Examples

Follow the links on this page to explore pre-defined demos and source code of Mod ui components and features in Mfiddle.

Mod Components

The following components are pre-built Mod components.

Text

• Hello World
• Set text programmatically
• Set text with a binding

Page Controls

• Simple repetition
• Simple substitution

Converters

• Number converters

Composers

• Press composer
• Translate composer

Pattern

• Sorting a Repetition

Controllers

• Tree Controller

UI Components (Digit)

The following components are part of the touch-optimized Digit widget set, which is part of the default Mod installation.

Button

• Button with an explicit identifier (used to link to a handler method)
• Button with a default identifier (serialization label is the default identifier)
• Submit button without a specific handler (the handleAction() method will be called on when the “action” event is dispatched)

TextField

• A simple text field
• A text field with a placeholder
• A disabled text field enabled by a button click
• A text field action

TextArea

• A simple text area

Slider

• A simple slider
• Two-way binding between a slider and a text field

NumberField

• A simple number field
• Bindings between number fields

Select

• A simple select
• A select powered by a range controller
• A select synchronized with a repetition

Checkbox

• A simple checkbox

RadioButton

• A radio button group

Image

• An image

List

• A list of categories

Draw Cycle

The draw cycle is a loop that allows components to change their element’s DOM structure without troublesome reflow issues.

• Changing the background color of an element with a slider