OpenUI5 관련해서 마지막으로 Data Binding 에 대해서 알아보도록 하겠습니다.

최근 웹 개발 트렌드는 클라이언트에서 기본 페이지 레이아웃을 로딩하고, 웹브라우져에서 렌더링해서 보여줄 데이터를 비동기 방식으로 받아와서 화면에 보여주는 형태를 선호합니다. 데이터 바인딩은 특정 컨트롤에 표시되는 정보를 데이터 모델과 연결하여 컨트롤 상에서 데이터를 변경해도 그 결과가 모델에 반영이 되고, 반대로 모델의 데이터를 변경해도 컨트롤에 바로 표시되게 하는 것 입니다.

쉽게 이야기해서 Textfield 와 특정 모델을 연결시켜 놓으면, 사용자가 Textfield 에 입력한 값이 모델에 바로 연동되며, 반대로 javascript 상에서 모델의 값을 변경하면 연결된 Textfield 값이 변경됩니다.

이번 예제에서는 지난번에 만든 페이지를 데이터 바인딩을 사용해서 변경해 보겠습니다.

따라서 실제로 화면에서 보여지는 부분은 차이가 없습니다.

지난번에 작성한 Main.view.js 파일에서 List에 나타나는 데이터와 화면 오른쪽에 보여지는 사이트 정보를 데이터 모델로 옮기고 해당 부분을 바인딩해 보도록 하겠습니다.

기존에 List 컨트롤에 addItem으로 추가했던 ListItem 데이터 대신 바인딩할 Template을 준비합니다.

                        new sap.m.List({
                            showNoData: true
                            , columns: [ new sap.m.Column() ]
                            , items: {
                                path: "/d/listItems"
                                , template: new sap.m.StandardListItem({
                                    title: "{title}"
                                    , icon: "{icon}"
                                    , info: {
                                        parts: ["rating"]
                                        , formatter: oController.infoFormatter
                                    }
                                    , description: "{description}"
                                })
                            }
                        })

List의 경우 여러 개의 아이템이 들어갈 수 있으므로 모델은 배열 형태로 표시됩니다. 따라서 해당 배열의 경로를 path로 지정하고 각각 표시될 정보를 배열 데이터의 키로 지정합니다.  예제에서 title: "{title}" 로 표시된 부분에서 {title} 이 바인딩 될 모델 데이터 상대 경로 입니다. 실제 경로는 [path] + /[배열 index]/ + title 이 됩니다.

그리고 info 항목을 보면 formatter를 사용했습니다. parts에 해당 모델에서 읽을 키들이 정의 됩니다. 여기서는 rating 값을 읽어서 controller에 있는 infoFormatter 함수가 화면에 출력될 값을 생성해서 return 해 줍니다.

비슷한 방법으로 TextArea에 들어가는 값도 바인딩을 해 보았습니다.

                    , new sap.m.TextArea({
                            cols:50
                            , rows:10
                            , value: "{/d/siteDescription}"
                    }).addStyleClass("textArea")

TextArea에 들어가는 값은 경로를 {} 로 묶어 주면 됩니다. (value: "{/d/siteDescription}" 부분)

그리고 각 컨트롤에 모델을 지정해 주어야 하는데, List 나 TextArea는 View 안에 들어가는 컨트롤이기 때문에 View 에 모델을 설정해 주면 됩니다. 지금까지 사용하지 않았던 Main.Controller.js 파일에서 해당 부분을 다루어 보겠습니다.

먼저 컨트롤러에서 사용할 모델을 준비합니다.

oModel: new sap.ui.model.json.JSONModel()

컨트롤러 객체가 생성될 때 제일 먼저 실행되는 onInit 함수에 모델을 View에 바인딩하는 코드 (빨간색 표시 부분) 과 모델에 데이터를 설정하는 코드 (파란색 표시 부분) 을 추가합니다.

    , onInit: function() {
        this.getView().setModel(this.oModel);
        this.oModel.setData({
            d: {
                listItems: [
                    { title: "MoonBucks", icon: "sap-icon://e-care", rating: 2, description: "Description" }
                    , { title: "StartBucks", icon: "sap-icon://e-care", rating: 4, description: "Description" }
                    , { title: "CoffeeVince", icon: "sap-icon://e-care", rating: 3, description: "Description" }
                    , { title: "StarBugs", icon: "sap-icon://e-care", rating: 1, description: "Description" }
                ]
                , siteDescription: "In the long history of the world, only a few generations have been granted the role of defending freedom in its hour of maximum danger. I do not shrink from this responsibility - I welcome it."
            }
        });
    }

View에 모델이 바인딩되어 있기 때문에 데이터를 먼저 세팅하고 모델을 지정하든, 모델을 먼저 지정하고 모델에 데이터를 넣어 주던 순서는 상관이 없습니다.

마지막으로 rating 부분을 숫자에서 별표시로 바꿔주는 formatter 코드 입니다.

특별한 것이 없어서 설명은 생략합니다.

    , infoFormatter: function(pInfo) {
        var stars = "★★★★★☆☆☆☆☆";
        return stars.substr(5-pInfo, 5);
    }

이상으로 UI5에 대한 간단한 설명을 마치도록 하겠습니다.

바인딩이 적용된 소스 코드는 아래 git 링크에서 받아 보실 수 있습니다.

https://github.com/shineum/openui5/tree/Ch03_Data_Binding