APL TouchWrapper



APL TouchWrapper

TouchWrapperは1つの子コンポーネントをラップして、タッチイベントに対応します。TouchWrapperは通常、リストで使用されます。以下のサンプルで示すように、これにより各リスト項目を個別に押すことができます。

TouchWrapperをFire TVデバイスで使用するにあたって問題が発生することがわかっています。

  • outputSpeechの再生中にTouchWrapperがリモートで選択された場合は、新しい応答があっても、outputSpeechの再生は継続されます。その新しい応答に関連付けられたoutputSpeechは、その前の応答に対するoutputSpeechの終了後に再生されます。

 

プロパティ

TouchWrapperコンポーネントには、コンポーネントのプロパティのほかに、次のプロパティがあります。列の意味については、こちらを参照してください

プロパティ デフォルト スタイル設定 動的 説明
item コンポーネント [ ] 表示する子項目です。
onPress コマンド [ ] このコンポーネントが押されたときに実行するコマンドです。すべてのコマンドはonPressハンドラー内部で実行できます。

TouchWrapperイベントのターゲットである場合、event.targetは以下の値を報告します。

"event": {
  "target": {
    "disabled": Boolean, // コンポーネントが無効な場合はtrue
    "id": ID,            // コンポーネントのID
    "uid": UID,          // ランタイムで生成されたコンポーネントの固有ID
    "height": Number,    // コンポーネントのdp単位の高さ(パディングを含む)
    "opacity": Number,   // コンポーネントの不透明度[0~1]
    "width": Number      // コンポーネントのdp単位の幅(パディングを含む)
  }
}

個別の画像でTouchWrapperを使用するサンプル

このサンプルでは、1つの画像がTouchWrapperでラップされています。画像が押されると、SendEventコマンドが送信されます。このSendEventコマンドに適切に対応できるようにスキルサービスコードを設定する必要があります。

{
    "type": "TouchWrapper",
    "item": {
        "type": "Text",
        "text": "さやには豆が5粒あります",
        "color": "#66DFFF",
        "fontSize": 30
    },
    "onPress": {
        "type": "SendEvent",
        "arguments": [
            "peasinapod"
        ]
    }
}

SequenceでTouchWrapperを使用するサンプル

この例では、TouchWrapperSequenceと組み合わせてリストデータを管理しています。各リスト項目は個別に押すことができます。

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

プロパティの説明

item/items

子コンポーネントまたはレイアウトです。複数の項目が与えられている場合は、コンポーネントの条件付きインフレートで説明した論理に従って1つの子だけが選択されます。

onPress

コンポーネントがタッチされたときに実行するコマンドです。event.source.valueは、TouchWrapperのchecked状態に設定されています。

生成されるイベントの形式は次のようになります。

"event": {
  "source": {
    "type": "TouchWrapper",
    "handler": "Press",
    "id": ID,          // TouchWrapperコンポーネントのID
    "uid": UID,          // ランタイムで生成されたコンポーネントの固有ID
    "value": Boolean   // TouchWrapperのchecked状態
  }
}

SendEventコマンドを使用して、ユーザーがコンポーネントを選択したときにAlexa.Presentation.APL.UserEventリクエストをスキルに送信します。