APL Pager



APL Pager

Pagerは、一連のコンポーネントを1つずつ表示します。通常、Pagerは、時系列に並べられたデータ項目を表示するために使用します。Pagerでは長い連続した形で項目が表示されないため、Sequenceとは異なります。

プロパティ

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

プロパティ 型 デフォルト スタイル設定 動的 説明
data データ： プロパティ none ✕ ✕ このContainerにバインドするデータです。
firstItem コンポーネントとレイアウトの配列 none ✕ ✕ 他のどの項目よりも先に含めるコンポーネントです。
initialPage 整数 0 ✕ ✕ 最初のページの（0から始まる）インデックスです。デフォルトは0です。
item/items コンポーネントとレイアウトの配列 [ ] ✕ ✕ データセットを配置するのに使用するコンポーネントです。
lastItem コンポーネントとレイアウトの配列 none ✕ ✕ 他のすべての項目の後に含めるコンポーネントです。
navigation normal、none、wrap、forward-only wrap ✕ ✕ 移動可能な方向を指定します。
onPageChanged コマンド配列 [] ✕ ✕ ページを切り替える場合に実行するコマンドです。

Pagerは、左から右に順番に並べられた一連のページとしてユーザーに表示されます。通常、ユーザーは、Pagerを左右にスワイプしてページを切り替えます。デバイスにタッチパネルが搭載されていない場合、Pagerはキーボードの入力（左右の矢印キーまたはTabキー）に応じて移動します。

PagerとSequenceでは動作が異なります。Sequenceは、連続した項目のリストとして表示されます。画面のサイズが小さい場合、ゆっくりスワイプするとSequenceには1つの項目しか表示されませんが、コンテンツ内をすばやく移動する高速スワイプモードがサポートされているため、「高速スクロールモード」に設定するとコンテンツの複数の項目が小さく表示されます。個々の項目は、隣り合って並べられた状態で表示されます。一方、Pagerでは、前後のページのいずれかの方向に少しスワイプするだけで、それまで見ていたページから新しいページへとコンテンツが切り替わります。

指定されない場合、Pagerコンポーネントのheightとwidthのデフォルトは100dpです。Pagerのheightとwidthは、絶対ディメンションまたは相対ディメンションのいずれかである必要があります。autoは使用できません。Pagerの子のheightとwidthは「100%」に固定されています。

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

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

data

任意のデータ配列です。データ配列がバインドされている場合、Pagerはデータ配列のインフレート方法を使用します。

firstItem

このプロパティが割り当てられた場合、1つの子のみのインフレート方法を使用して、1つのコンポーネントまたはレイアウトがPagerの先頭に追加されます。

item/items

Pagerに表示するコンポーネントとレイアウトの配列です。データプロパティが割り当てられている場合、Pagerはデータ配列のインフレート方法を使用します。データプロパティが割り当てられていない場合、Pagerは子コンポーネントの単純な配列のインフレート方法を使用します。

lastItem

このプロパティが割り当てられた場合、1つの子のみのインフレート方法を使用して、1つのコンポーネントまたはレイアウトがPagerに追加されます。

initialPage

表示する最初のページのインデックスです。インデックスは0から始まり、デフォルトは0です。firstItemが指定されている場合のインデックスは0になります。

navigationプロパティは、ユーザーがコンテンツ内を移動する方法を制御します。

  • normal： これがデフォルトです。ユーザーはPagerで前後に自由に移動することができます。
  • none： ユーザーはPagerで移動できません。ページが自動的に進行するメカニズムによって、ページが切り替わることが前提となります。
  • wrap： ユーザーは自由に移動することができます。最終ページの次は最初のページに戻ります。
  • forward-only： ユーザーは新しいページにのみ移動することができます。このモードは、ゲームやパズル向けです。

SetPageコマンドとAutoPageコマンドでPagerを移動できます。navigationプロパティは画面上のスワイプによるユーザー操作のみを制限します。

onPageChanged

onPageChangedハンドラーは、ページが新しいページに完全に切り替わったときに実行されます。生成されるイベントの形式は次のようになります。

"event": {
  "source": {
    "type": "Pager",
    "handler": "Page",
    "id": ID,          // PagerのID
    "uid": UID,          // ランタイムで生成されたコンポーネントの固有ID
    "value": NUMBER    // 新しいページのインデックス
  }
}

event.source.valueは、新しいページのインデックス（0から始まるインデックス）に設定されます。

Pagerのサンプル

{
  "type": "Pager",
  "items": [
    {
      "type": "Text"
      "text": "ページ#1で表示されるテキストコンテンツ"
    },
    {
      "type": "Text"
      "text": "ページ#2で表示されるテキストコンテンツ"
    }
  ]
}
Amazon Alexa
Amazon Appstore
Amazon Web Services
Amazon Dash Replenishment