You are on page 1of 145

IBM WebSphere Developer Technical Journal: Developing JSF Applications using WebSphere Studio V5.1.

1 -- Part 1

Country/region [select] Terms of use

All of dW

Home Products Services & industry solutions Support & downloads My IBM

developerWorks > WebSphere >


developerWorks
In this article: IBM WebSphere Developer Technical Journal:
Developing JSF Applications using WebSphere
Introduction
Create a JSF Web project
Create a page template out of
Faces components
Conclusion Studio V5.1.1 -- Part 1
Download
Creating a JSF Web project and page template
Resources
About the author Document options
Level: Intermediate
Rate this page Print this page
Roland Barcia (barcia@us.ibm.com), Consulting IT Specialist, IBM Software Services for WebSphere
E-mail this page
Related links 19 Jan 2004
WebSphere technical library
Sample code

Part 1 of this 5-part series begins a series of hands-on exercises with Java Server Faces (JSF),
an exciting new feature for visually developing J2EE Web applications. Rate this page
Help us improve this
content
Introduction
For a year now, Java Server Faces has been one of the most anticipated technologies in J2EE Web development. With the release of
WebSphere Studio V5.1.1, Java Server Faces has arrived. Java Server Faces (JSF) provides exciting new development opportunities in
visually developing J2EE Web applications. Without JSF, the developer has to write code to handle almost all user interactions with the
application. Non-JSF Web applications use HTML controls for user input, but since HTML controls do not have any "smarts" of their own,
the developer must write code to handle all errors, input validations, string conversions and formatting, page flows, etc. JSF is a UI
framework that provides these user interactions for the developer, which greatly simplifies developing interactive Web applications. JSF
provides a UI framework that consists of UI components and a run time that renders these components to the client and manages the
page lifecycle (errors, validators, navigation, etc.).

This article is Part 1 of a 5-part series intended to give the reader hands-on experience using this new exciting feature. This series will
cover:

● Part 1: Creating a JSF Web project and page template


● Part 2: Creating JSF submission forms
● Part 3: Creating JSF applications that access data using Web Data Objects (WDO -- soon to be SDO: Service Data Objects)
● Part 4: Integrating JSF applications with Enterprise Java Beans using action handlers and JavaBean data components
● Part 5: Creating a JSF Web service client using the Web service proxy component.

These exercises will expose the Rapid Application Development (RAD) nature of JSF. Using the WebSphere Studio Web perspective,
developers can simply drag Faces Components onto JSF Pages. The richness of these controls lets Web developers build JSF applications
without needing to know Java.

In this article, we will create a JSF Web project and design a page template out of Faces components. Page templates provide an easy
way of applying a consistent feel across multiple Web pages. All five parts of this article series build upon each other. Readers should be
familiar with WebSphere Studio and with developing JSP applications. The material for this tutorial can be downloaded below.

The JSF tools in WebSphere Studio V5.1.1 are provided as a technical preview only, since the JSF specification is not yet final.
Development of production applications should be performed only when the JSF specification has been finalized and a version of
WebSphere Studio supporting this specification has been released by IBM.

Back to top

Create a JSF Web project


In this section, we will create a Web project and enable it for JSF support, which will add all the necessary libraries to our Web project.

1. Open WebSphere Studio.


a. Start WebSphere Studio Application Developer Version 5.1.1. If you have disabled the text box feature, enable it by
setting -setworkspace parameter on the command line.
b. Set the directory to C:\JSFLab\workspace. Go to the J2EE perspective.
2. We will now create a Web application. In the creation process, we will enable the application for JSF development support.
a. Go to the J2EE Hierarchy View. Right click Web Modules and select New => Dynamic Web Project. (Figure 1)

Figure 1. Create Web project

http://www-128.ibm.com/developerworks/websphere/techjournal/0401_barcia/barcia.html (1 of 21) [12/10/2006 12:26:50 AM]


IBM WebSphere Developer Technical Journal: Developing JSF Applications using WebSphere Studio V5.1.1 -- Part 1

b. This will open the Dynamic Web Project wizard. For the Project Name, enter PersonalTradeJSF. Click configure advanced
options and select Next. (Figure 2)

Figure 2. Configure advanced options

c. On the next page, set the name of the EAR Project to StockSystemEAR. (An EAR file will be generated if you do not
specify one.) For the Context root, enter pts. Ensure that J2EE level is 1.3. Select Next. (Figure 3)

Figure 3. EAR file and context root

http://www-128.ibm.com/developerworks/websphere/techjournal/0401_barcia/barcia.html (2 of 21) [12/10/2006 12:26:50 AM]


IBM WebSphere Developer Technical Journal: Developing JSF Applications using WebSphere Studio V5.1.1 -- Part 1

d. The "Features Page" dialog lists the features that can be added to Web applications. Select the following: (Faces
Support is added automatically when using the Faces Tools.) (Figure 4)
■ Add Faces Base Components
■ Default style sheet (CSS file)
■ WDO Relational database runtime
■ JSP Tag Libraries
Press Finish.

Figure 4. Web features

http://www-128.ibm.com/developerworks/websphere/techjournal/0401_barcia/barcia.html (3 of 21) [12/10/2006 12:26:50 AM]


IBM WebSphere Developer Technical Journal: Developing JSF Applications using WebSphere Studio V5.1.1 -- Part 1

3. Import some images needed by our application.


a. Switch to the Project Navigator view. Expand PersonalTradeJSF, right-click on the WebContent folder and select
Import from the Context Menu. (Figure 5)

Figure 5. Import Menu

b. Select File System, then Next.


c. Browse to C:\JSFArticleSeries\Part1\WebContent, expand WebContent and select the theme check box. Be sure that
PersonalTradeJSF\WebContent is specified as the Into folder and that Create selected folders only is selected. Select
Finish. (Figure 6)

Figure 6. Import Web Content

http://www-128.ibm.com/developerworks/websphere/techjournal/0401_barcia/barcia.html (4 of 21) [12/10/2006 12:26:50 AM]


IBM WebSphere Developer Technical Journal: Developing JSF Applications using WebSphere Studio V5.1.1 -- Part 1

d. There should now be some gif files in the theme folder, as illustrated in Figure 7.

Figure 7. Imported Web Content

Back to top

Create a page template out of Faces components


Maintaining a common look-and-feel across Web pages is a common and desirable practice. WebSphere Studio uses the concept of page
templates to accomplish this. The JSF tools can be used to build a common page template, which we will do in the following steps:

1. First, we need to create a page template file to use for the rest of our JSF pages.
a. If you are not in the Web perspective, go to it now. In the Project Navigator, expand the PersonalTradeJSF project.
Right-click the WebContent Folder. Select New => Page Template File, as shown in Figure 8.

http://www-128.ibm.com/developerworks/websphere/techjournal/0401_barcia/barcia.html (5 of 21) [12/10/2006 12:26:50 AM]


IBM WebSphere Developer Technical Journal: Developing JSF Applications using WebSphere Studio V5.1.1 -- Part 1

Figure 8. Create Page Template file

b. Enter or select the following values in the "New Page Template" dialog (Figure 9):
■ Folder: /PersonalTraseJSF/WebContent
■ File Name: StockPageTemplate
■ Model: Template Containing Faces Component
Select Finish.

Figure 9. Page Template wizard

c. The page template should open in the editor window. Select OK on the pop-up dialog asking for at least one Content
Area (Figure 10), since one will be added shortly.

If the page template does not open, you can find it under the WebContent folder, as shown in Figure 11.

Figure 10. Content Area warning

http://www-128.ibm.com/developerworks/websphere/techjournal/0401_barcia/barcia.html (6 of 21) [12/10/2006 12:26:50 AM]


IBM WebSphere Developer Technical Journal: Developing JSF Applications using WebSphere Studio V5.1.1 -- Part 1

Figure 11. Newly created Page Template

2. We will now get our first exposure to the Faces components under the palette, and drag some visual components onto the
StockTemplate.
a. If you are not in the Web perspective, go there now. Ensure that the StockTemplate.jtpl is open. On the right side of the
workbench, you should see the Palette. The Faces Components section contains standard JSF components along with
some IBM extended components. Expand the Faces Components section, and select the Panel-Group Box
component. (Figure 12)

Figure 12. Visual palette

http://www-128.ibm.com/developerworks/websphere/techjournal/0401_barcia/barcia.html (7 of 21) [12/10/2006 12:26:50 AM]


IBM WebSphere Developer Technical Journal: Developing JSF Applications using WebSphere Studio V5.1.1 -- Part 1

b. Drag the Panel-Group Box component onto the blank StockTemplate.jtpl, as shown in Figure 13. If there is any text,
remove it from the JTPL before dragging the component. A dialog box should display asking you to select the type of
component. Select List, as shown in Figure 14.

Figure 13. Drag component on to design View

Figure 14. List panel

http://www-128.ibm.com/developerworks/websphere/techjournal/0401_barcia/barcia.html (8 of 21) [12/10/2006 12:26:50 AM]


IBM WebSphere Developer Technical Journal: Developing JSF Applications using WebSphere Studio V5.1.1 -- Part 1

c. The panel list allows Web developers to layout out components side by side. Therefore, we will drag two images onto
the panel. Select the Image component from the Faces panel (Figure 15) and drag it into the panel list.

Figure 15. Image component

d. Repeat the previous step to get two images side-by-side, as shown in Figure 16.

Figure 16. Images components within Panel components

e. Components can be customized by adding attributes. Select the first image and go to the bottom left corner. The
Attribute view should be active and should contain the attributes for the selected item on the Web page, in this case the
image. Select the Browse button, next to the File text box, as shown in Figure 17.

Figure 17. Select image

f. Expand the Web application down to the theme directory and select tradebanner1.gif. (Figure 18)

Figure 18. Select image

http://www-128.ibm.com/developerworks/websphere/techjournal/0401_barcia/barcia.html (9 of 21) [12/10/2006 12:26:50 AM]


IBM WebSphere Developer Technical Journal: Developing JSF Applications using WebSphere Studio V5.1.1 -- Part 1

g. The page should display as shown in Figure 19. Next, on the JTPL page, select the section image component.

Figure 19. tradebanner1 image

h. For the purposes of this exercise, go to the Attribute view and remove the /pts/ from the file name, as shown in Figure
20, so that the resulting relative path appears as it does in Figure 21. (Making this change avoids a known bug in the
beta version of the tool involving absolute path names and page templates; otherwise, the tradebanner1.gif will not
properly resolve.)

Figure 20. Use relative paths for this exercise

http://www-128.ibm.com/developerworks/websphere/techjournal/0401_barcia/barcia.html (10 of 21) [12/10/2006 12:26:50 AM]


IBM WebSphere Developer Technical Journal: Developing JSF Applications using WebSphere Studio V5.1.1 -- Part 1

Figure 21. Relative path result

i. Return to the attribute page and browse to the tradebanner2.gif (Figure 22), remembering to change to relative paths.

Figure 22. Repeat for second image

