IBM WebSphere Developer Technical Journal: Developing JSF applications using WebSphere Studio V5.1.1 -- Part 5

Creating a JSF Web service client using the Web service proxy component

In prior installments of this 5-part series, we built Java™ Server Faces forms using Rapid Application Development (RAD) JSF components, and saw how JSF works with Web Data Object/Service Data Object technology, and even with existing J2EE technology. In this final installment, we will use the JSF Web service component to invoke a Web service.

Roland Barcia (barcia@us.ibm.com), Consulting IT Specialist, IBM Software Services for WebSphere

Roland Barcia is a Consulting IT Specialist for IBM Software Services for WebSphere in the New York/New Jersey Metro area.



12 May 2004

Introduction

This is Part 5 of a series of articles exposing the features of the Java Server Faces Technology Preview within WebSphere® Studio V5.1.1. The articles in this series include:

In Part 4 of this series, we illustrated how JSF can work with existing J2EE technology by creating a JSF page that calls an existing EJB application using the JavaBean data control. In this final installment, we will use the JSF Web service component to invoke a Web service.

The JSF Web service component can search any standard Web service over the Internet, and also build input and output controls for invoking a Web service and displaying the result. In this exercise, we will use the EJB JAR from Part 4 to generate and deploy a Web service. We will then use the JSF Web service to generate controls for the running Web service.

You will need the materials created in Part 4 of this series to complete this exercise. If you have not completed Part 4, the solution to that installment is included in the download file. Import the EAR file as illustrated in the previous articles and follow the testing instructions in Part 4. To run the example, you will need to create the database illustrated in Part 3. If you did not complete Part 3, import the solution and run the application to automatically create the JDBC data source on the server configuration that we will use in this article.


Build Web service from existing EJB

The JSF Web service components can go out to the Internet and search existing UDDI registries, then use the WSDL file to generate the appropriate controls. The controls use the standard JAX-RPC API to invoke the Web services. To begin, we will build a Web service from an existing EJB component, deploy it, then use the JSF control to generate it right from the running WebSphere Application Server Test Environment. This will show how quickly we can build a Web service and Web service clients from WebSphere Studio Application Developer (hereafter referred to as Application Developer). In this exercise, we will use the accessCompanyInfo method from the StockFacade Session Bean:

  1. In Application Developer, select File => New => Other... from the main menu, then select Web Services from the list on the left, and Web Service on the right (Figure 1). Select Next.
    Figure 1. Create a new XML service
    Figure 1. Create a new XML service
  2. On the Web Services dialog (Figure 2), select EJB Web service for Web services type, and make sure that Start Web service in Web project and Create folders when necessary are the only options selected. Press Next.
    Figure 2. Web Services options
    Figure 2. Web Services options
  3. On the Service Deployment Configuration dialog (Figure 3), select StockSystemEJB for the EJB Project, and PersonalTradeJSF for the Router project. This will configure the EJB Web service descriptors and endpoint in the EJB project. The Web project will then contain the necessary router. Press Next.
    Figure 3. Service Deployment Configuration
    Figure 3. Service Deployment Configuration
  4. Next, select the Browse EJB beans button (Figure 4).
    Figure 4. Web Services EJB Selection
    Figure 4. Web Services EJB Selection
  5. Select the StockFacade Session Bean, then OK.
    Figure 5. Browse EJB Beans
    Figure 5. Browse EJB Beans
  6. Notice that the session bean information will now be filled out (Figure 6). Press Next.
    Figure 6. Completed Web Service EJB Selection dialog
    Figure 6. Completed Web Service EJB Selection dialog
  7. On the Web Service Java Bean Identity dialog (Figure 7), select the getCompanyInfo checkbox and press Next.
    Figure 7. Web Service Java Bean Identity
    Figure 7. Web Service Java Bean Identity
  8. When you receive the Web Services Warning, select Yes to All. This enables one to override any pre-generated EJB Web service interfaces.
    Figure 8. Web Services Warning
    Figure 8. Web Services Warning
  9. On the publication dialog (Figure 9), select Finish. Do not select any UDDI Registry.
    Figure 9. Web Service Publication
    Figure 9. Web Service Publication
  10. When completed, the server will be started and your Web service will be deployed.
    Figure 10. Server status
    Figure 10. Server status
  11. The JSF Web service client depends on the Web service being active in order to build the page data. You will have an opportunity to test the Web service before placing the Web service proxy component on the page.

