Walkthrough-step5 Controllers

这节的示例是页面中一个按钮，点击后相应的事件响应
上节升级了本地库，所以index.html中的 data-sap-ui-oninit属性就可以用了
这一节使用了一个按钮控件，用Controller来处理按钮的press事件。首先修改index.html，增加data-sap-ui-oninit属性，删除第2个<script>标签

** webapp/index.html
新建 ** index.js 文件
** webapp/index.js **

sap.ui.define(
	["sap/ui/core/mvc/XMLView"],
	function(XMLView) {
		"use strict";
		XMLView.create({
			viewName: "Step5_Controllers.view.App1"
		}).then(function(oView){
			oView.placeAt("content");
		});
	}
);

这个index.js文件就是从安全角度考虑加了一层，满足了CSP要求。

webapp/view/App1.view.xml

<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="Step5_Controllers.controller.App1"
	xmlns:html="http://www.w3.org/1999/xhtml">
	<App>
		<pages>
			<Page title="Title">
				<content>
					<Button
						text="Say Hello"
						press="onShowHello"/>
				</content>
			</Page>
		</pages>
	</App>
</mvc:View>

这里的view是通过上节的向导自动生成的，我们只是加了

					<Button
						text="Say Hello"
						press="onShowHello"/>

向导的好处是会自动生成对应的controller文件夹和文件，我们只需要添加要写的事件代码就可以，但注意一定要把命名空间写对了，页面上增加了一个Button控件，指定text属性和press的响应事件，事件在哪里响应呢，就是MVC中的C Controller，Controller和view一样，创建里需要注意几点：

• 所有的controller都要放在controller文件夹中
• controller的命名规则 *.controller.js
• 注意大小写

** webapp/controller/App.controller.js **中添加事件代码

		onShowHello : function (){
			alert("hello World");
		}

添加控件更简单的办法是使用layout Editor，但这个不建议初学者，所有的代码能手写还是手写，加深对代码的理解。