Как перемещаться внутри sap.ui.unified.Shell?

Я хочу создать настраиваемую панель запуска SAP. Для этого мне нужно использовать sap.ui.unified.Shell в качестве контейнера. Можно загрузить некоторые oControlls внутри содержимого этой оболочки. Теперь мой вопрос: как я могу использовать маршрутизацию внутри этого контейнера оболочки и загружать другие представления внутри этой оболочки? Или, может быть, как я могу подключить sap-маршрутизатор для загрузки данных внутри контейнера оболочки?Как перемещаться внутри sap.ui.unified.Shell?

источник

2017-02-14 Mahdi Jaberzadeh

Пожалуйста, обратите внимание, что sap.ui.unified.Shell помечается устарела начиная с версии 1.44.0 – matbtt

Так что же сама SAP использует для создания стандартных Launchpad? Я хочу создать настраиваемую панель запуска для себя. –

Мне нужно что-то вроде 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; 
});

контроллер/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>

источник

2017-02-14 12:16:34

Уважаемый Мартин, ваш ответ почти прав, но проблема в том, что содержимое страницы не отображается внутри оболочки. –

Просто удалите теги страницы и вставьте элементы непосредственно в тег представления, а не внутри содержимого страницы. –

Я не буду редактировать ответ, потому что может случиться, что другие сталкиваются с этой проблемой. –

Как перемещаться внутри sap.ui.unified.Shell?

ответ

Смежные вопросы