Monday, January 29, 2007

Dynamic Dropdown List using AJAX

I wanted to discover how to use AJAX to populate a dynamic dropdown list based on the input of some controls on the current page.

There are 2 dropdown lists which determine the elements of the third dropdown list.

Please see the live demonstration Here

The sample code (jsp and php) can be downloaded at Sample Code

Basically on the onchange event of the first 2 dropdowns, there will be an ajax call to retrieve values for the third dropdown.

There are 3 files:

1. dropdownPage.jsp(php) - main page which makes backend calls to retrieve the 3rd dropdown values
2. dataPage.jsp(php) - which provides the server data(nested xml) for the third dropdown
3. dropdownResults.jsp(php) - which simply shows which values the user has selected



The heart of the code is in the javascript processing on the dropdownPage.jsp:

AJAX Scripting (JSP Version):

function importXML()
{
if (document.implementation && document.implementation.createDocument)
{
xmlDoc = document.implementation.createDocument("", "", null);
xmlDoc.onload = populateDropDown;
}
else if (window.ActiveXObject)
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.onreadystatechange = function ()
{ if (xmlDoc.readyState == 4)
populateDropDown()
};
}
else
{
alert('Your browser can\'t handle this script');
return;
}

//determine url to get xml
var dd1Param = document.f1.dd1.value;
var dd2Param = document.f1.dd2.value;
var url = 'dataPage.jsp?dd1='+dd1Param+'&dd2='+dd2Param;
//load the xml
xmlDoc.load(url);
}


function populateDropDown()
{

var browser = 'ie';
var nameIndex = 0;
var valueIndex = 1;
if (document.implementation && document.implementation.createDocument)
{
browser = 'firefox';
var nameIndex = 1;
var valueIndex = 3;
}

var dd3 = document.f1.dd3;

//empty control
for (var q=dd3.options.length;q>=0;q--)
{
dd3.options[q]=null;
}

var x = xmlDoc.getElementsByTagName('item');
for (j=0;j < x[0].childNodes.length;j++)
{
if (x[0].childNodes[j].nodeType != 1) continue;
var theData = document.createTextNode(x[0].childNodes[j].nodeName);
}

for (i=0;i < x.length;i++)
{
var name = '';
var value = '';
for (j=0;j < x[i].childNodes.length;j++)
{
if (x[i].childNodes[j].nodeType != 1) continue;
var theData = document.createTextNode(x[i].childNodes[j].firstChild.nodeValue);
if (j==nameIndex) name = theData.nodeValue;
if (j==valueIndex) value = theData.nodeValue;
}

dd3.options[i] = new Option(name, value);
}
}

function submitform()
{
var dd1 = document.f1.dd1;
var dd2 = document.f1.dd2;
var dd3 = document.f1.dd3;
var dd1Value = dd1.options[dd1.selectedIndex].value;
var dd2Value = dd2.options[dd2.selectedIndex].value;
var dd3Value = dd3.options[dd3.selectedIndex].value;

var page = "dropdownResults.jsp?dd1="+dd1Value+"&dd2="+dd2Value+"&dd3="+dd3Value;
window.location = page;
}

One thing I do like about this example is that the data read provides a nested xml structure as follows:

Monday, January 22, 2007

Understanding ActiveBPEL Tutorial Test Client



Going through the BPEL construction process worked well but I also wanted to discover how the rest of the tutorial worked. So I dug in and hopefully this breakdown will help you. It helped me! :-)





The loan approval components A-F:

A. index.jsp:

Form with values such:
FirstName: John
LastName: Smith
Amount: 500
Operation:request
URL: http://localhost:8080/active-bpel/services/LoanService
Assessor Response: high,low,FAULT
Approver Response: yes,no, FAULT

Upon Submission:

- A form that submits to itself in which the jsp will make a call to the BPEL process

Step 1: update the values of "loan_approval_config.xml"
(~\Active Endpoints\ActiveBPEL Designer\Server\ActiveBPEL_Tomcat\temp\loan_approval_config.xml)
is updated with the values from the form via the RuntimeParams.java class using xpath notation.

Step 2:
Get the BPEL result via the following call:

This call grabs the newly updated values form the above loan_approval_config.xml
and essentially makes a call to the web service via code like:

BPELTestClient.java

Service service = new Service();
Call call = (Call)service.createCall();
String urlString = rp.getAttr("/rundata/client", "url");
call.setTargetEndpointAddress(new java.net.URL(urlString));
call.setOperationName(rp.getAttr("/rundata/client", "operation"));
call.addParameter("firstName", org.apache.axis.Constants.XSD_STRING,
ParameterMode.IN);
call.addParameter("name", org.apache.axis.Constants.XSD_STRING,
ParameterMode.IN);
call.addParameter("amount", org.apache.axis.Constants.XSD_INTEGER,
ParameterMode.IN);
call.setReturnType(org.apache.axis.Constants.XSD_STRING);

firstName = rp.getText("/rundata/client/firstName");
lastName = rp.getText("/rundata/client/name");
amount = new BigInteger(rp.getText("/rundata/client/amount"));
result = (String)call.invoke(new Object[] {firstName, lastName, amount});