http://www-128.ibm.com/developerworks/websphere/techjournal/0401_barcia/barcia.html (11 of 21) [12/10/2006 12:26:50 AM]


IBM WebSphere Developer Technical Journal: Developing JSF Applications using WebSphere Studio V5.1.1 -- Part 1

j. There should be an unwanted space between the two images. Resolve this by editing the properties of the panel box.
Back in the attribute box, we need to expose the attributes of the panel. Because the image is in the panel, we can use
the drop arrow, as shown in Figure 23, to select the panel and edit the properties. Select HX:PANEL_BOX, as shown
below.

Figure 23. Panel attributes

k. Select the All tab (Figure 24). Enter a value of 0 for border, cellpadding, and cellspacing.

Figure 24. Panel attributes for border

http://www-128.ibm.com/developerworks/websphere/techjournal/0401_barcia/barcia.html (12 of 21) [12/10/2006 12:26:50 AM]


IBM WebSphere Developer Technical Journal: Developing JSF Applications using WebSphere Studio V5.1.1 -- Part 1

l. Return to the Web template, put the cursor under the panel, and press Enter to add a line. In the Palette window,
expand the HTML Tags section, and select Horizontal Rule (Figure 25).

Figure 25. Select HR from HTML tags palette

m. Drag the Horizontal Rule attribute under the images, as shown in Figure 26.

Figure 26. Web features

http://www-128.ibm.com/developerworks/websphere/techjournal/0401_barcia/barcia.html (13 of 21) [12/10/2006 12:26:50 AM]


IBM WebSphere Developer Technical Journal: Developing JSF Applications using WebSphere Studio V5.1.1 -- Part 1

n. Next, expand the Page Template section of the palette and select Content Area (Figure 27). When creating a JSP,
content areas are the editable sections of the JSP. Every template needs at least one content area. Any changes to the
template will affect every JSP that uses the template. Drag the content area under the horizontal bar.

Figure 27. Content area

o. A pop-up box will appear, as shown in Figure 28. Leave the default name and press OK.

Figure 28. Content area

http://www-128.ibm.com/developerworks/websphere/techjournal/0401_barcia/barcia.html (14 of 21) [12/10/2006 12:26:50 AM]


IBM WebSphere Developer Technical Journal: Developing JSF Applications using WebSphere Studio V5.1.1 -- Part 1

p. Enter another space in the template, drag another horizontal bar from the HTML Tags palette, then add additional space
(Figure 29).

Figure 29. Add another HR

q. q) Back in the Palette window, select Faces Component => Panel - Group Box, as shown in Figure 30.

Figure 30. Panel - Group Box

http://www-128.ibm.com/developerworks/websphere/techjournal/0401_barcia/barcia.html (15 of 21) [12/10/2006 12:26:50 AM]


IBM WebSphere Developer Technical Journal: Developing JSF Applications using WebSphere Studio V5.1.1 -- Part 1

Drag Panel - Group Box to the bottom of the page. This time, select Grid, as shown in Figure 31. Grid groups
components one on top of the other.

Figure 31. Select Grid

r. From the palette, select the Image component under Faces Components (Figure 32), and drag it to the bottom of the
page.

Figure 32. Image component

Figure 33. Image within a panel

s. Highlight the image box, then go to the Attribute view (Figure 34). Like before, select Browse next to the File text box.

Figure 34. Browse for image

http://www-128.ibm.com/developerworks/websphere/techjournal/0401_barcia/barcia.html (16 of 21) [12/10/2006 12:26:50 AM]


IBM WebSphere Developer Technical Journal: Developing JSF Applications using WebSphere Studio V5.1.1 -- Part 1

t. Select WEBSPHERE_22P.GIF, as shown as Figure 35. (Remember to change the file name to use relative paths.)

Figure 35. Select WEBSPHERE_22P.GIF

u. The template should look like Figure 36.

Figure 36. Template page with all components

http://www-128.ibm.com/developerworks/websphere/techjournal/0401_barcia/barcia.html (17 of 21) [12/10/2006 12:26:50 AM]


IBM WebSphere Developer Technical Journal: Developing JSF Applications using WebSphere Studio V5.1.1 -- Part 1

v. Finally, we need to update one last attribute. All the components on a page are embedded within a Body tag. Go to the
Attribute view and select Body from the drop down (Figure 37).

Figure 37. Select BODY from Attribute view

w. Click the drop-down box next to the Image field and select Browse (Figure 38).

Figure 38. Browse for image

http://www-128.ibm.com/developerworks/websphere/techjournal/0401_barcia/barcia.html (18 of 21) [12/10/2006 12:26:50 AM]


IBM WebSphere Developer Technical Journal: Developing JSF Applications using WebSphere Studio V5.1.1 -- Part 1

x. Select grid.gif in the theme folder (Figure 39).

Figure 39. Select grid.gif

y. The resulting page should look like Figure 40.

Figure 40. Resulting page

http://www-128.ibm.com/developerworks/websphere/techjournal/0401_barcia/barcia.html (19 of 21) [12/10/2006 12:26:50 AM]


IBM WebSphere Developer Technical Journal: Developing JSF Applications using WebSphere Studio V5.1.1 -- Part 1

z. Select the Preview tab to view the final result, as shown in Figure 41.

Figure 41. Preview tab

Save and close the template file.

Back to top

Conclusion
In this article, we introduced the new Java Server Faces tools available within WebSphere Studio Version 5.1.1, built a Web project, and
created a page template using Faces components. In the next part of this series, we will create JSF submission forms and test them
using the WebSphere Universal Test Environment.

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

http://www-128.ibm.com/developerworks/websphere/techjournal/0401_barcia/barcia.html (20 of 21) [12/10/2006 12:26:50 AM]


IBM WebSphere Developer Technical Journal: Developing JSF Applications using WebSphere Studio V5.1.1 -- Part 1

Back to top

Download
Name SizeDownload method
JSFArticleSeriesP1.zip 50 KBFTP | HTTP

Information about download methods Get Adobe® Reader®

Back to top

Resources
● IBM WebSphere Developer Technical Journal

● Part 2: Creating JSF submission forms

● Part 3: Creating JSF applications that access data using Web Data Objects

● Part 4: Integrating JSF applications with Enterprise Java Beans using action handlers and JavaBean data components

● JavaServer Faces Sun Web site

● Part 5: Creating a JSF Web service client using the Web service proxy component

● JavaServer Faces Sun Web site

● JSF Central

Back to top

About the author


Roland Barcia is a Consulting IT Specialist for IBM Software Services for WebSphere in the New York/New Jersey
Metro area. He is a co-author of IBM WebSphere: Deployment and Advanced Configuration. For more information on
Roland, visit his Web site.

Back to top

Rate this page


Please take a moment to complete this form to help us better serve you.

Did the information help


you to achieve your goal? Yes No Don't know

Please provide us with


comments to help
improve this page:

How useful is the


information? 1 2 3 4 5
Not Extremely
useful useful

Back to top

About IBM Privacy Contact

http://www-128.ibm.com/developerworks/websphere/techjournal/0401_barcia/barcia.html (21 of 21) [12/10/2006 12:26:50 AM]


IBM WebSphere Developer Technical Journal: Developing JSF Applications using WebSphere Studio V5.1.1 -- Part 2

Country/region [select] Terms of use

All of dW

Home Products Services & industry solutions Support & downloads My IBM

developerWorks > WebSphere >


developerWorks
In this article: IBM WebSphere Developer Technical Journal:
Developing JSF Applications using WebSphere
Introduction
Create accessStock JSF form
Test the JSF form in the
WebSphere Application Server
V5.1 test environment Studio V5.1.1 -- Part 2
Create and test
Creating JSF submission forms
accessStockHistory.jsp
Conclusion Document options
Level: Intermediate
Download Print this page
Resources
Roland Barcia (barcia@us.ibm.com), Consulting IT Specialist, IBM Software Services for
About the author
WebSphere E-mail this page
Rate this page

18 Feb 2004 Sample code

Related links
WebSphere technical library
Part 2 of this 5-part series on Java Server Faces builds upon Part 1, continuing with the Rate this page
creation of JSF submission forms, and showing some of the dynamic controls that can be Help us improve this
used for visually developing J2EE Web applications. content

Introduction
This is part of 2 of a 5 part article series illustrating the features of the Java™ Server Faces (JSF) technology preview available in
WebSphere® Studio V5.1.1. The articles that make up this series include:

● Part 1: Creating a JSF Web project and page template


● Part 2: Creating JSF submission forms
● Part 3: Creating JSF applications that access data using Web Data Objects (WDO -- soon to be SDO: Service Data Objects)
● Part 4: Integrating JSF applications with Enterprise Java Beans using action handlers and JavaBean data components
● Part 5: Creating a JSF Web service client using the Web service proxy component.

These exercises will expose the Rapid Application Development (RAD) nature of JSF. In Part 1, we created a JSF-enabled Web
project and a JSF page template. Page templates help us deal with the static portions of our Web sites, although J2EE applications
servers are designed for running dynamic Web pages. In Part 2, we will create two JSF submission forms and show some of the
dynamic controls on the visual palette, continuing where we left off in Part 1.

You can download the solution to Part 1 from the Download section of this article. If you extract the zip file to your C: drive, you can
import the StockSystemEAR file from C:\JSFArticleSeries\Part2\SolutionPt1 into a clean workspace, then select File => Import, then EAR
file from the Import wizard (Figure 1).

Figure 1. Import EAR

http://www-128.ibm.com/developerworks/websphere/techjournal/0402_barcia/0402_barcia.html (1 of 20) [12/10/2006 12:31:39 AM]


IBM WebSphere Developer Technical Journal: Developing JSF Applications using WebSphere Studio V5.1.1 -- Part 2

Back to top

Create accessStock JSF form


To create our first JSF form, your workspace should first be open from the last exercise from Part 1.

1. Create a new JSF page within our Web project:


a. If you are not in the Web perspective, go there now. Expand the PersonalTradeJSF Web project and right-click
the WebContent folder and select New => Faces JSP File (Figure 2).
Figure 2. Create new JSP file

b. Enter accessStock.jsp for the File Name and check Create from page template (Figure 3). Press Next.
Figure 3. New Faces JSP File

http://www-128.ibm.com/developerworks/websphere/techjournal/0402_barcia/0402_barcia.html (2 of 20) [12/10/2006 12:31:39 AM]


IBM WebSphere Developer Technical Journal: Developing JSF Applications using WebSphere Studio V5.1.1 -- Part 2

c. Select User-Defined Page Template and StockPageTemplate.jtpl. If the template is not listed, select Browse
=> Current Project next Location (Figure 4). Select Finish.
Figure 4. Page Template File Selection

http://www-128.ibm.com/developerworks/websphere/techjournal/0402_barcia/0402_barcia.html (3 of 20) [12/10/2006 12:31:39 AM]


IBM WebSphere Developer Technical Journal: Developing JSF Applications using WebSphere Studio V5.1.1 -- Part 2

