如何瀏覽sap.ui.unified.Shell內部？

我想創建一個定製的SAP啓動板。爲此，我需要使用sap.ui.unified.Shell作爲容器。可以在該shell的內容中加載一些oControlls。現在我的問題是如何在這個shell容器中使用路由並加載這個shell的其他視圖？或者，也許我怎麼才能連接SAP路由器加載數據在殼集裝箱內？如何瀏覽sap.ui.unified.Shell內部？

來源

2017-02-14 Mahdi Jaberzadeh

請注意，sap.ui.unified.Shell是標誌着自棄用版本1.44.0 – matbtt

那麼什麼是SAP本身使用，用於創建標準啓動板？我想爲自己創建一個自定義啓動板。 –

我需要的東西像sap.ui.unified.Shell有一個容器部分，我可以加載不同的視圖，但具有相同的標題，看起來像標準啓動板。 –

Here是有關如何加載不同視圖統一殼內部的很好的例子：

的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.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>

來源

2017-02-14 12:16:34

親愛的Martin，您的回答幾乎是正確的，但問題在於頁面內容沒有顯示在shell內部。 –

只需刪除頁面標籤並直接在視圖標籤中插入元素，而不是在頁面內容中插入元素。 – 2017-02-14 13:40:01

我不會編輯答案，因爲可能發生其他人面臨此問題。 – 2017-02-14 13:40:58

如何瀏覽sap.ui.unified.Shell內部？

回答

相關問題