SAP UI5
接上一篇，上一篇我尝试了部署一个UI5的项目到HCP上，成功访问了，发现去年折腾的时候创建了非常多的Application, 这次全部被我清除了。这次准备尝试下SAP UI5的View， 研究下是如何工作的。
首先由于创建项目时勾选了创建一个空的view, 因此部分文件和代码已经创建完了：
在index.html中 以下代码已经被创建出来了：
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta http-equiv="X-UA-Compatible" content="IE=edge">
5 <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
6
7
8 <script src="resources/sap-ui-core.js"
9 id="sap-ui-bootstrap"
10 data-sap-ui-libs="sap.ui.commons"
11 data-sap-ui-theme="sap_bluecrystal">
12 </script>
13 <!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->
14
15 <script>
16 sap.ui.localResources("ui5_view");
17 var view = sap.ui.view({id:"idMyView1", viewName:"ui5_view.MyView", type:sap.ui.core.mvc.ViewType.JS});
18 view.placeAt("content");
19 </script>
20
21 </head>
22 <body class="sapUiBody" role="application">
23 <div id="content"></div>
24 </body>
25 </html>
其中 sap.ui.localResources("ui5_view") 我理解为加载同一目录下的ui5_view文件夹下的内容，
var view = sap.ui.view({id:"idMyView1", viewName:"ui5_view.MyView", type:sap.ui.core.mvc.ViewType.JS});
可以理解这段代码生成一个View， 但是在UI5的API中 并没有查到sap.ui.view这样的控件，非常不理解UI5是如何处理的(TODO)
回到MyView.view.js文件中，这就是项目生成的view，也就是上面引用到的view.
代码文件如下：
1 sap.ui.jsview("ui5_view.MyView", {
2
3 /** Specifies the Controller belonging to this View.
4 * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
5 * @memberOf ui5_view.MyView
6 */
7 getControllerName : function() {
8 return "ui5_view.MyView";
9 },
10
11 /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
12 * Since the Controller is given to this method, its event handlers can be attached right away.
13 * @memberOf ui5_view.MyView
14 */
15 createContent : function(oController) {
16
17 }
18
19 });
根据注释，createContent 在控件初始化的时候会被自动调用，可以用来返回HTML代码，我理解是这边可以定义很多UI5的控件，比如返回一个button.
1 createContent : function(oController) {
2 var oButton = new sap.ui.commons.Button(
3 "IdButton",
4 {
5 text: "MyButton",
6 enabled: true,
7 icon: "sap-icon://add",
8 press:function(){
9 //event handler
10 }
11 });
12 return oButton;
13 }
部署到HCP上后访问效果如下：
成功。
姑且以为：SAP UI5采用的MVC的模式， View负责控件的布局， 展示， Controller负责事件响应，Model负责数据的获取。
现在在view.js， button的press事情中添加响应方法：
1 press:function(){
2 oController.onClick();
3 }
这句代码绑定button的press事件处理方法为controller中的onClick方法。
然后在Controller.js中声明onClick方法：
1 onClick: function(){
2 alert ("HELLO JERRY");
3 }
测试，成功。
页:
[1]