순서는 첫시작으로 html파일 index.html을 만들고 oninit을 통해 index.js를 읽어온다. view.xml으로 화면을 그리는 영역을 구성한다. controller.js로 화면을 구성한다.
현재 작업들을 수행할 파일을 모두 포함하는 가장 상위 폴더 sap.ui.demo.walkthrough를 먼저 생성한다. 생성한폴더에 하위폴더인 WebContent을 생성한다.
index.html
WebContent 폴더에 새로운시작 html파일인 index.html파일을 생성해준다.
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-compatVersion="edge"
data-sap-ui-oninit="module:sap/ui/demo/walkthrough/index"
data-sap-ui-resourceroots='{
"sap.ui.demo.walkthrough": "./"
}'>
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
src="/resources/sap-ui-core.js"
src 속성은 브라우저에 SAPUI5 코어 라이브러리를 찾을 위치를 알려준다.
SAPUI5 런타임을 초기화하고 data-sap-ui-libs 속성에 지정된 라이브러리와 같은 추가 자원을 로드한다.
data-sap-ui-theme="sap_bluecrystal"
SAPUI5 컨트롤은 다른 테마도 지원한다. sap_belize, sap_belize_hcb, sap_belize_hcw도 있는데 sap_bluecrystal을 default 테마로 지정했다.
data-sap-ui-libs="sap.m"
이 튜토리얼에서 필요한 UI 컨트롤을 가지고 있는 sap.m UI 라이브러리를 명기한다.
data-sap-ui-compatVersion="edge"
SAPUI5의 가장 최신 기능을 사용한다.
data-sap-ui-preload="async"비동기로 실행되도록 "bootstrapping” 프로세스를 설정한다.
성능상의 이유로 백그라운드에서 SAPUI5 리소스를 동시에 로드 할 수 있음을 의미한다.
data-sap-ui-oninit="module:sap/ui/demo/walkthrough/index"
oninit을 통해 index.js를 읽어온다. 처음에 선언적으로 로드 할 모듈을 정의한다. Bootstrap에서 참조 할 script를 작성한다. js파일만 읽어오므로 확장자로 js 쓰지 않아도 된다.
data-sap-ui-resourceroots='{"sap.ui.demo.walkthrough": "./" }'>
SAPUI5 core에 sap.ui.demo.walkthrough namespace의 resource가 index.html과 동일한 폴더에 있다고 지정한다. index.html이 포함되어 있는 상위폴더 WebContent를 root로 삼겠다는 의미이다.
index.js (component.js)
WebContent파일에서 index.js파일을 생성한다.
sap.ui.define(["sap/ui/core/mvc/XMLView"], function(XMLView){
"use strict";
XMLView.create({
viewName: "sap.ui.demo.walkthrough.view.App"
}).then(function (oView) {
oView.placeAt("content"); //뷰객체 content에 붙임, 화면에서 id를 찾아서 그위치에 텍스트컨트롤을 붙여준다. = append
});
});파일 경로로 XMLView 파일을 찾아 정의define해서 매개변수funtion (XMLView)에 담고, XMLView.create로 *.view.xml을 불러온다.
define 함수
문법:define([1,2,3], fucntion(1,2,3))
파일을 정의하는 방식이다.
배열[ ]에 들어간 순서대로 함수에 들어간다.
sap.ui.define(["sap/ui/core/mvc/XMLView"], function(XMLView)
XMLView 파일을 찾아 매개변수 XMLView에 넣는다.
"use strict"
엄격한 모드, 허용하지 않는 문법들 걸러주는 역할을 한다.
XMLView.create
XMLView 파일을 읽어와서 view로 생성한다. 뷰이름의 첫글자는 대문자여야 한다.
viewName: "sap.ui.demo.walkthrough.view.App"
경로 파일을 읽어온다. oninit처럼 .view.xml파일만 읽어오므로 확장자는 쓰지않아도 된다.
then(function (oView)
뷰생성이 끝나고나면 함수를 실행한다.
oView.placeAt("content")
화면에서 id를 찾아서 그위치에 텍스트컨트롤을 붙여준다. placeAt은 append와 같다고 생각하면 된다.
뷰객체를 content에 붙인다.
*.view.xml
화면을 구성하는 영역을 지정한다.
새로운 view 폴더를 생성하고 app 폴더 안에 새로운 XML view 파일을 생성한다. XML 구조의 root 노드는 view이다.
- view 이름은 대문자
- 모든 view는 view 폴더에 위치
- XML view의 이름은 항상
*.view.xml로 끝남 - 기본 XML 네임스페이스는 sap.m
- 다른 XML 네임스페이스는 alias와 같은 SAP 네임스페이스의 마지막 부분 사용 (예: sap.ui.core.mvc의 mvc 같이)
WebContent폴더에 view폴더를 생성하고, view폴더에 App.view.xml파일을 생성한다.
두가지 방법으로 사용할수 있다.
1
<mvc:View
controllerName="sap.ui.demo.walkthrough.controller.App"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<Text text="Hello world XMLView" />
<Button text="Say Hello" press=".onShowHello" /> <!-- 컨트롤러파일 읽어오기, .은 명시한파일의 펑션 -->
</mvc:View>2
<View
controllerName="sap.ui.demo.walkthrough.controller.App"
xmlns:m="sap.m"
xmlns="sap.ui.core.mvc">
<m:Text text="Hello world XML View" />
<Button text="Say Hello" press=".onShowHello" />
</View> controllerName="sap.ui.demo.walkthrough.controller.App"
컨트롤러 경로 파일을 읽어온다. resource를 고유하게 식별하기 위해 네임스페이스 walkthrough.view를 이름 앞에 붙여준다. .controller.js파일만 읽어오므로 확장자는 쓰지않아도 된다.
namespace ?
프로그램을 개발하다 보면, 전역 범위에 이름이 같은 변수, 함수, 객체 등을 정의하는 경우가 발생한다. 네임스페이스는 이러한 경우에 발생할 수 있는 충돌을 방지하기 위해 이름이 존재하는 공간을 정의하는 기능을 제공한다.
SAP에서 제공하는 파일 관계이므로 변하지 않는다.
alias는 변할 수 있다.
xmlns:m="sap.m"xmlns="sap.ui.core.mvc"
xmlns는 namespace의 약자이다. 대부분의 UI assets이 있는 기본 네임스페이스 sap.m을 참조한다. alias mvc를 사용하여 SAPUI5 view와 Model-View-Controller(MVC) assets을 가지고 있는 네임스페이스 sap.ui.core.mvc를 추가적으로 정의한다.
<Button text="Say Hello" press=".onShowHello" />
버튼의 텍스트는 Say Hello이고, 버튼을 클릭하면 controller.js에서 정의한 펑션을 실행한다.
프로그램이 이 모든 경로를 찾아갈 수 있는건 define함수가 경로를 찾아주기 때문이다.
*.controller.js
ui(화면)을 그리는 라이브러리이다. 컨트롤은 화면의 일부 동작과 모양을 정의하는데 사용해 tag와 비슷하다. 대문자로 시작하고. module이나 assets라고도 부른다.예외 <content> : control이 아닌, aggregation이다. 부모자식 밑에 다른 컨트롤이 올수있도록 도와주는 것.
- controller의 이름은 대문자로 시작
- controller는 관련된 view와 동일한 이름 사용(1:1 관계일 경우)
- event handlers는 on으로 시작 (예: onShowHello)
- controller의 이름은 항상
*.controller.js로 끝남
WebContent폴더에 controller폴더를 생성하고, controller폴더에 App.controller.js파일을 생성한다.
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/m/MessageToast",
], function(Controller, MessageToast){
"use strict";
return Controller.extend("sap.ui.demo.walkthrough.controller.App", {
onShowHello : function () {
alert("Hello World");
}
});
});버튼이 눌리면 onShowHello event 핸들러 함수가 실행된다. view에 연결된 controller의 이름을 특정하고 view의 controllerName 속성을 설정한 다음 onShowHello를 가지고 있어야 한다. controller가 지정되면 view가 로드된 후 인스턴스화된다.
Controller.extend("sap.ui.demo.walkthrough.controller.App"
Controller 객체를 확장하여 app controller를 자체 파일에 정의한다. 현재 이 controller는 press event를 핸들링해서 alert창만 띄워주는 onShowHello 함수 하나만 가지고 있다.
alert말고 MessageToast.show를 사용해도 화면에 찍어줄 수 있다. alert와는 다른방식으로 찍힌다. 궁금하면 해보길 바란다. 나는 해봤다.
extend
부모가 가지고 있는 프로포티를 상속해 부모 프로포티도 사용할수 있고 확장해서 사용할 수 있다.
'Fiori > UI5' 카테고리의 다른 글
| [UI5] JSON Model (0) | 2023.03.07 |
|---|---|
| [UI5] Binding (Two-way& One-way) (0) | 2023.03.07 |
| [JavaScript] To Do List 예제 (1) | 2023.03.07 |
| [JavaScript] 회원정보 예제 (1) | 2023.03.07 |
| [JavaScript] jQuery (0) | 2023.03.07 |
댓글