전체태그 보기

#Navigation and Routing (17개의 포스트)

opensapkr
이번 튜토리얼에선 route의 matched 이벤트를 수신하여 분석하여 App 사용 방식과 페이지 호출 빈도를 측정 해보. 많은 웹 분석 도구가 이러한 방식으로 페이지 히트를 추적한다. 수집 된 정보는 App 사용 편의성을 향상시키는 데 사용될 수 있다. Preview 17_preview.png Coding Routing and Navig...
opensapkr

Step 15: Reuse an Existing Route

2019년 7월 2일0개의 댓글
직원 Table에서 클릭시 해당 직원의 이력서 view로 액세스 해보자 이때 새로운 route와 새로운 view를 통해서가 아닌 기존 route를 재사용하여 특정 직원의 이력서를 교차 링크로 구현한다. 이번 튜토리얼을 통해 동일한 page로 연결되는 여러 path가 있음을 알 수 있다. Preview 15preview.png 15preview...
opensapkr

Step 14: Make Dialogs Bookmarkable

2019년 7월 2일0개의 댓글
이번 튜토리얼은 정렬 버튼을 클릭 할 때 열리는 다이얼로그의 북마크를 만든다. URL에 검색어 매개 변수 showDialog가 포함되어 있으면 대화 상자가 자동으로 열린다. Preview 14_preview.png Coding Routing and Navigation - Step 14. /controller/employee/ove...
opensapkr
이번 튜토리얼은 표의 상단에 정렬 버튼을 통해 현재 테이블의 정렬 상태가 URL에 반영되어 테이블 정렬을 북마크로 가능하게 만드는 방법을 알아본다. Preview 13_preview.png Coding Routing and Navigation - Step 13. webapp/controller/employee/overview...
opensapkr

Step 12: Make a Search Bookmarkable

2019년 7월 2일0개의 댓글
이번 튜토리얼에서 검색창에 검색을 할 때 북마크 기능을 구현해 본다. 이를 통해 사용자는 직원 테이블에서 직원을 검색 할 수 있으며 검색 쿼리를 북마크하거나 URL을 공유 할 수 있다. Preview 12_preview.png Coding Routing and Navigation - Step 12 . webapp/manifest....
opensapkr

Step 11: Assign Multiple Targets

2019년 7월 2일0개의 댓글
이번 튜토리얼은 홈 페이지에 새로운 버튼을 추가하여 route에 대한 multiple targets에 대해서 알아본다. show Employees Overview 버튼을 누르면 header와 content 부분으로 구성된 새 페이지가 보인다. content 부분은 정렬 및 검색 할 수있는 직원 테이블을 표시한다. Preview 11preview....
opensapkr

Step 10: Implement “Lazy Loading”

2019년 7월 2일0개의 댓글
이전 튜토리얼에서는 tab을 사용하여 데이터를 표시하는 Resume view를 구현했다. 하지만 현재 표시되는 tab에 관계없이 tab의 전체 내용이 한 번에 로드가 된다. App의 성능을 높으기 위해 사용자가 요청할 때만 view와 data를 로드하는 "lazy loading"기능을 구현해보자 Preview 10_preview.png ...
opensapkr
Resume View에는 이전 튜토리얼 처럼 4 개의 탭이 있다. 하지만 사용자가 Resume 페이지로 이동하면 처음에는 첫 번째 탭만 표시된다. 현재 탭에서 특정 탭으로 바로 이동하거나 탭을 북마크로 지정하는 기능은 추후에 만들도록 한다. 이 단계에서는 쿼리를 매개 변수로 하여 tab에 대한 링크를 활성하여 북마크 기능을 구현한다. Deep Link...
opensapkr

Step 8: Navigate with Flip Transition

2019년 7월 2일0개의 댓글
이번 튜토리얼에선 커스텀 전환 애니메이션이있는 페이지로 이동하는 방법을 설명한다. 앞으로 및 뒤로 탐색 모두 "flip"전환을 사용하지만 방향이 다르게 구성한다. employee view에서 특정 직원의 이력서 데이터를 표시하는 페이지로 넘겨주는 간단한 링크를 만든다. 뒤로 버튼을 누르면 반전 된 flip 전환과 함께 employee view로 돌아간...
opensapkr
이번 튜토리얼에서는 직원 목록중 직원 클릭시 세부 정보를 볼 수 있는 기능을 구현한다. 라우트 패턴은 App의 개체를 식별하기 위해 1개 이상의 parameter 변수를 가진다. Preview 07preview1.png 직원 정보 페이지 07preview2.png 없는 직원 정보 페이지 Coding [Routing and ...
opensapkr
이 튜토리얼에서는 홈 페이지에 두 번째 버튼을 만들어 직원 목록으로 이동할 수 있게 한다. 이 예제는 하드 코딩 된 pattern이 있는 경로를 탐색한다. Preview 06preview1.png 06preview2.png Coding [Routing and Navigation - Step 6.](https://openui5.hana...
opensapkr
hash 이후 잘못된 url에 들어가지 않고도 이전 단계의 Not Found 대상을 표시합해보 Target은 view에 대한 navigation-related configuration이며 라우트에서 target을 참조하지 않고 수동으로 target을 표시 할 수 있다. 05_preview.png Coding Routing and Navi...
opensapkr
Not Found 페이지에서 back 버튼을 추가하여 이전 페이지로 리디렉션을 해보자 Preview 04_preview.png Coding Routing and Navigation - Step 4. webapp/view/NotFound.view.xml 모든 컨트롤러의 종석성을 sap/ui/demo/nav/controller/Ba...
opensapkr

Step 3: Catch Invalid Hashes

2019년 7월 2일0개의 댓글
이번 튜토리얼에서는 유효하지 않은 hash로 url을 접속할 시 404 error 페이지를 만들어 본다. Preview 03_preview.png Coding Routing and Navigation - Step 3. webapp/manifest.json 브라우저에서 http://localhost:8080/index.html...
opensapkr

Step 2: Enable Routing

2019년 7월 2일0개의 댓글
이번 튜토리얼에서는 App을 수정하고 라우팅을 소개한다. App이 호출 될 때 여러 view를 연결하는 router를 구성 한다. 라우팅 구성은 사용자가 탐색 동작을 트리거하거나 응용 프로그램에 대한 링크를 직접 열 때 응용 프로그램 흐름을 제어한다. Preview 02_preview.png Coding Routing and Na...
opensapkr

Step 1: Set Up the Initial App

2019년 7월 2일0개의 댓글
이 단계에서 작성된 구조 및 데이터 모델을 바탕으로 앞으로 탐색 및 라우팅 기능을 계속해서 확장할 것이다. Preview 01_preview.png Code Navigation and Routing - Step 1. The Initial App 우리가 다운로드한 디렉토리에 관한 정보는 아래와 같다. * Home Page 우리의 홈...
opensapkr

Step 0: Navigation and Routing

2019년 7월 2일0개의 댓글
SAPUI5에는 응용 프로그램의 상태를 효율적으로 제어 할 수있는 라우팅 API가 함께 제공된다. 이를 활용하는 방법을 배워보자 전통 Web 응용 프로그램에서 서버는 Request의 URL 패턴을 기반으로 요청 된 리소스를 결정하고 처리를 한다. 서버 측 로직은 request 된 자원 또는 페이지가 적절한 방식으로 표시되는 방법을 제어한다. 싱글 ...