티스토리 뷰

SAPUI5

Step 3: Controls

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

Step 설명

HTML body의 "Hello World" 텍스트 대체에 SAPUI5 컨트롤 cap.m.Text를 사용하여 첫번째 UI를 빌드 할 차례입니다. 처음에 UI 설정을 위해서 JavaScript 컨트롤 인터페이스를 사용합니다. 컨트롤 인스턴스는 HTML body에 위치합니다.


Preview

"Hello World" 텍스트는 SAPUI5 컨트롤에 의해서 표시됩니다.


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 () {
            new sap.m.Text({
               text : "Hello World"
            }).placeAt("content");
         });
      </script>
   </head>
   <body class="sapUiBody" id="content">
   </body>
</html>

dialog를 띄우기 위해 순수 JavaScript를 사용하는 대신에 간단한 SAPUI5 컨트롤을 사용하려고 합니다. 컨트롤은 화면의 일부 동작과 모양을 정의하는데 사용합니다. 

위의 예제에서 init 이벤트의 콜백은 SAPUI5 텍스트 컨트롤을 인스턴스화 하는 곳입니다. 컨트롤 이름에 텍스트 컨트롤 라이브러리의 네임스페이스인 sap.m을 접두어로 붙였고 옵션은 JavsScript 객체를 생성자에 넣어줍니다. "Hello World"라는 값으로 텍스트 프로퍼티를 설정합니다.

document object model(DOM) 노드 또는 다른 어떤 SAPUI5 컨트롤 인스턴스에 SAPUI5 컨트롤을 위치시키기 위해 사용되는 표준 메소드 "placeAt"에 컨트롤의 생성자 호출을 체이닝합니다. 인자로 DOM 노드의 "ID"를 넘겨줍니다.(여기서는 content) 대상 노드는 HTML document의 body 태그이고 "ID" "content"를 노드에 부여합니다. "sapUiBody"클래스는 SAPUI5 apps을 꾸며주는 추가적인 theme-dependent(테마 종속 스타일)을 위해 추가합니다.


SAPUI5의 모든 컨트롤들은 설정을 위한 고정된 프로퍼티와 aggregations, associations을 가지고 있습니다. 이것들에 대한 기술은 Demo Kit에서 찾을 수 있습니다. 또한 각각의 컨트롤들은 API 레퍼런스에서 찾을 수 있는 공용함수가 제공됩니다.

잊지말고 p태그의 "Hello World"를 삭제합니다.

처음으로 SAPUI5의 컨트롤(토는 컴포넌트)를 사용해 봤습니다. JavaScript에 대해 어느정도 지식만 있으면 어렵진 않게 사용하실 수 있을 겁니다. 

'인스턴스화'란 간단하게 말해 생성자 키워드인 'new'를 가지고 새로운 객체를 생성하는 행위라고 보면 될 거 같습니다.

'체이닝'이란 메소드를 '.'으로 연결시켜 연속적으로 실행되도록 하는 JavaScript 기술을 가리킵니다.

저작자표시 비영리

'SAPUI5' 카테고리의 다른 글

Step 6: Modules  (0) 2018.12.05
Step 4: XML Views  (0) 2018.12.05
Step 2: Bootstrap  (0) 2018.12.05
Step 1: Hello World!  (0) 2018.12.05
데이터 바인딩 할 때 할 수 잇는 오류  (0) 2014.12.31
댓글