This series of articles employs IBM tools and technologies to develop and deploy Web services-based applications. Specifically, the articles describe how to use the IBM WebSphere® Studio Application Developer to develop and test Web services and Web applications, how to deploy the Web services on IBM WebSphere Application Server, and how to publish and find Web services in the IBM WebSphere UDDI Registry.
The first article in this series (see the Resources section) showed how to use WebSphere Studio Application Developer to develop and unit test a Web service. The second article showed how to use Application Developer to publish the Web service in the WebSphere UDDI Registry, preview version so that it can be used by others; the second article also showed how to find a Web service in the UDDI Registry and create a client of the published Web service using Application Developer. This article, Part 3 of the series, shows how to use Application Developer to create and test a Web application that uses the Web service.
WebSphere Studio Application Developer
WebSphere Studio Application Developer offers the application developer a number of capabilities, including Web application development and testing, XML development and testing, and Web services development and testing (which is the focus of this series). Of particular interest for this article (Part 3 of the series) is that Application Developer includes editors for many components of Web applications, including JSPsTM and JavaBeansTM. See Part 1 of the series and the Resources section for more information on Application Developer.
In this article, we'll create a Web application that presents weather forecasts from the WeatherForecast Web service as described in Part 1. This article builds on an IBM developerWorks tutorial, Creating a complete Web service (see Resources).
The first step in creating a Web application is to create a Web project. The general process was described in Part 1. For this Web project, use the name WFClient1 and assign the project to the WFClient1EAR file.
During the creation of the Web project, add xerces.jar
from <install_path>/plugins/com.ibm.etools.websphere.runtime/lib
to the JavaTM Build Path.
Next, import a "helper" JavaBean, WeatherForecastHelper.java,
from the source code provided in the download. This
bean serves two purposes: it assists in formatting the XML results from the
Web service, and it also caches results from the Web service to minimize network
traffic. You can import the bean into the source folder using the technique
described in Part 1 (import WFClient1/source/helper/WeatherForecastHelper.java
relative to where you placed the source code). You will find that the bean will
not compile, but ignore the errors for the time being.
Next, you need to obtain a proxy for the WeatherForecast
Web service. Part 1 showed how to generate a proxy from the WSDL (Web Services
Description Language) file generated by the Web Services wizard; Part 2 showed
how to generate a proxy by importing the WSDL file for the Web service. Simply
copy the WeatherForecast-service.wsdl file from the WForecast project
created in Part 1 or from the IWSClient project created in Part 2 and then create
the Web service proxy in the WFClient1 project following the instructions in
Part 2. Note that you do not, however, want to generate a sample client. All
of the compile errors should disappear.
Now, we'll create a JSP page that uses the WeatherForecast
Web service (indirectly through the helper and the proxy). You can import the
JSP page that's provided in the download into the webApplication folder using
the technique described in Part 1 (that is, import WFClient1/webApplication/forecast.jsp
relative to where you placed the source code), or you can create the JSP using
Application Developer's JSP editor, using the supplied JSP as a guide.
To get started with the editor, in the Web Project perspective,
select the WFClient project and then select Create a JSP
File (the 
icon). In the Create a JSP File wizard, expand the WFClient1
project and select the webApplication folder. Then, enter
forecast.jsp in the File Name field and click
Finish.
Figure 1. The Create a JSP File Wizard
Whether you import the JSP that's provided with the download or create a new (empty) JSP, when you are finished, the Navigator view in the Web Project perspective should look as shown in Figure 2 below.
Figure 2. The Web Project perspective in Application Developer
Application Developer supplies a JSP editor that simplifies
JSP creation; in fact, the forecast.jsp was
created using this editor. If you edit the imported forecast.jsp,
you will see Figure 3 below, showing the Design view.
Figure 3. Editing forecast.jsp in the JSP editor
This section offers a brief look at how to create the forecast.jsp
from scratch using the Application Developer editor. After creating a JSP file,
as shown above, you'll see that Application Developer opens the JSP page and
displays the JSP editing operations (see Figure 4 below). Note that you may
have to turn on some of the toolbars using the Toolbar menu. To get started,
simply delete the token phrase about the JSP's content (that is, select the
phase and type Ctrl-x).
Figure 4. The JSP page displaying the JSP editing operations
The primary interface for the JSP is a table. To insert the
table, select Insert Table (the 
icon). The table dialog defaults to create a table with two rows and two columns.
This is exactly what we want, so simply click OK. You will see the outline
of the table with a border. Edit the table attributes (right-click on the table
and select Attributes, or select the tag name on the right of the editor
and select Attributes of TABLE). Enter 500 pixels in the Table
width field and uncheck Show border.
Now edit the attributes of the top left cell of the table. Select the Header cell for the Cell type and click OK. Then, type State. Do the same thing for the top right cell, but type City. The JSP page now looks as shown in Figure 5 below.
Figure 5. What the JSP page now looks like
Select the lower left cell of the table and click
Insert Form (the 
icon). Edit the form attributes. In the Action field, type
forecast.jsp. Select the Post method. Type dropdown1
in the Name field. Click OK.
With the form selected, click Insert Option Menu (the 
icon). Enter the attributes for the select element. In the Name field,
type state. In the Item field, type Select a state, and
click Add. Now type <%=shtml%> in the Item
field and click Add. In the Choice box, select the phrase Select
a state. The Attributes pane should look as shown in Figure 6 below.
Figure 6. The Attributes pane
Now, select Event. In the Event options, select OnChange. In the Script field, type statepage();. Be sure to include the semicolon and click Add. Click OK to return to the previous dialog. Click OK again to complete the option menu.
Now we'll do something similar for the lower right of the
table. Instead of dropdown1, use location1; instead of state,
use location; instead of Select a state, use Select a city;
instead of <%=shtml%> use <%=chtml%>;
instead of statepage();, use locationpage();. Before
leaving the option menu attribute, however, select Style. Since we want
to change the style for only this tag, click Edit(4). In the navigation
panel on the left, click Layout. In the Width field, type 380,
and click OK. Click OK two more times, and you will see Figure
7 below.
Figure 7. What the JSP page now looks like
Let's add the JavaScript and Java directives and scriptlets to the JSP page. You can extract the content from forecast.jsp in the download provided with this article. Select Page => Page Properties. Enter Weather Forecast in the Page title field. Select the JSP Tags tab. In the Tag Type option menu, select JSP Directive - Page, and select Add. In the Import field, enter:
helper.*,proxy.soap.*,java.io.*,org.w3c.dom.*helper.*,proxy.soap.*,java.io.*,org.w3c.dom.*
Click OK and click OK again.
To insert the JavaScript, select Insert => Script.
In the Script dialog, enter the functions, statepage() and locationpage(),
referenced above and click OK. You'll see something like Figure 8 below.
Figure 8. What the JSP page now looks like
Next, we need to enable the use of the helper JavaBean with
a jsp:useBean tag. To do so, select JSP => Insert Bean.
In the Attributes dialog, enter forecastHelper in the ID field,
helper.WeatherForecastHelper in the Class field, and select session
in the Scope drop-down. Click OK.
To enter the first of the Java scriptlets, select JSP => Insert Scriptlet. In the Script dialog, select Setting under Author Time Visual. Select the Text radio button. Enter Setup proxy. Click the color selector on the right, and select a bright blue. Click OK. You can now copy the scriptlet code as shown below:
WeatherForecastProxy forecaster = forecastHelper.getForecaster();
if (forecaster == null)
{
forecaster = new WeatherForecastProxy();
forecastHelper.setForecaster(forecaster);
} |
The proxy setup code creates and saves an instance of the proxy. Click OK. You'll see something like Figure 9 below.
Figure 9. What the JSP now looks like
You can add the other JSP scriptlets -- Determine state, Get info, and Format forecast -- in the same manner. You can enter the JSP expression -- Display forecast -- in the same fashion as the scriptlets. Notice that Format forecast and Display forecast are placed after the table. Now you will see Figure 10.
Figure 10. What the JSP now looks like
The following shows the Determine state scriptlet. It basically ensures that the state and city information are valid.
String parmState = request.getParameter("state");
String parmLoc = request.getParameter("location");
String sessState = (String) pageContext.getAttribute("State",
PageContext.SESSION_SCOPE);
String sessLoc = (String) pageContext.getAttribute("Location",
PageContext.SESSION_SCOPE);
String html="done";
String state = null;
String location = null;
if ((parmState == null) || (parmState.equals(""))) {
if (sessState != null) {
state = sessState;
}
} else {
pageContext.setAttribute("State",
parmState, PageContext.SESSION_SCOPE);
state = parmState;
// make sure don't try to read invalid city information
sessLoc = null;
parmLoc = null;
}
if ((parmLoc == null) || (parmLoc.equals(""))) {
if (sessLoc != null) {
location = sessLoc;
}
} else {
location = parmLoc;
pageContext.setAttribute("Location",
location, PageContext.SESSION_SCOPE);
} |
The following shows the Get info scriptlet. It gets information from the Web service such as the states, cities, and the forecast.
// always get states
Element stateEl = forecastHelper.getStates();
String shtml = forecastHelper.formatStates(stateEl, state);
// get cities as needed
String locations = null;
Element forecast = null;
if (state == null) {
html="<B><FONT COLOR=\"#FF0000\" SIZE=\"+1\">
Please select state</FONT></B>";
} else {
Element cityEl = forecastHelper.getCities(state);
locations = forecastHelper.formatCities(cityEl, location);
// get forecast as needed
if (location == null) {
html="<B><FONT COLOR=\"#FF0000\"" +
"SIZE=\"+1\">Please select a city.</FONT></B>";
} else {
try {
forecast = forecaster.getForecast(state, location);
} catch (Exception ex) {
forecast = null;
}
}
}
String chtml = "<option>none</option>";
if (locations != null) {
chtml=locations;
} |
The Format forecast scriptlet in the following figure uses the helper to format the forecast for display. The Display forecast expression, created using JSP => Insert Expression, is simply html.
if (forecast != null) {
html = forecastHelper.formatForecast(forecast);
} |
One final action, changing the background color of the JSP, is needed to make the newly constructed JSP look like the one shown above. To change the background color, select Page => Page Properties or edit the attributes of the BODY element. Select the Background and Text Color tab. Enter #3afce9 in the Background text entry field and click OK. You'll see the figure shown at the beginning of the section.
Now that the application is complete, you can run it. Right-click
on the forecast.jsp in the Navigation view and
select Run on Server. Application Developer automatically deploys the
WFClient1 EAR file in the Application Developer's WebSphere Test Environment
and begins running the application and the Web service. The deployed architecture
looks like the figure below. Notice that the Web service itself and the client
of the Web service (application) run in the Application Developer environment.
Figure 11. The Web service architecture
After the JSP is fully compiled, you will see Figure 12 below.
Figure 12. What the compiled JSP looks like
You are asked to select a state. Here, select Texas (TX).
Figure 13. Selecting Texas (TX) in the JSP form
You are asked to select a city. Here, select Austin.
Figure 14. Selecting Austin in the JSP form
If you want to run the Web application without a connection to the Internet, you can edit the OFFLINE property in the forecast.properties file (see Part 1) in the WForecast project. If you do so, you will need to restart the WebSphere Application Server 4.0 server that is running the Web service. The easiest way to do so is to select (or open) the Server Perspective and then select the Server Control Panel view. Right-click on WebSphere v4.0 Test Environment and select Restart.
This article walked you through the steps necessary to use WebSphere Studio Application Developer to create and test a Web application that uses a Web service. Application Developer includes tools that support the construction of JSPs and JavaBeans used to create Web applications. It also provides an application server environment useful for testing, making the creation and testing of Web applications much easier.
| Name | Size | Download method |
|---|---|---|
| workspace.zip | 10 KB | FTP |HTTP |
Information about download methods
- Part
1 of the series describes how to create
a Web service using Application Developer.
- Part 2 of the series describes how to publish
and import a Web service using Application Developer.
- Part 4 of the series describes how to deploy
the completed Web service to a production WebSphere Application Server Version
4.0 and then run the application using the production version of the Web service.
- The IBM developerWorks tutorial, Creating
a complete Web service, provides an explanation of the example Web service
and discusses earlier versions of the tools described in this article.
Greg Flurry is an STSM currently working in IBM's Emerging Technologies group. His responsibilities include advancing IBM's e-business technologies, and specifically, IBM's Web services technologies. You can contact Greg at flurry@us.ibm.com.
Comments (Undergoing maintenance)
Table of contents
Local resources
My developerWorks community
Tags
Use the slider bar to see more or fewer tags.
Popular tags shows the top tags for this particular content zone (for example, Java technology, Linux, WebSphere).
My tags shows your tags for this particular content zone (for example, Java technology, Linux, WebSphere).
Popular article tags |
My article tagsSkip to tags list
Popular article tags |
My article tags
