UI5（十二）导航、格式、回滚

最新推荐文章于 2024-04-21 09:55:40 发布
最新推荐文章于 2024-04-21 09:55:40 发布
阅读量368 收藏 1
点赞数
分类专栏： SAP 文章标签： sap ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/maomibook/article/details/122326856
版权

到目前为止，我们已经把所有的应用程序内容放在一个单一的页面。随着我们添加越来越多的功能，我们希望将内容分割，并将其放在单独的页面上。

在这里插入图片描述

webapp/manifest.json

{
  "_version": "1.12.0",
  …
  "sap.ui5": {
	…
	"models": {
		…
	},
	**"routing": {**
	  **"config": {**
		"routerClass": "sap.m.routing.Router",
		"viewType": "XML",
		"viewPath": "sap.ui.demo.walkthrough.view",
		"controlId": "app",
		"controlAggregation": "pages",
		"async": true
	  },
	  **"routes": [**
		{
		  "pattern": "",
		  "name": "overview",
		  "target": "overview"
		},
		{
		  "pattern": "detail",
		  "name": "detail",
		  "target": "detail"
		}
	  ],
	  **"targets": {**
		"overview": {
		  "viewId": "overview",
		  "viewName": "Overview"
		},
		**"detail": {**
		  "viewId": "detail",
		  "viewName": "Detail"
		}
	  }
	}
  }
}

我们在描述符的sap.ui5部分添加了一个新的“选择途径”部分。有三个子部分定义了应用的选择途径和导航结构:

config

介绍全局途径选择的配置，以及适用于所有途径选择和目标的缺省值。我们定义了我们想要使用的途径选择类，以及视图在应用程序中的位置。为了自动加载和显示视图，我们还指定了哪个控件用于显示页面，以及在显示新页面时应该填充什么聚合。

routes

每个路径选择都定义了一个名称、一个模式和一个或多个目标，以便在路径选择时导航到这些目标。模式基本上是相匹配的URL部分路线,我们定义两个路线应用。第一个是默认路径，将显示overview页面内容与前面的步骤,和第二个是细节路线的URL模式的细节将显示一个新页面。

targets

目标定义一个视图显示，一个或多个路线，也可以手动从内部应用程序显示。当目标显示，相应的视图加载和应用程序所示。在我们的应用程序简单地定义两个目标视图名称对应于目标名称。

webapp/Component.js

sap.ui.define([
	"sap/ui/core/UIComponent",
	"sap/ui/model/json/JSONModel",
	"./controller/HelloDialog"
], function (UIComponent, JSONModel, HelloDialog) {
	"use strict";

	return UIComponent.extend("sap.ui.demo.walkthrough.Component", {

		metadata: {
			manifest: "json"
		},

		init: function () {
			// call the init function of the parent
			UIComponent.prototype.init.apply(this, arguments);

			// set data model
			var oData = {
				recipient: {
					name: "World"
				}
			};
			var oModel = new JSONModel(oData);
			this.setModel(oModel);

			// set dialog
			this._helloDialog = new HelloDialog(this.getRootControl());
			// create the views based on the url/hash
			this.getRouter().initialize();
		},
	});

		exit : function () {
			this._helloDialog.destroy();
			delete this._helloDialog;
		},

		openHelloDialog : function () {
			this._helloDialog.open();
		}
	});

});

在组件初始化方法中，我们现在添加一个调用来初始化路径。我们不需要手动实例化路径，它会根据我们的AppDescriptor配置自动实例化并分配给组件。初始化路由器将计算当前URL并自动加载相应的视图。这是在AppDescriptor中配置的路径和目标的帮助下完成的。如果被路径被选择，则加载并显示对应目标的视图。

webapp/view/Overview.view.xml (New)

<mvc:View
		controllerName="sap.ui.demo.walkthrough.controller.App"
		xmlns="sap.m"
		xmlns:mvc="sap.ui.core.mvc"
		displayBlock="true">
<Shell>
	<App class="myAppDemoWT" id="app"/>
</Shell>
</mvc:View>

我们的App视图现在只包含空的App标签。路由器会自动将当前URL对应的视图添加到应用控件中。路由器用对应于AppDescriptor中的属性controlId: " app "的ID来标识应用控件。

webapp/view/Detail.view.xml (New)

<mvc:View
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc">
	<Page
		title="{i18n>detailPageTitle}">
		<ObjectHeader
			title="Invoice"/>
	</Page>
</mvc:View>

