티스토리 뷰

SAPUI5

Step 4: XML Views

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

Step 설명

index.html 파일에 모든 UI를 넣으면 설정이 엉망이 되고 앞으로 많은 일들이 발생할 것입니다. (파일에 코드량이 늘어나 엄청나게 지저분해 지겠죠?) 전용 view에 sap.m.Text 컨트롤을 사용해서 첫번째 모듈화를 해 봅시다.

** SAPUI5는 다양한 view 타입(XML, JHTML, JavaScript등)을 제공합니다. 가장 가독성이 높은 코드를 생성하고 controller 로직과 view 선언을 분리하기 위해 XML을 선택하고 있습니다. 그리나 (어떤 view 타입을 사용하더라도) UI의 모습은 바뀌지 않을 것입니다.

Preview

"Hello World"를 SAPUI5 컨트롤로 표시합니다.(지난 스텝과 화면 변화는 없습니다)


webapp/view/App.view.xml (New)

<mvc:View
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
</mvc:View>

app에 새로운 view 폴더를 생성하고 app 폴더 안에 새로운 XML view 파일을 생성합니다. XML 구조의 root 노드는 view입니다. 대부분의 UI assets(자산)이 있는 기본 네임스페이스 sap.m을 참조합니다. alias mvc를 사용하여 SAPUI5 view와 Model-View-Controller (MVC) assets(자산)을 가지고 있는 네임스페이스 sap.ui.core.mvc를 추가적으로 정의합니다.


webapp/view/App.view.xml

<mvc:View
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <Text text="Hello World"/>
</mvc:View>
view 태그 안에 텍스트 컨트롤의 선언적 정의를 이전 step에서와 동일한 프로퍼티로 추가합니다. XML 태그는 컨트롤에 매핑되고 속성은 컨트롤의 프로퍼티에 매핑됩니다.

SAPUI5에서 각각의 컨트롤은 ID를 가지고 있습니다. 위의 XML view에서 ID 속성을 특정하지 않았습니다. 그러면 SAPUI5 런타임은 컨트롤마다 ID를 부여합니다.그러나 컨트롤에 ID를 설정하는게 좋은 방법입니다. 그러면 컨트롤은 쉽게 확인할 수 있습니다.


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"
         data-sap-ui-resourceroots='{
            "sap.ui.demo.walkthrough": "./"
         }' >
      </script>
      <script>
         sap.ui.getCore().attachInit(function () {
            sap.ui.xmlview({
               viewName : "sap.ui.demo.walkthrough.view.App"
            }).placeAt("content");
         });
      </script>
   </head>
   <body class="sapUiBody" id="content">
   </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!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"
         // index.html과 동일한 폴더에 sap.ui.demo.walkthrough 네임스페이스의 
         // resources가 위치한다고 SAPUI5 코어에 알려줍니다.
         // 예를 들어, SAP Fiori 런치 패드에서 실행되는 앱에 필요합니다.
         data-sap-ui-resourceroots='{
            "sap.ui.demo.walkthrough": "./"
         }' >
      </script>
      <script>
         sap.ui.getCore().attachInit(function () {
            sap.ui.xmlview({
               viewName : "sap.ui.demo.walkthrough.view.App"
            }).placeAt("content");
         });
      </script>
   </head>
   <body class="sapUiBody" id="content">
   </body>
</html>
cs

새로운 App XML view로 sap.m.Text 컨트롤의 인스턴스를 대체합니다. 이  view는 SAPUI5의 팩토리 함수(sap.ui.xmlview)가  생성되며 정확하게 구성되고 customers가 확장할 수 있습니다. 이 resource를 고유하게 식별하기 위해 네임스페이스 sap.ui.demo.walkthrough.view를 이름 앞에 붙여줍니다.


Conventions

- view 이름은 대문자로 합니다.

- 모든 view는 view 폴더에 위치합니다.

- XML view의 이름은 항상 *.view.xml로 끝납니다.

- 기본 XML 네임스페이스는 sap.m입니다.

- 다른 XML 네임스페이스는 alias와 같은 SAP 네임스페이스의 마지막 부분을 사용합니다.(예: sap.ui.core.mvc의 mvc 같이)



'네임스페이스'는 간단하게 말해서 객체(컨트롤)가 있는 경로라고 생각하시면 될 거 같습니다. 동일한 이름의 객체가 있더라도 네임스페이스가 다르고 객체 이름앞에 네임스페이스를 붙여서 구분해 주면 사용 가능합니다.

화면에 관한 컨트롤들을 view.xml로 빼서 구분시켰습니다. SAPUI5에서 제시하는 'MVC' 중 'V'에 해당되는 파일이죠. 앞으로 추가될 화면 부분은 view.xml에 모두 넣는다고 생각하면 될 거 같습니다. 이 개념은 매우 중요한 개념이므로 꼭 이해하고 넘어가시길 바랍니다.

저작자표시 비영리

'SAPUI5' 카테고리의 다른 글

Step 5: Controllers  (0) 2018.12.05
Step 6: Modules  (0) 2018.12.05
Step 3: Controls  (0) 2018.12.05
Step 2: Bootstrap  (0) 2018.12.05
Step 1: Hello World!  (0) 2018.12.05
댓글