Develop Web service clients

Using JSF Web service tools in Rational Application Developer

This tutorial is designed for J2EE developers interested in a rapid development solution to tie standard Web pages to dynamic data through Web services. This tutorial teaches you how to use the new JavaServer Faces Web services toolset bundled with IBM Rational Application Developer to quickly and easily generate Web applications that connect and consume data from a remote systems.

Share:

Jeff K. Wilson (wilsonje@us.ibm.com), e-business architect, IBM

Jeff WilsonJeff Wilson, a self-proclaimed dot-com refugee, has for the past three years been an e-business architect for the DragonSlayers, IBM's Developer Relations Technical Consulting team in Austin, Texas. The DragonSlayers' goal is to excite, evangelize, educate, and enable developers on the latest tools and technologies available. Jeff welcomes any and all questions, comments, recipes, insider stock tips, cash, prizes, and good juicy gossip.



26 July 2005

Introduction

Overview

You might have heard recently about the concept of a service-oriented architecture. On the other hand, you might also be scoffing at my use of the term "recently."

Certainly, the idea is not really new, but it is a particularly hot topic these days. What I am referring to is similar in concept to how computing has evolved over the past, who knows, how many years? Admittedly, I haven't been in the business long enough to really know. The idea, of course, is building processes from reusable components.

Moving from subroutines, to reusable methods and objects, to finally remotely callable services, we now have the benefit of building flexible, reworkable, and evolving applications that easily span networks and businesses. At the heart of this is the advent of Web services.

Web services expose business processes to anyone across a network that might call them. Being an open platform-independent, and self-describing mechanism for requesting and receiving data, it is increasingly easy to implement and can add a vast amount of flexibility to application development.

The question is, "How do you do it?"

Recent tools -- and particularly thanks to the JavaServer Faces framework -- have made this task much simpler than it has ever been. This tutorial walks you through connecting a client application to a Web service using Rational Application Developer.

Who this is for

This tutorial is designed for J2EE developers interested in a rapid development solution to tie standard Web pages to dynamic data through Web services. This tutorial teaches you how to use the new JavaServer Faces Web services toolset bundled with IBM Rational Application Developer to quickly and easily generate Web applications that connect and consume data from a remote systems.

What you will need

In this tutorial, because you are simply developing a standard Web application that accesses a Web Service, the only tool you will need is IBM Rational Application Developer, which will host and consume the Web service in the test environment.

To successfully complete the scenarios presented in the tutorial, download a copy of Rational Application Developer and the zip file included with the tutorial:

Install Rational Application Developer using the default settings. Follow the steps of the tutorial to use the source files included in the zip file.


Part 1: Set up the development environment

Development environment overview

This tutorial walks you through using IBM Rational Application Developer to create a Web application that connects and consumes data from a Web application. Your application is a sales reporting Web service that returns data in the form of a particular object.

This Web service is accessible either as a straight call returning the report for the current year or by passing it a specific year as an argument to return another year's report.

You are going to build two pages that access the Web service operations -- one that includes a form to ping the service passing it information to direct what is returned, and the other which ties the Web service to a JavaServer Faces-managed bean automatically loading the Web service with no user involvement.

Either of these methods might be required by your application -- user-initiated or automatically run -- and require a couple different ways to implement.

Open Rational Application Developer

Before you can get started, first you need to load Rational Application Developer and set up the environment. After loading Rational Application Developer, you are going to pull in a functioning Web service application, which starts in the embedded test environment within Application Developer. From there, you are going to build the client application that consumes the Web service.

  1. Open Rational Application Developer: Start > All Programs > IBM Rational > IBM Rational Application Developer 6.0 > Rational Application Developer
  2. On the Workspace Launcher window enter the workspace of your choice, as long as it is a new workspace location and click OK.
  3. Click the x in the Welcome tab to close the Welcome window.
  4. Click the Open Perspective button in the upper right corner of Application Developer and select Web if displayed (otherwise click Other and locate Web from the Select Perspective window).

Import the Web service project

  1. In the Project Explorer view, right-click and select Import > Import...
  2. On the Import window, select Project Interchange and click Next.
  3. On the Import Project Interchange Contents window, click Browse to locate the SalesReportWebService.zip file you downloaded earlier when completing the "What You Need" section.

  4. Check both SalesReport and SalesReportEAR (the enterprise and Web projects included in the zip file) and click Finish.

  5. From the Project Explorer view, expand Dynamic Web Projects and you should see the SalesReport Web project complete with resources.

