SAP UI5初步结构分析研究（五）

这回研究了一下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表

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

SAP UI5初步结构分析研究（五）

猜你喜欢