我们尝试使用标准路由概念在sap.ui.unified.shell内容中实现多个视图,但我们不知道如何在代码级别实现此目的。
当用户点击侧窗格中的主页项时,主页视图应该加载到shell的内容中。(期待主页视图的书签URL)
MAIN.VIEW.XML:
<mvc:View
xmlns:l="sap.ui.layout"
xmlns:u="sap.ui.unified"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
class="viewPadding">
<u:Shell
id="myShell">
<u:headItems>
<u:ShellHeadItem
tooltip="Configuration"
icon="sap-icon://menu2"
press="handlePressConfiguration" />
<u:ShellHeadItem
tooltip="Home"
icon="sap-icon://home"
visible="false"
press="" />
</u:headItems>
<u:headEndItems>
<u:ShellHeadItem
icon="sap-icon://log"
tooltip="Logoff"
press="" />
</u:headEndItems>
<u:user>
<u:ShellHeadUserItem
image="sap-icon://person-placeholder"
username="Test User"
press="" />
</u:user>
<u:search>
<SearchField
search="handleSearchPressed"/>
</u:search>
<u:paneContent>
<List>
<DisplayListItem
label="Home"
type="Navigation" />
<DisplayListItem
label="Page 1"
type="Navigation" />
<DisplayListItem
label="Page 2"
type="Navigation"/>
<DisplayListItem
label="Page 3"
type="Navigation"/>
</List>
</u:paneContent>
</u:Shell>
MAIN.CONTROLLER.JS:
handlePressConfiguration: function(oEvent) {
var oItem = oEvent.getSource();
var oShell = this.getView().byId("myShell");
var bState = oShell.getShowPane();
oShell.setShowPane(!bState);
oItem.setShowMarker(!bState);
oItem.setSelected(!bState);
},
类似地,当用户选择任何侧面菜单项时,应该在shell的内容中加载相应的视图。
Page1.view.xml应该加载在shell内容中。(期望第1页的书签网址)
PAGE1.VIEW.XML:
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="shellproject.page1" xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Title">
<content>
<Text text=" Page 1 Contents Here.."/>
</content>
</Page>
Page2.view.xml应该加载在shell内容中。(期望第2页的书签网址)
PAGE2.VIEW.XML
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="shellproject.page2" xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Title">
<content>
<Text text=" Page 2 Contents Here.."/>
</content>
</Page>