现在我们为细节视图添加第二个视图。它只包含一个页面和一个控件控制显示静态发票文本。

webapp/i18n/i18n.properties

…
# Invoice List
invoiceListTitle=Invoices
invoiceStatusA=New
invoiceStatusB=In Progress
invoiceStatusC=Done

# Detail Page
detailPageTitle=Walkthrough - Details

我们将一个新字符串添加到资源包中，用于详细页面标题。

webapp/view/InvoiceList.view.xml

<mvc:View
		controllerName="sap.ui.demo.walkthrough.controller.InvoiceList"
		xmlns="sap.m"
		xmlns:mvc="sap.ui.core.mvc">
	<List	…>
		…
		<items>
			<ObjectListItem
					
					title="{invoice>Quantity} x {invoice>ProductName}"
					number="{
					parts: [{path: 'invoice>ExtendedPrice'}, {path: 'view>/currency'}],
					type: 'sap.ui.model.type.Currency',
					formatOptions: {
						showMeasure: false
					}
				}"
					numberUnit="{view>/currency}"
					numberState="{=	${invoice>ExtendedPrice} > 50 ? 'Error' : 'Success' }"
					type="Navigation"
					press="onPress">
				<firstStatus>
					<ObjectStatus text="{
						path: 'invoice>Status',
						formatter: '.formatter.statusText'
					}"/>
				</firstStatus>
			</ObjectListItem>
		</items>
	</List>
</mvc:View>

在发票列表视图中，我们向列表项添加一个按钮事件，并将项目类型设置为导航，以便项目可以单击。

webapp/controller/InvoiceList.controller.js

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/ui/model/json/JSONModel",
	"../model/formatter",
	"sap/ui/model/Filter",
	"sap/ui/model/FilterOperator"
], function (Controller, JSONModel, formatter, Filter, FilterOperator) {
	"use strict";

	return Controller.extend("sap.ui.demo.walkthrough.controller.InvoiceList", {

		…

		onPress: function (oEvent) {
			var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
			oRouter.navTo("detail");
		}
	});

});

我们将事件处理程序函数添加到发票列表的控制器中。现在是时候通过单击发票列表中的一个项目导航到详细信息页面了。我们通过调用helper方法sap.ui.core.UIComponent.getRouterFor(this)来访问应用的路由器实例。在路由器上，我们调用navTo方法来导航到我们在路由配置中指定的详细路径。当您单击发票列表中的一个项目时，您现在应该会看到详细信息页面。

注意

在描述符中定义路由配置

现在我们可以在概览和详细信息页面之间导航，但是我们在概览中选择的实际项目还没有显示在详细信息页面上。我们的应用程序的一个典型用例是在详细页面上显示所选项目的附加信息。

1.练习效果
在这里插入图片描述

webapp/manifest.json

{
  "_version": "1.12.0",
  …
  "sap.ui5": {
	…
	"routing": {
	  "config": {
		"routerClass": "sap.m.routing.Router",
		"viewType": "XML",
		"viewPath": "sap.ui.demo.walkthrough.view",
		"controlId": "app",
		"controlAggregation": "pages",
		"async": true
	  },
	  "routes": [
		{
		  "pattern": "",
		  "name": "overview",
		  "target": "overview"
		},
		{
		  "pattern": "detail/{invoicePath}",
		  "name": "detail",
		  "target": "detail"
		}
	  ],
		  "targets": {
		"overview": {
		  "viewID": "overview"
		  "viewName": "Overview"
		},
		"detail": {
		  "viewId": "detail"
		  "viewName": "Detail"
		}
	  }
	}
  }
}

现在，我们向详细路由添加一个导航参数invoicePath，这样我们就可以将所选项目的信息传递给详细页面。强制导航参数用大括号定义。

webapp/view/Detail.view.xml

<mvc:View
	controllerName="sap.ui.demo.walkthrough.controller.Detail"
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc">
	<Page
		title="{i18n>detailPageTitle}">
		<ObjectHeader
			intro="{invoice>ShipperName}"
			title="{invoice>ProductName}"/>
	</Page>
</mvc:View>

我们添加了一个控制器，它将负责在视图上设置项目的上下文，并将ObjectHeader的一些属性绑定到发票模型的字段。我们可以在这里添加来自invoice对象的更详细的信息，但是为了简单起见，我们现在只显示两个字段。

