【SAPUI5】입문편의 기사 정리
입문편 정리
SAPUI5의 입문으로서 이하 6개의 기사를 작성했습니다.
여기에서는 각 기사에의 링크와 6회를 마친 시점에서의 소스를 게재합니다.
※입문편으로서 이하의 기사를 추가했습니다.
【SAPUI5】 소개 알고 싶은 구문
【SAPUI5】SAPUI5의 MVC를 레스토랑에 비유하면
【SAPUI5】XML 뷰에는 무엇을 어떤 순서로 쓰면 좋은가 문제
입문편을 마친 분에게 : 【SAPUI5】입문편의 기사 정리(2) 도 있기 때문에, 좋으면 부디.
출처
폴더 구성은 다음과 같습니다.
index.html
<!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.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
{
"_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"
}
}
}
}
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>
App.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function (Controller) {
"use strict";
return Controller.extend("test.helloworld.controller.App", {
onShowHello : function () {
// show a native JavaScript alert
alert("Hello World");
}
});
});
Price.json
{
"product" : {
"name" : "pumpkin",
"price": 150
}
}
실행 결과
실행 결과는 다음과 같습니다.
