sapui5 - 使用 SAPUI5 时在 XML 视图中的何处添加 Shell Bar 控件？

Question

我是 OpenUI5/SAPUI5 的新手，并试图用它构建我的第一个应用程序。这将是一个独立的应用程序，我正在努力使用 Shell Bar 控件，我想将其添加到我的视图中。

据我了解，我编写了包含 App 控件的根视图，然后使用 App 控件的页面聚合（通过使用路由器）交换进出我的各个视图。

现在我希望 Shell Bar 被“卡”在顶部，这意味着它不能成为各个页面的一部分，因为这也会换掉 Shell Bar，我必须将它包含在由路由器。让 Shell Bar 不是根视图的一部分也让人感觉“错误”。

我尝试了不同的方法将 Shell Bar “钉”到我的视图顶部，但根据我的不同尝试，我最终得到了各种结果，所有这些都不是我打算做的。

示例 1（Shell Bar 是其页面聚合之外的 App 的子级）：

    <Shell>
        <App>
            <f:ShellBar title="Funky Title"
                        showNotifications="true"
                        notificationsNumber="2"
                        homeIcon="./static/logo.png">
                <f:menu>
                    <Menu>
                        <MenuItem text="{i18n>learnMenuEntry}" icon="sap-icon://e-learning"/>
                        <MenuItem text="{i18n>catalogMenuEntry}" icon="sap-icon://course-book"/>
                        <MenuItem text="{i18n>statisticsMenuEntry}" icon="sap-icon://line-chart"/>
                        <MenuItem text="{i18n>settingsMenuEntry}" icon="sap-icon://settings"/>
                    </Menu>
                </f:menu>
                <f:profile>
                    <f:Avatar initials="UI"/>
                </f:profile>

            </f:ShellBar>

            <pages>
                <Page title="{i18n>homePageTitle}">
                    <content>
                       [ ... ]
                    </content>
                </Page>
            </pages>
        </App>
    </Shell>

这会在顶部显示 Shell Bar，但任何属于 Page 控件的部分都不会显示。我认为在聚合之外添加控件会破坏 App 控件。

示例 2（Shell Bar 位于 Shell 外部）：

<mvc:View
        controllerName="webhrt.controller.App"
        xmlns="sap.m"
        xmlns:f="sap.f"
        xmlns:mvc="sap.ui.core.mvc"
        displayBlock="true">


    <f:ShellBar title="Funky title"
                secondTitle="Startseite"
                showNotifications="true"
                notificationsNumber="2"
                homeIcon="./static/logo.png">
        <f:menu>
            <Menu>
                <MenuItem text="{i18n>learnMenuEntry}" icon="sap-icon://e-learning"/>
                <MenuItem text="{i18n>catalogMenuEntry}" icon="sap-icon://course-book"/>
                <MenuItem text="{i18n>statisticsMenuEntry}" icon="sap-icon://line-chart"/>
                <MenuItem text="{i18n>settingsMenuEntry}" icon="sap-icon://settings"/>
            </Menu>
        </f:menu>
        <f:profile>
            <f:Avatar initials="UI"/>
        </f:profile>

    </f:ShellBar>

    <Shell>
        <App>
            <pages>
                <Page title="{i18n>homePageTitle}">
                    <content>
                        [ ... ]
                        </Panel>
                    </content>
                </Page>
            </pages>
        </App>
    </Shell>
</mvc:View>

这在某种程度上可行，但由于 Shell Bar 位于 Shell“外部”，因此它不是限制页面宽度的信箱的一部分。它覆盖了屏幕的整个宽度。

我还尝试将 Shell Bar 添加为 Shell 控件的子项，但根据 Shell 控件的文档不支持此操作，该控件仅允许 App 控件作为其子项。

我错过了什么？我也浏览了 OpenUI5 网站上的示例，但是关于使用 Shell Bar 控件的文档相当稀少。

标签： sapui5