Rrwdrichclient PDF

Build a Java auction client
Using the Java Visual Editor in Rational Web Developer 6.0
Skill Level: Introductory
Srimanth Gunturi
EMC
David Kuck
Software Engineer
EMC
Dr. Gili Mendel

EMC
13 Dec 2004
The Java Visual Editor is a GUI builder that allows you to quickly develop
cross-platform, graphical rich-client applications. This tutorial shows how to use the
Visual Editor in IBM Rational Web Developer for WebSphere Software 6.0 to build a
simple auction client.
Section 1. Before you start
About this tutorial

IBM® Rational® Web Developer for WebSphere® Software 6.0 provides an
extensive set of tools designed to quickly build JavaTM and dynamic Web solutions.
Web Developer is built on the Eclipse technology, which includes the Visual Editor
for Java. The Rational Web Developer environment includes significant productivity
enhancements such as data definition and data binding support. In this tutorial, you
will use Rational Web Developer to build a Java auction client that interacts with a
local database and a set of auction site Web services. Your finished application will
Build a Java auction client Trademarks

© Copyright IBM Corporation 2004. All rights reserved. Page 1 of 37
developerWorks® ibm.com/developerWorks
allow you to view your local warehouse stock, view all of your active auction listings,
create new auction listings from warehouse stock items, and query the auction site.
You will use the Data perspective to deploy an IBM DB2® Universal Database
Express V8.2 database definition. Then, you will use the Java Visual Editor to build a
graphical user interface (GUI) that dynamically accesses the local database and
remote Web services supported by the auction server. The data binding support has
significantly improved the task of connecting to various data sources.
This tutorial is written for developers with some Java experience who need to quickly
build rich-client applications for basic data access solutions. This tutorial is also
helpful for new Java users who want to learn more about event-driven user
interfaces and data access. Previous experience with visual editors will help you
complete the tasks described.
If you are interested in building a similar application but have limited Java
experience, the tutorial Build a Web auction client: Using JSF and IBM Rational Web
Developer 6.0 demonstrates how to build a Web auction client using Rational Web
Developer.
For a list of additional information you might find helpful, see Resources.
Prerequisites
To complete the steps in this tutorial you need the following software installed:
• IBM Rational Web Developer 6.0. This download is listed as Rational

Web Developer Windows-Full (Rational Web Developer v6.0 for Windows
FULL includes Agent Controller for remote deployment to Websphere
application servers).
• IBM DB2 Universal Database Express V8.2
• IBM WebSphere Application Server Express 6.0
You might also want to download the SQL scripts for populating the local DB2
database used in this tutorial.
To activate the Java Visual Editor, select the Window > Preferences menu option.
Then select Workbench > File Associations and browse to the *.java file type.
Select the Visual Editor and make it the default editor.

ibm.com/developerWorks developerWorks®
Section 2. Build the user interface
Create a Java project

Create a new Java project in the Rational Web Developer tool:
1. Open the Rational Web Developer tool.
2. Select File > New > Project.
3. Select Java Project and click Next.
4. Type in a name (AuctionClient) for the project and click Next.
5. Click Finish.
Add the main visual class

You now have a blank project in which you need to add files. First, add your main
visual class:
1. Right-click on the project in the Package Explorer and select New >
Visual Class.
2. Specify a package name. I chose com.ibm.samples.auction.client.
3. Specify a class name. I chose AuctionClient.
4. In the Style window, select Swing > Frame.
5. Ensure that public static void Main(String[] args) is selected in the

desired method stubs.
6. Click Finish.
Customize the JFrame

JFrame is not a very attractive name and the default size of the frame is a bit small,
so you can change those:

1. Click on the text JFrame in the visual editor window. An editable text box
appears.
2. Type in Auction Manager.
3. Select JFrame and make sure this component is selected in the

JavaBeansTM pane in the lower left corner of the workspace.
4. Adjust the size in the Properties sheet by typing in 600,480. This resizes
the frame to 600 pixels wide and 480 pixels tall.
Add a tabbed panel

Because you want your program to perform multiple tasks, you're going to use tabs
instead of invoking new windows for each task:
1. Select JTabbedPane from the Swing Containers grouping in the palette.
2. Place this in the Center section on the JFrame.
You can now create the first tab on your panel:
1. Select JPanel and drag it onto your frame. A tab appears at the top.
2. Rename it by selecting the panel just below the tab.
3. Go to the Properties pane and change the tab title property to Local
Warehouse.
4. By default, the panel you just added uses the Flow Layout. You want to
change this. In the Properties pane, change the layout property to Border
Layout.
Add a table
You can now add the table to display your local warehouse contents. First, reserve
space for some future controls by placing a panel on the south part of the tab:
1. Select JPanel in the Swing Containers section of the palette.
2. Place this on the South section of the tab panel. It shows up as a small

