【SAPUI5】MVCを完成させよう

はじめに

前々回の記事（MVCで作ってみよう）ではビュー、コントローラーの実装まで行いました。今回は、モデルを使ってデータを表示させます。これでモデル、ビュー、コントローラーがそろってMVCが完成します。

【前提ステップ】
【SAPUI5】MVCで作ってみよう
【SAPUI5】Component.jsとmanifest.json

モデルの種類

SAPUI5では、以下のモデルを使うことができます。

• ODataモデル：サーバとデータをやり取りするのに使用します。データはサーバ側に持ちます。
• JSONモデル：クライアント側で持つ、JSON形式のデータセットです。
• XMLモデル：クライアント側で持つ、XML形式のデータセットです。
• Resourceモデル：主に多言語対応のために、翻訳用のテキストを定義するのに使用します。

JSONモデルとXMLモデルは、基本的には小さいデータセットを扱うのに使用します。

モデルの実装

今回はJSONモデルで簡単なデータセットを定義し、それを画面に表示させてみます。

ゴール

ボタンの下にモデルから取得したテキストが表示されるようにします。

ステップ

1. モデルを定義する
2. manifest.jsonにモデルを追加する
3. ビューにテキストを追加する
4. アプリを実行する

1. モデルを定義する

新しく"model"フォルダを作り、その配下に"Price.json"を作成します。

以下のコードを入力します。

{ 
    "product" : {
        "name" : "pumpkin",
        "price": 150
    }
}

2. manifest.jsonにモデルを追加する

manifest.jsonの "sap.ui5"のセクションの一番下に、以下のコードを追加します。

    "sap.ui5": {
        "_version": "1.2.0",
                <省略>
        "models": {
            "mPrice":{
                "type": "sap.ui.model.json.JSONModel",
                "uri": "model/Price.json"
            }
        }
    }

モデル名は任意です。ここではわかりやすいように先頭にmをつけています。
- type：JSONファイルなので、"sap.ui.model.json.JSONModel"を指定します。
- uri：モデルのファイルパスを指定します。

3. ビューにテキストを追加する

App.view.xmlを以下のように変更します。

<mvc:View 
    controllerName="test.helloworld.controller.App" 
    xmlns="sap.m" xmlns:l="sap.ui.layout" 
    xmlns:mvc="sap.ui.core.mvc">
    <l:VerticalLayout class="sapUiContentPadding">
        <Button text="Say Hello" press="onShowHello"/>
        <Text text="{mPrice>/product/name}"/>
        <Text text="{mPrice>/product/price}"/>
    </l:VerticalLayout>
</mvc:View>

VerticalLayoutは要素を縦に整列させるために入れました。ここで注目するのは、Textに指定した値です。
{mPrice>/product/name}のように波カッコで囲むと、モデルからデータをバインド（割り当て）すると解釈されます。指定する値は左から順に以下の通りです。

1. manifest.jsonファイルで指定したモデル名
2. オブジェクト名
3. キー

モデル名の後ろにスラッシュをつけると、絶対パスを意味します。

4. アプリを実行する

実行結果は以下のようになります。