Go to Qiita Advent Calendar 2024 Top
LoginSignup
3
5

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 5 years have passed since last update.

@tami(Yasutake Mio)

【SAPUI5】入門編の記事まとめ(2)

Posted at

##この記事の内容
入門編の記事まとめ以降、以下の記事を作成しました。
現時点のコードがこの後の記事の前提となるので、スナップショットの意味で一旦まとめます。（以下の記事から一部変更した箇所もあります）

###対象の記事

  1. 【SAPUI5】i18nで多言語対応
  2. 【SAPUI5】Shell Controlでデバイスに合わせて幅を調整
  3. 【SAPUI5】PageとPanelコントロールで見栄えをよく
  4. 【SAPUI5】Aggregation bindingで複数アイテムを表示
  5. 【SAPUI5】Data Typeを指定して表示形式を整える
  6. 【SAPUI5】Custom Formatterの使い方

##コード
フォルダ構成は以下のようになっています。
WS000063.JPG

###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
		}
	]
}

##実行結果
WS000067.JPG

3
5
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
Sign upLogin
3
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?