warm up to enterprise soa with ajax and composite ......ajax, along with dhtml, allows for a very...

Warm up to Enterprise SOA with Ajax and Composite Applications

Applies to: This article was based on, and targeted to, the trial version of NetWeaver Composition Environment 7.1 SR3 and uses Web Dynpro (Java), EJB, Web Services, Ajax, JavaScript, Apache Axis, the Apache TCPMonitor tool, and several tools in the IDE and NetWeaver. The IDE used was the included Eclipse based SAP NetWeaver 7.1 Composition Environment SP03 PAT0000, Build id: 200710302120

The current best practice to incorporate SOA in an organization it to: start small, keep it simple (at first) and keep at it. For most organizations this is the only workable approach, but it can present a dilemma for those championing Enterprise SOA. Effort is being expended to develop the components of SOA, but sometimes with no immediate benefit to the organization. This paper attempts to give some concrete examples of how to use Ajax (in a browser) to access a Web Service developed as part of the SOA effort. These efforts to plug into Web Services should not be become a distraction to the overall SOA effort, but it is almost always beneficial to all stakeholders if some benefit can be achieved as early as possible. It also gives some early gratification to the developer community to know their work is being used.

For more information, visit the Web Services homepage.

Author: Perry Sedlar

Company: IBM

Created on: 11 March 2008

Author Bio Perry Sedlar is employed by IBM, and is a Technology Consultant specializing in J2EE, Web Dynpro, SOA and Portal solutions.

SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com © 2008 SAP AG 1

https://www.sdn.sap.com/irj/sdn/webservices


Table of Contents This Article is based on.......................................................................................................................................3 The Requirements: .............................................................................................................................................3 Development Deliverables:.................................................................................................................................5

The EJB ..........................................................................................................................................................6 The Composite Application (t-account calculator) ..........................................................................................8 Please see Appendix C for more detail on how this was done.Useful tools.................................................13 Useful tools ...................................................................................................................................................14 Final Word about Ajax...................................................................................................................................15

Appendix A - The Web Service Enabled EJB..................................................................................................16 Appendix B - The t-account calculator (Acme Manufacturing’s first composite application)...........................43 Appendix C - Creation of a very basic Web Dynpro page for Testing the t-account calculator link:...............74 Appendix D - Useful tools and Web Service Proxies ......................................................................................94 Related Content..............................................................................................................................................123 Disclaimer and Liability Notice........................................................................................................................124



This Article is based on:

Java is used extensively in this article. JavaScript and HTML/DHTML is also used a fair amount, after all this is the core of Ajax, but I will try and structure the article in a way so that even my ABAP friends will not roll their eyes. The nice thing is that Web Services can be enabled on many BAPI’s. Consumers of the Web Service don’t really care what implemented the Web Service; a BAPI could be swapped for the EJB and nobody would care.

The Requirements: Let us assume we are part of a team contracted to begin developing Web Services that will be part of the Acme Manufacturing Company’s SOA effort (by the way, Acme Manufacturing is a fictitious company in this article). The CIO is beginning to get cold feet because after a huge planning effort that involved all parts of the company and millions spent, he has nothing concrete to show for the Enterprise SOA effort.

So, the requirement is to calm the nervous CIO by developing a simple, but useful, composite application that uses a Web Service enabled accumulator function. A simple “Hello World” application is not enough for this stressed out CIO. The CIO has heard a lot about composite applications, and would like to see one in action.

The Accounting Department requested we develop a T-Account calculator. Accountants use T-Accounts to help them record, and balance the debits (dr) and credits (cr) of balance sheet accounts e.g. Cash, Receivables etc. The accountants were not too picky about how the calculator should look, but it must work, use at least one Web Service, be browser based, and qualify as a composite application. And yes, the heart of this calculator is nothing more than adding two numbers, which can be done by any dime store calculator. None the less, someone already conveniently wrote an EJB that accumulates two numbers. And let us not forget that we need to start small and keep things simple. After this calculator, we will be ready for more complex challenges!

After a short meeting with the accountants, it was decided to include the t-account calculator as a link in a Web Dynpro page. When a user clicks the link, a separate browser opens with the calculator. To help get the project started, we developed a prototype for the calculator. This prototype uses JavaScript to accumulate the numbers, but we will not mention this to the client. The goal here is to get the functionality and look a feel correct. As with a previous article I wrote regarding Background Labels, here is a link to the t-account calculator prototype. It was tested on IE6 and IE7, but is not currently designed to work in other browsers. It is worth mentioning again, that this is a prototype, and uses JavaScript to accumulate the debits and credits, however; this article will show how to us a Web Service and Ajax to accumulate the numbers in the final version of the calculator. To use the t-account calculator, you need to enter something in the G/L Account Title field (I used Cash in the screen shot below), indicate if this has a normal credit or debit balance by selecting the appropriate radio button, and then proceed to enter the debits and credits. Note, you can only enter a debit or credit amount (but not both) per line. The balance is indicated at the bottom, a number on the left indicates a debit, and a number on the right indicates a credit balance. In the screen shot below, there is a debit balance of 48.89.

Oh, and one final requirement, everything must run on the components supplied by NetWeaver Composition Environment v7.1. No other Application Servers are available at Acme Manufacturing.


https://www.sdn.sap.com/irj/sdn/go/portal/prtroot/docs/library/uuid/c0feef07-90c0-2a10-a8a7-8eed7de67aa7

http://www.perry-sedlar.com/gl_utilities/t_accountCalculator.htm



Figure 1 t-account calculator



