2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-02-12

この記事の目的

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

SAPUI5を始めた頃、<List>はわかるのですが、その下に<items>がつくというのはどのような法則によるものか、頭を悩ませていました。
この記事では、「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
注)aggregationの種類により、一つのオブジェクトしか入らないものもあります

XMLビューには何をどういう順番で書けばいいのか

この問いに対する答えは、APIリファレンスにあります。
例として、Listコントロールのページを見てみましょう。通常、四角で囲った部分にAggregationsという項があるのですが、このコントロールにはAggregationsがありません。
list.png

そんなときは、親のコントロールであるsap.m.ListBaseを見てみましょう。Aggregationsがありました。
listbase.png

Aggregationsを見ると、みんな小文字で始まっていますね。
image.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

補足:デフォルトのaggregationについて

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

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

2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?