[ 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의 'selectedTabKey'로 설정

 

 

    - [Resume.controller.js]

      1) JSONModel 

        * 새로운 'JSONModel()' 종속성을 추가해 'getView()' 메서드 사용함으로써 인스턴스화

      2) _aValidTabKeys : 'info'와, 'Projects', 'Hobbies', 'Notes' 네 가지 정보가 담겨있는 변수 선언

        * URL에서 'tab' 매개변수의 유효성 검사하기 위해 확인 가능한 모든 허용된 'tab' 키 포함

 

 

      3) oQuery : 'oArgs[]' 배열 함수에 '?query'를 넣어 어느 하나의 탭을 선택했을 때 배열에 넣기

      4) indexOf() : 'oQuery'이거나 '_aValidTabKeys' 배열 내부에서 'oQuery'에서 선택한 값 위치 찾기

        * '> -1' : '-1'은 없는 값을 의미하므로 위칫값 0부터 시작하는 배열함수 성격을 고려한 것

      5) 'view'를 매개로 한 'getModel()' 각 직원 정보의 'oView'를 'oQuery'에서 선택한 탭을 '/selectedTabKey'로 불러오기

      6) '_aValidTabKeys[0]' : 그렇지 않다면, 'employeeResume'으로 이동할 때 'employeeI' 이력 사항의 첫 번째 탭 반환

 

 

      7) onTabSelect

        * oCtx : binding할 context 여부를 확인하는 view를 반환하는 변수 선언

        * employeeId : 'EmployeeID'를 매개로 속성을 갖는 'oCtx'로 지정

        * '?query' : [Resume.view.xml]에 지정해둔 'selectedKey'를 매개로 하는 'oEvent' 'tab'으로 지정

 

 

    - 이제 탭을 선택하지 않은 상태로도 해당 페이지 이동 가능하다!

 

---

Next Stage : Navigation and Routing - 11

SAPUI5 / Navigation and Routing - 10