strip along the bottom.
3. You want to reserve a larger space for this. On the Properties pane, find
the preferredSize property. The width will always consume the whole
frame, so you are not concerned about that, but you do need to specify a
height. 250 pixels is about right, so type in 10,250 for the value. Visually,
the panel should expand to 250 pixels in height on the tab.
4. Now you can properly place your results table. Select JTable on Scroll
Pane in the Swing Components section of the palette.
5. Place this on the Center section of the tab pane. The center section of a
pane with a border layout will always consume the available space, so
you can leave its height and width alone.
Section 3. Connect the client to the warehouse database
Create the database

You downloaded some scripts to populate a DB2 V8.2 database with items that
represent inventory in a local warehouse. These items can be uploaded to the
auction server as new auction items using your finished client application. Complete
the following steps to use the data perspective in the Rational Web tool to populate
your warehouse database. You can use the data perspective to create data
schemas and generate the relevant ddl files. Use existing SQL scripts to simply
populate an empty database:
1. Open a DB2 command window (Start > Programs > IBM DB2 >
Command Line Tools > Command Window) and create a database
using the following command:
db2
create
database
warehous
2. Open the data perspective using the Open a perspective icon ( ) in the
upper right corner of the workspace.

3. Note that the Data perspective capability may not be enabled at first. If it
does not show as a choice in the Select Perspective window, then check
Show all and select Data from the extended list.
Figure 1. Activate the Data Perspective
4. Select OK to enable the Data Perspective capabilities when prompted.
5. In the Database Explorer, right-click and select New Connection from the
context menu.
6. Specify a connection name. Leave the Choose a DB2 alias option

selected and click Next.

7. Select IBM DB2 Universal driver.
8. Select the WAREHOUS alias.
9. Specify the DB2 user password and test the connection.
10. If the connection succeeds, select Finish to create the connection.
11. Select No when prompted to include the database metadata.
12. Unzip the db2sqlscripts.zip file and import the warehouseDB.sql and
warehouseDB-populate.sql scripts into the AuctionClient project:
1. Create a folder named Scripts in your AuctionClient project.

Select the project and right-click. Select New > Folder in the
Navigator pane view.
2. Select the Scripts folder and right-click. Select Import from the
context menu.
3. Browse to the directory location of the two SQL files and select it.
13. Once you get the files imported, select the warehouseDB.sql file and
right-click. Select Deploy from the context menu.
14. Select Next twice and verify that the existing Warehouse database
connection is selected.
15. Select OK and commit the changes.
16. Repeat the process for the warehouseDB-populate.sql script to populate

the database with items.
17. Close the Data perspective.
Create the WarehouseAuctionItem data type

Now you have a table on your frame and your database is populated. You need to
create a facade class called a Java Data Factory. This Java Data Factory is
responsible for connecting to the database as well as issuing the appropriate SQL
query(s) and returning the results in the form of an array. Before you can create this
class, create the data type that is represented by the SQL database schema.
You need an integer ID property and strings shortName and itemDesc. Create the
data type:

1. Right-click the com.ibm.samples.auction.client project and select New >

Class.
2. For name, type in WarehouseAuctionItem.
3. Make sure that creating a stub for main() option is unchecked.
4. Click Finish. The new Java file appears in the editor.
5. Add the following to the class:
private int ID;

private String shortName;
private String itemDesc;
Right-click on one of these fields and select Source > Generate Getters and
Setters:
1. Click Select All.
2. Click Finish. Setters and getters are now generated for the properties you
need.
3. Save and close this file in the editor.
Create the Java Data Factory

