Walkthrough-Step11 Pages and Panels

这一节开始加入更多的页面控件，控件的用法在官方的API Reference中可以看到很详细的说明，只要学会怎么去查API还有控件之间的关系和限制，就是控件的aggregations

因为之前是通过向导创建的XML View，自动创建的代码中已经有了Pages和Page标签，再加一个Panel 来对比差别

<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:html="http://www.w3.org/1999/xhtml"
	controllerName="Step11_PagesPanels.controller.App">
	<App>
		<pages>
			<Page title="{i18n>homePageTitle}">
				<content>
					<Panel headerText="{i18n>panelTitle}">
						<content>
							<Button text="ClickMe" width="100px" id="__button0" press="onClickMe"/>
							<Input width="200px" id="__input0" value="{aaa>/recipient/name}" description="Hello {aaa>/recipient/name}" valueLiveUpdate="true"/>
							<Text id="__text0" text="{i18n>newText}"/>
						</content>
					</Panel>
				</content>
			</Page>
		</pages>
	</App>
</mvc:View>

控件

下面copy自SAP网站内容的翻译，详细内容，请参看https://openui5.hana.ondemand.com/#/topic/91f0a22d6f4d1014b6dd926db0e91070

• 控件名(name)
  控件名格式“库名”.“控件名”唯一标识控件。
• 控件元数据(metadata)
  元数据定义控件的属性Properties、事件Events、聚合Aggregation和关联Associations。
  属性Properties
  一般是用来改变控件的显示，比如宽度文本之类的，控件由控件元数据定义，它是控件的公共API。应用程序可以在运行时使用该API，它还包含有关运行时特性(如数据绑定和类型验证检查)的信息。
  聚合Aggregations
  控件可以聚合(Aggregations)其他控件。这些带有聚合的控件充当容器或布局控件，应用程序可以将子控件添加到其中。如果控件本身添加子控件并重用可用组件，它们还可以作为组合控件。在聚合中，子控件由父控件拥有，并与父控件一起销毁。控件只能有一个父聚合。将控件添加到另一个聚合中会将其从前一个父控件中移除。
  关联Associations
  关联(Associations)控件不是聚合控件的一部分或子控件。它们通过ID而不是引用连接。销毁关联中的控件不会影响其他控件。关联控件可能还不存在或不再存在。
  控件触发事件(Events)。事件通常与控件的目的和功能相关，并且它比浏览器事件(如click)有更高的级别。比如一个搜索字段的triggerSearch事件或是Panel控件的折叠事件。
• 控件元素(Elements)
  元素（Elements）是控件的部件，或者更确切地说，是控件部件的配置包。元素不能单独使用，也没有自己的呈现程序。相反，使用该元素的控件进行呈现:例如，ListBox控件呈现ListItem元素。控件提供的信息也适用于元素，但不适用于呈现程序。sap.ui.core.element是sap.ui.core.Control的基类。

这个属性很重要，它说明了在此控件下可以有多少个子控件，比如content可以有0到多个，footer就最多只能有1个。

下面是转载其它blog里的内容，更方便理解：

控件的 Aggregation 和 Association
简单控件独立存在，但界面上控件有时还要以某种关系存在。第一种关系是 包含关系 。比如容器控件中包含其他控件，又比如
radioButtonGroup 包含若干个 radioButton 。这种关系中的控件分别称为父控件 ( parent control ) 和子控件 ( child control ) 。父控件对其它控件的参照称为聚合 ( aggregation )。

Aggregation 关系中，各个子控件的生命周期依赖于父控件，当父控件销毁的时候，子控件也被销毁。另外，子控件不使用 placeAt() 方法放在
DOM 对象中，而是利用父控件的方法添加到父控件的集合中，由父控件来渲染。下面使用 radioButtonGroup和 radioButton 说明聚合关系：

radioButtonGroup 有 addButton() 方法，将 radioButton 添加到radioButtonGroup 中。运行的界面如下：

第二种关系叫做 association，指一个控件参照到另外一个控件。我们刚才的例子中，label 和 radioButtonGroup 是完全独立的，而按照 web设计的 ARIA 兼容原则 ( ARIA: Accessible Rich Internet Applications )，这两个控件应该关联起来。通过查看 radioButtonGroup 的 API，可以设置 ariaLabelledBy 属性：

和 Aggregation 不同的是，Association 中父子控件的生命周期是独立的。

作者：stone0823
原文：https://blog.csdn.net/stone0823/article/details/53846160