Get started building Java Web apps in WDSC

Quickly build simple Java Web applications that access iSeries data and call RPG programs with a browser interface.


Jim Mason

IBM's WebSphere Development Studio Client (WDSC) for iSeries is a powerful, easy-to-use tool for building every type of Web application you can think of.

The following Guided Tutorial Steps show how to build some simple Java Web applications quickly that access iSeries data and call RPG programs with a browser interface. If you need an introduction to WDSC and it's basic navigation concepts, take a look at the online help in WDSC or download the first tutorial in the QuickWebEducation series: 1- QWE WDSC Java project workbench basics- >> Learn how to build Java apps quickly with WDSC (QWE_WDSC_tutorial_1_EclipseWorkbenchJava_jem.zip) from http://groups.yahoo.com/group/QuickWebSupport/files. (You'll have to register, but it's free.)

Our web application uses a sample Employee table IBM ships with DB2 UDB Common Servers (Windows, Linux etc) in the SAMPLES database. You do the example below following the same steps substituting another physical file on your AS/400 for the Employee table and following the instructions noted below on changing the location of your DB2 driver and configuring the database connection to the AS/400 database.

The web application we build will use IBM wizards to generate the Java application:

  • The web database application
    allows you to search and select an Employee from the Employee table by last name and then display the selected Employee's detail information.

Basic setup steps to build Java Web applications in WDSC would normally include:

  • Create a database model for the iSeries data library.

Steps to create the Web database application:

  • Create an SQL query object for the Employee table.
  • Generate the database application using the Database application wizard.

Steps to create the Web program application:

  • Create an SQL query object for the Employee table.
  • Generate the database application using the Database application wizard.

Our Web database application in action

The Web database application is generated by the Database application wizard in WDSC. It is simple but typical of a useful Web database application for a simple Employee phonebook. The application lets a user do the following:

  • Search the Employee table by last name
  • Browse and select a single employee record from the Employee result table
  • Display details on a single employee
  • Navigate back and forth through these three steps

Documentation conventions used in this tutorial:

In this tutorial there are sequences of instructions in the WDSC Workbench of Site Developer that we abbreviate to save space. Common examples of sample instructions and the corresponding abbreviations are shown below:

Example 1: The instruction sequence:
On the Workbench main menu, select Window option, then Preferences option

is abbreviated to:
Workbench > Window > Preferences

Example 2: The instruction sequence:
"Select anObject, then use the Right Button mouse button to open the object Menu"

Is abbreviated to:
anObject RBmenu

Example 3: The instruction sequence:
The block of instructions below shows a sequence of user actions alternating with system responses. For example, the action in this group (Enter the project name: ctw2_test1, click create CSS file and click Next) is followed by the system response beginning with << (<< the Project configuration workbook opens showing source, projects, libraries). After you execute 1 or more actions in sequence, the system response provided is identified by the prefix "<<".

  1. Create a new web project named: ctw2_test1
    Click the new icon and select web project as the type to create and click Next
    OR Workbench > File > New > Project > Web > Web Project
    << the Project page opens
    Enter the project name: ctw2_test1, click create CSS file and click Next
    << the Project configuration workbook opens showing source, projects, libraries
    Browse the information on each page and click Finished
    << the web project is created and displayed in the packages view

Create a database model for the iSeries data library

Create a variable to refer to your Java database driver

Add an environment variable in the WDSC workbench to refer to your database driver classes. Your application will need to access the specific Java database access classes to connect to a database of that type. Classpath variables allow your application to refer to objects without hard-coding the actual location in your application, a big plus for flexible configurations.

For a DB2 UDB connection in Windows, Linux, etc, the driver zip file is db2java.zip. For a remote iSeries connection, the driver file is JT400.jar. (You can search your WDSC install directories to find the JT400.jar driver location.)