Now that you have created your data type class, you can create your Java Data
Factory.
Create another new Java class and name it DatabaseDataSource. Simply replace
the contents of the generated file with the following:
package com.ibm.samples.auction.client;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.Statement;
import java.util.Vector;
public class DatabaseDataSource {
public WarehouseAuctionItem[] getAuctionItems(){
WarehouseAuctionItem[] items;
Vector auctionVector = new Vector();
Connection conn = null;
Statement sqlstatement;

try {
// Set up the driver needed to connect to DB2 Universal DB
Class.forName("com.ibm.db2.jcc.DB2Driver").newInstance();
// Create the jdbc connection string
conn = DriverManager.getConnection("jdbc:db2:WAREHOUS");
// A debug statement to ensure you actually did connect to the database
System.out.println("DB Connection Successful.");
} catch (Exception e) {
e.printStackTrace();
}
try {
// Set up the SQL query that will select all items from your local warehouse.
sqlstatement = conn.createStatement();
ResultSet results = sqlstatement.executeQuery("SELECT *
FROM WAREHOUSE.WAREHOUSE_ITEM");
// Place all of the results in a vector with the appropriate data type.
while(results.next()){
WarehouseAuctionItem item = new WarehouseAuctionItem();
item.setID(results.getInt(1));
item.setShortName(results.getString(2));
item.setItemDesc(results.getString(3));
auctionVector.add(item);
}
} catch (Exception e1) {
e1.printStackTrace();
}
// Place all the elements from the vector into a properly-typed array.
items = new WarehouseAuctionItem[auctionVector.size()];
for(int i = 0; i<auctionVector.size(); i++) {
items[i] = (WarehouseAuctionItem)auctionVector.elementAt(i);
}
return items;
}
}
Save and close the new file. Note that the comments in the file explain exactly what
is happening in the class.
Create a Java Bean Data Source

Before you can hook the database up to the table, you need a Java Bean Data
Source for your binders to talk to:
1. Select Java Bean Data Source from the Data Sources category in the
palette. It will ask to generate some classes automatically. Click OK.
2. Click in the white space next to the frame. A Java Bean Data Source will
be placed there. At first it says Incorrectly Configured. This is to
be expected, but you can correct this by configuring it.
3. Click on the object and then select the className property from the
Properties sheet.
4. Type in

com.ibm.samples.auction.client.DatabaseDataSource.
5. Rename javaBeanDataSource by selecting the field name property and

typing in DatabaseDataSource.
Connect the table to the data source

Now, you are ready to actually hook up the table to the database:
1. Click on the table. A Bind... option appears in the upper-left of the table.
2. Click Bind...
3. In the Table Data Bindings window, click New Data Source Data Object.
Various objects are automatically generated upon doing this.
4. In the New Data Source Data Object window, click the Source Type
drop-down menu. Select Java Bean Data Factory.
5. Ensure that DatabaseDataSource is selected for the Data Source and

that getAuctionItems() is selected for the Source Service.
6. Click OK.
7. Back in the Table Data Bindings window, ensure that

warehouseAuctionItemRows is selected under Data Objects.
8. Add the ID and shortName properties under Data Object Properties to

the Table Columns by selecting each and clicking the yellow, right arrow.
9. You can now rename each column as you see fit. Click on each item in
the Column Title column and rename ID to Item Id and shortName to
Item Title.
10. Click OK.
If you want, you can resize the columns for aesthetics:
1. Click the Item Title column heading.
2. In the Properties sheet, change the preferredWidth to 500.
Test the application

Select Run > Run As > Java Bean. The application starts and displays the form as
you designed it, but does not display any data. Upon examination of the Console
tab, you can see that an SQLException is being generated. This can be easily fixed
by referencing the appropriate database driver:
1. Right-click the AuctionClient project and select Properties.
2. Select Java Build Path.
3. Select the Libraries tab.
4. Click Add External JARs.
5. Navigate to <db2_install_dir>\java\
6. Select both the db2jcc_license_cu.jar and the db2jcc.jar files.
7. Click OK.
Run the project again as a Java Bean again and instead of an exception, you should
get data returned to your table.
Figure 2. Auction Client with populated data table

You want to be able to select any of these items and then, in turn, add that item to
the main auction Web site. In the next steps you will add editable fields and selection
information.
Section 4. Make the warehouse items selectable
Add panels for input fields

First you need to add more panel containers to hold your text boxes:
1. Click on the lower half of the frame. This should select jPanel1, which you
created earlier.

2. On the Properties sheet, change the layout property to Border Layout.
3. Select JPanel from the palette and drop it to the West part of the bottom
panel.
4. Click the newly-placed panel.
5. On the Properties sheet, change the preferredSize property to 100,10.

This guarantees a width of 100 pixels.
6. Select JPanel again from the palette and drop it in the Center part of the
bottom panel.
7. Select the panel that was just placed, change its layout to BorderLayout
on the Properties sheet.
8. Select JPanel once more from the Palette and drop it in the West part of
the panel you just modified.
9. Select the newly created panel and change the preferredSize to 400,10.
10. Select the JPanel component from the Swing Containers section of the
palette.
11. Place it on the South section of the bottom-right panel.
12. On the properties sheet, change the preferredSize to 10,40.
Your panel should look like the following in the Rational Web Developer tool:
Figure 3. Auction Client lower panel layout

Add and align labels and text fields

Next, you need text fields and labels to denote the purpose of each text field. Add
the labels first:
1. Select the JLabel component from the palette in the Swing Components
section.
2. Drop JLabel on the left-most bottom panel.
3. Click the text JLabel, to edit it.
4. Type in Local Item Id:
5. Change the preferredSize to 96,18.

6. Change horizontalAlignment to RIGHT.
7. Repeat steps 1 through 6 for Item Name, Minimum Price, and Item
Description.
Now you are ready to add the text fields:
1. Select JTextField from the palette in the Swing Components section.
2. Place the text field in the middle panel. This places a zero-width text field
on the form.
3. To make the text field larger, select the text field and then change the
columns property to 35.
4. Repeat steps 1, 2, and 3 to create two more text fields.
5. For the fourth field, create a text area instead of just a field to ensure
there is enough room for a long description. Select the JTextArea tool
from the palette.
6. Place the text area below the text fields.
7. Change the columns property to 35.
8. Change the rows property to 5.
9. Change the wrapStyleWord property to true.
10. Change the lineWrap property to true.
Add a submit button

Finally, you need a button to submit your item to the auction Web service:
1. Choose the JButton tool from the palette.
2. Place the button below the text area.
3. Click on the button to edit the text.
4. Type Submit.

Add user name and password input fields

You need just a few more text boxes to input a user name and password for
submitting the auction:
1. Select the JLabel tool.
2. Place the label on the new panel.
3. Click on the JLabel.
4. Rename it E-mail:.
5. Select the JTextField tool.
6. Place the text field on the panel next to the E-mail text field.
7. Change the columns property of the text field to 15.
8. Place a JLabel named Password: next to the text field.
9. Select the JPasswordField component.
10. Place JPasswordField next to the Password text field.
11. Change the columns property of the text field to 15.
Bind the text fields to the selected row

You are now ready to bind the Local Item ID, the Item Name, and the Item
Description to the row that was selected in the preceding table:
1. Select the first text box next to Local Item ID.
2. Click Bind....
3. Select jRowTableBinder as the Data Object.
4. Select ID for the Data Object Property.
5. Click OK.
6. Repeat steps 1 through 5 to bind Item Name to shortName and Item

Description to itemDesc.

Test the application

Run the program as a Java Bean again to ensure that all the fields are working. Your
panel should look similar to the following in the Rational Web Developer tool:
Figure 4. Auction Client with item details
The next step is to hook all of this up to the submit auction Web service. This
involves creating another facade class and some minor changes to generated Java
code. The Rational Web Developer tool currently does not natively support Web
services that have more than one argument, so you will need to create a new object
to use as a single argument.
Section 5. Connect the client to the auction Web service

Connect to the Web service
1. Click Submit on the panel you've created.
2. Click Bind....
3. Select Web Service for the Source type.
4. For Data source, click New....
5. Click Add new Web service.
6. Make sure Client proxy type is Java Proxy.
7. Click Next.
8. Enter the URL to the WSDL of the running auction service:

http://demo.alphaworks.ibm.com/AuctionSvr/wsdl/com/ibm/sample/auctionsvr/ws/Auction
9. Click Next.
10. Select Java as the Client type.
11. Select AuctionClient as the Client project.
12. Click Finish. This generates a number of classes based on the WSDL.
13. Select AuctionService, then click Finish.
14. Click Cancel on the Component Action Bindings window. You will finish
the binding later.
Create a facade class

Under Source service, you can see there is not a method for submitting an auction.
This is due to the aforementioned limitation of single-argument methods only. You
need to create your facade class now. The benefit you get from going through the
previous steps is that all of the data types used by the Web service were
automatically generated, so you can leverage those now. A new package was
created containing all of these Web service classes. In this instance it is called
com.ibm.www.
1. Right-click the com.ibm.samples.auction.client package in the Package

Explorer.
2. Select New > Class.
3. For Name, type AddAuctionWebServiceInput.
4. Ensure that a main() method generation option is not selected.
5. Click Finish.
6. Add a private field each for Credentials and AuctionInfo.
private Credentials myCredentials = new Credentials();

private AuctionInfo myAuctionInfo = new AuctionInfo();
7. Right-click in the source file and select Source > Generate Getters and
Setters....
8. Choose Select All.
9. Right-click in the source file and select Source > Organize Imports.
10. Select the com.ibm.www.Credentials class to import when prompted.
11. Save and close the file.
Add the createAuction method

Now you have the encapsulating type for your single-input method. Next, you need
to modify three Java files to introduce a new method for calling the Web service:
1. In com.ibm.www package, open AuctionService.java.
2. Add the following line (as one line):
public int createAuction(com.ibm.samples.auction.client.AddAuctionWebServiceInput

input)
throws java.rmi.RemoteException;
Note that this follows the same form as an existing method in the class.
This version simply passes in the encapsulated single argument instead
of the two arguments. Now it's time to implement the method.
3. Add the following method to >AuctionServiceProxy.java and

AuctionServiceSoapBindingStub.java files:
public int createAuction(AddAuctionWebServiceInput input)

throws java.rmi.RemoteException {
return createAuction(input.getMyCredentials(), input.getMyAuctionInfo());
}
4. Right-click in the class definition and select Source > Organize Imports
to add the necessary imports.
5. Save and close the file that was edited.
Create a data input object

To create the auctionInfo object to pass into the Web service:
1. Select Data Source Data Object from the Data Sources section of the
palette.
2. Select OK if prompted to generate some classes.
3. Place the Data Source Data Object in the white space next to the panel.
4. Click Data Source Data Object.
5. On the properties page, change the fieldName property to

addAuctionWebServiceInputDataObject.
6. Click Source Object property on the properties sheet.
7. Click the ... button to the right.
8. Under Select Class, type AddAuctionWebServiceInput.
9. Click OK.
Bind values to the data input object

Populate the data object with input parameters:
1. Click the last text field that has no binding on the panel.
2. Click Bind....

3. Select addAuctionWebServiceDataObject under Data objects.
4. Expand myAuctionInfo under Data object properties.
5. Select minPrice.
6. Click OK.
7. Click the E-mail text field.
8. Click Bind....
10. Expand myCredentials under Data object properties.
11. Select Email.
12. Click OK.
13. Click the Password field.
14. Click Bind....
16. Expand myCredentials under Data object properties.
17. Select password.
18. Click OK.
Bind the data object to the Submit button

Now that the input parameters have been bound to the data object, bind the data
object to the Submit button:
1. Click Submit.
2. Click Bind....
3. Select Web Service under Source type.
4. Select WebServiceDataSource under Data source.

5. Select
createAuction(com.ibm.samples.auction.client.addAuctionWebServiceInput)
under Source service.
6. Select addAuctionWebServiceInputDataObject under Argument.
7. Click OK.
8. Open the DatabaseDataSource.java file and add the following code

to the end.
public AddAuctionWebServiceInput createWebServiceInput(){

return new AddAuctionWebServiceInput();
}
9. Close the DatabaseDataSource.java file.
10. Right-click addAuctionWebServiceInputDataObject.
11. Click Binding Properties....
12. For Source Type, select Java Bean Factory.
13. For Data Source, select DatabaseDataSource.
14. For Source Service, select createWebServiceInput().
15. Click OK.
Submit the Web service input parameters

You have encapsulated the Web service input parameters into a single object.
Before sending the request, you need to parse the parameters into separate values
again. To do this, you need to add some code to ensure that the proper values are
passed to the Web service when the Submit button is clicked. This source code also
will create start time and end time objects, which will be passed to the Web service.
Start time is when the table is clicked. End time is three days after start time.
1. Click on the table of warehouse items.
2. There will be a line drawn connecting the table and

warehouseAuctionItemRows object. In the middle is a miniature table
icon with a Java Bean on it ( ). Select it.

3. Source code for JRowTableBinder is displayed in the source code. Add

the following source code segment after the setRowBinder() call and
before the closing curly brace }
jRowTableBinder.addSelectionChangedListener(new
ITableBinder.SelectionChangedListener(){
public void selectionChanged(SelectionChangedEvent e) {
getAddAuctionWebServiceInputDataObject().refresh();
WarehouseAuctionItem whi = (WarehouseAuctionItem)
jRowTableBinder.getSelectedObject();
getAddAuctionWebServiceInputDataObject().setValue("myAuctionInfo.shortName",
whi.getShortName());
getAddAuctionWebServiceInputDataObject().setValue("myAuctionInfo.itemDesc",
whi.getItemDesc());
java.util.Calendar tempCal = Calendar.getInstance();
getAddAuctionWebServiceInputDataObject().setValue("myAuctionInfo.startTime",
tempCal);
tempCal.add(java.util.Calendar.DATE, 3);
getAddAuctionWebServiceInputDataObject().setValue("myAuctionInfo.endTime",
tempCal);
}
});
5. Save and close the AuctionClient.java file that was edited.
At this point, you can run the program as a Java Bean again to ensure that all the
fields are working. Your results should look similar to the following:
Figure 5. Auction Client with credential fields

