이번 튜토리얼에선 route의 matched 이벤트를 수신하여 분석하여 App 사용 방식과 페이지 호출 빈도를 측정 해보.
많은 웹 분석 도구가 이러한 방식으로 페이지 히트를 추적한다. 수집 된 정보는 App 사용 편의성을 향상시키는 데 사용될 수 있다.
Routing and Navigation - Step 17.
sap.ui.define([
"sap/ui/demo/nav/controller/BaseController"
], function (BaseController) {
"use strict";
return BaseController.extend("sap.ui.demo.nav.controller.App", {
onInit: function () {
var oRouter = this.getRouter();
oRouter.attachBypassed(function (oEvent) {
var sHash = oEvent.getParameter("hash");
// do something here, i.e. send logging data to the back end for analysis
// telling what resource the user tried to access...
jQuery.sap.log.info("Sorry, but the hash '" + sHash + "' is invalid.", "The resource was not found.");
});
oRouter.attachRouteMatched(function (oEvent){
var sRouteName = oEvent.getParameter("name");
// do something, i.e. send usage statistics to back end
// in order to improve our app and the user experience (Build-Measure-Learn cycle)
jQuery.sap.log.info("User accessed route " + sRouteName + ", timestamp = " + new Date().getTime());
});
}
});
});
App controller에서 routeMatched event를 수신한다.
attachRouteMatched event는 모든 route가 match될때 발생한다.
이벤트 핸들러에서 이벤트 매개 변수로부터 match된 route의 이름을 판별하고 이를 시간 정보와 함께 기록한다.
실제 App에서는 백엔드 시스템 또는 분석 서버로 정보를 전송하여 App 사용법에 대해 자세히 알아볼 수 있다.
브라우저의 콘솔을 연 상태에서 http://localhost:8081/index.html#/employees
로 액세스 하면 앱 내에서 수행하는 각 탐색 단계에 대해 기록 된 메시지를 볼 수있다.
OpenUI5의 모든 주요 개발 패러다임을 알아보자 Model-View-Controller같은 기본 개발 패러다임을 소개하고 애플리케이션의 best-practice 구조를 확인한다. "Hello World"를 통해 기본적으로 앱을 설정하고 실행시켜 본다 그 다음 스텝으로 SAPUI5의 기본 데이터 바인딩 개념을 소개하고 송장 목록을 보여주는 기능...
이번 튜토리얼에선 route의 matched 이벤트를 수신하여 분석하여 App 사용 방식과 페이지 호출 빈도를 측정 해보. 많은 웹 분석 도구가 이러한 방식으로 페이지 히트를 추적한다. 수집 된 정보는 App 사용 편의성을 향상시키는 데 사용될 수 있다. Preview 17_preview.png Coding Routing and Navig...
직원 Table에서 클릭시 해당 직원의 이력서 view로 액세스 해보자 이때 새로운 route와 새로운 view를 통해서가 아닌 기존 route를 재사용하여 특정 직원의 이력서를 교차 링크로 구현한다. 이번 튜토리얼을 통해 동일한 page로 연결되는 여러 path가 있음을 알 수 있다. Preview 15preview.png 15preview...
이번 튜토리얼은 정렬 버튼을 클릭 할 때 열리는 다이얼로그의 북마크를 만든다. URL에 검색어 매개 변수 showDialog가 포함되어 있으면 대화 상자가 자동으로 열린다. Preview 14_preview.png Coding Routing and Navigation - Step 14. /controller/employee/ove...