この記事の内容
入門編の記事まとめ以降、以下の記事を作成しました。
現時点のコードがこの後の記事の前提となるので、スナップショットの意味で一旦まとめます。（以下の記事から一部変更した箇所もあります）
対象の記事
- 【SAPUI5】i18nで多言語対応
- 【SAPUI5】Shell Controlでデバイスに合わせて幅を調整
- 【SAPUI5】PageとPanelコントロールで見栄えをよく
- 【SAPUI5】Aggregation bindingで複数アイテムを表示
- 【SAPUI5】Data Typeを指定して表示形式を整える
- 【SAPUI5】Custom Formatterの使い方
コード
フォルダ構成は以下のようになっています。
index.html
関連：【SAPUI5】Shell Controlでデバイスに合わせて幅を調整
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta charset="UTF-8">
<title>Hello World App</title>
<script
id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_belize"
data-sap-ui-libs="sap.m"
data-sap-ui-compatVersion="edge"
data-sap-ui-preload="async"
data-sap-ui-resourceroots='{
"test.helloworld": "./"
}'
>
</script>
<script>
sap.ui.getCore().attachInit(function () {
new sap.m.Shell({
app : new sap.ui.core.ComponentContainer({
name : "test.helloworld"
})
}).placeAt("content");
})
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
Component.js
sap.ui.define([
"sap/ui/core/UIComponent"
], function (UIComponent) {
"use strict";
return UIComponent.extend("test.helloworld.Component", {
metadata : {
manifest: "json"
},
init : function () {
// call the init function of the parent
UIComponent.prototype.init.apply(this, arguments);
// additional initialization can be done here
}
});
});
manifest.json
関連
i18nで多言語対応
Aggregation bindingで複数アイテムを表示
{
"_version": "1.3.0",
"sap.app": {
"_version": "1.3.0",
"id": "test.helloworld",
"type": "application",
"i18n": "i18n/i18n.properties",
"title": "{{appTitle}}",
"description": "{{appDescription}}",
"applicationVersion": {
"version": "1.0.0"
}
},
"sap.ui": {
"_version": "1.3.0",
"technology": "UI5",
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
},
"supportedThemes": [
"sap_bluecrystal"
]
},
"sap.ui5": {
"_version": "1.2.0",
"rootView": {
"viewName": "test.helloworld.view.App",
"type": "XML",
"id": "app"
},
"autoPrefixId": true,
"dependencies": {
"minUI5Version": "1.34",
"libs": {
"sap.ui.core": {
"minVersion": "1.34.0"
},
"sap.m": {
"minVersion": "1.34.0"
},
"sap.ui.layout": {
"minVersion": "1.34.0"
}
}
},
"contentDensities": {
"compact": true,
"cozy": true
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "test.helloworld.i18n.i18n"
}
},
"mPrice":{
"type": "sap.ui.model.json.JSONModel",
"uri": "model/Price.json"
},
"mPricelist":{
"type": "sap.ui.model.json.JSONModel",
"uri": "model/Pricelist.json"
}
}
}
}
view>App.view.xml
関連
i18nで多言語対応
Aggregation bindingで複数アイテムを表示
PageとPanelコントロールで見栄えをよく
Data Typeを指定して表示形式を整える
Custom Formatterの使い方
<mvc:View
controllerName="test.helloworld.controller.App"
xmlns="sap.m"
xmlns:l="sap.ui.layout"
xmlns:mvc="sap.ui.core.mvc">
<App>
<pages>
<Page title="{i18n>pageTitle}">
<content>
<Panel headerText="{i18n>panel1Header}">
<content>
<l:VerticalLayout class="sapUiContentPadding">
<Button text="{i18n>helloButton}" press="onShowHello"/>
<Text text="{mPrice>/product/name}"/>
<Text binding="{mPrice>/product}" text="{mPrice>price}"/>
<Text text="{
path: '/date',
type: 'sap.ui.model.type.Date',
formatOptions: {
style: 'short'
}
}"/>
</l:VerticalLayout>
</content>
</Panel>
<Panel headerText="{i18n>panel2Header}">
<content>
<List items="{mPricelist>/products}">
<items>
<ObjectListItem
title="{mPricelist>name}"
number="{
parts: [{path: 'mPricelist>price'}, {path: 'mPricelist>currency'}],
type: 'sap.ui.model.type.Currency',
formatOptions: {
showMeasure: false
}
}"
numberUnit="{mPricelist>currency}">
<attributes>
<ObjectAttribute text="{mPricelist>stock}"/>
</attributes>
<firstStatus>
<ObjectStatus text="{
path: 'mPricelist>stock',
formatter: '.formatter.stockStatus'
}"/>
</firstStatus>
</ObjectListItem>
</items>
</List>
</content>
</Panel>
</content>
</Page>
</pages>
</App>
</mvc:View>
controller>App.controller.js
関連
i18nで多言語対応
Custom Formatterの使い方
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel",
"sap/m/MessageToast",
"test/helloworld/model/formatter"
], function (Controller, JSONModel, MessageToast, formatter) {
"use strict";
return Controller.extend("test.helloworld.controller.App", {
formatter: formatter,
_data : {
"date" : new Date()
},
onInit : function (oEvent) {
var oModel = new JSONModel(this._data);
this.getView().setModel(oModel);
},
onShowHello : function () {
// read msg from i18n model
var oBundle = this.getView().getModel("i18n").getResourceBundle();
var sProduct = this.getView().getModel("mPrice").getProperty("/product/name");
var sMsg = oBundle.getText("helloMessage", [sProduct]);
// show a native JavaScript alert
MessageToast.show(sMsg);
}
});
});
i18n>i18n.properties：多言語対応用のファイル（デフォルト）
関連：i18nで多言語対応
# App title
appTitle=Hello World App!
appDescription=Hello World!
# App.view
helloButton=Say Hello!
pageTitle=My Home
pageTitle=Page1
panel1Header=Panel1
panel2Header=Product List
# App.controller
helloMessage=Hello {0}
# Formatter
stockA=exess
stockB=moderate
stockC=short
i18n>i18n_ja.properties：多言語対応用のファイル（日本語）
# App title
appTitle=Hello World App!
appDescription=Hello World!
# App.view
helloButton=押してみよう
pageTitle=My Home
pageTitle=Page1
panel1Header=Panel1
panel2Header=Product List
# App.controller
helloMessage=こんにちは {0}
# Formatter
stockA=在庫過剰
stockB=在庫適正
stockC=在庫不足
model>formatter.js：データの表示形式を独自に定義
関連：【SAPUI5】Custom Formatterの使い方
在庫数量に応じた在庫ステータスを表示させる関数を定義しています。
sap.ui.define([], function () {
"use strict";
return {
stockStatus: function (stock) {
var resourceBundle = this.getView().getModel("i18n").getResourceBundle();
if (stock >= 100){
//return sap.ui.core.ValueState.Warning;
return resourceBundle.getText("stockA");
}else if (stock >= 10){
//return sap.ui.core.ValueState.Success;
return resourceBundle.getText("stockB");
}else{
//return sap.ui.core.ValueState.Error;
return resourceBundle.getText("stockC");
}
}
};
});
model>Price.json
{
"product" : {
"name" : "pumpkin",
"price": 150
}
}
model>Pricelist.json
関連：Aggregation bindingで複数アイテムを表示
{
"products" :[
{
"name" : "Pumpkin",
"price": 15.00,
"currency": "EUR",
"supplier": "CompanyA",
"stock": 100
},
{
"name" : "Apple",
"price": 200.00,
"currency": "JPY",
"supplier": "CompanyB",
"stock": 99
},
{
"name" : "Banana",
"price": 50.00,
"currency": "EUR",
"supplier": "CompanyC",
"stock": 10
},
{
"name" : "Tomato",
"price": 1000.00,
"currency": "EUR",
"supplier": "CompanyA",
"stock": 9
},
{
"name" : "Egg",
"price": 600.00,
"currency": "JPY",
"supplier": "CompanyD",
"stock": 0
}
]
}
実行結果