Section 6. Query the auction Web service
Build the panel

Now that you can submit a new item for auction, add another panel to list the active
auctions so you can verify that your new item was added to the auction site:
1. Choose JPanel from the palette.
2. Place it right next to the existing tab at the top of the existing frame. This
creates a new tab for your use.

3. Click the blank panel you just placed to select it.
4. Change the tab title on the Properties sheet to Query Auction Site. This
renames the tab.
5. Change layout to Border Layout.
6. Select JPanel from the palette.
7. Place it in the North section of the existing panel.
8. Select the panel that was just placed.
9. Change preferredSize to 10,35 to give it a height appropriate to contain

a button and a text field.
10. Select JTextField from the palette.
11. Place it on the upper panel.
12. Select the text field that was just placed.
13. Change columns to 30.
14. Change fieldName to queryInput.
15. Select JButton from the palette.
16. Place it next to the text field.
17. Click on the button just placed.
18. Change the name to Search.
19. Select JPanel from the palette.
20. Add it to the South area of the main panel labeled Query Auction Site.
21. Change preferredSize to 10,200.
22. Select JTable on JScrollFrame from the palette.
23. Place it in the Center section of the main pane.
Bind the data values

To bind the data values to the appropriate fields in the panel:
1. Click table to select it.
2. Click Bind....
3. Click New Data Source Data Object.
4. Select Web Service for source type.
5. Select WebServiceDataSource for Data Source.
6. Select searchAuctions() for Source Service.
7. Select queryInput for Argument.
8. Select text for Property.
9. Click OK.
10. Select auctionListItemRows for Data objects.
11. Select auctionId.
12. Click on the yellow right-hand arrow.
13. Repeat steps 11 and 12 for shortName, currentPrice, and status.
14. Click auctionId in Column Title and rename it Auction ID.
15. Click shortName and rename it Item Name.
16. Click currentPrice and rename it Current Price.
17. Click status and rename it Status.
18. Click OK.
Add an event to the Search button