d. The Faces JSP page should match the template we built previously (Figure 5). You will notice "Default content of
bodyarea". This is the only place on the page into which we can drag components. Any changes to the template
need to be made to the template file; only the content area is dynamic.
Figure 5. Faces JSP Page

2. We will now drag JSF components into the content area:


a. Delete the "Default content of body area" text and create some spaces in between the start and end pencil icons.
From the Faces Components section of the palette (Figure 6), drag the Output component onto the content area.
Figure 6. Faces Components palette

http://www-128.ibm.com/developerworks/websphere/techjournal/0402_barcia/0402_barcia.html (4 of 20) [12/10/2006 12:31:39 AM]


IBM WebSphere Developer Technical Journal: Developing JSF Applications using WebSphere Studio V5.1.1 -- Part 2

b. After dragging the component into the content area (Figure 7), the Select Type dialog appears asking you to
identify the type of component (Figure 8). Select Text and OK.
Figure 7. Drag component into content area

Figure 8. Select Type

http://www-128.ibm.com/developerworks/websphere/techjournal/0402_barcia/0402_barcia.html (5 of 20) [12/10/2006 12:31:39 AM]


IBM WebSphere Developer Technical Journal: Developing JSF Applications using WebSphere Studio V5.1.1 -- Part 2

c. Select the component. For Value, enter Access Stock, then select the Properties tab (Figure 9).
Figure 9. Attributes

d. Change the font size of the text to 18 points, then OK (Figure 10).
Figure 10. Add Style

http://www-128.ibm.com/developerworks/websphere/techjournal/0402_barcia/0402_barcia.html (6 of 20) [12/10/2006 12:31:39 AM]


IBM WebSphere Developer Technical Journal: Developing JSF Applications using WebSphere Studio V5.1.1 -- Part 2

Figure 11. Properties

e. Next, add a space under the label on the JSP page. From the palette (Figure 12), select the Input component and
drag it next to the Access Stock output component.
Figure 12. Faces Components palette

http://www-128.ibm.com/developerworks/websphere/techjournal/0402_barcia/0402_barcia.html (7 of 20) [12/10/2006 12:31:39 AM]


IBM WebSphere Developer Technical Journal: Developing JSF Applications using WebSphere Studio V5.1.1 -- Part 2

f. Again, select Text from Select Type dialog (Figure 13).


Figure 13. Select Type

g. The JSP page should now look similar to Figure 14. Enter a few new lines after the input box.
Figure 14. New JSP page content area

http://www-128.ibm.com/developerworks/websphere/techjournal/0402_barcia/0402_barcia.html (8 of 20) [12/10/2006 12:31:39 AM]


IBM WebSphere Developer Technical Journal: Developing JSF Applications using WebSphere Studio V5.1.1 -- Part 2

h. Select Command - Button from the palette (Figure 15) and drag it onto the JSP page (Figure 16).
Figure 15. Select Command - Button

Figure 16. New JSP page

i. Select the new button and then go to the Attributes view. Select the Format tab and enter Submit Stock Request for the
Label. The button on the JSP should reflect this new label.
Figure 17. Define Label

http://www-128.ibm.com/developerworks/websphere/techjournal/0402_barcia/0402_barcia.html (9 of 20) [12/10/2006 12:31:39 AM]


IBM WebSphere Developer Technical Journal: Developing JSF Applications using WebSphere Studio V5.1.1 -- Part 2

j. Save the JSP page.


3. Now that we have created our first JSF form, we need to bind the controls to page data. The Page Data view allows the Web
developer to create scripting variables for any of the allowable JSP scope levels.
a. With accessStock.jsp still open, go to the Page Data view on the middle left side of the workbench. Select JSP
scripting, right-click on requestScope, then select Add Request Scope Variable (Figure 18).
Figure 18. JSP scripting menu

b. In the Add Request Scope Variable dialog that displays, enter the following values:
■ Variable name: symbol
■ Type: java.lang.String
then select OK.
c. The variable is now defined. Any tag that supports JSTL expression language can now access the symbol variable
using ${requestScope.symbol}. JSF tags support the JSTL expression language; JSP 2.0 will fully support the JSTL
expression language as well. An expression language is much easier for a Web developer to use than JSP
expressions in Java.
Figure 19. Accessing the symbol variable

http://www-128.ibm.com/developerworks/websphere/techjournal/0402_barcia/0402_barcia.html (10 of 20) [12/10/2006 12:31:39 AM]


IBM WebSphere Developer Technical Journal: Developing JSF Applications using WebSphere Studio V5.1.1 -- Part 2

4. We can now use the Attribute view of certain components to bind the page data we have defined to a control. Here, we will
bind the input control to the symbol variable defined in the requestScope:
a. Highlight the input control on accessStock.jsp (Figure 20).
Figure 20. accessStock.jsp

b. From the Attribute view, select the button beside the Bind to text box (Figure 21).
Figure 21. Attributes view

c. Select the symbol variable under requestScope and press OK (Figure 22).
Figure 22. Select Page Data Object

http://www-128.ibm.com/developerworks/websphere/techjournal/0402_barcia/0402_barcia.html (11 of 20) [12/10/2006 12:31:39 AM]


IBM WebSphere Developer Technical Journal: Developing JSF Applications using WebSphere Studio V5.1.1 -- Part 2

d. The JSP should display the {symbol} variable in the input box (Figure 23).
Figure 23. JSP with symbol variable

e. Save the JSP.


f. On the JSP page, select the Preview tab to view the result.
Figure 24. JSP preview

http://www-128.ibm.com/developerworks/websphere/techjournal/0402_barcia/0402_barcia.html (12 of 20) [12/10/2006 12:31:39 AM]


IBM WebSphere Developer Technical Journal: Developing JSF Applications using WebSphere Studio V5.1.1 -- Part 2

Back to top

Test the JSF form in the WebSphere Application Server V5.1 test
environment
We will now use the WebSphere Application Server V5.1 Unit Test Environment (UTE), included with WebSphere Studio, to test the
page.

1. From the Project Navigator view, right-click on accessStock.jsp, and select Run on Server (Figure 25).
Figure 25. Test JSP

http://www-128.ibm.com/developerworks/websphere/techjournal/0402_barcia/0402_barcia.html (13 of 20) [12/10/2006 12:31:39 AM]


IBM WebSphere Developer Technical Journal: Developing JSF Applications using WebSphere Studio V5.1.1 -- Part 2

2. The Server Configuration wizard will display. The Test Environment option should be selected under WebSphere version
5.1. Select the Set server as project default option, then Finish (Figure 26).
Figure 26. Server selection

http://www-128.ibm.com/developerworks/websphere/techjournal/0402_barcia/0402_barcia.html (14 of 20) [12/10/2006 12:31:39 AM]


IBM WebSphere Developer Technical Journal: Developing JSF Applications using WebSphere Studio V5.1.1 -- Part 2

3. Once the server completely starts, the browser should also start. Notice that the URL goes through the Faces servlet.
Without going through the Faces servlet, the Faces context will not be setup and the JSP render would fail. WebSphere
Studio automatically knows to access the JSP through the Faces servlet because we added Faces support when creating the
Web project.
Figure 27. Universal Test Client startup

Figure 28. Testing the JSP

4. In the JSP, enter a value of IBM , then Submit Stock Request (Figure 29). Notice that the page re-renders while the Text
box still populates. The control is bound to the request variable for input and output. Also, the default navigation of JSF is
to re-render the same page if no navigation is set or no navigation result is found. For pages wanting to use both input and
output controls on the same page, it is quite easy to develop a JSF page with no navigation.
Figure 29. Testing the JSP

http://www-128.ibm.com/developerworks/websphere/techjournal/0402_barcia/0402_barcia.html (15 of 20) [12/10/2006 12:31:39 AM]


IBM WebSphere Developer Technical Journal: Developing JSF Applications using WebSphere Studio V5.1.1 -- Part 2

Back to top

Create and test accessStockHistory.jsp


In the previous section, we walked through the creation of a JSF form. We will now create a second JSF form to access stock
history, although we will only step through the creation process at a high level. This new page will be used in Part 3 of this article
series.

Create another form using Faces components that will return a list of stock history. Follow the detailed steps above to create the
form, to be named "Access Stock History":

1. The new form should look like the page in Figure 30, below.
Figure 30. New JSF form

2. Be sure to create the symbol variable and to bound the input box to the symbol variable.
Figure 31. Create symbol variable

Figure 32. Bound input box to symbol variable

http://www-128.ibm.com/developerworks/websphere/techjournal/0402_barcia/0402_barcia.html (16 of 20) [12/10/2006 12:31:39 AM]


IBM WebSphere Developer Technical Journal: Developing JSF Applications using WebSphere Studio V5.1.1 -- Part 2

3. Preview and test the page when the form is compete. You will need to restart the application server.
Figure 33. Restart application server

4. Aside from the title, the new page should look similar to the one previously created.
Figure 34. New application page

http://www-128.ibm.com/developerworks/websphere/techjournal/0402_barcia/0402_barcia.html (17 of 20) [12/10/2006 12:31:39 AM]


IBM WebSphere Developer Technical Journal: Developing JSF Applications using WebSphere Studio V5.1.1 -- Part 2

5. Save and close the file.


6. Go to the Project Navigator view and expand the Java Resources folder. Under the codebehind package, you will see the
generated java code that corresponds to the JSP pages.
Figure 35. Codebehind package

7. Additionally, each generated Java class is added as a JSF managed bean. Open the faces-config.xml file under the WEB-INF
directory to examine the file, the contents of which is shown in Listing 1.
Figure 36. Locating the faces-config.xml file

Listing 1. faces-config.xml

http://www-128.ibm.com/developerworks/websphere/techjournal/0402_barcia/0402_barcia.html (18 of 20) [12/10/2006 12:31:39 AM]


IBM WebSphere Developer Technical Journal: Developing JSF Applications using WebSphere Studio V5.1.1 -- Part 2

<managed-bean>
<managed-bean-name>cb_StockPageTemplate</managed-bean-name>
<managed-bean-class>codebehind.StockPageTemplate</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>
<managed-bean>
<managed-bean-name>cb_accessStock</managed-bean-name>
<managed-bean-class>codebehind.accessStock</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>
<managed-bean>
<managed-bean-name>cb_accessStockHistory</managed-bean-name>
<managed-bean-class>codebehind.accessStockHistory</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>

8. Stop the server when finished.


Figure 37. Stop the server

Back to top

Conclusion
In Part 2 of this article series, we have successfully built two JSF forms. In so doing, we also saw how the JSF visual palette
conveniently provides JSF components for building open and powerful Web sites. Part 3 will continue with building the result of the
Stock History page using Web Data Object (WDO) Technology, which is another preview technology in WebSphere Studio V5.1.1.

Back to top

Download
Name SizeDownload method
JSFArticleSeriesP2.zip 2.4 MBFTP | HTTP

Information about download methods Get Adobe® Reader®

Back to top

Resources
● IBM WebSphere Developer Technical Journal

● Part 1: Creating a JSF Web project and page template

● Part 3: Creating JSF applications that access data using Web Data Objects

