SAP UI5应用里的页面路由怎么处理

发布时间:2022-01-04 15:07:49 作者:iii
来源:亿速云 阅读:159

本篇内容主要讲解“SAP UI5应用里的页面路由怎么处理”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“SAP UI5应用里的页面路由怎么处理”吧!

选择SAP UI5应用的webapp文件夹,右键,选择New->SAP UI5 View, 新建一个UI5视图:

SAP UI5应用里的页面路由怎么处理

视图名称改成app:

SAP UI5应用里的页面路由怎么处理

在manifest.json文件里编辑route区域,将默认的route重命名为home,清空Pattern字段,

SAP UI5应用里的页面路由怎么处理

路由的目标,设置成我们UI5应用里的另一个视图View1:

SAP UI5应用里的页面路由怎么处理

将我们刚才新建的视图设置成这个应用的root view:

SAP UI5应用里的页面路由怎么处理SAP UI5应用里的页面路由怎么处理

```JavaScript

var oRouter = sap.ui.core.UIComponent.getRouterFor(this);

var selectedProductId = oEvent.getSource().getBindingContext().getProperty("ProductID");

oRouter.navTo("Detail", {

productId: selectedProductId

});

```

SAP UI5应用里的页面路由怎么处理

新建一个Detail view:

SAP UI5应用里的页面路由怎么处理SAP UI5应用里的页面路由怎么处理

源代码:

```xml

<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="sapcp.cf.tutorial.app.controller.Detail"
	xmlns:html="http://www.w3.org/1999/xhtml">
	<App>
		<pages>
			<Page title="{i18n>DetailTitle}"
	      showNavButton="true"
	      navButtonPress="handleNavButtonPress" >
		<VBox>
			<Text text="{ProductName}" />
			<Text text="{UnitPrice}" />
			<Text text="{QuantityPerUnit}" />
			<Text text="{UnitsInStock}" />
		</VBox>
	</Page>
		</pages>
	</App>
</mvc:View>

```

在manifest.json文件里,新建一条路由规则:

SAP UI5应用里的页面路由怎么处理

pattern:detail/{productId}

路由目标为Detail view,视图level为2:

SAP UI5应用里的页面路由怎么处理

运行时测试,我点了某个列表行项目之后:

SAP UI5应用里的页面路由怎么处理

跳转到明细页面:

SAP UI5应用里的页面路由怎么处理

到此,相信大家对“SAP UI5应用里的页面路由怎么处理”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

推荐阅读:
  1. SAP Fiori + Vue = ?
  2. 怎么将自开发的SAP UI5应用以tile的方式配置到SAP Fiori Launchpad

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

sap ui5

上一篇:怎么在SAP WebIDE Database Explorer里操作hdi

下一篇:JS的script标签属性有哪些

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》