Integrating offline forms with IBM Lotus Forms and IBM Lotus Expeditor

In this article, you learn that by integrating IBM® Lotus® Expeditor and IBM Lotus Forms you can take your forms offline. The integration lets you store draft forms and submit forms to a server through a robust store-and-forward queue using IBM Websphere® MQ Everyplace®.

Share:

Candida Valois (cvalois@us.ibm.com), Managing Consultant, IBM

Candida Valois is a managing consultant and a member of the IBM software services for Lotus, WebSphere Portal Team. She works with several products including WebSphere Portal, Lotus Expeditor, WebSphere Process Server, and others. You can reach Candida at cvalois@us.ibm.com.



09 December 2008

Learn how to integrate Lotus Expeditor and Lotus Forms and take your forms offline. The integration allows you to store draft forms and submit completed forms to a server through WebSphere MQ Everyplace. This queue can hold forms while there is no network connection, and it can then send the forms when the server is available. This approach is a useful way to work on forms while you work offline, submit them, and have them synchronize to the server as soon as you have a connection without any user intervention.

This article assumes that you have some knowledge of form design and Java™ programming and client services development on Lotus Expeditor.

Lotus Forms is an industry-leading forms package based on the xForms standard, allowing a standard way of capturing and handling form data. Lotus Forms allows an electronic form to be completed online or offline and over multiple user sessions, if necessary.

To demonstrate the integration of the offline form with Lotus Expeditor and Lotus Forms in this article, you are guided through the steps to create a plug-in for Lotus Expeditor that can handle a form created with Lotus Forms Designer.

The code to support this scenario is provided in a download file. To play through the scenario, you need to have the following software installed:

  • Lotus Forms Designer 3.0.1
  • Lotus Expeditor 6.1

Business scenario

To demonstrate the integration, we use a common business scenario: the process of completing, submitting, or saving a simple form. In this scenario, you begin designing a basic Extensible Forms Description Language (XFDL) form, so that the user can submit, save, or cancel it. When the user is in an offline network state and submits the form, the application stores the form in the local database. When the user changes the network state to online, the application synchronizes with the server.

To create this sample scenario, follow these steps:

  1. Design the XFDL form.
  2. Create the Lotus Expeditor plug-in to display the form.
  3. Add the data connection classes.
  4. Add WebSphere MQ Everyplace capabilities.

Designing the XFDL form

For this application, we need to develop a simple form that you can integrate in Lotus Expeditor. You can create forms using Lotus Forms Designer. The completed form is shown in figure 1.

Figure 1. A simple form
A simple form

This form has three buttons, and each button needs to perform a specific action that is needed to route the form to the appropriate Web application. To set the form to perform those actions, you need to make some settings in the form itself. See Figure 2, 3, and 4.

As shown in figure 2, set the following General properties for the Submit button:

  • Set the value property as Submit.
  • Set the type property as done.
  • Set the url property as SubmitForm.
Figure 2. Setting properties for the Submit button
Setting properties for the Submit button

As shown in figure 3, set the following General properties for the Save button:

  • Set the value property as Save.
  • Set the type property as done.
  • Set the url property as SaveForm.
Figure 3. Setting properties for Save button
Setting properties for Save button

As shown in figure 4, set the following General properties for the Cancel button:

  • Set the value property as Cancel.
  • Set the type property as replace.
  • Set the url property as index.jsp.
Figure 4. Setting properties for the Cancel button
Setting properties for the Cancel button

Creating a Lotus Expeditor Web plug-in project

