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. To combine multiple components for the item
, use a Container
or Layout.
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
Touchable components include the gestures
array, which can specify an array of gesture handlers such as DoublePress
and LongPress
. For details about gestures, see Gestures. For examples, see the individual gesture handler topics:
TouchWrapper examples
Individual component
In this example, the TouchWrapper
wraps a Text
component. When the user presses the text, the component runs two commands:
- A
SendEvent
command. TheSendEvent
command sends anAlexa.Presentation.APL.UserEvent
request to the skill service. The skill service should include a handler to processUserEvent
requests. - A
SetValue
command that updates thetext
property of aText
component.
To see the results of the SetValue
command in this example, click the text.
To experiment with the SendEvent
command, copy this APL document to a full skill. The following example shows the UserEvent
request generated by the SendEvent
command.
{
"type": "Alexa.Presentation.APL.UserEvent",
"requestId": "amzn1.echo-api.request.1",
"timestamp": "2023-02-21T18:09:14Z",
"locale": "en-US",
"arguments": [
"peasinapod"
],
"components": {},
"source": {
"type": "TouchWrapper",
"handler": "Press",
"id": "fivePeasInAPodTouchWrapper",
"value": false
},
"token": "token-provided-in-the-RenderDocument-directive"
}
For an example of a UserEvent
handler, see Handle a UserEvent request.
List items in a Sequence
The following example shows a Sequence
that uses a TouchWrapper
for the item
property. The TouchWrapper
wraps a Text
component.
The Sequence
displays the TouchWrapper
one time for each item in the provided data array (touchWrapperInSequenceData.listItems
). Because each list item is a TouchWrapper
, the user can select any item from the list. The TouchWrapper
runs the SetValue
command to update a Text
component with information about the selected item, and the SendEvent
command to send a UserRequest
to the skill.
To experiment with the SendEvent
command, copy this APL document to a full skill. The following example shows the UserEvent
request generated by the SendEvent
command in this example.
{
"type": "Alexa.Presentation.APL.UserEvent",
"requestId": "amzn1.echo-api.request.1",
"timestamp": "2023-02-21T20:26:53Z",
"locale": "en-US",
"arguments": [
{
"itemOrdinal": 17,
"itemIndex": 16,
"action": "ItemSelected",
"itemId": "item_16"
}
],
"components": {},
"source": {
"type": "TouchWrapper",
"handler": "Press",
"id": "item_16",
"value": false
},
"token": "token-provided-in-the-RenderDocument-directive"
}
For details about the Sequence
properties, see Sequence
.
Related topics
- Actionable Component Properties
- Touchable Component Properties
- Gestures
- Alexa Design Guide: Alexa Presentation Language
Last updated: Dec 14, 2023