Lance WSAD Manual

A COMPLETE PROGRAM

USING

IBM WEBSPHERE STUDIO APPLICATION DEVELOPER V5Version 1b.1

April 2, 2004IDS 517

University of Illinois at Chicago2004 Gary Lance

NOTE: The images in this report may differ from your images, as these images are taken from WSAD 5.1. But, they contain the same information as in WSAD 5.0. Also, when arranged in rows and columns, the images read from left to right, and then down.

NOTE: It is very important to save resources, such as memory. Throughout this document, in the process of creation of entities, views will open. For example, when you create an SQL statement, a window with many views will open. When you are done with this view, it may not be needed. Close the unneeded windows by clicking the “X” at the view’s upper right corner. By closing these unneeded windows, you will make more memory available on you pc.

I. CREATE A TABLE USING WSAD, THEN EXPORT IT TO THE DATABASE.

A. CREATE WEB AND ENTERPRISE APPLICATION PROJECTS

1. Open WSAD, and go to the Web Perspective.

2. Create a new Web Project “PracticeWebProject”.

3. Create a new EAR “PracticeEAR”.

IDS 517 Page 2 of 43

Figure 1. Create a New Web Project Figure 2. Put Web Project into PracticeEAR

Figure 3. Web Project Features Figure 4. Web Project and EAR in Hierarchy

B. DATABASE SETUP – UPDATING PERSISTENT DATABASE FROM LOCAL WSAD DATABASE

1. Get a connection to the database.2. Import it into your project. 3. Create your tables, 4. Update the persistent database on the DB Server. This will update the tables on the database.

NOTE: For now, we will assume that all you have to do is “reconnect” to get a connection to the database. Assume the connection has the name idsConnection.

Select the Data Perspective. Right click on “idsConnection” and choose “Reconnect”.

Expand the connection. Notice under “GLANCE” and “Tables” there are currently 2 tables. We will create the third and fourth tables for the class example, then create the SQL insert statements, and populate the tables with some data.


Figure 5. Reconnect to Database Figure 6. Import DB to Web Project

Figure 7. Locate DB and Tables in DB Servers Figure 8. Select Tables to Import

Select the tables for your group. In the example here, we will select GLANCE.JOB and GLANCE.PART.

Right click on the selected section, and choose “Import to Folder”. On the window that opens, select “Browse” (not shown).

On the “Folder Selection” window, choose “PracticeWebProject” and then “OK”.

NOTE: You may be asked several questions about creating folders. Allow folder creation by choosing “Yes”.

1. Your view in the Data Perspective should appear as shown below. See the folder “databases”.

2. Right click on “WEB-INF/databases” The “New” window opens. (Figure 12).

NOTE: Alternatively, you can also open the Data Definition view, and right click on “Table”, as shown in Figure 11.

3. Select Data on left and “Table Definition” on right. We will now create a table SUPPLIER.


Figure 9. Select Web Project for DB Import Figure 10. Database Ready for Import

Figure 11. New Table Definition from Data Definition Figure 12. Create a New Table

Click the “Browse” button to the right of “Database/schema”, and find the database and then the schema. For class, the schema will be “ids517team#”, but here it is “GLANCE”, as it is on my home pc. Select the schema, and then “OK”.

NOTE: If you do not select the schema, but select the database instead, you will get an error, and not be able to create your table.

If you create 4 columns, then your columns might appear as in Figure 16.


NOTE: Make sure, for each VARCHAR, that you do NOT check “For bit data”. Otherwise, you will end up with an array of bytes, instead of a String, when you create your Java bean later on.

Click “Finish”.

Figure 13. Create a New Table Figure 14. Select the DB Schema

Figure 15. Name the Table Figure 16. Shows the Table's Columns

You can see the results in the Data Perspective. Notice the new table SUPPLIER: “idsConnection...SUPPLIER.tblxmi”.

Next, we create the table “SPJ_TABLE”. (I use SPJ_TABLE instead of SPJ to avoid confusion). The procedure is the same as above, but you have foreign keys. I won’t go through this here. Only the shots from the primary and foreign key creation are shown.