Development Deliverables: This exercise consisted of development of the EJB (Stateless Session Bean) to accumulate the amounts, the t-account calculator itself is a jsp, and a very basic Web Dynpro page was created that includes the link to the calculator. Finally, several testing tools are demonstrated that could prove useful in your projects. I will cover these areas at a fairly high level here, but I will include step-by-step screen shots in the appendices at the end of this article. Please do not lose sight of the fact the goal here is to utilize (consume) a web service that was created for the larger SOA effort. It is fairly simple, and does not get into service orchestration, enterprise service repositories, governances etc.

For those hard core Java Developers, I think you will find the new version of Eclipse and joy. The landscape is slightly different, especially locating where the perspectives are listed, and the server set-up, but after a few hours, tasks almost become second nature. But as good as the IDE is, it pales in comparison to the new 1.5 J2EE (also called Java EE 5). CE 7.1 includes a new engine that takes advantage of 1.5, and that means the powerful features like autoboxing, generics and annotation are there to be exploited. I will try and point out the features as they are used, but please visit the Sun site for more detailed information.



The EJB

Even though I said the EJB was already completed, I will highlight the steps here, but each step is documented in Appendix A.

EJB’s come in many flavors, including State full and Stateless Session Beans and CMP and BMP Entity Beans. For this article, a Stateless Session Bean was created. This EJB was made to handle remote calls, but its main purpose was to provide an implementation to the Web Service used by the t-account calculator. SAP recommends one first try and identify an existing Enterprise Service in the Enterprise Service Repository before developing a customized web service. In this case, Acme Manufacturing was not able to find a simple accumulator function so the customized EJB was created.

It is worth mentioning that the EJB implements the accumulate functionality, but this could have been implemented anywhere (ABAP, Portal, .Net etc.). That said, EJB technology has been around for several years, and scales well. EJB’s can also be called remotely, which is somewhat of a duplication of what Web Services offer. However, if for whatever reason it is decided to not proceed with enabling Web Services, the EJB could still be called remotely, but not by Ajax in the Browser.

There are wizards available in NWDS that make creating the Stateless Session Bean (EJB) a breeze. Below is a listing for the accumulateEntry method (Listing 1) which will be Web Services enabled: public String accumulateEntry(@WebParam(name="value")

String value, @WebParam(name="accumulator")

String accumulator ){

String results = "";

double valueDbl = 0;

double accumulatorDbl = 0;

String pattern = "0.00";

DecimalFormat myFormatter = null;

// Do initial processing of results passed

if ( value == null && accumulator == null){

results = "0.00";

}

try {

valueDbl = Double.parseDouble( value );

}

catch ( NumberFormatException e ){

results = accumulator;

}

catch ( Exception e ){




}

try {

accumulatorDbl = Double.parseDouble( accumulator );

}


results = value;

}


results = value;

}

// At this point the passed in values must be at least convertible to a Double

// Add the value to the accumulator

accumulatorDbl = accumulatorDbl + valueDbl;

// Do the necessary rounding and formatting...

try {

myFormatter = new DecimalFormat(pattern);

// Now format appropriately...

results = myFormatter.format(accumulatorDbl);

}

catch (Exception e){

results = "0.00";

}

return results;

}

Listing 1 – accumulateEntry EJB method



The Composite Application (t-account calculator)

It is generally agreed that the definition of a Composite Application is: “An application that makes use of data and functions/services provided by underlying applications and combining these into a coherent business scenario, supported by its own business logic and specific user interface”. While not large or complex, the t-account calculator does fulfill these requirements. This calculator does have a “twist” to how it was implemented that currently does not seem to be widely used, and this twist is “Ajax”. Ajax is another one of those IT acronyms that stands for “Asynchronous JavaScript and XML”. Ajax, along with DHTML, allows for a very rich Web experience. The page can be dynamically modified as the user completes the page. There is no annoying page flicker as with traditional Web pages when the form is submitted. While I don’t know how the NetWeaver Web Dynpro Client Side Framework (CSF) works in detail, it appears to use Ajax, and allows for a “flicker-free” user experience.

Other than the use of Ajax, the t-account calculator page is an ordinary jsp. I could have actually created the calculator using a regular html project, but the jsp does allow for server side processing if that is needed later. For step-by-step screen shots on how the calculator was created, please see Appendix B. If you haven’t tried the t-account calculator, here again is the link: t-account calculator Note, this version accumulates the amounts using JavaScript, but the look and feel is the same as the Ajax enabled version.

When the user clicks the calculate button, edits are performed on what the user entered, and if the entries pass the edits, then the Ajax JavaScript code initiates the call to the Web Service in the getRequest JavaScript Function, see Listing 2. After the Web Service call is complete, the handleResponse JavaScript function is called see Listing 3.. function getRequest(sMethod, sOp1, sOp2) { var sRequest = "<SOAP-ENV:Envelope xmlns:SOAP-ENV=\"" + "http://schemas.xmlsoap.org/soap/envelope/\" " + "xmlns:xs=\"http://www.w3.org/2001/XMLSchema\" " + "xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\">\n" + "<SOAP-ENV:Body>\n" + "<yq1:" + sMethod + " xmlns:yq1=\"" + SOAP_ACTION_BASE + "\">\n" + "<value>" + sOp1 + "</value>\n" + "<accumulator>" + sOp2 + "</accumulator>\n" + "</yq1:" + sMethod + ">\n" + "</SOAP-ENV:Body>\n" + "</SOAP-ENV:Envelope>\n"; return sRequest; }

Listing 2

//This handles the response

