JSF Application in Websphere

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

Country/region [select] Terms of use

Home Products Services & industry solutions Support & downloads My IBM

developerWorks

In this article:IntroductionCreate a JSF Web projectCreate a page template out of Faces componentsConclusionDownloadResourcesAbout the authorRate this page

Related links

WebSphere technical library

developerWorks > WebSphere >

IBM WebSphere Developer Technical Journal: Developing JSF Applications using WebSphere Studio V5.1.1 -- Part 1Creating a JSF Web project and page template

Document options

Print this page

E-mail this page

Sample code

Rate this page

Help us improve this content

Level: Intermediate

Roland Barcia ([email protected]), Consulting IT Specialist, IBM Software Services for WebSphere

19 Jan 2004

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.

IntroductionFor 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 projectIn 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]

http://www.ibm.com/

http://www.ibm.com/developerworks/country/

http://www.ibm.com/legal/

http://www.ibm.com/

http://www.ibm.com/products/

http://www.ibm.com/servicessolutions/

http://www.ibm.com/support/

http://www.ibm.com/account/

http://www.ibm.com/developerworks

http://www.ibm.com/developerworks/views/websphere/library.jsp

http://www.ibm.com/developerworks/

http://www.ibm.com/developerworks/websphere/


mailto:[email protected]?subject=Developing JSF Applications using WebSphere Studio V5.1.1 -- Part 1

http://www.ibm.com/developerworks/websphere/techjournal/0402_barcia/0402_barcia.html





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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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

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



Back to top

DownloadName SizeDownload methodJSFArticleSeriesP1.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


● 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 5Not useful

Extremely useful

Back to top

About IBM Privacy Contact


http://www.ibm.com/developerworks/views/download.jsp?contentid=14460&filename=JSFArticleSeriesP1.zip&method=ftp&locale=worldwide

http://www.ibm.com/developerworks/views/download.jsp?contentid=14460&filename=JSFArticleSeriesP1.zip&method=http&locale=worldwide

http://www-128.ibm.com/developerworks/library/whichmethod.html

http://www.adobe.com/products/acrobat/readstep2.html

http://www.ibm.com/developerworks/websphere/techjournal/




http://java.sun.com/j2ee/javaserverfaces/index.jsp



http://www.jsfcentral.com/

http://www-128.ibm.com/developerworks/websphere/services/

http://home.nj.rr.com/rbarcia/

http://www.ibm.com/ibm/

http://www.ibm.com/privacy/

http://www.ibm.com/contact/




developerWorks

In this article:IntroductionCreate accessStock JSF formTest the JSF form in the WebSphere Application Server V5.1 test environmentCreate and test accessStockHistory.jspConclusionDownloadResourcesAbout the authorRate this page

Related links



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

Document options

Print this page

E-mail this page

Sample code

Rate this page


Level: Intermediate


18 Feb 2004

Part 2 of this 5-part series on Java Server Faces builds upon Part 1, continuing with the creation of JSF submission forms, and showing some of the dynamic controls that can be used for visually developing J2EE Web applications.

IntroductionThis 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]

http://www.ibm.com/



http://www.ibm.com/










mailto:[email protected]?subject=Developing JSF Applications using WebSphere Studio V5.1.1 -- Part 2

http://www.ibm.com/developerworks/websphere/techjournal/0401_barcia/barcia.html





Back to top

Create accessStock JSF formTo 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




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



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



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



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



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



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



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



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



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



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



Back to top

Test the JSF form in the WebSphere Application Server V5.1 test environmentWe 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



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



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



Back to top

Create and test accessStockHistory.jspIn 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



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



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



<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

ConclusionIn 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

DownloadName SizeDownload methodJSFArticleSeriesP2.zip 2.4 MBFTP | HTTP


Back to top


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

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















● JSF Central

Back to top

About the author


Back to top

Rate this page



Yes No Don't know


How useful is the information? (1 = Not at all, 5 = Extremely useful)

1 2 3 4 5

Back to top










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



developerWorks

In this article:IntroductionSetup a databaseCreate a JSP using JSF/WDO componentsSetup JSF NavigationTest the JSF componentSetup page validationConclusionDownloadResourcesAbout the authorRate this page

Related links



IBM WebSphere Developer Technical Journal: Developing JSF applications using WebSphere Studio V5.1.1 -- Part 3Creating JSF applications that access data using Web Data Objects

Document options

Print this page

E-mail this page

Sample code

Rate this page


Level: Intermediate


