APL TouchWrapper (APL 1.3 and earlier)
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.
- Properties
- Sample TouchWrapper for individual image
- Sample TouchWrapper with Sequence
- Property descriptions
Properties
The TouchWrapper component has the following properties in addition to the base component properties. See the meaning of the columns.
Property | Type | Default | Styled | Dynamic | Description |
---|---|---|---|---|---|
item |
Component | [ ] | No | No | Child item to display |
onPress |
Array of commands | [ ] | No | No | Command to fire when this component is pressed. You can use any commands in the 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, 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.
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 run 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.
Last updated: Nov 28, 2023