【SAPUI5】Bootstrap이란?

5114 단어 SAPUI5SAP

Bootstrap이란?



Bootstrap은 일반적으로 다음과 같이 정의됩니다.

전원을 켠 후 또는 리셋 후에 컴퓨터의 메모리에 기본 소프트웨어를 로드하는 것을 말합니다.
출처 : 무료 백과 사전 "Wikipedia (Wikipedia)"

SAPUI5는 페이지가 열릴 때 처음에 SAPUI5 라이브러리, 테마 등을 로드하는 스크립트를 말합니다.
SAPUI5의 어플리케이션으로서 움직이기 위해서 필수이군요.
(Bootstrap이라는 프레임 워크가 있지만 그것과는 별개입니다)

어디에 쓰는지



시작하려면, 마지막 기사 에서 소개한 순서로 Helloworld의 페이지를 만들어 둡니다.
index.html 파일은 다음과 같습니다.
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <meta charset="UTF-8">
        <title>Hello World App</title>
    </head>
    <body>
        <p>Hello World</p>
    </body>
</html>

head 태그 뒤에 다음과 같이 코드를 추가합니다.
첫 번째 script 태그는 Bootstrap입니다.
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <meta charset="UTF-8">
        <title>Hello World App</title>
        <!--以下を追加-->
        <script
           id="sap-ui-bootstrap"
           src="https://sapui5.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-preload="async" >
        </script>
        <script>
           sap.ui.getCore().attachInit(function () {
               alert("UI5 is ready");
           });
        </script>
        <!--以上を追加-->
    </head>
    <body>
        <p>Hello World</p>
    </body>
</html>

Bootstrap의 내용




품목
지정하는 것


id
고정 값 "sap-ui-bootstrap"

src
SAPUI5 코어 라이브러리가 저장된 위치

data-sap-ui-theme
UI 테마

data-sap-ui-libs
페이지에서 사용할 UI 라이브러리

data-sap-ui-compatVersion
"edge"를 지정하면 SAPUI5의 최신 기능을 사용할 수 있습니다 (선택 사항)

data-sap-ui-preload
라이브러리를 동기식으로 로드할지(sync) 또는 비동기식으로 읽을지(async)를 지정합니다. 성능 향상을 위해 async를 지정하는 것이 좋습니다.


attachInit 메소드에 대하여



data-sap-ui-preload를 "async"(비동기)로 했을 경우, 필요한 라이브러리가 모두 읽힌 타이밍을 어플리케이션이 알 필요가 있습니다. 이를 위해 attachInit 메서드를 사용합니다.
이번에는 attachInit 메소드에서 경고를 출력합니다.

실행 결과



실행 결과는 다음과 같습니다.


참고로 한 페이지



Bootstrapping: Loading and Initializing
Get Started: Setup and Tutorials-Walkthrough-Step 2: Bootstrap
【SAPUI5】Hello World
【SAPUI5】Component.js와 manifest.json

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage