Step 2: Bootstrap

SAPUI5를 사용하여 어떤 작업을 수행하려면 먼저 Load, Initialize 작업을 진행 해야합니다. SAPUI5 Load 및 Initialize Process를 bootstrapping 이라고합니다.

아래 화면의 기능은 이 Bootstrap 이 종료되면 간단한 alert message("UI5 is ready")를 표시합니다.

Preview

Coding

아래의 site 데모 키트에서 여기서 작성하는 응용 프로그램의 모든 파일을보고 다운로드 할 수 있습니다.

Walkthrough - Step 2.

Note

SAPUI5는 응용 프로그램이 존재하는 동일한 웹 서버 또는 다른 서버에서 로드 할 수있는 JavaScript 라이브러리입니다. 이 자습서의 코드 예제에서는 항상 상대 경로를 표시하고,

SAPUI5가 당신의 web server root 컨텍스트의 resources 폴더에 로컬로 배포(존재)되어 있다고 가정합니다.

( assume that SAPUI5 is deployed locally in the resources folder of your Web server's root context. )

SAPUI5가 서버의 다른 곳에 배포되었거나 다른 서버를 사용하려는 경우 이 교재(tutorial)의 부트 스트랩 (여기에서 src = "/resources/sap-ui-core.js")에서 해당 path를 당신의 요구에 맞게 조정해야합니다.

SAPUI5는 또한 CDN (Content Delivery Network)에서 검색 할 수 있습니다. https://sapui5.hana.ondemand.com/resources/sap-ui-core.js

이 참조는 자습 또는 테스트 용으로 최신의 안정적인 버전의 SAPUI5에 사용할 수 있지만, 실제 Production 용도로는 사용하지 마십시오. 실제 Production 응용 프로그램에서는 항상 SAPUI5 버전을 명시적으로 지정해야 합니다.

CDN에 대한 좀 더 많은 정보를 원하시면 아래 사이트를 참조하세요.

Variant for Bootstrapping from Content Delivery Network.

SAP Web IDE를 사용하는 경우 프로젝트를 마우스 오른쪽 버튼으로 클릭하고 Start of the navigation path New Next navigation step HTML5 Application Descriptor End of the navigation path 를 선택하여 / resources ... reference 작업을 수행 할 수 있습니다. 그러면이 경로에 대한 URL 매핑을 구성하는 neo-app.json 파일이 만들어집니다.

<!DOCTYPE html>
<html>
   <head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta charset="utf-8">
 	<title>Walkthrough</title>
      <script
         id="sap-ui-bootstrap"
         src="/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>

이 단계에서는 로컬 웹 서버에서 SAPUI5 framework를 Load 하고, 그리고 다음의 Configuration Option으로 Core Module을 Initialize 합니다.

- 첫 번째 <script> 태그의 src 속성은 브라우저에 SAPUI5 Core Library를 찾을 위치를 알려줍니다. 이것은 SAPUI5 런타임을 초기화하고, data-sap-ui-libs 속성에 지정된 라이브러리와 같은 추가 자원을 Load 합니다.

- thema : SAPUI5 컨트롤은 어러가지 다른 테마를 지원하며, 여기에서는 sap_belize를 기본 테마로 선택 하였습니다.

- 이 교재(Tutorial)에 필요한 UI Control이 포함된 UI Library sap.m을 지정합니다.

- SAPUI5의 최신 기능을 사용하기 위해 호환성 버전(compatibility version)을 "edge"로 정의합니다.

- 비동기(asynchronously) 적으로 실행되도록 "bootstrap" 프로세스를 구성합니다. 즉, 성능상의 이유로 백그라운드에서 SAPUI5 리소스를 동시에 로드 할 수 있습니다.

모든 Resource와 Library가 로드되면 SAPUI5 runtime은 Global init event 를 시작하여 라이브러리가 준비되었음을 알립니다. 이벤트가 발생한 후에 Application Logic을 트리거하기 위해서 이 이벤트를 수신하는 것이 좋습니다.

(It is a good practice to listen for this event in order to trigger your application logic only after the event has been fired.)

위 예제에서 sap.ui.getCore ()를 호출하여 SAPUI5 코어에 대한 참조를 얻고 Core에서 attachInit (...)를 호출하여 init 이벤트에 대한 익명 콜백 함수를 등록합니다. SAPUI5에서 이러한 종류의 콜백 함수는 종종 handlers, listener function 또는 단순히 listener 라고합니다. Core는 Singleton 이며 코드의 어느 곳에서나 액세스 할 수 있습니다.

익명의 콜백 함수는 SAPUI5의 bootstrap이 끝나고 native JavaScript alert 를 표시 할 때 실행됩니다.

sap-ui-core.js 파일에는 jQuery의 복사본이 포함되어 있습니다. 즉, 모든 jQuery 기능을 사용할 수 있습니다.

저작자표시 비영리 변경금지