Fiori开发实例（Router的实现）

Fiori应用采用SAP UI5控件库开发，在开发过程中具有很多特性，比如页面跳转（Routing）就是其中一个重要特性，今天我们通过实例介绍SAPUI5页面跳转功能。页面跳转Routing是指：从一个视图跳转到另外的视图，并传递数据到另外一个页面。

一个Fiori App具有一个初始页面，然后根据路由和逻辑，可以动态生成其他的页面，当一个新的页面加载之后，网址URL会有一个#在页面视图名称之前，如下图：

我们的视图会分为根视图，比如前文所说的worklist视图，然后是Header视图和 Detail视图。我们的app首先进入worklist视图，然后通过选择一个item，跳转到header和detail视图。本文通过销售订单PO为例，通过实例介绍UI5 Routing。

首先创建三个视图：

选择XML类型的视图，创建V_Root_View视图文件。

创建第二个视图文件：

类似的创建第三个视图：

我们开发的业务逻辑是这样，首先进入worklist页面，选择一个PO，进入PO的Header页面，然后再跳转到PO的detail页面，首先让我们看一下manifest.json文件,设置V_root_view为rootView。

并提供root view一个ID。

本文省去配置数据源和数据模型等步骤。

在manifest里面配置：Default Routing, Target Mapping, Routings 和 Pattern。

让我们到manifest.json的Routing部分，配置默认路由，default routing。

View Path 是项目名称和视图文件夹，Control Id 是根视图的appid,比如V_Root。

现在我们需要告诉路由的目的地是哪里（Target），首先需要配置这个目的地:视图V_POHeader。

创建第二个target:PODetail.

接下来创建路由规则。名称是自解释的，告诉app会用哪个路由到哪个目标页面，比如路由：POHeader会到目的页面POHeader。Route -> Target -> View.

作为第一个路由，我们没有配置Pattern,第二个路由我们设置Pattern，这个对于从Header页面到Detail页面是非常重要的。我们这里设置Patter为POHeader,这里的设置非常重要，后面我们介绍patter如何使用。

Pattern的定义：POHeader，其实Pattern也就是传递参数的格式。

说了这么半天，到底什么是Router呢？Fiori App页面的路由，也就是一个Fiori App页面跳转到另外的页面的API。Router是sap.m.routing.Router的API类，这个类可以从一个视图跳转到另外的视图，并在页面之间传递参数（pattern就是设置传递参数的）。

首先我们需要在文件component.js里面添加如下代码：

// We need to add the below one line code to initialize and enable the hash (#) based routing

// enable hash based routing

this.getRouter().initialize();

我们到V_POHeader.controller.js文件里检查GoToPODetail函数，现在我们需要在这个函数写页面跳转语句。

具体的代码实现如下：

// Get Property of the Clicked Item. i.e. PO number of the item which was clicked

varselectPO = evt.getSource().getBindingContext().getProperty('Ebeln');

// Now Get the Router Info

varoRouter = sap.ui.core.UIComponent.getRouterFor(this);

// Tell the Router to Navigate ToRoute_PODetail which is linked to V_PODetail view

oRouter.navTo('Route_PODetail', { SelectedItem: selectPO});

这样就实现了从POHeader跳转到PODetail页面了，并传递点击的Header作为参数到PODetail页面。

我们还需要在PODetail页面的controller文件的初始化方法中去接收这个传递的Header参数。通过传递的Header的ID，构造OData的URI来绑定页面元素。代码如下：

onInit: function() {

// Get the Router Info

varoRouter = sap.ui.core.UIComponent.getRouterFor(this);

// Validate/Match the Router Details sent from source using oRouter.navTo('Router_Detail', );

oRouter.getRoute('Route_PODetail').attachMatched(this._onRouteFound, this);

// Custom Method to bind the elements using the Event Arguments

_onRouteFound: function(oEvt) {

varoArgument = oEvt.getParameter('arguments');

varoView = this.getView();

oView.bindElement({

path: '/POHeaderSet('' oArgument.SelectedItem '')'

});

}

这样就实现了Router，具体的实例，可以参考SAP官方提供的worklist实例代码：

https://sapui5.hana.ondemand.com/#/sample/sap.m.tutorial.worklist.06/code

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。