● Part 4: Integrating JSF applications with Enterprise Java Beans using action handlers and JavaBean data components

● JavaServer Faces Sun Web site

http://www-128.ibm.com/developerworks/websphere/techjournal/0402_barcia/0402_barcia.html (19 of 20) [12/10/2006 12:31:39 AM]


IBM WebSphere Developer Technical Journal: Developing JSF Applications using WebSphere Studio V5.1.1 -- Part 2

● Part 5: Creating a JSF Web service client using the Web service proxy component

● JSF Central

Back to top

About the author


Roland Barcia is a Consulting IT Specialist for IBM Software Services for WebSphere in the New York/New Jersey
Metro area. He is a co-author of IBM WebSphere: Deployment and Advanced Configuration. For more information
on Roland, visit his Web site.

Back to top

Rate this page


Please take a moment to complete this form to help us better serve you.

Did the information help


you to achieve your goal? Yes No Don't know

Please provide us with


comments to help
improve this page:

How useful is the


information? 1 2 3 4 5
(1 = Not at all,
5 = Extremely useful)

Back to top

About IBM Privacy Contact

http://www-128.ibm.com/developerworks/websphere/techjournal/0402_barcia/0402_barcia.html (20 of 20) [12/10/2006 12:31:39 AM]


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

Country/region [select] Terms of use

All of dW

Home Products Services & industry solutions Support & downloads My IBM

developerWorks > WebSphere >


developerWorks
In this article: IBM WebSphere Developer Technical Journal: Developing JSF
applications using WebSphere Studio V5.1.1 -- Part 3
Introduction
Setup a database
Create a JSP using JSF/WDO
components Creating JSF applications that access data using Web Data Objects
Setup JSF Navigation
Document options
Test the JSF component Level: Intermediate
Setup page validation Print this page
Conclusion Roland Barcia (barcia@us.ibm.com), Consulting IT Specialist, IBM Software Services for WebSphere
Download E-mail this page
Resources 17 Mar 2004
About the author
Sample code
Rate this page
In Part 2 of this 5-part series, we built Java Server Faces forms using Rapid Application Development (RAD) JSF
components. In Part 3, we will see how JSF can work with data using Web Data Object (WDO) (soon to be Rate this page
Related links Service Data Object) technology. Help us improve this
WebSphere technical library content

Introduction
This is Part 3 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:

● Part 1: Creating a JSF Web project and page template


● Part 2: Creating JSF submission forms
● Part 3: Creating JSF applications that access data using Web Data Objects (WDO, soon to be SDO: Service Data Objects)
● Part 4: Integrating JSF applications with Enterprise Java Beans using action handlers and JavaBean data components
● Part 5: Creating a JSF Web service client using the Web service proxy component.

In Part 2, we saw how to build JSF forms using Rapid Application Development (RAD) Java Server Faces (JSF) components. In Part 3, we
will see how JSF can work with data using Web Data Object (WDO) technology. WDO is the IBM precursor to the emerging Service Data
Object (SDO) standard currently in development within the Sun Java Community Process as JSR 235. JSF and SDO make a
powerful combination that enables Web Applications to interact with enterprise data in a visual way, and does so without compromising
good design.

You will need to download the materials includes with this article to follow along and complete the exercise. The solution to the exercise
from Part 2 is included in the download file, in case you have not completed it. You can import the EAR file as illustrated in Part 2.

To run the example, we first need to create a database. We use DB2® here, but the database scripts are included in case you want to use it
as a model for a different database. After creating the database, we will use WebSphere Studio to create a WDO component and drag it onto
to a display page. We will test the application using the built-in unit test environment (UTE), and then lastly, you will see how JSF has a built
in validation framework by applying validation to the Stock History Form.

Back to top

http://www-128.ibm.com/developerworks/websphere/techjournal/0403_barcia/0403_barcia.html (1 of 36) [12/10/2006 12:37:09 AM]


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

Setup a database
You need to create a database before starting the exercise. To create a DB2 database:

1. Download the materials and database scripts provided in the Download section of this article, if you have not already done so.
2. Open a DB2 Command Window. This can be done through the Windows® Explorer (Figure 1).

Figure 1. Open DB2 command window

3. Switch to the directory where you extracted the ZIP file to and go to <Extracted Dir>\JSFArticleSeries\Part3\DBScript.
4. Type the command CreateWSTrade (Figure 2). This will create the necessary database tables. (We use db2admin/db2admin for the userID/password;
if you wish to change this, you can edit the CreateWSTrade.bat file.)

Figure 2. Create database tables

5. To verify that the database is installed correctly, connect to the database from the DB2 command window by typing (Figure 3):
db2 connect to WSTRADE user db2admin using db2admin

Figure 3. Connect to the database

6. Type the command: db2 select * from WSTRADE.STOCKHISTORY. You should get some results back, similar to Figure 4.

Figure 4. Database inquiry

7. Close the DB2 command window.


http://www-128.ibm.com/developerworks/websphere/techjournal/0403_barcia/0403_barcia.html (2 of 36) [12/10/2006 12:37:10 AM]
IBM WebSphere Developer Technical Journal: Developing JSF applications using WebSphere Studio V5.1.1 -- Part 3

Back to top

Create a JSP using JSF/WDO components


We are now ready to create our first JSF form. Your WebSphere Studio workspace should be open from the last lab.

1. First, we are going to create a new JSF page that will display the results of submitting a Stock History Request.
a. From the Web perspective, expand the PersonalTradeJSF Web project, right-click the WebContent folder, and select New => Faces
JSP File (Figure 5).

Figure 5. Project Navigator

http://www-128.ibm.com/developerworks/websphere/techjournal/0403_barcia/0403_barcia.html (3 of 36) [12/10/2006 12:37:10 AM]


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

b. Name the new JSP file viewStockHistory.jsp, check Create from page template, and press Next. (Figure 6)

Figure 6. Create a Faces JSP file

c. On the next dialog, make sure the StockPageTemplate.jtpl is selected and then Finish.

Figure 7. Create a Faces JSP file

http://www-128.ibm.com/developerworks/websphere/techjournal/0403_barcia/0403_barcia.html (4 of 36) [12/10/2006 12:37:10 AM]


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

2. The accessStockHistory page stores the symbol value as input in the request scope. Since accessStockHistory will forward to
the viewStockHistory page, the latter page will have access to the input to pass the symbol to the WDO object.
a. Ensure that viewStockHistory is the active JSP in the editor. In the Page Data view, add a new requestScope variable (Figure 8).

Figure 8. Page Data

http://www-128.ibm.com/developerworks/websphere/techjournal/0403_barcia/0403_barcia.html (5 of 36) [12/10/2006 12:37:10 AM]


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

b. The variable name is symbol and the type is java.lang.String (Figure 9). This should be the same information as on the submitting page.
Select OK.

Figure 9. Add Request Scope Variable

Figure 10. requestScope result

http://www-128.ibm.com/developerworks/websphere/techjournal/0403_barcia/0403_barcia.html (6 of 36) [12/10/2006 12:37:10 AM]


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

3. Next, we will build the result page using a WDO Data Component. WebSphere Studio automatically connects to the database and builds
the necessary data components.
a. First, we need to create a title label. From the JSF palette, select an Output component (Figure 11).

Figure 11. JSF palette

b. Drag the coomponent on the JSP page, between the start and end markers, and select Text as the Type.

Figure 12. JSF palette

http://www-128.ibm.com/developerworks/websphere/techjournal/0403_barcia/0403_barcia.html (7 of 36) [12/10/2006 12:37:10 AM]


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

c. Change the font size of the text to 18 in the Attribute view.

Figure 13. Attribute view

d. Create a blank line after the output component (Figure 13). Expand the Data (Beta) section of the palette. Select Relational Data List
(Figure 14) and drag it onto to the JSP page, as shown in Figure 15.

Figure 14. Visual palette

Figure 15. Stock History page

http://www-128.ibm.com/developerworks/websphere/techjournal/0403_barcia/0403_barcia.html (8 of 36) [12/10/2006 12:37:10 AM]


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

e. The Data wizard will display (Figure 16). Enter or select the following values:
■ Name: stockHistory
■ Scope: request
■ Action Type: Display existing data list
Select New beside the Connection name field.

Figure 16. Data wizard

f. In the New Connection dialog, enter WSTRADE for Connection name, then select New Connection. Press Next.

Figure 17. Connect to a database

http://www-128.ibm.com/developerworks/websphere/techjournal/0403_barcia/0403_barcia.html (9 of 36) [12/10/2006 12:37:10 AM]


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

g. In the Database Connection dialog (Figure 18), enter or select the following values:
■ Connection Name : WSTRADE
■ Database: WSTRADE
■ User ID: db2admin
■ Password: db2admin
■ Database vendor type: DB2 Universal Database V8.1
■ JDBC Driver: IBM DB2 APP DRIVER
■ Class location: should already contain the proper path.
Press Finish.

Figure 18. Establish a JDBC connection

http://www-128.ibm.com/developerworks/websphere/techjournal/0403_barcia/0403_barcia.html (10 of 36) [12/10/2006 12:37:10 AM]


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

h. In the Add Data List dialog (Figure 19), select the table WSTRADE.STOCKHISTORY and select Next.

Figure 19. Data List Properties

http://www-128.ibm.com/developerworks/websphere/techjournal/0403_barcia/0403_barcia.html (11 of 36) [12/10/2006 12:37:10 AM]


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

i. In the next dialog (Figure 20), leave all the fields checked and select Next.

Figure 20. Column selection and advanced tasks

http://www-128.ibm.com/developerworks/websphere/techjournal/0403_barcia/0403_barcia.html (12 of 36) [12/10/2006 12:37:10 AM]


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

j. On the next dialog (Figure 21), select the + button to add a condition.

Figure 21. Add conditions and orders

http://www-128.ibm.com/developerworks/websphere/techjournal/0403_barcia/0403_barcia.html (13 of 36) [12/10/2006 12:37:10 AM]


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

k. For Condition, select By columns, for Column, select SYMBOL and =. Next to the Value section, press the ... button.

Figure 22. Conditions

http://www-128.ibm.com/developerworks/websphere/techjournal/0403_barcia/0403_barcia.html (14 of 36) [12/10/2006 12:37:10 AM]


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

l. Select the symbol variable from requestScope (Figure 23), then OK.

Figure 23. Select Page Data Object

http://www-128.ibm.com/developerworks/websphere/techjournal/0403_barcia/0403_barcia.html (15 of 36) [12/10/2006 12:37:10 AM]


IBM WebSphere Developer Technical Journal: Developing JSF applications using WebSphere Studio V5.1.1 -- Part 3
m. This condition allows the data to be retrieved by input of the symbol on the request scope. Press OK (Figure 24) then Finish (Figure 25).

Figure 24. Conditions

Figure 25. Add Conditions and Orders

http://www-128.ibm.com/developerworks/websphere/techjournal/0403_barcia/0403_barcia.html (16 of 36) [12/10/2006 12:37:10 AM]


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

