对于熟悉微软技术的人来说，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 的代码如下：
<script>
var onButtonPressed = function() {
alert("Hello!");
};
function initialization() {
var oButton = new sap.m.Button();
oButton.setText("Click me.");
oButton.attachPress(onButtonPressed);
oButton.placeAt("content");
};
sap.ui.getCore().attachInit(initialization);
</script>
Java 风格代码 vs JSON风格代码
以上创建一个 sap.m.Button 对象的实例 oButton，用 setText() 方法设置文本，用 attachPress() 添加时间处理程序。这种写法被称为 Java
风格的代码，还有一种 Json 风格的代码在 JavaScript 用的更加普遍。
Json 风格的代码能少代码量，但代码结构比较复杂的时候，易读性也是一个问题。以下是同样的功能 Json 风格代码的实现：
<script>
var onButtonPressed = function() {
alert("Hello!");
};
function initialization() {
var oButton = new sap.m.Button({
text: "Click me.",
press: onButtonPressed
});
oButton.placeAt("content");
};
sap.ui.getCore().attachInit(initialization);
</script>
事件处理器 (Event handler)
onButtonPressed 函数是一个 event handler，当用户点击按钮的时候，弹出一个对话框。但这个对话框中显示的字符串 Hello 是硬编码的。我们接下来把代码做两个改变，第一个改变，当用户点击的时候，显示按钮的text（也就是字符串Click me.)
我们知道，sap.m.Button.getText() 方法可以获得按钮的文本，但因为
oButton 是在函数 initialization 中，所以 onButtonPressed() 函数不能访问。所以，我们需要在 onButtonPressed 增加一个参数：
<script>
var onButtonPressed = function(oEvent) {
oText = oEvent.getSource().getText();
alert(oText);
};
function initialization() {
var oButton = new sap.m.Button({
text: "Click me.",
press: onButtonPressed
});
oButton.placeAt("content");
};
sap.ui.getCore().attachInit(initialization);
</script>
oEvent 参数是一个 event 对象，包含很多事件的的信息。比如，我们可以用oEvent.getSource() 得到是哪一个控件触发的事件。
第二个要做的改变就是通过 getSource() 方法，让多个控件共用 event handler。我们再页面上创建两个 Button，共用一个 event handler，当用户点击的时候，显示不同的的文本：
<script>
var onButtonPressed = function(oEvent) {
var sId = oEvent.getSource().getId();
if (sId == "btn1") {
alert("Hello from Button1");
}
if (sId == "btn2") {
alert("Hello from Button2");
}
};
function initialization() {
var oButton1 = new sap.m.Button("btn1", {
text: "Button 1",
press: onButtonPressed
});
var oButton2 = new sap.m.Button("btn2", {
text: "Button 2",
press: onButtonPressed
});
oButton1.placeAt("content");
oButton2.placeAt("content");
};
sap.ui.getCore().attachInit(initialization);
</script>
控件的 Aggregation 和 Association
简单控件独立存在，但界面上控件有时还要以某种关系存在。第一种关系是 包含关系 。比如容器控件中包含其他控件，又比如
radioButtonGroup 包含若干个 radioButton 。这种关系中的控件分别称为父控件 ( parent control ) 和子控件 ( child control ) 。父控件对其它控件的参照称为聚合 ( aggregation )。
Aggregation 关系中，各个子控件的生命周期依赖于父控件，当父控件销毁的时候，子控件也被销毁。另外，子控件不使用 placeAt() 方法放在
DOM 对象中，而是利用父控件的方法添加到父控件的集合中，由父控件来渲染。下面使用 radioButtonGroup和 radioButton 说明聚合关系：
<script>
function initialization() {
var oLabel = new sap.m.Label({text: "Do you like basketball?"});
var oRadioBtn1 = new sap.m.RadioButton({text: "Yes"});
var oRadioBtn2 = new sap.m.RadioButton({text: "No"});
var oRadioBtnGrp = new sap.m.RadioButtonGroup({columns: 2});
oRadioBtnGrp.addButton(oRadioBtn1);
oRadioBtnGrp.addButton(oRadioBtn2);
oLabel.placeAt("content");
oRadioBtnGrp.placeAt("content");
};
sap.ui.getCore().attachInit(initialization);
</script>
radioButtonGroup 有 addButton() 方法，将 radioButton 添加到radioButtonGroup 中。运行的界面如下：
第二种关系叫做 association，指一个控件参照到另外一个控件。我们刚才的例子中，label 和 radioButtonGroup 是完全独立的，而按照 web设计的 ARIA 兼容原则 ( ARIA: Accessible Rich Internet Applications )，这两个控件应该关联起来。通过查看 radioButtonGroup 的 API，可以设置 ariaLabelledBy 属性：
代码如下：
<script>
function initialization() {
var oLabel = new sap.m.Label({text: "Do you like basketball?"});
var oRadioBtn1 = new sap.m.RadioButton({text: "Yes"});
var oRadioBtn2 = new sap.m.RadioButton({text: "No"});
var oRadioBtnGrp = new sap.m.RadioButtonGroup({
columns: 2,
ariaLabelledBy: oLabel});
oRadioBtnGrp.addButton(oRadioBtn1);
oRadioBtnGrp.addButton(oRadioBtn2);
oLabel.placeAt("content");
oRadioBtnGrp.placeAt("content");
};
sap.ui.getCore().attachInit(initialization);
</script>
和 Aggregation 不同的是，Association 中父子控件的生命周期是独立的。