function handleResponse() {

if (oXmlHttp.readyState == 4) {

var oXmlResponse = oXmlHttp.responseXML;

var sHeaders = oXmlHttp.getAllResponseHeaders();

if (oXmlHttp.status != 200 || !oXmlResponse.xml) {




alert("Error accessing Web service.\n"

+ oXmlHttp.statusText

+ "\nSee response pane for further details.");

var sResponse = (oXmlResponse.xml ? oXmlResponse.xml : oXmlResponseText);

oResponseOutput.value = sHeaders + sResponse;

return;

}

// The results of the WebService call is placed in sResult

var sResult = oXmlResponse.documentElement.firstChild.firstChild.firstChild.firstChild.data;

//alert("oXmlResponse.xml is " + oXmlResponse.xml);

if ( document.all('tcalcDrEntry').value != "" && validateNumerics( document.all('tcalcDrEntry').value ) ) {

tcalcAccumulatedDrBalance = sResult;

}

else {

if ( document.all('tcalcCrEntry').value != "" && validateNumerics( document.all('tcalcCrEntry').value ) ) {

tcalcAccumulatedCrBalance = sResult;

}

}

tcalcAccumulatedDrBalance = tcalcAccumulatedDrBalance - 0;

tcalcAccumulatedCrBalance = tcalcAccumulatedCrBalance - 0;

if ( tcalcAccumulatedDrBalance > tcalcAccumulatedCrBalance ) {

document.all('tcalcAccumulatedDrBalance').innerHTML = "<b>" + TwoSigDigit(RoundCents(tcalcAccumulatedDrBalance - tcalcAccumulatedCrBalance)) + "</b>";

document.all('tcalcAccumulatedCrBalance').innerText = " ";

}



else {

if ( tcalcAccumulatedDrBalance < tcalcAccumulatedCrBalance ) {

document.all('tcalcAccumulatedCrBalance').innerHTML = "<b>" + TwoSigDigit(RoundCents(tcalcAccumulatedCrBalance - tcalcAccumulatedDrBalance )) + "</b>";

document.all('tcalcAccumulatedDrBalance').innerText = " ";

}

else {

// only gets here if dr == cr, so check to see normal balances

if ( document.all('tcalcbalanceinddr').checked ) {

document.all('tcalcAccumulatedDrBalance').innerHTML = "<b>0.00</b>";


}

if ( document.all('tcalcbalanceindcr').checked ) {

document.all('tcalcAccumulatedCrBalance').innerHTML = "<b>0.00</b>";


}

}

}

var taccountTable = document.all('glcalcEntryTable');

var newRow = null;

var drCell = null;

var crCell = null;

if ( taccountTable != null ) {

newRow = taccountTable.insertRow( taccountTable.rows.length -



6);

if ( newRow != null ) {

drCell = newRow.insertCell();

if ( drCell != null ) {

drCell.align = 'right';

drCell.valign = 'top';

drCell.style.borderRight = 'solid';

if ( document.all('tcalcDrEntry').value == "" || document.all('tcalcDrEntry').value == "") {

drCell.innerText = " ";

}

else {

drCell.innerText = document.all('tcalcDrEntry').value;

}

}

crCell= newRow.insertCell();

if ( crCell != null ) {

crCell.align = 'left';

crCell.valign = 'top';

crCell.innerText = document.all('tcalcCrEntry').value;

}

}

}



document.all('tcalcDrEntry').value = "";

document.all('tcalcCrEntry').value = "";


document.all('tcalcDrEntry').focus();

}


document.all('tcalcCrEntry').focus();

}

}

}

Listing 3

During development, I included a JavaScript alert to show the XML that came back from the Web Service call, see Figure 2 below:

Figure 2 JavaScript alert showing the XML that came back from the Web Service call.



The Web Dynpro Launch Page

Acme Manufacturing will be launching the t-account calculator from a link on a Web Dynpro page, so a Web Dynpro project with a very basic page was created to test the calculator. The goal here was just to make sure it worked, so the Web Dynpro page has basically no functionality other than to launch the calculator. Please see Figure 3 below:

Figure 3 The Web Dynpro launch page

Please see Appendix C for more detail on how this was done.



Useful tools

Some of the keys to succeeding on a project are having the correct skills, the ability to debug the code, and the right tools for the job. I cannot say when the Web Services Navigator was added to the NetWeaver Java Stack, but it was a welcome discovery. For this project it proved invaluable in getting beyond a sticking point I had. You can access the Web Services Navigator by pointing your browser to the index.html. In our case it was http://delllat02:50000/index.html Of course you will need to have installed the CE components to us it. You will then see the Web Services Navigator. Please see Figure 4 below.

Figure 4 Web Services Navigator

To see how to use this useful tool and all the other tools, please see Appendix D.

The Web Services Navigator is great to see what the SOAP XML documents look like when you call a Web Service, both what is sent, and what is returned, but I found I needed TCP/IP tool to see what my Ajax was sending. Fortunately there is a very nice, and free, tool from Apache. It comes in one of the JAR files in the Axis download, and it is called TCPMonitor. It basically stands in the middle of the Consumer and Provider, and allows you to see what was sent, and what was returned, see Figure 5. This combined with the Web Services Navigator quickly allowed me to analyze, debug and fix my SOAP XML.


http://delllat02:50000/index.html


Figure 5 TCPMonitor in action!

While I am not sure if the wizards to create the various development components in NWDS, like the EJB, and then Web Service enabling the EJB would qualify as tools, they certainly make quick work of what used to be a lot of work with a lot of potential errors along the way. I was always messing up my deployment descriptor, which then promptly broke everything. With Java EE 5, EJB 3.0, annotation and the wizards in NWDS, it is a breeze.

Final Word about Ajax

