Skip to Content

第一章 通过OData暴露和消费数据的基础架构

这章的内容很简单。在开始体验开发之前,回顾了一下第一章所提到过的传统软件开发架构和使用XS架构的区别。值得记下来的是ICM是整个架构的一部分。SAP internet communication manager(ICM)http://help.sap.com/saphelp_nw73/helpdata/en/48/039d48c0070c84e10000000a42189c/content.htm?frameset=/en/48/7f28a10fa44cdbe10000000a42189d/frameset.htm 存在于整个Netweaver架构中很久了,在整个平台不叫netweaver而称为web AS的时候就存在了。它是应用服务器与外部HTTP请求交互的一个接口。比如我们熟知的webdynpro for ABAP,就是通过ABAP -> ICF -> ICM这样的层层配置转换实现的。当然ICM也是Netweaver JAVA的一部分,并且SAP自己的http负载均衡实现web disptatcher也是基于ICM的。

ICM之下是XS引擎,它与index server交互。index server是整个HANA的核心,其它的HANA服务基本都负责类似统计信息,节点的管理之类的任务,而真正的内存内计算是通过index server实现的(当然,熟悉TREX/BWA的一定对这个名字不陌生)。目前数据在XS引擎和index server之间还需要做传递,会损失一部分性能,但是由于一切都在同一个OS内进行,这种数据的传递也是高效的。

19

第二章 SAPUI5

这一章的内容其实很多很复杂,因为这涉及到开发HANA XS应用的展现层,而现在所有的应用都前所未有地重视UI UX,包括SAP。但是我本人并不想花太多精力在这上面。我的关注点是HANA。HANA本身已经在2年内发展的太快,有太多新的内容产生,而UI开发并不是我的长处,写JS/AJAX的经历那几乎要回到很多年以前。如果有机会参与到HANA XS应用开发项目中,还是将这些交给更专业的web前端攻城狮吧。:)

SAPUI5,以前的开发代号叫凤凰,是专门针对现在的应用趋势开发的最新的UI框架:移动、HTML5、UX 你可以在这了解到大部分信息,如果你想专注于SAPUI5开发 http://scn.sap.com/community/developer-center/front-end

24

SAP以前有一个自己的JS框架,完全自己开发的,叫做unified rendering light speed http://help.sap.com/saphelp_nw70ehp1/helpdata/en/74/0beccf62a7425ab9e1b2077fa1bc6e/content.htm。之所以叫做unified rendering是因为在HTML5 MOBILITY这些还没有充斥这个世界的时候,SAP将UR LS作为统一的JS框架被所有跟WEB有关的产品使用。比如ITS WEBGUI、BW Web analyzer、BSP等,虽然UR的产生是源于webdynpro。但是有时候IT领域变化太快,进化不如革命,我相信这是又一个SAP JS框架产生的原因。但是,好在我们以前不必了解UR,没人基于UR开发应用,我们基于使用UR的应用,比如webdynpro。而SAPUI5是完全提供给SAP开发者的,不仅供SAP内部使用。

另外,SAP近年来终于开始拥抱开源社区。无论是前端产品的eclipse化,还是SAPUI5都能看到这种趋势。SAPUI5的核心是JQuery,除此以外还融合了:

OData http://www.odata.org/

LESS http://lesscss.org/

D3.js http://d3js.org/

ARIA http://www.w3.org/WAI/intro/aria

真是一个大融合方案 http://scn.sap.com/docs/DOC-31625 。从我个人的观点,我很高兴看到这样的改变。因为无论自己labs的研发团队多强大也没法在各个领域都是第一,开源社区的智慧是无穷的。

34

SAPGUI5使用的时候可以选择渲染的目标是desktop还是mobile。这基于你的应用需求和选择。

43

HANA SPS05版本开始,就内置了SAPUI5框架,我们可以通过访问hostname:port/sap/ui5/1/sdk/index.html来访问内置的文档,包括developer guide和示例代码。

53

最后,SAPUI5的开发环境是基于eclipse的。所以我们可以在一个开发工具里开发HANA模型,XS应用,ABAP和SAPUI5等。在后面的章节会有详细介绍。

第三章 使用SAPUI5创建UI

