这一节使用了一个按钮控件，用Controller来处理按钮的press事件。首先修改App.view.xml
- 我们需要来指定连接这个view并且处理onShowHello事件的conroller的名字
controllerName这个view的属性这里同样使用了namespace。 - 通过对按钮对象属性的赋值来实现按钮
press="onShowHello"按钮点击时会触发onShowHello事件如果一个view只是用来display信息的话，是不需要创建Controller的，一旦显性的指定了Controller，在view被加载后就会实例这个Controller
新建一个App.controller.js
这里有点绕，咨询了一位会js的同学大致知道这它的意思是发布了这个代码，用户访问的时候会先把基础包加载，就相当于在客户端建立了一个执行环境，用于执行编写的这些代码，定义了就相当于执行，执行页面浏览器就会执行，这个就是基础包做的事情。
use strict声明函数使用严格模式，加上后会自动检测代码问题，详解可以自行百度JavaScript use strict- Controller和对应的view使用同样的名字（如果他们关系是1:1的话）
- event handler用前缀
on - Controller的名字始终以 *.controller.js 结尾
JavaScript 模块定义
这里很有必要解释一下JavaScript module的定义规范了，要不然这语法看的糊里糊涂的，虽然大概能知道是什么意思，但自己写起来也只能做简单的copy
AMD
全称是Asynchronous Module Definition，即异步模块加载机制，简单说AMD是JavaScript的一个规范标准，它完整的描述了模块的定义，依赖关系，引用关系及加载机制。
作为一个规范，只需定义其语法API，而不关心其实现，AMD规范简单到只有一个API，就是define函数：
define([module-name?],[array-of-dependecy?],[module-factory-or-object]);
- module-name: 模块标识，可以省略
- array-of-dependecy: 所依赖的模块，可以省略
- module-factory-or-object: 模块的具体实现或是一个JavaScript对象
从中可以看出前两个参数是可以省略的，第三个参数是模块的具体实现本身。（这时再回到上面图中看一下sap.ui.define是不是不晕了）
从AMD中的A Asynchronous 可以看出这个define具体的另一个性质：异步性。当define函数执行时，它首先会异步的去调第二个参数中的所依赖的模块，当所有模块完成加载以后，如果第三个参数是一个回调函数则执行，然后告诉系统模块可用，也就通知了自己所依赖的模块自己已经可用
WEBIDE实例：
下面是一个实例：
使用WEBIDE开发很方便的一点就是Layout Editor，如果用Layout Editor怎么做这个按钮功能呢，我们一起来做一遍：
- 新建一个index.html，基本架构出来123456789<html><head></head><body></body></html>
在head标签内加入meta``title
加入bootstrap。注意这里是写在script括号内的，这很容易出错，别问我怎么知道的
加入要初始化并放在<body>中xmlview实例,声明对应的viewName，这里是写在标签内的
最后修改<body>标签，加入id和class
index.html全部代码：
创建View
有了viewName就应该创建对应的View了,新建文件夹view，新建xmlview文件App .view.xml
敲入必要的namespace和指定对应的controller文件名1234567<mvc:Viewxmlns="sap.m"xmlns:mvc="sap.ui.core.mvc"controllerName="sap.ui.demo.wt.controller.App"></mvc:View>创建controller
相对应的新建文件夹controller，新建controller js文件App .controller.js
理一下思路，我们目的是要建一个有button的view，view上有按钮控件，controller就是为了控制view上的控件和数据，这里不涉及数据，我们就考虑控件，所以就需要在controller中写一个控制这个按钮的模块，就是按钮在被点击时的逻辑，也就是影响button的press事件。
我们使用sap.ui.define()来定义一个module,前面我们知道了定义module需要三部分，模块名，依赖模块，具体实现，OK，我们依次加入,下面应该很直观了12345678910111213sap.ui.define("modulename",["sap/ui/core/mvc/Controller"],function(Controller){;return Controller.extend("sap.ui.demo.wt.controller.App",{});});
然后加入我们最终要实现的function的内容，我们想定义一个onPress事件，用户点击时执行功能alert：
App.controller.js全部代码：
- 回头编辑View
这里我们用Layout Editor
拖一个按钮进来：
这里就可以通过修改控件的属性来达到想到的效果，比如这里分别改的按钮的宽度，文本，文本前加了图标，加了激活后的图标，就是点击后的图标
然后最关键的一眇就是关联事件，点击Events，在press那里找到我们刚在controller写的onPress
如果你点击后面的go to code按钮，会自动导航到controller文件中对应的代码位置，非常方便有木有
你想新建事件一个也没问题，press那里选new function:
确定后点go to code：很爽是吧
只需要关注要实现的功能就好，这里我加一个新的alert消息
代码有点乱，点这个，自动美颜
这里回头看一下view的代码,Layout Editor根据我们的设置自动生成了对应的代码123<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" controllerName="sap.ui.demo.wt.controller.App"><Button text="Click Me!" width="120px" id="__button1" activeIcon="sap-icon://accept" icon="sap-icon://activate" press="onPress1"/></mvc:View>
保存执行：
HTML xmlns 属性
xmlns 属性可以在文档中定义一个或多个可供选择的命名空间。该属性可以放置在文档内任何元素的开始标签中。该属性的值类似于 URL，它定义了一个命名空间，浏览器会将此命名空间用于该属性所在元素内的所有内容。
如果需要在一个 div 元素中显示一串数学公式，则可以为该 div 元素定义一个数学命名空间。比如这样：
如果您不希望在每次显示除法公式时都在 div 元素中定义 xmlns 属性，那么更好的办法是在文档的开头处定义具有前缀的命名空间：
然后，您就可以在 div 中使用该前缀了，就像这样：