If it is not obvious by now, I really like Ajax. It brings a whole new user experience to a web application. The unattractive form submits, with the accompanying page flicker, are replaced by a seamless UI experience. Ajax is very popular now, as it should be. However, there is a dark side to Ajax. All the major browsers prohibit Ajax calls to a different domain. So, if a page is delivered from an Acme Manufacturing domain, the browser will not allow an Ajax call to a different domain. This can really limit the usefulness of Ajax. I have seen workarounds that use a hidden Iframe, but creating the needed JavaScript is quite difficult. The best solution for Acme Manufacturing, in my opinion, is to create Web Service on the Acme Manufacturing domain that then calls the external Web Service. Calls from Server Side processing are not limited to the same domain as are browsers. This neatly resolves the problem. There are wizards in NWDS that create Java Proxies from a WSDL file (see Appendix D). I have already discussed how to Web Service Enable an EJB, and the EJB can then call the external Web Service using the Proxy Classes mentioned here to do the actual work. It is a very elegant solution to the domain restrictions the browsers place on Ajax. Please see Appendix D for detailed information on creating the Java Proxy classes and testing the Web Service using these Proxy Classes.



Appendix A - The Web Service Enabled EJB

Figure A.0 When you first launch the new NWDS, you will probably get the Welcome page. Select Workbench to get to the IDE.



Figure A.1 Begin as usual, select File, New and then Project



Figure A.2 Drill down to EJB Project



Figure A.3 Provide the Project Name, Select SAP EJB Java EE 5 Project for the Configuration and click the checkbox to add the project to an EAR and click Next



Figure A.4 I left these all default values, and clicked Next



Figure A.5 In our case we don’t really need to create the Client Jar, but I clicked the Client Jar creation, and Generate Deployment Descriptor and click Finish.



Figure A.6 Lets organize things a little, and create a package for the source. Select the project, right click an select New and Package. If you don’t see something similar to the above, please make sure your are in the Java EE Perspective ( ).



Figure A.7 Provide a meaningful package name and click Finish.



Figure A.8 The EJB project is there, and the package structure, so now we create the bean. Select the project, right click, select New and then EJB Session Bean 3.0



Figure A.9 Provide a meaningful EJB Class Name and select the Package you created earlier. Now, I don’t really need to select the Remove Business Interface because this EJB is destined to implement a Accumulator Web Service, but let us keep our options open. Perhaps one day we will need to make a remote EJB call directly to this bean. Plus, I don’t believe it creates any significant overhead, so I guess more is better. Then select Next.



Figure A.10 Select Remote and Local Home and Component Interfaces and click Finish.



Figure A.11 While you are there, add some Java Doc. Like Author, and what the class does. Please notice the grayed out text below the Java Doc. It is “@Stateless, @RemoteHome, @LocalHome” This is called annotation. It is basically metadata that is injected in the code. I believe Microsoft .Net also does annotation. It basically provides information that the Deployment Descriptor used to provide.



Figure A.12 Now for the really cool feature, right click on the bean, select Web Services and Create Web Service. How much easier could this be? Below is a complete listing of the Bean. Note the Create Web Service wizard adds annotation to the accumulateEntry method (@WebMethod(operationName="accumulateEntry", exclude=false)). Stuff like this used to be done in the deployment descriptor, and was not easy to follow, but all too easy to mess-up.



package com.gmc.ledger.utilities;

import javax.ejb.Stateless;

import javax.ejb.RemoteHome;

import com.gmc.ledger.utilities.GLUtilitiesHome;

import javax.ejb.LocalHome;

import com.gmc.ledger.utilities.GLUtilitiesLocalHome;

import java.text.DecimalFormat;

import javax.jws.WebService;

import javax.jws.WebMethod;

import javax.jws.WebParam;

/**

* @author pasedlar

*

*/

@WebService(serviceName="GLUtilitiesService", targetNamespace="http://gmc.com/ledger/utilities/", name="GLUtilities", portName="GLUtilitiesBeanPort")

@Stateless

@RemoteHome(value=GLUtilitiesHome.class)

@LocalHome(value=GLUtilitiesLocalHome.class)

public class GLUtilitiesBean implements GLUtilitiesRemote, GLUtilitiesLocal {

@WebMethod(operationName="accumulateEntry", exclude=false)

public String accumulateEntry(@WebParam(name="value")

String value, @WebParam(name="accumulator")

String accumulator ){

String results = "";

double valueDbl = 0;



double accumulatorDbl = 0;

String pattern = "0.00";

DecimalFormat myFormatter = null;

// Do initial processing of results passed

if ( value == null && accumulator == null){

results = "0.00";

}

try {

valueDbl = Double.parseDouble( value );

}



}



}

try {

accumulatorDbl = Double.parseDouble( accumulator );

}


results = value;

}


results = value;

}

// At this point the passed in values must be at least convertible to a Double



// Add the value to the accumulator

accumulatorDbl = accumulatorDbl + valueDbl;

// Do the necessary rounding and formatting...

try {

myFormatter = new DecimalFormat(pattern);

// Now format appropriately...

results = myFormatter.format(accumulatorDbl);

}

catch (Exception e){

results = "0.00";

}

return results;

}

}

Figure A.13 The listing above it all the code in the bean. It is not very complex, basically accumulates two numbers, does some formatting, and returns the value. You will notice the Bean Wizard generates a lot of classes and interfaces. Feel free to look over what was done, but your code basically goes in the bean class. Note, I used the DecimalFormat class to handle rounding and formatting the number (defined as double). This is defined in the pattern string. You will need some type of formatting, because you will eventually come across something that just isn’t right (e.g. 9.99 + 0.01 = 10.0001111111111111111 or something goofy like that). Customers don’t like to see this.



