Step 4: XML Views

우리의 모든 UI를 index.html 파일에 넣으면 곧 설정이 엉망이 될 것이고, 그렇게되면 우리에게 꽤 많은 작업이 있을 것입니다.

이제는 sap.m.Text 컨트롤을 전용 뷰에 배치하여 첫 번째 모듈화를 수행해 보겠습니다.

SAPUI5는 multiple view type (XML, HTML, JavaScript)을 지원합니다.

우리는 가장 가독성이 높은 코드를 생성하고, 뷰 선언을 컨트롤러 로직과 분리가 되도록 XML을 선택합니다.

그러나 우리의 UI의 모습은 바뀌지 않을 것입니다.

Preview

Coding

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

Walkthrough - Step 4.

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

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

우리는 app 폴더에 새로운 view 폴더를 만들고, view 폴더 안에 XML 뷰를 위한 새로운 파일을 생성합니다.

XML 구조의 루트 노드가 view 입니다. 여기서는 대부분의 UI 자산(assets)을 가지고 있는 기본 namespace sap.m을 참조합니다.

SAPUI5 view 와 다른 모든 MVC (Model-View-Controller) 자산(assets)이을 가지고 있는 alias mvc를 사용하여 추가 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>

뷰 태그 안에는 text 컨트롤의 선언적 정의를 이전 단계와 동일한 속성으로 추가합니다.

XML tag는 control에 매핑되고 속성은 control의 속성에 매핑됩니다.

XML tag => control

XML 속성 => control 속성

SAPUI5에서 각 control에는 자체 ID가 있습니다. 위의 XML view에서 ID 속성을 지정하지 않았으므로 SAPUI5 런타임은 자체 ID를 생성하고 이를 control에 추가합니다.

그러나 control을 쉽게 식별 할 수 있도록 control의 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.wt": "./"
         }' >
      </script>
      <script>
         sap.ui.getCore().attachInit(function () {
            sap.ui.xmlview({
               viewName : "sap.ui.demo.wt.view.App"
            }).placeAt("content");
         });
      </script>
   </head>
   <body class="sapUiBody" id="content">
   </body>
</html>

data-sap-ui-resourceroots 는 sap.ui.demo.wt namespace의 리소스가 index.html 과 같은 폴더("./")에 있다는 것을 SAPUI5 코어에 알립니다.

예를 들어, SAP Fiori launchpad에서 실행되는 앱에 필요합니다.

sap.m.Text control 의 인스턴스를 새 App XML view로 바꿉니다.

이 view가 SAPUI5의 factory function에 의해 생성되어서 view가 올바르게 구성되었으며 고객이 확장(extend) 할 수 있는지 확인합니다.

이 자원을 고유하게 식별하기 위해 viewName 앞에 sap.ui.demo.wt.view namespace 접두어가 붙습니다.

Note

이 단계부터는 웹 서버에서 앱을 실행해야합니다.

우리는 로컬 파일 시스템에서 로드된 여러 파일로 응용 프로그램을 구성합니다. 웹 서버가 없으면 보안상의 이유로 브라우저에서 이를 방지 할 수 있습니다. 브라우저의 개발자 도구에 "sap is not defined"라는 오류 메시지가 나타나면 bootstrap의 리소스 경로를 확인해야합니다.

Conventions

* View 이름은 대문자로 표기됩니다.

* 모든 view는 view 폴더에 저장됩니다.

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

* default XML namespace 는 sap.m 입니다.

* 다른 XML namespace는 SAP namespace의 마지막 부분을 alias로 사용합니다 (예 : sap.ui.core.mvc 의 경우 mvc).

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