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

选择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：

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

跳转到明细页面：

要获取更多Jerry的原创文章，请关注公众号"汪子熙":

SAP UI5应用里的页面路由处理相关推荐

SAP UI5 应用开发教程之四十八 - 如何在 SAP UI5 应用里开发条形码扫描功能试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
SAP UI5 应用开发教程之四十五 - 如何在 SAP UI5 应用里使用 jQuery 和原生的 DOM API
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
如何在 SAP UI5 应用里显示 PDF 文件试读版
一套适合 SAP UI5 初学者循序渐进的学习教程本专栏计划的文章数在 300 篇左右,到 2022年12月23日为止,目前已经更新了 155 篇,专栏完成度为 51.6%,完成度已经超过了一半了. ...
SAP UI5 应用开发教程之八十三 - SAP UI5 的自动化测试套件页面的开发步骤介绍试读版
一套适合 SAP UI5 初学者循序渐进的学习教程作者简介 Jerry Wang,2007 年从电子科技大学计算机专业硕士毕业后加入 SAP 成都研究院工作至今.Jerry 是 SAP 社区导师,S ...
SAP UI5 SimpleForm 里在水平方向显示多组 Form 元素的实现方法试读版
一套适合 SAP UI5 初学者循序渐进的学习教程本专栏计划的文章数在 300 篇左右,到 2022年9月22日为止,目前已经更新了 133 篇,专栏完成度为 44.3%. 作者简介 Jerry W ...
使用函数节流思想避免 SAP UI5 应用里按钮短时间内被高频重复点击试读版
一套适合 SAP UI5 初学者循序渐进的学习教程作者简介 Jerry Wang,2007 年从电子科技大学计算机专业硕士毕业后加入 SAP 成都研究院工作至今.Jerry 是 SAP 社区导师,S ...
SAP UI5 应用开发教程之五十九 - 如何在 SAP UI5 应用里显示世界地图试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
48. 如何在 SAP UI5 应用里开发条形码扫描功能
SAP UI5 应用开发教程之四十八 - 如何在 SAP UI5 应用里开发条形码扫描功能先看实现效果: 从 Github 下载本步骤的源代码: 运行命令行 npm install 和 ui5 se ...
如何在SAP UI5应用里添加使用摄像头拍照的功能
昨天Jerry的文章纯JavaScript实现的调用设备摄像头并拍照的功能介绍了纯JavaScript借助WebRTC API来开发支持调用设备的摄像头拍照的web应用.而我同事遇到的实际情况是, ...

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

SAP UI5应用里的页面路由处理相关推荐

最新文章

热门文章