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

APL TouchWrapper

A TouchWrapper wraps a single child component and responds to touch events. TouchWrappers are commonly used in lists where each list item can be individually pressed, as shown in the samples below.

A known issue occurs with TouchWrapper on Fire TV devices:

  • If a TouchWrapper is selected using the remote while outputSpeech is playing, the outputSpeech continues playing even after a new response appears. Any outputSpeech associated with the new response is played after the previous response's outputSpeech is finished.

 

Properties

The TouchWrapper component has the following properties in addition to the Component properties. See the meaning of the columns here.

Property Type Default Styled Dynamic Description
item Component [ ] No No Child item to display
onPress Command [ ] No No Command to fire when this component is pressed. All commands are allowed inside an onPress handler.

When the TouchWrapper component is the target of an event, event.target reports the following values:

"event": {
  "target": {
    "disabled": Boolean, // True if the component is disabled
    "id": ID,            // ID of the component
    "uid": UID,          // Runtime-generated unique ID of the component
    "height": Number,    // Height of the component, in dp (includes the padding)
    "opacity": Number,   // Opacity of the component [0-1]
    "width": Number      // Width of the component, in dp (includes the padding)
  }
}

Sample TouchWrapper for individual image

In this example, a single image is wrapped with a TouchWrapper. When pressed, a SendEvent command is sent. The skill service code should set up an appropriate response to this SendEvent command.

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

Sample TouchWrapper with Sequence

In this example, a TouchWrapper is used in conjunction with a Sequence to manage list data. Each list item can be individually pressed.

{
  "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
        }
      ]
    }
  }
}

Property descriptions

item(s)

The child component or layout. If multiple items are provided, a single child is chosen using the logic described in Conditional component inflation.

onPress

Command(s) to execute when the component is touched. The event.source.value is set to the checked state of the TouchWrapper.

The event generated has the form::

"event": {
  "source": {
    "type": "TouchWrapper",
    "handler": "Press",
    "id": ID,          // ID of the touch wrapper component
    "uid": UID,        // Runtime-generated unique ID of the component
    "value": Boolean   // The checked state of the touch wrapper
  }
}

Use the SendEvent command to send your skill an Alexa.Presentation.APL.UserEvent request when the user selects the component.