전체태그 보기

#Walkthrough (39개의 포스트)

opensapkr

Step 4: XML Views

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

Step 38: Accessibility

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

Step 37: Content Density

2019년 7월 5일0개의 댓글
SAPUI5에는 다양한 content density가 포함되어있어 touch 지원 장치에 대해서는 더 큰 컨트롤을 표시하고 mouse지원 장치에 대해서는 더 작은 디자인을 표시 한다. 사용자의 장치를 감지하고 그에 따라 밀도를 조정해보자 Preview 데스크탑 37preview.png 아이패드 37preview2.png ...
opensapkr

Step 36: Device Adaptation

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

Step 35: Responsiveness

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

Step 34: Custom Controls

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

Step 33: Routing Back and History

2019년 7월 5일0개의 댓글
이제 detail정보 페이지로 이동하여 invoice를 표시 할 수 있지만 overview 페이지로 돌아갈 수 없었다. detail 정보 페이지에 back 버튼을 추가하고 overview 페이지를 다시 표시하는 기능을 구현한다 Preview 33_preview.png Coding Walkthrough - Step 33. web...
opensapkr

Step 32: Routing with Parameters

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

Step 31: Routing and Navigation

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

Step 30: Debugging Tools

2019년 7월 5일0개의 댓글
SAPUI5는 응용 프로그램 logic을 확인하고 응용 프로그램 내에서 사용할 수 있는 debugging tool을 제공한다. Preview 30_preview.png Coding Walkthrough - Step 30. webapp/view/InvoiceList.view.xml package.json scripts에 b...
opensapkr

Step 29: Integration Test with OPA

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

Step 28: Unit Test with QUnit

2019년 7월 5일0개의 댓글
이제 App에 테스트 범위를 확대 하기 위해 formatter 함수에 대한 간단한 unit test를 추가한다.  Preview 28_preview.png Coding Walkthrough - Step 28. webapp/test/unit/model/formatter.js package.json의 scripts 부분에 t...
opensapkr

Step 27: Mock Server Configuration

2019년 7월 5일0개의 댓글
App을 개발을 테스트하기 위해 모의 서버 (mock server) SAPUI5 기능으로 시뮬레이션 할 수 있다. 로컬 파일을 제공하지만 사실적으로 bank-end 시스템을 시뮬레이션 한다. 또한 model 인스턴스화 부분을 변경하여 model이 descriptor에서 구성되고 SAPUI5에의해 자동으로 instance된다. 이렇게하면 code에서 mo...
opensapkr
지금까지는 로컬 JSON 데이터로만 작업했다. 이제 실제 OData 서비스를 액세스해보자 자체적 인 OData 서비스를 구현하는 대신 Northwind OData 서비스를 사용하여 데이터를 받아온다. note: 이 튜토리얼은 선택 사항이다. 작동시키지 못해도 나머지 단계는 지금까지 사용한 로컬 JSON 데이터로 작동한다. Preview 2...
opensapkr

Step 25: Sorting and Grouping

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

Step 24: Filtering

2019년 7월 5일0개의 댓글
제품 목록에 대한 검색 필드를 추가하고 검색 할 때 검색어가 일치하는 항목만 표시 되도록 한다. Preview 24_preview.png Coding Walkthrough - Step 24. webapp/view/InvoiceList.view.xml 필터링을 위한 두 개의 새로운 종속성을 로드한다. Filter객체는 ...
opensapkr

Step 23: Custom Formatters

2019년 7월 5일0개의 댓글
데이터 모델의 서식 속성을 custom formatting function을 통해 status 조건에 맞게 바인딩 해보자 Preview 23_preview.png Coding Walkthrough - Step 23. webapp/model/formatter.js (New) Related Information [Fo...
opensapkr

Step 22: Expression Binding

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

Step 21: Data Types

2019년 7월 5일0개의 댓글
이번 튜토리얼에선 SAPUI5 데이터 형식을 사용하여 가격을 함께 표시해 보자. Preview 21_preview.png Coding Walkthrough - Step 21. webapp/view/InvoiceList.view.xml 데이터 모델이 아닌 콘트롤러에 있는 통화 코드를 액세스하려면 송장 목록의 컨트롤러에 뷰 ...
opensapkr

Step 20: Aggregation Binding

2019년 7월 5일0개의 댓글
패널 아래 목록에 표시되는 JSON 형식의 송장 데이터를 추가하여 데이터 Binding의 기능을 알아보자 Preview 20_preview.png Coding Walkthrough - Step 20. webapp/Invoices.json (New) Related Information Lists [API Refer...