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 的代码如下：

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