When done, you should see the table SPJ_TABLE in the Data Perspective under “databases”.


Figure 17. Table SUPPLIER in Perspective Figure 18. Selection of Primary Key

Figure 19. Selection of Foreign Keys Figure 20. Table SPJ_TABLE in Perspective


WE WILL NOW UPDATE THE PERSISTENT DATABASE.

In order to update the persistent database, you need to have the “Data Definition” perspective open.

NOTE: The Data Definition perspective is NOT the same as the Data perspective.

1. On the menu at the top of WSAD, choose “Window Show View Other”.

2. Expand “Data” and select “Data Definition”. Press “OK”.

3. Expand your project until you locate your database, which is under “WEB-INF/databases”.

4. Right click on database and select “Export to Server”.

NOTE: On the “Data Export” page, choose what you want to export. Be as selective as you wish. Best idea is to only choose the tables that are new.

NOTE: If you only want to export a table, or a few tables, only select those tables, and then right click on them, and “Export to Server”. Then you won’t have to worry about update other tables that are ok.

Figure 21. Opening Another View Figure 22. Selecting Data Definition View


Figure 23. Select Tables to Update Figure 24. Display Choice of Tables Updated


NOTE: You will be asked to create a new connection (Figure 25). Remember that this is just a connection to the database. You can have as many connections to any database as you wish. YOU DO NOT HAVE TO CREATE A NEW CONNECTION. YOU CAN ALTERNATIVELY CLICK THE “Use existing connection”, shown at the bottom of Figure 25.

Select “Finish” to do the update. Then observe the table in the DB Servers window.

NOTE: You need to do a “Refresh” on your “idsConnection” to see the update, as shown in Figure 26.

If you created another connection, you can delete it. Below, the temporary connection is named “Con5”.

Figure 25. A New Connection to the DB Figure 26. DB Servers View of Updated DB


II. SQL STATEMENT AND JAVA BEAN CREATION

1. CREATING AN SQL STATEMENT – AN INSERT

Now, let’s make our first SQL statement, which will be an Insert. After that, we will create the associated Java bean.

1. Close the Data Definition perspective.

2. Open the Data perspective.

3. Right click on PracticeWebProject, then select New Other.

4. Select “Data” on the left, and “SQL Statement” on the right.

A new window opens : “Create a New SQL Statement”.

5. In the list, choose “Insert”. Deselect “Create a new database connection” (Only in WSAD version 5.1)

6. Your are then asked to locate the database. Find it in WEB-INF/databases.

7. Click “OK”, and “IDS” will appear in the text field after “Database model”.

Figure 27. Opening SQL Statement from Data Perspective Figure 28. Pick "Data" and "SQL Statement"

Figure 29. Choose the INSERT Type Figure 30. Locate Existing Database


1. In the next window (Figure 31), enter “insertJob” as the name of the SQL statement.

NOTE: In WSAD version 5.0, Figure 31 is part of the previous window.

2. Expand the schema (Figure 32) to find the JOB table, as that is the only table you need.

3. Select “JOB”, and use the “>” to put “JOB” in the “Selected Table” text field.

Figure 31. Name the New SQL Statement

Figure 32. Select the Table(s) Used in the SQL Statement


Click the “Insert” tab. Notice that the column “Value” has no data. We want to do the following:

1. Put “:num” in the Value column of row JNUM.2. Put “:name” in the Value column of row JNAME.3. Put “:city” in the Value column of row JCITY.

NOTE: It is VERY IMPORTANT to include the colon “:” before variables num, name and city. The colon identifies num, name and city as variables.

Double click in the Value column of JNUM row. The cell changes color. Type in “:num”. Hit the Enter key.Repeat the procedure for JNAME and JCITY, putting in “:name” and “:city”, respectively.

The completed window looks like this:

You are now ready to test the SQL statement insertJob. It will actually update your database.