n. The JSP page should now contain the data grid component based on the table, as shown in Figure 26.

Figure 26. JSP page with data grid

http://www-128.ibm.com/developerworks/websphere/techjournal/0403_barcia/0403_barcia.html (17 of 36) [12/10/2006 12:37:10 AM]


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

o. The Page Data will have the stockHistory object defined (Figure 27).

Figure 27. stockHistory object defined

p. If you open the faces-config.xml file, you will notice that the data component is defined as a managed bean. You can find faces-config.xml file in
the WEB-INF/wdo directory. The file is listed below.

http://www-128.ibm.com/developerworks/websphere/techjournal/0403_barcia/0403_barcia.html (18 of 36) [12/10/2006 12:37:10 AM]


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

<managed-bean>
<managed-bean-name>stockHistory</managed-bean-name>
<managed-bean-class>com.ibm.etools.webtools.wdo.rdb.internal.DataListAccessBeanImpl
</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
<managed-property>
<property-name>connectionName</property-name>
<value>WSTRADE1</value>
</managed-property>
<managed-property>
<property-name>inputPath</property-name>
<value>/WEB-INF/wdo/stockHistory.xml</value>
</managed-property>
<managed-property>
<property-name>servletContext</property-name>
<value-ref>${facesContext.externalContext.context}</value-ref>
</managed-property>
<managed-property>
<property-name>servletRequest</property-name>
<value-ref>${facesContext.externalContext.request}</value-ref>
</managed-property>
<managed-property>
<property-name>action</property-name>
<value>fill</value>
</managed-property>
<managed-property>
<property-name>params</property-name>
<map-entries>
<map-entry>
<key>requestScopesymbol</key>
<value-ref>${requestScope.symbol}</value-ref>
</map-entry>
</map-entries>
</managed-property>
<managed-property>
<property-name>targetPageSize</property-name>
<value>0</value>
</managed-property>
</managed-bean>

4. We have the data control on the page, but we need to modify the visual structure of the table to meet the requirements. We can use
the Attributes View to update the table properties.
a. Select one of the columns on the table, then on the Attribute View, select HX:DATAGRID. This will let us update the data grid table on
the JSP page (Figure 28). (There are several useful items on the Basics tab in the Attributes view. You can add different elements, such
as a table header or footer, add a row select check box, and you can also support pagination for a data list.)

Figure 28. Attribute view

http://www-128.ibm.com/developerworks/websphere/techjournal/0403_barcia/0403_barcia.html (19 of 36) [12/10/2006 12:37:10 AM]


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

b. Select the Columns tab. Order the columns to display in the sequence shown in Figure 30.

Figure 30. Ordering columns

http://www-128.ibm.com/developerworks/websphere/techjournal/0403_barcia/0403_barcia.html (20 of 36) [12/10/2006 12:37:10 AM]


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

c. Select the Columns tab and make the border 0.

Figure 31. Data grid attributes

http://www-128.ibm.com/developerworks/websphere/techjournal/0403_barcia/0403_barcia.html (21 of 36) [12/10/2006 12:37:10 AM]


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

d. The screen should now look like Figure 32. You can preview the page as well.

Figure 32. Page preview

http://www-128.ibm.com/developerworks/websphere/techjournal/0403_barcia/0403_barcia.html (22 of 36) [12/10/2006 12:37:10 AM]


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

Back to top

Setup JSF Navigation


Now that we have created our Stock History page, we now need to define the navigation rule from accessStockHistory.jsp. WebSphere Studio
uses the Attribute view to do this.

1. First, we will define the Navigation:


a. From the Project Navigator, open accessStockHistory.jsp.

Figure 33. Project Navigator

http://www-128.ibm.com/developerworks/websphere/techjournal/0403_barcia/0403_barcia.html (23 of 36) [12/10/2006 12:37:10 AM]


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

b. Select the Access Stock History button.

Figure 34. Assign navigation

c. Go to the Attribute view, select the Navigation tab, then press the Add button.

Figure 35. Navigation attributes

http://www-128.ibm.com/developerworks/websphere/techjournal/0403_barcia/0403_barcia.html (24 of 36) [12/10/2006 12:37:10 AM]


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

d. Select viewStockHistory.jsp from the Page dropdown box (Figure 36). This defines which page this control will forward to. For Alias,
select success. Ensure that This page only is selected, then press OK. Whenever success is encountered, the faces Servlet will forward
to viewStockHistory.jsp. The success String can be returned as a result of an Action, or implicitly set as a default when submitting.

Figure 36. Add navigation rule

http://www-128.ibm.com/developerworks/websphere/techjournal/0403_barcia/0403_barcia.html (25 of 36) [12/10/2006 12:37:10 AM]


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

e. The Navigation should be defined as shown in Figure 37. This will also add the navigation entry to the faces-config.xml file.

Figure 37. Navigation entry

http://www-128.ibm.com/developerworks/websphere/techjournal/0403_barcia/0403_barcia.html (26 of 36) [12/10/2006 12:37:10 AM]


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

2. We now need the submission to trigger the success action so that the forward will succeed. We will not need a separate action for this
exercise. The request variable is bound. Also, viewStockHistory.jsp will use a pull MVC style; only the input (the symbol variable) needs to be pushed.
a. With the accessStockHistory.jsp still active in the editor, select the All tab in the Attributes view and enter success for the action.

Figure 38. Assign success action

http://www-128.ibm.com/developerworks/websphere/techjournal/0403_barcia/0403_barcia.html (27 of 36) [12/10/2006 12:37:10 AM]


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

b. Save both JSF pages. Open the faces-config.xml if you want to examine the navigation rule, which is shown here:
<navigation-rule>
<from-tree-id>/accessStockHistory.jsp</from-tree-id>
<navigation-case>
<from-outcome>success</from-outcome>
<to-tree-id>/viewStockHistory.jsp</to-tree-id>
</navigation-case>
</navigation-rule>

Back to top

Test the JSF component


By adding the WDO data component, WebSphere Studio automatically added the data source to the WebSphere Unit Test
Environment, enabling us to automatically test the application directly. To test the application:

1. Right-click the accessStockHistory.jsp file in the Project Navigator, then select Run on Server.

Figure 39. Run the application

http://www-128.ibm.com/developerworks/websphere/techjournal/0403_barcia/0403_barcia.html (28 of 36) [12/10/2006 12:37:10 AM]


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

2. When the server starts and the browser renders the form, enter IBM in the blank field and press Access Stock History (Figure 40). The
stock history data should display (Figure 41).

Figure 40. New JSP page

http://www-128.ibm.com/developerworks/websphere/techjournal/0403_barcia/0403_barcia.html (29 of 36) [12/10/2006 12:37:10 AM]


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

Figure 41. Successful result

http://www-128.ibm.com/developerworks/websphere/techjournal/0403_barcia/0403_barcia.html (30 of 36) [12/10/2006 12:37:10 AM]


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

Back to top

Setup page validation


You can easily apply a level of default validation from the validation framework built into JSF. We will add validation to the accessStockHistory.
jsp page in the form of a required field; we will make the symbol field a required entry so that if it is left blank, an error message will display:

1. Open accessStockHistory.jsp and select the symbol input control (Figure 42).
http://www-128.ibm.com/developerworks/websphere/techjournal/0403_barcia/0403_barcia.html (31 of 36) [12/10/2006 12:37:10 AM]
IBM WebSphere Developer Technical Journal: Developing JSF applications using WebSphere Studio V5.1.1 -- Part 3

Figure 42. accessStockHistory.jsp

2. In the Attributes view (Figure 43), select Value is required and Add Display Error control.
3. Click again on the symbol input control on the JSP page to associate the control with the attribute (Figure 42).
4. In the Attributes view, select the Set Custom Message button (Figure 43).

Figure 43. Attributes view

5. In the Set custom message dialog, add the text Symbol is required to the Message text box (Figure 44).

Figure 44. Set custom message

http://www-128.ibm.com/developerworks/websphere/techjournal/0403_barcia/0403_barcia.html (32 of 36) [12/10/2006 12:37:10 AM]


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

6. A placeholder for the error message will appear in the JSP (Figure 45).

Figure 45. JSP with error message pplaceholder

7. To test the validation, right-click on the server from the Server view, then select Restart Project => StockSystemEAR (Figure 46).

Figure 46. Restart project

8. Again, right-click the accessStockHistory.jsp and select Run on Server.


9. When the browser renders, press the Access Stock History button without entering any text. The validation error message should display.

Figure 48. Validation error message

http://www-128.ibm.com/developerworks/websphere/techjournal/0403_barcia/0403_barcia.html (33 of 36) [12/10/2006 12:37:10 AM]


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

10. To stop the server, go to the Servers view, right-click on the server and press Stop.

Figure 49. Stop server

Back to top

Conclusion
In this installment of our article series, we showed how JSF and WDO (soon to be SDO) make a powerful combination for building dynamic
Web pages quickly and efficiently. We also demonstrated how JSF supports validation in an easy and "toolable" way.

In Part 4, we will see how JSF can work just as easily with other J2EE technologies. Specifically, we will use the JavaBean component to
connect our JSF pages to existing EJB applications.

Back to top

Download
Name SizeDownload method

http://www-128.ibm.com/developerworks/websphere/techjournal/0403_barcia/0403_barcia.html (34 of 36) [12/10/2006 12:37:10 AM]


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

JSFArticleSeriesP3.zip 4.8 MBFTP | HTTP

Information about download methods Get Adobe® Reader®

Back to top

Resources
● IBM WebSphere Developer Technical Journal

● Part 1: Creating a JSF Web project and page template

● Part 2: Creating JSF submission forms

● Part 4: Integrating JSF applications with Enterprise Java Beans using action handlers and JavaBean data components

● JavaServer Faces Sun Web site

● Part 5: Creating a JSF Web service client using the Web service proxy component

● JSF Central

Back to top

About the author


Roland Barcia is a Consulting IT Specialist for IBM Software Services for WebSphere in the New York/New Jersey Metro area. He is a
co-author of IBM WebSphere: Deployment and Advanced Configuration. For more information on Roland, visit his Web site.

Back to top

Rate this page


Please take a moment to complete this form to help us better serve you.

Did the information help


you to achieve your goal? Yes No Don't know

Please provide us with


comments to help
improve this page:

http://www-128.ibm.com/developerworks/websphere/techjournal/0403_barcia/0403_barcia.html (35 of 36) [12/10/2006 12:37:10 AM]


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

How useful is the


information? 1 2 3 4 5
Not Extremely
useful useful

Back to top

About IBM Privacy Contact

http://www-128.ibm.com/developerworks/websphere/techjournal/0403_barcia/0403_barcia.html (36 of 36) [12/10/2006 12:37:10 AM]


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

Country/region [select] Terms of use

All of dW

Home Products Services & industry solutions Support & downloads My IBM

developerWorks > WebSphere >