本章内容并没有包含SAPUI5的安装部分。所以首先我们安装SAPUI5的eclipse插件。SAPUI5可以从http://scn.sap.com/community/developer-center/front-end 下载到。而安装文档可以从SAP NOTE1747308找到。因为我是安装在HANA Studio里,所以我要安装SAPUI5插件依赖的一些其他插件包。这些可以从安装文档的prerequsite一节找到。不过在我的安装中遇到了一些麻烦,因为我使用的HANA Studio rev55而且我又安装了abap development插件,所以有很多冲突。如果想安装一个真正集成化的开发环境,这是一个问题。目前我还没有找到任何文档,类似PAM那种,提示不同SAP插件之间的版本兼容性。 最后我使用了SAP的update site,在线安装了最新的build。

插件安装好了以后,就多了一个创建选项:SAPUI5 application development 按照向导创建成功以后,会默认创建以下对象

WebContent文件夹,这下面放置要开发的js文件

index.html 引导文件,这里面初始化了要加载的SAPUI5库文件。

SAPUI5的viewer和controller js文件。SAPUI5是一个MVC的框架,所以熟悉MVC的应该不陌生这些概念。viewer里面编写创建可视化组件的逻辑,也就是跟展示相关的。controller里是对view视图响应的一些事件处理函数。而因为SAPUI5是一个前端框架,所以模型一般是一个代理对象,连接后端的数据源,比如netweaver gateway或者HANA。

63

项目创建成功后,首先我们要更改引导文件index.html,因为SAPUI5可以用在很多场合,比如HANA或者netweaver,SAPUI5并没法判断客户到底想基于什么后端开发,而不同的后端SAPUI5 js库文件的位置是不同的。修改script标签的src,指向HANA SAPUI5 js库文件的位置 <script src=”/sap/ui5/1/resources/sap-ui-core.js”

viewe文件源代码,js攻城狮们研究去吧