Click “Next”. You will see the WSAD-generated SQL:


Figure 33. SQL Statement in SQL

You will want to test this. Press “Execute”. You will get a blank window. Press “Execute” at the bottom of that window (not shown). Follow the same procedure (from above) to enter data into the right column.

Figure 34. Enter Actual Data For Testing


When you press “Finish”, you will execute the statement. Since we are doing an insert, no data is returned to display.

Just press “Close” and then “Finish”. You are done!

VERIFY THAT DATA WAS ENTERED

(Optional) Before we create the Java Bean, let’s verify that the data was actually written to the database.

1. Select Data perspective. DB Servers window should appear somewhere on your monitor, but usually below the Data perspective.

2. Expand idsConnection until you see the JOB table.

3. Right click on the JOB table, and select the option “Sample Contents”. You will see the row of data appear, as shown below.

Figure 35. Locate Table in DB Servers View Figure 36. Select All Rows From JOB Table

Figure 37. View JOB Rows in DB Output View


2. GENERATE THE JAVA BEAN

OPEN THE OUTLINE VIEW TO CREATE THE JAVA BEAN

Before generating the Java bean, you can see the results of your SQL statement creation in the data (or web) perspective. Expand databases” , and you will see an entry with a suffix “sqx”. If you wish to see the information you entered for the SQL statement, you double-click on the “*insertJob.sqx” text, and several windows open, displaying the statement as you entered it. (NOTE: The outline view may already be open, so this may be optional).

Next, you need to locate the “Outline” window. In case it is not on your screen, there is a way to get it.

1. From the WSAD menu, select Window Show View Other (Figure 39).

2. Next, in the “Show View” window that opens (Figure 40), expand “Basic”, highlight “Outline” and press “OK”.

3. In the outline view (Figure 41), right click on the SQL statement name “insertJob”.

4. Select “Generate Java Bean”.

Figure 38. Locate SQL Statement in Perspective Figure 39. Open a New View

Figure 40. Select Outline View Figure 41. Generate Java Bean From Outline View


In the window that opens, select the web project as the Source Folder. We want to put the beans in a package, which we will call “bean”. Put this in package “bean”, and name the bean “InsertJob”. Notice that the name of the bean is identical to the name of the SQL statement, except the first letter is capitalized. Since we are creating a Java class named “bean.InsertJob.class”, we should follow Java convention and always capitalize the first letter of a Java class.

Figure 42. Specify Location, Package and Name of Java Bean

Make sure the “Use Driver Manager” radio button is selected, with “COM.ibm.db2.jdbc.net.DB2Driver” in the “Driver name” field. That field, and the URL field are filled in automatically.

Figure 43. Specify the Driver Manager Connection (set by default)


Press “Finish”. The next screen displays the methods that are created in the InsertJob bean class. Note that the method we will use is “execute()”. This method will always be created in beans, but it may have different arguments for different SQL statements. Notice that the first two will always be the same: “username” followed by “password”. These refer to the username and password to your database.

Figure 44. WSAD-Generated Java Bean Methods

You can click “Finish” now. In the Data or WebProject perspectives, if you expand the project, under “bean” you will see the Java source code InsertJob.java”.

Figure 45. Java Bean in Data or Web Project Perspective


If you double click on “InsertJob.java”, you can see the code of method initializer() that connects to the database, and creates the Statement object that does the insert:

protected void initializer(){

modify = new DBModify();try{

modify.setDriverName("COM.ibm.db2.jdbc.net.DB2Driver");modify.setUrl("jdbc:db2://localhost:6789/IDS");modify.setCommand(

"INSERT INTO GLANCE.JOB ( JNUM, JNAME, JCITY ) “ +VALUES ( :num, :name, :city )");

DBParameterMetaData parmMetaData = modify.getParameterMetaData();parmMetaData.setParameter(

1,"num",java.sql.DatabaseMetaData.procedureColumnIn,java.sql.Types.VARCHAR,String.class);

parmMetaData.setParameter(2,"name",java.sql.DatabaseMetaData.procedureColumnIn,java.sql.Types.VARCHAR,String.class);

parmMetaData.setParameter(3,"city",java.sql.DatabaseMetaData.procedureColumnIn,java.sql.Types.VARCHAR,String.class);

}catch (SQLException ex){

ex.printStackTrace();}

}

