SAPUI5基础知识14 - 壳容器（Shell控件）

1. 背景

为了让SAPUI5程序在不同尺寸的屏幕上显示得更好，在本篇博客中，我们将介绍sap.m.Shell控件。

2. 控件学习

2.1 sap.m.Shell

在SAPUI5应用程序中，sap.m.Shell控件通常被用作应用程序的顶级容器。它的主要目的是提供一个全屏的应用框架，以便在其中放置和管理其他的SAPUI5控件，如sap.m.App或sap.m.SplitApp等，这些控件提供了内置的导航和布局功能。例如，sap.m.App控件支持页面之间的导航，而sap.m.SplitApp控件则支持在大屏幕设备上使用分割视图。

总的来说，此控件负责应用程序的视觉适应性, 在大屏幕上，可以应用letterboxing来避免应用程序布局的拉伸。此外，sap.m.Shell还可以配置应用程序的主题、语言等设置。

3. 练习

让我们在上一篇博客练习的基础上，添加Shell控件。

3.1 增强App.view.xml文件

将<App>控件放置于<Shell>控件中(Shell的默认聚合<app>可省略)；

效果如下：

改动的代码如下：

<mvc:View
    controllerName="zsapui5.test.controller.App"
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc"
    displayBlock="true"
>
    <!--在视图中想要使用的库的命名空间列表-->
    <Shell>
        <App>
            <pages>
                <Page title="{i18n>homePageTitle}">
                    <content>
                        <Panel headerText="{i18n>helloPanelTitle}">
                            <content>
                                <Button
                                    text="{i18n>showHelloButtonText}"
                                    press=".onShowHello"
                                />
                                <Input
                                    value="{/recipient/name}"
                                    description="Hello {/recipient/name}"
                                    valueLiveUpdate="true"
                                    width="60%"
                                />
                            </content>
                        </Panel>
                    </content>
                </Page>
            </pages>
        </App>
    </Shell>
</mvc:View>

经过上面的调整，壳控件是应用程序的最外层控件，并且在屏幕尺寸大于一定宽度时自动显示所谓的信封（letterbox）。

注意: 如果应用程序云心在external shell中，例如SAP Fiori Launchpad，我们则不需要将外壳控件添加到应用程序的XML视图中。

对于壳容器的其它属性，例如设置背景图片或颜色，以及设置自定义标志等。查看相关的API参考获取更多详情。

3.2 运行程序

运行效果同之前博客中的效果相同：

通过ctrl + shift + alt + s打开调试工具，可以查看改动后应用程序的XML Tree视图：

在层级关系图上，可以看到新添加的Shell控件。

4. 小结

本文介绍了SAPUI5中的壳容器，并通过一个例子，展示了其用法。