Figure A.14 After indicating we need to create a web service in Figure A.12 above, you will see the above. Move the slider control to near the bottom (see above), and select next.



Figure A.15 No changes here, click Next



Figure A.16 You are almost finished, select Next



Figure A.17 Select the methods you wish to expose as a web service. In our case, we had just the one method (accumulateEnty). Then click Next.



Figure A.18 Finally, click the Finish button.

Figure A.19 Take a look at all the annotation done for us. It is just amazingly easy.



Figure A.20 Let us now set-up the server. I found this to be different than previous NWDS releases. Also, there might be easier ways to do this, but I clicked the Server tab, then right clicked and selected New and Server.

Figure A.21 Drill down to the SAP Server (SAP and then SAP Server).



Figure A.22 Supply the Instance Host and Instance Number and select Next.

Figure A.23 We need to indicate what EAR is to be run in our server. Select the EAR and the Add-> button.



Figure A.23 Finally select the Finish button.

Figure A.24 There may be other ways to deploy the code, but I found this to work. Select the Server we just set-up, right click and select Publish.



Figure A.25 Supply an appropriate ID, P/W, select Store User Name and click Ok. This deployment process seems different from previous NWDS releases.

Figure A.26 You should see this if the when the EJB is being published. You may want to click the Run In Background button, because it seems to take awhile to publish.



Figure A.27 You should see this If the Publish was successful.



Figure A.28 Open your favorite browser, and point it to your WSDL. In our case it was http://delllat02:50000/GLUtilitiesService/GLUtilities?wsdl If all goes well, you should see the wsdl for your new web service enabled EJB. If you want to investigate what makes up the wsdl, you will find many references on the web.


http://delllat02:50000/GLUtilitiesService/GLUtilities?wsdl


Appendix B - The t-account calculator (Acme Manufacturing’s first composite application).

Figure B.0 Launch NWDS. Select New and then Project.

Figure B.1 Select Dynamic Web Project. We could actually select Static Web Project, but that would not allow for any server side processing if we need it later. Our t-account calculator currently doesn’t really use, or need, any server side processing, but we could add that later.



Figure B.2 Pick a meaningful project name. I decided to also set-up the EAR by clicking the Add project to EAR checkbox. This could be done later, but why wait?

Figure B.3 Now that the project is there, we need to create the JSP.



Figure B.4 Provide the JSP File name and click next.

Figure B.5 I selected the Use JSP Template, and you will see a nice preview of the JSP that will be generated. Click the Finish button.



Figure B.6 Even though we haven’t done any manual JSP work yet, let us go ahead and deploy and run the JSP to make sure everything is okay at this point. Select the desired JSP, right click select Run As and Run on Server.



Figure B.7 Since we haven’t actually deployed the JSP yet, we will need to define a server. Provide your server name, and click Next.

Figure B.8 Provide your Server and Instance Number and click Next.



Figure B.9 Make sure your EAR if showing up in the Configured projects list and click Next.

Figure B.10 I selected Web Browser and clicked Finish



Figure B.11 If all went well, you should get the successful dialog, and the jsp should open in NWDS.



Figure B.12 Since our calculator will be using Ajax, I downloaded a freely available JavaScript Include from Wrox Press. This include handles the creation of the XML HTTP Request object. This could have been coded from scratch, but why bother, when there is something freely available, and works fine. For a good book about Ajax, please refer to “Professional Ajax” by Wrox, authors: Nicholas C. Zakas, Jeremy McPeak, and Joe Fawcett. ISBN: 0-471-7777-1 In the screen shot above, I am setting up a folder to include the JavaScript library. Select the JSP Project, right click, pick New and then Folder. Provide a folder name and click Finish.



Figure B.13 We now need to import the JavaScript include. Select the JSP project, right click and pick Import. Then navigate to the include, and make sure you point the “Into Folder” to your newly created folder. Pick the include (checkbox), and click Finish. Below is the entire code for the t-account calculator JSP. Please be sure to re-deploy after making changes.

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>T-Account Calculator</title>

<script type="text/javascript" src="javascript/zxml.js"></script>

<script language="JavaScript">

var tcalcAccumulatedDrBalance = 0;

var tcalcAccumulatedCrBalance = 0;

var SERVICE_URL = "http://delllat02:50000/GLUtilitiesService/GLUtilities";

var SOAP_ACTION_BASE = "http://gmc.com/ledger/utilities/";



if ( validateNumerics( document.all('tcalcDrEntry').value ) && validateNumerics( document.all('tcalcCrEntry').value ) ) {

alert("Error, you must enter a valid numerical value in either the debit or credit entry, but not both");

return false;

}

}

if ( document.all('tcalcDrEntry').value != "" && document.all('tcalcCrEntry').value == "" ) {

if ( !validateNumerics( document.all('tcalcDrEntry').value ) ) {


return false;

}

}

if ( document.all('tcalcDrEntry').value == "" && document.all('tcalcCrEntry').value != "" ) {

if ( !validateNumerics( document.all('tcalcCrEntry').value ) ) {


return false;

}

}

// Do some minor formatting if needed..



// Set-up a regular expression to test for all numerics..

var regExp = /(^-?\d\d*$)/;

if ( regExp.test(document.all('tcalcDrEntry').value) ) {

document.all('tcalcDrEntry').value = document.all('tcalcDrEntry').value + ".00";

}

if ( regExp.test(document.all('tcalcCrEntry').value) ) {

document.all('tcalcCrEntry').value = document.all('tcalcCrEntry').value + ".00";

}

regExp = /(^-?\d*\.\d$)/;


document.all('tcalcDrEntry').value = document.all('tcalcDrEntry').value + "0";

}


