안녕하세요! Fiori 썸네일형 리스트형 [ 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 ] CSS and XML Fragment 이번에는 CSS의 여백을 설정하는 방법에 대해서 탐구해보고자 한다. 추후에 거래처에서 원하는 레이아웃의 틀이 있을 것이고, 각 레이아웃 구역에 어떤 정보를 보여주는 위치를 커스터마이징 하기 위해서는 CSS 설정이 중요다고 할 수 있겠다. CSS "전체 단면, 양면 및 응답형 여백을 추가하거나 여백을 제거하는 사전 정의된 CSS Class List를 제공한다." "사전 정의된 모든 여백의 CSS Class는 오른쪽에서 왼쪽으로 쓰는(Right To Left) 언어를 지원한다." "컨텐트 안쪽 여백을 (반응형으로) 추가하거나 제거하는 CSS Class를 사용할 수 있게 된다." 이에 따라 "모든 레이아웃에서 Control 주변과 Container 내부 간격의 일관성을 부여한다." sapUiTinyMargin.. 더보기 [ SAPUI5 ] JSONModel Table Binding in SAPUI5 직원 정보 테이블 생성하기 SAP 공식 홈페이지에 있는 UI5 관련 도큐먼테이션을 참고하여 개인 스터디를 진행하는 도중 문득 한 가지 생각이 스쳐지나 갔다. 그 생각인 즉슨, 무작정 공식 문서를 따라하는 거보다는 가이드라인을 참고하여 나만의 예제들을 만들면서 기능을 구현해 보자는 것이다. 물론 아직까지 내가 할 수 있는 영역은 아주 협소할 것임을 알기에, 결국에는 여러 예시들을 종합해서 모방하는 것에 그칠 수도 있다. 하지만 view와 controller 간의 연결 과정과 data를 binding하는 절차에 대한 이해도가 현저히 낮다고 생각이 들기 때문에 그 순서를 익히는 데에 중점을 두고자 한다. 테이블의 기본 틀 만들기 직원 정보를 화면에서 보여주기 위해서는 테이블을 만들어 해당 정보들을 담아내는 아.. 더보기 [ SAPUI5 ] Smart Filter Bar and Smart Table ○ enableAutoBinding을 사용해 controller가 아닌 view에서 데이터를 자동으로 바인딩 해보자. - [ SmartTable.view.xml ] 1) 'smartFilterBar'에서 'ControlConfiguration' 컨트롤을 추가한다. * [ metadata.xml ]에 있는 데이터 값을 화면에서 보기 위해 설정한 ''entityType'을 참조하도록 한다. * 'ControlConfiguration' 요소를 사용해 필터가 표시돼 있는 표시줄에 'Category' 필드를 포함시킨다. * 필터 기능을 하는 바를 숨길 수 있는 도구를 사용해 숨기거나 표시할 수 있는 영역을 구현할 수 있다. 2) 'SmartTable'의 설정 값을 환인해보자. * smartFilterId : 's.. 더보기 [ SAPUI5 ] Smart Form ○ 상품에 대한 정보와 공급자의 정보를 편집할 수 있도록 한다. - SmartForm 1) sap.ui.layout.form.Form 컨트롤을 사용한다. 2) SmartField 컨트롤과 함께 SmartForm 컨트롤을 사용하는 경우에는 레이블 및헤더에 대한 필수 정보가 노출되기 때문에 [ view.xml ]을설정하는 데에 있어서 매우 간편하다. 3) 이와 더불어, 읽기 전용 모드와편집 모드 사이를 전환할 수 있는 옵션이있는 경우 토글 편집이 가능하도록 SmartForm에서 지정이 가능하다. - [ SmartForm.view.xml ] 1) 'Product'용과 'Supplier'용의 'SmarForm' 컨테이너 가각 만든다. * 'GroupElement'를 사용해 SmartForm이 OData의 메타데.. 더보기 [ SAPUI5 ] Smart Field with Smart Link ○ 바인딩할 데이터에 링크를 연결해 view에서 보여주기 - [ SmartLink.view.xml ] - [ SmartLink.controller.js ] sap.ui.define([ 'sap/ui/core/mvc/Controller', 'sap/ui/demo/smartControls/test/service/UShellCrossApplicationNavigationMock' ], function(Controller, UShellCrossApplicationNavigationMock) { "use strict"; return Controller.extend("sap.ui.demo.smartControls.SmartLink", { onInit: function() { this.getView().bindEle.. 더보기 이전 1 2 3 4 5 6 ··· 8 다음
