APLコンポーネントの条件付きインフレート

レイアウトには子コンポーネントを含めることができます。子コンポーネントは、プリミティブコンポーネント、ほかのレイアウトのいずれかです。APLには、子コンポーネントの条件付きインフレートが一体化されています。コンポーネントの配列、プリミティブコンポーネントのwhenプロパティ、データバインディングを組み合わせて軽快な条件式を作成できます。こうした条件式は、次のような場合に使用できます。

1つの子のみ：コンポーネント候補で配列を構成し、1つのコンポーネントのみをインフレートします。
単純な配列：コンポーネントの配列から、一部のコンポーネントのみをインフレートします。
データ配列：データの配列を使用して、コンポーネントセットをインフレートします。

1つの子のみ

コンポーネント候補で配列を構成し、1つのコンポーネントのみをインフレートします。

概要	説明
使用場所	ユーザー定義のレイアウト、子を1つのみサポートするコンポーネント（ScrollView、Frame、TouchWrapper）、子を複数持つコンポーネントで1つの子だけをインフレートさせる`firstItem`や`lastItem`などのプロパティ
アルゴリズム	コンポーネントの配列を指定し、各コンポーネントの`when`プロパティを順番に評価します。`when`プロパティの評価結果が`true`になった最初のコンポーネントが使用されます。`when`プロパティが`true`となるコンポーネントがない場合は、どのコンポーネントもインフレートされません。`when`プロパティは、省略した場合はデフォルトで`true`になることに注意してください。
データバインディング	なし

1つの子のみをインフレートする場合のサンプル

この例では、viewportが円形の場合はcontainerが、viewportが長方形の場合はframeがインフレートされます。

"myLayout": 
{
  "parameters": [
    "title",
    "logo"
  ],
  "item": [
    {
      "when": "${viewport.shape == 'round'}",
      "type": "Container",...
    },
    {
      "type": "Frame",...
    }
  ]
}

子コンポーネントの単純な配列

コンポーネントの配列から、一部のコンポーネントのみをインフレートします。

概要	説明
使用場所	dataプロパティを指定しないSequence、Container、Pager
アルゴリズム	配列内の各コンポーネントのwhenプロパティを評価します。when句の評価結果がtrueの場合、そのコンポーネントはインフレートされ、子の配列に追加されます。
データバインディング	index、length、ordinal（オプション）の各値をバインドします。データバインディングを参照してください。

異なる項目をまとめてインフレートする場合には、項目を単純に配列化する手法を使用します。

この例では、Containerにニュース記事を表示します。テキスト見出しは常に表示され、画像はviewportの幅が高さよりも小さい場合にのみ表示されます。また、テキストの本文は常に表示されます。

{
  "type": "Container",
  "items": [
    {
      "type": "Text", 
      "style": "heading", 
      "text": "火星探査機オポチュニティが機能を停止したと発表されました"
    },
    {
      "type": "Image",
      "when": "${viewport.width < viewport.height}",
      "source": https://www.example.com/mars-rover.jpg
    },
    {
      "type": "Text",
      "style": "leader",
      "text": "信号が途絶えてから15年が経過したため、火星探査機オポチュニティは..."
    }
  ]
}

データ配列

データの配列を使用して、コンポーネントセットをインフレートします。

概要	説明
使用場所	dataプロパティを指定したSequence、Container、Pager
アルゴリズム	dataプロパティ配列の各要素を、データバインディングコンテキストの「data」にバインドします。バインドした要素ごとに、1つの子のみアルゴリズムで評価を行い、単一のコンポーネントを検索します。
データバインディング	data、index、length、ordinal（オプション）の各値をバインドします。

データバインディングを参照してください。

長さが不明なデータの配列を連結して表示する必要がある場合は、この方法を利用します。たとえば、レシピの手順を説明する場合を考えます。次のようなContainerであれば、データは適切にインフレートされます。

{
  "type": "Container",
  "direction": "column",
  "item": {
    "type": "Text",
    "text": "${index+1}. ${data}",
    "spacing": "smallSpace"
  },
  "data": [
    "オーブンを摂氏180度に予熱します。",
    "ミキサーを使ってバターと砂糖をなめらかになるまで混ぜ合わせます。",
    "ミキサーをオンにしたまま、バターと砂糖を混ぜたものに卵を一度に1つずつ加えて、なめらかになるまでかき混ぜます。",
    "小麦粉、ベーキングパウダー、塩を別の...."
  ]
}

コンポーネントの配列では、配列内のwhenプロパティがtrueである最初の配列が選択されるため、異なるデータをまとめてインフレートすることもできます。この例では、「header」プロパティのあるデータ項目を、単純なTextコンポーネントを使用してインフレートしています。他のデータ項目は、キャプション付きの画像としてインフレートされます。

{
  "type": "Sequence",
  "items": [
    { 
      "when": "${data.header}",
      "type": "Text",
      "text": "${data.header}"
    },
    {
      "type": "Container",
      "direction": "row",
      "numbered": true,
      "items": [ 
        { 
          "type": "Image", 
          "source": "${data.url}"
        },
        {
          "type": "Text",
          "text": "${ordinal}. ${data.caption}"
        }
      ]
    }
  ],
  "data": [
    { 
      "header": "ビーチの写真" 
    },
    { 
      "url": "https://images.example.com/photos/248797/xxx.jpg",
      "caption": "シーン248797"
    },
    { 
      "url": "https://images.example.com/photos/237739/yyy.jpg",
      "caption": "ビーチボート、昼間、曇り237739" 
    },
    { 
      "header": "犬の写真" 
    },
    { 
      "url": "https://images.example.com/photos/356378/zzz.jpg",
      "caption": "愛すべき動物、犬356378" 
    }
  ]
}