[SAPUI5] Property, Element, Aggregation Binding

모델과 뷰 바인딩 방식

• One Way : 모델에서 데이터 변경이 뷰에도 업데이트가 되지만 뷰에서 변경된 데이터가 자동적으로 모델에 반영 되지 않는다.
• Two Way : 모델에서 변경이 되면 뷰에도 업데이트가 되고, 뷰에서 업데이트가 되어지면 모델에서도 자동적으로 업데이트가 된다.

Model	One-Way	Two-Way	One-Time
Resource Model	--	--	X
JSON Model	X	X	X
XML Model	X	X	X
OData Model	X	X	X

4가지 Data Model에 따른 방식 지원 여부이다. 'X'가 지원이다.

 

Default Binding Mode

Model	Default Binding Mode
Resource Model	one-time
JSON Model	two-way
XML Model	two-way
OData Model	one-way

 

기본 바인딩 방식은 다음과 같이 변경이 가능하다.

var oModel = new sap.ui.model.json.JSONModel();

oModel.setDefaultBindingMode(sap.ui.model.BindingMode.OneWay);

 

 

Binding

데이터를 생성하고 (oData)

모델을 생성하고 (oModel)

이 모델을 뷰에다가 할당을 해줘야만한다.

그래야 UI 컨트롤하고 바인딩해서 사용할 수 있다.

이때 사용되는 메소드가 setModel이다.

 

JSONModel 오브젝트를 사용하기 위해서 "sap/ui/model/json/JSONModel" 모듈을 import해야한다.

 

Property Binding

모델을 UI 컨트롤의 프로퍼티에 연결하는것을 프로퍼티 바인딩이라고한다.

모델에 담을때

this.getView().setModel(oModel, "name")과 같이 이름을 안지어줬기에

{/이름}으로 바인딩을 한다.

 

two-way라면 이 UI Controls.

즉, 태그를 통해 변경된 값이 모델에도 반영된다.

 

Aggregation Binding

모델 데이터에 따라 자식 컨트롤을 자동으로 생성하는 기능

 

skil에 여러 데이터가 들어있는 배열이 존재한다.

 

<List> 태그에 items=”{/skil}”로 우선 Property Binding을 한다.

sId와 sName은 skil 아래에 있는것이므로 /sId, /sName과 같이 작성하지 않아도 된다.

종속적인 프로퍼티가 바인딩 되어질때는 슬래시(/)를 생략한다.

그래서 {sId}, {sName}으로 바인딩을 할 수 있다.

 

Element Binding

UI Control과 바인딩하는 Element 바인딩이 있다.

컨트롤을 모델의 특정 항목(데이터 경로)에 연결하는 거예요.

그 덕분에 해당 데이터의 속성들을 하위 컨트롤에서도 쉽게 사용할 수 있죠.

 

oData에 담긴 Object를 모델에 담아 뷰에 넘겨주었다.

뷰에서 사용할때 Property Binding 때 이해했던

{/department} 방식으로 사용하며 배열안에 들어있는 값들을 사용할 수 있다.

 

items 프로퍼티를 보자. 모델에 이름 department로 담았기에 “{/department}”를 호출해서 값을 사용한다.

department에 담긴 배열 요소 바로 아래에 있는 부서명은 {depName}로 바인딩이 가능하다.

 

콤보 박스에 부서명이 표시가 되는것을 확인할 수 있다.

 

이제 onSelectionChange 이벤트를 처리하는 메소드를 작성해보자.

 

oEvent : 선택 이벤트 객체가 넘어온다.

getParameter(”selectedItem”) : 선택된 아이템의 오브젝트를 반환

oItem.getBindingContext().getPath() : 선택된 오브젝트의 경로(Path)를 문자열로 반환

 

우선 sPath의 출력 결과를 보자.

왜 /department/0, /department/1일까?

 

우리가 Items 프로퍼티에 /department를 넘겼고

여기에 선택된 배열의 인덱스에 따라 0과 1이 붙어 /department/0, /department/1이 넘어온것이다.

 

이제 현재 위치가 /department/0 이라면

상대 경로로 employee를 덧붙여준다면

/department/0/employee 경로(sPath)가 완성되어

직원 배열에 접근할 수 있는것이다.

 

그래서 List에 Element Binding으로 경로 “/department/0”이 연결을 시켜준다면

상대 경로를 이용해 {employee}로 부서의 직원이 바인딩 가능한 것이다.

<items> 태그 아래에 title={empName}은 부서의 직원의 아래에 있는 종속적인 프로퍼티이므로

{empName}만으로 부서의 직원의 이름 바인딩이 가능한 것 이다.

 

그럼 <List id=”idList”>에

특정 항목(데이터 경로)에 연결을하는 Element Binding을 해보자.

 

List 태그를 찾아서 bindElement 메소드로 Element Binding을 해주면 된다.

 

oControl.bindElement("/department/0") : 특정 UI Control에 특정 데이터 경로를 연결하는 것

 

선택한 콤보박스에 나타난 부서에따라

해당 부서의 직원들의 정보가 List로 나타나는 결과를 만들 수 있다.

 

+ 콤보 박스가 아닌 일반 테이블 리스트

이전의 getParameter(”listItem”)과 getParameter(”selectedItem”) 차이가 있다.

 

listItem : 단순히 클릭한 항목을 가져오는 경우

selectedItem : 실제 선택된 항목을 가져오는 경우, 체크박스 선택 같은 선택 상태가 바뀔 때만 이벤트 발생

 

테이블에 mode="SingleSelectMaster" 값을 꼭 주자.

 

 

selectedItem가 아닌 listItem이 온다.