[UI5] 배열을 바인딩하는 모듈(Select, ComboBox)

배열을 바인딩하는 모듈에는 List, comboBox, Table, Select.. 등이 있다. 앞에서는 List를 해봤고 이번 스텝에서는 Select와 comboBox를 진행해본다.

select와 comboBox의 가장 큰 차이점은 comboBox는 필드에서 타이핑이 가능해 키워드를 알고 있으면 값을 검색해서 찾을 수 있다는 점이다. select는 리스트에서 선택만 가능하다.

enabled 체크박스를 해제하면 comboBox도 enabled로 값을 선택할 수 없게 한다.

view

<DatePicker 
    id="datePickerId"
    value="{/sToday}" 
    valueFormat = "yyyy-MM-dd"
    displayFormat="{/dateFormat}" />

<Select
    items="{/selectItems}"
    selectedKey="{/selectedKey}"
    showSecondaryValues="true"
    width="300px"
    change=".onSelect"> 
    <!--showSecondaryValues 추가 텍스트-->
    <!--editable, enabled ="false" 선택 못하게 -->
    <items>
        <core:ListItem icon="sap-icon://cart" key="{itemKey}" text="{itemKey}" additionalText="{itemText}" />
        <!--<core:Item key="A" text="EU" /> -->
        <!--<core:Item key="B" text="Africa" />-->
        <!--<core:Item key="C" text="America" />-->
        <!--반복돌때 aggregation 돌기때문에 한번만 있어도됨-->
    </items>        
</Select>

<ComboBox
    id="comboboxId"
    items="{/selectItems}"
    selectedKey="{/selectedKey}"
    showSecondaryValues="true"
    width="300px"
    enabled="false"
    change=".onSelect"> 
    <items>
        <core:ListItem icon="sap-icon://cart" key="{itemKey}" text="{itemKey}" additionalText="{itemText}" />
    </items>        
</ComboBox>

<CheckBox text="Enabled" select=".onSelectCheckBox"    /> <!--change아닌 select 이벤트-->

배열을 바인딩하는 모듈은 모듈안의 aggregation을 반복해서 수행하기 때문에 한번만 있어도 된다. default모델일 경우 모델명을 생략할 수 있기때문에 프로포티 명만 입력해 데이터를 가져온다.

• 바인딩된 모델 데이터가 객체일경우
  {모델명(default모델인경우 생략)>/property명}

• 바인딩된 모델 데이터가 배열일경우
  {모델명(default모델인경우 생략)>/index}
• 배열을 바인딩하는 모듈일 경우
  {모델명(default모델인경우 생략)>property명

controller

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

    return Controller.extend("control.controller.App", {
            onInit: function() {
            var oData = {
                sToday : "2020-08-01", 
                dateFormat : "yyyy-MM-dd",

                selectedKey: "B", //초기화면에서 어떤거 먼저 나오게할건지, Africa
                selectItems: [
                    {itemKey: "A", itemText: "EU"},
                    {itemKey: "B", itemText: "Africa"},
                    {itemKey: "C", itemText: "America"}]

        };
        var oModel = new JSONModel(oData);
        this.getView().setModel(oModel);
    },


    onSelect : function(ABC) {
        MessageToast.show(ABC.getSource().getSelectedKey());    
    },

    onSelectCheckBox : function(oEvent) { //이벤트 객체 통해서 checkBox 모듈 객체 가져옴
        // set data
        var bSelected = oEvent.getSource().getSelected();
        var oComboBox = this.byId("comboboxId"); //id사용해서 변경해야하는 모듈객체 가져옴
        oComboBox.setEnabled(bSelected);

        // get data
        var oDatePicker = this.byId("datePickerId");
        MessageToast.show(oDatePicker.getValue());    //첫번째 dataPicker 값 가져옴
    }
    });
});

id를 사용하는건 ui5에서 지양하지만, 이렇게 다른 모듈을 가져와서 변경할때는 모듈에 id를 지정해서 id로 해당 모듈을 가져온다.