Build JSF Web service client

We are now ready to build our JSF Web service client.

  1. First, we will create a new Faces JSP Page:
    1. In Application Developer, create a new Faces JSP page in the WebContent directory and name the file companyInfoWS.jsp (Figure 11).
      Figure 11. Create Faces JSP file
      Figure 11. Create Faces JSP file
    2. Remember to select the existing User-Defined Page Template within the workspace (Figure 12).
      Figure 12. Page Template File Selection
      Figure 12. Page Template File Selection
      The JSP page should now be open in the editor.
  2. To add the Web Service Proxy object onto the Page Data:
    1. In the Page Data dialog, right-click on JSP scripting, then select New => Web Service Proxy (Figure 13).
      Figure 13. Page Data
      Figure 13. Page Data
    2. On the Add Web Service Proxy Bean dialog, select New.
      Figure 14. Add Web Service Proxy Bean
      Figure 14. Add Web Service Proxy Bean
    3. The Web Service Discovery Home screen will display (Figure 15). Here, you can invoke any compliant Web service either over the Internet or within your own workspace with a running UTE Server. Select Web Services from your workspace.
      Figure 15. Web Service Directory Home
      Figure 15. Web Service Directory Home
    4. If the server is running, the link to the company information Web service will display (Figure 16). Select the link.
      Figure 16. Web Services Information display
      Figure 16. Web Services Information display
    5. Select the StockFacade port, then press the Details button.
      Figure 17. Web Services information listing
      Figure 17. Web Services information listing
    6. The WebSphere Studio Web Service Explorer will launch. Select the getCompanyInfo link (Figure 18).
      Figure 18. WSDL Binding Details
      Figure 18. WSDL Binding Details
    7. Enter IBM for the symbol, then select Go.
      Figure 19. Invoke a WSDL Operation
      Figure 19. Invoke a WSDL Operation
    8. On the bottom frame, you should see the results of the invocation (Figure 20). Also examine the SOAP envelope to verify that the Web service in fact works. When done, close the Web Service Explorer.
      Figure 20. Invocation results
      Figure 20. Invocation results
    9. Returning to the JSF Web Service Proxy wizard where StockFacade had been selected, click getCompanyInfo (Figure 21).
      Figure 21. Web Services information listing
      Figure 21. Web Services information listing
    10. Again, select Yes to All for the Web Services Warning. When finished, this will create the Web service proxy and add it as page data (Figure 22). Press OK.
      Figure 22. Web services proxy bean created
      Figure 22. Web services proxy bean created
    11. The page data now has the Web service available to the page.
      Figure 23. Page data with available Web services
      Figure 23. Page data with available Web services
  3. We are now ready to add the Web service control onto the page:
    1. In Application Developer, drag the getCompanyInfo method onto the JSP page, as shown in Figure 24.
      Figure 24. Add Web service control to JSP page
      Figure 24. Add Web service control to JSP page
    2. This action will create an input form. Highlight the label shown in Figure 25.
      Figure 25. Change heading on input form
      Figure 25. Change heading on input form
    3. In the Attributes view, select the Heading 3 option.
      Figure 26. Field attributes
      Figure 26. Field attributes
    4. Change the text to read Get Company Information. Next, select the label next to the input control (Figure 27).
      Figure 27. Change field label on input form
      Figure 27. Change field label on input form
    5. Go to the Attributes view and make the field a Header field (Figure 28).
      Figure 28. Field attributes
      Figure 28. Field attributes
    6. Change the text to read Enter Symbol. Next, select the Invoke button.
      Figure 29. Change button label
      Figure 29. Change button label
    7. Go to the Attributes view and enter Get Company Information for the Label field.
      Figure 30. Field attributes
      Figure 30. Field attributes
    8. You may notice an error in the generated codebehind. If so, the current driver does not add the catch block for any custom exception thrown by the Web service. We can fix this.
      Figure 31. Java Resources error
      Figure 31. Java Resources error
    9. From the Task view, right-click the error and select Quick Fix.
      Figure 32. Quick Fix option
      Figure 32. Quick Fix option
    10. Select the Add catch clause to surrounding try option.
      Figure 33. Available quick fixes
      Figure 33. Available quick fixes
    11. The selected fix will add the try code block (Figure 34) and open the generated Java class. Close the Java class.
      Figure 34. Try block
      Figure 34. Try block
    12. Select Button on the JSP and go to the Quick Edit view. In each catch block, paste the code in C:\JSFLAB\Lab5\CodeSnippet1.txt. The result is shown in Figure 35.
      Figure 35. Catch block containing quick fix code
      Figure 35. Catch block containing quick fix code
    13. We will add the error message to the button component, enabling us to drag an error component later and associate it with the button component.
  4. We will now add the output component. By dragging the Web service onto the screen, a result Company Info Bean was created on the Page Data view. We need to drag this component onto the page. By default, it will only print the object ID.
    1. Drag the getCompanyInfoResultBean onto the page as shown in Figure 36; replace the resultBean component already there.
      Figure 36. Add CompanyInfo to the JSP page
      Figure 36. Add CompanyInfo to the JSP page
    2. Select Create output components, then OK.
      Figure 37. Select drop action
      Figure 37. Select drop action
    3. Update the label to say Company Information , then again use the Attributes view to make it Header 3.
      Figure 38. Change heading label
      Figure 38. Change heading label
    4. Update each field label to be a header cell using the Attributes view.
      Figure 39. Change field labels
      Figure 39. Change field labels
  5. We will now add an error control onto the page. This error control will be linked to the button on the screen. We set this error when catching the exceptions.
    1. Select the Display Error component.
      Figure 40. Display error
      Figure 40. Display error
    2. Drag the component above the Enter Symbol label.
      Figure 41. Display error placement
      Figure 41. Display error placement
    3. Select the output component (Figure 42).
      Figure 42. Select output component
      Figure 42. Select output component
    4. On the Attributes dialog, link the error control to the ID button (as we did in Part 4).
      Figure 43. Associate error control with button
      Figure 43. Associate error control with button
    5. Save and close the JSP.

