SAPUI5 (03) - 简单控件的使用

对于熟悉微软技术的人来说，OpenUI5 的控件比较容易理解，控件在页面上有不同的外观，实现了属性 ( properties )、方法 ( methods ) 和事件 ( events ) 。我们先来实现一个简单的功能，在页面上放置一个 sap.m.Button，当用户点击它的时候，弹出一个对话框，显示 “Hello” 字符串。

sap.m.Button 简介

• namesapce: sap.m
• Constructor: new sap.m.Button(sId?, mSettings?);
• setText(sText): 设置按钮的文本
• attachPress(fnFunction): 添加 Button 的事件处理程序 ( event handler)，当用户点击按钮时触发。

动手实践

在 Eclipse 中新建类型为 SAPUI5 Application Project 的项目，Project name 为 zsapui5_button。不勾选 initial view。新建完成后，编写
application area 的代码如下：

Java 风格代码 vs JSON风格代码

以上创建一个 sap.m.Button 对象的实例 oButton，用 setText() 方法设置文本，用 attachPress() 添加时间处理程序。这种写法被称为 Java
风格的代码，还有一种 Json 风格的代码在 JavaScript 用的更加普遍。
Json 风格的代码能少代码量，但代码结构比较复杂的时候，易读性也是一个问题。以下是同样的功能 Json 风格代码的实现：

事件处理器 (Event handler)

onButtonPressed 函数是一个 event handler，当用户点击按钮的时候，弹出一个对话框。但这个对话框中显示的字符串 Hello 是硬编码的。我们接下来把代码做两个改变，第一个改变，当用户点击的时候，显示按钮的text（也就是字符串Click me.)

我们知道，sap.m.Button.getText() 方法可以获得按钮的文本，但因为
oButton 是在函数 initialization 中，所以 onButtonPressed() 函数不能访问。所以，我们需要在 onButtonPressed 增加一个参数：

oEvent 参数是一个 event 对象，包含很多事件的的信息。比如，我们可以用oEvent.getSource() 得到是哪一个控件触发的事件。

第二个要做的改变就是通过 getSource() 方法，让多个控件共用 event handler。我们再页面上创建两个 Button，共用一个 event handler，当用户点击的时候，显示不同的的文本：

控件的 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 中父子控件的生命周期是独立的。