안녕하세요! UI5 썸네일형 리스트형 [ SAPUI5 ] Accessibility ○ Overview.view.xml - ○ InvoiceList.view.xml - ○ HelloPanel.view.xml - ○ i18n.properties 더보기 [ SAPUI5 ] Content Density ○ Component.js - getContentDensityClass 1) 데스크톱 및 비터치 장치에 최적화된 컴팩트한 크기와 터치 상호작용에 최적화된 모드 등 다양한 크기 표시 2) 클라이언트의 터치 지원을 위해 Device API를 직접 쿼리 3) 터치 상호작용이 지원되지 않는 경우 CSS 클래스 sapUiSizeCompact를 반환 4) 다른 경우, sapUiSizeCopy를 반환 ○ App.controller.js ○ manifest.json - 'false'를 'true'로 변경 더보기 [ SAPUI5 ] Device Adaption ○ HelloPanel.view.xml - expandable ○ component.js ○ Detail.view.xml - responsive="true" : - fullScreenOptimized="ture" : 사용하는 장치의 크기에 따라 장치의 화면에서 view에 추가한 데이터가 다르게 표시됨 ○ Detail.controller.js 더보기 [ SAPUI5 ] Responsiveness [ InvoiceList.view.xml ] 더보기 [ SAPUI5 ] Custom Controls ○ ProductRating.js - metadata 1) 데이터 구조 정의를 통해 control API 역할 수행 2) getter, setter 메서드 자동 생성 - renderer 1) control이 view에서 인스턴스화될 때마다 앱의 DOM 트리에 추가될 HTML 구조 정의 2) control 속성 변경될 때마다 호출됨 3) oRM : 문자열 작성 및 HTML 페이지에 속성을 제어하는 데 사용할 수 있는 SAPUI5 렌더링 관리자 - properties 1) value * 사용자가 선택한 값을 보유할 컨트롤 속성값 정의 * Getter, Setter 함수 자동 생성 * 원하는 경우, XML view에서 데이터 모델의 필드에 바인딩 - Aggregations 1) _rating : A sap.m.. 더보기 [ SAPUI5 ] Routing Back and History ○ Detail.view.xml - showNavButton : true로 설정 - navButtonPress : '.onNavBack' 지정 ○ Detail.controll.js - getPreviousHash() : 이전 hash로 돌아감 - window.history.go(-1) : 이전 페이지가 있다면 클릭 시, 이전 페이지로 돌아 더보기 [ SAPUI5 ] Routing with Parameters ○ manifest.json ○ Detail.view.xml - intro : invoice에 초기화해 둔 'ShipperName' 호출 - title : invoice에 초기화해 둔 "ProductName' 호출 ○ InvoiceList.controller.js - getSource() : 클릭한 항목의 정보를 상세 페이지로 전달 - navTo 1) 리스트의 현재 데이터 정보로 탐색 매개 변수 invoicePath 추가 2) "detail" : manifest.json에 입력해둔 'routing'의 'targets'에서 'detail' 호출 - invoicePath 1) encodeURIComponent : 모든 문자를 인코딩 2) oItem.getBindingContext("invoice") * 'i.. 더보기 [ SAPUI5 ] Routing and Navigation ○ manifest.json - config 1) 모든 경로 및 대상에 적용되는 전역 라우터 구성 및 기본값 포함 2) view를 자동으로 로드하고 표시하기 위한 컨트롤 지정 - routes 1) 기본 경로 2) 새 페이지를 표시하는 URL 패턴 세부 정보가 있는 세부 경로 - targets : target에 해당하는 view 로드 및 앱에 표시 ○ component.js ○ Overview.view.xml ○ App.view.xml ○ InvoiceList.controller.js 더보기 이전 1 ··· 7 8 9 10 11 12 13 다음
