안녕하세요! Navigation 썸네일형 리스트형 [ 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 ] Navigation and Routing - last ○ 라우터 일치 여부 확인하기 - [App.controller.js] 1) attachRouteMatched : 이벤트 핸들러에서 이벤트 매개변수과 일치하는 경로의 이름을 경정 및 타임스탬프에 기록 2) sRouteName : 'name'을 파라미터로 두는 'oEvent'로 인슨턴스화 - Log에 설정해 둔 문구가 잘 나와있다!! 더보기 [ SAPUI5 ] Navigation and Routing - 16 ○ 유효하지 않은 해시값이 불러졌을 때 오류 문구 확인하기 - [App.controller.js] 1) Log.setLevel(Log.level.INFO) : 'INFO' 레벨의 Log 사용(?) 2) attachByPassed * oRouter : getRouter() 메서드 사용 * sHash : 'hash'를 파라미터로 갖는 'oEvent'로 인스턴스화 - F12를 눌르고, 옳지 않은 경로에 접근하게 되면 Log에 설정해둔 텍스트를 확인할 수 있다! Next Stage : Navigation and Routing - last SAPUI5 / Navigation and Routing - last ○ 라우터 일치 여부 확인하기 - [App.controller.js] 1) attachRouteMatche.. 더보기 [ SAPUI5 ] Navigation and Routing - 15 ○ 직원 테이블에서 직원 상세 이력 사항 확인하는 페이지로 이동하기 - [EmployeeOverviewContent.view.xml] 1) 'itemPress' 이벤트 핸들러 등록 2) 항목 선택 및 navigation을 작동시킬 수 있도록 'ColumListItem' 타입을 'Active'로 설정 - [EmployeeOverviewContent.controller.js] 1) oItem : 'listItem' 파라미터를 매개로 하는 'oEvent'로 인스턴스화 2) oCtx : 선택한 항목을 바인딩 컨텍스트에서 읽도록 하는 'oItem'으로 설정 3) employeeId : 'EmployeeID' 속성을 가지는 'oCtx' 값으로 지정 4) ?query : 'Info'로 초기화 5) 직원 테이블에서 각.. 더보기 [ SAPUI5 ] Navigation and Routing - 13 ○ 테이블의 정렬 상태 변경하기 - [EmployeeOverviewContent.controll.js] 1) oQueryParameter : '?query' 매개변수 값을 저장하는 '_oRouterArgs' 배열함수로 설정 2) _applySorter : 'oQueryParameter' 값에 'sorterField'와 'sortDescending' 매개변수 호출해 정렬 작업 수행 3) _applySearchFilter : '_oRouterArgs["?query"]' 값을 기준으로 원하는 정보 'search' 4) '_oRouterArgs["?query"]'에 'sortField' 매개변수를 호출한 값을 'oSortItem'의 킷값으로 설정 5) '_oRouterArgs["?query"]'에 'sortDe.. 더보기 [ SAPUI5 ] Navigation and Routing - 12 ○ 직원 정보를 검색해 데이터 보여주기 - [manifest.json] 1) ':?query' : 'employeeOverview' 경로에 추가 2) 'searchField'에 입력된 검색어에 대한 URL 매개변수로 검색을 사용하기 위함 - [EmployeeOverviewContent.controller.js] 1) oRouter : 'getRouter()' 메서드 사용 2) _oRouterArgs : 'null' 값으로 지정 3) '_onRouteMatched' 값과 일치하며 'employeeOverCiew'를 라우팅하는 'oRouter'를 override 4) _onRouteMatched * 'null' 값으로 지정해두었던 '_oRouterArgs'를 'arguments' 파라미터와 연결시킨 'oEv.. 더보기 [ SAPUI5 ] Navigation and Routing - 10 ○ contents를 포함하지 않는 tab 숨기기 - [Resume.view.xml] 1) 'lazy loading' : 'id'를 이용해 라우팅 구성에서 나중에 처리 가능토록 함 2) 많은 콘텐츠를 포함하거나 백엔드 서비스에 대해 비용이 많이 드는 서비스 호출을 trigger하는 tab에 사용 - [ResumeHobbies.view.xml] / [ResumeNotes.view.xml] - [Resume.controller.js] 1) 'oQuery'에서 선택한 'tab'이 'Hobbies'이거나 'Notes'일 때 2) 해당 경로의 target을 'resumeTab'과 선택한 'oQuery'의 'tab'을 합쳐서 표현 * 'resumeTabHobbies', 'resumeTapNotes'로 표시 - [m.. 더보기 [ SAPUI5 ] Navigation and Routing - 6 ○ 직원 리스트 화면에 출력하기 - [Home.view.xml]에서 'id'를 'employeeListBtn'로 하고 'class'를 'sapUiTinyMarginEnd'로 지정하는 버튼 입력 - 'onNavToEmployees' 핸들러에 'employeeList'를 매개로 'getRouter()'의 'navTo()' 메서드 호출해 경로 지정 - [manifest.json] 1) 'sap.ui.demo.nav.view.employee.EmployeeList' view를 통해 직원 리스트 불러오기 2) 'level'을 '2'로 설정해 왼쪽으로 슬라이드되며 화면이 전환되도록 함, 뒤로가기 시에는 오른쪽으로 슬라이드 - [EmployeeList.view.xml] 1) 'List' 안에 [manifest.jso.. 더보기 이전 1 2 다음
