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에 의해 해석이 된다.

이 튜토리얼에서 회사의 직원 데이터를 표시하는 간단한 앱을 만들어 탐색 패턴과 라우팅 기능을 사용한다. 전체적인 구조는 아래와 같다.

flow chart.png

이 튜토리얼에서는 페이지 탐색 및 북마크 기능과 간단한 애니메이션 효과를 통해 탐색할 수 있는 기능을 추가한다.

특정 검색을 북마킹 하기위해 기능, 필터를 통한 테이블 정렬 및 다이얼로그 구현 방법을 배운다.

note
해당 튜토리얼은 SAPUI5 버전 1.30이상에서 구동이 가능하다.