【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
}
}
실행 결과
실행 결과는 다음과 같습니다.
Reference
이 문제에 관하여(【SAPUI5】입문편의 기사 정리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/tami/items/53990a14e5ca919ec35a텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