Test JSF Web service client

We are now ready to test both a successful execution of the Web service and the error condition:

  1. From the Server view, restart the project, as shown in Figure 44.
    Figure 44. Restart project
    Figure 44. Restart project
  2. Right-click on companyInfoWS.jsp and select Run on Server.
    Figure 45. Run JSP
    Figure 45. Run JSP
  3. Select Finish on the Select Tasks dialog (Figure 46).
    Figure 46. Select Tasks
    Figure 46. Select Tasks
  4. Your browser should display. Enter IBM as the Symbol and press the Get Company Information button.
    Figure 47. Testing the JSP
    Figure 47. Testing the JSP
  5. The results of the successful test should be displayed right under the input form (Figure 48).
    Figure 48. Successful result
    Figure 48. Successful result
  6. Now, test an incorrect symbol by entering IBB this time, then press Get Company Information.
  7. The error output component should be displayed (Figure 49).
    Figure 49. Error result
    Figure 49. Error result

When completed, stop the server.


Conclusion

In this conclusion to our five part series, we showed how quickly we can build Service Oriented Applications, as well as build clients to Web services, using the Java Server Faces component of WebSphere Studio Application Developer. We quickly generated a Web service around an existing EJB component. Furthermore, we deployed and ran the Web service, and used the JSF Web Service Client Component to build a RAD client for a Web service.

Since this is the last article in the series, the final solution EAR for this entire exercise is included in the file C:\JSFArticleSeries\FinalSolution directory. (Assuming you extracted the zip file to C:\)

This concludes the article series for the JavaServer Faces technology preview in WebSphere Studio V5.1.1. I hope this series showed the capabilities and potential that JavaServer Faces will have inside J2EE and Service Oriented Architecture.


Acknowledgement

The author wishes to thank Beverly DeWitt for her contributions to this article.


Download

DescriptionNameSize
Code sampleJSFArticleSeriesP5.zip  ( HTTP | FTP )15.1 MB

Resources

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 WebSphere on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=WebSphere
ArticleID=14509
ArticleTitle=IBM WebSphere Developer Technical Journal: Developing JSF applications using WebSphere Studio V5.1.1 -- Part 5
publish-date=05122004