# ui5

85개의 포스트
post-thumbnail

Tutorial 13. i18n

i18n이란 Internationalization의 준말입니다. 이처럼 UI5는 글로벌 UI 솔루션 라이브러리 답게 각 언어 상황에 따라 메뉴의 컨텐츠를 동적으로 매핑해줍니다. 예를 들면, 한국의 유저는 i18n_kr 영어권 유저는 i18n_en 처럼 말이지요. i18

2020년 9월 5일
·
0개의 댓글
post-thumbnail

Tutorial 15. Mock Server

Mock Server는 가짜 서버를 만들어서 마치 api가 있는 것처럼 사용할 수 있는 서버입니다. 이 기술은 사용가능한 OData 서비스가 없거나 개발 및 테스트를 위해 OData 백엔드 연결에 의존하고 싶지 않은 경우 이용할 수 있습니다. 즉, 프론트엔드 개발자와

2020년 9월 5일
·
0개의 댓글
post-thumbnail

Tutorial 14. Custom formatter

UI5를 이용하면 데이터 모델의 속성 값에 따라서 바인딩을 바꿔주는 것이 가능합니다. 특정 status 값을 동적으로 List에서 보여주고 싶을 때 formatter는 효과적으로 이용됩니다. custom formatter를 만드는 방법은 먼저, Model 폴더에 for

2020년 9월 5일
·
0개의 댓글
post-thumbnail

Tutorial 12. Using OData

Odata는 UI5에서 데이터 부분을 다루는데 있어서 가장 중요한 부분입니다. 주로 Fiori단에서 웹 개발을 한다면, Odata는 절대적일 정도로 매우 많이 사용되는 프로토콜입니다. 일단 가볍게 Odata란 무엇인지 알아보겠습니다. 위키백과 에서 Odata의 정의를

2020년 9월 5일
·
0개의 댓글
post-thumbnail

Tutorial 11. TodoList

여태까지 저희가 배운 것을 바탕으로 간단한 ui5 웹앱을 만드려고 합니다. 바로 TodoList 만들기 입니다. 대부분의 브라우저는 local storage를 제공합니다. local storage는 쿠키와 비슷하게 5MB 정도의 브라우저 내부 저장 공간에 데이터를 저장

2020년 9월 5일
·
0개의 댓글
post-thumbnail

Tutorial 10. Custom controls

UI5에서 주어지는 label 태그에는 다른 이벤트를 삽입할 수 없습니다. 하지만, 경우에 따라서는 이러한 것들을 자유롭게 사용하고 싶은 개발자의 니즈는 존재합니다. 반면, 반복되는 UI view를 일정 단위대로 묶고 하나의 컨트롤 단위로 묶어서 view단의 소스를

2020년 9월 5일
·
0개의 댓글
post-thumbnail

Tutorial 09. Fragment

View를 만들면서 반복되는 UI control이 늘어나는 경우가 있습니다. React나 Vue를 예로 들면 이를 template이나 컴포넌트 형태로 View단을 나누어 효율적인 코드 유지보수를 가능하게 지원합니다. UI5에서도 이처럼 비슷한 기능을 제공하는데 바로,

2020년 9월 5일
·
0개의 댓글
post-thumbnail

Tutorial 08. Routing

UI5는 웹페이지 간의 Navigation 기능을 제공합니다. 이것이 바로 Routing입니다. Tutorial 01을 보신 분이라면 UI5가 SPA(Single Page Application)이라는 것을 알고 계실 것입니다. SPA의 특징은 바로 화면을 구성하는 ht

2020년 9월 3일
·
0개의 댓글
post-thumbnail

Tutorial 07. UI Elements

UI5는 다양한 UI Element를 제공합니다. SAPUI5는 Fiori라는 SAP 하이브리드 웹앱 플랫폼을 제작하기 위한 엔터프라이즈 라이브러리이기에 OPENUI5보다 많은 종류의 UI Elements를 제공합니다. 만약에, 상업적으로 UI5 어플리케이션을 만들어야

2020년 9월 3일
·
0개의 댓글
post-thumbnail

Tutorial 06. UI5 Model

UI5는 Model View Controller의 MVC 패턴을 사용합니다. MVC의 특징은 View는 화면단의 로직을 Model은 화면에 필요한 데이터를, 그리고 Controller는 View와 Model 두영역을 다루는 코드로 구성되어 있습니다. UI5에선 View

2020년 9월 3일
·
0개의 댓글
post-thumbnail

Tutorial 05. Module

자바스크립트 프로그램은 꽤 작게 시작되었습니다. 초기에 사용된 대부분의 스크립트는 독립적인 작업을 수행하며, 일반적으로 큰 스크립트가 필요하지 않았습니다. 요즘 모던 자바스크립트에선 브라우저 제어로직이나 Node.js와 같은 브라우저 외의 영역에서도 사용가능합니다.따라

2020년 9월 3일
·
0개의 댓글

Step 4: XML Views

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

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

UI5Con 2019

image.png 동영상 : https://youtu.be/lPETbnuL9hs 발표문서 : https://www.slideshare.net/PeterMuessig1/ui5con-2019-keynote-for-rot/PeterMuessig1/ui5con-2019-keynote-for-rot

2019년 7월 19일
·
1개의 댓글

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개의 댓글