Step 4: XML Views

opensapkr·2019년 10월 30일

Walkthrough ui5

ui5-Walkthrough

목록 보기

5/39

Step 4: XML Views

UI를 index.html 파일에만 넣어 개발하면 유지보수에 어려움이 있다.
sap.m.Text 컨트롤을 전용 뷰에 배치하여 모듈로 만들어 보자

SAPUI5는 다중 뷰 유형 (XML, HTML, JavaScript)을 지원한다. 그 중 가장 가독성이 높은 코드를 생성하고 뷰 선언을 컨트롤러 로직과 분리하도록 XML을 사용한다.

Preview

Coding

Walkthrough - Step 4.

webapp/view/App.view.xml (New)

<mvc:View
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <Text text="Hello World"/>
</mvc:View>

xmlns를 통해 sap.m을 참조하여 sap에서 제공되는 UI를 참조 한다.
OpenUI5 뷰와 다른 모든 MVC(Model-View-Controller) 애셋이있는 mvc를 사용하여 추가 sap.ui.core.mvc 네임 스페이스를 정의한다.

note: 네임 스페이스는 프로젝트의 모든 리소스를 식별하므로 고유해야한다.
네임 스페이스는 SAP 자원을 위해 예약되어 있으므로 sap 네임 스페이스 접두어를 사용할 수 없다.

뷰 태그 안에는 텍스트 컨트롤 추가한다. XML 태그는 컨트롤에 매핑되고 속성은 컨트롤의 속성에 매핑된다.

webapp/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");
	});

});

sap.m.Text 컨트롤의 인스턴스를 새로운 App XML view로 대체한다.
Index.html에 data-sap-ui-resourceroots 설정한 네임스페이스를 기준으로
이 자원을 고유하게 식별하기 위해 이름 앞에 sap.ui.demo.walkthrough.view 네임 스페이스가 붙는다.

note: 이 단계부터 웹 서버에서 앱을 실행해야 한다. 로컬 파일에서 로드 된 여러 파일로 응용 프로그램을 구성한다.
웹 서버가 없으면 보안상의 이유로 브라우저에서 이를 방지 할 수 있다. 브라우저의 개발자 도구에 "sap is not defined"라는 오류 메시지가 나타나면 bootstrap의 리소스 경로를 확인한다.