# Walkthrough

39개의 포스트

Step 4: XML Views

Step 4: XML Views UI를 index.html 파일에만 넣어 개발하면 유지보수에 어려움이 있다. sap.m.Text 컨트롤을 전용 뷰에 배치하여 모듈로 만들어 보자 SAPUI5는 다중 뷰 유형 (XML, HTML, JavaScript)을 지원한다. 그 중 가장 가독성이 높은 코드를 생성하고 뷰 선언을 컨트롤러 로직과 분리하도록 XML을 사용한...

2019년 10월 30일
·
0개의 댓글

Step 38: Accessibility

앱의 접근성을 향상시키기 위해 ARIA 속성을 추가한다. ARIA 속성은 화면 판독기가 응용 프로그램 구조를 인식하고 UI 요소를 올바르게 해석하는 데 사용된다. 시각 장애인과 같이 컴퓨터 사용이 제한적인 사용자가 앱을 더욱 쉽게 이용할 수 있다. Preview 38_preview.png Coding Walkthrough - Step 38. web...

2019년 7월 5일
·
0개의 댓글

Step 37: Content Density

SAPUI5에는 다양한 content density가 포함되어있어 touch 지원 장치에 대해서는 더 큰 컨트롤을 표시하고 mouse지원 장치에 대해서는 더 작은 디자인을 표시 한다. 사용자의 장치를 감지하고 그에 따라 밀도를 조정해보자 Preview 데스크탑 37_preview.png 아이패드 37_preview2.png 아이폰x ![37_p...

2019년 7월 5일
·
0개의 댓글

Step 36: Device Adaptation

이제 응용 프로그램을 실행하는 디바이스를 기반으로 하는 Control의 visibility과 property을 구성한다. sap.ui.Device API를 사용하고 장치 모델을 정의하면 많은 디바이스에서 앱 ui가 최적화 된다. Preview 36_preview.png Coding Walkthrough - Step 36. webapp/view/He...

2019년 7월 5일
·
0개의 댓글

Step 35: Responsiveness

SAPUI5 응용 프로그램은 모바일, 태블릿 및 데스크탑 장치에서 실행할 수 있고 각 화면 영역을 활용하여 응용 프로그램을 구성 할 수 있다. sap.m.Table과 같은 SAPUI5 컨트롤은 이미 사용할 수있는 많은 기능을 제공한다. Preview 35_preview.png Coding Walkthrough - Step 35. webapp/v...

2019년 7월 5일
·
0개의 댓글

Step 34: Custom Controls

이번 튜토리얼은 사용자지정 컨트롤을 사용하여 SAPUI5의 기능을 확장해본다. detail 페이지에 표시된 제품의 평가를 표시하기 위해 glue code를 추가한다. 이렇게하면 앱 전체에서 컨트롤을 재사용하고 모든 관련 기능을 하나의 모듈에 보관할 수 있다. Preview 34_preview.png Coding Walkthrough - Step 34...

2019년 7월 5일
·
0개의 댓글

Step 33: Routing Back and History

이제 detail정보 페이지로 이동하여 invoice를 표시 할 수 있지만 overview 페이지로 돌아갈 수 없었다. detail 정보 페이지에 back 버튼을 추가하고 overview 페이지를 다시 표시하는 기능을 구현한다 Preview 33_preview.png Coding Walkthrough - Step 33. webapp/view/Det...

2019년 7월 5일
·
0개의 댓글

Step 32: Routing with Parameters

이제 overview 및 detail 정보 페이지를 이동할 수 있지만 Overview에서 선택한 실제 item의 실제 내용이 detail page에 아직 표시되지 않는다. 이 작업을 수행하려면 선택한 item에 대한 정보를 detail 페이지로 전달하고 해당 항목에 대한 세부 정보를 표시한다. Preview 32_preview.png Coding W...

2019년 7월 5일
·
0개의 댓글

Step 31: Routing and Navigation

이전 단계에서 App의 view에서 page를 직접 정의하여 App 로드 시 표시 되도록 했다. 컨텐츠를 분리하여 별도의 페이지에 넣어 더 많은 기능을 추가하도록 라우터 기능을 알아보자 이제 SAPUI5 router 클래스를 사용하여 페이지를 로드하고 자동으로 URL을 업데이트한다. App의 routing 구성을 지정하고 App의 각 page에 대해 별도...

2019년 7월 5일
·
0개의 댓글

Step 30: Debugging Tools

SAPUI5는 응용 프로그램 logic을 확인하고 응용 프로그램 내에서 사용할 수 있는 debugging tool을 제공한다. Preview 30_preview.png Coding Walkthrough - Step 30. webapp/view/InvoiceList.view.xml invoice>ExtendedPrice대신 Invoice>error...

2019년 7월 5일
·
0개의 댓글

Step 29: Integration Test with OPA

App과의 상호 작용을 테스트를 위해 Dialog기능이 들어가 있는 Say Hello 버튼을 클릭하면 열리는 지 확인한다. JavaScript 및 QUnit을 기반으로 쉽게 설정되어있는 OPA5를 사용하면 이 작업을 쉽게 수행 할 수 있다. 통합 및 unit test를 사용하면 CI (Continuous Integration) 환경에서 일관성(consist...

2019년 7월 5일
·
0개의 댓글

Step 28: Unit Test with QUnit

이제 App에 테스트 범위를 확대 하기 위해 formatter 함수에 대한 간단한 unit test를 추가한다. Preview 28_preview.png Coding Walkthrough - Step 28. webapp/test/unit/model/formatter.js 테스트하려는 formatter 파일은 종속성으로 로드하고 번역된 텍스트가 정확...

2019년 7월 5일
·
0개의 댓글

Step 27: Mock Server Configuration

App을 개발을 테스트하기 위해 모의 서버 (mock server) SAPUI5 기능으로 시뮬레이션 할 수 있다. 로컬 파일을 제공하지만 사실적으로 bank-end 시스템을 시뮬레이션 한다. 또한 model 인스턴스화 부분을 변경하여 model이 descriptor에서 구성되고 SAPUI5에의해 자동으로 instance된다. 이렇게하면 code에서 mode...

2019년 7월 5일
·
0개의 댓글

Step 26: (Optional) Remote OData Service

지금까지는 로컬 JSON 데이터로만 작업했다. 이제 실제 OData 서비스를 액세스해보자 자체적 인 OData 서비스를 구현하는 대신 Northwind OData 서비스를 사용하여 데이터를 받아온다. >note: 이 튜토리얼은 선택 사항이다. 작동시키지 못해도 나머지 단계는 지금까지 사용한 로컬 JSON 데이터로 작동한다. Preview 26_pre...

2019년 7월 5일
·
0개의 댓글

Step 25: Sorting and Grouping

데이터 모델에서 주문을 표시 대신 알파벳순으로 정렬한다. 또한 제품을 제공하는 회사를 추가한다. Preview 25_preview.png Coding Walkthrough - Step 25. webapp/view/InvoiceList.view.xml 데이터 Path를 지정하고 sorter 속성을 추가한다. 송장 항목을 정렬은 데이터 path를 지...

2019년 7월 5일
·
0개의 댓글

Step 24: Filtering

제품 목록에 대한 검색 필드를 추가하고 검색 할 때 검색어가 일치하는 항목만 표시 되도록 한다. Preview 24_preview.png Coding Walkthrough - Step 24. webapp/view/InvoiceList.view.xml 해당 view는 인보이스 목록에 추가 한 검색 컨트롤에 의해 확장된다. 검색 필드에 추가하는 on...

2019년 7월 5일
·
0개의 댓글

Step 23: Custom Formatters

데이터 모델의 서식 속성을 custom formatting function을 통해 status 조건에 맞게 바인딩 해보자 Preview 23_preview.png Coding Walkthrough - Step 23. webapp/model/formatter.js (New) 새로운 formatter 파일은 model폴더에 위치한다. 현재까지 Inv...

2019년 7월 5일
·
0개의 댓글

Step 22: Expression Binding

데이터 모델의 현재 숫자에 따라 가격 표시에 스타일을 넣어 보자 Preview 22_preview.png Coding Walkthrough - Step 22. webapp/view/InvoiceList.view.xml numberState 속성을 추가하고 중괄호({ }) 안에 =로 시작하는 새로운 바인딩 구문을 알아보자 이 형식은 새로운 바인딩 ...

2019년 7월 5일
·
0개의 댓글

Step 21: Data Types

이번 튜토리얼에선 SAPUI5 데이터 형식을 사용하여 가격을 함께 표시해 보자. Preview 21_preview.png Coding Walkthrough - Step 21. webapp/view/InvoiceList.view.xml view내부의 인보이스 목록에 가격을 표시할 것이다. ObjectListItem의 number속성에 특수 바인딩 ...

2019년 7월 5일
·
0개의 댓글

Step 20: Aggregation Binding

패널 아래 목록에 표시되는 JSON 형식의 송장 데이터를 추가하여 데이터 Binding의 기능을 알아보자 Preview 20_preview.png Coding Walkthrough - Step 20. webapp/Invoices.json (New) Invoice file에는 응용프로그램에서 JSON 형식의 컨트롤을 Binding 하는데 사용할 수...

2019년 7월 5일
·
0개의 댓글