Routingとは
Routingは、SAPUI5アプリのナビゲーションで使う技術です。今回はRoutingの概念、実装について説明します。
Routingでは、ビューまたは複数のビューのまとまりをRouteと呼びます。
Routingとは、RouteからRouteへ移動する際に「どんなURLで」「どこのビューへ」遷移するのかを定義するものです。
ハッシュついて
Routeは固有のURLを持ちます。#の後にそれぞれのビューに固有のパラメータがつきます。この部分をハッシュと呼びます。以下のようなイメージです。
一覧画面 ...#/list
詳細画面 ...#/detail/0
URLが変わるので、ブラウザの履歴にそれぞれのURLが保持されます。このおかげでブラウザの「戻る」「進む」ボタンを使って前の画面に戻ったり、次の画面に進んだりすることが可能です。これはWebDynrpoやBSPにはない特徴です。
Routingの実装
ゴール
行を選択すると詳細画面に遷移するアプリを作ります。
構成
Routingのために実装する箇所は以下の4点です。
1. manifest.json
2. Component.js
3. 移動元ビューのコントローラー
4. 移動先ビューのコントローラー
ステップ
前提：入門編の記事まとめ
0.事前設定
1.Routingの定義
2.Routerを初期化
3.Routerのナビゲーションメソッドを呼び出し
4.選択された行に対するモデルをバインド
0. 事前設定
モデル、ビュー、コントローラーを作ります。
Data.json
{
"Products": [
{
"name": "あずきもなか",
"price": 105,
"currency": "JPY",
"ingredients": "牛乳、砂糖、小豆",
"producer": "大納言農場"
},
{
"name": "いちごアイス",
"price": 120,
"currency": "JPY",
"ingredients": "牛乳、砂糖、いちご",
"producer": "とよのかファーム"
},
{
"name": "ヨーグルトアイス",
"price": 160,
"currency": "JPY",
"ingredients": "ヨーグルト",
"producer": "カスピ海工房"
}
]
}
このモデルをデフォルトビューとしてmanifest.jsonに設定
"models": {
"":{
"type": "sap.ui.model.json.JSONModel",
"uri": "model/Data.json"
}
}
App.view.xml（一覧画面）
<mvc:View
controllerName="template.controller.App"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<App id="idApp">
<pages>
<Page title="{i18n>pageTitle}">
<content>
<List
items="{/Products}" id="idList" headerText="アイスクリーム"
selectionChange="onSelect" mode="SingleSelectMaster">
<items>
<ObjectListItem
type="Navigation"
title="{name}"
number="{
parts:[{path:'price'},{path:'currency'}],
type: 'sap.ui.model.type.Currency',
formatOptions: {showMeasure: false}
}"
numberUnit="{currency}">
</ObjectListItem>
</items>
</List>
</content>
</Page>
</pages>
</App>
</mvc:View>
Detail.view.xml（詳細画面）
<mvc:View controllerName="template.controller.Detail" xmlns="sap.m" xmlns:f="sap.ui.layout.form" xmlns:mvc="sap.ui.core.mvc"
xmlns:core="sap.ui.core">
<App id="idApp">
<pages>
<Page title="{i18n>detailPageTitle}">
<content>
<f:SimpleForm id="SimpleForm" editable="true" title="商品詳細">
<f:content>
<Label text="商品名"/>
<Text id="name" text="{name}"/>
<Label text="価格"/>
<Text id="price" text="{price} {currency}"/>
<Label text="原料"/>
<Text id="ingredients" text="{ingredients}"/>
<Label text="生産者"/>
<Text id="producer" text="{producer}"/>
</f:content>
</f:SimpleForm>
</content>
</Page>
</pages>
</App>
</mvc:View>
1. Routingの定義
manifest.jsonのsap.ui5セクションに以下のコードを追加します。
"sap.ui5": {
"_version": "1.2.0",
"rootView": {
"viewName": "template.view.App",
"type": "XML",
"id": "app"
},
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewPath": "template.view",
"viewType": "XML",
"controlId": "idApp"
},
"routes": [
{
"pattern": "",
"name": "root",
"target": ["t_root"]
},
{
"pattern": "detail/{index}",
"name": "detail",
"target": ["t_detail"]
}
],
"targets": {
"t_root": {
"viewName": "App",
"viewId": "idViewApp",
"controlAggregation": "pages"
},
"t_detail": {
"viewName": "Detail",
"viewId": "idViewDetail",
"controlAggregation": "pages"
}
}
},
Routingは以下3つのセクションに分かれています。
今回使用しているパラメータは一例で、詳しくは以下のページをご参照ください。
Routing Configuration
config
- routerClass: 固定でsap.m.routing.Routerを指定
- viewPath: ビューのファイルが格納されているフォルダパス
- viewType: ビュータイプ
- controlId: ビューを表示するのに使われるコントロールのID。今回はAppコントロールを使用するので、Appコントロールのidである"idApp"を指定
※viewPath以下はtargetsのパラメータの初期値で、targets側で個別に定義することも可能
routes
- name: ルート名
- pattern: ハッシュを指定する。{ }で囲むことで変数も指定可能。今回の場合、indexに指定された値がハッシュの一部となる。（変数名は任意）
- target: targetsセクションで定義したtargetの値を指定する。Master Detail画面のように一つの画面に複数ビューを表示するときは複数指定する。
targets
- viewName: ビュー名
- viewId: ビューのID。ビュー側であらかじめ定義する必要はなく、ここで定義するだけでよい
- controlAggregation: どのaggregationにビューを追加するかを定義。今回はApp配下のpages aggregationに追加するので、pagesを指定
config, routes, targetsの関係
2. Routerを初期化
Component.jsの初期化メソッドの中で、Routerの初期化を行います。
sap.ui.define([
"sap/ui/core/UIComponent"
], function (UIComponent) {
"use strict";
return UIComponent.extend("template.Component", {
metadata : {
manifest: "json"
},
init : function () {
// call the init function of the parent
UIComponent.prototype.init.apply(this, arguments);
// Routerを初期化
var oRouter = this.getRouter();
oRouter.initialize();
}
});
});
3. Routerのナビゲーションメソッドを呼び出し
Appビュー（一覧を表示）の中で、以下の処理を実装します。
①Routerオブジェクトを取得
App.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller",
], function (Controller) {
"use strict";
return Controller.extend("template.controller.App", {
onInit: function(){
this.oRouter = this.getOwnerComponent().getRouter();
}
});
初期処理の中で、Routerオブジェクトを取得しておきます。
②行が選択されたときに呼ばれるメソッドを実装
onSelect: function(oEvent){
//選択された行のパスを取得：/Products/2 のような形で取得される
var sPath = oEvent.getParameter("listItem").getBindingContextPath();
//indexに上記パスからインデックスの部分を取得
var index = sPath.split("/")[sPath.split("/").length - 1];
//Routerオブジェクトを使って詳細画面へ遷移する
this.oRouter.navTo("detail", {
index: index
});
}
RouterオブジェクトのnavToというメソッドを使って、detailに移動します。
detailというのはroutingの設定で定義したrouteの名前です。detailのpatternは以下のようになっていました。
"pattern": "detail/{index}"
変数indexを引数に取りますよ、と宣言しているのでnavToメソッドにindexを渡します。
4. 選択された行に対するモデルをバインド
Detailビューでは、一覧で指定された行に対応する商品の詳細を表示すします。このために、引数に渡された値をもとにモデルへのパスを作ってビューにバインドします。以下の処理を実装します。
①Routerオブジェクトを取得（Appと同様）
②RoutePatternMatchedイベントをイベントハンドラを登録
Detail.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller",
], function (Controller) {
"use strict";
return Controller.extend("template.controller.Detail", {
onInit: function(){
//Routerオブジェクトを取得
this.oRouter = this.getOwnerComponent().getRouter();
//ルートがマッチしたときのイベントハンドラを登録
this.oRouter.attachRoutePatternMatched(this._matched, this);
}
});
});
RoutePatternMatchedイベントは、実行されたURLのハッシュ部分がRoutingの定義の中で定義されたいずれかのパターンに一致した場合に発火します。パターンにマッチした場合はこのあと定義する_matchedメソッドが呼ばれます。
一覧画面から遷移する場合だけでなく、直接このURLが実行された場合でもRoutePatternMatchedがトリガされます。
③_matchedの実装
_matched: function(oEvent){
//呼び出し元画面で指定された引数を取得
var index = oEvent.getParameter("arguments").index;
//パスを作成：/Products/2のような形に
var sPath = "/Products/" + index;
//パスをビューにバインド
this.getView().bindElement(sPath);
}
実行結果
アプリを実行します。ここでは、アドレスバーに注目してください。
一覧画面ではハッシュはついていません。一覧画面のrouteのパターンが""となっているためです。
詳細画面では、#のあとに/detail/0と表示されます。
ここで、0を1に変えてみます。
すると、2番目の商品の詳細が表示されました。このように直接URL指定でもビューを切り替えることができます。
まとめ
- SAPUI5では、ナビゲーションにRoutingを使う
- Routingの定義は、config, routes, targetsからなる
- ハッシュが変わることで、ブラウザの履歴を使ったナビゲーションが可能になる