APL TouchWrapper

APL TouchWrapper

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

プロパティ

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を使用するサンプル

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

{
  "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リクエストをスキルに送信します。

このページは役に立ちましたか？