Next, we show you how to use IBM Rational® Application Developer V7.0 with the Lotus Expeditor toolkit to create a Web plug-in project.

  1. In Rational Application Developer, switch to the Plug-in Development perspective by selecting Window - Open Perspective - Plug-in Development.
  2. Open the New Project wizard by selectng File - New - Project.
  3. In the New Project wizard, select Client Services Web Project, and then click Next.
  4. In the Client Services Project wizard, enter LEApplication in the Project name field, and then click Next as shown in figure 5.
    Figure 5. Create a Client Services Web project
    Create a Client Services Web project
  5. On the Project Facets page, click Next.
  6. On the Web Module page, click Next.
  7. On the Target Definition page, select the following components:
    • DB2® Everyplace Client
    • Java Message Service (JMS) APIs
    • MQ Everyplace
    • MQ Everyplace JMS Support
  8. Click Finish.
  9. Create a home page for the application:
    • Right-click the project name LEApplication.
    • Select New .
    • Select WebPage.
    • In the New Web Page wizard, enter index.jsp in the File Name field and select JSP as the template as shown in figure 6.
    Figure 6. Creating the index.jsp wizard
    Creating the index.jsp wizard
  10. Open plugin.xml and add a new extension point com.ibm.eswe.workbench.WctWebApplication, as shown in figure 7.
    Figure 7. Add a new extension point
    Add a new extension point
  11. Right-click the new extension and select New, then select Web Application.
  12. Set the Display/Name to LEApplication.
  13. Right-click the new Web application, select New, and then select Browser. Set the following fields as false, as shown in figure 8:
    • showAddressbar
    • showToolbar
    • showHistory
    • showHome
    • showPrint
    • showBookmark
    Figure 8. Set browser configuration
    Set browser configuration
  14. Right-click the new Web application, select New, and then select WebApplicationUrl. Set the following fields:
    • Set the local field as true.
    • Set the secured field as false.
    • In the url field, enter /LEApplication/.

Creating data connection classes

Next, you need to create three classes that facilitate accessing the DB2 Everyplace database integrated into the Lotus Expeditor client. The database is used to store forms that are used as drafts, templates, and already submitted forms. For your convenience, we have provided the complete classes code in the download file. See figure 9.

Figure 9. Three classes under the client service Web project
Three classes under the client service Web project

The three classes of code are as follows:

  • The DB2ConnManager class provides the basic database connectivity to the Lotus Expeditor DB2 Everyplace components and creates the database that you use in this scenario.
  • The Form class is a Java bean that maintains two pieces of information: the unique form name and the XML content.
  • The Table class provides the interfaces into the database with a few methods that are used by the other classes.

Creating JSP files

Next, you need to work with two JSP files for the application, index.jsp and list.jsp. The main JSP file is the index.jsp, as shown in listing 1. In the index.jsp file, you need to add the necessary code to include the list.jsp file and create the actions to handle the upload of a new template form. You need to create a list.jsp file that lists different database views into index.jsp.

Listing 1. Implementing index.jsp
<html>
<head>
<link href="<%=request.getContextPath() %>/theme/Master.css"
	rel="stylesheet" type="text/css">
<title>LE Forms</title>
</head>
<body>
<p><span class="fileHeader">Expeditor Forms Client</span></p>

<jsp:include page="list.jsp" flush="">
	<jsp:param name="type" value="Template" />
</jsp:include>

<br />
<br />

<jsp:include page="list.jsp" flush="">
	<jsp:param name="type" value="Draft" />
</jsp:include>

<br />
<br />

<jsp:include page="list.jsp" flush="">
	<jsp:param name="type" value="Sent" />
</jsp:include>

<span class='tableHeader'>Upload a new Template Form</span>
<br />
<form enctype='multipart/form-data' method='POST'
	action='ActionServlet'><input type="file"
	name="uploadFormField" size="20" /> <input type="submit"
	value="Upload" /></form>
</body>
</html>

Now you need to create a stylesheet for the JSP. Follow these steps:

  1. Create a new theme folder under WebContent.
  2. Create a new file, Master.css.
  3. Add the necessary code for the desired stylesheet design.

Run the application, and make sure that the index.jsp page is returned. The list.jsp page runs as an include to the index.jsp, as shown in figure 10.

Figure 10. Index.jsp within Lotus Expeditor
Index.jsp within Lotus Expeditor

Creating servlets

In the Lotus Expeditor Web application plug-in, you create two servlets, ActionServlet and SaveForm. One processes the actions from the JSP pages, and the other one processes a save action from your specific form.

First, create the ActionServlet class:

  1. In the doGet method , write the code to receive an HTTP action for get and to process the command to send.
  2. In the doPost method, insert the form into the sent table and remove it from the draft table if it already exists.
  3. Create a getFileName method that parses the file name.

Next, create the SaveForm servlet class. This class receives an HTTP post and creates a string of the posted data (form), as shown in listing 2.

