question

Hey Ben, Great question. I'll be looking into it and get back to you soon.

Hi Ben, I did some research and have answers to your questions.

To build a responsive button with a TouchWrapper, you can do the following steps

Setting Commands

1. Set the onPress command to execute a parallel command

   {
   "type": "TouchWrapper",
   "item": {
     "type": "Text",
     "text": "Button",
   },
   "onPress": {
     "type": "Parallel",
     "commands": [
         // Additional commands go here
     ]
   }
   }
   

2. Add SetState and SendEvent execute commands to the commands array

   a) Set SetState command to update disabled to true

   {
     "type": "TouchWrapper",
     "item": {
       "type": "Text",
       "text": "Button",
     },
     "onPress": {
       "type": "Parallel",
       "commands": [
         {
           "type": "SetState",
           "state": "disabled",
           "value": true
         }
       ]
     }
   }
   

   b) Set SendEvent command to send data to the server (you will need to setup a handler for it)

   {
     "type": "TouchWrapper",
     "item": {
       "type": "Text",
       "text": "Button",
     },
     "onPress": {
       "type": "Parallel",
       "commands": [
         {
           "type": "SetState",
           "state": "disabled",
           "value": true
         },
         {
           "type": "SendEvent",
           "arguments": [
             "sendevent tw1"
           ]
         }
       ]
     }
   }
   

Setting Styles

At the top level of the APL document

1. Import alexa-styles to the import array:

   "import": [
     {
       "name": "alexa-styles",
       "version": "1.0.0"
     }
   ]
   

2. Add an evaluated style to styles. Here we add two styles that we could use to toggle the color of the text depending on whether it is clicked or not. To toggle the styles we use the when clause to check the boolean value of ${state.disabled} . When the value is true the style will apply.

   "styles": {
       "textStylePressable": {
         "values": [
         {
           "color": "yellow"
         },
         {
           "when": "${state.disabled}",
           "color": "grey"
         }
       ]
     }
   }
   

3. Set the style attribute for the Text component nested under TouchWrapper to textStylePressable that we just defined.

   {
     "type": "TouchWrapper",
     "item": {
       "type": "Text",
       "text": "Button",
       "style": "textStylePressable" //set the style attribute
     },
     "onPress": {
       ... // onPress code
     }
   }
   

4. Set the inheritParentState attribute to true on the TouchWrapper and Text component for the styles to apply.

   {
     "type": "TouchWrapper",
     "inheritParentState": true, //set inheritParentState to true
     "item": {
       "type": "Text",
       "inheritParentState": true, //set inheritParentState to true
       "text": "Button",
       "style": "textStylePressable"
     },
     "onPress": {
       ... // onPress code
     }
   }
   

These are the steps to create an interactive component using APL, but you could customize it further based on the style of your skill.

In regards to the JSON discrepancy being sent between the simulator and device, I implemented a Sequence with a TouchWrappers that used a SendEvent command and did not see the discrepancy. Would you mind sharing your APL document?

Let me know if you have any questions about this.

References:

• https://developer.amazon.com/docs/alexa-presentation-language/apl-style-definition-and-evaluation.html
• https://developer.amazon.com/docs/alexa-presentation-language/apl-styled-properties.html#styled-properties
• https://developer.amazon.com/docs/alexa-presentation-language/apl-touchwrapper.html
• https://developer.amazon.com/docs/alexa-presentation-language/apl-standard-commands.html#parallel-command

To get this to work I had to not "inheritParentState" on the TouchWrapper. That makes more sense to me since the parent of the TouchWrapper is not disabled. Although maybe I'm misinterpreting something in the example, it's hard to tell without a full example.

Awesome answer @Pan@Amazon Could you also help for the use case when someone might want to set the state of some other component on the document as well in addition to the component itself that was clicked.