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高级开发特性。为最后的考试做好准备吧。