【SAPUI5】Aggregation binding으로 복수 아이템을 표시

소개

보기에 데이터를 표시하기 위해 지금까지는 단일 데이터를 뷰에 묶었습니다. (참고: 【SAPUI5】MVC를 완성하자 )
이번에는 여러 데이터를 표 형식으로 표시하는 방법을 소개합니다.
그 전에 데이터 바인딩 유형을 정리해 둡니다.

데이터 바인딩 유형

데이터 바인딩에는 다음 세 가지 유형이 있습니다.

Property binding

컨트롤의 속성에 모델 데이터를 직접 설정하는 것입니다.

Context binding(또는 Element binding)

컨트롤에 모델을 통째로 바인딩하는 것입니다. 이렇게 하면 해당 컨트롤과 자식 컨트롤이 상대 경로에서 모델 데이터를 참조할 수 있습니다.

List binding(또는 Aggregation binding)

여러 행의 데이터가 있는 모델에서 사용합니다. 자동으로 자식 컨트롤이 만들어지며 자식 컨트롤은 상대 경로에서 모델 데이터를 참조 할 수 있습니다.

Aggregation binding을 구현해 봅시다.

목표

여러 레코드가 있는 모델을 만들고 List 컨트롤을 사용하여 표시합니다.

단계

전제: 입문편의 기사 정리 에서 만든 앱을 준비합니다.

새 모델 정의

manifest.json에 모델 추가

뷰가 새 모델의 데이터를 표시하도록합니다

1. 새 모델 정의

model 폴더 아래에 "Pricelist.json"이라는 새 파일을 만듭니다.


다음 코드를 입력합니다.

{ 
    "products" :[
        {
            "name" : "Pumpkin",
            "price": 15.00,
            "currency": "EUR",
            "supplier": "CompanyA"
        },
        {
            "name" : "Apple",
            "price": 200.00,
            "currency": "JPY",
            "supplier": "CompanyB"
        },
        {
            "name" : "Banana",
            "price": 50.00,
            "currency": "EUR",
            "supplier": "CompanyC"
        },
        {
            "name" : "Tomato",
            "price": 1000.00,
            "currency": "EUR",
            "supplier": "CompanyA"
        },  
        {
            "name" : "Egg",
            "price": 600.00,
            "currency": "JPY",
            "supplier": "CompanyD"
        }
    ]
}

2. manifest.json에 모델 추가

models 섹션 하단에 Pricelist.json에 대한 링크를 추가합니다. 모델 섹션은 전체적으로 다음과 같습니다.

        "models": {
            "i18n": {
                "type": "sap.ui.model.resource.ResourceModel",
                "settings": {
                    "bundleName": "test.helloworld.i18n.i18n"
                }
            },
            "mPrice":{
                "type": "sap.ui.model.json.JSONModel",
                "uri": "model/Price.json"
            },
            "mPricelist":{
                "type": "sap.ui.model.json.JSONModel",
                "uri": "model/Pricelist.json"
            }
        }

3. 뷰에 새 모델의 데이터 표시

App.view 안에 새롭게 아래의 Panel 컨트롤을 추가합니다. (Panel은 화면의 요소를 태우는 접시와 같습니다)

                    <Panel headerText="Product List">
                        <content>
                            <List items="{mPricelist>/products}">
                                <items>
                                    <ObjectListItem
                                        title="{mPricelist>name}"
                                        number="{mPricelist>price}"
                                        numberUnit="{mPricelist>currency}">
                                    </ObjectListItem>
                                </items>
                            </List>                         
                        </content>
                    </Panel>

List 컨트롤에 mPricelist의 모델을 바인드합니다. 이것은 Aggregation binding입니다. 그런 다음 List의 자식 요소로 ObjectListItem 컨트롤을 배치합니다.
부모의 컨트롤(List)에서는 절대 패스로 모델을 참조하고 있습니다만, 아이의 컨트롤(ObjectListItem)에서는 선두에 슬래시가 없고, 상대 패스가 되고 있습니다.
ObjectListItem 의 속성으로서, title (텍스트), number (숫자), numberUnit (숫자에 덧붙일 단위)를 지정합니다. 그 외의 속성에 대해서는 공식 참조 를 참조해 주세요.

App.view의 코드는 전체적으로 다음과 같습니다.

<mvc:View 
    controllerName="test.helloworld.controller.App" 
    xmlns="sap.m" 
    xmlns:l="sap.ui.layout" 
    xmlns:mvc="sap.ui.core.mvc">
    <App>
        <pages>
            <Page title="Page1">
                <content>
                    <Panel headerText="panel1">
                        <content>
                            <l:VerticalLayout class="sapUiContentPadding">
                                <Button text="{i18n>helloButton}" press="onShowHello"/>
                                <Text text="{mPrice>/product/name}"/>
                                <Text binding="{mPrice>/product}" text="{mPrice>price}"/>
                            </l:VerticalLayout>                             
                        </content>
                    </Panel>
                    <Panel headerText="Product List">
                        <content>
                            <List items="{mPricelist>/products}">
                                <items>
                                    <ObjectListItem
                                        title="{mPricelist>name}"
                                        number="{mPricelist>price}"
                                        numberUnit="{mPricelist>currency}">
                                    </ObjectListItem>
                                </items>
                            </List>                         
                        </content>
                    </Panel>                    
                </content>
            </Page>
        </pages>
    </App>
</mvc:View>

실행 결과

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

참고로 한 페이지

Binding Types
Get Started: Setup and Tutorials-Walkthrough-Step 20: Aggregation Binding