document.all('tcalcCrEntry').value = document.all('tcalcCrEntry').value + "0";

}

regExp = /(^-?\.\d$)/;


document.all('tcalcDrEntry').value = document.all('tcalcDrEntry').value + "0";

}


document.all('tcalcCrEntry').value = document.all('tcalcCrEntry').value + "0";



}

// At this point we passed the edits

if ( document.all('tcalcDrEntry').value != "" && validateNumerics( document.all('tcalcDrEntry').value ) ) {

tcalcAccumulatedDrBalance = performSpecificOperation("accumulateEntry", document.all('tcalcDrEntry').value, tcalcAccumulatedDrBalance);

}

else {


tcalcAccumulatedCrBalance = performSpecificOperation("accumulateEntry", document.all('tcalcCrEntry').value, tcalcAccumulatedCrBalance);

}

}

}

function validateNumerics( strValue ) {

var regExp = /(^-?\d*\.\d$)|(^-?\d*\.\d\d$)|(^-?\d*$)|(^-?\.\d\d$)|(^-?\.\d$)/;

var regExpTest = regExp.test(strValue);

//check for numeric characters

return regExpTest;

}

function RoundCents(amt){

var WorkString;



if (amt < 0)

{

WorkString = amt - 0.005;

}

else

{

WorkString = amt + 0.005;

}

return WorkString;

}

function TwoSigDigit(selection)

{

var WorkString = selection;

var Position;

var varLength;

// check for decimal

WorkString += "";

varLength = WorkString.length;

Position = WorkString.search(/\./);

if (Position == -1)

{

WorkString = WorkString + ".00";

}

else

{

if ((varLength - Position) == 1)

{



WorkString = WorkString + "00";

}

else

{

if ((varLength - Position) == 2)

{

WorkString = WorkString + "0";

}

else

{

if ((varLength - Position) > 3)

{

WorkString = WorkString.substr(0, (Position + 3));

}

}

}

}

return WorkString;

}

function processWebServiceCallResults( result ) {

// if there was an an error...

if( result.error ) {

// Pull the error information from the event.result.errorDetail properties

var xfaultcode = result.errorDetail.code;

var xfaultstring = result.errorDetail.string;

var xfaultsoap = result.errorDetail.raw;

// Add code to handle specific error codes here



alert("xfaultcode is " + xfaultcode);

alert("xfaultstring is " + xfaultstring);

alert("xfaultsoap is " + xfaultsoap);

}

// if there was no error, and the call came from the call() in init()

else if(!result.error ) {

// Show the results!

alert(result.value);

}

}

function getRequest(sMethod, sOp1, sOp2) {

var sRequest = "<SOAP-ENV:Envelope xmlns:SOAP-ENV=\""

+ "http://schemas.xmlsoap.org/soap/envelope/\" "

+ "xmlns:xs=\"http://www.w3.org/2001/XMLSchema\" "

+ "xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\">\n"

+ "<SOAP-ENV:Body>\n"

+ "<yq1:" + sMethod + " xmlns:yq1=\"" + SOAP_ACTION_BASE + "\">\n"

+ "<value>" + sOp1 + "</value>\n"

+ "<accumulator>" + sOp2 + "</accumulator>\n"

+ "</yq1:" + sMethod + ">\n"

+ "</SOAP-ENV:Body>\n"

+ "</SOAP-ENV:Envelope>\n";

return sRequest;

}

function performSpecificOperation(sMethod, sOp1, sOp2){



oXmlHttp = zXmlHttp.createRequest();

var sRequest = getRequest(sMethod, sOp1, sOp2);

var sSoapActionHeader = SOAP_ACTION_BASE + "/" + sMethod;

oXmlHttp.open("POST", SERVICE_URL, true);

oXmlHttp.onreadystatechange = handleResponse;

oXmlHttp.setRequestHeader("SOAPAction", sSoapActionHeader);

oXmlHttp.setRequestHeader("Content-Type", "text/xml");

oXmlHttp.send(sRequest);

}

//This handles the response

function handleResponse() {

if (oXmlHttp.readyState == 4) {

var oXmlResponse = oXmlHttp.responseXML;

var sHeaders = oXmlHttp.getAllResponseHeaders();

if (oXmlHttp.status != 200 || !oXmlResponse.xml) {

alert("Error accessing Web service.\n"

+ oXmlHttp.statusText

+ "\nSee response pane for further details.");

var sResponse = (oXmlResponse.xml ? oXmlResponse.xml : oXmlResponseText);

oResponseOutput.value = sHeaders + sResponse;

return;

}

// The results of the WebService call is placed in sResult

var sResult = oXmlResponse.documentElement.firstChild.firstChild.firstChild.firstChild.data;

//alert("oXmlResponse.xml is " + oXmlResponse.xml);

if ( document.all('tcalcDrEntry').value != "" && validateNumerics(



}

else {

drCell.innerText = document.all('tcalcDrEntry').value;

}

}

crCell= newRow.insertCell();

if ( crCell != null ) {

crCell.align = 'left';

crCell.valign = 'top';

crCell.innerText = document.all('tcalcCrEntry').value;

}

}

}

document.all('tcalcDrEntry').value = "";

document.all('tcalcCrEntry').value = "";



}



}

}

}

