【SAPUI5】XMLビューには何をどういう順番で書けばいいのか問題

##この記事の目的
SAPUI5のXMLビューに使われるタグには、コントロールを表す（大文字で始まる）ものと、そうでない（小文字で始まる）ものがあります。
以下の例でいうと`<List>`は前者、`<items>`は後者です。

SAPUI5を始めた頃、`<List>`はわかるのですが、その下に`<items>`がつくというのはどのような法則によるものか、頭を悩ませていました。
この記事では、「XMLビューには何をどういう順番で書けばいいのか」について説明します。

```xml
<mvc:View
	controllerName="sap.m.sample.ObjectListItem.List"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns="sap.m">
	<List
		items="{/ProductCollection}"
		headerText="Products">
		<items>
			<ObjectListItem
				title="{Name}"
				type="Active"
				press="onListItemPress"
				number="{
					parts:[{path:'Price'},{path:'CurrencyCode'}],
					type: 'sap.ui.model.type.Currency',
					formatOptions: {showMeasure: false}
				}"
				numberUnit="{CurrencyCode}">
				<firstStatus>
					<ObjectStatus
						text="{Status}"
						state="{
							path: 'Status',
							formatter: 'sap.m.sample.ObjectListItem.Formatter.status'
						}" />
				</firstStatus>
				<attributes>
					<ObjectAttribute text="{WeightMeasure} {WeightUnit}" />
					<ObjectAttribute text="{Width} x {Depth} x {Height} {DimUnit}" />
				</attributes>
			</ObjectListItem>
		</items>
	</List>
</mvc:View>
```

##小文字で始まるのはaggregation
大文字で始まるのはコントロールであるのに対し、小文字で始まるのはaggregationです。コントロールは、その中に複数のオブジェクトを入れることができます。これらのオブジェクトを束ねる器のようなものがaggregationです。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/276021/c956e498-0b79-1b1e-602d-30b54543c8ca.png)
注）aggregationの種類により、一つのオブジェクトしか入らないものもあります

##XMLビューには何をどういう順番で書けばいいのか
この問いに対する答えは、APIリファレンスにあります。
例として、[List](https://sapui5.hana.ondemand.com/#/api/sap.m.List)コントロールのページを見てみましょう。通常、四角で囲った部分にAggregationsという項があるのですが、このコントロールにはAggregationsがありません。
<img width="418" alt="list.png" src="https://qiita-image-store.s3.amazonaws.com/0/276021/b4c00971-02d7-526d-ccb4-179f370ac3c2.png">

そんなときは、親のコントロールであるsap.m.ListBaseを見てみましょう。Aggregationsがありました。
<img width="649" alt="listbase.png" src="https://qiita-image-store.s3.amazonaws.com/0/276021/8eba371f-a800-8c37-9b26-6fedbd7c5fc6.png">

Aggregationsを見ると、みんな小文字で始まっていますね。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/276021/17d12fd3-d7ad-a267-03f2-1093c908ece5.png)

aggregationの中には対応するType（コントロール）のオブジェクトを入れることができます。itemsに対応するのはsap.m.ListItemBaseです。itemsの中にはListItemBase、またはこれを継承するコントロールを入れられるということです。
冒頭の例ではObjectListItemが入っていました。ObjectListItemもListItemBaseを継承しています。

###つまるところ、何をどういう順番で書けばいいのか
これに対する答えは以下のようになります。

- コントロール、aggregation、コントロール、aggregation…の順に書く（コントロールをaggregationsでサンドする
- コントロールがどのようなaggregationを持っているかはAPIリファレンスを見る

###調査の流れ
前提として、作りたいもののイメージは決まっていることとします。
リファレンスだけを頼りにする場合は以下の流れとなります。
※実際にはサンプルプログラムを見たりすることと思います。

1. 使用するコントロールのリファレンスを見る（場合によっては親クラスを見る）
2. Aggregationsの欄を見る
3. aggregationの名前のタグ名で囲って、Typeで指定されたクラスのコントロールを中に入れる
4. 必要に応じて1.に戻る（3.で指定したコントロールにaggregationを追加する場合）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/276021/085456cd-70d2-b969-771b-743699e1f66d.png)

##補足：デフォルトのaggregationについて
Aggregationsの一覧で、名前の横に(default)とついているものがあります。これは、このaggregationは明示的に書かなくても自動的に挿入されるということを表します。`<items>`のタグを入れなくてもエラーになることはありません。ディベロッパー向けの[ベストプラクティス](https://sapui5.hana.ondemand.com/#/topic/b0d7db7930f64b9399dc2b4979293873)を見ると、ビューをシンプルにするためにデフォルトaggregationは書かないことを推奨しています。

>Omit the content or items tag for controls that define default aggregations.