SAP UI5初步结构分析研究(五)

xiaoxiao2021-02-28  6

这回研究了一下UI5中的fragment 各种过滤器以及odata提供的API,根据这回在git上clone下来的demo,并且我结合了上一篇博客加入了UI组件化以及路由配置实现了产品细节查看效果,总体来说还可以,稍微有些不足的地方我会找时间再继续研究一下

按照惯例,我还是把整个页面都放进了Shell组件中,界面我反正感觉还是美观了不少的,虽然没有了全屏显示数据的感觉,因为我使用了官方提供的API,并且,我在两个controller中都加载了一次,所以查看细节和全览的功能都会有点延迟,最开始作者的代码我貌似是找不着了,等我找到了会回来再编辑一次加上去,首先附上目录结构 这次很多文件都没有用上,所以我就不展开了,多语言环境大家可以根据我前面的博客进行配置,玩一次就好了,不用次次都玩吧= =

当然还是老规矩,重新温习一遍套路

在manifest.json中配置路由信息,加入层级,命名路由,指定模式以及要传递的数据编写App.view.xml,配置根路由,然后让首页先行现实在根目录上

编写各自的controller,并且把获取到的API加载到model里

这次主要还是研究一下过滤器以及fragment的奥妙

Table.controller.js

sap.ui.define(["sap/ui/core/mvc/Controller", "sap/ui/model/odata/v2/ODataModel", "sap/ui/model/json/JSONModel", "sap/ui/model/Sorter", "sap/ui/model/Filter", "sap/ui/core/UIComponent" ], function (Controller, ODataModel, JSONModel, Sorter, Filter, UIComponent) { "use strict"; return Controller.extend("webapp.controller.Table", { // ------------------------------- // Initialization event // ------------------------------- onInit: function () { // Application model var sServiceUrl = "https://cors-anywhere.herokuapp.com/" + "http://services.odata.org/V3/Northwind/Northwind.svc/"; //从odata官方提供的API中获取到数据,服务器名为northwind var oModel = new ODataModel(sServiceUrl); oModel.setUseBatch(false); this.getView().setModel(oModel); }, onListPress: function(event) { var oRouter = UIComponent.getRouterFor(this); var oItem = event.getSource(); var sPath = oItem.getBindingContext(); //MessageToast.show(sPath); oRouter.navTo("Page", { SuppliersPath: encodeURIComponent(sPath) }); }, // --------------------------------------------- // 设置 Table 的 排序,分组和筛选 // 由于分组和筛选都是改变了下面表格的格局,所以我们要新建立一个数组去储存结果集 // --------------------------------------------- onTableSettings: function () { var oDialog = this.getView().byId("SettingsDialog"); //这个id不代表标签ID,代表的是fragment的名称 if (!oDialog) { oDialog = sap.ui.xmlfragment("webapp.view.SettingsDialog", this); } //声明路径 oDialog.open(); }, onConfirm: function (oEvent) {//fragment中的方法 var oBinding = this.getView().byId("idTable").getBinding("items");//获取需要排序的整个table的列表items绑定值 var mParams = oEvent.getParameters();//获取点击事件中的值,用if判断点击按钮所提供的类型 // Apply grouping分组 var aSorters = []; if (mParams.groupItem) { var sGroupKey = mParams.groupItem.getKey();//key详见fragment的标签中,代表了排序所遵循的标准 var bDescending = mParams.groupDescending; aSorters.push(new Sorter(sGroupKey, bDescending, true)); } // Apply sorter排序 if (mParams.sortItem) { var sSortKey = mParams.sortItem.getKey(); aSorters.push(new Sorter(sSortKey, bDescending)); //由于js特性,所以var声明后的变量相当于全局变量,在这里不需要再次声明bDescending } oBinding.sort(aSorters); // Apply filters筛选 var aFilters = []; if (mParams.filterItems) { var count = mParams.filterItems.length;//遍历筛选过后的数组长度 for (var i = 0; i < count; i++) { var oFilterItem = mParams.filterItems[i]; var oFilter = new Filter(oFilterItem.getKey(), sap.ui.model.FilterOperator.EQ, oFilterItem.getText()); aFilters.push(oFilter); } } oBinding.filter(aFilters); } // end of onConfirm }); });

SettingsDialog.fragment.xml

<core:FragmentDefinition xmlns:core="sap.ui.core" xmlns="sap.m"> <ViewSettingsDialog confirm="onConfirm"> <!--已经在controller中定义方法onConfirm--> <sortItems> <ViewSettingsItem selected="true" key="CompanyName" text="供应商名称" /> <ViewSettingsItem key="City" text="城市" /> </sortItems> <groupItems> <ViewSettingsItem key="Country" text="国家"/> </groupItems> <filterItems> <ViewSettingsFilterItem text="城市" key="City"> <items> <ViewSettingsItem key="City" text="Tokyo"/> <ViewSettingsItem key="City" text="London"/> <ViewSettingsItem key="City" text="Manchester"/> </items> </ViewSettingsFilterItem> </filterItems> </ViewSettingsDialog> </core:FragmentDefinition>

我们先来看Fragment中的写法,用了一个dialog的标签声明了是弹出框的形式,然后每个选项当中,都有一个key选项,这个key是要与odata中的数据项保持一致的,作为筛选的依据,text就是筛选的呈现文字,这边作者非常贴心,分别使用了三种过滤并且写出了单选复选两种模式,当然这么多代码注释都是我后来补上去的= =

方法类我代码里面注释的很详细了,我就不细说了,下面说说这个API的问题

onInit: function () { // Application model var sServiceUrl = "https://cors-anywhere.herokuapp.com/" + "http://services.odata.org/V3/Northwind/Northwind.svc/"; //从odata官方提供的API中获取到数据,服务器名为northwind var oModel = new ODataModel(sServiceUrl); oModel.setUseBatch(false); this.getView().setModel(oModel); },

我们先进第一段URL看看 可以看到这是官方的一段示例说明,而且注明这个API是可以被使用的,有贴上了示例链接 再进第二个URL看一看 可以看到这里面已经都是数据了,每个带有href的标签都是一个数据源,我们可以右键查看源代码,然后点击href中的链接,就可以看到相应的xml源码,如果觉得看不清可以复制去网上找一下xml转json工具,就可以看到里面完整格式的数据细节,这里我用的是Supplisers表

细节不多说,我直接在最后附上源码大家自行查看即可 路由配置以及细节查看教程 博客源码

转载请注明原文地址: https://www.6miu.com/read-200235.html

最新回复(0)