第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步:可访问性
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值