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

###対象の記事

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

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

##実行結果