Method initalizer() is called from the constructor:

public InsertJob(){

super();initializer();

}


In your code, which we will develop shortly, you will call the execute method. the parameters are set, and then the SQL statement in initalizer()

public void execute(String userid,String password,String num,String name,String city)throws SQLException

{try{

modify.setUsername(userid);modify.setPassword(password);modify.setParameter("num", num);modify.setParameter("name", name);modify.setParameter("city", city);modify.execute();

}

// Free resources of modify object. finally{

modify.close();}

}

There are other details that have not been mentioned, but essentially, you must know how to use the execute method in your jsp.

Before we develop another bean, let’s create the jsp that does the insert into the JOB table.


3. CREATE THE JSP PAGE FOR THE INSERT JAVA BEAN

Before we create the first jsp, which we will name “insertJob.jsp”, we need to do something to allow certain classes in the COM package to be found. This solutions works in the lab:

1. In the Web Perspective, locate “WebContent”. Right click on this, and select “Import” in the context menu which opens. We want to find db2java.zip, and selectively import only the COM package into the WebContent folder.

2. On the “Import” window, select “Zip File”, which is at the bottom of the list of options.

3. Deselect “com”, but leave “COM” checked. Java is case sensitive, so COM and com are two different Java packages.

4. Press Finish. You will see “COM” under WebContent in the PracticeWebProject hierarchy.

Figure 46. Select Import Under WebContent Figure 47. Choose the Zip File Import Option

Figure 48. Deselect com, Keep COMFigure 49. Display of COM in Perspective View

(NOTE: InsertBean should be InsertJob)


CREATION OF THE FIRST JSP FILE. Now create and test our first JavaServerPages file.

1. Select the Web Perspective (Figure 50). Right click on “WebContent”, then select “New”. Notice “JSP File”. Select “JSP File”.

2. Name the file “insertJob.jsp”. (Figure 51)

3. Click “Next”.

NOTE: It’s important, but not required, to create names of SQL statements, JavaBeans and jsp files that help you attach one to the other. That is, by calling this first jsp file “insertJob.jsp”, we know we will use the methods of “InsertJob.class”, which was created from the SQL statement “insertJob”.

The screen shots are from WSAD 5.1, which differ slightly from WSAD 5.0.

4. Make sure that “HTML Transitional’ or something similar is visible in the “Document type” textfield (Figure 52).

5. Click “Finish”.

In the PracticeWebProject hierarchy, under WEB-INF (and above “bean”), you should see the file “insertJob.jsp”. It is very important to find this file, as you will need to open it up and modify it to make it do what you want it to do.

Figure 50. Locate JSP File For Creation Figure 51. Specify Name of JSP File

Figure 52. Set Document Type as Transitional Figure 53. View insertJob.jsp in Perspective View


Now double click on “insertJob.jsp”. A new view opens called the “Page Designer”. This view has three tabs at the bottom left corner. You will primarily use only the “Design” and “Source” tabs.

Note: This is where your programming skills are needed. There isn’t much programming, and what you need will be shown. But I can’t code for every situation. Still, if you study the jsp files in this document, you should have sufficient information to do just about anything you need to do.

Figure 54. The WSAD-Generated (Default) Text of the File insertJob.jsp


If you click on the Design tab, you can access elements that can be placed on the page without any coding.

In Figure 55, I selected the default text, changed it to “INSERT JOBS”, centered it, made it bold and larger, all by using respective icons located below the WSAD menubar.

NOTE: To get icons to show, select menu “Toolbar” on the WSAD menubar. Click whatever you wish to appear below the menubar as icons. Then you can click icons instead of using the popup menus.

