SAPUI5에는 응용 프로그램의 상태를 효율적으로 제어 할 수있는 라우팅 API가 함께 제공된다. 이를 활용하는 방법을 배워보자
전통 Web 응용 프로그램에서 서버는 Request의 URL 패턴을 기반으로 요청 된 리소스를 결정하고 처리를 한다.
서버 측 로직은 request 된 자원 또는 페이지가 적절한 방식으로 표시되는 방법을 제어한다.
싱글 페이지 응용 프로그램은 처음 서버에서 한 페이지만 요청되며 추가 자원은 클라이언트 측 논리를 사용하여 동적으로 로드된다.
사용자는 이 페이지 내에서만 탐색이 가능하다. 탐색은 Server Path 또는 URL parameter 대신 Hash를 통해서 유지된다.
ex)server의 path url: (http://<your-host>/<some-path-to-the-app>/employees/resume.html?id=3)
url parameter: (http:/<your-host>/<some-path-to-the-app>/employees/3/resume)
싱글 페이지 라우터 : (http://<your-host>/<some-path-to-the-app>/#/employees/3/resume)
싱글 페이지의 라우터는 해시 기반 URL을 사용하여 Router에 의해 해석이 된다.
이 튜토리얼에서 회사의 직원 데이터를 표시하는 간단한 앱을 만들어 탐색 패턴과 라우팅 기능을 사용한다. 전체적인 구조는 아래와 같다.
이 튜토리얼에서는 페이지 탐색 및 북마크 기능과 간단한 애니메이션 효과를 통해 탐색할 수 있는 기능을 추가한다.
특정 검색을 북마킹 하기위해 기능, 필터를 통한 테이블 정렬 및 다이얼로그 구현 방법을 배운다.
note
해당 튜토리얼은SAPUI5 버전 1.30이상에서 구동이 가능하다.
