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负责数据的获取。

下次尝试Controller处理事件响应


  

时间: 2024-10-28 20:12:47

SAP UI5的相关文章

HTML5开发移动web应用——SAP UI5篇(9)

之前我们对于app的构建都是基于显示的,现在我们来格式化一下,引入更多的SAP UI5组件概念.这使得APP的一个界面更有层次性,更像是一个手机应用的界面,并且更好地使用SAP UI5中提供的功能.每个不同的层次都有不同的功能. 首先修改App.view.xml文件代码: <mvc:View controllerName="sap.ui.demo.wt.controller.App" xmlns="sap.m" xmlns:mvc="sap.ui.c

OPEN(SAP) UI5 学习入门系列之一:扫盲与热身(上)

什么是SAP Fiori? 了解SAP UI5必须要从SAP Fiori开始,两者概念经常被混淆,而两者也确实有着非常紧密的关系. 用过SAP的同学们都对SAP的传统的界面(SAP GUI)表示"呵呵",其实传统的SAP GUI的界面功能还是很强大的,但是对于一个新用户来说,学会使用这套界面就需要花上一两 周的时间,所以SAP入门的第一步就是学会使用SAP GUI.此外,传统的SAP GUI只能在Windows和Mac上使用,对于移动端用户没有直接的解决方案,WEBGUI的体验也非常不

HTML5开发移动web应用——SAP UI5篇(8)

本次对之前学习的SAP UI5框架知识进行简单小结.以及重点部分知识的梳理. 1.在UI5使用过程中,命名空间的概念非常重要. 2.一般的sap组件引用格式例如以下: sap.ui.define([ "sap/ui/core/UIComponent", "sap/ui/model/json/JSONModel", "sap/ui/model/resource/ResourceModel"], function (UIComponent, JSON

HTML5开发移动web应用——SAP UI5篇(7)

SAPUI5中支持利用Component对组件进行封装.想封装一个组件,Component的基本代码例如以下: sap.ui.define([ "sap/ui/core/UIComponent"], function (UIComponent) { "use strict"; return UIComponent.extend("", { init : function () { // call the init function of the

OPEN(SAP) UI5 学习入门系列之二: 最佳实践练习之一

这篇博文难产了很久,原来是打算一周更新一篇的,上周原计划写MVC,但是写了一半,发现带入了太多的细节,不太符合这个入门系列的主题. 当我们学习一个新的技能的时候,如果一开始就面对大量的细节,很容易陷入其中而只见树木不见森林,所以最后我想我们还是先按照开发文档的节奏,一起来做UI5的最佳实践练习.在练习中对常用的一些控件以及API有一个直观的感受,如果需要细节的信息再去查文档. 这个最佳实践练习的子系列又会分为若干篇,但是不会完全按照Tutorial里面的章节来分,因为我希望每一篇都是都是一个完整

SAP UI5 之 HELLO WORLD

去年八月份的时候 鼓捣过一次UI5以及SAP HCP, OData之类的东西,很多东西都已经忘记了,这次工作需要,需要重新学习UI5相关的东西,准备记录下来,方便以后回顾. 先尝试写一个HELLO WORLD,并准备部署到HCP上,开发IDE采用 eclipse+sublime, eclipse中插件在去年已经装过了..因此开发环境大体上搭建完成了. 1. eclipse中右击新建一个SAPUI5 Application Project. 默认生成一个JavaScript的View, 命名为My

在Kubernetes上运行SAP UI5应用(下): 一个例子体会Kubernetes内容器的高可用性和弹性伸缩

上一篇文章 在Kubernetes上运行SAP UI5应用(上),我介绍了如何在Docker里运行一个简单的SAP UI5应用,并且已经成功地将一个包含了这个UI5应用的docker镜像上传到Docker hub上. 这篇文章作为这个主题的下半部分,将会介绍如何在Kubernetes里运行这个docker镜像. 文章目录 Kubernetes里的两个重要概念:pod和deployment Kubernetes保证应用程序高可用性和伸缩性的一些体验 Kubernetes滚动升级(Rolling U

SAP UI5和微信小程序对比之我见

今天继续由SAP成都研究院著名的菜园子小哥Wang Cong,给大家分享他作为一个SAP前端人员是如何看待SAP UI5和微信小程序的异同点的. 关于Wang Cong种菜的手艺,大家请移步到他以前的文章 SAP成都研究院非典型程序猿,菜园子小哥:当我用UI5诊断工具时我用些什么 去观摩,这里不再赘述. 下面是他的正文. 近几年微信小程序发展之势如火如荼,越来越多的用户放弃原生App,转而投入小程序的怀抱,大有"一个微信行天下"的趋势. 面对如此巨大的流量机遇,百度.阿里等公司也纷纷在

有选择性的启用SAP UI5调试版本的源代码

在低版本的SAP UI5应用中,我们一旦切换成调试模式,那么应用程序源代码和UI5框架程序的源代码的调试版本都会重新加载,耗时很长. 我最近发现UI5新版本1.66.1提供了选择性加载调试版本的源代码的选项,即下图中的Select Specific modules: 如果确认问题出在我们应用程序,只想调试自己编写的应用代码,那么我们可以只切换应用程序成为调试版本,这样速度大大提高. 此时浏览器地址栏里看到的参数为sap-ui-debug=dis/#, 意思是仅仅disnamespace下的所有资