17 Mar 2004

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 Service Data Object) technology.

IntroductionThis 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.ibm.com/



http://www.ibm.com/










mailto:[email protected]?subject=Developing JSF applications using WebSphere Studio V5.1.1 -- Part 3






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



Back to top

Create a JSP using JSF/WDO componentsWe 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



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



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



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



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



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



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



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



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

Figure 19. Data List Properties



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

Figure 20. Column selection and advanced tasks



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

Figure 21. Add conditions and orders



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

Figure 22. Conditions



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

Figure 23. Select Page Data Object



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



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



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.



<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



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

Figure 30. Ordering columns



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

Figure 31. Data grid attributes



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

Figure 32. Page preview



Back to top

Setup JSF NavigationNow 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



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



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



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



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



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 componentBy 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



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



Figure 41. Successful result



Back to top

Setup page validationYou 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).



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



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



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

ConclusionIn 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

DownloadName SizeDownload method



JSFArticleSeriesP3.zip 4.8 MBFTP | HTTP


Back to top


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

● Part 2: Creating JSF submission forms




● JSF Central

Back to top

About the author


Back to top

Rate this page



Yes No Don't know

















How useful is the information?

1 2 3 4 5Not useful

Extremely useful

Back to top









developerWorks

In this article:IntroductionImport and setup StockSystemEJBCreate viewStockData.jspAction handling and navigationTest the JSF componentConclusionAcknowledgementDownloadResourcesAbout the authorRate this page

Related links



IBM WebSphere Developer Technical Journal: Developing JSF applications using WebSphere Studio V5.1.1 -- Part 4Integrating JSF applications with Enterprise Java Beans using action handlers and JavaBean data components

Document options

Print this page

E-mail this page

Sample code

Rate this page


Level: Intermediate


14 Apr 2004

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, we demonstrate how JSF can work with existing J2EE technology.

IntroductionThis 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 StockSystemEJBWe 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.ibm.com/



http://www.ibm.com/



















b. Select EJB JAR file, then Next.

Figure 2. File Import dialog



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



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

Figure 4. Repair Server Configuration



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



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



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



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



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.



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



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



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



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



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



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

Figure 24. Create a Managed Bean values



f. Press OK.

Figure 25. Add Managed Bean values

g. The stockData is now available for the page.

Figure 26. Page Data



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



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



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



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



Back to top

Action handling and navigationWith 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



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.



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



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



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



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



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



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



Back to top

Test the JSF componentBefore 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



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



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



b. Select Deploy EJB beans, then Finish.

Figure 56. Select Tasks dialog



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

Figure 57. Test with valid data



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



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

ConclusionIn 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

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

Back to top







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



Yes No Don't know



1 2 3 4 5

Back to top







http://www-306.ibm.com/software/info1/websphere/index.jsp?tab=products/studio&S_TACT=103BGW01&S_CMP=campaign/

http://www.jcp.org/en/jsr/detail?id=235







developerWorks

In this article:IntroductionBuild Web service from existing EJBBuild JSF Web service clientTest JSF Web service clientConclusionAcknowledgementDownloadResourcesAbout the authorRate this page

Related links



IBM WebSphere Developer Technical Journal: Developing JSF applications using WebSphere Studio V5.1.1 -- Part 5Creating a JSF Web service client using the Web service proxy component

Document options

Print this page

E-mail this page

Sample code

Rate this page


Level: Intermediate


12 May 2004

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

IntroductionThis 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.ibm.com/



http://www.ibm.com/

















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 EJBThe 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





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



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

Figure 4. Web Services EJB Selection



5. Select the StockFacade Session Bean, then OK.

Figure 5. Browse EJB Beans



6. Notice that the session bean information will now be filled out (Figure 6). Press Next.

Figure 6. Completed Web Service EJB Selection dialog



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



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



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 clientWe are now ready to build our JSF Web service client.



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



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



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



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



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



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



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



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



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




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.




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



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



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



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



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



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 clientWe 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



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



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

Figure 47. Testing the JSP



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

Figure 48. Successful result



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



When completed, stop the server.

Back to top

ConclusionIn 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

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



Back to top



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



Yes No Don't know









http://www-306.ibm.com/software/info1/websphere/index.jsp?tab=products/studio&S_TACT=103BGW01&S_CMP=campaign/

http://www.jcp.org/en/jsr/detail?id=235



1 2 3 4 5

Back to top






JSF Application in Websphere

Documents

Transcript of JSF Application in Websphere