function init() {



</tr>

<tr>

<td colspan='2' align='center' style='border-top:none; border-left:none; border-bottom:none; border-right:none'>

<input type='submit'value="Calculate" onclick="processCalculateButton(); return false;" />

<input type='reset' value="Clear" onclick='document.location.reload();' />

</td>

</tr>

</table>

</form>

</fieldset>

</body>

</html>

Figure B.14 Above is the entire contents of the t-account calculator JSP. This is our composite application. It is out of the scope of this article to get into the inner workings of the calculator. It uses DHTML to dynamically format the entries, and Ajax to call the Web Service. Note that the code above does include the JavaScript functions to run the calculator in a stand-alone mode. These functions were used in the prototype, but left in the final calculator; however, the accumulating is performed by the Web Service in the above listing.



Figure B.15 The above JavaScript function “getRequest(…)” formats the Ajax call to the Web Service. Notice the two arguments (value and accumulator) are set-up for the call to accumulateEntries in our EJB based Web Service.



Figure B.16 The above JavaScript function “performSpecificOperation(…)” is the main function that performs the Ajax call to our Web Service. For all the code, please see figure B.14 above. The handleResponse JavaScript function is called when the Web Service completes processing and returns the XML.



Figure B.17 To use the calculator, you need to first fill in the G/L Account Title (100-1 Cash in the example above). Pick the normal balance for the account, for Cash it is a Debit (dr).



Figure B.18 Here, a debit for 100.22 is entered, along with the comment (1) Bank Dep. Then click the Calculate button.



Figure B.19 If all goes well, the appropriate summary balance should show up.



Figure B.20 Here are a few more entries. Note, that it properly reflects a credit balance because the 904.32 credit entry more than offsets the two debit entries.



Figure B.21 Here I decided to put an JavaScript alert, to show the response XML I get back from the Web Service call. Note the entry of 99.99, and the return of 99.99 from the accumlateEntry method in the <return> element of the SOAP Envelope. This alert will be removed when no longer in Development.



Appendix C - Creation of a very basic Web Dynpro page for Testing the t-account calculator link:

Figure C.0 As always, create a new project. Select File, New and Project



Figure C.1 Drill down to Web Dynpro project and click Next




Figure C.2 Please note the warning about NWDI. We will not be using NWDI, so click Ok


Figure C.3 Compete the Project Properties and click Finish.



Figure C.4 Go ahead and open the Web Dynpro perspective (click Yes).



Figure C.5 Let us create the Application. Select the project, right click, select New and Application.



Figure C.6 Give the application a name and click Next



Figure C.7 Click Next



Figure C.8 Click Next. There are a lot of steps in this wizard.



Figure C.9 Click Finish.

Figure C.10 Open the created View.



Figure C.11 Customize the View as needed. It is out of scope to get into building a complete Web Dynpro application. Our goal here is to just do enough to show the link will bring up the t-account calculator.



Figure C.12 Open up the Action tab, and drag a LinkToURL on to the page. Supply the necessary reference, target and text for the link. Pretty easy actually.

Figure C.13 We need to set up the SAP identity. As you can see, I tried to deploy before I realized I missed this step. Select Window and then Preferences.



Figure C.14 Supply the necessary information and click Ok.



Figure C.15 Select the Application, right click and select Deploy new Archive and Run.



Figure C.16 Supply the User and Password, select Store user name and click Ok.

Figure C.17 Hopefully you get the successful message. If not, look for errors in the console log and resolve them.



Figure C.18 Our very basic Web Dynpro page came up with the available link.



Figure C.19 I clicked on the link, and got the t-account calculator to come up in a separate browser. This is what I wanted.



Figure C.20 I did the needed set-up for the calculator, and the debit and credit entries became visible.



Figure C.21 Made a debit entry for 100.22 and gave it a description/note



Figure C.22 I clicked the Calculate button, and the 100.22 showed up under the Ending Balance (Debit), as it should. You will notice a fairly long delay the first time. This is because the components need to be instantiated. Basically, it follows a “lazy” instantiation model. Pretty much nothing related to the Web Service is created until it is needed. So the first button click forces all the machinery to be created. After the first click, it is very fast. I can’t duplicate it in this article, but another nice advantage of Ajax is it is “flicker free”. You will not see the normal blank page for a second while the entire page/form is submitted. With Ajax, only the XML is sent, and retrieved without any “flicker” to the page. This is basically how the Web Dynpro Client Side Framework operates. We are now basically ready to demonstrate out Composite Application (t-account calculator) to the CIO.



Appendix D - Useful tools and Web Service Proxies

Figure D.0 There is a nice tool to help execute a web service . Please open a browser, and point it to the default index.html (http://delllat02:50000/index.html in our case). Then select the button for Web Services Navigator. Note, it was fairly easy to complete this article, but I did have a few bumps along the way. I recall some difficulty with the XML needed to initiate the Web Service call. I had copied some code from an example in the Wrox book mentioned above. It did not work with my Web Service though. It wasn’t until I went to the Web Services Navigator to see how it made the call that I finally realized my XML was incorrect. Below is the corrected version.



Figure D.1 Select the “Web Services Navigator”. You should be challenged to provide an Id and P/W. Please enter this and click Log on.



Figure D.2 You should then see the page above. Paste in the URL for your wsdl and click Go

Figure D.3 So far, so good. It recognized our method. Select this method by clicking the button next to the method.



Figure D.4 I supplied some values, and clicked the Execute button.



Figure D.5 Notice under the Parameters section, there a XML Content tab. This was what I had wrong initially in the t-account calculator JavaScript. I fixed it to match the above format, and it worked the next try. I would suggest using this tool before you spend much time on anything else. It is a very easy way to verify that everything went well for your Web Service.



Figure D.6 After I verified the Web Service works in the “Web Services Navigator” tool mentioned above, I decided to create a standalone Java Tester application for the Web Service. This actually killed several birds with one stone. This Java Tester application demonstrated how NWDS creates Java Proxies from the WSDL with a really cool wizard, these Java Proxies classes can then be used in traditional Server Side processing, it also demonstrates that while the Web Service needs to be running in a Application Server, the consumer does not have to. In our case it was a Java Application that called the Web Service through the generated proxy classes. Of course a network connection must be available and working. Also, as much as I love Ajax, there is a not so nice side to it. Because of all the hackers out there, Microsoft, and I think pretty much all other browsers out there, restrict Ajax calls to the same domain as the page that hosts the Ajax JavaScript call. In other words, if Acme Manufacturing wanted to take advantage of a Web Service on a different domain using Ajax, it would fail. IE is smart enough to know that the JavaScript is trying to do something on a domain that doesn’t match the page. I have read about ways around this problem through IFrames etc, but this is messy. However, there is a bright side. Acme Manufacturing can create a Web Service that basically calls the external Web Service. The calls on the server side are not restricted to the same domain. This allows Ajax to call the internal Web Service, but the real work is done by the external web service. I am getting a little wordy here, but the Java Proxy classes generated by the wizard can be plopped right in the new Web Service and it is good to go.



Figure D.7 Supply the Project Name and click Next



Figure D.8 Click Finish



Figure D.9 Go ahead and allow it to open the Java Perspective by clicking Yes



Figure D.10 I try and be half way organized, so I created packages for the Java code.



Figure D.11 Enter something and click finish.



Figure D.12 Select the Project, right click, select New and Other to use the very nice Web Service proxy wizard.



Figure D.13 Drill down to the Web Service Client wizard and click Next



Figure D.14 Paste in the wsdl URL in the Service definition field. Make sure the Client Type says Java Proxy and click Next



Figure D.15 Finally, click Finish



Figure D.16 Let’s take a look at all the goodies the wizard created for us. Open up the package where you pointed the wizard.



Figure D.17 We now need to create the Java Application class that will use the Java Proxies to call the web service. Pick a package, right click, select New and Class.



Figure D.18 Supply a class Name, make sure the public static void main checkbox is selected and click the Finish button.



Figure D.19 Okay, here is my code. But it has errors! How can that be! It turns out that the code above to call the proxy classes can throw an exception, and I have not done anything about this. It is easy to resolve by surrounding this by a try – catch block.



Figure D.20 Make sure you have at least one of the error lines selected. Right click, pick Surround With and then Try/catch Block. This is a nice time saver built right in NWDS.



Figure D.21 You will now see all the nice code the wizard created for us. Notice how it even indents the code properly. Very nice.



Figure D.22 I usually always try my new code with the debugger. So, I added a break point next to the line of code just below the try block. I then clicked the debug button, selected Debug As and selected Java Application.



Figure D.23 The code in Figure D.22 did not work, it returned a 0.00. This is not right, I tried a simpler example above. When I stepped past the call in the debugger, you will see in the Variables View that ret is set to “0.00”. Something is wrong because it should have returned 1.11 in the example above.



Figure D.24 As I was looking through the Java code the wizard created, I noticed it appeared to be using Apache Axis as the pattern to implement the Java Web Service Proxies. I went to the Apache Axis site, and did some searches, and located a fantastic TCP Monitoring tool free of charge. I downloaded the axis.jar in my C:\SAP\CE directory and executed it in the command Prompt window as above. Note, you could include this class path in the Advanced Tab for Windows, but it is easy to just tell it the class path too.



Figure D.25 I discovered this TCPMonitor tool basically stands between the Web Service Client (Consumer) and the Web Service itself. In our case, the Consumer was pointing directly to port 50000 to call the web service. To use this tool, I needed to find an available port on my laptop. In my case I picked 2900 as the port the Consumer class would temporarily use to send the Web Service request.



Figure D.26 I plugged in port 2900 as the listen port, and 50000 as the Target port in the TCPMonitor tool and clicked Add.



Figure D.27 I also need to update the Client/Consumer to point to the Listen Port (2900 in our case). Recompile the code.



Figure D.28 I now tried the call again and looked at what the TCPMonitor tool displayed. Note there are two displays of the XML. The first/top is what was sent, and the bottom is what was returned.



Figure D.29 It turned out my problem was basically the same as with my JavaScript Ajax call. The XML being sent did not include the parameters to pass to the accumulateEntry call. I added the two parameters in the client code, and tried it again. This time success! 1.11 plus 3.3 is in fact 4.41. After you are finished with the TCPMonitor tool, don’t forget to change your client code back to the correct port (50000 in our case). This TCPMonitor tool can be used in many places, and is now a nice addition to my collection of tools.



Related Content Java EE 5

Ajax Reference

Apache Axis

Web Services Reference

For more information, visit the Web Services homepage


https://www.sdn.sap.com/irj/sdn/index

http://www.wrox.com/WileyCDA/WroxTitle/productCd-0470109491.html

http://ws.apache.org/axis/

http://ws.apache.org/axis/

https://www.sdn.sap.com/irj/sdn/webservices



Disclaimer and Liability Notice This document may discuss sample coding or other information that does not include SAP official interfaces and therefore is not supported by SAP. Changes made based on this information are not supported and can be overwritten during an upgrade.

SAP will not be held liable for any damages caused by using or misusing the information, code or methods suggested in this document, and anyone using these methods does so at his/her own risk.

SAP offers no guarantees and assumes no responsibility or liability of any type with respect to the content of this technical article or code sample, including any liability resulting from incompatibility between the content within this document and the materials and services offered by SAP. You agree that you will not hold, or seek to hold, SAP responsible or liable with respect to the content of this document.

warm up to enterprise soa with ajax and composite ......ajax, along with dhtml, allows for a very...

Documents