안녕하세요! Odata 썸네일형 리스트형 [ 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 ] OData Model SAP에서 UI를 구현하기 위해서 가장 중요한 것 중 하나는 바로 OData Model이다. 이미 공식 홈페이지의 도큐멘테이션이나 타 사이트의 예제를 보며 스터디해본 바가 있지만, 수박 겉핥기식으로 했기 때문에 이번 기회에 제대로 알고 가면 좋을 것 같다. OData Model "OData Model은 Data API를 생성 및 사용하기 위한 산업 표준 프로토콜이다." 또한 "HTTP와 같은 주요 프로토콜 및 XML, JSON과 같은 개방형 표준을 기반으로 하고 있으며, REST 원칙에 따른 Data 서비스 제공을 가능하게 해준다." 뿐만 아니라, "특정 규칙에 따라 구성된 URL을 사용하여 데이터를 처리하며, Collection, Entry, Property와 같은 Resource를 표현하는 데이터 형.. 더보기 [ SAPUI5 ] CSS and XML Fragment 이번에는 CSS의 여백을 설정하는 방법에 대해서 탐구해보고자 한다. 추후에 거래처에서 원하는 레이아웃의 틀이 있을 것이고, 각 레이아웃 구역에 어떤 정보를 보여주는 위치를 커스터마이징 하기 위해서는 CSS 설정이 중요다고 할 수 있겠다. CSS "전체 단면, 양면 및 응답형 여백을 추가하거나 여백을 제거하는 사전 정의된 CSS Class List를 제공한다." "사전 정의된 모든 여백의 CSS Class는 오른쪽에서 왼쪽으로 쓰는(Right To Left) 언어를 지원한다." "컨텐트 안쪽 여백을 (반응형으로) 추가하거나 제거하는 CSS Class를 사용할 수 있게 된다." 이에 따라 "모든 레이아웃에서 Control 주변과 Container 내부 간격의 일관성을 부여한다." sapUiTinyMargin.. 더보기 [ SAPUI5 ] Rule Builder Control / Decision Table - 1 ○ decision table 기본 설명 - Refresh Data Object : 데이터 객체의 속성을 읽고 미리 정의된 결과의 속성을 자동으로 가져온다. - Cut / Copy / Paste 1) Cut : 특정 행을 제거하는 데 사용되며 붙여넣기 옵션을 사용해 decision table의 다른 행에 삽입할 수 있다. 2) Copy : 특정 행을 복제한는 데에 사용되며 붙여넣기 옵션을 사용해 decision table의 다른 행에 삽입할 수 있다. - Hit Policy 1) First Match : rule engine은 조건과 일치하는 첫 번째 항목을 자겨오고 해당 결과가 반환된다. 2) All Match : rule enjine은 조건과 일치하는 모든 항목을 가져와서 결과로 반환한다. - Acc.. 더보기 [ SAPUI5 ] Flexible Column Layout App - Using Page Layout as a Detail Page ○ 데이터에 대한 상세 정보를 보여주는 화면 출력하기 - ObjectPageLayout 1) 앱이 비즈니스 객체와 관련된 정보를 쉽게 표시할 수 있도록 하는 레이아웃을 제공한다. 2) 버전 1.52부터 컨트롤은 sap.f.DynamicPage에서 사용되는 것과 동일한 동적 헤더를 가질 수 있게 되었다. 3) 이동 경로 네비게이션, 네비게이션 작업, 제목 영역을 탭 및 클릭하거나 사용 가능한 화살표 버튼 선택해 머리글 확장 및 축소와 같은 SAP Fiori 기능의 가용성 확보할 수 있게 된다. 4) sap.uxap.ObjectLayout은 정보를 구조화하는 섹션 및 하위 섹션에 래핑된 선택적 앵커 표시줄 및 블록 콘텐츠를 사용해 보다 구조화된 페이지 콘텐츠 제공이 가능해진다. - [ manifest.jso.. 더보기 [ SAPUI5 ] Flexible Column Layout App - Adding a Detail Page ○ 데이터의 상세 정보를 확인하기 위해 해당 정보를 클릭하면 앱 사이즈가 작아지며 상세 페이지로 이동한다. - [ Detail.view.xml ] - [ App.view.xml ] ... 1) 'midColumnPages'를 'FlexibleColumnLayout' 하위 페이지로 추가한다. 2) 'id'는 'detailView'로 지정해두고, [ manifest.json ]에 설정해 두었던 'rootView'로 경로 이동이 가능토록 view 설정 - [ List.view.xml ] ... ... 1) 'press' 이벤트 핸들러를 추가한다. 2) 컨트롤러에서 기능이 구현될 매개로 'press' 형식을 '.onListItemPress'로 지정해둔다. - [ List.controller.js ] sap.ui.. 더보기 [ SAPUI5 ] What is the 'getParent'? getParent getParent - 'getParent'에서 반환되는 부모 요소는 데이터 바인딩, 무효화, 렌더링 등에 사용된다. - Dialog가 내부적으로 숨겨진 VerticalLayout을 사용해 콘텐츠를 저장한다고 가정해보자. Dialog (API parent) \__ VerticalLayout (hidden composite part) \__ Text (API child) - 'Dialog.prototype.addContentAPI'를 호출하여 일부 콘텐츠를 추가하면 다음과 같은 결괏값이 도출된다. oDialog.addContent(oText); console.log(oText.getParent() === oDialog);//false console.log(oText.getParent() i.. 더보기 [ SAPUI5 ] What is the 'i18n'? i18n i18n - Internationalization - 각종 언어에 따라 메뉴의 컨텐츠 동적으로 매핑 - i18n 파일은 OData Model 중에 하나임 - OData Model에서 View에 필요한 내용 매핑 1) 브라우저 언어 설정에 따라 언어를 자동으로 매핑 2) multiple parameter 사용해 여러 개의 Text 매핑 * 아래와 같이 중괄호를 이용해 배열을 지정 // i18n appDescription = sample {0} {1} {2} {3} firstLabel = First secoindLabel = Second thirdLabel = Third fourthLabel = Fourth * 'id'를 'oLabel'로 지정 // view * 지정해뒀던 'oLabel'을 'byI.. 더보기 이전 1 2 3 다음
