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

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;  
    });

controller/App.controller.js

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

controller/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);
        }
      });  
    });

controller/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);
        }
      });  
    });

view/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>

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>

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 内导航？

How to navigate inside of sap.ui.unified.Shell?

sapui5

sap-fiori