ui5-Walkthrough

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

HTML만으로 첫 번째 "Hello World"를 구축해보자 Preview 01_preview.png Coding Walkthrough - Step 1. webapp/index.html (New) Index.html은 root HTML file이라 불린다. Html 문서는 [head]태그와 [body]태그 두 섹션으로 구성된다. 1) [head]...

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

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

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

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

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

이전 단계에서 뷰와 컨트롤러를 설정 했으므로 이번 튜토리얼에선 Modeling에 대해서 알아보자 Preview 07_preview.png Coding Walkthrough - Step 7. webapp/controller/App.controller.js 컨트롤러에 init 함수를 추가한다. onInit은 컨트롤러 생성시 프레임 워크에서 호출하는 ...

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

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

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

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

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

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

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

panel content를 별도의 view로 처리하면 응용 프로그램 구조를 훨씬 쉽게 이해할 수 있으며 재사용이 가능하다. Preview 15_preview.png Coding Walkthrough - Step 15. webapp/view/App.view.xml panel과 그 content를 App view에 직접 저장하는 대신 HelloPan...

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

이번 튜토리얼에선 다이얼로그를 닫고 이벤트 핸들러를 지정하는 버튼을 추가한다. Preview 17_preview.png Coding Walkthrough - Step 17. webapp/controller/HelloPanel.controller.js Fragment.load 함수의 세 번째 매개변수는 선택적이며(controller) 객체에 대한 ...

SAPUI5에는 500 개 이상의 아이콘이 제공된다. 이번 튜토리얼에선 다이얼로그가 열릴 때 아이콘을 추가 한다. Preview 18_preview.png Coding Walkthrough - Step 18. webapp/view/HelloPanel.view.xml 다이얼로그를 여는 버튼에 아이콘을 추가한다. sap-icon://icon-name...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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