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

第一章 服务器端javascript XSJS

按照我们以往开发应用的经验，有客户端开发和服务器端开发。客户端开发在HANA XS应用开发里可以使用SAPUI5，一个完全运行在客户端的JS框架。那么我们也需要开发服务器端逻辑。HANA有SQLScript，但是它没法完全承担起服务器端开发的任务，不然O记也不需要JAVA，所有的应用都用PL/SQL好了。HANA XS应用的服务器端开发语言，依然是javascript。SAP选择了Mozilla SpiderMonkey https://developer.mozilla.org/en/docs/SpiderMonkey  作为服务器端JS的虚拟机。不知道为什么没有选择google的V8。SAP选择SJ作为服务器端编程语言，我觉得主要考虑还是因为它够轻量级。因为本身XS Engine就是一个轻量级的应用服务器，当然也要有一个足够轻量级的编程语言。

HANA XS的服务器端JS API参考手册在 http://help.sap.com/hana/jsapi/index.html HANA XS的JS API的底层实现是由C/C++实现然后以JS API的方式暴露，似的开发人员能够用JS这种易用的语言调用。它能够与HANA XS引擎交互、直接访问HANA DB、处理HTTP请求等。

第二章 创建XSJS服务

本章只是让大家体验一下服务器端JS，有一个感性的认识。从HANA Studio，有一个创建选项：XS Javascript source file，这就是创建XS服务器端JS。
本章的示例代码为：

function   performMultiply(){
var   body = '' ;
var   num1 = $.request.parameters.get( 'num1' );
var   num2 = $.request.parameters.get( 'num2' );
var   answer;
answer = num1 * num2;
body = answer.toString();
$.response.setBody(body);
$.response.status = $.net.http.OK;
}
var   aCmd = $.request.parameters.get( 'cmd' );
switch   (aCmd) {
case   "multiply" :
performMultiply();
break ;
default :
$.response.status = $.net.http.INTERNAL_SERVER_ERROR;
$.response.setBody( 'Invalid Command: ' +aCmd);
}

我们可以看到，与当年写JAVA Servlet入门程序是很相像的，在服务器端解析http request请求，执行操作，然后构建http response文件。HANA XS JS的API是以美元符号作为前缀的。激活之后就可以打开浏览器运行测试了。

第三章 扩展XSJS服务

本章在上一章基础上演示了一个更复杂一点的XSJS代码。主要的功能是在计算乘法的基础上可以下载excel文件。示例代码如下：

?