All you have left to do now is to add a trigger to submit a query to the auction server
for auctions that contain the search term:
1. Right click on the Search button and select Events > actionPerformed.

2. In the Java code, Rational Web Developer adds an

addActionListener() call and the following line is displayed:
System.out.println("actionPerformed()");
// TODO
Auto-generated
Event stub
actionPerformed()
3. Replace that line with the following:
getJRowTableBinder1().refresh();
Testing the auction client application

The application is complete and now you can test it. Run the program as a Java
Bean again to ensure that all the fields are working. Your results should look similar
to the following:
Figure 6. Auction Client with auction query results

Section 7. Get auction item details
Create a facade class

Because the Rational Web Developer tool does not include support for passing
primitive types to a Web service, you need to create another facade class:
1. Create a new Java class by right-clicking

com.ibm.samples.auction.client and selecting New > Class.
2. For Name, type GetAuctionWebServiceInput.

3. Click OK.
4. Open GetAuctionWebServiceInput.
5. Add a private integer member myInt and initialize it to 0.
private
int
myInt =
0;
6. Right-click the field.
7. Click Source > Generate Getters and Setters.
8. Click Select All.
9. Click OK.
10. Save and Close the file.
Add the getAuctionInfo method

Now that you have your encapsulating type for your single-input method, modify
three Java files that were generated for the Web service to introduce a new method
for calling the service method:
1. In the com.ibm.www package, open AuctionService.java.
2. Add the following as one line:
public com.ibm.www.AuctionInfo getAuctionInfo

