其他分享
首页 > 其他分享> > Fiori application 内的View 之间的导航

Fiori application 内的View 之间的导航

作者:互联网

refer to :https://blogs.sap.com/2018/06/02/how-to-load-a-json-model-from-manifest-file-and-send-json-object-as-a-parameter-through-routing-and-navigation/ 

1: 根据template创建一个Free style的 Fiori application。 https://www.cnblogs.com/liyafei/p/15742879.html

创建两个View和两个controller。提供json文件作为数据源。

 

 2: 给view 添加 table 和column.  https://www.cnblogs.com/liyafei/p/15748430.html

 

 View1.xml

<mvc:View
    controllerName="hansentestnavigation.controller.View1"    //指定controller
    xmlns:mvc="sap.ui.core.mvc"   //指定使用的 component或者framework, 并给一个别名。
    displayBlock="true"
    xmlns="sap.m"
>
    <Shell id="shell">
        <App id="app">
            <pages>
                <Page id="page" title="{i18n>title}">
                    <content>
                    <Table class="sapUiSizeCompact" id="table1" includeItemInSelection="true" items="{path: 'DataModel>/Objects'}" mode="MultiSelect"
                        selectionChange="onselectionChange">   //id指定id, path指定数据源,从哪个datamodel中哪个字段json object. selectionChange 定义一个事件 onselectionchange
                        <columns>  // 指定列。
                            <Column>
                                <Label text="Product Name"/>
                            </Column>
                            <Column>
                                <Label text="Supplier"/>
                            </Column>
                            <Column>
                                <Label text="Price"/>
                            </Column>
                            <Column>
                                <Label text="Units Ordered"/>
                            </Column>
                        </columns>
                        <ColumnListItem press="onPress" type="Navigation">  // 指定onPress事件,指定类型为导航。
                            <Text text="{DataModel>Name}"></Text>  指定从哪个datamodel获取值,DataModel该名字应该和controller 中的datamodel名字相同。
                            <Text text="{DataModel>Supplier}"></Text>
                            <Text text="{DataModel>Price}"></Text>
                            <Text text="{DataModel>Units}"></Text>
                        </ColumnListItem>
                    </Table>
                </content>
                </Page>
            </pages>
        </App>
    </Shell>
</mvc:View>

View2.xml

<mvc:View
    controllerName="hansentestnavigation.controller.View2"  //指定controller2, 如果不指定,该controll将不能在前端页面加载出来。
    xmlns:mvc="sap.ui.core.mvc"
    displayBlock="true"
    xmlns="sap.m"
>
    <Shell id="shell">
        <App id="app">
            <pages>
                <Page id="page2" navButtonPress="onNavBack" showNavButton="true" title="Tableview2">    //指定一个事件 onNavBack
                <content>
                    <Table class="sapUiSizeCompact" id="abc" items="{path: 'navigationModel>/Objects'}">  // 指定model
                        <columns>
                            <Column width="11rem">
                                <Label text="Product Name"/>
                            </Column>
                            <Column width="11rem">
                                <Label text="Supplier"/>
                            </Column>
                            <Column hAlign="End" width="6rem">
                                <Label text="Price"/>
                            </Column>
                            <Column hAlign="End" width="15rem">
                                <Label text="Units Ordered"/>
                            </Column>
                        </columns>
                        <ColumnListItem press="onPress" type="Navigation">
                            <Text text="{navigationModel>Name}"></Text>
                            <Text text="{navigationModel>Supplier}"></Text>
                            <Text text="{navigationModel>Price}"></Text>
                            <Text text="{navigationModel>Units}"></Text>
                        </ColumnListItem>
                    </Table>
                </content>
                </Page>
            </pages>
        </App>
    </Shell>
</mvc:View>

3: manefist 文件。

