안녕하세요! 프로그래밍 언어/UI5 썸네일형 리스트형 [ SAPUI5 ] SAP Fiori LaunchPad LaunchPad를 직접 사용해본 적은 없지만 심심찮게 주변에서 써볼 수 있는 링크를 공유해준다든지, 간혹 모르는 것을 구글링하다가 들어간 사이트가 우연히 SAP Fiori LaunchPad였기에 처음 출입 화면은 익숙한 편이다. 하지만 앞으로 기능 구현에 앞서 논리 구조를 이해하기 위해 자주 활요할 것 같아서 해당 개념을 살펴볼 것이다. LaunchPad "LaunchPad는 SAP에 로그인 하면 가장 먼저 나오는 Page로, 모바일 장치와 데스크톱 장치 모두에서 SAP Fiori App을 사용하기 위한 시작점이다." "LaunchPad 홈페이지에서는 App을 실행할 수 있는 타일과 그에 관한 추가 정보가 제공되고, PAge를 개인이 설정할 수 있도록 마련되어 있다." Tile "Tile은 SAP Fi.. 더보기 [ SAPUI5 ] Fiori 개발의 10가지 황금 규칙 Fiori를 통해 SAP 개발을 하기위해서는 최적의 조건과 환경에서 최선의 결과를 보여주는 것이 중요할 것이다. 이제 Fiori 개발에 필요한 몇 가지의 황금 규칙을 알아보겠다. SAP Fiori App이 승인된 UX 디자인을 제공해야 한다. "모든 UI 시나리오에 디자인 중심 개발 프로세스가 유효하다." "이미 있는 Control과 Pattern만을 사용해야 하는 디자인인지 확인한다." Fiori 디자인 가이드라인을 따라야 하는 디자인에 대한 종합적/보편적 이해가 성립되는지 확인한다. SAP Fiori UI가 SAPUI5로 빌드된다. "일반적으로 새로운 Fiori 어플리케이션은 SAPUI5 UI 기술을 사용해 Build해야 한다." "표준 S/4HANA 어플리케이션에는 스마트 템플릿(Meta Data .. 더보기 [ SAPUI5 ] Routing and Navigation Routing과 Navigation은 페이지의 종속 관계 혹은 절대/상대 경로를 생성하는 데에 있어 굉장히 중요한 파트라고 생각하고 있다. [ manifest.json ]에서 Route와 Path 등을 활용해 사용자를 구분해 페이지의 이동을 달리한다든지, 상품의 상세 정보가 담긴 View로 이동할 때 해당 상품의 카테고리에 따라 다른 경로를 지정해주는 등을 수행할 수 있을 것이다. sap.m.Page "sap.m.Page Control이 Page로 사용될 수 있으며, Aggregation을 "Page"라고 부르고 있으며, 브외의 다른 Control도 사용이 가능하다." "대개 일반 모바일 어플리케이션은 몇 개의 Page로 구성돼 있으며 User가 세부사항 Page로 Navigation 하거나 다시 원래 .. 더보기 [ SAPUI5 ] Unit Test by using Qunit 오늘은 나타내고자 하는 기능들이 잘 구현되는가에 대해 다양한 방법과 절차로 테스트 하는 것에는 어떤 것이 있는지 살펴보려고 한다. 즉 어플리케이션이 가지는 다양한 측면을 테스트 하는 방법에 관해 학습할 것이다. 더 나아가, SPUI5가 다룰 수 있는 영역 내의 테스트가 무엇인지 생각하며 스터디를 진행할 것이다. QUnit "QUnit은 JavaScript 단위 및 통합 테스트 프레임워크이다." "일반 JavaScript Code를 테스트할 수 있으며 바로 사용이 가능한 비동기 테스트를 지원한다." Mock and Stub "Mock은 기대치를 설정할 수 있는 Object로, 예상한 Action이 실제로 발생했는지 검증도 함께 진행한다." "Stub은 테스트 대상 Code에 전달하기 위해 사용하는 Obje.. 더보기 [ SAPUI5 ] OData Model SAP에서 UI를 구현하기 위해서 가장 중요한 것 중 하나는 바로 OData Model이다. 이미 공식 홈페이지의 도큐멘테이션이나 타 사이트의 예제를 보며 스터디해본 바가 있지만, 수박 겉핥기식으로 했기 때문에 이번 기회에 제대로 알고 가면 좋을 것 같다. OData Model "OData Model은 Data API를 생성 및 사용하기 위한 산업 표준 프로토콜이다." 또한 "HTTP와 같은 주요 프로토콜 및 XML, JSON과 같은 개방형 표준을 기반으로 하고 있으며, REST 원칙에 따른 Data 서비스 제공을 가능하게 해준다." 뿐만 아니라, "특정 규칙에 따라 구성된 URL을 사용하여 데이터를 처리하며, Collection, Entry, Property와 같은 Resource를 표현하는 데이터 형.. 더보기 [ SAPUI5 ] Aggregation Binding and Expression Binding Data를 Binding할 때 하나의 데이터 값만 화면에서 보여줄 수 있지만, 테이블 열에 여러 가지의 속성을 설정해두고, 그 속성에 맞는 행 다수의 데이터 정보를 보여주고 싶을 때는 배열함수를 사용하는 등 List화 하여 UI를 표현할 수 있다. Aggregation Binding "Aggregation Binding은 Table, List 또는 풀다운 Control과 같은 Aggregation을 지원하는 UI Control에 Data set를 Binding하는 데에 사용한다." "Control의 bindAggregation(sPath, oTemplate) 메서드를 사용해 Collection을 Binding한다. "UI 템플릿은 하나 이상의 다른 UI Control로 구성되고, 반복된 List 항목으로.. 더보기 [ SAPUI5 ] CSS and XML Fragment 이번에는 CSS의 여백을 설정하는 방법에 대해서 탐구해보고자 한다. 추후에 거래처에서 원하는 레이아웃의 틀이 있을 것이고, 각 레이아웃 구역에 어떤 정보를 보여주는 위치를 커스터마이징 하기 위해서는 CSS 설정이 중요다고 할 수 있겠다. CSS "전체 단면, 양면 및 응답형 여백을 추가하거나 여백을 제거하는 사전 정의된 CSS Class List를 제공한다." "사전 정의된 모든 여백의 CSS Class는 오른쪽에서 왼쪽으로 쓰는(Right To Left) 언어를 지원한다." "컨텐트 안쪽 여백을 (반응형으로) 추가하거나 제거하는 CSS Class를 사용할 수 있게 된다." 이에 따라 "모든 레이아웃에서 Control 주변과 Container 내부 간격의 일관성을 부여한다." sapUiTinyMargin.. 더보기 [ SAPUI5 ] / Component 이번 파트에서는 Fiori에서 SAPUI5 애플리케이션이 어떻게 작동하게 되는 지에 대해 학습하는 시간을 가질 것이다. 기본적으로 화면에서 View를 표현하기 위해서는 Controller뿐만 아니라, 데이터를 저장하거나 가공하기 위해 존재하는 Model로 데이터 정보를 전달하기 위해 필요한 Component와 App Explorer 등의 기능과 역할에 대해 알아가보고자 한다. Component "Component는 [ Compoenet.js ] 파일에서 구현된다." "App Explorer는 [ manifest.json ] 파일에서 설정한다." "[ manifest.json ] 파일에는 모든 전역 어플리케이션 설정과 매개변수가 내재돼 있는 JSON 형식의 Component Object가 Contenet로.. 더보기 이전 1 2 다음