sap.ui.jsview(”sapui5.HelloWorld”, {

getControllerName : function() {

return “sapui5.HelloWorld”;

},

createContent : function(oController) {

var myButton = new sap.ui.commons.Button(”btn”);

myButton.setText(”Hello World”);

myButton.attachPress(function(){$(”#btn”).fadeOut();});

return myButton;

}

});

之后共享这个SAPUI5项目,如我们在之前创建HANA开发项目一样。只不过我们可以指定一个package,而这个package可以是之前创建的HANA开发项目的一个文件夹。

我在这里最开始指向了一个空的package,结果没法运行SAPUI5项目。还记得我们在创建HANA项目时创建的.xsapp文件么,它告诉HANA这是个XS应用。所以没有了它,HANA不知道这是XS应用,自然也就不会运行在XS引擎上。所以我将package改为指向HANA项目的ui文件夹,index.html可以正常运行了!

73

第四章 OData

OData http://www.odata.org/ 感兴趣的同学可以自己在官网了解更多。这是与webservice相比更轻量级的RESTFul的通讯协议。SAP的Neweaver Gateway http://scn.sap.com/community/netweaver-gateway就是SAP以OData形式暴露后端业务数据的一个组件。SAPUI5提供的是方便的数据绑定功能,也就是将前端展示组件绑定到后端暴露的OData服务上。基于OData的开发流程如下,在接下来的几章,就会按照这样的顺序实现SAPUI5+HANA Odata的开发。

82

第六章 创建一个简单地OData服务

SAP HANA SPS05有很多新功能,而其中一个重要的功能就是能够将HANA数据以OData的形式暴露。怎么做?我想如果大家可能都猜到了,通过.xsodata文本文件就可以暴露一个OData服务。

service namespace “workshop.services” {

“SAP_HANA_EPM_DEMO”.”sap.hana.democontent.epm.data::businessPartner”

as “BusinessPartners”;

}

同样,我想未来SAP HANA Studio应该提供对这些功能的更好支持,而不是用文本文件的形式让开发者编写。

在激活xsodata文件后就可以从URL访问HANA的数据了,比如: http://……/services/businessPartners.xsodata/BusinessPartners/?$format=json

93

第七章 创建复杂的OData服务

上一章的利用OData暴露的数据是简单的一张表,但是实际应用开发中数据模型要复杂得多。关于如何定义OData service,大家可以参考HANA开发者手册http://help.sap.com/hana_platform#section5,我就不在这里赘述了。

第八章 从用户界面调用OData服务

我们准备创建一个表格控件,绑定后端HANA的一个OData服务器,展示数据。

首先修改html文件,引入table控件库

<script src=”/sap/ui5/1/resources/sap-ui-core.js”

id=”sap-ui-bootstrap”

data-sap-ui-libs=”sap.ui.commons,sap.ui.table”

data-sap-ui-theme=”sap_goldreflection”>

然后是构建是在view里构建整个table。因为只是演示,所以所有代码都写在了view里。

Js代码

  1. createContent : function(oController) { 
  2. //Insert oData Model Here 
  3. <strong>var oModel = new sap.ui.model.odata.ODataModel(”../../../services/businessPartners.xsodata/”, false);</strong> 
  4. //To-Do: Place Code Here 
  5. var arrayHeaders = new Array(); 
  6. var oControl; 
  7. oTable = new sap.ui.table.Table(”test”,{tableId: “tableID”, 
  8. visibleRowCount: 10}); 
  9. oTable.setTitle(”Business Partners”); 
  10. //Table Column Definitions 
  11. oControl = new sap.ui.commons.TextField().bindProperty(”value”,”PartnerId”); 
  12. oTable.addColumn(new sap.ui.table.Column({label:new sap.ui.commons.Label({text:”Partner ID”}), template: oControl, sortProperty: “PartnerId”, filterProperty: “PartnerId”, width: “125px” })); 
  13. oControl = new sap.ui.commons.TextField().bindProperty(”value”,”EmailAddress”); 
  14. oTable.addColumn(new sap.ui.table.Column({label:new sap.ui.commons.Label({text:”Email Address”}), template: oControl, sortProperty: “EmailAddress”, filterProperty: “EmailAddress”, width: “125px” })); 
  15. oControl = new sap.ui.commons.TextField().bindProperty(”value”,”PhoneNumber”); 
  16. oTable.addColumn(new sap.ui.table.Column({label:new sap.ui.commons.Label({text:”Phone Number”}), template: oControl, width: “125px” })); 
  17. oControl = new sap.ui.commons.TextField().bindProperty(”value”,”FaxNumber”); 
  18. oTable.addColumn(new sap.ui.table.Column({label:new sap.ui.commons.Label({text:”Fax Number”}), template: oControl, width: “125px” })); 
  19. oControl = new sap.ui.commons.TextField().bindProperty(”value”,”LegalForm”); 
  20. oTable.addColumn(new sap.ui.table.Column({label:new sap.ui.commons.Label({text:”Legal Form”}), template: oControl, sortProperty: “LegalForm”, filterProperty: “LegalForm”, width: “125px” })); 
  21. oControl = new sap.ui.commons.TextField().bindProperty(”value”,”Currency”); 
  22. oTable.addColumn(new sap.ui.table.Column({label:new sap.ui.commons.Label({text:”Currency”}), template: oControl, width: “125px” })); 
  23. oControl = new sap.ui.commons.Link ().bindProperty(”text”,”WebAddress”); 
  24. oControl.bindProperty(”href”,”WebAddress”); 
  25. oControl.setTarget(”_blank”); 
  26. oTable.addColumn(new sap.ui.table.Column({label:new sap.ui.commons.Label({text:”Web Address” }), template: oControl, width: “125px” })); 
  27. oTable.setModel(oModel); 
  28. //Create Sorter and Bind to the Business Partner Entity 
  29. //To-Do: Place Code Here 
  30. var sort1 = new sap.ui.model.Sorter(”PartnerId”); 
  31. oTable.bindRows(”/BusinessPartners”,sort1); 
  32. var iNumberOfRows = oTable.getBinding(”rows”).iLength; 
  33. oTable.setTitle(”Business Partners” + ” (” + iNumberOfRows + “)” ); 
  34. return oTable; 

我将相对重要的地方加粗,其它部分即便不查阅SAPUI5的文档也很容易理解。我们绑定的是同一个项目里的OData service资源,SAPUI5的表格控件会自动将数据绑定。最终的显示结果为

102

WISH LIST

又到了提意见的时候了。对于VIEW的构建,目前的开发过程还比较原始,没有所见即所得的或者说声明式的编程方式,不过这是SAP正在开发的一个重要功能。除此以外,很多地方也需要改进,比如说模型的绑定,创建模型,手动输入URL参数,对我来说依然过于原始。可以开发出来一种类似OData Service浏览器的东西供开发者选择绑定对象,选择是本地的还是远端的OData Service,然后自动生成绑定代码或者在框架内完成。

本周的内容结束了。主要介绍的是SAP最新的前端开发框架SAPUI5。这不是我的兴趣所在,而对于前端攻城狮来说,学习它应该是piece of cake。下一周,服务器端的javascript才是HANA XS的特色。一起加油!还有两周课程就结束了!

To report this post you need to login first.

1 Comment

You must be Logged on to comment or reply to a post.

  1. kingbo ding

    到这章节,估计对大部分人都是一个很大的挑战了,这篇里面引入了很多新的概念与技术点,大家需要认真做功课了。 😉

    (0) 

Leave a Reply