APL TouchWrapper
A TouchWrapper
wraps a single child component and responds to touch events.
Properties
The TouchWrapper component has the following properties:
- All actionable component properties
- All touchable component properties
- All base component properties
- The
TouchWrapper
properties listed in following table. See the meaning of the columns.
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
}
]
}
}
}