Install and run the Web service

You need to launch the Web service in the test environment to be able to import the description of the service into the client application. The easiest way to do this is to launch a JSP from that project. It might not actually touch anything Web service-related, but the task will effectively publish and start everything about the project -- including the Web service components.

  1. In the Project Explorer view, expand SalesReport > WebContent

  2. Right-click index.jsp and select Run > Run on server

  3. On the Server Selection window, make sure WebSphere Application Server v6.0 is selected, accept the other defaults, and click Finish.
  4. When the server has started and the Web browser has launched, you see the server started in the lower Server view and the browser loaded in the upper pane.

    NOTE: The index.jsp page has nothing to do with Web services, in case you were wondering. It is merely a simple method for getting the rest of the project published to the server -- running, and waiting to be accessed by a client. The actual Web service does not have a user interface to look at for verification of being started.


Part 2: Develop the Web service client application

Web service client application overview

You can close the Web browser now by clicking the x in the Web Browser tab, but leave the server running when you complete the following steps until instructed otherwise.

To import the required information for generating the various Web service client components, the Web service needs to be up and running -- or at least have its WSDL file (the file that describes the Web service) available for the wizards to access.

For the purposes of this tutorial, the Web service application you just imported was specified to run on "localhost" -- where Rational Application Developer runs the test environment locally.

If you publish this Web service to a different server, be sure to edit the WSDL file to reflect the new server address.

Create the Web service client project

Here, you are going to create a new project from which you can create the files that consume the Web service. This is a simple, straightforward Web application that includes the JavaServer Faces framework. You do not need to manually include anything related to JSF here; the tool does it for you.

  1. From the Project Explorer view, right-click Dynamic Web Projects and select New > Dynamic Web Project
  2. On the New Dynamic Web Project window, enter SalesReportApplication into the Name field and click Finish.
  3. Expand SalesReportApplication > WebContent

  4. Right-click WebContent and select New > Faces JSP File

  5. On the New Faces JSP File window, enter SalesReportByYear into the File Name field and click Finish.
  6. Right-click WebContent and select New > Faces JSP File again.

  7. On the New Faces JSP File window, enter CurrentYearReport into the File Name field and click Finish.

  8. You should see the two new JSPs in the Project Explorer view and loaded in the main editor pane.

Import the Web service core components

Next you need to run the Web service wizards to connect to the Web service, retrieve the WSDL file that describes the Web service, and generate the "proxy code" to manage the actual connections to the Web service once added to a JSP.

  1. Click on the SalesReportByYear tab in the main editor pane.
  2. Making sure that the SalesReportByYear.jsp file is still displayed in the main editor, right-click in the Page Data view and select New > Web service

  3. On the Web Service Discovery window window, click Web Services from your workspace.

  4. From the Web Services Information list, click http://localhost...ReportDataBean.wsdl

  5. Click Port: ReportDataBean and click Add to Project.
  6. If your get a warning about overwriting, click Yes to All.
  7. On the Add Web Service window, the proxy bean that makes the Web service call is displayed. Select which method to call on the Web Service -- getReportByYear(java.lang.String) and click Finish.
  8. In the Page Data view, you can see the Web service object that you can use in the JSP in a number of ways.
  9. Expand reportdatabeanproxy() and notice there is a ...ResultBean and a ...ParamBean.

  10. The ParamBean is the input to the Web service.

  11. The ResultBean is the return of that Web service and is a JavaBean like any other (note the various properties listed) generated by the information extracted from the WSDL file pulled in from the Web service.

  12. In the Project Explorer view, expand SalesReportApplication > Java Resources > JavaSource > com.acme.beans > Report.java > Report (the actual Java class returned from the Web service was not there before initiating the Web service wizard).

Create a JSF form to request the Web service

