Tutorial: Credit sample

This tutorial will show you how to use the Rapid Deployment Wizard from the beginning - launching IBM WebSphere Studio Application Developer, to the end - testing a sample application, step by step. In this tutorial, we will use the standard sample provided, the Credit sample of IBM MQSeries Workflow. You can easily create your own JSP files from the sample and complete it to work on the Web Client.
All you need to do is to follow these steps :

Before starting this tutorial, you need to confirm the following:

Part 0: Preparing a web project in IBM WebSphere Studio Application Developer

To prepare a web project in IBM WebSphere Studio Application Developer, do the following:

  1. Start the IBM WebSphere Studio Application Developer workbench.
  2. Switch to the Web perspective. (to do this, click Perspective > Open > Other > Web)
  3. From the main menu, click File > New > Web Project.
  4. In the Web Project window, enter the project name "Credit_sample" and click Finish.

Part I: Starting the Rapid Deployment Wizard

To start the Rapid Deployment Wizard, do the following:

  1. Right-click in the perspective pane, select New > Other from the drop-down menu.
  2. In the New window (see below), select MQWF Rapid Deployment in the left pane, select JSP for MQWF Web Client in the right pane and click Next.

  3. The Rapid Deployment Wizard is started.
  4. In the FDL and Project Selection window of the JSP Wizard, specify the FDL file for the Credit sample. To do this, click the Browse button and select fmccred.fdl, which is located in <MQWFDir>/SCENARIO/CREDIT. (<MQWFDir> is the root directory for IBM MQSeries Workflow, for example C:\Program Files\MQSeries Workflow.)
  5. Select the target Web Project, Credit_sample, from the list of Web Projects, as shown below. Click Next to continue.

Part II: Creating JSP files

In this part, you will create JSP files for the Credit sample.

Step 1: Creating a JSP file for Process Instantiation

  1. In the Process or Activity Selection window shown below, clear the Generate JSP for the activity check box, and click Next.

  2. A window as shown below is displayed with the default Output Folder name and the JSP file name. Click Next to accept the default settings.

  3. In the Form Properties window shown below, you can specify which members of the container will be included in the JSP file and how they will be displayed. To display the members FirstName and LastName and enable the user to type in text for these members, click the Input tab for Container Member and select member FirstName. Make sure the box Output this field is checked in the Field Property pane.
  4. Make sure that Field Type is set to Text field.

  5. Do the same steps for member LastName, then click Next.
  6. In the Output Order window, you can change the order in which fields you have selected for output on the JSP will be displayed. Click Next to accept the default as shown below.

  7. In the Button Configuration window, click Finish to accept the default buttons and generate the JSP file for the Credit process.
  8. A confirmation window is displayed. Select Yes.
  9. Ensure that the CreditProcess.jsp has been added to the tree of the Credit_sample Web Project in the Navigator View of WebSphere Studio Application Developer.

Step 2: Creating a JSP file for a Program Activity

  1. Start the Rapid Deployment Wizard again. (Step-by-step instructions here).
  2. In the Process / Activity Selection window shown below, make sure the Generate JSP for the activity check box is checked, and select the CollectCreditInformation activity, which is the first activity in this process flow. Then click Next.

  3. In the JSP and Template Selection window, accept the default settings as shown below and click Next.

  4. In the Form Properties window, click the Input tab of the Container Member. To display both the FirstName member and the LastName member, make sure that Output this field is checked in the Field Property pane for these elements.
  5. Then click the Output tab of the Container Member . All data elements of the output container are displayed. Select Address in the Container MemberList and make sure the Output this field check box is checked and Field Type is set to Text Field. Do the same for the CreditAmount element.
  6. To propagate the FirstName and LastName elements to subsequent activities in the Credit process, ensure that the Output this field check box for these elements is checked and select Hidden from the Field Type drop-down menu.

  7. Click the Options button. In the Options window, check the Specified by Member radio button. To select the required member from the list of container members as shown below, click on the Browse button.

  8. Click OK to continue.
  9. The Form Properties window is displayed again. Ensure that the Output this field check box is cleared for both RiskFactor and AddApproval, since you do not want to output these fields.
  10. Click Next to continue. The Output Order window is displayed.
  11. In this window, you can change the order in which fields you have selected for output on the JSP will be displayed. Click Next to accept the default order.
  12. In the Button Configuration window, click Finish to accept the default buttons and generate the JSP file for the CollectCreditInformation activity.
  13. A confirmation window is displayed. Click Yes to continue.
  14. Ensure that NCollectCreditData.jsp has been added to the tree of Credit_sample Web Project in the Navigator View on WebSphere Studio Application Developer, as shown below.