{
  "_version": "1.32.0",
  "sap.app": {
    "id": "hansentestnavigation",
    "type": "application",
    "i18n": "i18n/i18n.properties",
    "applicationVersion": {
      "version": "0.0.1"
    },
    "title": "{{appTitle}}",
    "description": "{{appDescription}}",
    "dataSources": {
      "mainService": {
        "uri": "/sap/opu/odata/",
        "type": "OData",
        "settings": {
          "annotations": [],
          "localUri": "localService/metadata.xml",
          "odataVersion": "4.0"
        }
      }
    },


// 将数据源加载进来。 "dataSources": { "tableData_alias": { //给一个别名。 "uri": "model/Object.json", //指定json文件路径。 "type": "JSON" } } }, "sap.ui": { "technology": "UI5", "icons": { "icon": "", "favIcon": "", "phone": "", "phone@2": "", "tablet": "", "tablet@2": "" }, "deviceTypes": { "desktop": true, "tablet": true, "phone": true } }, "sap.ui5": { "flexEnabled": false, "dependencies": { "minUI5Version": "1.97.0", "libs": { "sap.ui.core": {} } }, "contentDensities": { "compact": true, "cozy": true }, "models": { "i18n": { "type": "sap.ui.model.resource.ResourceModel", "settings": { "bundleName": "hansentestnavigation.i18n.i18n" } }, "": { "dataSource": "mainService", "preload": true, "settings": { "synchronizationMode": "None", "operationMode": "Server", "autoExpandSelect": true, "earlyRequests": true, "groupId": "$direct" } } }, "resources": { "css": [ { "uri": "css/style.css" } ] }, "routing": { // 指定路由的配置 "config": { "routerClass": "sap.m.routing.Router", //指定路由class "viewType": "XML", "async": true, "viewPath": "hansentestnavigation.view", // view的路径 "controlAggregation": "pages", "controlId": "app", "clearControlAggregation": false }, "routes": [ // 指定有几个route { "name": "View1", //该View的名字。 "pattern": "View1", // 对route 路径进行匹配。 "target": "View1", // 指定从下面targets 里面找哪个目标。 "controlAggregation": "pages" }, { "pattern": "View2/{selectedobj}", "name": "View2", "target": "View2", "controlAggregation": "pages" } ], "targets": { //路由到这里。 "View1": { "viewName": "View1" // 找具体的View }, "View2": { "viewName": "View2" } } }, "rootView": { "viewName": "hansentestnavigation.view.View1", // 根View, 首次打开project,会出现该View。 "type": "XML", "async": true, "id": "View1" } } }

4: component.js 。 该js文件会加载一些component。

sap.ui.define([
        "sap/ui/core/UIComponent",  // 定义要使用的component。
        "sap/ui/Device",
        "hansentestnavigation/model/models",
        "sap/ui/model/json/JSONModel"  //初始化json model
    ],
    function (UIComponent, Device, models) { // 如果方法中要使用上面声明的 component, 需要在function 中传入。
        "use strict";

        return UIComponent.extend("hansentestnavigation.Component", {  // 扩展project component
            metadata: {
                manifest: "json"
            },

            /**
             * The component is initialized by UI5 automatically during the startup of the app and calls the init method once.
             * @public
             * @override
             */
            init: function () {
                // call the base component's init function
                UIComponent.prototype.init.apply(this, arguments);

                // enable routing
                this.getRouter().initialize();  // 初始化路由。

                // set the device model
                this.setModel(models.createDeviceModel(), "device");  // 调用model.js 文件,设置device model.
            }
        });
    }
);

model.js

sap.ui.define([
    "sap/ui/model/json/JSONModel",
    "sap/ui/Device"
], function (JSONModel, Device) {
    "use strict";

    return {

        createDeviceModel: function () {
            var oModel = new JSONModel(Device);
            oModel.setDefaultBindingMode("OneWay");
            return oModel;
        }

    };
});

5: View1.controller.js

sap.ui.define([
    "sap/ui/core/mvc/Controller"  //使用controller组件
],
    /**
     * @param {typeof sap.ui.core.mvc.Controller} Controller
     */
    function (Controller) {
        "use strict";

        return Controller.extend("hansentestnavigation.controller.View1", {  
            onInit: function () {
                var dataModel = this.getOwnerComponent().getModel("tableData");
                this.getView().setModel(dataModel, "DataModel");
            },
            /*this below code for cilck on row the the page will navgate to next View*/
        onPress: function(oEvent) {
            var spath = oEvent.getSource().getBindingContext("DataModel").getPath();
            var selectedPath = JSON.stringify(oEvent.getSource().getBindingContext("DataModel").getProperty(spath));
            var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
            oRouter.navTo("View2", {
                "selectedobj": selectedPath
            });
        },
        /*this below code for selected the row data and then navigate to next View */
        onselectionChange: function() {
            var contexts = this.getView().byId("table1").getSelectedContexts();
            var items = contexts.map(function(c) {
                return c.getObject();
            });
            var selectedItems = JSON.stringify(items);
            var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
            oRouter.navTo("View2", {
                "selectedobj": selectedItems
            });

        }
        });
    });

View2.controller.js

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/model/json/JSONModel",
    "sap/ui/core/routing/History"
],
    /**
     * @param {typeof sap.ui.core.mvc.Controller} Controller
     */
    function (Controller,JSONModel,History) {
        "use strict";

        return Controller.extend("hansentestnavigation.controller.View2", {
            onInit: function () {
                var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
                oRouter.getRoute("View2").attachMatched(this._onObjectMatched, this);    
            },
            _onObjectMatched: function(oEvent) {
                var selectedArguments = oEvent.getParameter("arguments");
                var selectedRecord = JSON.parse(selectedArguments.selectedobj);
            
                var obj = {
                    "Objects": selectedRecord
                };
                var navigationobjModel = new JSONModel();
                navigationobjModel.setData(obj);
                this.getView().setModel(navigationobjModel, "navigationModel");
            },
            onNavBack: function() {
               // window.history.go(-1);

                var oHistory = History.getInstance();
                var sPreviousHash = oHistory.getPreviousHash();
                if (sPreviousHash !== undefined) {
                window.history.go(-1);
                } else {
                var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
                oRouter.navTo("View1", true);
                }

//                var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
//                oRouter.navTo("TargetView1");                
            }
        });
    });

 

标签:function,core,application,ui,var,Fiori,model,sap,View
来源: https://www.cnblogs.com/liyafei/p/15753750.html