[UI5] 예제 (구구단)

1단부터 9단까지 구구단을 만들어본다. 1보다 작거나 9보다 큰 값을 입력하고 실행하면 에러메세지를 출력하고 빈값인 채로 실행버튼을 누른 경우에도 에러메세지를 출력한다.

화면 구성

App.view.xml

<App>
    <pages>
        <Page title="구구단">
            <content>
                <HBox>
                       <Input value="{/inputValue}" /><Button text="실행" press=".onGugudan" />
                </HBox>
            </content>
        </Page>
    </pages>
</App>

사용자가 입력한 값을 inputValue로 받고, 버튼을 눌렀을때 함수 onGugudan을 실행한다.

자바스크립트 객체 생성

App.controller.js

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/model/json/JSONModel",
    "sap/m/MessageBox"
], function(Controller, JSONModel, MessageBox) {
    "use strict";

    return Controller.extend("gugudan.controller.App", {
        onInit: function() {
            this.getView().setModel(new JSONModel({
                inputValue: ""
            }));
        },

컨트롤러와 JSON모델을 사용하기 위해 프로그램에 등록해주고 경로와 매개변수를 맞춰준다. MessageBox는 이따 에러메세지를 출력할때 사용할 것이므로 미리 추가해준다.

사용자가 입력한 값을 객체 inputValue에 담고, 그 객체를 new JSONModel에 바인딩한다.

버튼 클릭시 함수 실행

App.controller.js

onGugudan: function() {
    var oView = this.getView(); /*뷰에 먼저 접근*/
    var oModel = oView.getModel();
    var sInputValue = oModel.getProperty("/inputValue").trim();

뷰에 먼저 접근해야 한다. 뷰에 접근하고 나서 뷰에 있는 default 모델을 변수에 담는다. 현재 뷰의 default모델은 위에서 생성해준 new JSONModel이다. 모델에서의 inputValue 객체 프로포티를 가져와 변수 sInputValue에 담는다. trim은 공백을 제거하는 프로포티이다.

getProperty("경로") : 경로에 있는데이터만 가져온다. 중괄호나 모델이름 써줄필요 없다. 특정 모델에서 데이터를 가져오고 싶으면 해당 모델이름은 getProperty의 경로안에 써줄필요 없이 위의 getModel에서 써주면 된다.
getData() 처음에 모델 생성할때 세팅해준 자바스크립트 객체 전체를 가져온다.

if (sInputValue === "") {
     MessageBox.error("값을 입력하시기 바랍니다.");
    return;
}

if (!(1 <= sInputValue && sInputValue <= 9)) {
    MessageBox.error("1부터 9까지만 입력가능 합니다.");
    return;
}

사용자가 입력한 값이 빈값일때와 1과 9사이의 숫자가 아닐때 에러 메세지를 출력한다.

var sSumText = "";

for (var i = 1; i <= sInputValue; i++) {
    for (var k = 1; k <= 9; k++) {
        sSumText += i + " * " + k + " = " + (i * k) + "\n";
    }
        oModel.setProperty("/gugudanTextArr/" + (i - 1), sSumText);
        sSumText = "";
}

if (sInputValue < 9) {
    for (var m = sInputValue; m <= 9; m++) {
        oModel.setProperty("/gugudanTextArr/" + m, "");
    }
}


} //펑션 괄호

for문의 결과인 한단의 구구단을 텍스트로 만들었다. 이렇게하면 이 텍스트가 다 붙어서 나오기때문에 옆으로 단마다 띄워서 나타내주기 위해 JSONModel객체에 gugudanTextArr: ["", "", "", "", "", "", "", "", ""] 을 추가한다.

App.view.xml

화면상에서도 구분지어 영역을 만들어준다.

<HBox>
    <Text text="{/gugudanTextArr/0}" class="sapUiSmallMargin"/>
    <Text text="{/gugudanTextArr/1}" class="sapUiSmallMargin"/>
    <Text text="{/gugudanTextArr/2}" class="sapUiSmallMargin"/>
    <Text text="{/gugudanTextArr/3}" class="sapUiSmallMargin"/>
    <Text text="{/gugudanTextArr/4}" class="sapUiSmallMargin"/>
    <Text text="{/gugudanTextArr/5}" class="sapUiSmallMargin"/>
    <Text text="{/gugudanTextArr/6}" class="sapUiSmallMargin"/>
    <Text text="{/gugudanTextArr/7}" class="sapUiSmallMargin"/>
    <Text text="{/gugudanTextArr/8}" class="sapUiSmallMargin"/>
    <Text text="{/gugudanTextArr/9}" class="sapUiSmallMargin"/>
</HBox>

이때는 중괄호와 함께 모델이름까지 꼭 써줘야한다.