Note however that the index.jsp updates the values for the Assessor and Approver web services in the loan_approval_config.xml.




B. RuntimeParams.java

Class designed to update the "loan_approval_config.xml" file.
It contains a org.w3c.dom.Document and a java.io.File instance variable so that the xml document can be updated via xpath notation.


C. Constants.java

public interface Constants {
public static final String MAGIC_FAULT_STRING = "FAULT";
public static final String MAGIC_FAULT_ERROR_CODE_STRING = "42";
public static final String UNEXPECTED_ERROR_CODE_STRING = "9999";
}



D. loanProcessFault.java

Special extension of org.apache.axis.AxisFault which is thrown by the 2 Web Services
ApproverWebService.java and the AssessorWebService.java


E. The Web Services

Looking at the 2 web services used in the BPEL:

1. ApproverWebService.java
Simply retrieve a value from the loan_approval_config.xml file
RuntimeParams rp = new RuntimeParams();
response = rp.getText("/rundata/approver/accept");

2. AssessorWebService.java
response = rp.getText("/rundata/assessor/risk-level");


Summary
So basics of this BPEL client is index.jsp which

1. updates a loan_approval_config.xml with form values
2. makes a call the to the BPEL by reading the values from loan_approval_config.xml
3. the two partnerLink webservices(Approver and Assessor) read their values from this xml file
4. the jsp is returned the results from the BPEL call

Sunday, January 21, 2007

ActiveBPEL Designer

I received a license key for the ActiveBPEL Designer(3.0.1) tool and installed the Designer. To get the key you have to submit some personal information and they send you a link to the license key, some case studies, and links to the support groups. The installation went smoothly and no complaints.

You can get it Here

There is a "loan approval" tutorial where you build the BPEL workflow from the ground up using the ActiveBPEL Designer interface. I have done some tutorials where code does not work but this one was without a hitch.

The ActiveBPEL Designer is built on top of Eclipse and also comes with a Tomcat server within. So you will have to change your CATALINA_HOME environment variable.


From techinitiatives


Active BPEL Tutorial(Loan Approval)

Part 1: Starting a New Process
Part 2: Planning and Designing a Process
Part 3: Adding Web References
Part 4: Using the Operation Activities and Properties
Part 5: Adding Process Activities and Properties
Part 6: Adding Fault Handling
Part 7: Adding Compensation and Correlation(This is actually an empty step)
Part 8: Simulating the Process
Part 9: Deploying the Process
Part 10 Running the Process on the Server
Part 11: Debugging Your Process on the Server

I am pretty new to "Web Services" and SOA. This tutorial did not have any incorrect information or missing steps. This is something that I appreciated greatly.

I made a BPEL process from the ground up(minus the partner web services and client jsp however). But this is a good step into BPEL. I liked the GUI alot and was impressed with the simulating and debugging features. Just getting started but I like what I see so far!

"Web Services Platform Architecture"

I just finished "Web Services Platform Architecture" by Weerawarana, Cubera, et al. More background into my web service exploration. The first book I read was Service Oriented Architecture(Erl). There is alot to know in SOA and the only way to do it is dive in and get reading. I feel that I am getting more comfortable about WS-*(the new specifications).

This book concentrated on the major WS specifications.

Some of the chapters were on WSDL, WS-Policy, UDDI, WS-Metadata Exchange, WS-Reliable Messaging, WS-Transactions, WS-Security, BPEL.

Why the Web Services effort will succeed?

-unprecedented level of vendor support
-consistent focus on solving core technical problems
-composeability of the specification set
-pragmatic specification development process(p. 388)


"The Web services platform(as SOA) is designed to suppport real-world automated business interactions in which functional and non-functional requirements are much more demanding than in simple Web access to enterprise applications." p. 381

Tuesday, January 16, 2007

A closer look at loan approval BPEL build.xml

We can look at the build.xml file that comes with the loan_approval example to provide insight on how to deploy a BPEL process.

The simple dos command “ant deploy” will deploy the business process archive, webservices, and jsps .

3 Main Sub Tasks of "deploy":

1. "deploy-bpel" (Create and deploy BPEL(bpel_example.bpr))

-Above copies /dist/bpel_example.bpr to ${env.CATALINA_HOME}/bpr/

2."deploy-ws" (Create and deploy Web services)

-Above copies /dist/bpel_example_web_services.wsr to ${env.CATALINA_HOME}/bpr

3. "deploy-jsp" (Create and deploy JSP)
-Above copies /dist/bpel_example_client_page.war to ${env.CATALINA_HOME}/webapps

So this is basically copying the Business Process Archive File, web services and jsp pages to the tomcat directories to make the BPEL Process happen.

Further details into the prerequisites to the above 3 main tasks

Looking into 1. "Create and deploy BPEL"
Jar the contents of /bpel_process/ directory into /dist/bpel_example.bpr

