第12步:Shell控件作为容器

预览

应用程序现在在一个限制应用程序宽度的shell中运行

代码

你可以在演练-第12步查看和下载所有文件。

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控件现在是我们的应用程序的最外层的控件，如果屏幕尺寸大于一定的宽度，它会自动显示一个所谓的“信箱”。

注意
如果应用程序在外部Shell中运行，比如SAP Fiori launchpad已经在组件UI周围有了一个Shell，那么我们就不会将Shell控件添加到XML视图中的声明性UI定义中。

还有其他定制外壳的选项，比如设置自定义背景图像或颜色，以及设置自定义logo。查看相关API参考以获得更多细节。

章节

1. 第1步:你好世界
2. 第2步:引导
3. 第3步:控件
4. 第4步:XML视图
5. 第5步:控制器
6. 第6步:模块
7. 第7步:JSON模型
8. 第8步:可翻译的文本
9. 第9步:组件配置
10. 第10步:应用程序描述符
11. 第11步:页面和面板
12. 第12步:Shell控件作为容器
13. 第13步:外边距和内边距
14. 第14步:自定义CSS和主题颜色
15. 第15步:嵌套视图
16. 第16步:对话框和片段
17. 第17步:片段回调
18. 第18步:图标
19. 第19步:重用对话框
20. 第20步:聚合绑定
21. 第21步:数据类型
22. 第22步:表达式绑定
23. 第23步:自定义格式器
24. 第24步:过滤
25. 第25步:排序和分组
26. 第26步:远程OData服务
27. 第27步:模拟服务器配置
28. 第28步:使用QUnit进行单元测试
29. 第29步:与OPA的集成测试
30. 第30步:调试工具
31. 第31步:路由和导航
32. 第32步:路由与参数
33. 第33步:路由回溯和历史
34. 第34步:自定义控件
35. 第35步:响应性
36. 第36步:设备适应
37. 第37步:内容密度
38. 第38步:可访问性