webapp/controller/InvoiceList.controller.js

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/ui/model/json/JSONModel",
	"../model/formatter",
	"sap/ui/model/Filter",
	"sap/ui/model/FilterOperator"
], function (Controller, JSONModel, formatter, Filter, FilterOperator) {
	"use strict";
	return Controller.extend("sap.ui.demo.walkthrough.controller.InvoiceList", {
		…

		onPress: function (oEvent) {
			var oItem = oEvent.getSource();
			var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
			oRouter.navTo("detail", {   "用NAVTO指定详细路径
				invoicePath: oItem.getBindingContext("invoice").getPath().substr(1)
			});
		}
	});
});

与之交互的控制实例可以被所有SAPUI5可用事件的getSource方法访问。被点击的ObjectListItem会返回在例子中。
我们将使用它将被单击项目的信息传递到详细信息页面，以便在那里可以显示相同的项目。
在navTo方法中，我们现在添加一个配置对象，用项目的当前信息填充导航参数invoicePath。这将更新URL并同时导航到详细视图。
在详细信息页面上，我们可以再次访问此上下文信息并显示相应的项。
为了标识所选择的对象，我们通常会使用后端系统中项的键，因为它既短又精确。然而，对于我们的发票项目，我们没有一个简单的键，而是直接使用绑定路径来保持示例的简短和简单。条目的路径是绑定上下文的一部分，绑定上下文是SAPUI5的一个助手对象，用于管理控件的绑定信息。绑定上下文可以通过在任何绑定的SAPUI5控件上调用带有模型名的getBindingContext方法来访问。我们需要移除第一个/从绑定路径调用。substr(1)在字符串上，因为这是url中的特殊字符，是不允许的，所以我们将在详细页面上再次添加它。

webapp/controller/Detail.controller.js (New)

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/ui/core/UIComponent"
], function (Controller, UIComponent) {
	"use strict";
	return Controller.extend("sap.ui.demo.walkthrough.controller.Detail", {
		onInit: function () {
			var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
			oRouter.getRoute("detail").attachPatternMatched(this._onObjectMatched, this);
		},
		_onObjectMatched: function (oEvent) {
			this.getView().bindElement({
				path: "/" + oEvent.getParameter("arguments").invoicePath,
				model: "invoice"
			});
		}
	});
});

我们的最后一块拼图是细节控制器。它需要在视图上设置我们通过URL参数invoicePath传入的上下文，以便实际显示发票列表中选中的项目，否则，视图将保持空状态。
在控制器的onInit方法中，我们获取应用路由器的实例，并通过调用attachPatternMatched方法来附加到detail路由上。我们注册了一个内部回调函数_onObjectMatched将在路由被选中时执行，或者通过点击该条目，或者通过调用带有详细页面URL的应用程序。
在路由器触发的_onObjectMatched方法中，我们接收到一个可以用来访问URL和导航参数的事件。arguments参数将返回一个与路由模式中的导航参数相对应的对象。我们访问在发票列表控制器中设置的invoicePath，并调用视图上的bindElement函数来设置上下文。我们必须再次在路径前面添加根/，因为它作为URL参数传递路径时被删除了。
bindElement函数为SAPUI5控件创建绑定上下文，并接收模型名称以及配置对象中条目的路径。这将触发与发票模型的字段连接的UI控件的更新。当您单击发票列表中的一个项目时，您现在应该在一个单独的页面上看到发票的详细信息。

注意

在AppDescriptor中定义路径配置

现在，我们可以导航到详细信息页面并显示发票，但还不能返回到概述页面。我们将向详细页面添加一个后退按钮，并实现一个函数来再次显示概览页面。

在这里插入图片描述
webapp/view/Detail.view.xml

<mvc:View
	controllerName="sap.ui.demo.walkthrough.controller.Detail"
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc">
	<Page
		title="{i18n>detailPageTitle}"
		showNavButton="true"
		**navButtonPress=".onNavBack">**
		<ObjectHeader
			intro="{invoice>ShipperName}"
			title="{invoice>ProductName}"/>
	</Page>
</mvc:View>

在详细信息页面上，我们通过将参数showNavButton设置为true来告诉控件显示一个后退按钮，并注册一个当按下后退按钮时调用的事件处理程序。