Part III: Customizing the JSP files with PageDesigner

In this part, you will customize the JSP files you created in Part II. Using the Page Designer of IBM WebSphere Studio Application Developer, you can easily enrich the look-and-feel of the JSP files.

  1. Ensure that the Web Perspective is open in IBM WebSphere Studio Application Developer. In the Navigator View, select and double-click CreditRequest.jsp under the Credit_sample web project. The contents of the JSP file are shown in the Page Designer editor view, as shown below.

  2. In the Gallery View, select Wallpaper to display thumbnails of wallpaper images in the Thumbnail View.
  3. Select a007bcg.gif image file from the Thumbnail View, drag it to the Page Designer View and drop it on the margin of the contents.
  4. The background of the CreditRequest window changes, and the a007bcg.gif file is added to the process folder under the Credit_sample web project.
  5. In the Navigator View, select the webApplication folder, right-click and select New > Folder from the drop-down list.
  6. In the New Folder window, enter images in the Folder name entry field and click on the Finish button.
  7. Select the a007bcg.gif file in the process folder and drag and drop it into the images folder.
  8. The Moving or Removing Files confirmation panel is shown. Pres Yes to continue.
  9. Make sure that the image file has been moved even though the background image of the CreditRequest JSP file remains unchanged.
  10. To add the heading and text to the JSP, move the text cursor to the top of the contents in the Page Designer View. Add the required text, "Web Bank" and "Please enter your name." to the JSP as shown below.

  11. You can easily check the look-and-feel of your customized JSP by clicking the Preview tab in the Page Designer View.
  12. To finish customization of the JSP file, press the Ctrl-S keys and click on X in the CreditRequest.jsp title bar.

Part IV: Publishing the JSP files with IBM WebSphere Studio Application Developer

In this part, you will publish the JSP files and the associated image files from the JSP to the specified server on IBM WebSphere Studio Application Developer.
In the following descriptions, we assume that you use WebSphere Application Server V4.0 where the MQSeries Workflow Web Client is configured and running, and that WebSphere Application Server V4.0 is installed on the server which is accessible via file system from the machine where the IBM WebSphere Studio Application Developer is running.

  1. In IBM WebSphere Studio Application Developer, select the WebApplication folder under the Credit_sample web project, then select File > Export from the menu bar.
  2. In the Export window, select File system and click Next.
  3. In the File system window, expand the Credit_sample node in the Select the resources to the export pane.
  4. Click the webApplication node to enable the check box, and click the WEB-INF node to uncheck it.
  5. Under Select the export destination, click the Browse button to show the browse window.
  6. Select the directory as shown below, then click OK to continue.
    <WASDIR>\installedApps\MQWFWebClient_<ConfigID>\fmcohcli.war
    (where <WASDIR> is the root directory for IBM WebSphere Application Server V4.0, for example, "c:\WebSphere\AppServer".)

  7. Click Finish to continue. The confirmation panels for overwriting are displayed. Click Yes to All.
  8. You are now ready to verify whether publishing was done sucessfully.

Part V: Testing the sample on the server

In this part, you will test the credit sample on the web server to check if it works sucessfully.

  1. Start your web browser, for example, Internet Explorer.
  2. Display the MQSeriesWorkflow Web Client Logon panel. Log on with a valid user ID and password.
  3. Go to the Template List.
  4. Click the Create and start instance button for the CreditRequest process.
  5. If the following panel is displayed, your JSP file for Credit sample was been implemented sucessfully.


© Copyright IBM Corporation 2002. All Rights Reserved.