【SAPUI5】Data Typeを指定して表示形式を整える

##はじめに
前回の記事で、複数アイテムをリストで表示させました。
結果を見てみると、金額のところには複数の通貨がありますがすべて整数で表示されています。
本来、EURであれば小数点以下2桁まで表示されるべきです。
こんなとき、コントロールのtypeという属性に「通貨」というデータ型を指定すると、通貨に合った形式で金額を表示することができます。
sap.ui.model.typeというクラスに様々なデータ型が用意されていますので、今回はそれらを使ってデータ形式を整えてみます。

前回の結果

##通貨の表示(type: Currency)
以下のように、通貨に合わせて小数点以下桁数が変わるようにします。（EURは小数点以下2桁、JPYは小数点以下なし）

###ソース
App.view.xmlのObjectListItemの中身を以下のように変更します。

####変更前

<ObjectListItem
                                        title="{mPricelist>name}"
                                        number="{mPricelist>price}"
                                        numberUnit="{mPricelist>currency}">
                                    </ObjectListItem>

####変更後

<ObjectListItem
										title="{mPricelist>name}"
										number="{
											parts: [{path: 'mPricelist>price'}, {path: 'mPricelist>currency'}],
											type: 'sap.ui.model.type.Currency',
											formatOptions: {
												showMeasure: false
											}
										}"
										numberUnit="{mPricelist>currency}">
									</ObjectListItem>

numberに対してtypeを指定するために、次の引数を渡しています。

• parts: 表示させるデータを指定します。数字と単位の2つの引数を渡すため、partsの後にpathでモデルのデータを指定します。
• type: 通貨の形式で表示するために'sap.ui.model.type.Currency'を指定します。
• formatOptions: オプションとして、通貨を表示しないように設定しています。（通貨はすでに表示しているので）

####メモ
partsは複数の引数をまとめるための宣言で、引数が1つなら直接pathを指定します。

引数が複数の場合
parts: [{path: 'データ'}, {path: 'データ'}, ...]

引数が単数の場合
path: 'データ'

##日付の表示(type: Date)
panel1に日付を追加します。
まずは、controllerでdateという変数を定義してビューでそのまま表示させてみます。（typeを指定しないとどうなるか確認するため）

###App.controller.js

sap.ui.define([
   "sap/ui/core/mvc/Controller",
   "sap/ui/model/json/JSONModel"
], function (Controller, JSONModel) {
   "use strict";
   return Controller.extend("test.helloworld.controller.App", {
		_data : {
			"date" : new Date()
		},

		onInit : function (evt) {
			var oModel = new JSONModel(this._data);
			this.getView().setModel(oModel);
		},
   });
});

ここでは、以下の処理を行っています。

• 今日の日付を持つdateという変数を、JSON形式のモデルで定義
• コントローラーの初期処理(onInit)の中でJSONモデルをインスタンス化し、ビューにセットする。これにより、ビュー側から変数dateにアクセスできるようになる。

###App.view.xml
ひとつめのPanelにTextコントールを追加して、dateを表示させます。

					<Panel headerText="panel1">
						<content>
							<l:VerticalLayout class="sapUiContentPadding">
								---省略---
								<Text text="{/date}"/> ←追加
							</l:VerticalLayout>								
						</content>
					</Panel>

表示形式は以下のようになります。

次に、typeを指定します。

                               <Text text="{
									path: '/date',
									type: 'sap.ui.model.type.Date',
									formatOptions: {
										style: 'short'
									}
								}"/>

日付がyyyy/mm/dd形式で表示されました。

##formatOptionsに指定できるもの
fotmatOptionsに指定できるものは、データの型によって決まっています。
詳細については、以下の公式リファレンスを参照してください。

• numberの場合
• dateの場合

##参考にしたページ
Get Started: Setup and Tutorials-Walkthrough-Step 21: Data Types
sap.ui.model.type.Dateのサンプル