SAPUI5에는 응용 프로그램의 상태를 효율적으로 제어 할 수있는 라우팅 API가 함께 제공된다. 이를 활용하는 방법을 배워보자 전통 Web 응용 프로그램에서 서버는 Request의 URL 패턴을 기반으로 요청 된 리소스를 결정하고 처리를 한다. 서버 측 로직은 request 된 자원 또는 페이지가 적절한 방식으로 표시되는 방법을 제어한다. 싱글 페이...
이 단계에서 작성된 구조 및 데이터 모델을 바탕으로 앞으로 탐색 및 라우팅 기능을 계속해서 확장할 것이다. Preview 01_preview.png Code Navigation and Routing - Step 1. The Initial App 우리가 다운로드한 디렉토리에 관한 정보는 아래와 같다. Home Page >우리의 홈 페이지는 weba...
이번 튜토리얼에서는 App을 수정하고 라우팅을 소개한다. App이 호출 될 때 여러 view를 연결하는 router를 구성 한다. 라우팅 구성은 사용자가 탐색 동작을 트리거하거나 응용 프로그램에 대한 링크를 직접 열 때 응용 프로그램 흐름을 제어한다. Preview 02_preview.png Coding Routing and Navigation - ...
이번 튜토리얼에서는 유효하지 않은 hash로 url을 접속할 시 404 error 페이지를 만들어 본다. Preview 03_preview.png Coding Routing and Navigation - Step 3. webapp/manifest.json bypassed 속성에 target에 notFound 속성을 추가한다. 만약 hash와 일치하...
Not Found 페이지에서 back 버튼을 추가하여 이전 페이지로 리디렉션을 해보자 Preview 04_preview.png Coding Routing and Navigation - Step 4. webapp/view/NotFound.view.xml MessagePage 컨트롤의 showNavButton 속성을 true로 설정하면 Back 버튼이...
hash 이후 잘못된 url에 들어가지 않고도 이전 단계의 Not Found 대상을 표시합해보 Target은 view에 대한 navigation-related configuration이며 라우트에서 target을 참조하지 않고 수동으로 target을 표시 할 수 있다. 05_preview.png Coding Routing and Navigation -...
이 튜토리얼에서는 홈 페이지에 두 번째 버튼을 만들어 직원 목록으로 이동할 수 있게 한다. 이 예제는 하드 코딩 된 pattern이 있는 경로를 탐색한다. Preview 06_preview1.png 06_preview2.png Coding [Routing and Navigation - Step 6.](https://openui5.hana.ondema...
이번 튜토리얼에서는 직원 목록중 직원 클릭시 세부 정보를 볼 수 있는 기능을 구현한다. 라우트 패턴은 App의 개체를 식별하기 위해 1개 이상의 parameter 변수를 가진다. Preview 07_preview1.png 직원 정보 페이지 07_preview2.png 없는 직원 정보 페이지 Coding [Routing and Navigation ...
이번 튜토리얼에선 커스텀 전환 애니메이션이있는 페이지로 이동하는 방법을 설명한다. 앞으로 및 뒤로 탐색 모두 "flip"전환을 사용하지만 방향이 다르게 구성한다. employee view에서 특정 직원의 이력서 데이터를 표시하는 페이지로 넘겨주는 간단한 링크를 만든다. 뒤로 버튼을 누르면 반전 된 flip 전환과 함께 employee view로 돌아간다. ...
Resume View에는 이전 튜토리얼 처럼 4 개의 탭이 있다. 하지만 사용자가 Resume 페이지로 이동하면 처음에는 첫 번째 탭만 표시된다. 현재 탭에서 특정 탭으로 바로 이동하거나 탭을 북마크로 지정하는 기능은 추후에 만들도록 한다. 이 단계에서는 쿼리를 매개 변수로 하여 tab에 대한 링크를 활성하여 북마크 기능을 구현한다. Deep Link는 ...
이전 튜토리얼에서는 tab을 사용하여 데이터를 표시하는 Resume view를 구현했다. 하지만 현재 표시되는 tab에 관계없이 tab의 전체 내용이 한 번에 로드가 된다. App의 성능을 높으기 위해 사용자가 요청할 때만 view와 data를 로드하는 "lazy loading"기능을 구현해보자 Preview 10_preview.png Coding R...
이번 튜토리얼은 홈 페이지에 새로운 버튼을 추가하여 route에 대한 multiple targets에 대해서 알아본다. show Employees Overview 버튼을 누르면 header와 content 부분으로 구성된 새 페이지가 보인다. content 부분은 정렬 및 검색 할 수있는 직원 테이블을 표시한다. Preview 11_preview.png...
이번 튜토리얼에서 검색창에 검색을 할 때 북마크 기능을 구현해 본다. 이를 통해 사용자는 직원 테이블에서 직원을 검색 할 수 있으며 검색 쿼리를 북마크하거나 URL을 공유 할 수 있다. Preview 12_preview.png Coding Routing and Navigation - Step 12 . webapp/manifest.json 검색을 북...
이번 튜토리얼은 표의 상단에 정렬 버튼을 통해 현재 테이블의 정렬 상태가 URL에 반영되어 테이블 정렬을 북마크로 가능하게 만드는 방법을 알아본다. Preview 13_preview.png Coding Routing and Navigation - Step 13. webapp/controller/employee/overview/EmployeeOverv...
이번 튜토리얼은 정렬 버튼을 클릭 할 때 열리는 다이얼로그의 북마크를 만든다. URL에 검색어 매개 변수 showDialog가 포함되어 있으면 대화 상자가 자동으로 열린다. Preview 14_preview.png Coding Routing and Navigation - Step 14. /controller/employee/overview/Emplo...
직원 Table에서 클릭시 해당 직원의 이력서 view로 액세스 해보자 이때 새로운 route와 새로운 view를 통해서가 아닌 기존 route를 재사용하여 특정 직원의 이력서를 교차 링크로 구현한다. 이번 튜토리얼을 통해 동일한 page로 연결되는 여러 path가 있음을 알 수 있다. Preview 15_preview.png 15_preview2.p...
이번 튜토리얼에선 route의 matched 이벤트를 수신하여 분석하여 App 사용 방식과 페이지 호출 빈도를 측정 해보. 많은 웹 분석 도구가 이러한 방식으로 페이지 히트를 추적한다. 수집 된 정보는 App 사용 편의성을 향상시키는 데 사용될 수 있다. Preview 17_preview.png Coding Routing and Navigation -...