Merci de votre visite. Cette page est disponible en anglais uniquement.

Actionable Component Properties

Actionable components are components that can directly receive input from touch, cursor, or keyboard events. This document provides the set of properties common to all actionable components.

Actionable components

The following list of components are actionable:

Properties

In addition to the common component properties and their own component-specific properties, all actionable components support the following properties:

Property Type Default Styled Dynamic Description
onFocus Array of command [] No No Command to execute when the component receives focus.
onBlur Array of command [] No No Command to execute when the component loses focus.
handleKeyDown Array of keyboard handler [] No No Keyboard handler(s) to evaluate when the component receives a key down.
handleKeyUp Array of keyboard handler [] No No Keyboard handler(s) to evaluate when the component receives a key up.

onFocus

Command(s) to execute when the component receives focus.

The event.source.focused value is set to the focused state of the component. The event.source.value is set to the standard source value for the component see: Event source property.

Components with the Disabled state set to true cannot receive focus, and hence will not execute the onFocus event handler. If a component has focus and then has it's Disabled state set to true, the component will lose focus and the onBlur event handler will be executed.

The event generated has the form:

"event": {
  "source": {
    "type": NAME,      // The type of the component that generated this event
    "handler": "Focus",
    "id": ID,          // ID of the component
    "uid": UID,        // Runtime-generated unique ID of the component
    "value": Any,      // Standard source value for the component
    "focused": Boolean // The focused state of the component
  }
}

The event type property is set to the name of the component; for example, "TouchWrapper", "ScrollView", "Sequence", etc.

onBlur

Command(s) to execute when the component loses focus.

The event.source.focused value is set to the focused state of the component. The event.source.value is set to the standard source value for the component see: Event source property.

Components with the Disabled state set to true cannot receive focus, but if a component has focus and then has it's Disabled state set to true, the component will lose focus and the onBlur event handler will be executed.

The event generated has the form:

"event": {
  "source": {
    "type": NAME,      // The type of the component that generated this event
    "handler": "Blur",
    "id": ID,          // ID of the component
    "uid": UID,        // Runtime-generated unique ID of the component
    "value": Any,      // Standard source value for the component
    "focused": Boolean // The focused state of the component
  }
}

The event type property is set to the name of the component; for example, "TouchWrapper", "ScrollView", "Sequence", etc.

handleKeyDown

An array of keyboard event handlers to execute when a key is pressed on the keyboard or when a key auto-repeats. The keyDown event is generated whenever possible; for example pressing the "shift" key should generate a keyDown event.

The event generated has the form:

"event": {
  "source": {
    "type": NAME,         // The type of the component that generated this event
    "handler": "KeyDown",
    "id": ID              // ID of the component
    "uid": UID,           // Runtime-generated unique ID of the component
    "value": Any          // Standard source value of the component
  },
  "keyboard": {
    "altKey":   Boolean
    "code":     String,
    "ctrlKey":  Boolean,
    "key":      String,
    "metaKey":  Boolean,
    "repeat":   Boolean,
    "shiftKey": Boolean
  }
}

For more details on the keyboard property, refer to the keyboard events documentation.

handleKeyUp

An array of keyboard event handlers to execute when a key is released on the keyboard. The keyUp event is generated whenver possible and not just for text entry. For example, releasing the "shift" key on a keyboard should generate a keyUp event.

The event generated has the form:

"event": {
  "source": {
    "type": NAME,         // The type of the component that generated this event
    "handler": "KeyUp",
    "id": ID              // ID of the component
    "uid": UID,           // Runtime-generated unique ID of the component
    "value": Any          // Standard source value of the component
  },
  "keyboard": {
    "altKey":   Boolean
    "code":     String,
    "ctrlKey":  Boolean,
    "key":      String,
    "metaKey":  Boolean,
    "repeat":   Boolean,
    "shiftKey": Boolean
  }
}

The event type property is set to the name of the component; for example, "TouchWrapper", "ScrollView", "Sequence", etc.

For more details on the keyboard property, refer to the keyboard events documentation.