One way to call a Web service is to create a form that allows a user to input information that sends back other information about the input data. Think of a stock symbol or zip code for a weather service. In this case, you are going to pass in a specific year to retrieve that year's sales report. This is opposed to the alternative way of automatically calling a Web service with some predefined input information. This method would be transparent to the user and is indistinguishable from static text, but has the limitation of only returning one, non user-specified response. Either way can be more applicable to a particular task.

  1. From the Page Data view, drag getReportByYear(java.lang.String) over to the main editor (which should still have SalesReportByYear.jsp displayed) and drop it underneath the text.

    NOTE: This launches a wizard for generating an HTML form tied to the Web service. When submitted, the form input fields act as input into the method called from the Web service and the service response is displayed below the form. Further, typical HTML customization can always be applied to the elements in the JSP.

  2. On the Insert Web Service window, change the input field under Label. Click on Year: and replace it with Enter Report Year: to update the input field.

  3. Click Options.

  4. On the Options window, change the label of the Submit button to Get Report and click OK.

  5. On the Input Form page of the Insert Web Service window, click Next.

  6. On the Results Form page of the Insert Web Service window, leave all return fields checked (unchecking them omits them from the resulting display) and edit the labels as you did in the previous step to something more reader-friendly.

  7. Also, move the fields as described below by selecting a field and clicking the up and down arrow keys -- this reorders how they are displayed on the resulting JSP -- then click Finish.
  8. The JSP now looks like the following:

    NOTE: When you enter a year into the form above and submit it, the action method calls the Web service through the proxy JavaBean generated earlier. The return is the Report JavaBean whose properties are mapped to the output fields displayed above. The result is a form that, when submitted, updates the table below it with dynamic data returned from the Web service -- and as you likely have already noticed, you have done no real actual "coding" as of yet. If you were to run it now, it would work -- but let's further customize some things first.

  9. Select the default text on the JSP above the Web service form and change it to Sales Report By Year:
  10. Select the new text and click the Properties tab below the main editor.
  11. In the Properties view, set the Paragraph dropdown list to Heading 2 and click the Style Properties button.
  12. On the Add Style window, click the Color button and select a color.
  13. From the left pane of the Add Style window, select Font Styles and set the Weight field to Bold and click OK.
  14. Your JSP should now look like the following:
  15. From the Palette view, select Faces Components > Output
  16. Drag the output component to the right of the text at the top of the JSP.
  17. From the Page Data view, drag reportYear and drop it onto the outputText component.
  18. Click the Save button from the toolbar.

Use a managed bean to request the Web service

The next method of implementing the Web service is to tie the Web service to a managed JavaBean for the purpose of initiating the Web service call when the page is loaded immediately.

  1. Click the CurrentYearReport.jsp tab in the main editor.
  2. In the Page Data view, right-click and select New > Web Service
  3. On the Add Web Service window, select the method getCurrentReport() -- which does NOT take in a specified year as an argument -- and click Finish.
  4. In the Page Data view again, right-click and select New > JavaBean
  5. On the Add JavaBean window, enter the Name myCurrentReport and click the Browse button to the right of the Class field.
  6. On the Class Selection window start typing Report and see the class list filter. Select Report and click OK.
  7. On the Add JavaBean window, click Finish.

  8. From the Project Explorer view, expand SalesReportApplication > Java Resources > JavaSource > pagecode and double-click CurrentYearReport.java to open it in the main editor.

    NOTE: If you are unfamiliar with how JavaServer Faces works, each JSP has a code-behind bean that manages how certain things function. In this case, two of the things managed by this code-behind bean are how to access the managed bean you just added and also how the proxy bean that accesses the Web service is called. Your next task is to associate the managed bean with the return of the Web service. This allows us to automatically call the Web service.

  9. In the main editor, locate the method getReportdatabeanproxy().

    NOTE: This method returns the proxy bean that calls the Web service -- you need to capture this return so you can automatically set the managed bean to the Web service response.

  10. Locate the method getCurrentYearReport().

    NOTE: This method initializes and returns the managed bean. This is automatically called and it currently loads a blank Report object. In the next step you are going to set it to the return of the Web service.

  11. In the getMyCurrentReport() method, change:

    myCurrentReport = new Report();

    to

    myCurrentReport = getReportdatabeanproxy().getCurrentReport();

    NOTE: There is an error noted in the left column. The yellow icon next to the red x indicates there is a suggested fix.

  12. Click once on the error icon in the left column to display the potential fixes to the error -- double-click Surround with try/catch.
  13. Click the save button on the toolbar to save the file.
  14. Click the x in the CurrentYearReport.java tab to close the file.
  15. Make sure CurrentYearReport.jsp is displayed in the main editor.

  16. From the Page Data view, drag myCurrentReport(com.acme.beans.Report) to the CurrentYearReport.jsp under the displayed text.

  17. On the Insert JavaBean window, change Inputting data to Displaying data (read only), adjust the Label fields as shown in the following image and click Finish.
  18. On the JSP, change the default text to Current Year Report.

  19. Select the text and change the styles as you did earlier on the SalesReportByYear.jsp page (Heading 2, Bold, Blue).

  20. Click the Save button.

