1. 背景
在前面的博客中，我们主要专注于SAPUI5程序的结构设计，在本篇博客中，让我们改善一下SAPUI5程序的外观。我们将使用sap.m库中的sap.m.Page控件和sap.m.Panel控件来让应用程序的屏幕元素更好地展示。
2. 控件学习
2.1 sap.m.App (应用程序的根控件)
sap.m.App是UI5移动应用的根元素，它常常作为是根容器，用来管理和导航不同的页面（sap.m.Page 或 sap.m.NavContainer）
- 可以通过
homeIcon属性，配置应用程序的主页图标 - 可以使用
backgroundColor和backgroundImage属性设置背景颜色和背景图像
在新开发的SAPUI5应用中，推荐使用
sap.m.App实现分屏效果（screen split）, 这个可以添加sap.f.FlexibleColumnLayout实现（之前，是通过sap.m.SplitApp实现）。
2.1 sap.m.Page （页面控件）
sap.m.Page是一个容器控件，用来承载应用程序的整个屏幕。页面有三个明显的区域可以容纳内容 - 页眉(headerContent) 、内容区域(content)和页脚(footer)。
- 页眉区域: 页面最上面的区域被header占据。标准header包括一个导航按钮和一个标题。或者，也可以通过
customHeader创建自定义的header。 - 内容区域: 内容占据了页面的主要部分。默认情况下，只有内容区域是可滚动的。可以通过将
enablesrolling设置为false来防止这种情况。 - 页脚区域：页脚占据了页面底部的固定部分。页脚也可以浮动在内容的底部之上（通过
floatingFooter属性来实现）。
在
sap.m.Page控件中，它提供了可以包含其它控件的区域(例如，在content区域添加button控件），这种允许在一个控件（Control）包含其他控件行为，称之为控件的聚合（Control Aggregation）。
2.2 sap.m.Panel（面板控件）
sap.m.Panel面板控件也是一个容器控件，用于分组和显示信息，它可以折叠以节省屏幕空间。
面板由带有标题文本或标题工具栏的标题栏(title bar)， 信息工具栏(info toolbar) 和内容区域(content area)组成。使用headerToolbar聚合，可以在标题栏内添加任何工具栏内容（即自定义按钮，间隔符，标题）。
有两种类型的面板：固定和可展开的。可展开的面板可以通过expandable 属性启用。此外，还可以使用expandAnimation属性定义展开动画。
指导方针： 不建议嵌套两个或更多面板。 不要在同一页上堆叠太多面板。
3. 练习
在之前练习的基础上，让我们使用页面和面板控件来美化我们的界面。
3.1 增强App.view.xml文件
- 将
<Input>和<Button>控件放置于<Panel>面板容器控件的<content>聚合中，并通过headerText属性设定面板的文本； - 将面板控件
<Panel>放置于<Page>控件的<content>聚合中，并通过title属性设定页面标题； - 将
<Page>控件放置于<App>控件的<pages>聚合中； - 此外，为了使视图的全屏高度正常，为视图添加了
displayBlock属性，值为true。
改动后的App.view.xml文件内容如下：
<mvc:View
controllerName="zsapui5.test.controller.App"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
displayBlock="true"
> <!--在视图中想要使用的库的命名空间列表-->
<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>
</mvc:View>
3.2 增强i18n.properties文件
在文本包文件中，为起始页面标题和面板添加了新的键值对。
更新后的i18n.properties文件内容如下：
# App Descriptor
appTitle=Hello World
appDescription=A simple app that explains the most important concepts of SAPUI5
# Hello Panel
showHelloButtonText=Say Hello
helloMsg=Hello {0}
homePageTitle=homePageTitle
helloPanelTitle=PanelTitle
3.3 运行程序
运行改动后的程序，其效果如下：
可以看到，相较于之前的例子，应用程序运行的页面上多了两个文本元素，分别展示了页面的标题和面板的标题。
通过ctrl + shift + alt + s打开调试工具，可以查看改动后应用程序的XML Tree视图：
通过这一视图，可以看到Page控件和Panel控件所对应的具体的屏幕区域。
4. 小结
本文介绍了SAPUI5中页面控件和面板控件的用法，并通过示例，展示了其运行效果。
