OneSpan Sign How To: Creating a Simple Java Web Application
JavaServer Pages (JSP) technology is webpage scripting language used to create dynamic web content. Servlets, on the other hand, are Java programs that are already compiled, which also creates dynamic web content. In simpler terms, JSP is the inclusion on Java code inside HTML tags while Servlets are the opposite. In this blog, I will show you how to create a simple Java web application using JSP in which your user is required to fill-out a form and subsequently sign a sample contract using OneSpan Sign.
You will need to setup your environment to create your Java web application. For this blog, you will need the following: OneSpan Sign’s Java SDK, Eclipse IDE for Java EE Developers, and Apache Tomcat 7.
Downloading the Java SDK
The link below will take you to a page where you can download the Java SDK and also provides a link to some examples of using the Java SDK on GitHub. Unzip the SDK to the location of your choice.
Downloading Eclipse IDE for Java EE Developers
For this blog, I will be using the Eclipse IDE for Java EE Developers. If you do not already have it, you can download the community version for free at the link below. You can use any other IDE but everything covered in this blog will be using the Eclipse IDE for Java EE Developers.
Download Apache Tomcat 7 Lastly, you will need to download Apache Tomcat 7. Apache Tomcat is an open-source application server that executes Java servlets and renders web pages that include JSP coding. You will need to download the zip file and extract its content to a location of your choice.
Install Apache Tomcat in Eclipse Development Environment
Before diving into the code, we will need to configure Apache Tomcat successfully in Eclipse. Open Eclipse. In your View window, click on "No servers are available. Click this link to create a new server…".
If you’re unable to see the Servers tab, select from the menu Window > Show View and click on "Other…". From the "Show View" window, select "Servers" under the Server folder and hit "OK".
From the "New Server" window, select "Tomcat v7.0 Server" and click Next. Then, select "Browse…" and browse to the directory where you unzipped Apache Tomcat and click on Finish.
You should see the following in your Servers tab:
Creating Your Java Web Application
We can now start creating our simple Java web application. In the menu, select File > New and click on "Project…". Select "Dynamic Web Project" under the "Web" folder and click on "Next".
Give your project a name. For example, "JSPTutorial". Also, make sure that the "Target runtime" is indeed Apache Tomcat 7.0. Click on "Next" twice and in the "Web Module" window, select "Generate web.xml deployment descriptor" and click on "Finish".
Java web applications use a deployment descriptor file to determine how URLs map to servlets. You can find the web.xml file in the "WEB-INF" folder. If you open your web.xml file, you will see a "welcome-file-list". A welcome file is the file that is invoked automatically by the server, if you don't specify any file name. By default, the server looks for the welcome file in following order:
- welcome-file-list in web.xml
If none of these files are found, server renders 404 error.
Now that our project is created, let’s create our first JSP file. Right-click on the "WebContent" folder in the "Project Explorer" and select New > JSP File. Name your JSP file "index.jsp" and click on "Finish".
Go ahead and copy the code below in your index.jsp file.
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<h3>Please fill-out the following form:</h3>
<div style="border:1px solid #D0D0D0;width:400px;padding:10px;">
<form method = "POST" action="ESLCreation.jsp">
First Name: <input type="text" name="firstName" value="">
Last Name : <input type="text" name="lastName" value="">
Email Address : <input type="text" name="emailAddress" value="">
Company : <input type="text" name="company" value="">
Address : <input type="text" name="address" value="">
City : <input type="text" name="city" value="">
State : <input type="text" name="state" value="">
Zip : <input type="text" name="zip" value="">
Country : <input type="text" name="country" value="">
Phone Number : <input type="text" name="phoneNumber" value="">
Policy Number : <input type="text" name="policyNumber" value="">
<input type="submit" value="Submit">
The HTML code above will create your form where the user is required to fill-out his information. Upon clicking the submit button, the user will be redirected to the "ESLCreation.jsp" page.
Since you don’t have that page in your project, yet, go ahead and create a new "ESLCreation.jsp" file in your "WebContent" folder and copy the following code.
The first line specifies a list of packages or classes for use in the JSP as the Java import statement does for Java classes. It is typically not recommended to put all your logic in your JSP page. More on this, later.
The request.getParameter() methods extract the data sent by posting from an HTML form. This method always returns a String value.
The createPackage() and createSessionToken() methods come from “ESLPackageCreation” class, that we will create later. The first method creates your package using the information from the HTML form and the second method creates the session token required to build the signing ceremony URL to embed in an Iframe. Notice that all Java code in a JSP page is in between “<%” tags.
Next, you will need to reference the OneSpan Sign Java SDK. Browse to the location where you unzipped the Java SDK and copy the JAR files. Then, in your “Project Explorer”, right-click on your “lib” folder under WebContent > WEB-INF and select “Paste”.
Now, let’s create our “ESLPackageCreation” class. In your “Project Explorer”, right click-on “src” under “Java Resources” and select New > Package. Name your package “com.esl.example” and hit “Finish”.
In your package, create a new Java class called “ESLPackageCreation”. Go ahead and copy the following code:
Make sure to replace the api key and document file path placeholders with your own values.
Running Your Project
You are now ready to run your Java web application. Right-click on your project in the "Project Explorer" and select Run As > Run On Server. Then, hit "Finish".
Next, you should be able to see your form in Eclipse. Go ahead and fill-out some sample information and click on "Submit".
Finally, you should be re-directed to the following page below where the signing ceremony is embedded in an Iframe and the document ready to be signed.
You can find the complete project on the Developer Community Code Share section, here.
If you have questions regarding this blog or anything else concerning integrating OneSpan Sign into your application, visit the developer community forums: https://developer.onespan.com. That's it from me. Thank you for reading! If you found this post helpful, please share it on Facebook, Twitter, or LinkedIn. You can find all of my previous blogs by going to my author page.