ui5splitApp

来源：互联网发布：网络作家白天的新文编辑：程序博客网时间：2024/05/29 02:28

第一步创建一个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"}) }));app.placeAt("content");

第三步新建一个View文件夹然后添加SplitApp.view.xml

再添加Home.view.xml和Message.view.xml

第四步新建controller文件夹新建Home.controller.js

第五步在demo的根目录下面创建一个manjfest.json

{"sap.app":{},"sap.ui":{},"sap.ui5":{"rootView":"root.demo01.demo.view.SplitApp","routing":{"config":{"routerClass":"sap.m.routing.Router","viewType":"XML","viewPath":"root.demo01.demo.view","controlId":"SplitApp","transition":"slide","bypassed":{"target":["Home","Message"]}},"routes":[          {          "pattern":"Home",          "name":"Home",          "target":["Home","Message"]          },            {          "pattern":"demo001",          "name":"demo02",          "target":["Message2"]          }          ],        "targets":{        "Home":{        "viewName":"Home",        "viewLevel":1,        "controlAggregation":"masterPages"        },        "Message":{        "viewName":"Message",        "viewLevel":1,        "controlAggregation":"detailPages"        },        "demo02":{        "viewName":"demo02",        "viewLevel":1,        "controlAggregation":"masterPages"        },        "Message2":{        "viewName":"Message2",        "viewLevel":1,        "controlAggregation":"detailPages"        }        }}}}

component.js的作用是判断是手机还是电脑，实现右边页是否显示

sap.ui.define([                 "sap/ui/core/UIComponent",                 "sap/ui/model/json/JSONModel",                "sap/ui/core/mvc/Controller"                ],function(UIComponent,JSONModel,Controller) {"use strict";return UIComponent.extend("root.demo01.demo.Component", {metadata : {manifest : "json"},init : function() {UIComponent.prototype.init.apply(this, arguments);var oDeviceModel = new JSONModel({isTouch : sap.ui.Device.support.touch,isNoTouch : !sap.ui.Device.support.touch,isPhone : sap.ui.Device.system.phone,isNoPhone : !sap.ui.Device.system.phone,listMode : (sap.ui.Device.system.phone) ? "None": "SingleSelectMaster",listItemType : (sap.ui.Device.system.phone) ? "Active": "Inactive"});oDeviceModel.setDefaultBindingMode("OneWay");this.setModel(oDeviceModel, "device");this._oRouter = this.getRouter();if (!sap.ui.Device.system.phone) {this._oRouter.getTargets().display("Message");};this._oRouter.initialize();},})})

0 0