Looking into 2. "Create and deploy Web services"
Init-dist – create the dist directory if not already there
Compile – compile all code in the src directory into the classes directory
Deploy-config – copy bpel_example_config.xml to ${env.CATALINA_HOME}/temp directory
Jar up the ws classes into dist\bpel_example_web_services.wsr :
-/META-INF/service.wsdd (Web Services Deployment Descriptor (WSDD) file)
-Include all the classes in the classes directory but excluding the client classes

Looking into 3. Create and deploy JSP
Init-dist - Ensure dist directory is there
Compile- build all src code and put classes in classes directory
Deploy-config – copy bpel_example_config.xml to ${env.CATALINA_HOME}/temp
Jar up:
- 4 classes (BPELTestclient.class, RuntimeParams.class,Constants.class, & loanProcessFault.class) into /WEB-INF/classes directory
- contents of the jsp directory
into a /dist/ bpel_example_client_page.war


This is essentially what the build.xml does. I needed to go through this myself to provide a clearer understanding of what is exactly going on.

Next steps I would like to do is look into making some changes and seeing them reflected to get a better feel of ActiveBPEL implementations.



Sunday, January 14, 2007

Getting Started with Open Source BPEL

I am interested in the area of Service Oriented Architecture. I read Thomas Erl’s “Service Orient Architecture” and am working my way through “Web Services Platform Architecture”(Weerawarana,...).

I find it a rather daunting area and I am hoping to get to a point soon where I read something and come away with more answers than questions. I wanted an open source tool to experiment with BPEL (Business Process Execution Language).

The open source tool available is called ActiveBPEL which can be downloaded from http://www.active-endpoints.com. All I have done so far is set up the software and run the demonstration BPEL Orchestration.

Software I used to get things running:
Java 1.5
Ant 1.6.5
Tomcat 5.5.20
ActiveBPEL 3.0.0

The ActiveBPEL version I downloaded did not have the loan approval orchestration tutorial that I believe other versions came with. The loan_approval.zip can be downloaded from http://www.cis.umassd.edu/~hxu/Projects/UMD/BPEL4WS/ and I did deploy it and run the client code that interacted with it.

This is as far as I have went with it. My goal in the immediate future is to create my own BPEL orchestrations with my own web services to move more seriously into SOA.

Wednesday, January 10, 2007

Signed Applet to launch local applications

This applet demonstration shows how a signed applet can operate outside of the sandbox.

Applets are protected in a sandbox but are able to access resources outside the sandbox if the user establishes trust via signing the applet with a valid certificate.

Most companies have their own certificates but for the demonstration purposes of this program we will create our own certificate.

The applet for this demonstration will allow the user to launch applications such as calculator and notepad through the applet. Applications which can be launched normally through the dos command window.

I know this works in IE, and the applet which launches the applications can be viewed App launcher demo.

All source code can be downloaded here


There are some steps involved to achieve this:
1. Write the applet
2. Jar the applet
3. Make a certificate if you do not already have one and sign the jar file
4. Publish applet

Steps:
1. Compile AppLauncherApplet.java made for jdk 1.5 but can probably be easily modified

2. jar up application jar cvf AppLauncherApplet.jar *.class

3. Sign jar file (See below to create RSA keypair if not done already)jarsigner -verbose -keystore launcherkeystore -signedjar SignedAppLauncherAppletLauncher.jar AppLauncherApplet.jar launcheraliasEnter Passphrase for keystore: launcher updating: META-INF/MANIFEST.MF adding: META-INF/LAUNCHER.SF adding: META-INF/LAUNCHER.RSA signing: AppLauncherApplet.class
3b. Verify that it is signed jarsigner -verify -verbose -certs SignedAppLauncherApplet.jar

Create RSA keypair and self-signed certificate(Requirement to sign applet)
keytool -genkey -alias launcheralias -keyalg RSA -validity 365 -keystore launcherkeystore
Enter keystore password: launcherWhat is your first and last name? [Unknown]: Collin Smith
What is the name of your organizational unit? [Unknown]:CollinBlogDeptWhat is the name of your organization? [Unknown]: CollinBlog
What is the name of your City or Locality? [Unknown]: Calgary
What is the name of your State or Province? [Unknown]: AB
What is the two-letter country code for this unit? [Unknown]: CA
Is CN=Collin Smith, OU=CollinBlogDept, O=CollinBlog, L=Calgary, ST=AB, C=CA correct? [no]: y
Enter key password for (RETURN if same as keystore password):

(View fingerprints of certificates in keystore)
keytool -list -keystore launcherkeystore

(View personal information about the issuer and owner of the certificate)
keytool -list -v -keystore launcherkeystore

(Remove entries from the keystore) keytool -keystore launcherkeystore -delete -alias launcheralias

Wednesday, January 3, 2007

Simple AJAX tutorial

I am determined to find out things that might be of use to other developers. It is about cutting through the fluff of abstract concepts and being able to show it with simple working code or examples.

It is hard to keep up to date with all the new technologies that are being used and we as technology professionals are expected to work with.

I laid down the challenge to myself to help others (myself as well in that the best way to learn about something is to get to a point where you can teach others).

My first blog is a simple AJAX tutorial with simple sample code that can be dropped into any servlet container that can compile jsps.

Here goes:

AJAX Power Point Presentation

Sample AJAX Code