SAP UI5

fumingxia · 发表于 2015-9-19 10:59:47

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

账号		自动登录	找回密码
密码			立即注册

HERE 使用 AWS EF 和 JFrog Artifactory 打

wirelessnetview好用的无线分析工具

Red Hat RHCE 8 (EX294) Cert Guide

亿图图示专家(EDraw Max) V7.9 中文破解版

zabbix3.4.1安装部署+微信推送信息+大屏显

Red Hat OpenShift I: Containers & Kubern

2025 年，C++ 还能“硬核”多久？

[经验分享] SAP UI5

浏览过的版块

扫码加入运维网微信交流群