Question

我想创建一个自定义的SAP启动板。为此，我需要使用sap.ui.unified.Shell作为容器。可以在此shell的内容中加载一些oControlls。现在我的问题是我如何在这个shell容器中使用路由并加载此shell内的其他视图？或者，我怎样才能连接sap路由器以在shell容器中加载数据？

Answer 1

Here是关于如何在统一shell中加载不同视图的一个很好的例子：

的index.html：

  <!DOCTYPE HTML>
<html>

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta charset="utf-8">
  <title>Column Micro Chart on a Generic Tile</title>
  <script id="sap-ui-bootstrap" 
        src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" 
        data-sap-ui-libs="sap.m" 
        data-sap-ui-theme="sap_bluecrystal" 
        data-sap-ui-xx-bindingSyntax="complex" 
        data-sap-ui-preload="async" 
        data-sap-ui-compatVersion="edge" 
        data-sap-ui-resourceroots='{
          "Testing": "./"
        }'>
  </script>
  <!-- Application launch configuration -->
  <script>
    sap.ui.getCore().attachInit(function() {
      new sap.ui.core.ComponentContainer({
                            height : "100%",
                            name : "Testing"
      }).placeAt("content");
    });
  </script>
</head>
<!-- UI Content -->

<body class="sapUiBody" id="content" role="application">
</body>

</html>

Component.js

sap.ui.define(['sap/ui/core/UIComponent'],  
  function(UIComponent) {  
    "use strict";  
    var Component = sap.ui.core.UIComponent.extend("Testing.Component", {  
      metadata: {  
        rootView: "Testing.view.App",  
        dependencies: {  
          libs: [  
          "sap.m",  
          "sap.suite.ui.microchart"  
          ]  
        },  
      config: {  
        sample: {  
          files: [  
          "view/App.view.xml",  
          "controller/App.controller.js"  
          ]  
        }  
      },
      routing: {
            config: {
                viewType: "XML",
                viewPath: "Testing.view",
                controlId: "appShell",
                clearTarget: true,
                routerClass: "sap.ui.core.routing.Router"
            },
            routes: [{
                    pattern: "",
                    name: "home",
                    target: "home"
                },
                {
                    pattern: "routed",
                    name: "routed",
                    target: "routed"
                }
            ],
            targets: {
                home: {
                    viewName: "Home",
                    controlId: "appShell",
                    controlAggregation: "content",
                    clearAggregation: true
                },
                routed: {
                    viewName: "Routed",
                    controlId: "appShell",
                    controlAggregation: "content",
                    clearAggregation: true
                }
            }
        }
    },
    init: function () {
            // call the init function of the parent
            UIComponent.prototype.init.apply(this, arguments);
            // this component should automatically initialize the router
            this.getRouter().initialize();
        }
  });  
  return Component;  
});

控制器/ App.controller.js

sap.ui.define([  
  "sap/ui/core/mvc/Controller"
], function(Controller) {  
  "use strict";  
  return Controller.extend("Testing.controller.App", {  
     onInit: function() {


    }
  });  
});

控制器/ Home.controller.js

sap.ui.define([  
  "sap/ui/core/mvc/Controller"
], function(Controller) {  
  "use strict";  
  return Controller.extend("Testing.controller.Home", {  
     onInit: function() {


    },

    onButtonPress: function (oEvent) {
      var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
      this.getView().getParent().removeAllContent();
            oRouter.navTo("routed", false);
    }
  });  
});

控制器/ Routed.controller.js

sap.ui.define([  
  "sap/ui/core/mvc/Controller"
], function(Controller) {  
  "use strict";  
  return Controller.extend("Testing.controller.Routed", {  
     onInit: function() {


    },

    onButtonPress: function (oEvent) {
      var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
      this.getView().getParent().removeAllContent();
            oRouter.navTo("home", false);
    }
  });  
});

查看/ App.view.xml

<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" 
  xmlns:u="sap.ui.unified" controllerName="Testing.controller.App" displayBlock="true">
  <u:Shell id="appShell">
        <u:headItems>
            <u:ShellHeadItem tooltip="Configuration" icon="sap-icon://menu2"
                press="handlePressConfiguration" />
            <u:ShellHeadItem tooltip="Home" icon="sap-icon://home"
          press="handlePressHome" />
        </u:headItems>
        <u:user>
            <u:ShellHeadUserItem image="sap-icon://person-placeholder"
                username="{shell>/userName}"  />
        </u:user>
        <u:paneContent>
        </u:paneContent>
        <u:content>
        </u:content>
    </u:Shell>
</mvc:View>

查看/ Home.view.xml

<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" 
 controllerName="Testing.controller.Home" displayBlock="true">
  <Page title="Home">
    <headerContent>
            <Button text="to route" press="onButtonPress" />
        </headerContent>
    <content>
    </content>
  </Page>
</mvc:View>

查看/ Routed.view.xml

<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" 
 controllerName="Testing.controller.Routed" displayBlock="true">
  <Page title="A route">
    <headerContent>
            <Button text="to home" press="onButtonPress" />
        </headerContent>
    <content>
    </content>
  </Page>
</mvc:View>

如何在sap.ui.unified.Shell中导航？

1 个答案: