当使用SAPUI5时，在XML视图中添加Shell栏控件在哪里?

Question

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

根据我的理解，我写了包含App控件的根视图，然后我使用App控件的页面聚合(通过使用路由器)来交换我的各个视图。

现在我想让Shell栏"卡住"到顶部，这意味着它不能成为单个页面的一部分，因为这也会掉出Shell栏，我必须将它包含在路由器管理的每个视图中。这也让人感觉"不对"。让Shell栏不成为根视图的一部分。

我尝试了不同的"钉"方法。把Shell栏放到我的视图的顶部，但是根据我不同的尝试，我最终得到了不同的结果，这些结果都不是我想要做的。

示例1(Shell栏是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栏，但是Page控件的一部分根本没有显示。我认为在聚合之外添加控件会破坏应用程序的控制。

示例2(壳条在壳外):

<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栏添加为Shell控件的子控件，但根据Shell控件的文档，这是不支持的，Shell控件只允许应用程序控件作为其子控件。

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

Answer 1

我是这样做的。

App.view.xml

<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns:f="sap.f" displayBlock="true" xmlns="sap.m" controllerName="cis.gp.controller.App" height="100%">
<Shell showLogout="false" appWidthLimited="false" >
<App busy="{appView>/busy}" busyIndicatorDelay="0" height="100%" autoFocus="false">
<Page id="app" class="sapMBrandingBar-CTX sapUiResponsivePadding--header sapUiResponsivePadding--content">
<customHeader>
<f:ShellBar title="{i18n>appTitle}">
<f:profile>
<Avatar src="sap-icon://sap-ui5" />
</f:profile>                    
</f:ShellBar>
</customHeader>
</Page>        
</App>
</Shell>
</mvc:View>

在你的清单路由中，

"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"async": true,
"viewPath": "kk.view",
"controlAggregation": "content",
"controlId": "app",
"clearControlAggregation": false
},

注意controlAggregation是'content'(因为现在Page是我们的根控件)