안녕하세요! manifest 썸네일형 리스트형 [ 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 ] 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 / Creating an Empty Flexible Column Layout ○ 루트 뷰 설정을 통해 화면의 기본 설정을 해둔다. - [ manifesr.json ] ... }, "sap.ui5": { "rootView": { "viewName": "sap.ui.demo.fiori2.view.App", "type": "XML", "async": true, "id": "fcl" }, "dependencies": { "minUI5Version": "1.60.0", "libs": { "sap.ui.core": {}, "sap.f": {} } }, ... } 1) viewName : [ App.view.xml ]을 'rootView'로 설정한다. 2) type : view의 타입은 'XML'을 사용할 것을 입력한다. 3) async * 동기식으로 호출함을 'true'로 설정한다. * 비.. 더보기 [ SAPUI5 ] Navigation and Routing - 11 ○ 직원의 상세 정보에 대한 미리보기 만들기 - [Home.view.xml] - [Home.controller.js] 1) [Home.view.xml]의 'press'와 연결할 'onNavToEmployeeOverview' 핸들러 구성 2) 'getRouter()'메서드의 'navTo()'를 통해 view 중에 'employeeOverview'로 이동 - [manifest.json] 1) pattern * 경로에서 'overview'는 'employee'보다 앞에 위치해야 함 * '/#/employees/overview' 해시와 일치할 수 있기 때문임 2) name : view 중에 'employeeOverview' 참조 3) target : 배열 표기법으로 'employeeOverviewTop'과 'e.. 더보기 [ SAPUI5 ] Navigation and Routing - 8 ○ 직원의 상세 정보에서 transition을 flip으로 설정해 버튼 클릭 시, 화면효과를 보여주며 직원 이력서 보여주기 - [Employee.view.xml] : 직원 세부 정보 view에 직원의 이력서로 넘어가는 링크 추가 - [Employee.controller.js] 1) 'FlipToResume' 링크에 대한 새 경로 employeeResume으로 이동하는 'onShowResume' press 핸들러 추가 2) 'onShowResume' * getBoundContext() : 바인딩된 컨텍스트 반환 * getElementBinding() : 메타데이터 element 반환 * 'employeeResume'으로 'navTo()', 즉 화면이 이동하는 'getRouter()' 메서드 구성 * emp.. 더보기 [ SAPUI5 ] Navigation and Routing - 4 ○ 뒤로가기 버튼 구현하기 - [NotFound.view.xml] 1) 'showNavButton'을 'true'로 설정해 뒤로가기 Button을 자동으로 표시 2) 'navButtonPress'를 'onNavBack'로 설정해 실제 뒤로가기 기능 구현 가능케 하기 - [BaseController.js] 1) onNavBack 핸들러를 통해 앱 기록에 이전 해시값이 있는지 확인 2) 브라우저의 기본 History API를 통해 이전 해시로 redirection 3) 변수 'oHistory', 'sPreviousHash' 지정 * oHistory : 'History'를 매개로 인스턴스(객체)화 * sPreviousHash : 'oHistory'의 이전 해시값을 가져오는 'getPreviousHash()' .. 더보기 [ SAPUI5 ] Navigation and Routing - 3 ○ 'NotFound' 우회 페이지 구현 - 'bypasssed' 1) 'notFound'로 설정해 라우팅 구성 확장 2) 라우터가 현재 해시와 일치하는 경로가 없는 경우, ,notFound, 대상 표시하도록 지시 3) 우회 section에 'notFound' 대상 추가 및 단순 'notFound' view로 전환되도록 구성 - [NotFound.view.xml] - [NotFound.controller.js] - [i18n.properties] - 야발...... - 이유는 도큐먼트에서 안내되는 코드와 달랐다.. 이런... 됐으니 넘어가자 일단... Next Stage : Navigation and Routing - 4 https://pythonchoboman.tistory.com/102 SAPUI5 .. 더보기 [ SAPUI5 ] Navigation and Routing - 2 ○ 기본 view 만들기 - config 1) 모든 경로 및 대상에 적용되는 전역 라우터 구성 및 기본값이 포함되어 있음 2) sap.ui.core.routing.Router을 기본값으로 하여 routerClass 설정 * 앱에서 view가 있는 위치 정의 * view를 자동으로 로드하고 표시하기 위해 페이지를 표시하는 데에 사용되는 컨트롤 id와 새 페이지가 표시될 대 채워지는 Aggregation도 지정 * 'viewType' : 'XML'로 설정 * 'path' : namespace 'sap.ui.demo.nav'의 view 폴더를 사용해 모든 view 구현 - routes 1) 각 경로에 도달했을 때 탐색할 'patern', 'name', 'target' 정의 2) 'pattern'은 경로와 일치.. 더보기 이전 1 2 다음
