Professional Documents
Culture Documents
Srimanth Gunturi
EMC
David Kuck
Software Engineer
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.
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:
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.
5. Click Finish.
1. Right-click on the project in the Package Explorer and select New >
Visual Class.
6. Click Finish.
1. Click on the text JFrame in the visual editor window. An editable text box
appears.
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.
1. Select JPanel and drag it onto your frame. A tab appears at the top.
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:
2. Place this on the South section of the tab panel. It shows up as a small
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.
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
5. In the Database Explorer, right-click and select New Connection from the
context menu.
12. Unzip the db2sqlscripts.zip file and import the warehouseDB.sql and
warehouseDB-populate.sql scripts into the AuctionClient project:
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.
You need an integer ID property and strings shortName and itemDesc. Create the
data type:
Right-click on one of these fields and select Source > Generate Getters and
Setters:
2. Click Finish. Setters and getters are now generated for the properties you
need.
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.
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.
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.
6. Click OK.
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.
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:
5. Navigate to <db2_install_dir>\java\
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.
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.
1. Click on the lower half of the frame. This should select jPanel1, which you
created earlier.
3. Select JPanel from the palette and drop it to the West part of the bottom
panel.
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.
Your panel should look like the following in the Rational Web Developer tool:
1. Select the JLabel component from the palette in the Swing Components
section.
7. Repeat steps 1 through 6 for Item Name, Minimum Price, and Item
Description.
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.
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.
4. Type Submit.
4. Rename it E-mail:.
6. Place the text field on the panel next to the E-mail text field.
2. Click Bind....
5. Click OK.
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.
2. Click Bind....
7. Click Next.
9. Click Next.
12. Click Finish. This generates a number of classes based on the WSDL.
14. Click Cancel on the Component Action Bindings window. You will finish
the binding later.
Explorer.
5. Click Finish.
7. Right-click in the source file and select Source > Generate Getters and
Setters....
9. Right-click in the source file and select Source > Organize Imports.
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.
AuctionServiceSoapBindingStub.java files:
4. Right-click in the class definition and select Source > Organize Imports
to add the necessary imports.
1. Select Data Source Data Object from the Data Sources section of the
palette.
3. Place the Data Source Data Object in the white space next to the panel.
9. Click OK.
1. Click the last text field that has no binding on the panel.
2. Click Bind....
5. Select minPrice.
6. Click OK.
8. Click Bind....
1. Click Submit.
2. Click Bind....
5. Select
createAuction(com.ibm.samples.auction.client.addAuctionWebServiceInput)
under Source service.
7. Click OK.
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);
}
});
4. Right-click in the class definition and select Source > Organize Imports
to add the necessary imports.
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:
2. Place it right next to the existing tab at the top of the existing frame. This
creates a new tab for your use.
4. Change the tab title on the Properties sheet to Query Auction Site. This
renames the tab.
20. Add it to the South area of the main panel labeled Query Auction Site.
2. Click Bind....
9. Click OK.
1. Right click on the Search button and select Events > actionPerformed.
System.out.println("actionPerformed()");
// TODO
Auto-generated
Event stub
actionPerformed()
getJRowTableBinder1().refresh();
3. Click OK.
4. Open GetAuctionWebServiceInput.
private
int
myInt =
0;
9. Click OK.
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:
public AuctionInfo
getAuctionInfo(com.ibm.samples.auction.client.GetAuctionWebServiceInput
input)
throws java.rmi.RemoteException {
return getAuctionInfo(input.getMyInt());
}
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.
16. Not all of these will fit in one column, so use two columns.
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.
8. Click OK.
2. Click Bind....
5. Click OK.
7. Click Bind....
2. Click Bind....
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
).
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()));
}
});
6. Right-click in the class definition and select Source > Organize Imports
to add the necessary imports.
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)
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.