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