본문으로 바로가기

SAP UI 5 튜터리얼 번역 - Step2:Bootstrap

category SAP/SAP HANA 2016.01.31 16:51

SAP UI 5 튜터리얼 번역 - Step2:Bootstrap



아래 페이지를 번역했다.

https://sapui5.hana.ondemand.com/#docs/guide/fe12df2e338e43598977d09f3d191b7b.html



SAPUI5로 무언가 하기 위해서는 먼저 SAPUI5를 로드하고 초기화 해야 한다. 로드하고 초기화 하는 과정을 SAPUI5에서는 '부트스트래핑'이라고 한다. 부트스트래핑이 완료 되면 아래와 같은 메세지를 볼 수 있다.


그림1:알림 창에 "UI5 is ready"라고 표시된다.



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="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" 
         data-sap-ui-theme="sap_bluecrystal"
         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=로 시작되는 부분은 ui5 라이브러리가 실재 있는 주소로 변경 해놓았다.


이 단계에서, 우리는 SAPUI5 프레임웍을 해당 프레임웍이 위치한 서버에서 불러오고 아래의 옵션으로 UI5 코어 모듈을 초기화 한다.

· 첫번째 <script> 태그 안에 들어있는 src 속성은 웹브라우저가 어디에서 ui5 코어 라이브러리를 불러올지에 대해 정한다. 이 과정에서 SAPUI5를 초기화 하고 data-sap-ui-lib속성에 정해 놓은 추가적인 라이브러리 리소스를 불러온다.

·SAPUI5의 컨트롤들은 테마를 지원한다. 이 코드에서는 기본테마로 sap_bluecrystal을 설정해놓았다.

·이번 튜터리얼을 진행 하기 위해 필요한 UI 라이브러리인 sap.m을 추가했다.

·ui5가 작동할 웹브라우징 엔진을 edge로 선택 했다.

·부트스트래핑하는 프로세스를 비동기로 설정 했다.


위 설정이 의미하는 것은 퍼포먼스 문제로 리소스들을 선택적으로 불러오기 위함이다.(모든 라이브러리를 다 불러오면 느려질 수 있기 때문)



든 리소스와 라이브러리가 로드 되면 SAPUI5를 사용할 준비가 된 것이다. 라이브러리 파일이 준비되면 전역 이벤트인 init가 준비가 되었다고 알려준다.(콘솔창에 알려줌)

콜솔창에 보이는 전역 이벤트의 준비 완료 알림은 우리가 만든 sapui5 어플리케이션이 잘 시작 될 수 있다는 것을 미리 알려준다.


이번 예제에서 SAPUI5 코어를 사용하기 위해 sap.ui.getCore() 메소드를 호출하고 attachInit() 메소드를 호출하면서 익명 콜백 함수를 ui5 코어에 등록했다.

SAPUI5안에 있는 콜백 함수는 주로 핸들러나 리스너 함수 또는 단순 리스너와 관련이 있다.ui5 코어는 싱글턴이고 어디에서나 접근 할 수 있다.


위에서 생성한 익명 콜백 함수는 SAPUI5가 부트스트랩이 완료된 시점에서 실행되고 자바스크립트 알림창을 띄운다.

SAPUI5코어는 두가지 버젼이 있는데 하나는 jquery가 포함된 버젼이 있고 jquery가 포함되지 않은 버젼이 있다. 이번 튜터리얼에서는 jquery 코드를 사용할 것이기 때문에 jquery가 포함된 버젼을 로드한다.

end.



주석:콜백

'콜백'이라는 말이 처음 나오는데 '콜백'은 함수로 전달 하는 또다른 '함수'라고 생각하면 편하다. 잘 모르겠으면 그냥 '함수'라고 생각하고 하다보면 이해가 된다.


주석:리스너(Listener)

이벤트 리스너라고도 불린다. 버튼 클릭 했을 때 '클릭'하는 소리를 듣고 있는 역할을 한다고 생각하면 이해가기가 좀 편할 것이다. '클릭'을 이벤트 라고 하는데 이벤트는 마우스 클릭, 키보드 a키 누르기, 떼기, f5 눌렀다 떼기 등 여러가지가 있다.


주석:핸들러(Handler)

이벤트 핸들러라고도 한다. 마우스를 클릭 했을 때 '클릭'을 했는지 알아차리는 녀석이 리스너라면 '클릭'을 했을 때 어떤 일을 하는 녀석이 핸들러라고 보면 된다.


주석:싱글턴(singletone)

전역변수로 선언이 되어 있어서 어떤 메소드에서도 접근 할 수 있다는 뜻이다. 원래는 디자인 패턴에서 나온 말이다.





댓글을 달아 주세요