developerWorks
In this article: IBM WebSphere Developer Technical Journal: Developing JSF
applications using WebSphere Studio V5.1.1 -- Part 4
Introduction
Import and setup
StockSystemEJB
Create viewStockData.jsp Integrating JSF applications with Enterprise Java Beans using action handlers and JavaBean data components
Action handling and navigation
Document options
Test the JSF component Level: Intermediate
Conclusion Print this page
Acknowledgement Roland Barcia (barcia@us.ibm.com), Consulting IT Specialist, IBM Software Services for WebSphere
Download E-mail this page
Resources 14 Apr 2004
About the author
Sample code
Rate this page
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 data using Web Data Object (WDO) or Service Data Object (SDO) technology. In Part 4, Rate this page
Related links we demonstrate how JSF can work with existing J2EE technology. Help us improve this
WebSphere technical library content

Introduction
This is Part 4 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:

● Part 1: Creating a JSF Web project and page template


● Part 2: Creating JSF submission forms
● Part 3: Creating JSF applications that access data using Web Data Objects (WDO, soon to be SDO: Service Data Objects)
● Part 4: Integrating JSF applications with Enterprise Java Beans using action handlers and JavaBean data components
● Part 5: Creating a JSF Web service client using the Web service proxy component.

In the Part 3 of this series, we illustrated how JSF applications can access data using the Service Data Object (SDO) technology. In this
chapter, we will see how JSF can work with existing J2EE technology. We will create a JSF page that calls an existing EJB application and
use JavaBean Data control to display the results of an EJB invocation without compromising the RAD nature of JSF. In addition, we will use
the Quick Edits view to write an Action Handler to invoke the existing Stateless Session Bean.

You will need to download the materials included with this article to complete this exercise. In case you have not completed Part 3, the
solution is included in the download file; import the EAR file as described in Part 3. To run the example, you need to create the database as
we illustrated in Part 3; once you import the solution, run the application as illustrated in the last section of Part 3 to automatically create
the JDBC Data Source on the Server Configuration that we will use for this exercise.

Back to top

Import and setup StockSystemEJB


We will now create our next JSF result page for the Stock Data Page created in Part 2. We will begin by importing an existing EJB JAR file,
then create a JSF page that will display the results.

1. To import an EJB JAR file and make it part of the existing EAR file:
a. From WebSphere Studio Application Developer (hereafter called Application Developer), select File => Import.
Figure 1. Application Developer File menu
http://www-128.ibm.com/developerworks/websphere/techjournal/0404_barcia/0404_barcia.html (1 of 36) [12/10/2006 12:39:21 AM]
IBM WebSphere Developer Technical Journal: Developing JSF applications using WebSphere Studio V5.1.1 -- Part 4

b. Select EJB JAR file, then Next.


Figure 2. File Import dialog

http://www-128.ibm.com/developerworks/websphere/techjournal/0404_barcia/0404_barcia.html (2 of 36) [12/10/2006 12:39:21 AM]


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

c. Browse to C:\JSFArticleSeries\Part4\StockSystemEJB.jar. The Project name should be StockSystemEJB. Select the existing EAR
File StockSystemEAR. (You must explicitly select the existing EAR; it will default to StockSystemEJBEAR which can be misleading.).
Press Finish.
Figure 3. EJB Import

http://www-128.ibm.com/developerworks/websphere/techjournal/0404_barcia/0404_barcia.html (3 of 36) [12/10/2006 12:39:21 AM]


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

d. Press OK when the Repair Server Configuration dialog displays.


Figure 4. Repair Server Configuration

http://www-128.ibm.com/developerworks/websphere/techjournal/0404_barcia/0404_barcia.html (4 of 36) [12/10/2006 12:39:21 AM]


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

2. With the EJB JAR file imported into the existing EAR, we now need to make it visible to the WAR file. We can do this by adding the EJB JAR
file to the manifest of the WAR file, which is one of the standard J2EE ways to handle classpath. Application Developer provides a simple way
to do this: with one step, it will add the EJB JAR to both the build time and compile time classpath.
a. Right-click the PersonalTradeJSF Web project from the Project Navigator view and select Properties.
Figure 5. Project Navigator

http://www-128.ibm.com/developerworks/websphere/techjournal/0404_barcia/0404_barcia.html (5 of 36) [12/10/2006 12:39:21 AM]


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

b. Select Java JAR Dependencies. In the dialog, check the StockSystemEJB.jar. Make sure that Use EJB JAR is also selected. (As of
Version 5.1.1, Application Developer supports the generation of the EJB Client JAR).
Figure 6. Java JAR Dependencies

c. Select OK.
3. In our application, PersonalTradeJSF will access a StockFacadeEJB. The StockFacadeEJB interacts with entity beans to access the current
stock data. It is considered a best practice to use EJB references when accessing EJBs. Although the EJB JAR file provides a delegate to hide
the details of the EJB client API, it makes use of the resource reference. Since the delegate is called under the context of the Web
application, the reference needs to be defined.
a. From the Project Navigator, open the Web Deployment Descriptor editor using the link right under the PersonalTradeJSF.
Figure 7. Open Web Deployment Descriptor

http://www-128.ibm.com/developerworks/websphere/techjournal/0404_barcia/0404_barcia.html (6 of 36) [12/10/2006 12:39:21 AM]


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

b. Select the References tab on the bottom of the editor.


Figure 8. References tab

c. Select the EJB Local tab on the References page.


Figure 9. EJB Local References

d. Select Add under the EJB Local References tab.


Figure 10. Add EJB Local references

http://www-128.ibm.com/developerworks/websphere/techjournal/0404_barcia/0404_barcia.html (7 of 36) [12/10/2006 12:39:21 AM]


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

e. Make the name of the reference ejb/StockFacade.


Figure 11. Add ejb/StockFacade

f. In the Details section, press the Browse button.


Figure 12. Details and WebSphere Bindings

g. Select the StockFacade EJB and press OK.


Figure 13. Select StockFacade EJB

http://www-128.ibm.com/developerworks/websphere/techjournal/0404_barcia/0404_barcia.html (8 of 36) [12/10/2006 12:39:21 AM]


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

h. Both the session bean and binding information should be complete.


Figure 14. Details and WebSphere Bindings

i. The Web application will use the EJB local interface to access the data. The EJB local interface takes the symbol as input and returns
an AccessStockQuoteVO. This is a simple JavaBean with getters and setters.
http://www-128.ibm.com/developerworks/websphere/techjournal/0404_barcia/0404_barcia.html (9 of 36) [12/10/2006 12:39:21 AM]
IBM WebSphere Developer Technical Journal: Developing JSF applications using WebSphere Studio V5.1.1 -- Part 4

public interface StockFacadeLocal extends javax.ejb.EJBLocalObject {


public AccessStockQuoteVO getCurrentStockData(String symbol)
throws SymbolNotFoundException,
StockException,
InvalidSymbolException;
...
}

j. The EJB JAR provides a simple Delegate object that hides the complexity of the object. The delegate is a singleton Java object and provides
a similar interface.
public class AccessQuoteDelegate
{
private StockFacadeLocal stockFacade;
public static AccessQuoteDelegate accessQuoteDelegate = null;
public static AccessQuoteDelegate getAccessQuoteDelegate() throws StockException
{
if(accessQuoteDelegate == null)
{
accessQuoteDelegate = new AccessQuoteDelegate();
}
return accessQuoteDelegate;
}
private AccessQuoteDelegate() throws StockException
{
InitialContext context;
try
{
context = new InitialContext();
StockFacadeLocalHome home = (StockFacadeLocalHome)context.lookup("java:comp/env/ejb/StockFacade");
stockFacade = home.create();
}
catch (NamingException e)
{
throw new StockException(e.getLocalizedMessage());
}
catch (CreateException e)
{
throw new StockException(e.getLocalizedMessage());
}
}
public AccessStockQuoteVO getCurrentStockData(String symbol)
throws SymbolNotFoundException, StockException, InvalidSymbolException
{
return stockFacade.getCurrentStockData(symbol);
}
}

Back to top

Create viewStockData.jsp
Now that the EJB project is set up, we can build the Stock Data page that will display the results of calling the StockFacade stockData method.

http://www-128.ibm.com/developerworks/websphere/techjournal/0404_barcia/0404_barcia.html (10 of 36) [12/10/2006 12:39:21 AM]


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

1. First, we will to create a new JSF page that will display the results of submitting a Stock Data Request.
a. In Application Developer, right-click the WebContent folder on the PersonalTradeJSF page and select New => Faces JSP File.
Figure 15. Create new JSF page

b. For the File Name, enter viewStockData.jsp and select Create from page template.
Figure 16. New Faces JSP File

http://www-128.ibm.com/developerworks/websphere/techjournal/0404_barcia/0404_barcia.html (11 of 36) [12/10/2006 12:39:21 AM]


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

c. Ensure that StockPageTemplate.jtpl is selected. Press Finish.


Figure 17. Page Template File Selection

2. We will now use the Visual Palette to add a label.


a. Select the Output component from the Faces Visual Palette.
Figure 18. Visual Palette

http://www-128.ibm.com/developerworks/websphere/techjournal/0404_barcia/0404_barcia.html (12 of 36) [12/10/2006 12:39:21 AM]


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

b. Add the output component to the page. Make the text size 18 and the text value: View Stock Data.
Figure 19. Add Output to JSP

3. The EJB returns a regular Java Bean. We will add this Java Bean as page data.
a. Go to the Page Data view. Right-click on JSP Scripting and select New => JavaBean.
Figure 20. Create new JavaBean

b. On the Add Managed Beans dialog, select New.


Figure 21. Add Managed Beans dialog

http://www-128.ibm.com/developerworks/websphere/techjournal/0404_barcia/0404_barcia.html (13 of 36) [12/10/2006 12:39:21 AM]


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

c. Press the Browse... button.


Figure 22. Create a Managed Bean dialog

d. Look for AccessStockQuoteVO; this is the data returned from invoking the StockFacade Session Bean.
Figure 23. Class Selection dialog

http://www-128.ibm.com/developerworks/websphere/techjournal/0404_barcia/0404_barcia.html (14 of 36) [12/10/2006 12:39:21 AM]


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

e. For Name, enter stockData, and for Scope select request.


Figure 24. Create a Managed Bean values

http://www-128.ibm.com/developerworks/websphere/techjournal/0404_barcia/0404_barcia.html (15 of 36) [12/10/2006 12:39:21 AM]


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

f. Press OK.
Figure 25. Add Managed Bean values

g. The stockData is now available for the page.


Figure 26. Page Data

http://www-128.ibm.com/developerworks/websphere/techjournal/0404_barcia/0404_barcia.html (16 of 36) [12/10/2006 12:39:21 AM]


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

4. Now we can drag the stockData bean from the Page Data view onto the JSP page.
a. Select the stockData object from the Page Data view and drag it onto the JSP under the View Stock Data component, as shown in Figure 27.
Figure 27. Drag Data Object to JSP

b. Select Create output components.


Figure 28. Select drop action dialog

c. The JSP should now contain the JSP elements matching the JavaBean.
Figure 29. JSP elements