Steps

  1. Create a classpath variable to refer to your database driver.
    Workbench > Window > Preferences > Java > Classpath variables
    << the Variables page opens
  2. Select NEW to create a new classpath variable.
    Enter a name. (In this instance, use DB2JAVA. For AS/400, use JT400.)
  3. Browse to select a DB2 driver file. (My driver is at: c:sqllibjavadb2java.zip. For remote AS/400: in [ wsdi install dir ] javajt400.jar -- for example, my path is: c:wdscjavajt400.jar)
  4. Press OK. The variable is now available to add to any project's build path. The build path defines all the folders, files used in the project's classpath when classes are compiled.
  5. Create a Web project to hold database information

    Next, we'll create a project for our database information and import the database information into the application so we can build SQL statements. This is a nice improvement over older IBM tools because you can now build SQL statements offline. You don't need a "live" connection to your iSeries server.

    Steps

  6. Open the Web perspective.
    Click perspective icon on the Workbench and Web Java perspective to open.
    OR Workbench > Perspective > Open > Web
    << The Web perspective opens with a package view on the left.
  7. Create a new Web project named: ctw2_test1
    Click the new icon and select Web project as the type to create and click Next.
    OR Workbench > File > New > Project > Web > Web Project
    << The Project page opens.
    Enter the project name: ctw2_test1, click create CSS file and click Next.
    << The Project configuration workbook opens showing source, projects, libraries.
    Browse the information on each page and click Finished.
    << The Web project is created and displayed in the packages view.
  8. Import database information

    Steps

  9. Open the Data perspective.
    Click perspective icon on the Workbench and Data perspective to open.
    OR Workbench > Perspective > Open > Data
    << The data perspective opens with a DBExplorer view on the left.
  10. In the data perspective, select the data explorer tab in the left pane.
    Right button menu to select "create new connection."
    Set connection information:
    - connection name (db2_sample )
    - database name (SAMPLE )
    - user id
    - password
    - database type (DB2 UDB v7.2)
    - JDBC driver type (IBM DB2 app driver for Windows; for AS/400, select "other DB2 driver")
    - host name (For AS/400, specify the AS/400 system name.)
    - port (For AS/400, default port is 8475.)
    - JDBC driver name (COM.ibm.db2.jdbc.app.DB2Driver. For AS/400, com.ibm.as400.access.AS400JDBCDriver)
    - Class location (C:sqllibjavadb2java.zip. For AS/400, jt400.jar)
    - Connection URL (Calculated from the above info.)
    - Click Finish.
    >> The database connection is created for the database and the database metadata is imported.
  11. Import the database metadata into your Web project.
    Select the DB2 connection you created and Rbmenu > import to folder
    >> A pane opens asking you to select the folder.
    Browse the project tree to select your project.
    Browse your project to select the source folder.
    Press OK.
    >> An error message: /source/databases folder doesn't exist, create?
    Click Yes.
    >> The sample database metadata is imported.
  12. You don't have to import the ENTIRE database, only a few selected tables (e.g. EMPLOYEE for our example). Expand the database connection and browse it until you find the EMPLOYEE table. Then import to folder for just this table. You can easily select more tables later.

    The database definitions are stored as xmi documents. This allows the development tools to use database information for building statements, applications etc OFFLINE for the first time.

    Create an SQL query object for the Employee table

    Steps

  13. Create an SQL SELECT statement to select employees by last name
    Workbench > File > New > Data > SQL Statement
    >> SQL statement wizard opens to page 1

    a. Leave defaults for SELECT and be guided with the wizard.
    Browse to select the database model you just created in this project.
    (ctw2_test1 > source > databases > SAMPLE)
    Set a statement name (selectEmployeesByLastName8), click Next.

    b. Expand a schema name to see the tables.
    Select the table (EMPLOYEE). Click > button to add the table to the selected tables list.

    c. Click the columns tab at the top of the workbook.
    >> The columns page is displayed

    d. Expand the table to see the available column names.
    Select the columns (LASTNAME, FIRSTNME, WORKDEPT, PHONE, EMPNO).

    e. Click the conditions tab at the top of the workbook.
    >> the conditions page is displayed
    Create a WHERE clause to select records (WHERE LASTNAME >= :LASTNAME).
    Select a column (LASTNAME).
    Select an operator ( >= ).
    Select a value. (Build expression, then set a host variable name, :LASTNAME)
    Select String constant.
    Select host variable option.
    Enter the variable name (LASTNAME). Click Finish.

    f. Click the order tab at the top of the workbook.
    >> The order page is displayed.
    Select a column for an ORDER BY clause (LASTNAME). Click Next.

    g. On the review page, execute the statement to verify it works correctly.
    Click execute.
    Substitute a value when prompted for the starting last name (e.g. 'D')
    >> A table of names should be returned.
    Click close, then Finish to save the statement.

  14. Generate the database application using the Database application wizard

    Steps

  15. Switch to the Web perspective again for your project
    left hand short cut vertical menu bar, select the Web icon to change to the Web perspective again.

    h. Select your project in the Navigator view.

    i. Open the Web database application wizard.
    Workbench > File > New > Other > Web > Database Web Pages, click Next

    j. >> The database Web workbook opens up to page 1.
    Browse to select the folder for the application in your project (/ctw2_test1/WebApplication)
    Leave the other defaults and click Next.
    Leave the options for create input form, create detail form selected.
    Leave the View Bean model (optionally you could specify a custom JSP tag library here).
    Leave store results in request (optionally you can save JDBC result set in your session).

    k. Select the SQL statement on the next page:

    l. >> Your database project is shown.
    Click use existing SQL statement and navigate your project tree under source/databases and select your SQL statement.
    (selectEmployeesByLastName8) Click Next.
    >> Runtime database connection information page is shown.

    m. Specify Runtime database connection information.
    (Use the default connection info you already provided.)
    Optionally, you can specify a data source name if you created one. Click Next.

    n. >> Input form design page is shown.
    Override the label: lastname to Last_name. Click Next.

    o. >> Result table form design page is shown.
    For each RESULT SET field listed in the fields page, select the field. Then change the label to delete the schema and table name in the label for each field.
    (JEM.EMPLOYEE.LASTNAME is changed to: LASTNAME.) Click Next.

    p. >> The Details view form design page is shown.
    For each field listed in the fields page, select the field then change the label to delete the schema and table name in the label for each field. (JEM.EMPLOYEE.LASTNAME is changed to: LASTNAME.) Click Next.

    q. >> Front controller and view bean page is shown.
    Specify Front Controller and View Bean Choices.
    Leave the default to create a new one. Click Next.

    r. >> Specify prefix page is shown.
    Set a prefix to for the generated files (replace existing prefix with ctw2 ). Click Finish.

  16. The web application is generated.
    Note on steps f, g, h you had options to change default information on the input, result table and detail view pages.

    Test the generated application in the WebSphere Test Environment

    A big plus for those of you who aren't "WebSphere certified" is the easy testing environment in WDSC. At this point your application is complete. You can in one click, configure a WebSphere server, create the server instance, start it running and run your application.

    Steps

  17. Select your input page for the project and the "Run on server" option.
    Expand your project in the Navigator view and the WebApplication folder.
    >> Your input page should be listed (ctw2InputForm.html).
    Select the form and Rbmenu > Run on Server
    You will see messages showing a test WebSphere server has been created and started in the console window.
    >> A Web browser will open in the edit pane with your input page displayed.
    Enter a starting last name (try G) and click Submit.
    (Be patient, your generated JSPs are being compiled to Java servlet source, and the servlets are then compiled.)
    >> A result table listing selected employees by last name is shown.
    Select an employee in the Select column, and click Details.
    >> A details page for that employee is shown with all the information.

