SAPUI5를 사용하여 작업이 처음 시작될 때 로드 및 초기화 프로세스를 boot strapping이라 한다. 이번 튜토리얼에선 부트스트랩이 끝날 때 경고 창을 표시해 보자.

Preview

02_preview.png

Coding

Walkthrough - Step 2.

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 의해 호출된다.

Bootstrapping: Loading and Initializing

Standard Variant for Bootstrapping

Compatibility Version Information

Variant for Bootstrapping from Content Delivery Network

https://jquery.org/Information published on non-SAP site

Content Security Policy