[SAP UI5]SAP UI5 연습하기 - Walkthrough Tutorial Step4(XML Views) - XML 사용법 알아보기

안녕하세요 

이번 포스팅은 SAP UI5 연습하기 - Walkthrough Tutorial Step4(XML Views)

XML 사용법에 대해 알아보겠습니다.

 

SAP UI5에서는 여러가지를 뷰로 사용할 수 있지만 XML을 사용하는 것이 좋다고 합니다.

-> 코드를 읽기 쉽고 뷰선언을 컨트롤러 로직을 만들어 분리 할 수 있기 때문입니다.

 

STEP3에서 했던 웹페이지 모양과는 변화가 없습니다.

하지만 로직이 변경됩니다.

webapp/view/App.view.xml 파일 만들기

먼저 webapp폴더 밑에 view폴더 생성 -> App.view.xml 파일 만들기

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

위에 코드를 입력하면 됩니다.

 

여기서 값을 출력하고 싶으면 mvc:View태그안에 Text태그를 넣어서 출력해주면 됩니다.

<mvc:View

   xmlns= "sap.m"

   xmlns:mvc= "sap.ui.core.mvc" >

   <Text text="Hello World">

 </mvc:View>

index.js 파일 코드 변경해주기

sap.ui.define([

    "sap/ui/core/mvc/XMLView"

], (XMLView) => {

    "use strict";

    XMLView.create({

        viewName: "ui5.walkthrough.view.App"

    }).then((oView) => oView.placeAt("content"));

});

일단 저도 공부를하면서 포스팅을 쓰는 부분이기에 틀린 부분이 있으시면 말씀해주세요!

코드의 내용은 주석 처리했습니다!

sap.ui.define([

    "sap/ui/core/mvc/XMLView"   // XML View를 사용하기 위해 선언

], (XMLView) => {

    "use strict";

    XMLView.create({

        viewName: "ui5.walkthrough.view.App"    // xml경로

    }).then((oView) => oView.placeAt("content")); //xml 컨텐츠가 들어갈 곳

});

 

View 규칙

1. 뷰의 이름은 대문자로 시작한다.

2. view는 한 곳에 다 저장한다.

3. XMl뷰는 항상 *.view.xml 로 끝난다.

4. 기본 XML의 네임스페이스는 sap.m 이다

5. 다른 XML 네임스페이스는 SAP 네임스페이스의 마지막부분을 병칭으로 사용한다.

ex) mvc for sap.ui.core.mvc

 

최종 결과물

Say Hello 버튼 클릭하기

알림창이 뜬다.

 

감사합니다.