http://www-128.ibm.com/developerworks/websphere/techjournal/0404_barcia/0404_barcia.html (17 of 36) [12/10/2006 12:39:21 AM]


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

5. We need to update the attributes of the output component so that the displays is a bit more user-friendly.
a. Select anywhere on the JavaBean component. Go to the Attributes dialog and select TABLE, as shown in Figure 30. On the Table tab, enter
0 for the Border.
Figure 30. Attributes dialog

http://www-128.ibm.com/developerworks/websphere/techjournal/0404_barcia/0404_barcia.html (18 of 36) [12/10/2006 12:39:21 AM]


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

b. Select the symbol field title. Change the first letter to be uppercase.
Figure 31. Select field title

c. Also, on the attribute section, select Header for each field name cell.
Figure 32. Cell attributes

http://www-128.ibm.com/developerworks/websphere/techjournal/0404_barcia/0404_barcia.html (19 of 36) [12/10/2006 12:39:21 AM]


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

d. The header should be bold.


Figure 33. Header field

e. Change all the other title elements as shown in Figure 34.


Figure 34. Remaining title elements

http://www-128.ibm.com/developerworks/websphere/techjournal/0404_barcia/0404_barcia.html (20 of 36) [12/10/2006 12:39:21 AM]


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

Back to top

Action handling and navigation


With the results page built, we now need to build the Action Handler for the submission page to interact with the EJB. After that, we need
to grab the results to configure the appropriate navigation rule. We can use the Quick Edit section of the control to add Server Side Actions
to the application.

1. Add an action to the accessStock.jsp page.


a. Open the accessStock.jsp page.
Figure 35. Open accessStock.jsp

b. Select the Submit Stock Request button.


Figure 36. Submit Stock Request button in JSP

http://www-128.ibm.com/developerworks/websphere/techjournal/0404_barcia/0404_barcia.html (21 of 36) [12/10/2006 12:39:21 AM]


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

c. From the Quick Edit button menu, select Command.


Figure 37. Quick Edit menu

d. The code is provided from the download file. Paste the code from the C:\JSFArticleSeries\Part4\CodeSnippet1.txt into the edit section of the Quick
Edit window. The main code segment is in the try block, but some exception capture and error handling is also included:
■ The try block gets an instance of the Delegate and calls the business method (which, in turn, calls the StockFacadeEJB).
The AccessStockQuoteVO is returned. We store it under the request scope under the stockData name. This is the name by which viewStockData.
jsp is expecting it. (The symbol input is obtained from the request scope.)

try
{
com.deploybook.stock.delegate.AccessQuoteDelegate
accessQuote = com.deploybook.stock.delegate.AccessQuoteDelegate.getAccessQuoteDelegate();
com.deploybook.stock.vo.AccessStockQuoteVO
accessQuoteForm = accessQuote.getCurrentStockData((String)requestScope.get("symbol"));
requestScope.put("stockData",accessQuoteForm);
}

■ If we catch an exception, we add an error method to the button component. The codebehind objects instantiate each component on the
page based on the name configured on the attribute. We then return failure. If no navigation is configured to the failure return value, it
will return to the same page. We can add an error component linked to the button control.

http://www-128.ibm.com/developerworks/websphere/techjournal/0404_barcia/0404_barcia.html (22 of 36) [12/10/2006 12:39:21 AM]


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

catch (com.deploybook.stock.exceptions.StockException e)
{
e.printStackTrace(System.err);
context.addMessage(buttonEx1,
new javax.faces.application.MessageImpl(
javax.faces.application.Message.SEVERITY_ERROR,
"Stock Not found",
"Symbol Not Found or invalid"
));
return "failure";
} catch (com.deploybook.stock.exceptions.SymbolNotFoundException e) {
e.printStackTrace(System.err);
context.addMessage(buttonEx1,
new javax.faces.application.MessageImpl(
javax.faces.application.Message.SEVERITY_ERROR,
"Stock Not found",
"Symbol Not Found or invalid"
));
return "failure";
} catch (com.deploybook.trade.exception.InvalidSymbolException e) {
e.printStackTrace(System.err);
context.addMessage(buttonEx1,
new javax.faces.application.MessageImpl(
javax.faces.application.Message.SEVERITY_ERROR,
"Stock Not found",
"Symbol Not Found or invalid"
));
return "failure";
}

■ If all is successful, we return success. We can then configure navigation.


return "success";

e. The Quick Edit dialog should contain the code, as in Figure 38.
Figure 38. Quick Edit dialog containing code

http://www-128.ibm.com/developerworks/websphere/techjournal/0404_barcia/0404_barcia.html (23 of 36) [12/10/2006 12:39:21 AM]


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

f. The Java code will be added automatically. You can confirm this by opening accessStock.java.
Figure 39. Open accessStock.java

Figure 40. accessStock.java code

http://www-128.ibm.com/developerworks/websphere/techjournal/0404_barcia/0404_barcia.html (24 of 36) [12/10/2006 12:39:21 AM]


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

2. We now need to specify the navigation rule. Rather then having the submission hardcode the result as we did in Part 3, we will specify
the action handler that will return the navigation result.
a. With the button still selected, go to the Attribute view. Select the Navigation tab, then press the Add button.
Figure 41. Navigation attributes

http://www-128.ibm.com/developerworks/websphere/techjournal/0404_barcia/0404_barcia.html (25 of 36) [12/10/2006 12:39:21 AM]


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

b. For the value of Page, select viewStockData.jsp. For Alias, enter success (which is returned by the action handler). For ActionRef,
select cb_accessStock.buttonEx1Action.
Figure 42. Add Navigation Rule dialog

c. We do not need to specify the action result for the control because now the action will control it.
Figure 43. Navigation attributes added

http://www-128.ibm.com/developerworks/websphere/techjournal/0404_barcia/0404_barcia.html (26 of 36) [12/10/2006 12:39:21 AM]


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

3. Because we store the error as a message for the button component, we need to set up an error component on the submission page.
a. Under the Faces Component palette, select the Display Error component.
Figure 44. Visual Palette

http://www-128.ibm.com/developerworks/websphere/techjournal/0404_barcia/0404_barcia.html (27 of 36) [12/10/2006 12:39:21 AM]


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

b. Drag it onto the JSP between the Access Stock title and the input form.
Figure 45. Add error component to JSP

c. Select the output component then go to the Attribute view. In the For validation errors on section, select the buttonEx1 for the Id field.
Figure 46. Output component attributes

http://www-128.ibm.com/developerworks/websphere/techjournal/0404_barcia/0404_barcia.html (28 of 36) [12/10/2006 12:39:21 AM]


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

Back to top

Test the JSF component


Before we can test the application, we need to make a couple of updates to the server configuration. We will then test both the successful
and error scenarios.

1. We need to create an authentication alias and enable CMP support for the generated WDO data source. This will enable the CMP entities in
the EJB JAR to use the same data source as the WDO objects.
a. Go to the Servers view by selecting the Servers tab at the bottom of the Web perspective. Double-click the server to open the
Server Configuration editor.
Figure 47. Open Server Configuration editor

b. Select the Security tab of the Server Configuration editor.


Figure 48. Server Configuration editor tabs

c. Select Add next to the JAAS Authentication Entries.


Figure 49. JAAS Authentication Entries

http://www-128.ibm.com/developerworks/websphere/techjournal/0404_barcia/0404_barcia.html (29 of 36) [12/10/2006 12:39:21 AM]


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

d. For alias, enter DBUser. Enter db2admin for the User ID and Password (or enter whatever password you used for creating the database).
Figure 50. Add new user ID and password

Figure 51. JAAS authentication entry added

e. Go to the Data source perspective.


Figure 52. Select Data source tab

f. Under the Server Settings, select the WDO DB2 JDBC Provider, then select the Edit button in the Data source list.
Figure 53. Server Settings

http://www-128.ibm.com/developerworks/websphere/techjournal/0404_barcia/0404_barcia.html (30 of 36) [12/10/2006 12:39:21 AM]


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

g. Select DBUser for the Container-managed authentication alias and the check box for Use this data source in container
managed persistence (CMP).
Figure 54. Edit data source

h. Save and close the server editor.


2. Now we are ready to run the application:
a. In the Project Navigator, right-click accessStock.jsp and select Run on Server.
Figure 55. Run application

http://www-128.ibm.com/developerworks/websphere/techjournal/0404_barcia/0404_barcia.html (31 of 36) [12/10/2006 12:39:21 AM]


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

b. Select Deploy EJB beans, then Finish.


Figure 56. Select Tasks dialog

http://www-128.ibm.com/developerworks/websphere/techjournal/0404_barcia/0404_barcia.html (32 of 36) [12/10/2006 12:39:21 AM]


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

c. Enter IBM for Stock and select Submit Stock Request.


Figure 57. Test with valid data

http://www-128.ibm.com/developerworks/websphere/techjournal/0404_barcia/0404_barcia.html (33 of 36) [12/10/2006 12:39:21 AM]


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

d. The result should return as shown in Figure 58.


Figure 58. Test result successful

e. Return to the submission page and enter IBB for the Enter Stock value.
Figure 59. Test with invalid data

http://www-128.ibm.com/developerworks/websphere/techjournal/0404_barcia/0404_barcia.html (34 of 36) [12/10/2006 12:39:21 AM]


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

f. The error should display as shown in Figure 60. (The console should also have a business exception stack trace displayed.)
Figure 60. Test result failure

g. Stop the server.

Back to top

Conclusion
In this part of the series, we showed how JSF can work with any business layer code of a RAD nature. Specifically, we designed a JSF front
end for an existing set of Enterprise JavaBeans. In addition, we used the Quick Edits view to add Action Handling to our JSF application
and added error handling as well. In the conclusion of this series, we will write a JSF-based Web service client that shows how JSF can be
used in integration scenarios.

Back to top

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

Back to top

Download
Name SizeDownload method
JSFArticleSeriesP4.zip 12.2 MBFTP | HTTP

http://www-128.ibm.com/developerworks/websphere/techjournal/0404_barcia/0404_barcia.html (35 of 36) [12/10/2006 12:39:21 AM]


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

Information about download methods Get Adobe® Reader®

Back to top

Resources
● JavaServer Faces Sun Web site

● JSF Central

● WebSphere Studio

● Service Data Objects (SDO) JSR

Back to top

About the author


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

Back to top

Rate this page


Please take a moment to complete this form to help us better serve you.

Did the information help


you to achieve your goal? Yes No Don't know

Please provide us with


comments to help
improve this page:

How useful is the


information? 1 2 3 4 5
(1 = Not at all,
5 = Extremely useful)

Back to top

About IBM Privacy Contact

http://www-128.ibm.com/developerworks/websphere/techjournal/0404_barcia/0404_barcia.html (36 of 36) [12/10/2006 12:39:21 AM]


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

Country/region [select] Terms of use

All of dW

Home Products Services & industry solutions Support & downloads My IBM

developerWorks > WebSphere >