After entering the text, I hit “Enter”. This puts a break between the title and whatever comes next.

Right click on the page to get the popup menu. Select insert form and input fields. You will mostly use elements Form, Submit Button, Text Field, and List Box. On the previous context menu, notice Table, which you should use a great deal. Note that all of these elements are placed, for most applications, within a form.

Figure 55. Insert a Form From the Design View of the insertJob.jsp Page


In Figure 56, a form is being created. Within the form, I have placed a table, with 3 rows and 2 columns. The left column will list the fields of table JOB, and the right column will be the input from the user.

We need to open an “Attributes” view. This will allow, for each element type, specification of certain parameters. You right click on the page, or on an element to open up the Attributes view. When it is open, when you select an element, the appropriate attributes for that element will appear.

Figure 56. Creating a Table and Opening the Attributes View

Figure 57. The Attribute View for a Table


Center the table. Then, in each cell of the second column, we place a textField. Give each field a descriptive name. For example, the field that will hold the job number will be named numField. This then is like a variable, and should start Next, we put in a submit button.

Figure 58. Text Field Creation Figure 59. Submit Button Creation

Figure 60. Completed Design for insertJob.jsp


NOTE: You must save your work so the WSAD environment can update the appropriate servlets and related files. But do not save too often, as this takes up resources, such as RAM. On systems that have low RAM, there will be excessive page swapping by the operating system. The result is an incredibly long time to do a save. One fast way to save your file is to press the control key and then the letter “s”.

Let’s look at the code, before changes are made.

<?xml version="1.0" encoding="ISO-8859-1" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><%@ page language="java"contentType="text/html; charset=ISO-8859-1"pageEncoding="ISO-8859-1"%><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><title>insertJob.jsp</title></head><body><h2 align="center">INSERT JOBS</h2><p><br /></p><form><center><table border="1">

<tbody><tr>

<th align="left" valign="middle">Job number:</th><td><input type="text" name="numField" size="22" /></td>

</tr><tr>

<th align="left" valign="middle">Job name:</th><td><input type="text" name="nameField" size="22" /></td>

</tr><tr>

<th align="left" valign="middle">Job city:</th><td><input type="text" name="cityField" size="22" /></td>

</tr></tbody>

</table><br /><input type="submit" name="processBtn" value="Process" /></center></form></body>

</html>

THIS IS THE PLAN. You must have a plan before doing design. Otherwise, you will waste lots of time.

Whenever the page opens, the fields will be blank. User enters data, or fails to enter complete data, and then presses the submit button. The current page is then redisplayed. Why? Because there is no “ACTION = newPage “ within the opening form tag. This means the current page will be called again when submit is pressed.

<form><center><table border="1">

<tbody><tr>

So, if we want to go to “index.jsp” after pressing the button, we would change the above to this:


<form ACTION=”index.jsp”><center><table border="1">

<tbody><tr>

Continuing on with our plan, when the button is pressed, all the html code is again processed. What we want is to read the data from the text fields before redisplaying the the textFields. Otherwise, we won’t have data in the textFields when they are read. So we put code before the text fields. The code includes Java code. I won’t go through the code creation, but you can learn by examining the results.

If you put your Java Bean in a folder other than JavaSource, then you must tell WSAD where the beans are stored. Assume that we put the beans in the bean folder, instead of Java Source. Here’s what you must do:

1. Right click on the PracticeWebProject in the Data or Web Project perspective.

2. Select “properties” on the popup menu.

3. On the window (Figure 61) that opens, select “Java Build Path” on the left.

4. Notice that “../JavaSource” is listed. Delete this, as our bean is not in that location. (It can be, if you wish. This is your choice).

5. Press “Remove’ and then “Add Folder”.

6. Find PracticeWebProject/bean by expanding the hierarchy (Figure 62) that is displayed, select it, and close that window. PracticeWebProject/bean now appears.

7. Press “OK” to close the Properties window (figure 61).

Figure 61. Setting the Java Build Path


Figure 62. Locating the Java Source Folder

