Question

我们尝试使用标准路由概念在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>

Home Page

Page 1

sap.ui.unified.Shell与标准SAPUI5路由

0 个答案: