[UI5] 예제

first버튼을 누르면 버튼 a의 type이 변하고 last버튼을 누르면 버튼 b의 type이 변한다. all버튼을 누르면 a부터 e버튼까지 type이 변하고 clear버튼을 누르면 type이 초기타입으로 변한다.

App.view.xml

먼저 화면을 그려준다.

        <content>
            <VBox>
                <HBox>
                 <Button text="A" type="{/first}"/>
                 <Button text="B" type="{/all}" />
                 <Button text="C" type="{/all}" />
                 <Button text="D" type="{/all}" />
                 <Button text="E" type="{/last}"/>
                </HBox>

                <HBox>
                 <Button text="First"  press=".changeFirst" />                
                 <Button text="Last" press=".changeLast"/>                
                 <Button text="All" press=".changeAll"/>                
                 <Button text="Clear" press=".clearAll" />                        
                </HBox>
            </VBox>
        </content>

HBox는 가로로 모듈을 나열하고, VBox는 세로로 모듈을 나열한다.

버튼 a-e는 버튼의 type이 바뀌므로 type 속성에서 프로포티를 가져온다.
press는 버튼을 클릭했을때 속성이고, 함수를 호출해 버튼을 클릭하면 함수를 실행한다.

App.controller.js

sap.ui.controller("button2.App", {
    onInit: function() {
        var oData = {
              type : "Default" 
        };
        var oModel = new sap.ui.model.json.JSONModel(oData);
        this.getView().setModel(oModel);
    },

뷰에 데이터를 바로 바인딩 할수 없어 데이터를 모델에 담고, 뷰에 모델을 바인딩해야한다.

oData로 객체를 생성하고, 객체에 데이터를 담는다. 객체를 JSON Model로 만들고 뷰에 모델을 바인딩한다.

    changeFirst : function () {
        var oModel = this.getView().getModel(); //default모델이 변수에 담김 
            oModel.setProperty("/first", "Accept"); ////뷰에선 중괄호사용, 컨트롤러단에선 중괄호 사용x
    },

getModel()을 빈공간으로 두면 default모델을 사용하겠다는 의미이다. default모델을 변수에 담아 모델에 type을 setProperty를 사용해 Accept로 셋팅한다.

    changeLast : function () {
        var oModel = this.getView().getModel();
            oModel.setProperty("/last", "Accept");
    },

    changeAll : function () {
        var oModel = this.getView().getModel();
//            oModel.setProperty("/first", "Accept");
//            oModel.setProperty("/last", "Accept");
            this.changeFirst();
            this.changeLast();
            oModel.setProperty("/all", "Accept");

    },

    clearAll : function () {
        var oModel = this.getView().getModel();
            oModel.setProperty("/first", "Default");
            oModel.setProperty("/last", "Default");
            oModel.setProperty("/all", "Default");
    }
});

같은 방식으로 다른 함수들도 구성한다.