We just set up the system to handle the bean location. This will work for all the other beans.

Here is our code so far. All we have done is

1. created some variables,

2. retrieved the textField data and stored it in those variables,

3. created an InsertBean object, and

4. called the InsertBean method that sends the sql insert statement to the database.


<%!String num, name, city;InsertJob ij;

%>

<title>insertJob.jsp</title></head><body><h2 align="center">INSERT JOBS</h2><p><br /></p><form><center><table border="1">

<tbody>

<%// Retrieve data from textFieldsnum = request.getParameter("numField");name = request.getParameter("nameField");city = request.getParameter("cityField");

// Create an InsertBean object, which causes the// connection to the database, and sends an sql insert// statement to the database.ij = new InsertJob();ij.execute("glance", "gl122855", num, name, city);

%>

<tr>

But we are done, aren’t we? There is nothing left to do. This will not be the case in the following examples. You must create a selectJob bean that will return all the rows in the JOB table. We can even put a button on insertJob.jsp that will link directly to that page.

AVOID SENDING NULL DATA TO THE DATABASE

But there is at least one problem with the above code. What happens when the page first opens? All the fields are blank, so the variables num, name and city are all null. We will get an SQLException if we send a query with null values. So, put in some code that creates the InsertJob object and calls the method execute() only if all of those variables are not null:

// Create an InsertBean object, which causes the// connection to the database, and sends an sql insert// statement to the database.if( num != null && name != null && city != null ){

ij = new InsertJob();ij.execute("glance", "gl122855", num, name, city);

}

We can go further and check each field individually for nulls, instead of together, as done above. Then you can report back which field has no data. You can also check that the data entered is an integer, if it was meant to be an integer, by using the static method parseInt() of class Integer.


RUN THE INSERT BEAN ON A SERVER

Before we continue, it would be nice to see this jsp in action. Let’s run it on a server.

1. Find insertJob.jsp, and right click on it. (Figure 63).

2. Select “Run on Server”. A “Server Selection” window will open. (Figure 64)

NOTE: If this is the first time you have run the jsp on a server, you will not see a server listed which has already been used for this project. So, select “Create a New Server”. In the accompanying list, select the “Test Environment’ under the WSAD heading, as shown below.

Figure 63. Finding "Run on Server" Figure 64. Specifying the Server


If you are lucky, you will see the following in the WSAD tool. But you can take the ULR, and paste it in an independent browser. You can optionally set WSAD to always run the pages in a separate browser. Later, I will show you how to do this.

Figure 65. The jsp Running in Internet Explorer


CREATE A JSP THAT DISPLAYS ALL THE CONTENTS OF A TABLE

The insertJob.jsp file was pretty easy, as all we needed to do was execute(). But with select, not only must we execute(), but we must also retrieve tuples from the database. But still, you will see how easy this can be.

NOTE: As in the insertJob SQL statement, we must create a selectAllJobs SQL statement.

1. Open the Data Perspective.

2. Right click on PracticeWebProject, then select New Other.

3. Select “Data” on the left, and “SQL Statement” on the right.

A new window opens: “Create a New SQL Statement”.

4. In the list, choose “SELECT”. Deselect “Create a new database connection (only in WSAD version 5.1).

5. You are asked to locate the database. Find it in WEB-INF/databases.

6. Click “OK”, and “IDS” will appear in the text field after “Database model”.

Figure 66. Opening SQL Statement from Data Perspective Figure 67. Pick "Data" and "SQL Statement"

Figure 68. Choose SELECT Type Figure 69. Locate Existing Database


7. Enter “selectJob” as the name of the SQL statement

