一种简单地实现 SAP UI5 Master detail 页面的方法

实现效果如下图所示：

app view 的实现代码：

// @ts-nocheck
sap.ui.jsview("jerrylist.view.App", {getControllerName: function () {return "jerrylist.view.App";},createContent: function (oController) {// to avoid scroll bars on desktop the root view must be set to block displaythis.setDisplayBlock(true);this.app = new sap.m.SplitApp();// load the master pagevar master = sap.ui.xmlview("Master", "jerrylist.view.Master");master.getController().nav = this.getController();this.app.addPage(master, true);// load the empty pagevar empty = sap.ui.xmlview("Empty", "jerrylist.view.Empty");this.app.addPage(empty, false);return this.app;}
});

代码第 13 行创建的 sap.m.SplitApp, 实际上是 SplitContainer：

这个 addPage 方法内部，分别调用 addMasterPage 或者 addDetailPage：

此时 detail 页面是空的：

Master List 点击事件，注册在 Master.view.xml 里：handleListSelect

点击之后，从 event 事件对象里，获得 binding context：

通过 path 能拿到具体的模型数据：

使用 this.nav.to(“Detail”, context) 跳转到 detail 页面：

Master view controller 的 nav 属性，在 View controller 里被赋值：

在 to 实现里：动态创建一个新的 id 为 Detail 的视图，然后调用 splitContainer.addPage, 将其加到 Split App 里：

调用 app.to 方法，显示页面：

SplitApp to 方法的注释：

/*** Navigates to the given page inside the SplitContainer.* The navigation is done inside the master area if the page has been added,* otherwise, it tries to do the page navigation in the detail area.** @param {string} sPageId*         The screen to which we are navigating to. The ID or the control itself can be given.* @param {string} [transitionName=slide]*         The type of the transition/animation to apply. Options are "slide" (horizontal movement from the right), "baseSlide", "fade", "flip", and "show"*         and the names of any registered custom transitions.**         None of the standard transitions is currently making use of any given transition parameters.* @param {object} oData*         This optional object can carry any payload data which should be made available to the target page. The BeforeShow event on the target page will contain this data object as data property.**         Use case: in scenarios where the entity triggering the navigation can or should not directly initialize the target page, it can fill this object and the target page itself (or a listener on it) can take over the initialization, using the given data.**         When the transitionParameters object is used, this "data" object must also be given (either as object or as null) in order to have a proper parameter order.* @param {object} oTransitionParameters*         This optional object can contain additional information for the transition function, like the DOM element which triggered the transition or the desired transition duration.**         For a proper parameter order, the "data" parameter must be given when the transitionParameters parameter is used (it can be given as "null").**         NOTE: It depends on the transition function how the object should be structured and which parameters are actually used to influence the transition.*         The "show", "slide" and "fade" transitions do not use any parameter.* @type this* @public* @since 1.10.0* @ui5-metamodel This method also will be described in the UI5 (legacy) designtime metamodel*/

更多Jerry的原创文章，尽在：“汪子熙”:

一种简单地实现 SAP UI5 Master detail 页面的方法相关推荐

SAP UI5 应用开发教程之六十二 - 基于 OData V4 的 SAP UI5 表格控件使用方法介绍试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
SAP UI5 应用开发教程之六十九 - 如何从 SAP UI5 Not Found 页面跳转回到正常的应用页面试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
一种简单的，适合单片机的，数据加密解密方法，仅需要调用两个函数即可完成数据的加密解密
一种简单的,适合单片机的,数据加密解密方法,仅需要调用两个函数即可完成数据的加密解密本人原创,源码可移步:https://gitee.com/demyli/easy-encrypt.git /*** ...
SAP UI5 应用开发教程之六十二 - 基于 OData V4 的 SAP UI5 表格控件使用方法介绍
本教程前面的第 24 步骤,我们学习了 SAP UI5 OData 模型的基本使用方法: SAP UI5 应用开发教程之二十四 - 如何使用 OData 数据模型 SAP UI5 + OData 模型 ...
SAP UI5 应用开发教程之六十九 - 如何从 SAP UI5 Not Found 页面跳转回到正常的应用页面
本系列的前一篇文章,我们学习了 SAP UI5 自定义 Not Found 页面的实现方式: SAP UI5 应用开发教程之六十八 - 如何实现 SAP UI5 路由失败时显示自定义的 NOT Fou ...
17种简单有效更快地增加电子邮件列表的方法
您是否正在寻找行之有效的方法来增加电子邮件列表订阅者? 通常初学者只在他们的网站上安装一个侧边栏选择表单,然后等待用户订阅.这可能导致用户增长缓慢. 为了更快地增长,您需要清楚地传达价值,并在用户离开 ...
如何从 SAP Spartacus Product Detail 页面，找到其 Angular 实现 Component 的位置
如图:假设我们通过下列 url,打开 SAP Spartacus 一个产品的明细页面,我们想找出是哪个 Angular Component,实现了该明细页面. http://localhost:420 ...
一个最简单的用SAP UI5实现的live search demo，完整代码只有55行
完整代码: <!DOCTYPE html> <html> <head><meta http-equiv="X-UA-Compatible" ...
一个查看 SAP UI5 控件所有公有方法的小技巧
一个很小的tip:比如我想把UI5表格控件里的每列设置成宽度根据显示的内容自适应,需要知道应该调用控件的哪个方法来实现. 一种办法当然是查SAP帮助文档,得知需要调用控件的公有方法setAutoSiz ...

一种简单地实现 SAP UI5 Master detail 页面的方法

一种简单地实现 SAP UI5 Master detail 页面的方法相关推荐

最新文章

热门文章