user-thumbnail
@opensapkr
UI5/Fiori/SCP 도큐먼트 번역 및 관련 정보 공유합니다.
SERIES

ui5-Walkthrough

Walkthrough

2019년 7월 3일

OpenUI5의 모든 주요 개발 패러다임을 알아보자 Model-View-Controller같은 기본 개발 패러다임을 소개하고 애플리케이션의 best-practice 구조를 확인한다. "Hello World"를 통해 기본적으로 앱을 설정하고 실행시켜 본다 그 다음 스텝으로 SAPUI5의 기본 데이터 바인딩 개념을 소개하고 송장 목록을 보여주는 기능...

Step 1: Set Up the Initial App

2019년 7월 3일

HTML만으로 첫 번째 "Hello World"를 구축해보자 Preview !...

Step 2: Bootstrap

2019년 7월 3일

SAPUI5를 사용하여 작업이 처음 시작될 때 로드 및 초기화 프로세스를 boot strapping이라 한다. 이번 튜토리얼에선 부트스트랩이 끝날 때 경고 창을 표시해 보자. Preview 02_preview.png Coding Walkthrough - Step 2. note: SAPUI5는 응용 프로그램이 위치한 동일한 웹 서버 ...

Step 3: Controls

2019년 7월 3일

이제 HTML 본문의 "Hello World"텍스트를 SAPUI5 컨트롤 sap.m.Text로 대체하여 빌드 해보자 처음에는 JavaScript 컨트롤 인터페이스를 사용하여 UI를 설정하고 컨트롤 인스턴스를 HTML 본문에 배치한다. Preview 03_preview.png Coding Walkthrough - Step 3. ...

Step 5: Controllers

2019년 7월 3일

이번 튜토리얼에선 text를 button으로 대체하고 버튼을 누르면 "Hello World"메시지를 표시해보자 button 프레스 이벤트 처리는 뷰의 컨트롤러에서 구현한다. Preview 05_preview.png Coding Walkthrough - Step 5. webapp/view/App.view.xml App.co...

Step 6: Modules

2019년 7월 3일

SAPUI5에서 자원은 모듈이라고 부른다. 이번 튜토리얼에선지난 연습의 Javascript의 alert을 UI5의 sap.m 라이브러리의 Message Toast로 대체 해본다. 이때 해당 모듈을 로드할때 비동기적으로 로드해보자. Preview 06_preview.png Coding Walkthrough - Step 6. we...

Step 7: JSON Model

2019년 7월 3일

이전 단계에서 뷰와 컨트롤러를 설정 했으므로 이번 튜토리얼에선 Modeling에 대해서 알아보자 Preview 07_preview.png Coding Walkthrough - Step 7. webapp/controller/App.controller.js App.view xml 인풋 컨트롤의 value 속성은 바인딩 패턴만...

Step 8: Translatable Texts

2019년 7월 3일

Text들을 다른 언어로 번역 해보자 internationalization 프로세스 i18n은 SAPUI5에서 special resource model과 표준 데이터 바인딩 구문을 사용한다. Coding 08preview.png Preview 08preview webapp/i18n/i18n.properties (New) ...

Step 9: Component Configuration

2019년 7월 3일

Model-View-Controller (MVC) 개념의 세 부분을 모두 소개 한 후에 SAPUI5의 또 다른 중요한 구조적 측면을 살펴 볼 것이다. 이 단계에서는 모든 UI 자산을 index.html 파일과 독립적인 Components에 캡슐화 한다.  Components는 SAPUI5 응용 프로그램에서 사용되는 독립적이고 재사용 가능하다. 리소스에...

Step 10: Descriptor for Applications

2019년 7월 3일

모든 응용 프로그램별 컴포넌트 설정은 manifest.json이라는 설명자 파일에 추가한다. 이를 활용하면 설정하는 부분을 응용 프로그램과 분리하여 더욱 유연하게 만든다. 예를 들어 모든 SAP Fiori 애플리케이션은 Component에서 구현되며 SAP Fiori lanuchpad에서 호스팅되기 위해 descriptor 파일이 제공한다. SAP Fi...

Step 11: Pages and Panels

2019년 7월 3일

App structure에 대한 모든 작업을 마친 후에는 앱에 스타일을 지정해본다. 우리는 sap.m 라이브러리의 두 가지 컨트롤을 사용하여 UI를 디자인을 한다. 이 튜토리얼에서 control aggregations에 대해서도 알아본다. Preview 11_preview.png Coding Walkthrough - Step 11. ...

Step 12: Shell Control as Container

2019년 7월 3일

