Help us understand the problem. What is going on with this article?

【SAPUI5】MVCを完成させよう

More than 1 year has passed since last update.

はじめに

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

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

モデルの種類

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

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

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

モデルの実装

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

ゴール

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

ステップ

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

1. モデルを定義する

新しく"model"フォルダを作り、その配下に"Price.json"を作成します。
WS000012.JPG
以下のコードを入力します。

{ 
    "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. アプリを実行する

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away