2

我们试图通过使用标准路由概念在 sap.ui.unified.shell 内容中实现多个视图，但我们不知道如何在代码级别实现这一点。

当用户单击侧窗格中的主页项时，主页视图应加载到 shell 的内容中。（期望主页视图的书签 url）

主视图.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>

主控制器.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 内容中加载。（期待 page1 视图的书签 url）

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 内容中加载。（期待 page2 视图的书签 url）

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>

主页

第 1 页

4

0 回答 0