首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >SAP UI5应用里的页面路由处理

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

作者头像
Jerry Wang
发布2020-02-24 12:18:29
5980
发布2020-02-24 12:18:29
举报

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

视图名称改成app:

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

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

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

var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
	var selectedProductId = oEvent.getSource().getBindingContext().getProperty("ProductID");
	oRouter.navTo("Detail", {
		productId: selectedProductId
	});

新建一个Detail view:

源代码:

<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文件里,新建一条路由规则:

pattern:detail/{productId} 路由目标为Detail view,视图level为2:

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

跳转到明细页面:

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-02-18 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档