SAPUI5를 사용하여 작업이 처음 시작될 때 로드 및 초기화 프로세스를 boot strapping이라 한다. 이번 튜토리얼에선 부트스트랩이 끝날 때 경고 창을 표시해 보자.
Preview
Coding
note: SAPUI5는 응용 프로그램이 위치한 동일한 웹 서버 혹은 다른 서버에서 읽어들일 수 있는 JavaScript Library이다.
이 튜토리얼의 코드는 항상 상대 경로를 표시하며 SAPUI5가 웹 서버의 root context의resources폴더에 로컬로 배치되어 동작한다.
부트 스트랩(src="/resources/sap-ui-core.js")의 해당 경로를 환경에 맞게 지정해줘야 한다.
우리는 앞으로 모든 튜토리얼을 부트 스트랩을CDN방식으로 해당 라이브러리들을 모두 불러 사용한다.
만약 로컬에서 해당 라이브러리를 받아 사용하고 싶다면 @openui5/sap.ui.core 해당 url에서 다양한@openui5/[lib_name]라이브러리를 받아 사용할 수 있다.
webapp/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SAPUI5 Walkthrough</title>
<script
id="sap-ui-bootstrap"
src="https://openui5.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-async="true"
data-sap-ui-onInit="module:sap/ui/demo/walkthrough/index"
data-sap-ui-resourceroots='{
"sap.ui.demo.walkthrough": "./"
}'>
</script>
</head>
<body>
<div>Hello World</div>
</body>
</html>이 단계에서는 로컬 웹 서버에서 SAPUI5 프레임워크를 로드하고 다음 구성 옵션으로 코어 모듈을 초기화한다.
script 태그의 속성들은 다음과 같다
-
src : 브라우저에 SAPUI5 코어 라이브러리를 찾을 위치를 알려준다
-
SAPUI5 런타임을 초기화하고 data-sap-ui-libs 속성에 지정된 라이브러리등의 추가 자원을 로드 한다.
-
data-sap-ui-theme : SAPUI5 컨트롤은 다양한 테마를 지원한다.
-
sap_belize를 기본 테마로 선택한다.
-
data-sap-ui-libs : UI 컨트롤이 포함 된 필요한 UI 라이브러리 sap.m을 지정한다.
-
data-sap-ui-compatVersion : SAPUI5의 최신 기능을 사용하기 위해 호환성 버전을 edge로 정의한다.
-
data-sap-ui-async : 비동기 적으로 실행되도록 "bootstrapping"프로세스를 구성한다. 성능상의 이유로 백그라운드에서 SAPUI5 리소스를 동시에 로드 할 수 있다.
-
data-sap-ui-onInit : 모듈은 처음에 선언적으로 로드 되도록 정의한다.
-
HTML 파일에서 직접 실행 가능한 JavaScript 코드를 피할 수 있어 앱의 보안이 강화된다. 참조할 스크립트의 경로를 지정해준다.
-
Data-sap-ui-resourceroots : OpenUI5 코어에 sap.ui.demo.walkthrough 네임 스페이스의 자원이 index.html과 같은 폴더에 있음을 알린다.
webapp/index.js (New)
sap.ui.define([
], function () {
"use strict";
alert("UI5 is ready");
});index.js 스크립트는 보안상의 이유로 HTML 파일에 직접 실행 코드가 저장되는 것을 피하기 위해 만든다.
이 스크립트는 index.html에 data-sap-ui-onInit 의해 호출된다.
Related Information
Bootstrapping: Loading and Initializing
Standard Variant for Bootstrapping
Compatibility Version Information
Variant for Bootstrapping from Content Delivery Network
