ui5-Data Binding
1.Step 0: DataBinding
Data Binding > 이번 튜토리얼은 OpenUI5에서 데이터 바인딩의 개념을 설명한다. 데이터 바인딩을 사용하여 UI 요소를 데이터 소스에 바인딩하여 데이터를 동기화 상태로 유지하고 UI에서 데이터를 편집 할 수 있다. 데이터 바인딩의 경우 model과 바인딩 instance가 필요하다. 모델 인스턴스는 데이터를 보유하거나 설정하여 서버에서 데이...
2.Step 1: No Data Binding
Preview 01_preview.png Coding Data Binding - Step 1. webapp/index.html (New) ui5databiding/01/webapp 폴더 내에 index.html 파일을 생성한다. webapp/index.js (New) ui5databiding/01/webapp 폴더 내에 index.js 파일을 생...
3.Step 2: Creating a Model
이번 튜토리얼에선 응용 프로그램이 있는 데이터의 컨테이너로 모델을 만들어 바인딩해본다. 모델 내의 데이터는 다양한 형식을 사용하여 만들 수 있다. JavaScript Object Notation (JSON) Extensible Markup Language (XML) OData 사용자 정의 포맷 (튜토리얼에선 다루지 않음) >note: resou...
4.Step 3: Create Property Binding
이번 튜토리얼은 모델 데이터로 바인딩 해본다. Preview 03_preview.png Coding Data Binding - Step 3. sap.m의 Text 컨트롤의 text 속성을 {/greetingText}값으로 설정한다. 바인딩 경로를 묶는 {}는 자동으로 바인딩으로 해석이 된다. 이러한 바인딩을 PropertyBinding이라고 한다....
5.Step 4: Two-Way Data Binding
지금까지 튜토리얼에서 사용하여 모델 속성의 값을 읽고 표시했다. sap.m.Input 필드를 사용하여 성 및 이름 필드가 표시되도록 사용자 인터페이스를 변경하고 두 입력 필드를 모두 활성화 또는 비활성화하는 데 추가 확인 컨트롤을 사용한다. 이번 튜토리얼에선 양방향 데이터 바인딩 기능을 알아보고 뷰 정의를 XML 파일로 한다. Preview 04_pre...
6.Step 5: One-Way Data Binding
이전 튜토리얼인 양방향 바인딩 동작과 달리 단방향 데이터 바인딩은 데이터가 한 방향으로만 전송된다. 모델에서 바인딩 인스턴스를 통해 사용자에 전달되지만 다른 방향으로는 전달되지 않는다. 이번 튜토리얼에선 이전 예제를 단방향 데이터 바인딩으로 변경한다. 사용자 인터페이스에서 모델로 돌아가는 데이터 흐름에 대해 설명한다. Preview 05_preview....
7.Step 6: Resource Models
이번 튜토리얼은 다국어 번역 기능에 대해서 알아본다. 일반적으로 언어 별 텍스트가 백엔드 시스템에서 직접 파생되지 않는 한 변환 가능한 텍스트를 모델에 직접 배치하는 것은 좋은 프로그래밍 방법으로 간주되지 않는다. 따라서 모든 번역 가능한 텍스트를 리소스 번들에 배치하여 동적으로 만든다. Preview 06_preview.png Coding Dat...
8.Step 7: (Optional) Resource Bundles and Multiple Languages
i18n의 resourcebundle이 있는 이유는 앱이 여러 언어로 실행되도록 하기 위해서다. 이번 튜토리얼에서 테스트로 독일어로 번역되도록 해보자. Preview 07_preview.png 07_preview2.png Coding Data Binding - Step 7.
9.Step 8: Binding Paths: Accessing Properties in Hierarchically Structured Models
6 단계에서 우리는 ResourceModel의 필드가 평면 구조로 되었다고 설명했다. 그러나 이는 resource models만 해당된다. JSON 및 OData 모델의 속성은 거의 계층 구조로 정렬된다. 따라서 이번 튜토리얼에선 계층 구조로된 모델 객체에서 필드를 참조하는 방법을 알아본다. Preview 08_preview.png Coding D...
10.Step 9: Formatting Values
이번 튜토리얼에선 이메일을 보내는 링크를 추가 한다. 이를 위해 모델의 데이터를 sap.m.URLHelper.normalizeEmail API를 사용한다. 사용자가 이름을 변경하자 마자 전자 메일도 변경되도록 사용자 정의 포맷터 함수를 사용한다. Preview 09_preview.png Coding Data Binding - Step 9. weba...
11.Step 10: Property Formatting Using Data Types
SAPUI5는 Boolean, Currency, Date 및 Float와 같은 간단한 데이터 유형을 제공한다. 이러한 데이터 유형은 화면에 표시되는 값의 형식이 올바르게 지정되고 필드가 입력용으로 열려 있으면 사용자가 입력한 값이 해당 데이터 유형의 요구사항을 준수하는지 확인하기 위해 컨트롤에 적용될 수 있다. 이번 튜토리얼에선 Currency 유형의 Sa...
12.Step 13: Element Binding
이번 튜토리얼은 바인딩 된 컨트롤이있는 양식을 사용하면서 element 바인딩을 통해 선택한 엔티티에 바인딩한다. Preview 13_preview.png Coding Data Binding - Step 13. webapp/view/App.view.xml 클릭한 product데이터를 채우기 위해 ObjectListItem 컨트롤에서 onItemSe...
13.Step 14: Expression Binding
expression 바인딩을 사용하여 형식을 지정하거나 계산된 데이터를 직접 삽입 할 수 있다. 이번 튜토리얼은 일정 값보다 높거나 낮을때 가격의 색상을 변경한다. Preview 14_preview.png Coding Data Binding - Step 14. webapp/view/App.view.xml ObjectListItem 컨트롤에서 새로운...
14. Step 15: Aggregation Binding Using a Factory Function
factory 함수를 사용하여 훨씬 더 유연하고 복잡한 데이터를 표시 할 수 있다. Preview 15_preview.png Coding Data Binding - Step 15. webapp/view/App.view.xml List 컨트롤에 factory 속성을 추가한다. 만약 데이터가 없다면 List 컨트롤은 비어있게 된다. webapp/c...