이번 튜토리얼은 shell control를 사용하여 화면 크기에 맞게 시각적으로 조정할 것이다. Preview 12_preview.png Coding Walkthrough - Step 12. webapp/view/App.view.xml App 컨트롤을 Shell 컨트롤로 감싸면 화면 크기가 특정 너비보다 큰 경우 자동으로...

Step 13: Margins and Paddings

2019년 7월 3일

이번 튜토리얼은 이전 단계에서 추가 한 컨트롤에 레이아웃에 margine과 padding을 추가해본다. 컨트롤에 CSS를 수동으로 추가하는 대신 SAPUI5에서 제공하는 표준 클래스를 사용한다. 이 클래스는 일관된 크기 조정 단계 left-to-right 방향 지원 및 반응형을 지원한다. Preview 13_preview.png Cod...

Step 14: Custom CSS and Theme Colors

2019년 7월 3일

이번 튜토리얼에선 사용자 정의 스타일 클래스를 컨트롤에 추가해서 CSS를 사용해본다. Preview 14_preview.png Caution: SAPUI5에서 스타일을 재정의하려면 SAPUI5가 업데이트 될 때마다 수정 사항을 테스트하고 업데이트 해야한다. 만약 SAPUI5가 모든 응용 프로그램에 대해 중앙집중식으로 로드되는 SAP Fior...

Step 15: Nested Views

2019년 7월 3일

panel content를 별도의 view로 처리하면 응용 프로그램 구조를 훨씬 쉽게 이해할 수 있으며 재사용이 가능하다. Preview 15_preview.png Coding Walkthrough - Step 15. webapp/view/App.view.xml 이전 App.controller에 정의된 모든 것들을 다른 ...

Step 16: Dialogs and Fragments

2019년 7월 3일

이번 튜토리얼은 view를 조합할 수 있는 fragment라는 다른 element를 알아본다. fragment은 재사용 할 수 있고 controller가 없는 가벼운 UI(UI subtrees)이다. fragment는 1~n 개의 컨트롤로 구성 될 수 있다. fragment 내부의 컨트롤은 렌더링 될 때 view의 DOM에 포함된다. App에 다이얼로그...

Step 17: Fragment Callbacks

2019년 7월 3일

이번 튜토리얼에선 다이얼로그를 닫고 이벤트 핸들러를 지정하는 버튼을 추가한다. Preview 17_preview.png Coding Walkthrough - Step 17. webapp/controller/HelloPanel.controller.js Related Information [Reusing UI Part...

Step 18: Icons

2019년 7월 3일

SAPUI5에는 500 개 이상의 아이콘이 제공된다. 이번 튜토리얼에선 다이얼로그가 열릴 때 아이콘을 추가 한다. Preview 18_preview.png Coding Walkthrough - Step 18. webapp/view/HelloPanel.view.xml 다이얼로그 fragment에서 Dialog Class의 ...

Step 19: Reuse Dialogs

2019년 7월 5일

이번 튜토리얼에서는 재사용 개념을 확장하고 component level에서 다이얼로그를 호출해본다. Step 16에서 fragment을 통해 다이얼로그를 만들었고 view또는 전체 App에서 재사용 할 수 있도록 했다. 그러나 우리는 다이얼로그 instance 관련 로직을 HelloPanel View의 Controller로 배치했다. 이러면 다이얼로그...

Step 20: Aggregation Binding

2019년 7월 5일

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

Step 21: Data Types

2019년 7월 5일

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

Step 22: Expression Binding

2019년 7월 5일

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

Step 23: Custom Formatters

2019년 7월 5일

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

Step 24: Filtering

2019년 7월 5일

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

Step 25: Sorting and Grouping

2019년 7월 5일

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

Step 26: (Optional) Remote OData Service

2019년 7월 5일

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

Step 27: Mock Server Configuration

2019년 7월 5일

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

Step 28: Unit Test with QUnit

2019년 7월 5일

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

Step 29: Integration Test with OPA

2019년 7월 5일

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

Step 30: Debugging Tools

2019년 7월 5일

SAPUI5는 응용 프로그램 logic을 확인하고 응용 프로그램 내에서 사용할 수 있는 debugging tool을 제공한다. Preview 30_preview.png Coding Walkthrough - Step 30. webapp/view/InvoiceList.view.xml package.json scripts에 b...

Step 31: Routing and Navigation

2019년 7월 5일

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

Step 32: Routing with Parameters

2019년 7월 5일

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

Step 33: Routing Back and History

2019년 7월 5일

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

Step 34: Custom Controls

2019년 7월 5일

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

Step 35: Responsiveness

2019년 7월 5일

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

Step 36: Device Adaptation

2019년 7월 5일

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

Step 37: Content Density

2019년 7월 5일

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

Step 38: Accessibility

2019년 7월 5일

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