webapp/controller/Detail.controller.js

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/ui/core/routing/History", 
	"sap/ui/core/UIComponent"
], function (Controller, History, UIComponent) {
	"use strict";

	return Controller.extend("sap.ui.demo.walkthrough.controller.Detail", {

		onInit: function () {
			var oRouter = UIComponent.getRouterFor(this);
			oRouter.getRoute("detail").attachPatternMatched(this._onObjectMatched, this);
		},

		_onObjectMatched: function (oEvent) {
			this.getView().bindElement({
				path: "/" + oEvent.getParameter("arguments").invoicePath,
				model: "invoice"
			});
		},

		**onNavBack: function () {**
			var oHistory = History.getInstance();
			var sPreviousHash = oHistory.getPreviousHash();

			if (sPreviousHash !== undefined) {
				window.history.go(-1);
			} else {
				var oRouter = UIComponent.getRouterFor(this);
				oRouter.navTo("overview", {}, true);
			}
		}

	});
});

我们加载一个新的依赖项，它帮助我们从sap.ui.core.routing命名空间管理导航历史，并将事件处理程序的实现添加到我们的细节页面控制器。

在事件处理程序中，我们访问导航历史记录，并尝试确定前面的排列。与浏览器历史相比，只有当应用程序中的导航步骤已经发生时，我们才会得到一个有效的结果。然后，我们将简单地使用浏览器历史记录返回到前一页。如果之前没有导航，我们可以告诉路由器直接进入我们的概览页面。第三个参数true告诉路由器用新的历史状态替换当前的历史状态，因为实际上我们自己做了一个返回导航。第二个参数是一个空数组({})。

对于我们的用例来说，这个实现比浏览器的后退按钮要好一些。浏览器只会返回上一步,尽管在另一个页面之外的另一页，我们总是想回到overview页面即使我们来自另一个链接或直接与书签打开详细信息页面。你可以直接在新标签中加载详细信息页面点击应用程序中的后退按钮，它仍然会回到概览页面。

注意

在历史记录状态不清楚时添加返回父页面的路径。

