はじめに
ComponentベースのRoutingとは、Routingのターゲットにビューではなくコンポーネントを指定することです。これによってプロジェクトとは独立したコンポーネントを、あたかもプロジェクトの中にあるビューのように扱うことができます。
最近のSAP Blogを見ていて、ComponentベースのRoutingがすごく進化していると感じました。興味深かったのは、執筆当時のUI5バージョンでできることには限界があるものの、それぞれの著者が工夫して解決策を生み出している点です。プロジェクトによっては最新のUI5バージョンが使えないこともあるので、これらの工夫について知っておくことは価値があると思います。
この記事では、ComponentベースのRoutingに関する記事を見ながらどんな進歩があったのかについて見ていきたいと思います。
参考にしたブログ
タイトル / 作者 / 公開日 / UI5バージョン
- UI5 – Nested routing with reusable components / Tom Van Doorslaer / 2019.8.23 / 1.60
-
UI5 – Component Based Routing /
Graham Robinson / 2019.10.9 / 1.68 - UI5 – Navigate with Nested Components / Graham Robinson / 2019.12.16 / 1.72
-
UI5er Buzz #46 – Routing with Nested Components /
Jiawei Cao / 2020.2.5 / 1.74 - UI5ers Buzz #48: Consuming Title Changes of Nested Components / Florian Vogt / 2020.3.23 / 1.75
Routingの進歩
～Version 1.58
Routingのターゲットにコンポーネントを指定することはできなかった。
（プロジェクト内のビューにコンポーネントを埋め込み、そのビューをターゲットにしていたと想像）
Version 1.60
Routingのターゲットにコンポーネントを指定することができるようになった。
親と子のコンポーネントは別のRouting設定を持つことになり、それぞれがブラウザのハッシュを変更しようとしてしまう。これを避けるため、ドキュメントでは以下のように、子のRouterで親を指定することが推奨されていた。
sap.ui.core.UIComponent.extend("Child", {
metadata : {
routing: {
routes: [
{
pattern: "members/{id}",
name: "members",
parent: "Father:teams"
}
]
}
}
});
問題点
子に対して親が固定されてしまい、子のコンポーネントを使い回せない
UI5 – Nested routing with reusable componentsでの解決策
Routeの定義にワイルドカード :xxx:を使う
以下は子のコンポーネントでのRoutingの定義。:parent*:の部分にはparent/で始まるハッシュ、または任意のハッシュを入れられる（※）。これによって、親のコンポーネントが固定されることはなくなる。
※参考：Routing and Navigation>"rest as string" parameter
{
"pattern": ":parent*:&/list",
"name": "List",
"target": ["List"]
},{
"pattern": ":parent*:&/Detail/{ResId}",
"name": "Detail",
"target": ["Detail"]
},{
"pattern": ":parent*:",
"name": "home",
"target": ["List"]
}
これで親子固定の問題は回避できましたが、次の問題点が出てきました。
子のコンポーネント内でナビゲーションしたときにブラウザのハッシュが子のコンポーネントのものに置き換わる。この結果、親コンポーネントはデフォルトのルートを表示してしまう。
解決策：独自のnavToメソッドを定義し、親と子のパラメータを全て渡す
（前提）親と子で共通のBaseControllerを使用している
- BaseControllerでrouteMatchedのイベントハンドラを定義し、そこでRoutingで渡されたパラメータを取得する。
- BaseControllerで独自のnavToメソッドを定義する。このメソッドでは、Routing用に渡されたパラメータと、routeMatchedのタイミングで取得したパラメータを合わせて本来のRouterに渡す。こうすると、親のRoutingで使用していたパラメータも失われない。
追記
2020年2月のUI5Conの動画で、1.60での実装について解説されていました。
Lessons learned of working with components and composite controls - Robin Pannee
Version 1.63
親のRouterの定義で、親子の階層を表現できるようになった。子のルートにprefixをつけることで、URLのハッシュのうちどの部分が子のコンポーネントに属するのかを区別する。⇒ドキュメント
以下の例で、home->supplier->(supplierの)detailと遷移したときのハッシュは次のようになる。
#/suppliers&/s/detail/1
親のコンポーネント
"routes": [
{
"name": "home",
"pattern": "",
"target": "home"
},
{
"name": "suppliers",
"pattern": "suppliers",
"target": {
"name": "suppliers",
"prefix": "s"
}
}
子のコンポーネント
"routes": [
{
"name": "list",
"pattern": "",
"target": "list"
},
{
"name": "detail",
"pattern": "detail/{id}",
"target": "detail"
}
問題点
親のコンポーネントから子の特定のルートに直接遷移できない。子のコンポーネントが呼び出されるとき、子のRouterは空のストリングを受け取るため、デフォルトのルートを表示してしまう。
UI5 – Component Based Routingでの解決方法
やりたいこと
Supplierコンポーネントのdetailルートから、Productコンポーネントのdetailへ遷移したい。（SupplierはProductの親になっている）
デフォルトではProduct-detailへの直接の遷移ができず、listが表示される。
解決方法
Productのlistコントローラーのパターンマッチイベントの中で、URLの中から親のハッシュセグメントが持っているProduct idを取り出す。idが見つかったら、自らdetailルートにナビゲーションする。
著者も指摘しているとおり、この方法は子のコンポーネントが親のRoutingパターンを知らないとできないので、親子の結びつきが強くなってしまうのが欠点。
onInit: function() {
Controller.prototype.onInit.apply(this, arguments)
this.getOwnerComponent()
.getRouter()
.getRoute("list")
.attachPatternMatched(this._onPatternMatched, this)
},
_onPatternMatched: function() {
Controller.prototype.onInit.apply(this, arguments)
const oRouter = this.getOwnerComponent().getRouter()
try {
const aHash = oRouter.oHashChanger.parent.hash.split("/")
if (aHash.length > 1) {
switch (aHash[0]) {
case "products":
oRouter.navTo(
"detail",
{
id: aHash[1]
},
true
)
break
default:
}
}
} catch {}
},
Version 1.72
RouterのnavToメソッドが拡張されて、ナビゲーションの際に子（および階層化された子孫）の特定のルートを指定できるようになった。⇒ドキュメント
親のRouterを使って子1と子2、および孫のルートを指定して遷移する例
oRouter.navTo("home", {
// this route doesn't need any parameter
}, {
//子1のルート
childComp1: {
route: "detail",
parameters: {
...
}
},
//子2のルート
childComp2: {
route: "detail",
parameters: {
...
},
componentTargetInfo: {
//孫のルート
grandChildComp1: {
route: "detail",
parameters: {
...
}
}
}
}
});
課題：子のコンポーネント間のナビゲーション
以下の例で、Root ComponentはProduct、Supplier、Categoryの3つのコンポーネントをルートに定義している。この中で、Product-Supplier間、およびProduct-Category間の双方向の遷移を可能にしたい。
UI5er Buzz #46 – Routing with Nested Componentsより引用
ルートコンポーネントのRouting定義は以下のようになっている。
"routes": [
{
"name": "home",
"pattern": "",
"target": [
"home"
]
},
{
"name": "suppliers",
"pattern": "suppliers",
"target": {
"name": "suppliers",
"prefix": "s"
}
},
{
"name": "categories",
"pattern": "categories",
"target": {
"name": "categories",
"prefix": "c"
}
},
{
"name": "products",
"pattern": "products",
"target": {
"name": "products",
"prefix": "p"
}
}
],
"targets": {
"home": {
"viewType": "XML",
"viewName": "Home"
},
"suppliers": {
"type": "Component",
"usage": "suppliersComponent"
},
"categories": {
"type": "Component",
"usage": "categoriesComponent"
},
"products": {
"type": "Component",
"usage": "productsComponent"
},
"notFound": {
"viewName": "NotFound",
"transition": "show"
}
}
UI5 – Navigate with Nested Componentsでの解決方法
子のコンポーネントを生成する際に、ルートコンポーネントの名前を渡す。子のコンポーネントは親をたどってルートを取得し、ルートコンポーネントのRouterを使ってナビゲーションする。
ルートコンポーネントのmanifest.json定義
"productsComponent": {
"name": "yelcho.reuse.products",
"settings": {},
"componentData": {
"parentComponentName": "yelcho.mydemo.nestcomproute.Component" <-ルートコンポーネント
},
"lazy": true
}
子のコンポーネントからさかのぼってルートコンポーネントを探す
getMainComponent: function() {
let oElement = this.oContainer
while (oElement && !this._mainComponent) {
try {
oElement = oElement.getParent()
if (
oElement.getMetadata().getName() ===
this.oComponentData.parentComponentName
) {
this._mainComponent = oElement
}
} catch {}
}
return this._mainComponent ? this._mainComponent : this
},
UI5er Buzz #46 – Routing with Nested Componentsでの解決方法
子のコンポーネントからナビゲーションする際に、navToの代わりにイベントを発生させる。
Rootコンポーネントがこのイベントをキャッチし、ナビゲーションを行う。
GitHubのソースコード
仕組み
- 各コンポーネントは同じBaseComponentを継承している
- BaseComponentの中でnavToの代わりのイベントに対するイベントハンドラを定義している
- イベントハンドラの中で、自コンポーネントで定義されたルートを使用してナビゲーションを実行する
子のコンポーネントでイベントを発生させる。
oOwnerComponent.fireEvent("toSupplier", {
supplierID: sSupplierID,
supplierKey: encodeURIComponent("/" + oModel.createKey("Suppliers", {
SupplierID: sSupplierID
}))
});
ルートコンポーネントでは、イベントマッピング（どのコンポーネントのどのイベントに反応するか、そのときnavToに渡すパラメータは何か）を定義している。
productsComponent: [{
name: "toSupplier",
route: "suppliers",
componentTargetInfo: {
suppliers: {
route: "detail",
parameters: {
id: "supplierID"
},
componentTargetInfo: {
products: {
route: "list",
parameters: {
basepath: "supplierKey"
}
}
}
}
}
}]
BaseComponentでイベントハンドラを定義している。イベントマッピングに従ってナビゲーション先のルート、およびcomponentTargetInfoを編集し、navToメソッドに渡す。（※コメントは筆者が追加）
//このコンポーネントに対して定義されたイベントを取得
aEvents = this.eventMappings[oOptions.usage];
if (Array.isArray(aEvents)) {
aEvents.forEach(function(oEventMapping) {
//イベントハンドラの設定
//oEventMappingにはコンポーネントで定義したパラメータが入っている
oObject.attachEvent(oEventMapping.name, function(oEvent) {
var oComponentTargetInfo;
if (oEventMapping.route) {
if (oEventMapping.componentTargetInfo) {
oComponentTargetInfo = deepClone(oEventMapping.componentTargetInfo);
//イベントパラメータをもとにcomponentTargetInfoを編集する
processComponentTargetInfo(oComponentTargetInfo, oEvent);
}
//ナビゲーション実行
that.getRouter().navTo(oEventMapping.route, {}, oComponentTargetInfo);
//子のコンポーネント経由で転送されてくる場合
} else if (oEventMapping.forward) {
that.fireEvent(oEventMapping.forward, oEvent.getParameters());
}
});
});
}
Version 1.75 [New]
※この記事を書いている間に、OpenUI5のバージョン1.75で新しい機能が追加されました。
RoutingのTargetに、propagateTitleプロパティが追加された。propagateTitleを設定しておくと、ネストされたコンポーネントでタイトルが変更されたときに、親のコンポーネントに通知することができる。
ドキュメント
サンプル
ブログ：UI5ers Buzz #48: Consuming Title Changes of Nested Components