Fiori navigation logic ( Route )

对于Fiori的developer来说,要在代码里做view之间的navigation很简单,就做一些配置,然后call 一行代码,思路非常像webclient ui里的inbound和outbound plug。不过如果搞清楚底层到底怎么work的比较好。

貌似这套东西是SAP 从其他地方copy的,因为所有代码都在thirdparty folder下。

Fiori navigation logic ( Route )

UI5 view之间navigation的核心代码在folder resources/sap/ui/thirdparty里的js实现。

如上图所示,router framework试图根据传入的route request “detail/AccountCollection(‘4039331’)” 来获取一条匹配的route path.

问题1: 这个request是怎么传到route framework的?
answer:在我们自己的application view里传递的。当我们点击navigation list时,框架自动调用我们注册的事件处理函数setListItem, 在line 124将当前待显示的detail page的上下文,所谓的contextPath,即"detail/AccountCollection(‘4039331’)"通过调用route框架的方法navTo传入route框架

Fiori navigation logic ( Route )

问题2: route framework 具体的匹配逻辑
Fiori navigation logic ( Route )

Fiori navigation logic ( Route )

问题3: route framework里匹配的三条记录从哪里来的
answer: 在project的component.js里:
Fiori navigation logic ( Route )

注意上面有两个hard code的detail,其含义不一样。先把第二个detail改成mydetail:

Fiori navigation logic ( Route )

第三条匹配生效了:

Fiori navigation logic ( Route )

此时由于application code里调用navTo时仍然传的是detail,因此找不到匹配的route,点击list里每个item后将没有任何效果-浏览器里地址栏没有发生变化,表明没有发生navigation。

Fiori navigation logic ( Route )

Fiori navigation logic ( Route )

如果将application code里的detail也改成mydetail之后,仍然不work:
原因是this._oRoutes object里没有名为mydetail的attribute:
Fiori navigation logic ( Route )

改成如下之后:

Fiori navigation logic ( Route )

之后就能找到名为mydetail的route:

Fiori navigation logic ( Route )

从地址栏观察到navigation重新起作用了
Fiori navigation logic ( Route )

Fiori navigation logic ( Route )