SAP UI5 - View&Controller

最新推荐文章于 2021-05-28 11:45:04 发布

weixin_30652879

最新推荐文章于 2021-05-28 11:45:04 发布

阅读量113

点赞数

文章标签： ui 测试 ux

原文链接：http://www.cnblogs.com/jerrylu/p/4415127.html

版权

接上一篇，上一篇我尝试了部署一个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     }

测试，成功。

转载于:https://www.cnblogs.com/jerrylu/p/4415127.html

weixin_30652879

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SAP UI5 - View&Controller

接上一篇，上一篇我尝试了部署一个UI5的项目到HCP上，成功访问了，发现去年折腾的时候创建了非常多的Application, 这次全部被我清除了。这次准备尝试下SAP UI5的View，研究下是如何工作的。首先由于创建项目时勾选了创建一个空的view, 因此部分文件和代码已经创建完了：在index.html中以下代码已经被创建出来了： 1 <!DOCTYPE HTML...
复制链接

扫一扫