Hi Everyone,
In the blog SAP HANA Extended Application Services( http://scn.sap.com/community/developer-center/hana/blog/2012/11/29/sap-hana-extended-application-services) by Thomas Jung, he showed us lots of things about XS development and one of them was how to create and extend Server Side JavaScript and it was explained beautifully in the video :
http://www.youtube.com/watch?v=ckw_bhagvdU
At the end in the above video, Thomas told us about Calling the XSJS Service From the User Interface :
Here i would like to tell how to create the UI files and then call xsjs service step by step
1. We will go to Project Explorer tab in SAP HANA Development perspective and then R-Click and select Other:
2. Select SAP UI5 Application Development and then select Application Project:
3. We will enter project name and select Desktop for rendering the ui on our desktop and also select create an initial view so that wizard creates a view for us
4. Enter the name of the View that we need to create Select JavaScript rendering for our purpose
5. We found that wizard created three objects for us:
index.html
XSUI.controller.js
XSUI.view.js
In index.html file we will enter the full path of Source as
src="/sap/ui5/1/resources/sap-ui-core.js"
6. After that enter the following code in XSUI.controller.js file :
sap.ui.controller("xsui.XSUI", { onLiveChangeV1: function(oEvent,oVal2){ var aUrl = '../../../Services/Func.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){ var aUrl = '../../../services/Func.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; }
});
7. After that enter the following code in XSUI.view.js file
sap.ui.jsview("xsui.XSUI", { getControllerName : function() { return "xsui.XSUI"; }, 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; }
});
8. Now we will save all the files and share the project
9. Now Select SAP HANA Repository:
10. Inside the repository select the folder where you would like to share it : I selected UI5 folder here
11. Now we will commit and activate our UI5 project :
12. As we share our XSUI project in UI5 folder in the repository, so now we can see that in our project explorer also :
13. Now in Services folder we will create Func.xsjs file that we have used in our Controller and View in XSUI project.
14. Now enter the following code in Func.xsjs file :
function performMultiply()
{ var body = ''; var num1 = $.request.getParameter('num1'); var num2 = $.request.getParameter('num2'); var answer; answer = num1*num2; body = answer.toString(); $.response.addBody(body); $.response.setReturnCode($.net.http.OK);
}
var aCmd = $.getParameter('cmd');
switch(aCmd)
{
case "Multiply": performMultiply(); break; default: $.response.setReturnCode($.net.http.INTERNAL_SERVER_ERROR); $.response.addBody("Invalid Choice" +aCmd);
}
15. In the browser enter address : http://ipaddress:8000/path/index.html
As in the aboveexample we have used JavaScript, JSON, Ajax and JQuery, so i would also like to tell you some basics about them
First i will start with JavaScript
JavaScript is a Object based Scripting language. It is not a Object Oriented language.
• Client-side JavaScript allows an application to place elements on an HTML form and respond to user events such as mouse clicks, form input, and page navigation.
• Server-side JavaScript allows an application to communicate with a relational database, provide continuity of information from one invocation to another of the application, or perform file manipulations on a server.
Features:
JavaScript is very light language
JavaScript supports only supports data type but doesn't support variable type.
For Example:
In Java or C++, if we define a variable of integer type we will define it as :
int a; // so 'a' cannot hold anything other than integer
But in case of JavaScript, we only define:
var a; // here 'a' can be a string an integer or anything else a = hello; // 'a' becomes string a = '10'; // here 'a' becomes an integer
JavaScript doesn't have Keywords like Class, Private, Public but there are different ways through which we can make an object Public or Private and we can even use Inheritance concept in JavaScript through the use of prototype and inherit from.
To learn more about JavaScript, please visit http://www.w3schools.com/js/ or http://www.javascriptkit.com/
SAP HANA has JavaScript editor that includes the JSLint open-source library, which helps to validate JavaScript code.
For debugging purpose:
We can use SPA HANA debug perspective or any browser like Chrome and Mozilla Firefox.
Chrome has default JavaScript debugger and for Mozilla, we can download a plugin called Firebug.
There is also a free online tool called jsfiddle that can be used to create, debug and run your JavaScript code along with HTML and CSS.
jsfiddle : http://jsfiddle.net/
Now moving on to JQuery :
JQuery is a JavaScript Library and it simplifies our JavaScript Coding as we don't need to write many lengthy codes.
In the OPenSAP course in Week 4 Unit 3 example a JQuery function fadeout() was used on Button.
To learn more about JQuery, visit http://www.w3schools.com/jquery/ or http://learn.jquery.com/
Now about JSON :
Well JSON stands for JavaScript Object Notation.
It is a light weight data interchange format and it is preferred over XML because:
In XML, Parsing is difficult and XML doesn't support rich data type( everything is written in the form of string )
Other benefits of JSON are that :
Data is typeless and values can be assigned dynamically.
Its Syntax is written in key and value pair
For Example => User(Key) : Name(Value)
We can use eval and JSON.parse functions to convert JSON String into JavaScript string.
JSON.parse is preferref over eval because of the following reason :
When we use eval to parse JSON data, eval is always active and it might be used to create malicious data that can be harmful to our sources.
For learning JSON visit : http://www.w3schools.com/json/default.asp
Finally AJAX :
AJAX stands for Ashynchronous JavaScript and XML
It is one of the Web 2.0 standards and is used by web applications to send data to and retrieve data from a server asynchrously without interfering in the display and beahaviour of the existing page.
It runs completely independent of the browser and no plugins are required.
Google Suggest was the very first example of using AJAX.
In most of the payment sites we generally see " Please Wait! Your Order is being processed" - this is done through the help of AJAX only.
One of the sites from where we can download those moving GIFs for our web design is : http://ajaxload.info/
For learning AJAX visit : http://www.w3schools.com/ajax/
Thank You for reading the Blog.
As this is my very first Blog so i would like to get feedback