Listing 2. SaveForm servlet
protected void doPost(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException 
	{
    // capture the incoming HTTP Post as text //
   BufferedReader reader = 
   new BufferedReader(new InputStreamReader(request.getInputStream()));
		
   StringBuffer xml = new StringBuffer();
   String line = reader.readLine();
   while(line != null)
   {
     xml.append(line + "\n");
     line = reader.readLine();
     }
		
   // extract the serial number to use as the Form ID //
   String serial = Util.getSerial(xml.toString());

   try
   {	
     // insert/update the form in the draft table //
     Table.getDraftTable().add(new Form(serial, xml.toString()));
     }
   catch(Exception e){ e.printStackTrace(); }
		
   response.sendRedirect(ActionServlet.HOME_PAGE); 
	}

Follow these steps:

  1. Run the application.
  2. Upload the form that you created and launch Lotus Forms Viewer inside Lotus Expeditor.
  3. Enter text in the input field.
  4. Save the form as a draft or cancel it.

Creating classes and a servlet to handle messaging on the client side

In this section, you create the classes to run WebSphere MQ Everyplace on the client side and a servlet class to process a submit action from the form. WebSphere MQ Everyplace provides secure, ensured message delivery from device-to-server and device-to-device.

Create an MQeAdmin class, which is a utility class that simplifies the creation and administration of WebSphere MQ Everyplace objects. Follow these steps:

  1. Create a MQeClient class, which handles the WebSphere MQ Everyplace event messaging and process on the client side.
  2. Create a SubmitForm servlet.
    • This servlet receives an HTTP post, creates a string of the posted data, and then submits the form (XFDL document) to the MQeClient.
    • The form is inserted into the table and removed from the draft table.
  3. Open the index.jsp and add the code, as shown in figure 15.
    Listing 3. index.jsp code
    <%@page language="java" contentType="text/html; charset=ISO-8859-1"
    	pageEncoding="ISO-8859-1"%>
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <%@page import="com.ibm.xpd.forms.mqe.MQeClient"%>
    <%
    	
    	MQeClient.getMQeClient();
    %>
  4. Run the application, and you can click the draft form and submit it. You see messages when WebSphere MQ Everyplace tries to send the form to the server, as shown in figure 11. These messages continue until the server receives the file.
    Figure 11. WebSphere MQ Everyplace messages after submitting form
    WebSphere MQ Everyplace messages after submitting form

Creating a class and servlet to handle messaging on the server side

Finally, you create a class to run WebSphere MQ Everyplace on the server side and a servlet class to receive a submitted form.

Create a new dynamic Web project by following these steps:

  1. Add an MQAdmin class (same as the previous one).
  2. Create MQeServer class, which is a standalone Java application that simulates the remote end of a JMS connection.
  3. Create MQeProcessServlet class, as shown in listing 4.
    Listing 4. MQeProcessServlet class
    public class MQeProcessServlet extends javax.servlet.http.HttpServlet implements
    		javax.servlet.Servlet
    {
    
    	private static final long serialVersionUID = 5140167189939201L;
    
    	/**
    	 * Override the HttpServlet init to start the MQeServer.
    	 */
    	public void init(ServletConfig arg0) throws ServletException
    	{
    		super.init(arg0);
    		MQeServer.getServer();
    	}	
    }

Deploying and running the server-side application and the client side in Lotus Expeditor

In this section, we show you how to run the server-side Java application to simulate the server interaction with the submitted form in Lotus Expeditor. Follow these steps:

  1. Select Run – Run to open the Run wizard.
  2. Select Java Application, and then click the New icon at the top left of the screen.
  3. Enter a name in the Name field.
  4. Select the main class. See figure 12.
    Figure 12. Run configuration
    Run configuration
  5. Click Run.
  6. If the Lotus Expeditor client is not already running for the LEApplication, start it.
  7. The server receives the submitted form and provides a confirmation number, as shown in figure 13.
    Figure 13. Message from the server
    Message from the server

Conclusion

This article demonstrates the integration of offline forms management with Lotus Expeditor and Lotus Forms. We showed you how to create a Lotus Expeditor client services Web project and how to develop all the necessary artifacts to create, deploy, and run an offline form.


Download

DescriptionNameSize
Code sampleLEApplication.zip657KB

Resources

Learn

Get products and technologies

Discuss

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into IBM collaboration and social software on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Lotus, WebSphere
ArticleID=357637
ArticleTitle=Integrating offline forms with IBM Lotus Forms and IBM Lotus Expeditor
publish-date=12092008