SAPUI5는 Boolean, Currency, Date 및 Float와 같은 간단한 데이터 유형을 제공한다.
이러한 데이터 유형은 화면에 표시되는 값의 형식이 올바르게 지정되고 필드가 입력용으로 열려 있으면 사용자가 입력한 값이 해당 데이터 유형의 요구사항을 준수하는지 확인하기 위해 컨트롤에 적용될 수 있다.
이번 튜토리얼에선 Currency 유형의 Sales to Date라는 새 필드를 추가한다.

Preview

10_preview.png

Coding

Data Binding - Step 10.

webapp/index.js

sap.ui.require([
    "sap/ui/model/json/JSONModel",
    "sap/ui/core/mvc/XMLView",
    "sap/ui/model/resource/ResourceModel"
], function (JSONModel, XMLView, ResourceModel) {
    "use strict";

    // Attach an anonymous function to the SAPUI5 'init' event
    sap.ui.getCore().attachInit(function () {
        var oModel = new JSONModel({
            firstName: "Harry",
            lastName: "Hawk",
            enabled: true,
            address: {
                street: "Dietmar-Hopp-Allee 16",
                city: "Walldorf",
                zip: "69190",
                country: "Germany"
            },
            "salesToDate" : 12345.6789,
            "currencyCode" : "EUR"

        });

        // Assign the model object to the SAPUI5 core
        sap.ui.getCore().setModel(oModel);

        var oResourceBundle = new ResourceModel({
            bundleName: "sap.ui.demo.db.i18n.i18n"
        });

        sap.ui.getCore().setModel(oResourceBundle, "i18n");

        // Display the XML view called "App"
        new XMLView({
            viewName: "sap.ui.demo.db.view.App"
        }).placeAt("content");
    });
});

json 모델에 salesToDate,currencyCode를 추가한다.

webapp/view/App.view.xml


...
    <Panel headerText="{i18n>panel1HeaderText}" class="sapUiResponsiveMargin" width="auto">
        <content>
            <Label text="{i18n>firstName}" class="sapUiSmallMargin"/>
            <Input value="{/firstName}" valueLiveUpdate="true" width="200px" enabled="{/enabled}"/>
            <Label text="{i18n>lastName}" class="sapUiSmallMargin"/>
            <Input value="{/lastName}" valueLiveUpdate="true" width="200px" enabled="{/enabled}"/>
            <CheckBox selected="{/enabled}" text="Enabled"/>
        </content>
    </Panel>
    <Panel headerText="{i18n>panel2HeaderText}" class="sapUiResponsiveMargin" width="auto">
        <content>
            <l:HorizontalLayout>
                <l:VerticalLayout>
                    <Label class="sapUiSmallMargin" text="{i18n>address}:"/>
                    <FormattedText class="sapUiSmallMarginBegin sapUiSmallMarginBottom" htmlText="{/address/street}&lt;br&gt;{/address/zip} {/address/city}&lt;br&gt;{/address/country}" width="200px"/>
                    <Link class="sapUiSmallMarginBegin"
                        href="{
                            parts: [
                                '/firstName',
                                '/lastName'
                            ],
                            formatter: '.formatMail'
                        }"
                        text="{i18n>sendEmail}"/>
                </l:VerticalLayout>
                <l:VerticalLayout>
                    <Label text="{i18n>salesToDate}:" class="sapUiSmallMargin"/>
                    <Input width="200px" enabled="{/enabled}" description="{/currencyCode}"
                        value="{
                            parts: [
                                {path: '/salesToDate'},
                                {path: '/currencyCode'}
                            ],
                            type: 'sap.ui.model.type.Currency',
                            formatOptions: {showMeasure: false}
                        }"/>
                </l:VerticalLayout>
            </l:HorizontalLayout>
        </content>
    </Panel>
</mvc:View>

<l:VerticalLayout>에서 새로운 Label과 Input 컨트롤을 생성했다. Label 컨트롤에는 i18n의 salesToDate를 바인딩하고
Input 컨트롤에 index.js에서 설정한 salesToDate, currencyCode를 part의 path로 바인딩 한다.
Input 컨트롤에서 currencyCode를 EUR로 설정했기때문에 자동으로 통화 기호가 생기가 된다. 따라서 formatOptions속성에 {showMeasure: false}를 추가한다.

webapp/i18n/i18n.properties

# Field labels
firstName=Vorname
lastName=Nachname
enabled=Enabled
address=Address
salesToDate=Sales to Date...

webapp/i18n/i18n_de.properties

# Field labels
firstName=Vorname
lastName=Nachname
enabled=Aktiviert
address=Adresse
salesToDate=Verk\u00e4ufe bis zum heutigen Datum
...

Formatting, Parsing, and Validating Data