Tie the application together

Before running the application, you'll need to tie up a few loose ends:

  1. Click the SalesReportByYear.jsp tab.
  2. From the Palette view, select the Command -- Hyperlink component.
  3. Drag the Command -- Hyperlink from the Palette view and drop it on the main editor under the tables.
  4. In the Properties view, click the Add Rule button on the right (you might need to scroll to the right to see it).
  5. On the Add Navigation Rule window, select the The outcome named radio button and enter the name currentYearReport, then click OK.
  6. Click the Quick Edit tab.

  7. Select Command from the left pane, place the cursor in the edit window to generate the appropriate code, and enter currentYearReport as the return.
  8. In the JSP, click on the words link label in the hyperlink (the icon should look like the following):
  9. In the Properties view, change the Value field from link label to Get Current Year Report and press Enter to reflect changes in the actual link on the JSP.
  10. In the JSP, select {projectedRevenue} and click the Properties tab.

  11. Scroll to the right in the Properties window and select Number from the Format dropdown list.

  12. Select Currency from the Type dropdown.

  13. Click the Options button.

  14. On the Configure Converter window enter $ as the Currency symbol and click OK.

  15. Repeat the process for the {revenue} and {averageSale} components.

  16. Click the Save button.

  17. Click the CurrentYearRepport.jsp tab.

  18. Drag another Command -- Hyperlink from the Palette view to the main editor as before.
  19. From the Properties view, click Add Rule.

  20. On the Add Navigation Rule window, select SalesReportByYear.jsp from the Page list and The outcome named radio button and enter salesReportByYear, then click OK.

  21. Click the Quick Edit tab to display the Quick Edit view.
  22. Click Command in the left pane and place the cursor in the edit window to generate the appropriate code.

  23. Enter salesReportByYear as the return.

  24. In the main JSP editor, click on the words link label so that the icon looks like what is displayed below:
  25. Click on the Properties tab and set the Value field (you might need to scroll the Properties view) to Show Sales Report By Year.
  26. Finally, set {projectedRevenue}, {revenue}, and {averageSale} to currency components as on salesReportByYear.jsp.

  27. Click the Save button on the main toolbar.


Part 3: Run the Web service client application

Launch the Web service client application

  1. Click on the Servers tab to display the Server view.

  2. Right-click WebSphere Application Server v6.0 and select Stop.

  3. Wait for the server to display the status Stopped.
  4. From the Project Explorer view, right-click SalesReportApplication > WebContent > SalesReportByYear.jsp and select Run > Run on Server
  5. On the Server Selection window, accept the defaults and click Finish.

  6. If you get the following Server Selection window, click Run in Background.

  7. Wait.

  8. Wait.

  9. Wait a little more.

Pull the sales report by year

  1. When the application fully starts, the Web Browser displays in the upper pane and the server status displays Started.
  2. Enter 2002 into the Enter Report Year input field and click Get Report.
  3. Enter 2004, 2001, and 2000.
  4. Marvel at the dynamics...

Check the current year's report

  1. Click Get Current Year's Report.

    NOTE: You did not need to submit the form -- the managed bean was automatically set to the return of the Web service when it was initialized.

  2. Click Show Sales Report By Year -- just to test the link because we went through the trouble to code it.


Summary

Conclusion

In this tutorial, you learned how easy it is to incorporate a Web service into a Web application using the JavaServer Faces framework in Rational Application Developer. As you can see, there are multiple ways one can build and develop a service-oriented architecture-based application with considerably small amounts of actual coding.

It should be easy to see from here on out how a more service-oriented methodology could be initiated to incorporate disparate applications using this process.


Download

DescriptionNameSize
Source code for examplesSalesReportWebService.zip21 KB

Resources

Learn

Get products and technologies

Discuss

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into Rational software on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Rational, Java technology, DevOps
ArticleID=89440
ArticleTitle=Develop Web service clients
publish-date=07262005