Using the back button, go to the input page again and rerun the application to see how much faster it runs. Look at what happened with ONE click.
* The test WebSphere application server configuration and instance is created in the workbench
* The test WebSphere server is started.
* The application is published.
* A Web browser is opened.
* Your input form is invoked in a test browser.

Look at what you built
Your generated Web application is built on the MVC2 architecture (* Model - view - controller) where a controller servlet directs the application flow, the model is the Java beans that hold data information, and the View is composed of the generated JSPs.

Can you improve this application? During the definition phase in the database application wizard you could have customized all the Web forms to a fair degree using styles, editing, different labels and so on.

How much Java did you need to know to build and run a Java Web application?
The answer. Much less than anyone else on any other platform needs to know to do the same thing. What does that mean? Normal iSeries programmers can learn the basics of building Web applications using WDSC in a few days of focused training using QuickWeb Guided Tutorials or mentored training combined with IBM's examples and online help.

What else has to be done to deliver Web applications?
Realistically you need GOOD help in several key areas:
* WebSphere planning, configuration and support
* Application architecture and design
* Technical training tailored effectively to your specific needs and skill sets
* Application component development to maximize use of generation wizards

The key conclusions to draw: With the WDSC toolset and the right technical assistance, your existing developers can start delivering a wide variety of working Web applications after only minimal training in WDSC.

Your next steps

--------------------------
About the author: Jim Mason is president of ebt-now.com, and he writes, consults, teaches, designs and develops iSeries Web applications using Java, WebSphere, DB2, Lotus Domino and the WebSphere Development Tools for iSeries.


This was first published in August 2002

Dig deeper on Web Development

0 comments

Oldest 

Forgot Password?

No problem! Submit your e-mail address below. We'll send you an email containing your password.

Your password has been sent to:

-ADS BY GOOGLE

SearchEnterpriseLinux

SearchDataCenter

Close