SAP公开课笔记：基于HANA的软件开发 - 第四周总结

第一章 通过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内进行，这种数据的传递也是高效的。

 

第二章 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

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的研发团队多强大也没法在各个领域都是第一，开源社区的智慧是无穷的。

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

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

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

项目创建成功后，首先我们要更改引导文件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可以正常运行了！

 

第四章 OData

 

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

 

第六章 创建一个简单地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

 

第七章 创建复杂的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里。

createContent : function(oController) {
//Insert oData Model Here
var oModel = new sap.ui.model.odata.ODataModel(”../../../services/businessPartners.xsodata/”, false);
//To-Do: Place Code Here
var arrayHeaders = new Array();
var oControl;
oTable = new sap.ui.table.Table(”test”,{tableId: “tableID”,
visibleRowCount: 10});
oTable.setTitle(”Business Partners”);
//Table Column Definitions
oControl = new sap.ui.commons.TextField().bindProperty(”value”,”PartnerId”);
oTable.addColumn(new sap.ui.table.Column({label:new sap.ui.commons.Label({text:”Partner ID”}), template: oControl, sortProperty: “PartnerId”, filterProperty: “PartnerId”, width: “125px” }));
oControl = new sap.ui.commons.TextField().bindProperty(”value”,”EmailAddress”);
oTable.addColumn(new sap.ui.table.Column({label:new sap.ui.commons.Label({text:”Email Address”}), template: oControl, sortProperty: “EmailAddress”, filterProperty: “EmailAddress”, width: “125px” }));
oControl = new sap.ui.commons.TextField().bindProperty(”value”,”PhoneNumber”);
oTable.addColumn(new sap.ui.table.Column({label:new sap.ui.commons.Label({text:”Phone Number”}), template: oControl, width: “125px” }));
oControl = new sap.ui.commons.TextField().bindProperty(”value”,”FaxNumber”);
oTable.addColumn(new sap.ui.table.Column({label:new sap.ui.commons.Label({text:”Fax Number”}), template: oControl, width: “125px” }));
oControl = new sap.ui.commons.TextField().bindProperty(”value”,”LegalForm”);
oTable.addColumn(new sap.ui.table.Column({label:new sap.ui.commons.Label({text:”Legal Form”}), template: oControl, sortProperty: “LegalForm”, filterProperty: “LegalForm”, width: “125px” }));
oControl = new sap.ui.commons.TextField().bindProperty(”value”,”Currency”);
oTable.addColumn(new sap.ui.table.Column({label:new sap.ui.commons.Label({text:”Currency”}), template: oControl, width: “125px” }));
oControl = new sap.ui.commons.Link ().bindProperty(”text”,”WebAddress”);
oControl.bindProperty(”href”,”WebAddress”);
oControl.setTarget(”_blank”);
oTable.addColumn(new sap.ui.table.Column({label:new sap.ui.commons.Label({text:”Web Address” }), template: oControl, width: “125px” }));
oTable.setModel(oModel);
//Create Sorter and Bind to the Business Partner Entity
//To-Do: Place Code Here
var sort1 = new sap.ui.model.Sorter(”PartnerId”);
oTable.bindRows(”/BusinessPartners”,sort1);
var iNumberOfRows = oTable.getBinding(”rows”).iLength;
oTable.setTitle(”Business Partners” + ” (” + iNumberOfRows + “)” );
return oTable;
}

 

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

 

WISH LIST：

 

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

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