(com.ibm.samples.auction.client.GetAuctionWebServiceInput input)
throws java.rmi.RemoteException;
Again, note that this follows the same format as an existing method in the
class. Our version simply passes in the encapsulated single argument in
instead of the two arguments. Now implement the method:
3. Add the following method to the AuctionServiceProxy.java and

AuctionServiceSoapBindingStub.java files:
public AuctionInfo
getAuctionInfo(com.ibm.samples.auction.client.GetAuctionWebServiceInput
input)

throws java.rmi.RemoteException {
return getAuctionInfo(input.getMyInt());
}
4. Save and close the files that were edited.
Add labels and text fields for each item detail

To add fields to display the details of your selections from the table:
1. Select JLabel from the palette.
2. Draw a label on the panel below the table.
3. Click JLabel to make it editable.
4. Type in Auction ID:.
5. Change horizontalAlignment to RIGHT.
6. Change the size to 100,20.
7. Select JTextField from the palette.
8. Next to the Auction ID: label, draw a text field.
9. In the properties pane, change the preferredSize to 180,20.
10. Repeat steps 1 through 9 for Seller:, Item Name:, Buyer:, Current Price:,
Start Time:, Minimum Price:, End Time:, Number of Bids: and Item
Description: labels and corresponding text fields.
11. For the last label (Item Description), use a JTextArea instead of a
JTextField component.
12. Change size to 180,80.
13. Change wrapStyleWord to true.
14. Change lineWrap to true.
15. Select the lower panel (JPanel8).
16. Not all of these will fit in one column, so use two columns.

