SAP UI5 Week 1 - Unit 3. Controller와 Module 설계하기 > SAP Business Technology Platform(BTP)

SAP Business Technology Platform(BTP)

SAP UI5 Week 1 - Unit 3. Controller와 Module 설계하기

페이지 정보

작성자 SAPBTP가이드 쪽지보내기 아이디로 검색 전체게시물
댓글 1건 조회 250회 작성일 21-08-13 16:08

본문

Week 1 - Unit 3: Controller와 Module 설계하기

Controllers
Modules

1. Controllers

이 단계에서는 텍스트를 버튼으로 변경하고, 버튼을 선택하면 "Hello World" 메시지를 표시하도록 실습해봅니다. 금번 이벤트 처리는 뷰의 컨트롤러에서 구현됩니다.

webapp/view/App.view.xml

<mvc:View
	displayBlock="true"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns="sap.m"
	controllerName="opensap.myapp.controller.App">
	<Carousel>
		…
	</Carousel>
	<Button
		text="Say Hello!"
		press="onShowHello"/>
</mvc:View>

컨트롤러에 참조를 추가하고 "Say Hello." 텍스트 버튼을 추가합니다. 버튼을 클릭하면, onHello 이벤트 핸들러 기능이 트리거됩니다.

이벤트 핸들러를 찾으려면 view 속성 controllerName을 사용하여 onShowHello 함수를 보유하는 컨트롤러의 이름도 지정해야 합니다.

보기에 명시적으로 할당된 컨트롤러가 반드시 필요한 것은 아닙니다. 보기에 정보만 표시되고 추가 기능이 필요하지 않은 경우 컨트롤러를 만들 필요가 없습니다. 컨트롤러가 지정되면 뷰가 로드된 후 인스턴스화됩니다.

webapp/controller/App.controller.js (NEW)

sap.ui.define([
	"sap/ui/core/mvc/Controller"
], function (Controller) {
	"use strict";

});

webapp/controller 폴더와 새 파일 App.controller.js를 내부에 생성합니다.

webapp/controller/App.controller.js

sap.ui.define([
	"sap/ui/core/mvc/Controller"
], function (Controller) {
	"use strict";

	return Controller.extend("opensap.myapp.controller.App", {

		onShowHello : function () {
			// show a native JavaScript alert
			alert("Hello World");
		}
	});
});

SAP UI5 core의 컨트롤러 object를 확장하여 app 컨트롤러를 정의합니다.

초기에는 ShowHello라는 단일 기능만 생성하고 알림창을 표시하여 버튼 클릭을 처리합니다.

Conventions

• 컨트롤러 이름은 대문자로 표시됩니다.

• 컨트롤러는 관련 보기와 동일한 이름을 가집니다(1:1 관계가 있는 경우).

• 이벤트 핸들러 앞에 ON이 붙습니다.

• 컨트롤러 이름은 항상 *.controller.js로 끝납니다.

Related Information

API Reference: sap.ui.define

2. Modules (모듈)

이번 단계에서는 이전 실습에서 진행한 alert를 sap.m 라이브러리의 적절한 "Message Toast"로 변경해봅니다. 필요한 모듈은 비동기식으로 로드됩니다.

webapp/controller/App.controller.js

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/m/MessageToast"
], function (Controller, MessageToast) {
	"use strict";

	return Controller.extend("opensap.myapp.controller.App", {

		onShowHello : function () {
			MessageToast.show("Hello openSAP");
		}
	});
});

sap.m.MessageToast에 대한 완전한 경로를 사용하여 필수 모듈의 배열을 확장합니다.

Controller와 MessageToast의 두 모듈이 모두 로드되고 버튼을 누르면 콜백 함수가 호출되고 함수에 전달된 매개변수에 액세스하여 두 객체를 모두 사용할 수 있습니다.

이 AMD(비동기 모듈 정의) 구문을 사용하면 모듈 로딩을 코드 실행과 명확하게 구분할 수 있으며 애플리케이션의 성능이 크게 향상됩니다.

참고 자료

API Reference: sap.ui.define

API Reference: sap.ui.require