안녕하세요! UI5 썸네일형 리스트형 [ SAPUI5 ] Navigation and Routing - 14 ○ 정렬 대화상자의 북마크 설정하기 - [EmployeeOverviewContent.controller.js] 1) showDialog : 딥 링크가 있는 페이지로 이동할 때 대화상자가 직접 열리는지 여부 제어하는 쿼리 매개변수 * showDialog가 '1'로 설정되면 대화상자 'open' 2) '?query' 값이 내장돼 있는 '_oRouterArgs' 배열함수에 'showDialog' 매개변수를 호출 3) '_oRouterArgs' 값을 기준으로 두는 경로를 가지는 'employeeOverview' view 화면에 출력 4) delete * viewSettingsDialog의 'confirm' 및 'cancel' 이벤트 핸들러에서 * 'navTo() 호출하기 전에 'this._oRouterArgs[.. 더보기 [ 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 - 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 - 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 - 9 ○ 직원 이력 사항에 있는 탭을 배열함수를 이용해 탭 선택 여부를 확인하고 화면에 출력 - [manifest.json] 1) 설정돼 있는 'employees/{employeeId}/resume'은 첫 번째 탭, 즉 [Info] 탭이 항상 선택됨 2) ':?query' : 특정 탭을 선택한 상태에서 페이지를 직접 열고 탭을 북마크 하도록 해줌 * 'webapp/index.html#/employees/3/resume?tab=Projects'처럼 URL이 구성 *':?query'는 선택사항으로 간주되며, 필수사항으로 설정 필요 시, '{?query}'로 설정 - [Resume.view.xml] 1) 'IconTabBar'를 '.onTabSelect'를 선택하도록 설정 2) 'selectedKey'를 view의.. 더보기 [ 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 - 7 ○ 직원 리스트에서 각 직원의 상세 정보 보여주기 - [manifest.json] 1) 직원 정보가 저장돼 있는 데이터 모델에서 각 직원의 entity가 EmployeeID로 식별돼 있음 2) 새로운 'pattern'으로 'employees'에 이어 '{employeeId}' 값을 하위 경로로 설정 - [Employee.view.xml] - 'onInit' 1) 'oRouter' : 'getRouter()' 메서드 사용 2) 'employee'를 경로로 가지는 'getRoute()' 메서드에서 'this._onRouteMatched'와 일치하는 'oRouter' 설정 - '_onRouteMatched' 1) 변수 'oArgs', 'oView' 선언 * oArgs : 'oEvent'에서 'arguments.. 더보기 이전 1 ··· 4 5 6 7 8 9 10 ··· 13 다음