修电脑的猫
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
SAP UI5 文档
03-13
SAP UI5 文档SAP UI5 文档SAP UI5 文档SAP UI5 文档SAP UI5 文档
ui5
weixin_42584507的博客
01-10 193
UI5是SAP研发的一种Web前端开发框架，用于开发基于浏览器的应用程序。它基于HTML5，并提供了大量的UI组件和库，帮助开发人员更快地构建应用程序。UI5也提供了MVC模型，帮助开发人员更好地组织和管理应用程序的代码。 ...
UI5 快速入门教程
weixin_65180200的博客
04-18 699
UI5 快速入门 帮你分析了解 每一个文件的每一个细节
SAP UI5
tiokld的专栏
07-17 2695
网上很少能看到介绍OpenUI5的中文文章，有也是“ SAP 开源的 JavaScript 框架，有点重”。首先我不去说OpenUi5到底有多重，先说说SAP为什么把OpenUI5开源，除了软件license法律上的原因之外。 先说说历史，SAP在UI框架上的选择其实也纠结了十多年了，是多年前，SAP就很有先见的推出了SAP GUI，这个其实就是最早的BS框架，不过这个B是SAP自己的客户端而不
UI5（一）
修电脑的猫的博客
12-23 626
UI5
SAP ui5
tiokld的专栏
12-03 2504
实习了一段时间，接触两个项目，都用到SAP UI5，谈一点看法。UI5更像是对jquery的一种封装，类库总大小差不多58M左右。所有用到的一些控件都是通过js来定义实现的，它将前端view层又采用MVC的模式进行分层，页面分为demo.view.js以及demo.controller.js，demo.view.js文件里面可以定义一些sap.ui5的一些控件，一些click事件或者对数据进行操作
Oracle数据回滚的全过程
01-19
最近在修复一个比较老的项目报表的bug的时候，因为对该项目不太熟悉，导致生产环境数据修改有误，于是求助导师帮忙回滚数据，现学习一下Oralce数据回滚以备不时之需。 查看某个时间点的表的数据 select * from ...
Git代码回滚实践
01-07
Git代码回滚实践环境搭建环境试验idea示例代码回滚回滚条件创建回滚目标具体操作github地址 环境搭建 1.github上新建仓库：https://github.com/ydfind/git-test.git 2.idea从git新建两个项目，并修改提交代码的...
如何使用Git优雅的回滚实现
10-15
主要介绍了如何使用Git优雅的回滚实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
MySql事务无法回滚的原因有哪些
09-10
使用MySQL时，如果发现事务无法回滚，但Hibernate、Spring、JDBC等配置又没有明显问题,到底是什么原因，下面与大家分享下
简单的c#事务回滚实例代码
12-22
执行多条SQL语句对数据库进行操作，如果某个SQL语句执行中出错，那么要对之前的操作进行回滚，代码比较简单。
UI5:安装UI5开发环境
weixin_43734184的博客
04-11 1383
1.首先要安装nodejs和vscode(建议采用vscode开发），然后才能执行下面的操作 nodejs:https://nodejs.org/en/ vscode:https://code.visualstudio.com/ 2.vscode中安装ui5 执行命令： npm install --global @ui5/cli 3.桌面创建文件夹app1,vscode打开该文件夹，执行init npm init --yes 4.在app1中创建webapp文件夹 5.在app1文件夹里执行，生成ui5
UI5 Tooling
06-28 476
UI5 Tooling是一个基于Node.js开发的开源项目。它提供了一个模块化的、可配置的和可扩展的命令行接口，为应用程序、库和重用组件的高效开发定制了UI5框架。 开源工具重用，灵活扩展，宜集成，先进语言特性，多IDE适用。总之，好用高效。 从架构去了解UI5 Tooling，我的理解是首先它是一组命令行工具，基于NodeJS集成了File System,Project,Logger,Server,Builder这几个模块，不但可以本地执行，还可以用于SAP webIDE以及SAP Business
探索与学习：UI5教程 - 一个完善的Web应用开发平台
最新发布
gitblog_00083的博客
04-21 310
探索与学习：UI5教程 - 一个完善的Web应用开发平台 项目地址:https://gitcode.com/wangzixi-diablo/ui5-tutorial 项目简介 UI5 Tutorial 是一个基于SAP UI5的在线教程，由wangzixi-diablo维护。该项目旨在帮助开发者和学生快速入门并精通SAP UI5，这是一款强大的前端框架，用于构建企业级的交互式Web应用程序。通过此...
UI5-培训篇-Fiori培训
abbilglf665483的博客
03-08 834
1.学习网站： 　SAPUI5学习地址： 　https://blog.csdn.net/stone0823/article/category/6650292/1? 　SAPUI5文档： 　https://sapui5.hana.ondemand.com/#/demoapps 　SAP Build 模型： 　https://developers.sap.com/tutorial...
对ui5的一些总结和思考
匹夫的博客
09-21 612
在帮助同事解决了函数作用域的问题之后，突然觉得有必要梳理一下ui5的知识。 ui5的逻辑控制器采用了amd规范，可以实现异步加载。关于amd规范可以参考： http://www.jianshu.com/p/9b44a1fa8a96and规范制定了一种匿名定义模块的方式： 如果在使用define（）的时候省略了第一个参数，即省略了模块的名字，这个时候模块的名字会被默认为当前模块的文件名，那么字加
ui5 初学经验分享
Joker's blog
08-07 355
最近接了一个fiori的活，加班写了一周终于是写出来了，分享下经历：(特别是对新人，大佬可以略过) 1、对于新人来说，刚开始开发的时候尽量别考虑i18n。先说下原因：对于刚接触ui5的新人来说，对xml生成视图并不是特别好理解，使用i18n会严重影响你的开发效率，因为每次你查看view的时候看到的都是一堆变量名，当然，如果你变量名起不好的话就更可怕了，往往需要翻到i18n去查对应的描述，大大损耗...
SAP UI5 初学 ( 一 )、简介
weixin_42646630的博客
06-23 3103
SAPUI5
ui5splitApp
ymr1248的博客
04-18 549
第一步创建一个Demo; 第二步在index.html里面修改加载分页的源码var app = new sap.m.App({initialPage:"demo"}); app.addPage(new sap.m.Shell("demo", { app : new sap.ui.core.ComponentContainer({ name : "root.demo01.demo
VirtualBox回滚
10-01
VirtualBox回滚是指恢复到之前创建的虚拟机快照的状态。虚拟机快照是记录特定时间点的虚拟机状态的一种功能，可以方便地回滚到之前的状态，恢复、测试不同的配置等。要进行回滚操作，您可以按照以下步骤进行操作： 1. 打开VirtualBox软件，并选择要回滚的虚拟机。 2. 在虚拟机列表中，右键单击选中的虚拟机，并选择"Snapshots"或"快照管理"选项。 3. 在快照管理窗口中，您将看到已创建的虚拟机快照列表。 4. 选择您想要回滚的特定快照，并右键单击该快照。 5. 在右键菜单中，选择"回滚到此快照"或类似选项。 6. 确认回滚操作，等待VirtualBox恢复虚拟机到选定的快照状态。 请注意，回滚操作将会删除选定快照之后创建的所有快照，且无法恢复。因此，在回滚之前，请确保您已经备份了所有重要数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值