Step 12: Shell Control as Container

Step 12: Shell Control as Container

现在我们使用一个 shell 控件作为我们应用程序的容器，并将它用作我们新的根元素。 通过在桌面屏幕上引入所谓的信箱，外壳负责应用程序对设备屏幕尺寸的视觉适应。

webapp/view/App.view.xml

<mvc:View
	controllerName="sap.ui.demo.walkthrough.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>

shell 控件现在是我们应用程序的最外层控件，如果屏幕尺寸大于某个宽度，它会自动显示一个所谓的信箱(letterbox)。

还有更多选项可以自定义shell，例如设置自定义背景图像或颜色以及设置自定义徽标。 查看相关 API 参考以获取更多详细信息。

vx:xiaoshitou5854