[ SAPUI5 ] Aggregation Binding and Expression Binding

Data를 Binding할 때 하나의 데이터 값만 화면에서 보여줄 수 있지만, 테이블 열에 여러 가지의 속성을 설정해두고, 그 속성에 맞는 행 다수의 데이터 정보를 보여주고 싶을 때는 배열함수를 사용하는 등 List화 하여 UI를 표현할 수 있다.

---

 

Aggregation Binding

---

 

"Aggregation Binding은 Table, List 또는 풀다운 Control과 같은 Aggregation을 지원하는 UI Control에 Data set를 Binding하는 데에 사용한다."

"Control의 bindAggregation(sPath, oTemplate) 메서드를 사용해 Collection을 Binding한다.
"UI 템플릿은 하나 이상의 다른 UI Control로 구성되고, 반복된 List 항목으로 사용된다."

"Aggregation은 Model에 정의된 Data set, 즉 XML에서 이름이 같은 다수의 태그, JSON Model 내의 배열 또는 OData Model의 Collection에만 Binding이 가능하다."

---

 

bindAggregation(sName, oBindingInfo)

---

 

"Aggregation을 Model에 Binding 한다."

"Binding된 Aggregation은 특정 템플릿을 사용하고, Binding된 List에 있는 각 항목에 대해 이를 복제하며, 적절한 Binding Context를 설정한다."

"Aggregation을 Model에 Binding할 때는 관리 대상으로서의 Object는 Meta Model의 Aggregation에 bindable="bindable" 플래드를 지정해 해당 Aggregation에 대해 입력된 bindSomething 메서드를 가죠올 수 있다."

---

 

    - Controller에서 Binding할 Data set 값을 배열함수에 생성한다.

{ company: {
  contact: [
    {name: "Python", phone: "010-3333-2222"},
    {name: "Chobo", phone: "010-4444-2222"},
    {name: "man", phone: "010-3333-5555"},
  ]
  }
}

---

 

    - Data set를 Binding 하기 위해 보여줄 테이블의 열을 설정하고 동적 데이터 값이 들어갈 UI 템플릿을 구성한다.

<Table id="idTable"
		items="/company/contact">
    <columns>							// 항목에 대한 Aggregation Binding
    	<Column>
        	<Text text="Name" />
        </Column>
        <Column>
        	<Text text="Phone" />
        </Column>
    </columns>
    <items>
    	<ColumnListItem vAlign="Middle" type="Active">		// 속성 Binding이 모인 UI 템플릿
        	<cells>
            	<Text text="{name}" wrapping="false" />
                <Text text="{phone}" />
            <cells>
        </ColmnListItem>
    </items> 
</Table>

---

 

Expression Binding

---

 

"Expression Binding은 사용자 정의 Formatter 함수 대신 표현식을 제공한다."
"이에 따라 함수를 따로 정의할 필요가 없어지므로 값데 대한 비교와 같이 Formatter 함수를 써야하는 상황에 권장된다."

"Expression Binding은 XML View에서 {expression}을 통해 지정한다.

"표현식은 SAPUI5 표현식 구문 중에 일부분과는 같으나, 표현식에 {=${embedded}된 Binding은 예외이다."

---

 

    - 기본적으로 XML View와 View Controller 두 로직이 모두 필요하다.

<mvc:View controllerName="sample.App" xmlns="sap.ui.core" xmlns:mvc="sap.ui.core.mvc">
	...
    <Icon src="sap-icon://message-warning" visible={path:'status', formatter:'.privateFormatter'}">
    ...
</mvc:/View>

...
privateFormatter: function(sStatus) {
	return sStatus === "critical";
}

---

 

    - 반면에 Expression Binding을 사용하게 되면 XML View만 필요하고 Controller 로직은 불필요하게 된다.

<mvc:View controllerName="sample.app" xmlns="sap.ui.core" xmlns:mvc="sap.ui.core.mvc">
	...
    <Icon sre="sap-icon://message-warning" visible="{= ${status} === 'critical' }">
    ...
</mvc:View>

---

Next Stage : [ SAPUI5 ] OData Model

[ SAPUI5 ] OData Model

반응형