马上注册,结交更多数据大咖,获取更多知识干货,轻松玩转大数据
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
第一章 通过OData暴露和消费数据的基础架构
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前端攻城狮吧。 另外,SAP近年来终于开始拥抱开源社区。无论是前端产品的eclipse化,还是SAPUI5都能看到这种趋势。SAPUI5的核心是JQuery,除此以外还融合了: 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) { 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服务 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服务 我们准备创建一个表格控件,绑定后端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 Herevar oModel = new sap.ui.model.odata.ODataModel(”../../../services/businessPartners.xsodata/”, false);//To-Do: Place Code Herevar arrayHeaders = new Array();var oControl;oTable = new sap.ui.table.Table(”test”,{tableId: “tableID”,visibleRowCount: 10});oTable.setTitle(”Business Partners”);//Table Column DefinitionsoControl = 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 Herevar 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的特色。一起加油!还有两周课程就结束了!
|