17. Change layout to null and arrange as desired.
Bind the inputs to the auctionInfo object

Now you must bind the inputs to the auctionInfo object to pass into the Web service
and bind the Web service to the Submit button:
1. Select Data Source Data Object from the Data Sources section of the
palette.
2. Place Data Source Data Object in the white space next to the panel.
3. Click Data Source Data Object.
4. On the properties page, change the fieldName property to

getAuctionInfoWebServiceInputDataObject.
5. Click the sourceObject property on the properties sheet.
6. Click the ... button to the right.
7. Under Select Class, type GetAuctionWebServiceInput.
8. Click OK.
Initialize the input object

Now that you have created the data object to which you will bind, you need to set up
the input to the Web service and the Web service call:
1. Click the Auction ID: text field.
2. Click Bind....
3. Select getAuctionInfoWebServiceDataObject under Data objects.
4. Select myInt under Data object properties.
5. Click OK.
6. Click the Item Name: text field.
7. Click Bind....

8. Click New Data Source Data Object....
9. For Source type, select Web Service.
10. For Data source, select WebServiceDataSource.
11. For Source service, select

getAuctionInfo(com.ibm.samples.auction.client.GetAuctionWebServiceInput).
12. For Argument, select getAuctionInfoWebServiceInputDataObject.
13. Click OK.
14. Select auctionInfoObject under Data objects.
15. Select shortName under Data object properties.
16. Click OK.
Bind the outputs to the response object

Now you have the input object binding set up. Next, you can bind the rest of the text
fields to appropriate fields from the auctionInfoObject being returned:
1. Click the Current Price: text field.
2. Click Bind....
3. Select auctionInfoObject under Data objects.
4. Select curPrice under Data object properties.
5. Click OK.
6. Follow steps 1 through 5 for each of the other text fields with the following
pairings:
• Minimum Price: minPrice
• Number of Bids: bidCount
• Seller: sellerID
• Buyer: buyerID
• Start Time: startTime.time

• End Time: endTime.time

• Item Description: itemDesc
Add code to bind the table to the results

To add a couple lines of Java code to hook up the table to the Auction ID field, which
is the input to your Web service:
1. Select the Auction ID: text field.
2. Change the fieldName property to queryWSInput.
3. Click on the results table.
4. Select JRowTableBinder1 by clicking on the table with a bean icon (
).
5. After the setRowBinder() method call in the Java code and add the
following lines:
jRowTableBinder1.addSelectionChangedListener(new
ITableBinder.SelectionChangedListener(){
public void selectionChanged(SelectionChangedEvent e) {
queryWSInput.setText(Integer.toString(((AuctionListItem)
jRowTableBinder1.getSelectedObject()).getAuctionId()));
}
});
Add code to run as a standalone Java application

As it stands right now, your program can only run as a Java bean. Add the following
code to the main() method to enable it to run as a standalone application:
AuctionClient client = new AuctionClient();

client.setDefaultCloseOperation(EXIT_ON_CLOSE);
client.setVisible(true);

Test your finished application

That's it! Now you can run the program and test its functionality (Run As > Java
Application). Your screens should look similar to the following:
Figure 7. Auction Client with auction query results
Section 8. Summary
In this tutorial you've seen how to use IBM Rational Web Developer 6.0 to quickly
build a Java client application. You used the Data perspective to deploy a DB2
Universal Database Express V8.2 database definition. Then, you used the Java
Visual Editor to build a graphical user interface that dynamically accesses a local

database and remote Web services supported by the auction server. The data
binding support included with the Rational Web Developer has significantly improved
the task of connecting to various data sources as compared to the Eclipse Visual
Editor for Java.