8. Expand the schema (Figure() to find the JOB table, as that is the only table you need.

9. Select table “JOB”, and use the “>” place “JOB” in the “Selected Tables” list on the right.

Figure 70. Name the New SQL Statement "selectJob"

Figure 71. Select the Table(s) Used in the SQL Statement


We will need all the data for each tuple. Highlight the JOB table, and press the “>>” in the center. This will copy all the fields of JOB into the Selected Columns list on the right.

Figure 72. Select All the Columns in Table JOB

There is nothing left to do, except test the generated SQL statement. Press”Next>”. Then “Execute” to test the statement.

Figure 73. WSAD-Generated SQL Statement for selectAllJobs


When you press Enter, a new window opens. Press Enter on that window, and all the tuples in JOB should appear. You can then press Close and Finish. The new selectAllJobs sql statement will be generated. You can find this statement in the WEB-INF/database.

Figure 74. The selectAllJobs.sqx file

GENERATE THE JAVA BEAN

1. In the Outline View, right click on “selectAllJobs”.

2. Choose “Generate Java Bean” from the popup menu (Figure 75)

3. Set location where beans are located. (We see they have been moved to PracticeWebProject/JavaSource)

4. Set package as “bean”

5. Set name to “SelectAllJobs”

6. Press “Next” to specify the Driver Manager (Figure 77)

7. Specify “COM.ibm.db2.jdbc.net.DB2Driver” as the Driver Manager, if not already present

8. Press Next. You will then see the WSAD-generated SelectAllJobs Java Bean methods. There are two classes generated. One gets the connection to the database and executes the query, and returns the tuples (SelectAllJobs) and the other has methods that allow you to extract field values from each tuple returned (SelectAllJobsRow).

NOTE: For all SELECT Java Beans, a class with the bean name you specified will then be returned, and also another class with “Row” appended to that bean name. The is a “helper class”, in that it provides the methods to help you get your information.

9. Press “Finish”. You can see your bean classes in the Web Perspective under PracticeWebProject/Java Source

Figure 75. Generate Java Bean Figure 76. Java Bean Location, Pkg and Name


Figure 77. Specify DriverManager as COM.ibm.db2.jdbc.net.DB2Driver

Figure 78. Resulting WSAD-Generated SQL Statement Figure 79. Location of Bean classes


CREATE THE JSP PAGE selectAllJobs.jsp

10. Open the Web perspective

11. Right click on “WebContent” to view the popup window (Figure 80).

12. Select New JSP File

13. Enter name “selectAllJobs.jsp” as the name of the JSP File (Figure 81). Press “Next >”

14. The Document Type selection must include the word “Transitional” (Figure 82).

Your JSP File has been generated. The Page Designer opens on its Source view. (Figure 84).

Figure 80. Creating a New JSP File

Figure 81. Naming the JSP File


Figure 82. Select "Transitional" as Document Type

Figure 83. SelectAllJobs.jsp Location

Figure 84. The JSP Page Designer, Open on Source View


MODIFYING THE JSP PAGE

A JSP file that shows data is typically designed with two table rows.The first row lists the field names, and the second is included in a java loop, that creates a new row for every tuple returned by the query.

There are three fields in the JOB table. As in the insertJob.jsp, we will create a form in selectAllJobs.jsp which contains a table. The table we create will have 2 rows and 3 columns. (Recall the table in the insertJob.jsp had 3 rows and 2 columns).

Figure 85 shows the result of adding the form, table, and the submit button. Also modified is the heading. In addition, we will add another form which contains a submit button. This submit button, named insertBtn, will be a link to the insertJob.jsp file.

NOTE: Buttons are one way of linking to other pages. But each submit button must be enclosed in its own form. Another way is to use just a text link. These links can be anywhere, so you may have more than one per form.

Figure 85. Design View of selectAllJobs.jsp in Page Designer

START THE PROGRAM

You can locate either insertJob.jsp or selectAllJobs.jsp. I added a button to insertJob.jsp that redirects you to selectAllJobs.jsp. So, you get to the other JSP file from either one. You definitely need to put such links on your pages, or you won’t be able to go anywhere from your page. Also, the process button on the selectAllJobs page just reloads the page again. Should the database be updated from another location, you can see the update by pressing either the refresh (on the browser) or the process button.


Figure 86. selectAllJobs.jsp in WSAD Browser

Figure 87. insertJob.jsp in WSAD Browser


We will now modify the code. I will show the completed code, and then explain it in some detail.

123456789101112

1314151617

1819202122232425262728

293031323334353637383940

414243444546474849505152535455

<?xml version="1.0" encoding="ISO-8859-1" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><%@ page language="java"contentType="text/html; charset=ISO-8859-1"pageEncoding="ISO-8859-1"import = "bean.*"%><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<%!SelectAllJobs saj;SelectAllJobsRow[] rows;SelectAllJobsRow row;

%>

<title>selectAllJobs.jsp</title></head><body><p align="center"><font size="+2"><b>LIST OF ALL JOBS</b></font></p><p><br /></p><form><center><table border="1">

<tbody align="center"><tr>

<th>Job Number</th><th>Job Name</th><th>Job City</th>

</tr>

<%saj = new SelectAllJobs();saj.execute("glance", "gl122855");rows = saj.getRows();for(int i = 0; i < rows.length; i++){

row = rows[i];%><tr>

<td><%= row.getJOB_JNUM() %> </td><td><%= row.getJOB_JNAME() %></td><td><%= row.getJOB_JCITY() %></td>

</tr>

<%}

%></tbody>

</table><br /><input type="submit" name="processBtn" value="Process" /></center></form><p><br /></p><form action ="insertJob.jsp"><div align="center"><input type="submit" name="insertBtn"

value="Insert Job" /></div></form></body></html>


Line 10: import = "bean.*"This is part of the tag that begins on line 6 and ends on line 11. This is in a “page directive”, which has the start tag “<%@ page”. The import allows the generated servlets to know what the classes are which are referenced in the jsp file. We see that the package “bean” is referenced. If you do not have this, then you will probably get execeptions when you save selectAllJobs.jsp.

Lines 13-17:<%!

SelectAllJobs saj;SelectAllJobsRow[] rows;SelectAllJobsRow row;

%>Note that the code starts with the tag “<%!” and ends with “%>”. These are called ‘declarations” The exclamation mark “!” in the start tag denotes a section that contains declarations of variables and implementation of methods. As you can see, there are currently no methods here..

You can put these declarations with the code starting at line 30, instead of in this declaration section. This is a programming issue.

The class SelectAllJobs has the execute() method. We create an object of this class in order to call execute() with correct parameters.

The tuples are returned in an array of class SelectAllJobsRow. I call the variable “rows” since it may contain many rows or tuples.

Each reference in the SelectAllJobsRow[] rows is a reference to a SelectAllJobsRow object. We will have the need to get one tuple at a time, store it in variable row, and then use the methods of the SelectAllJobsRow class to extract (or get) the field values out of the row object.

Lines 29-43

<%saj = new SelectAllJobs();saj.execute("glance", "gl122855");rows = saj.getRows();for(int i = 0; i < rows.length; i++){

row = rows[i];%><tr>

<td><%= row.getJOB_JNUM() %> </td><td><%= row.getJOB_JNAME() %></td><td><%= row.getJOB_JCITY() %></td>

</tr>

<%}

%>

30. We create a SelectAllJobs object, and store a reference to this object in variable saj.

31. Execute the query that returns all the tuples in the JOB table.

32. Use the SelectAllJobs method getRows() to return all the rows in JOB, and store them in the rows arrray.

33. The for-loop. Allows us to step through the array, one index at a time.

34. Each row[i] is a reference to a SelectAllJobsRow object, so store it in row.

Note that the previous lines were wrapped in tags “<% .. %>”. This denotes Java code.

Lines 36-40: This is one row. The start of each row is line 36, and the end is line 40.

Line 38 has Java code row.getJOB_NUM(). This method returns the JNUM value of the particular row. This is surrounded by tags “<%= .. %>”. These are Expressions. The code inside is converted to a String.

Lines 39-40. Similar to line 38. Retrieves the JNAME and JCITY of the current row object.

Lines 41-43: Closes the for-loop.


Documents

Lance WSAD Manual