【SAPUI5】MVC를 완성하자

소개

전회의 기사 ( MVC로 만들어 보자. )에서는 뷰, 컨트롤러의 구현까지 실시했습니다. 이번에는 모델을 사용하여 데이터를 표시합니다. 이것으로 모델, 뷰, 컨트롤러가 갖추어져 MVC가 완성됩니다.

【전제 스텝】
【SAPUI5】MVC로 만들어 보자
【SAPUI5】Component.js와 manifest.json

모델 유형

SAPUI5에서는 다음 모델을 사용할 수 있습니다.

OData 모델 : 서버와 데이터를 교환하는 데 사용됩니다. 데이터는 서버 측에 있습니다.

JSON 모델: 클라이언트측에서 가지는, JSON 형식의 데이터 세트입니다.

XML 모델: 클라이언트측에서 가지는, XML 형식의 데이터 세트입니다.

Resource 모델: 주로 다국어 대응을 위해서 번역용 텍스트를 정의하는데 사용합니다.

JSON 및 XML 모델은 기본적으로 작은 데이터 세트를 처리하는 데 사용됩니다.

모델 구현

이번에는 JSON 모델에서 간단한 데이터 세트를 정의하고 그것을 화면에 표시해 보겠습니다.

목표

버튼 아래에 모델에서 가져온 텍스트가 표시되도록 합니다.

단계

모델 정의

manifest.json에 모델 추가

뷰에 텍스트 추가

앱 실행

1. 모델 정의

새 "model"폴더를 만들고 그 아래에 "Price.json"을 만듭니다.

다음 코드를 입력합니다.

{ 
    "product" : {
        "name" : "pumpkin",
        "price": 150
    }
}

2. manifest.json에 모델 추가

manifest.json의 "sap.ui5"섹션 하단에 다음 코드를 추가합니다.

    "sap.ui5": {
        "_version": "1.2.0",
                <省略>
        "models": {
            "mPrice":{
                "type": "sap.ui.model.json.JSONModel",
                "uri": "model/Price.json"
            }
        }
    }

모델 이름은 선택 사항입니다. 여기에서는 알기 쉽도록 선두에 m를 붙이고 있습니다.
- type : JSON 파일이므로 "sap.ui.model.json.JSONModel"을 지정합니다.
- uri: 모델의 파일 ​​경로를 지정합니다.

3. 뷰에 텍스트 추가

App.view.xml을 다음과 같이 변경합니다.

<mvc:View 
    controllerName="test.helloworld.controller.App" 
    xmlns="sap.m" xmlns:l="sap.ui.layout" 
    xmlns:mvc="sap.ui.core.mvc">
    <l:VerticalLayout class="sapUiContentPadding">
        <Button text="Say Hello" press="onShowHello"/>
        <Text text="{mPrice>/product/name}"/>
        <Text text="{mPrice>/product/price}"/>
    </l:VerticalLayout>
</mvc:View>

VerticalLayout은 요소를 세로로 정렬하기 위해 넣었습니다. 여기서 주목하는 것은 Text에 지정한 값입니다.
{mPrice>/product/name}과 같이 웨이브 괄호로 묶으면 모델에서 데이터를 바인딩(할당)하는 것으로 해석됩니다. 지정하는 값은 왼쪽에서 순서대로 다음과 같습니다.

manifest.json 파일에 지정된 모델 이름

객체 이름

키

모델명 뒤에 슬래시를 붙이면 절대 경로를 의미합니다.

4. 앱 실행

실행 결과는 다음과 같습니다.