Resources
Learn
• Refer to the tutorial, Build a Web auction client application using JSF and IBM
Rational Web Developer 6.0 for information on how to develop a dynamic Web
client for the same scenario.
• Refer to the tutorial, Build a Web-based client with the Eclipse Web Tools
Platform for information on how to develop the same scenario using the Eclipse
Web Tools Platform.
• Refer to the tutorial, Build a Web service using the Eclipse Web Tools Platform
for information on how to develop the Web service used in this scenario.
• To try out a working version of the auction application, go to the Auction Web
Service and Web Client Demo page and click View Demo. The auction
application is hosted on alphaWorks.
• For additional information on the Visual Editor for Java, refer to:
• Programming event logic with the WebSphere Studio Visual Editor for
Java (IBM developerWorks, December 2003)
• Extending the palette in the WebSphere Studio Visual Editor for Java (IBM
developerWorks, February 2003)
• For additional information on the Eclipse Visual Editor for Java, which is based
on a contribution from IBM, refer to:
• Build GUIs with the Eclipse Visual Editor project (IBM developerWorks,
May 2004)
• The Eclipse Visual Editor for Java (Dr. Dobb's Journal, October 2004)
Get products and technologies

• Download db2sqlscripts.zip, the SQL scripts for populating the local DB2
database used in this tutorial.
Discuss
• Participate in the discussion forum for this content.
About the authors

Srimanth Gunturi
Srimanth Gunturi is a member of the WebSphere Tools Development

team working on the Visual Editor for Java for the Software Solutions
group in Raleigh, North Carolina.
David Kuck
David Kuck is a Software Engineer with the IBM Express Software
Design and Architecture group in Rochester, MN. He recently received
his Master of Science degree in Computer Science from North Dakota
State University. In his free time, he dabbles in playing guitar, games,
and electronics.
Dr. Gili Mendel

Dr. Gili Mendel is a member of the WebSphere Tools Development
team and is the technical lead for the Visual Editor for Java for the
Software Solutions group in Raleigh, North Carolina.


Rrwdrichclient PDF

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Rrwdrichclient PDF

Uploaded by

Copyright:

Available Formats

Build a Java auction client

Using the Java Visual Editor in Rational Web Developer 6.0

Skill Level: Introductory

Dr. Gili Mendel

Section 1. Before you start

About this tutorial

Build a Java auction client Trademarks

• IBM Rational Web Developer 6.0. This download is listed as Rational

Build a Java auction client Trademarks

Section 2. Build the user interface

Create a Java project

1. Open the Rational Web Developer tool.

2. Select File > New > Project.

3. Select Java Project and click Next.

4. Type in a name (AuctionClient) for the project and click Next.

Add the main visual class

2. Specify a package name. I chose com.ibm.samples.auction.client.

3. Specify a class name. I chose AuctionClient.

4. In the Style window, select Swing > Frame.

5. Ensure that public static void Main(String[] args) is selected in the

Customize the JFrame

Build a Java auction client Trademarks

2. Type in Auction Manager.

3. Select JFrame and make sure this component is selected in the

Add a tabbed panel

1. Select JTabbedPane from the Swing Containers grouping in the palette.

2. Place this in the Center section on the JFrame.

You can now create the first tab on your panel:

2. Rename it by selecting the panel just below the tab.

1. Select JPanel in the Swing Containers section of the palette.

Build a Java auction client Trademarks

strip along the bottom.

Section 3. Connect the client to the warehouse database

Create the database

Build a Java auction client Trademarks

4. Select OK to enable the Data Perspective capabilities when prompted.

6. Specify a connection name. Leave the Choose a DB2 alias option

Build a Java auction client Trademarks

7. Select IBM DB2 Universal driver.

8. Select the WAREHOUS alias.

9. Specify the DB2 user password and test the connection.

10. If the connection succeeds, select Finish to create the connection.

11. Select No when prompted to include the database metadata.

1. Create a folder named Scripts in your AuctionClient project.

15. Select OK and commit the changes.

16. Repeat the process for the warehouseDB-populate.sql script to populate

17. Close the Data perspective.

Create the WarehouseAuctionItem data type

Build a Java auction client Trademarks

1. Right-click the com.ibm.samples.auction.client project and select New >

2. For name, type in WarehouseAuctionItem.

3. Make sure that creating a stub for main() option is unchecked.

4. Click Finish. The new Java file appears in the editor.

5. Add the following to the class:

private int ID;

1. Click Select All.

3. Save and close this file in the editor.

Create the Java Data Factory

Build a Java auction client Trademarks

Create a Java Bean Data Source

Build a Java auction client Trademarks

5. Rename javaBeanDataSource by selecting the field name property and