$.import( "sap.hana.democontent.epm.services" , "messages" ); var   MESSAGES = $.sap.hana.democontent.epm.services.messages; function   performMultiply(){ var   body = '' ; var   num1 = $.request.parameters.get( 'num1' ); var   num2 = $.request.parameters.get( 'num2' ); var   answer; answer = num1 * num2; body = answer.toString(); $.response.setBody(body); $.response.status = $.net.http.OK; } function   downloadExcel() { var   body = '' ; try   { var   query ='SELECT TOP 25000 \"PurchaseOrderId\", \"PartnerId\", \"CompanyName\", \"CreatedByLoginName\", \"CreatedAt\", \"GrossAmount\" ' + 'FROM \"sap.hana.democontent.epm.data::purchaseOrderHeaderExt\" order by \"PurchaseOrderId\"' ; $.trace.debug(query); var   conn = $.db.getConnection(); var   pstmt = conn.prepareStatement(query); var   rs = pstmt.executeQuery(); body = MESSAGES.getMessage( 'SEPM_POWRK' , '002' ) + "\t " + // PurchaseOrder ID MESSAGES.getMessage('SEPM_POWRK', '003') + " \t " + // Partner ID MESSAGES.getMessage('SEPM_POWRK', '001') + " \t " + // Company Name MESSAGES.getMessage('SEPM_POWRK', '004') + " \t " + // Employee Responsible MESSAGES.getMessage('SEPM_POWRK', '005') + " \t " + // Created At MESSAGES.getMessage('SEPM_POWRK', '006') + " \n "; // Gross Amount while (rs.next()) { body += rs.getNString(1) + " \t " + rs.getNString(2) + " \t " + rs.getNString(3) + " \t " + rs.getNString(4) + " \t " + rs.getDate(5) + " \t " + rs.getDecimal(6) + " \n "; } } catch (e) { $.response.status = $.net.http.INTERNAL_SERVER_ERROR; $.response.setBody(e.message); return; } $.response.setBody(body); $.response.contentType = 'application/vnd.ms-excel; charset=utf-16le'; $.response.headers.set('Content-Disposition', 'attachment; filename=Excel.xls'); $.response.headers.set('access-control-allow-origin', '*'); $.response.status = $.net.http.OK; } var aCmd = $.request.parameters.get('cmd'); switch (aCmd) { case " multiply ": performMultiply(); break; case " Excel": downloadExcel(); break ; default : $.response.status = $.net.http.INTERNAL_SERVER_ERROR; $.response.setBody(MESSAGES.getMessage( 'SEPM_ADMIN' , '002' , aCmd)); }

首先是import功能。这与JAVA没有什么两样。我们可以创建XSJS库文件以便被其它程序使用。import第一个参数书库文件的位置，第二个参数为库文件的名字。我们可以从HANA资源库看到这个库文件。

它里面的内容是一些编写好的function，比如 function getMessage(messageClass,messageNumber,p1,p2,p3,p4)
之后我们可以为这个库文件创建一个别名，如示例代码MESSAGES，然后以这个别名调用库文件内的函数。
代码里第二个值得主义的部分是对HANA数据库的操作。虽然语法类JDBC/ODBC，但是数据并不需要像JDBC调用那样经过网络传递，而是直接在HANA内部进行。
最后是对HTTP response的设置，使得客户端可以下载Excel文件。

第四章 从客户端调用XSJS服务

本章无非是利用SAPUI5（其实用不用都可以）构建一个用户界面，然后调用后端的XSJS文件获得结果。如果在AJAX刚开始流行时写过一点JS代码的相比都能想象得到是怎样的逻辑：在UI控件上设置相关事件和事件相应的函数；在函数里编写异步服务器端请求代码；获得结果的勾子函数用来展示数据。 只不过这一切用SAPUI5来实现罢了。
我们这里要实现的是两个textfield输入乘数与被乘数，在用户输入数值时立即计算并显示出结果。
我们首先创建新的SAPUI5视图和对应的引导文件html。 因为我们要响应控件的事件了，所以这次要在controller里写一些代码
view

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

sap.ui.jsview( "sapui5.xsjstest" , { getControllerName : function () { return   "sapui5.xsjstest" ; }, createContent : function (oController) { var   multiplyPanel = new   sap.ui.commons.Panel().setText("XS Service Test - Multiplication" ); multiplyPanel.setAreaDesign sap.ui.commons.enums.AreaDesign.Fill); multiplyPanel.setBorderDesign sap.ui.commons.enums.BorderDesign.Box); var   layoutNew = new   sap.ui.commons.layout.MatrixLayout({width:"auto" }); multiplyPanel.addContent(layoutNew); var   oVal1 = new   sap.ui.commons.TextField( "val1" ,{tooltip: "Value #1" , editable: true }); var   oVal2 = new   sap.ui.commons.TextField( "val2" ,{tooltip: "Value #2" , editable: true }); var   oResult = new   sap.ui.commons.TextView( "result" ,{tooltip: "Results" }); var   oEqual = new   sap.ui.commons.TextView( "equal" ,{tooltip: "Equals" , text: " = " }); var   oMult = new   sap.ui.commons.TextView( "mult" ,{tooltip: "Multiply by" , text: " * " }); //Attach a controller event handler to Value 1 Input Field oVal1.attachEvent( "liveChange" , function (oEvent){ oController.onLiveChangeV1(oEvent,oVal2); }); //Attach a controller event handler to Value 2 Input Field oVal2.attachEvent( "liveChange" , function (oEvent){ oController.onLiveChangeV2(oEvent,oVal1); }); layoutNew.createRow(oVal1, oMult, oVal2, oEqual, oResult ); return   multiplyPanel; } });

大部分代码都是在创建UI控件，只有下面一小部分真正是核心：对控件设置事件以及事件的响应函数。这里面oController就是该视图对应的控制器，用onLiveChange?函数响应textfield值变化这个事件。
Controller

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

onLiveChangeV1: function (oEvent,oVal2){ //To-Do: Insert Service Call to XSJS Service var   aUrl = '../../../services/Example1.xsjs?cmd=multiply' + '&num1=' +escape(oEvent.getParameters().liveValue)+ '&num2=' +escape(oVal2.getValue()); jQuery.ajax({ url: aUrl, method: 'GET' , dataType: 'json' , success: this .onCompleteMultiply, error: this .onErrorCall }); }, onLiveChangeV2: function (oEvent,oVal1){ //To-Do: Insert Service Call to XSJS Service var   aUrl = '../../../services/Example1.xsjs?cmd=multiply' + '&num1=' +escape(oVal1.getValue())+ '&num2=' +escape(oEvent.getParameters().liveValue); jQuery.ajax({ url: aUrl, method: 'GET' , dataType: 'json' , success: this .onCompleteMultiply, error: this .onErrorCall }); }, onCompleteMultiply: function (myTxt){ var   oResult = sap.ui.getCore().byId( "result" ); if (myTxt==undefined){ oResult.setText(0); } else { jQuery.sap.require( "sap.ui.core.format.NumberFormat" ); var  oNumberFormat = sap.ui.core.format.NumberFormat.getIntegerInstance({ maxFractionDigits: 12, minFractionDigits: 0, groupingEnabled: true   }); oResult.setText(oNumberFormat.format(myTxt)); } }, onErrorCall: function (jqXHR, textStatus, errorThrown){ sap.ui.commons.MessageBox.show(jqXHR.responseText, "ERROR" , "Service Call Error"   ); return ; }

onLiveChangeV?本身并不是函数名，而是属性，但是由于javascript本身的语言特色，函数也可以是属性，了解如何用JS实现面向对象编程的对这样稍显怪异的语法结构不会陌生。
而对xsjs的调用利用了JQuery的API，里面成功与失败分别赋予了两个勾子函数，用来分别响应对服务器调用的成功与失败。
需要说明的是，在成功的方法里，我们可以看到sap.ui.getCore()方法可以获得UI上的控件，之后可以对其进行操作。
本章的内容其实跟HANA XS无关，甚至于SAPUI5关系都不大。这是多年以前AJAX的基础技术演示。如果对掌握这部分内容有困难的同学，还是先去google百度一下AJAX吧。


第五章 调试XSJS


这与在eclipse里调试其它代码没什么大的不同，只是要满足一些前提条件。
首先要保证HANA XS引擎的debug配置激活了，而且要配置一个端口用来监听debug session。


之后在eclipse里配置一个XSJS debug，指定服务器host和debug监听端口


最后，我们要获得连接HANA XS引擎的session ID。这存在于HTTP请求的cookie里。所以可以通过Chrome自带的developer tool获得xsSessionID


之后，当我们在eclipse里启动debug的时候会弹出窗口，让我们选择要debug的session，这个时候选择你在上一步获得的session即可。

由此可见，debug是很危险的，SAP不建议在生产系统做。我想，我们可以很容易的通过客户端工具篡改xsSessionID然后启动debug来获得其他用户权限的运行结果。


到此第五周的课程就结束了。还有一周，整个课程就结束了。下一周是HANA XS高级开发特性。为最后的考试做好准备吧。