APL TouchWrapper

A TouchWrapper wraps a single child component and responds to touch events.

Properties

The TouchWrapper component has the following properties:

Property Type Default Styled Dynamic Description
item, items Component [ ] No No Child item to display

When the TouchWrapper is the source or target of an event, the following values are reported in event.source or event.target:

{
  // TouchWrapper-specific values
  "type": "TouchWrapper",

  // General component values
  "bind": Map,         // Access to component data-binding context
  "checked": Boolean,  // Checked state
  "disabled": Boolean, // Disabled state
  "focused": Boolean,  // Focused state
  "height": Number,    // Height of the component, in dp (includes the padding)
  "id": ID,            // ID of the component
  "opacity": Number,   // Opacity of the component [0-1]
  "pressed": Boolean,  // Pressed state
  "uid": UID,          // Runtime-generated unique ID of the component
  "width": Number      // Width of the component, in dp (includes the padding)
}

item, items

The child component or layout to display. The user can tap or select the component on the screen to invoke the actionable and touchable event handlers. If you provide multiple items, the TouchWrapper uses the single child logic described in APL Conditional Component Inflation to select and display one item.

Actionable properties

A TouchWrapper is an actionable component. The TouchWrapper inherits all of the actionable properties.

Touchable properties

A TouchWrapper is a touchable component. The TouchWrapper inherits all of the touchable properties.

For details about the source event the TouchWrapper generates, see Touchable Component Properties. The specific values used by TouchWrapper are:

event.source.type = "TouchWrapper"
event.source.value = Boolean    // The checked state of the touch wrapper

TouchWrapper examples

Individual component

In this example, the TouchWrapper wraps a Text component. When the user presses the text, the component runs a SendEvent command. The SendEvent command sends an Alexa.Presentation.APL.UserEvent request to the skill service. The skill service should include a handler to process UserEvent requests.

{
    "type": "TouchWrapper",
    "item": {
        "type": "Text",
        "text": "There are 5 peas in the pod",
        "color": "#66DFFF",
        "fontSize": 30
    },
    "onPress": {
        "type": "SendEvent",
        "arguments": [
            "peasinapod"
        ]
    }
}

For an example of a UserEvent handler, see Handle a UserEvent request.

List items in a Sequence

In this example, a Sequence uses a TouchWrapper for the item property. The Sequence displays the TouchWrapper one time for each item in the provided data array (payload.listdata). Because each list item is a TouchWrapper, the user can select any item from the list. The TouchWrapper runs the SendEvent command with details about the selected item.

{
  "type": "Sequence",
  "data": "${payload.listdata}",
  "scrollDirection": "vertical",
  "numbered": true,
  "grow": 1,
  "shrink": 1,
  "item": {
    "type": "TouchWrapper",
    "onPress": {
      "type": "SendEvent",
      "arguments": [
        "ItemSelected",
        "${ordinal}",
        "${data.item}"
      ]
    },
    "item": {
      "type": "Container",
      "direction": "row",
      "spacing": 0,
      "height": 120,
      "alignItems": "center",
      "items": [{
          "type": "Text",
          "number": "${ordinal}"
        },
        {
          "type": "Text",
          "text": "${data.item}",
          "style": "textStylePrimary2",
          "grow": 1,
          "shrink": 1,
          "spacing": 24
        }
      ]
    }
  }
}