티스토리 뷰

SAPUI5

Step 2: Bootstrap

선즈반 2018. 12. 5. 10:21


Step 설명

SAPUI5로 무언가 하기 전에 로딩하고 초기화 작업이 필요합니다. SAPUI5를 로딩하고 초기화하는 프로세스를 "bootstrapping"이라고 부릅니다. bootstrapping이 한번 끝나면 간단하게 alert을 띄웁니다.


Preview

 "UI5 is ready"라고 쓰여진 alert창을 보여줍니다.

webapp/index.html

<!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>

src="/resources/sap-ui-core.js" 

첫 번째 <script> 태그의 src 속성은 브라우저에 SAPUI5 코어 라이브러리를 찾을 위치를 알려 줍니다.

SAPUI5 런타임을 초기화하고 data-sap-ui-libs 속성에 지정된 라이브러리와 같은 추가 자원을 로드합니다.

data-sap-ui-theme="sap_belize"         

SAPUI5 컨트롤은 다른 테마도 지원해주는데 sap_belize를 default 테마로 선택했습니다.    

data-sap-ui-libs="sap.m"     

이 튜토리얼에서 필요한 UI 컨트롤을 가지고 있는 sap.m UI 라이브러리를 명기합니다.

data-sap-ui-compatVersion="edge"

SAPUI5의 가장 최신 기능을 사용하기 위해 호환성 버전을 edge로 정의합니다.

data-sap-ui-preload="async"

비동기로 실행되도록 "bootstrapping” 프로세스를  설정합니다.

성능상의 이유로 백그라운드에서 SAPUI5 리소스를 동시에 로드 할 수 있음을 의미합니다.

         

모든 resource와 라이브러리가 로드되면 SAPUI5 런타임은 전역 초기화(init) 이벤트를 시작하여 라이브러리가 준비되었음을 알립니다. 오직 이벤트가 발생한 후에 애플리케이션 로직을 트리거 하기 위해 이 이벤트를 수신하는 것이 좋습니다.

위 예제에서 'sap.ui.getCore()' 를 호출하여 SAPUI5 코어에 대한 참조를 가져오고 코어에서 'attachInit (...)' 를 호출하여 init 이벤트에 대한 익명 콜백 함수를 등록합니다. SAPUI5에서 이러한 종류의 콜백 함수는 종종 핸들러, 리스너 함수 또는 단순히 리스너라고 합니다. 코어는 싱글 톤이며 코드의 아무 곳에서나 액세스 할 수 있습니다.(코어 객체는 편리성과 사용성을 위해 전역객체로 지정했기 때문에 아무 곳에서나 접근할 수 있는 것 같습니다)


익명 콜백 함수는 SAPUI5의 bootstrap이 완료되고 순순 자바스크립트가 표현되면 실행됩니다.


'sap-ui-core.js' 파일은 Jquery 카피본을 포함하고 있고 모든 jQuery를 사용할 수 있습니다.




이번 Step은 매우 중요한 개념들이 있는 장입니다. 왜 이름은 bootstrap이라고 정해서 절 헷갈리게 하는지ㅜㅜ 저는 처음에 테마 라이브러리인 bootstrap과 헷갈렸습니다. 그리고 두번째 실수가 resources 폴더 밑에 sap-ui-core.js가 없는데 이게 프로젝트에서 어디있는지 한참이나 찾았습니다. 없는데 어떻게 로드가 되지??? 문서를 차근차근 읽지 못하고 이해하지 못한 제 잘못이지요.(위 내용에 보면 서버에서 배포된다고 나와있습니다) 초기 설정과 관련된 내용이기 때문에 잘 숙지하고 있어야 합니다.


2019.03.27 추가된 내용 반영

webapp/index.js (New)

sap.ui.define([

], function () {
	"use strict";


	alert("UI5 is ready");
});

새로운 index.js script를 생성합니다. 이 파일은 튜토리어 스텝에서 필요한 application 로직을 포함하고 있습니다. 보안 문제로 HTML 파일에 직적접인 실행파일이 포함되는 것을 피하려고 합니다. 이 script는 index.html에서 호출됩니다. 이 파일을 선언적인 방식으로 모듈로 정의합니다.


새로운 방식으로 script 파일을 생성했기 때문에 기존 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>

기존에는 resources를 서버에서 가져왔는데 openui5 CDN을 사용하도록 변경되었습니다. 그리고 data-sap-ui-onInit로 index.js를 읽어드리는거 같습니다.

저작자표시 비영리

'SAPUI5' 카테고리의 다른 글

Step 4: XML Views  (0) 2018.12.05
Step 3: Controls  (0) 2018.12.05
Step 1: Hello World!  (0) 2018.12.05
데이터 바인딩 할 때 할 수 잇는 오류  (0) 2014.12.31
sap.ui.base.EventProvider  (0) 2014.11.28
댓글