Step 3: Catch Invalid Hashes

이번 튜토리얼에서는 유효하지 않은 hash로 url을 접속할 시 404 error 페이지를 만들어 본다.

Preview

Coding

Routing and Navigation - Step 3.

webapp/manifest.json

{
   ...
   "sap.ui5": {
      ...
      "routing": {
         "config": {
            "routerClass": "sap.m.routing.Router",
            "viewType": "XML",
            "viewPath": "sap.ui.demo.nav.view",
            "controlId": "app",
            "controlAggregation": "pages",
            "transition": "slide",
            "bypassed": {
               "target": "notFound"
            },
            "async": true
         },
         "routes": [{
            "pattern": "",
            "name": "appHome",
            "target": "home"
         }],
         "targets": {
            "home": {
               "viewId": "home",
               "viewName": "Home",
               "viewLevel" : 1
            },
            "notFound": {
               "viewId": "notFound",
               "viewName": "NotFound",
               "transition": "show"
            }
         }
      }
   }
}

bypassed 속성에 target에 notFound 속성을 추가한다. 만약 hash와 일치하는 라우트가 없으면 해당 타겟(notFound)으로 이동하게 된다.

webapp/view/NotFound.view.xml (New)

<mvc:View
   controllerName="sap.ui.demo.nav.controller.NotFound"
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <MessagePage
      title="{i18n>NotFound}"
      text="{i18n>NotFound.text}"
      description="{i18n>NotFound.description}"/>
</mvc:View>

viewName에 정의된 네임스페이스로 해당 xml이 호출이 된다. 해당 xml은 sap.m에 MessagePage 컨트롤을 사용하여 사용자에게 오류 메시지를 나타낸다.

webapp/controller/NotFound.controller.js (New)

sap.ui.define([
   "sap/ui/core/mvc/Controller"
], function (Controller) {
   "use strict";
   return Controller.extend("sap.ui.demo.nav.controller.NotFound", {
      onInit: function () {
      }
   });
});

NotFound view의 컨트롤러를 만든다. 이는 추후 확장해서 사용할 것이다.

...
NotFound=Not Found
NotFound.text=Sorry, but the requested resource is not available.
NotFound.description=Please check the URL and try again.

브라우저에서 http://localhost:8080/index.html#/thisIsInvalid hash 다음 경로가 없으므로 사용자에게 자동으로 NotFound 페이지가 나오게 된다.

Conventions

• bypassed 속성을 활용하여 잘못된 url에 대한 대처를 항상 해야한다.

• sap.m.MessagePage 컨트롤을 사용하여 라우팅 관련 오류 메세지를 표시한다.

Related Information

API Reference: sap.m.MessagePage

API Overview and Samples: sap.m.MessagePage