developerWorks
In this article: IBM WebSphere Developer Technical Journal:
Developing JSF applications using WebSphere Studio
Introduction
Build Web service from existing
EJB
Build JSF Web service client
Test JSF Web service client V5.1.1 -- Part 5
Conclusion
Creating a JSF Web service client using the Web service proxy component
Acknowledgement
Download Document options
Level: Intermediate
Resources Print this page
About the author
Roland Barcia (barcia@us.ibm.com), Consulting IT Specialist, IBM Software Services for WebSphere
Rate this page
E-mail this page
12 May 2004
Sample code
Related links
WebSphere technical library
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/ Rate this page
Service Data Object technology, and even with existing J2EE technology. In this final installment, Help us improve this
we will use the JSF Web service component to invoke a Web service. content

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:

● Part 1: Creating a JSF Web project and page template


● Part 2: Creating JSF submission forms
● Part 3: Creating JSF applications that access data using Web Data Objects (WDO, soon to be SDO: Service Data Objects)
● Part 4: Integrating JSF applications with Enterprise Java Beans using action handlers and JavaBean data components
● Part 5: Creating a JSF Web service client using the Web service proxy component.

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
http://www-128.ibm.com/developerworks/websphere/techjournal/0405_barcia/0405_barcia.html (1 of 32) [12/10/2006 12:41:46 AM]
IBM WebSphere Developer Technical Journal: Developing JSF applications using WebSphere Studio V5.1.1 -- Part 5
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.

Back to top

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

http://www-128.ibm.com/developerworks/websphere/techjournal/0405_barcia/0405_barcia.html (2 of 32) [12/10/2006 12:41:46 AM]


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

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

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

http://www-128.ibm.com/developerworks/websphere/techjournal/0405_barcia/0405_barcia.html (3 of 32) [12/10/2006 12:41:46 AM]


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

4. Next, select the Browse EJB beans button (Figure 4).


Figure 4. Web Services EJB Selection

http://www-128.ibm.com/developerworks/websphere/techjournal/0405_barcia/0405_barcia.html (4 of 32) [12/10/2006 12:41:46 AM]


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

5. Select the StockFacade Session Bean, then OK.


Figure 5. Browse EJB Beans

http://www-128.ibm.com/developerworks/websphere/techjournal/0405_barcia/0405_barcia.html (5 of 32) [12/10/2006 12:41:46 AM]


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

6. Notice that the session bean information will now be filled out (Figure 6). Press Next.
Figure 6. Completed Web Service EJB Selection dialog

http://www-128.ibm.com/developerworks/websphere/techjournal/0405_barcia/0405_barcia.html (6 of 32) [12/10/2006 12:41:46 AM]


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

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

http://www-128.ibm.com/developerworks/websphere/techjournal/0405_barcia/0405_barcia.html (7 of 32) [12/10/2006 12:41:46 AM]


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

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

http://www-128.ibm.com/developerworks/websphere/techjournal/0405_barcia/0405_barcia.html (8 of 32) [12/10/2006 12:41:46 AM]


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

9. On the publication dialog (Figure 9), select Finish. Do not select any UDDI Registry.
Figure 9. Web Service Publication

10. When completed, the server will be started and your Web service will be deployed.
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.

Back to top

Build JSF Web service client


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

http://www-128.ibm.com/developerworks/websphere/techjournal/0405_barcia/0405_barcia.html (9 of 32) [12/10/2006 12:41:46 AM]


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

1. First, we will create a new Faces JSP Page:


a. 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

b. Remember to select the existing User-Defined Page Template within the workspace (Figure 12).
Figure 12. Page Template File Selection

http://www-128.ibm.com/developerworks/websphere/techjournal/0405_barcia/0405_barcia.html (10 of 32) [12/10/2006 12:41:46 AM]


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

The JSP page should now be open in the editor.

2. To add the Web Service Proxy object onto the Page Data:
a. In the Page Data dialog, right-click on JSP scripting, then select New => Web Service Proxy (Figure 13).
Figure 13. Page Data

http://www-128.ibm.com/developerworks/websphere/techjournal/0405_barcia/0405_barcia.html (11 of 32) [12/10/2006 12:41:46 AM]


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

b. On the Add Web Service Proxy Bean dialog, select New.


Figure 14. Add Web Service Proxy Bean

c. 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

http://www-128.ibm.com/developerworks/websphere/techjournal/0405_barcia/0405_barcia.html (12 of 32) [12/10/2006 12:41:46 AM]


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

d. 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

e. Select the StockFacade port, then press the Details button.


Figure 17. Web Services information listing

http://www-128.ibm.com/developerworks/websphere/techjournal/0405_barcia/0405_barcia.html (13 of 32) [12/10/2006 12:41:46 AM]


IBM WebSphere Developer Technical Journal: Developing JSF applications using WebSphere Studio V5.1.1 -- Part 5
f. The WebSphere Studio Web Service Explorer will launch. Select the getCompanyInfo link (Figure 18).
Figure 18. WSDL Binding Details

g. Enter IBM for the symbol, then select Go.


Figure 19. Invoke a WSDL Operation

h. 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
http://www-128.ibm.com/developerworks/websphere/techjournal/0405_barcia/0405_barcia.html (14 of 32) [12/10/2006 12:41:46 AM]
IBM WebSphere Developer Technical Journal: Developing JSF applications using WebSphere Studio V5.1.1 -- Part 5

i. Returning to the JSF Web Service Proxy wizard where StockFacade had been selected, click getCompanyInfo (Figure 21).
Figure 21. Web Services information listing

j. 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

http://www-128.ibm.com/developerworks/websphere/techjournal/0405_barcia/0405_barcia.html (15 of 32) [12/10/2006 12:41:46 AM]


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

k. The page data now has the Web service available to the page.
Figure 23. Page data with available Web services

3. We are now ready to add the Web service control onto the page:
a. 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

http://www-128.ibm.com/developerworks/websphere/techjournal/0405_barcia/0405_barcia.html (16 of 32) [12/10/2006 12:41:46 AM]


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

b. This action will create an input form. Highlight the label shown in Figure 25.
Figure 25. Change heading on input form

c. In the Attributes view, select the Heading 3 option.


Figure 26. Field attributes

http://www-128.ibm.com/developerworks/websphere/techjournal/0405_barcia/0405_barcia.html (17 of 32) [12/10/2006 12:41:46 AM]


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

d. 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

e. Go to the Attributes view and make the field a Header field (Figure 28).
Figure 28. Field attributes

http://www-128.ibm.com/developerworks/websphere/techjournal/0405_barcia/0405_barcia.html (18 of 32) [12/10/2006 12:41:46 AM]


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

f. Change the text to read Enter Symbol. Next, select the Invoke button.
Figure 29. Change button label

g. Go to the Attributes view and enter Get Company Information for the Label field.
Figure 30. Field attributes

http://www-128.ibm.com/developerworks/websphere/techjournal/0405_barcia/0405_barcia.html (19 of 32) [12/10/2006 12:41:46 AM]


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

h. 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

i. From the Task view, right-click the error and select Quick Fix.
Figure 32. Quick Fix option

j. Select the Add catch clause to surrounding try option.


Figure 33. Available quick fixes
http://www-128.ibm.com/developerworks/websphere/techjournal/0405_barcia/0405_barcia.html (20 of 32) [12/10/2006 12:41:46 AM]
IBM WebSphere Developer Technical Journal: Developing JSF applications using WebSphere Studio V5.1.1 -- Part 5

k. 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

l. 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

http://www-128.ibm.com/developerworks/websphere/techjournal/0405_barcia/0405_barcia.html (21 of 32) [12/10/2006 12:41:46 AM]


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

m. 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.
a. 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

b. Select Create output components, then OK.


Figure 37. Select drop action

http://www-128.ibm.com/developerworks/websphere/techjournal/0405_barcia/0405_barcia.html (22 of 32) [12/10/2006 12:41:46 AM]


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

c. Update the label to say Company Information , then again use the Attributes view to make it Header 3.
Figure 38. Change heading label

d. Update each field label to be a header cell using the Attributes view.
Figure 39. Change field labels

http://www-128.ibm.com/developerworks/websphere/techjournal/0405_barcia/0405_barcia.html (23 of 32) [12/10/2006 12:41:46 AM]


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

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.
a. Select the Display Error component.
Figure 40. Display error

b. Drag the component above the Enter Symbol label.


Figure 41. Display error placement

c. Select the output component (Figure 42).


Figure 42. Select output component

http://www-128.ibm.com/developerworks/websphere/techjournal/0405_barcia/0405_barcia.html (24 of 32) [12/10/2006 12:41:46 AM]


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

d. 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

e. Save and close the JSP.

Back to top

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

http://www-128.ibm.com/developerworks/websphere/techjournal/0405_barcia/0405_barcia.html (25 of 32) [12/10/2006 12:41:46 AM]


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

2. Right-click on companyInfoWS.jsp and select Run on Server.


Figure 45. Run JSP

3. Select Finish on the Select Tasks dialog (Figure 46).


Figure 46. Select Tasks

http://www-128.ibm.com/developerworks/websphere/techjournal/0405_barcia/0405_barcia.html (26 of 32) [12/10/2006 12:41:46 AM]


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

4. Your browser should display. Enter IBM as the Symbol and press the Get Company Information button.
Figure 47. Testing the JSP

http://www-128.ibm.com/developerworks/websphere/techjournal/0405_barcia/0405_barcia.html (27 of 32) [12/10/2006 12:41:46 AM]


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

5. The results of the successful test should be displayed right under the input form (Figure 48).
Figure 48. Successful result

http://www-128.ibm.com/developerworks/websphere/techjournal/0405_barcia/0405_barcia.html (28 of 32) [12/10/2006 12:41:46 AM]


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

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

http://www-128.ibm.com/developerworks/websphere/techjournal/0405_barcia/0405_barcia.html (29 of 32) [12/10/2006 12:41:46 AM]


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

When completed, stop the server.

Back to top

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.

Back to top

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

http://www-128.ibm.com/developerworks/websphere/techjournal/0405_barcia/0405_barcia.html (30 of 32) [12/10/2006 12:41:46 AM]


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

Back to top

Download
Name SizeDownload method
JSFArticleSeriesP5.zip 15.1 MBFTP | HTTP

Information about download methods Get Adobe® Reader®

Back to top

Resources
● JavaServer Faces Sun Web site

● JSF Central

● WebSphere Studio

● Service Data Objects (SDO) JSR

Back to top

About the author


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

Back to top

Rate this page


Please take a moment to complete this form to help us better serve you.

Did the information help


you to achieve your goal? Yes No Don't know

Please provide us with


comments to help
improve this page:

http://www-128.ibm.com/developerworks/websphere/techjournal/0405_barcia/0405_barcia.html (31 of 32) [12/10/2006 12:41:46 AM]


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

How useful is the


information? 1 2 3 4 5
(1 = Not at all,
5 = Extremely useful)

Back to top

About IBM Privacy Contact

http://www-128.ibm.com/developerworks/websphere/techjournal/0405_barcia/0405_barcia.html (32 of 32) [12/10/2006 12:41:46 AM]