Fiori学习专题十三：Shell Control as Container

为了进一步美化界面，这节课我们引入Margins and Paddings也就是边距和填充，我们使用SAPUI5提供的标准类来美化界面。
1.修改App.view.xml

<mvc:View
	controllerName="ui5.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}"
							class="sapUiResponsiveMargin"
							width="auto">
							<content>
								<Button
									text="{i18n>showHelloButtonText}"
									press=".onShowHello"
									class="sapUiSmallMarginEnd"/>
								<Input
									value="{/recipient/name}"
									valueLiveUpdate="true"
									width="60%"/>
								<Text
									text="Hello {/recipient/name}"
									class="sapUiSmallMargin"/>
							</content>
						</Panel>
					</content>
				</Page>
			</pages>
		</App>
	</Shell>
</mvc:View>

在Panel控件中，我们添加了CSS类sapUiResponssiveMargin，它会在Panel控件周围预留出一些空间。同时我们必须将面板的宽度设置为自动，否则边距将被添加到默认的100%宽度并超过页面大小。
如果减小屏幕大小，那么你实际上可以看到边距也会减小。顾名思义，边距是响应式的，可以适应设备的屏幕大小。平板电脑将获得较小的边距，而处于纵向模式的手机将不会获得边距来节省这些小屏幕上的空间。
边距可以添加到各种控件中，并且有许多不同的选项。我们甚至可以通过向按钮添加类sapUiSmallMarginEnd来在按钮和输入字段之间添加空间。
为了单独格式化输出文本，我们从输入字段中删除描述，并添加一个具有相同值的新text控件。在这里，我们还使用了一个小边距来将其与其他内容对齐。同样，我们可以添加标准填充类来布局容器控件（如我们的面板）的内部，但由于默认情况下它已经带来了填充，因此这里不需要这样做。 英语实在是水平有限，大家将就看，或者直接阅览官方教程。

2.执行npm start可以看到效果！