接上一篇,上一篇我尝试了部署一个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负责数据的获取。
下次尝试Controller处理事件响应
时间: 2024-10-28 20:12:47