Develop Web Applications Using JSF and SDO

All rights reserved. Reproduction and/or distribution in whole or inpart in electronic, paper or other forms without written permission

is prohibited.

Rational Application Developer V6Programming Guide

International Business Machines Corporation. (c) 2005. Copying Prohibited.

Reprinted for Sridhar Poduri, [email protected]

Reprinted with permission as a subscription benefit of Books24x7,http://www.books24x7.com/

Table of Contents Chapter 13: Develop Web Applications using JSF and SDO.......................................................1

Overview............................................................................................................................................2

13.1 Introduction to JSF and SDO...................................................................................................3 13.1.1 JavaServer Faces (JSF) Overview..............................................................................3 13.1.2 Service Data Objects (SDO)........................................................................................6

13.2 Prepare for the Sample............................................................................................................7 13.2.1 Create a Dynamic Web Project....................................................................................7 13.2.2 Set up the Sample Database.......................................................................................9 13.2.3 Configure the Data Source via the Enhanced EAR...................................................10

13.3 Develop a Web Application using JSF and SDO.................................................................13 13.3.1 Create a Page Template............................................................................................13 13.3.2 Useful Views for Editing Page Template Files...........................................................15 13.3.3 Customize the Page Template...................................................................................22 13.3.4 Create JSF Resources using the Web Diagram Tool................................................27 13.3.5 Edit a JSF Page.........................................................................................................43 13.3.6 Completing the SDO Example...................................................................................57

13.4 Run the Sample Web Application.........................................................................................74 13.4.1 Prerequisites to Run Sample Web Application..........................................................74 13.4.2 Run the Sample Web Application..............................................................................74 13.4.3 Verify the Sample Web Application............................................................................74

i

Chapter 13: Develop Web Applications using JSFand SDO

Reprinted for v697042, Verizon IBM Corporation, International Business Machines Corporation (c) 2005, Copying Prohibited

OverviewJavaServer Faces (JSF) is a framework that simplifies building user interfaces for Web applications.Service Data Objects (SDO) is a data programming architecture and API for the Java platform thatunifies data programming across data source types.

This chapter introduces the features, benefits, and architecture of JSF and SDO. The focus of thechapter is to demonstrate the Rational Application Developer support and tooling for JSF. Thechapter includes a working example Web application using JSF and SDO.

The chapter is organized into the following sections:

Introduction to JSF and SDO

Prepare for the sample

Develop a Web application using JSF and SDO

Run the sample Web application


13.1 Introduction to JSF and SDOThis section provides an introduction to JavaServer Faces (JSF) and Service Data Objects (SDO).13.1.1 JavaServer Faces (JSF) OverviewJavaServer Faces is a framework that simplifies building user interfaces for Web applications. Thecombination of the JSF technology and the tooling provided by IBM Rational Application Developerallows developers of differing skill levels the ability to achieve the promises of rapid Webdevelopment.

This section provides an overview of the following aspects of JSF:

JSF features and benefits

JSF application architecture

IBM Rational Application Developer support for JSF

Note Detailed information on the JSF specification can be found at:

http://java.sun.com/j2ee/javaserverfaces/download.html

JSF Features and Benefits

The following is a list of the key features and benefits of using JSF for Web application design anddevelopment:

JSF is a standardsbased Web application framework.

JavaServer Faces technology is the result of the Java Community process JSR127 andevolved from Struts. JSF addresses more of the ModelViewController pattern than Struts,in that it more strongly addresses the view or presentation layer though UI components, andaddresses the model through managed beans. Although JSF is an emerging technology andwill likely become a dominant standard, Struts is still widely used.

JSF is targeted at Web developers with little knowledge of Java and eliminates much of thehand coding involved in integrating Web applications with backend systems.

Event driven architecture.

JSF provides serverside rich UI components that respond to client events.

User interface development.

UI components are decoupled from its rendering. This allows for other technologies suchas WML to be used (for example, mobile devices).JSF allows direct binding of user interface (UI) components to model data.Developers can use extensive libraries of prebuilt UI components that provide both basicand advanced Web functionality.


Session and object managementJSF manages designated model data objects by handling their initialization, persistence overthe request cycle, and cleanup.

Validation and error feedback

JSF allows direct binding of reusable validators to UI components. The framework alsoprovides a queue mechanism to simplify error and message feedback to the applicationuser. These messages can be associated with specific UI components.

Internationalization

JSF provides tools for internationalizing Web applications, including supporting number,currency, time, and date formatting, and externalization of UI strings.

JSF Application Architecture

The JSF application architecture can be easily extended in a variety of ways to suit therequirements of your particular application. You can develop custom components, renderers,validators, and other JSF objects and register them with the JSF runtime.The focus of this section is to highlight the JSF application architecture depicted in Figure 131 onpage 676:

JSF page JSPs are built from JSF components, where each component is represented by aserverside class.

Faces Servlet: One servlet (FacesServlet) controls the execution flow.

Configuration file: An XML file (facesconfig.xml) that contains the navigation rules betweenthe JSPs, validators, and managed beans.

Tag libraries: The JSF components are implemented in tag libraries.

Validators: Java classes to validate the content of JSF components, for example, to validateuser input.

Managed beans: JavaBeans defined in the configuration file to hold the data from JSFcomponents. Managed beans represent the data model and are passed between businesslogic and user interface. JSF moves the data between managed beans and user interfacecomponents.

Events: Java code executed in the server for events (for example, a push button). Eventhandling is used to pass managed beans to business logic.

Rational Application Developer V6 Programming Guide 4


Figure 131: JSF application architecture

Figure 132 on page 677 represents the structure of a simple JSF application created in RationalApplication Developer.

Figure 132: JSF application structure within Rational Application DeveloperIBM Rational Application Developer Support for JSF

IBM Rational Application Developer V6.0 includes a wide range of features for building highlyfunctional Web applications. Application Developer includes full support to make draganddropWeb application development a reality.

Rational Application Developer includes the following support and tooling for JSF Web applicationdevelopment:



Visual page layout of JSF components using Page Designer.

Builtin Component Property Editor.

Builtin tools to simplify and automate event handling.

Builtin tools to simplify page navigation.

Page navigation defined declaratively.

Automatic code generation for data validation, formatting, and CRUD functions for dataaccess.

Relational database support.

EJB support.

Web Services support.

Data abstraction objects for easy data connectivity (Service Data Objects).

Data objects can be bound easily to user interface components.

13.1.2 Service Data Objects (SDO)Service Data Objects is a data programming architecture and API for the Java platform that unifiesdata programming across data source types. SDO provides robust support for common applicationpatterns, and enables applications, tools, and frameworks to more easily query, view, bind, update,and introspect data.

The Java specification request is JSR235 for Service Data Objects (SDO) and can be found at:http://www.jcp.org/en/jsr/detail?id=235

Note For more detailed information on JavaServer Faces and Service Data Objects, werecommend the following:

WebSphere Studio 5.1.2 JavaServer Faces and Service Data Objects, SG246361

Developing JSF Applications using WebSphere Studio V5.1.1 Part 1, found at:

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



13.2 Prepare for the SampleThis section describes the tasks that need to be completed prior to developing the JSF and SDOsample application.

Note A completed version of the ITSO RedBank Web application built usingJSF and SDO can be found in the c:\6449code\jsf\BankJSF.zip ProjectInterchange file. If you do not wish to create the sample yourself, but wantto see it run, follow the procedures described in 13.4, "Run the sampleWeb application" on page 746.

13.2.1 Create a Dynamic Web ProjectTo create a new Dynamic Web Project with support for JSF and SDO, do the following:

Open the Web perspective Project Explorer view.1.

Rightclick the Dynamic Web Projects folder.2.

In the context menu select New Dynamic Web Project.3.

When the New Dynamic Web Project wizard appears, enter the following (as seen in Figure133), and then click Next:

Name: BankJSF

Click Show Advanced.

Check Add support for annotated Java classes.

4.

When the Features dialog appears, select the features you wish to include in your project.For our example, ensure that you select the following features (as seen in Figure 134) andthen click Next:

Check WDO Relational Database runtimes.

Check Web Diagram.

Check JSP Tag Libraries (includes both the JSP Standard Tag Library and UtilityTag Library).

5.


Note At the time of writing, the SDO feature is named WDO in various parts of ApplicationDeveloper.

Tip Dynamic Web Project features can also be added to a project later using the WebProject Features panel of the Project Properties window.

When the Select a Page Templates for the Web site dialog appears, do not check thisoption. We will create a userdefined page template as part of our sample. Click Finish.

6.

Figure 133: New Dynamic Web Project Wizard



Figure 134: The features dialog for New Dynamic Web Projects13.2.2 Set up the Sample DatabaseIn order for us to use SDO components we will need to have a relational database to connect to.This section provides instructions for deploying the BANK sample database and populating thedatabase with sample data. For simplicity we will use the builtin Cloudscape database.

To create the database, create the connection, and create and populate the tables for the BANKsample from within Rational Application Developer, do the following:

Create the database and connection to the Cloudscape BANK database from within RationalApplication Developer.Note For this chapter we created a connection named BankJSF_Con1.

For details refer to "Create a database connection" on page 347.

1.

Create the BANK database tables from within Rational Application Developer.

For details refer to "Create database tables via Rational Application Developer" on page350.

2.



Populate the BANK database tables with sample data from within Rational ApplicationDeveloper.

For details refer to "Populate the tables within Rational Application Developer" on page 352.

3.

13.2.3 Configure the Data Source via the Enhanced EARThere are a couple of methods that can be used to configure the datasource, including using theWebSphere Administrative Console or using the WebSphere Enhanced EAR, which stores theconfiguration in the deployment descriptor and is deployed with the application.

This section describes how to configure the datasource using the WebSphere Enhanced EARcapabilities. The enhanced EAR is configured in the Deployment tab of the EAR deploymentdescriptor.

The procedure found in this section considers two scenarios for using the enhanced EAR:

If you choose to import the complete sample code, you will only need to verify that the valueof the databaseName property in the deployment descriptor matches the location of yourdatabase.

If you are going to complete the working example Web application found in this chapter, youwill need to create the JDBC provider and the datasource, and update the databaseNameproperty.

Note For more information on configuring data sources and general deployment issues, refer toChapter 23, "Deploy enterprise applications" on page 1189.

Access the Deployment Descriptor

To access the deployment descriptor where the enhanced EAR settings are defined, do thefollowing:


Expand Enterprise Applications BankJSFEAR.2.

Doubleclick Deployment Descriptor : BankJSFEAR to open the file in the DeploymentDescriptor Editor.

3.

Click the Deployment tab.4.



Note When using Cloudscape, the configuration of the user ID and password for the JAASAuthentication is not needed.

When using DB2 Universal Database or other database types that require a user ID andpassword, you will need to configure the JAAS authentication.

Configure a New JDBC Provider

To configure a new JDBC provider using the enhanced EAR capability in the deployment descriptor,do the following:

From the Deployment tab of the Application Deployment Descriptor, click Add under theJDBC provider list.

1.

When the Create a JDBC Provider dialog appears, select Cloudscape as the Databasetype, select Cloudscape JDBC Provider as the JDBC provider type, and then click Next.Note The JDBC provider type list for Cloudscape will contain two entries:

Cloudscape JDBC Provider

Cloudscape JDBC Provider (XA)

Since we will not need support for twophase commits, we choose to use the nonXAJDBC provider for Cloudscape.

2.

Enter Cloudscape JDBC Provider SDO in the Name field and then click Finish.3.

Configure the Data Source

To configure a new data source using the enhanced EAR capability in the deployment descriptor,do the following:

From the Deployment tab of the Application Deployment Descriptor, select the JDBCprovider created in the previous step.

1.

Click Add next to data source.2.

When the Create a Data Source dialog appears, select Cloudscape JDBC Provider underthe JDBC provider, select Version 5.0 data source, and then click Next.

3.

When the Create a Data Source dialog appears, enter the following and then click Finish:Name: BankJSF_Con1

4.



Note This name should match the connection name used to select a database whenadding the SDO relational record to the page (see "Add SDO to a JSF page"on page 720).

JNDI name: jdbc/BankJSF_Con1

Description: BankJSF_Con1

Configure the databaseName Property

To configure the databaseName in a new data source using the enhanced EAR capability in thedeployment descriptor to define the location of the database for your environment, do the following:

Select the data source created in the previous section.1.

Select the databaseName property under the Resource properties.2.

Click Edit next to Resource properties to change the value for the databaseName.3.

When the Edit a resource property dialog appears, enter c:\databases\BANK in the Valuefield and then click OK.

In our example, c:\databases\BANK is the database created for our sample application in13.2.2, "Set up the sample database" on page 681.

4.

Save the Application Deployment Descriptor.5.

Restart the test server for the changes to the deployment descriptor to take effect.6.

Tip You can verify that the data source configuration has been picked up by the server byinspecting the console output after the server has been restarted. The following lines shouldappear in the server console output: WSVR0200I: Starting application: BankJSFEAR WSVR0049I: Binding BankJSF_Con1_CF as eis/jdbc/BankJSF_Con1_CMP WSVR0049I: Binding BankJSF_Con1 as jdbc/BankJSF_Con1 SRVE0169I: Loading Web Module: BankJSF.

If these lines do not appear, you may have to remove the BankJSF application from the serverand then republish it.



13.3 Develop a Web Application using JSF and SDOThis section describes how to develop the ITSO RedBank sample Web application using JSF andSDO.

This section includes the following tasks:

Create a page template.

Useful views for editing page template files.

Customize the page template.

Create JSF resources using the Web Diagram tool.

13.3.1 Create a Page TemplateA page template contains common areas that you want to appear on all pages, and content areasthat will be unique on the page. They are used to provide a common look and feel for a WebProject.Create a Page Template

To create a page template containing JSF components, do the following:


Expand Dynamic Web Projects BankJSF.2.

Rightclick the WebContent folder, and select New Page Template File from the contextmenu.

3.

When the New Page Template wizard appears, enter the following (as seen in Figure 135on page 685), and then click Finish:

Folder: /BankJSF/WebContent

File name: BankJSFTemplate

Model: Select Template containing Faces Components.

4.

When prompted with the message displayed in Figure 136, click OK. We will add a contentarea as part of our page template customization.

5.


Figure 135: The new page template wizard design

Figure 136: Content area warningReview of Files Generated for Page Template

Now that we have created the page template, we would like to highlight some of the files that havebeen generated.

In the Project Explorer view (shown in Figure 137) you will see that there are some files added tothe Java Resources folder. The JavaSource folder contains the generated managed bean classes.The PageCodeBase.java class file is a super class for all the generated managed bean classes. ABankJSFTemplate.java class was created as the managed bean for the template page. Each JSFpage will have its own managed bean class generated.



Figure 137: JSF page template files13.3.2 Useful Views for Editing Page Template FilesThere are many views and tools that can be used when editing page templates. This sectionhighlights some views that we found helpful for editing a page template.

Note This section is not required for the working example. To continue with the workingexample, skip to 13.3.3, "Customize the page template" on page 695.

Page Template Editor View

This is the main editor window and it comprised of three tabs: Design, Source, and Preview.

Design tab: The Design tab is the main GUI editor that allows you to select the componentson the page in a graphical manner. It also gives you a good representation of the resultingpage. Also, you will notice in the top right of Figure 138 that there are some dropdownoptions; these options allow you to select the layout mode, select an existing component onthe page, and select font options for presentation, respectively. If you rightclick the Designeditor, the context menu will allow you to be able to insert a variety of components, as wellas edit embedded documents.



Source tab: The Source tab allows you to view the page template source. This tab allowsyou to tweak the template by changing the source directly. If you rightclick in the sourceeditor you have the option to clean up the document, format the source, and refactorcomponents.

The cleanup option will present the Cleanup dialog, as shown in Figure 1310 onpage 689. This dialog allows you to change the casing of HTML tags and attributes.It also gives you the ability to clean up tags with missing attributes, place quotesaround attributes, insert missing tags, and format the source.

The format option allows you to format the whole document based on your formattingpreferences, or just format the active element. To set your preferences you canrightclick the source editor and select Preferences..., and the preferences dialogwill be displayed, as shown in Figure 1311 on page 690. The preferences dialog issimilar to the one that is displayed when you select the preferences through theWindows menu; however, only the relevant preferences are include in the dialog.

Preview tab: The Preview tab allows you to preview the resulting JSF page template. Itpresents the page template as it would appear in a browser. You will notice in the top rightcorner there are some buttons; these button are similar to the navigation buttons on abrowser. They allow you to go to the previous page, next page, or reload the page,respectively.Note The Preview tab within the Page Designer for templates does not always give you a

graphical preview when there are extended components on the page. The Previewtab on the Page Designer for JSF does give you a graphical preview of the page.

Figure 138: Design tab of Page Template Editor



Figure 139: Source tab of the Page Template Editor

Figure 1310: Cleanup dialog



Figure 1311: Preferences dialog

Figure 1312: Preview tab for Page Template EditorPalette View

This view allows you to select palettes to work with. Examples of palettes in the Palette view can beseen in Figure 1313 on page 692. Palettes contain the reusable components that can be draggedon to the page to be added to a file. The palettes that are available for page template files include:

HTML Tags: This palette contains common HTML tags such as images, lists, tables, links,etc.

JSP Tags: This palette contains common JSP tags such as beans, expressions, scriptlets,declarations, include directives, as well as some logical tags such as if, when, otherwise,etc.

Crystal Report Faces Components: This palette contains Crystal Report Faces Components.You can drag these reusable Crystal Report Components to be used on the page template.



Faces Components: This palette contains the common Faces tags, as well as the IBMextended Faces tags.

Page Template: This palette contains page Template tags such as content area and pagefragment.

Web Site Navigation: This palette contains IBM's site edit tags, which can be used to addsite navigation to your page template.

Data: This palette contains data components that can be added to the page template suchas Web services, EJB session bean, SDO relational records, SDO relational record list, andJava beans.

Figure 1313: Palettes viewsThe Palette view can be customized to hide and display palettes that you wish to use. The paletteslisted above are the default palettes presented when editing a Page Template with JSF and SDOcomponents. Other palettes that can be included are EGL, Struts, Server Side Include directives,etc.

To customize the Palette view, rightclick the Palette view and select Customize. The CustomizePalette dialog will be presented, as shown in Figure 1314 on page 693. This dialog allows you tohide and show palettes, as well as reorganize the order in which they appear. You will notice that inthe dialog the hidden palettes are a lighter shade of gray.



Figure 1314: Customize Palette dialogSome palettes contain more components that can be presented on the screen at any one time, sothere are some arrows to allow you to scroll up and down, as seen in Figure 1314 on page 693.Also, the Palette view allows you to pin open frequently used palettes to stop them from beingclosed when you open other palettes.

Properties View

The Properties view allows you to define the properties of the selected component. It is contextsensitive and will change its content based on the type of component selected. The properties view(as seen in Figure 1315) shows the properties of the body tag. It also has a Text tab, which allowsyou to define the text style for the page template. You will notice the highlighted button on the topright of Figure 1315. This button allows you to view all the attributes of the tag in tabular format, asshown in Figure 1316 on page 694.

Figure 1315: Properties view



Figure 1316: Properties view All attributesPage Data View

The Page Data view allows you to create data elements, as well as select methods from youmanaged beans to be added to your page or bound to your page components. The button in Figure1317 allows you to add new data components such as:

EJB Session Beans

Web Services

Param scope variable

Application scope variables

Request scope variables

Session scope variables

SDO Relational record list

SDO Relation records

Java Beans



Figure 1317: Page Data viewYou can also add these components through the context menu by rightclicking the Page Dataview.

13.3.3 Customize the Page TemplateNow that you have created a page template, it is likely you will want to customize the page. Thissection demonstrates how to make the following common customizations to a page template:

Customize the logo image and title of the page template.

Customize the style of the page template.

Add the content area to the page template.

Customize the Logo Image and Title of the Page Template

To customize the page template to include the ITSO logo image and ITSO RedBank title, do thefollowing:

Import the itso_logo.gif image.Expand Dynamic Web Projects BankJSF WebContent theme.a.

Rightclick the theme folder, and select Import.b.

Select File System and click Next.c.

Enter c:\6449code\web in the From directory, check itso_logo.gif (as seen in Figure1318 on page 696), and then click Finish.

d.

1.

Expand Dynamic Web Projects BankJSF WebContent.2.

Doubleclick BankJSFTemplate.jtpl to open the file created in 13.3.1, "Create a pagetemplate" on page 684.

3.



Note You may see the message shown in Figure 136 on page 686. If this happens,just click OK.

Click the Design tab.4.

Select the text Place content here, rightclick, and select Delete.5.

From the Palettes view, expand the Faces Components.6.

Select the Panel Group Box and drag it onto the page.7.

When the Select Type dialog appears, select List as seen in Figure 1319, and then clickOK.

Note You maybe asked to confirm resource copy. This is because the projectdoes not contain resources that are required for the component that youare adding to the page template. Click the OK button to proceed. Noticethe facesconfig.xml file has been added to the WEBINF folder.

8.

You should now see a box on your page with the text box1: Drag and Drop Items from thepalette to this area to populate this region.

From the Faces Components, select Image and drag it to the panel. Afteradding the image, the page should look like Figure 1320.

9.

Update the image values in the Properties view.Select the image on the page (see Figure 1320 on page 697) to highlight the image.a.

In the Properties view, enter headerImage in the Id field, as seen in Figure 1321.b.

Click the folder icon next to File and select Import. Enter the path to the image andclick Open. In our example, we entered /WebContent/themes/itso_logo.gif to importthe image.Note We found that the File field in the Properties view showed

/BankJSF/theme/itso_logo.gif after the import of the image.

c.

You will notice in Figure 1321 that the absolute reference has been entered. Weneed to make it a relative reference by removing the /BankJSF from the File field.After making the change, it will be theme/itso_logo.gif without any leading slash.

d.

10.

From the Faces Components palette, select Output and drag it under theimage.

11.

In the Properties view enter ITSO RedBank into the Value field.12.



Select the Output box (ITSO RedBank) and move it to the right of the image.13.

Figure 1318: Adding the ITSO logo to the Dynamic Web Project

Figure 1319: Select Type List



Figure 1320: View of page template after adding image to panel Group box

Figure 1321: Properties for an image componentCustomize the Style of the Page Template

To customize the style of the page template, do the following:

Select the Output text box on the page.1.

In the Properties view, click the button next to the Style: Props: field. The Add style dialogwill be displayed, as shown in Figure 1322 on page 699.

2.

Change the Size field value to 18.3.

Select Arial for the Font and click Add.4.

Select sansserif for the Font and click Add.5.

Click OK.6.



Figure 1322: Style dialog used to configure the style of the selected componentsAdd the Content Area to the Page Template

To add the required content area to the page template, do the following:

Rightclick under the output field and from the context menu select Insert Horizontal Rule.1.

Expand Page Template in the Palette view.2.

From the Page Template, select the Content Area and drag it under thehorizontal rule.

3.

When the Insert Content Area for Page Template dialog appears, accept the default name(bodyarea) and click OK.

4.

Rightclick under the content area and from the context menu select Insert HorizontalRule.

5.

Save the page template file.6.

The customized page template file should look similar to Figure 1323.



Figure 1323: Customized page template BankJSFTemplate.jtpl13.3.4 Create JSF Resources using the Web Diagram ToolThis section demonstrates using the Web Diagram tool to create JSF pages, JSPs, Faces actions,and connections between pages and actions.

The sample application will consist of the following three pages:

Login page (BankJSFLogin): Validate the entered CustomerSSN. If it is valid it will thendisplay the customer details for the entered customer.

Customer details page (BankJSFCustomerDetails): Display all the customer's accountdetails and allow you to select an account to view the transactions.

Account details page (BankJSPAccountDetails): Display the selected account details.

Create a JSF Page using the Web Diagram Tool

To create a JSF page using the Web Diagram tool, do the following:


Expand Dynamic Web Projects BankJSF.2.

Doubleclick Web Diagram (as shown in Figure 1324) to open.3.

When the Web Diagram appears in the Web Diagram Editor (as seen in Figure 1325),select Web Page from the Web Parts palette and drag it onto the page.

4.



In the Properties view change the Web Page Path value to /BankJSFLogin.jsp, and changethe description to The login page.

Note Now that we have created a Web page in the Web Diagram tool, youmay notice that the BankJSFLogin.jsp icon has a grayblue tint. Thereason for this is that it is not linked to an actual JSP file. We will use thisdiagram to create the actual JSP file that this icon will link to in a laterstep.

5.

Repeat the process to create Web pages for the JSF pages shown in Table 131.6.

Figure 1324: Select Web Diagram in the Project Explorer

Figure 1325: Initial Web Diagram page



Table 131: Additional Web pages for the BankJSF application

Web page path Description/BankJSFCustomerDetails.jsp Customer details and account overview/BankJSFAccountDetails.jsp Account detailsCreate a JSP File

To create the JSP file from a page template using the Web diagram, do the following:

Doubleclick the BankJSFLogin.jsp in the Web diagram.1.

When the New Faces JSP File wizard appears, enter the following (as seen in Figure 1326on page 703), and then click Next:

Folder: /BankJSF/WebContent

File name: BankJSFLogin.jsp

Options: Check Create from page template.

Note If you have not already created the page template refer to 13.3.1, "Create a pagetemplate" on page 684, to create a page template.

2.

When the Page Template File Selection page appears, select the Userdefined pagetemplate, select BankJSFTemplate.jtpl (as seen in Figure 1327 on page 704), and thenclick Finish.

3.

The new Faces JSP file will be loaded into the Page Designer. At this point, the newly createJSF page should look like the page template.

4.

Click the Web Diagram to repeat the process to create the following Faces JSPs using theBankJSFTemplate.jtpl:

BankJSFCustomerDetails.jsp

BankJSFAccountDetails.jsp

5.

Save the Web diagram.6.



Figure 1326: New Faces JSP File wizard Create from page template



Figure 1327: New Faces JSP file select templateOnce you have created all the Faces JSPs, the Web diagram should look similar to Figure 1328 onpage 705. Notice the Web page icons now have color, and the icon titles are shown in bold. This isbecause they have been realized.



Figure 1328: Realized Faces JSPs for the sample applicationCreate Connections between JSF Pages

Now that the pages have been created, we can create connections between the pages.

To add connections between pages, do the following:

Click Connection from the Palette, click BankJSFLogin.jsp, and thenclick BankJSFCustomerDetails.jsp.

Note The Connection palette item is not dragged to the Web diagram like theremaining palette items.

1.

When the Choose a Connection dialog appears, select Faces Outcome (as seen inFigure 1329), and then click OK.

2.

An arrow with a dotted line with the label of will be drawn from the BankJSFLoginicon to the BankJSFCustomerDetails icon. The line is dotted because the connection hasnot been realized (added to the facesconfig.xml). Once realized, the line will become solid.Click the label to change the value of the outcome, and enter login. Alternatively, youcan select the line and change the value in the properties window.

3.

Realize the connection.Doubleclick the line.

Alternatively, rightclick the line and select Create outcome.

a.

When the Edit Navigation Rule appears, do the following (as seen in Figure 1330),and then click OK:

From page: /BankJSFLogin.jsp b.

4.



To page: /BankJSFCustomerDetails.jsp

When action returns outcome: Select The outcome named, enter login.

This rule is used by: Select Any action.

When following this rule: Select Use request forwarding (parameters workautomatically).

Review the modified facesconfig.xml.

Now we have a link from the BankJSFLogin.jsp to the BankJSFCustomerDetails.jsp. Thislink will be activated when the outcome of an action on the BankJSFLogin page is login. Toreview how this link is realized in the JSF configuration, do the following:

Expand Dynamic Web Project BankJSF WebContent WEBINF.a.

Doubleclick faceconfig.xml to open the file.

Verify the navigation rule was added as displayed in Example 131.

Example 131: New navigation rule added to facesconfig.xml (snippet)

/BankJSFLogin.jsp login /BankJSFCustomerDetails.jsp

The connection in the Web Diagram view should now be a solid line and the Webdiagram should look similar to Figure 1331.

b.

5.



Figure 1329: Choose a connection dialog

Figure 1330: Edit Navigation Rule dialog



Figure 1331: Web diagram with a realized connectionCreate Faces Action

The Web Diagram tool provides the means to create faces actions and connect Web pages to theseactions.

To create a new Faces action, do the following:

From the Faces Parts palette select Faces Action and drag it onto thepage.

1.

When the Faces Action Attributes dialog appears, enter Logout in the Managed Bean field,enter logout in the Method field (as seen in Figure 1332), and then click OK.

2.

Create the bean class.

Again you will notice that the new icon is lacking in color. This is because the Faces Actionbean is linked to an actual class or is unrealized. Doubleclick the Logout.logout icon tocreate the bean class.

3.

When the New Faces Managed Bean dialog appears, the manage bean name will bepopulated for you, since this is the first we are creating.

Select the New managedbean class option to create a new managed bean, and ensurethat the selected Model is managedbeanclass extends Action (as seen in Figure 1333on page 709), and then click Next.

4.

When the Specify the managedbean class you wish to generate dialog appears, entercom.ibm.bankjsf.actions in the Java package field (as displayed in Figure 1334 on page710), and click Finish.

5.



The new action class will be displayed in the editor. Enter the source code found in Example132 to the relevant sections of the LogoutAction class.

Example 132: ITSO sample LogoutAction.java

package com.ibm.bankjsf.actions;/** Import statements **/import java.util.Map;import javax.faces.context.*;public class LogoutAction {

/** Constructor **/ public LogoutAction() {

} /** Member variables **/ protected FacesContext facesContext; protected Map sessionScope;

private static final String CUSTOMERSSN_KEY = "customerSSN"; private static final String SESSION_SCOPE = "#{sessionScope}"; private static final String OUTCOME_LOGOUT = "logout";

/** logout method **/ public String logout(){ facesContext = FacesContext.getCurrentInstance(); sessionScope = (Map) facesContext .getApplication() .createValueBinding(SESSION_SCOPE) .getValue(facesContext);

if (sessionScope.containsKey(CUSTOMERSSN_KEY)){ sessionScope.remove(CUSTOMERSSN_KEY); }

return OUTCOME_LOGOUT; }}

Note To save time entering, the source code can be copied fromc:\6449code\jsf\BankJSFSource.jpage.

6. Rational Application Developer V6 Programming Guide 36


Figure 1332: Faces Action Attributes dialog

Figure 1333: New Managed Bean wizard



Figure 1334: New Faces Managed Bean class detailsThe Web Diagram should now look similar to Figure 1335.



Figure 1335: Logout bean in the Web diagramAdd a Connection for the Action

To add a connection from the Action to a page, do the following:

Select Connection from the palette, click the Logout.logout icon, and thenclick on the BankJSFLogin.jsp icon.

1.

Select on the dotted line between Logout.logout and BankJSFLogin.jsp, and renamethe outcome to logout.

2.

Doubleclick logout on the dotted line between Logout.logout and BankJSFLogin.jsp torealize the connection.

3.

When the Edit Navigation Rule dialog appears, do the following, as seen in Figure 1336,and then click OK:

Enter /* in the From Page field (the * makes the navigation rule applicable for allpages).

a.

Ensure that Any action is selected.b.

4.



Note At the time of writing, the settings for this navigation rule would change if thelogout line was subsequently doubleclicked. The settings would then reflectthose of Figure 1337 on page 713. Note how the selection has changed fromAny action to This action only.

Figure 1337: Wrong settings for the logout navigation rule



Figure 1336: Realize global logout navigation rule

This will result in the new navigation rule being added to the facesconfig.xml file, as shown inExample 133.

Example 133: New navigation rule added to facesconfig.xml for the logout action

/* logout /BankJSFLogin.jsp

Add Remaining Navigation Rules

We now have an action bean that will perform some action and return the user to theBankKJSFLogin screen.

Add the navigation rules listed in Table 132 on page 714, following the previouslydescribed procedures. Note that the navigation rules that point to the logout action do notrequire any outcome information.

1.

Once you have added the connections the Web Diagram should look similar to Figure1338.

2.



Tip To change the shape of a connection, select the connection, and in the center of thestraight line you will see an anchor point (a small square). You can drag the anchor tochange the shape of the connection for better readability.

Other useful buttons for editing the Web diagram are shown in Figure 1339 on page 715.Align selected objects horizontally.

Align selected object vertically.

Zoom in and out.

Configure the diagram setting such as grid line and snap to grid.

Filter certain types of objects from view.

Table 132: Navigation rules and connections

From To OutcomeBankJSFCustomerDetails.jsp BankJSFAccountDetails.jsp accountDetailsBankJSFAccountDetails.jsp BankJSFCustomerDetails.jsp customerDetailsBankJSFCustomerDetails.jsp Logout.logoutBankJSFAccountDetails.jsp Logout.logout

Figure 1338: Completed Web diagram



Figure 1339: Web diagram menu bar13.3.5 Edit a JSF PageThis section demonstrates the JSF editing features in Application Developer by using the JSFpages created in 13.3.4, "Create JSF resources using the Web Diagram tool" on page 700.

Add the UI Components

To add the UI components to the BankJSFLogin.jsp page, do the following:Open BankJSFLogin.jsp by doubleclicking the file in the Web diagram or in theWebContent folder.

1.

Click the Design tab.2.

Select the text Default content of bodyarea, rightclick, and select Delete.3.

From the Faces Components palette select Output and drag it into thecontent area.

4.

In the Properties view for the new output component, do the following:Enter Login into the Value field.a.

Click the icon next to Style: Props: to change the font and size.Select the Font size 14.i.

Select Arial font, and click Add.ii.

Select sansserif font, and click Add.iii.

Click OK.iv.

b.

5.

Place the cursor right after the Output component and press Enter.6.

Enter the text Enter Customer SSN:. Select the text you have just entered and use theProperties view to change the font to Arial.

7.

From the Faces Components select Input and drag it next to the text enteredin the previous step.

8.

In the Properties view of the input component, enter customer in the Id field.9.



From the Faces Components select the Command Button and dragit to the right of the Input component.

10.

In the Properties view for the command button select the Display options tab, and in theButton label type Enter, as seen in Figure 1340 on page 716.

11.

Save the BankJSFLogin.jsp file (Ctrl+S).12.

Click the Preview tab.

The resulting page should be similar to Figure 1341.

13.

Figure 1340: Command button Properties view

Figure 1341: Preview of the BankJSFLogin.jspAdd Variables

When a page has a field where text is entered, the input needs can be stored. This is accomplishedby creating a session scope variable to store the entered value and bind it with the input fieldcreated.

To create a variable and bind it to the input field, do the following:



Doubleclick BankJSFLogin.jsp and change to the Design view if necessary.1.

In the Page Data view click the Create new data component button ( ) (upper right ofview).Tip The Page Data view may be collapsed. If this is the case, click the Show List icon on

the right of the other tabs in the panel where the view is normally placed (this is typicallyin the lowerleft part of the Workbench) and select Page Data from the list.

2.

When the Add Data Component dialog appears, select the Session Scope Variable, andthen click OK.

3.

When the Add Session Scope Variable dialog appears, enter customerSSN in the Variablename field, enter java.lang.String in the Type field (as seen in Figure 1342), and then clickOK.

4.

From the Page Data view, expand and select Scripting Variables sessionScope customerSSN. Drag customerSSN to the input component. The helptip will show the textDrop here to bind "customerSSN" to the control customerId.

5.

Save BankJSFLogin.jsp.6.

Figure 1342: Add session scope variableBankJSFLogin.jsp should look like Figure 1343 from the Design view. Notice that the input field isnow bound to the session scope variable customerSSN, as denoted by the text {customerSSN}.



Figure 1343: Design view Bind input field and session scope variableAdd Simple Validation

JSF offers a framework for performing common validation on input fields such as required values,validation on the length of the input, and input check for all alphabetic or digits.

To add simple validation to an input field, do the following:

Select the Input component in the Design view.1.

In the Properties view for the input component select the Validation tab.2.

Enter the following in the Validation tab, as seen in Figure 1344 on page 719:Check Value is required.a.

Check Display validation error message in an error message control. When youselect the second checkbox an error message component will be added next to theInput box.

b.

Enter 11 in the Minimum length field.c.

3.



Figure 1344: Input box validation properties

We have now added some simple validation for the input component.

Add Static Navigation to a Page

To add static navigation to page, do the following:

Doubleclick the BankJSFLogin.jsp to open in the editor.1.

Select the Command Button component (Enter).2.

In the Properties view, click the All Attributes ( ) icon found in the top right.The Properties view will be changed to show all the attributes of the selected component, asseen in Figure 1345.

3.

Select the action attribute, and enter success, as seen in Figure 1345.

This will be the outcome of the page when the Command Button (Enter) is pressed, and as aresult the navigation rule that we created will be invoked.

4.

Save the BankJSFLogin.jsp.5.



Figure 1345: Properties view showing all attributesNow that we have set up static navigation, we need to compare the entered customer SSN to thevalues in the database. We will do so by creating an SDO object to retrieve the records from thedatabase.

Add SDO to a JSF Page

To add an SDO relational record to a JSF page, do the following:

Ensure you have set up the sample database as described in 13.2.2, "Set up the sampledatabase" on page 681. We will use the Bank Connection as part of the following procedure.

1.

Ensure the BankJSF_Con1 connection is connected so that it can access thec:\databases\BANK database.

2.

Doubleclick the BankJSFLogin.jsp to open it in the editor.3.

Rightclick the Page Data view, and select New Relational Record List.4.

When the Add Relational Record List dialog appears, enter customers in the Name field (asshown in Figure 1346), and then click Next.

5.

When the Record List Properties dialog appears, do the following:The first time this dialog appears the Connection name dropdown list will be emptyeven though the actual database connection named Bank Connection exists. ClickNew.

a.

When the Select a Database dialog appears, select Use Live Connection, selecteither BankJSF_Con1 connection or the BANK database for the BankJSF_Con1connection (as seen in Figure 1347), and then click Finish.Note In our example, the BANK database did not always show up under the

BankJSF_Con1 connection. We found that in these cases, we could just selectthe BankJSF_Con1 connection.

b.

As a result of selecting the database in the previous step, the Record List Propertiespage will be populated with the database tables. Select the ITSO.CUSTOMER table(as seen in Figure 1348 on page 722), and then click Next.

c.

6.

When the Column Selection and Other Task dialog appears, do the following (as seen inFigure 1349 on page 723), and then click the Filter results link:

7.



Check TITLE.

Check FIRSTNAME.

Check LASTNAME.

When the Filters dialog appears, click + (add) to add a new filter rule, as shown in Figure1350 on page 724.

8.

When the Conditions dialog appears, select SSN from the Column dropdown list, and clickthe .... (more) button to the right of Value, as seen in Figure 1351.

9.

When the Select Page Data Object dialog appears, expand sessionScope, selectcustomerSSN (as seen Figure 1352), and then click OK.

10.

When the Conditions dialog appears, the proper values are displayed, as seen in Figure1353 on page 726. Click OK.

11.

The Filters dialog should now look like Figure 1354. Click Close.12.

When you return to the Column Selection and Other Tasks dialog, click Finish.13.

Save the BankJSPLogin.jsp.14.

Figure 1346: Add Relational Record List wizard



Figure 1347: Add SDO to JSF page Select a database

Figure 1348: Select a Connection and Table



Figure 1349: Column selection



Figure 1350: Add new filter

Figure 1351: The Conditions dialog



Figure 1352: Select Page Data Object dialog

Figure 1353: Conditions dialog with values



Figure 1354: Filter dialog with valuesAt this point, we have added an SDO Relational Record List object to the BankJSFLogin.jsp, andwe can use the object to validate the customer SSN that is entered.As a result of creating the relational record list, several files were generated. The customer.xml fileis of most interest to us in that it contains the configuration details entered in the wizard. /WebContent/WEBINF/wdo/customers.xml

Add Custom Validation and Dynamic Navigation

To add custom validation and dynamic navigation we will have to add some Java code to ourmanaged bean.

Expand Dynamic Web Project BankJSF Java Resources JavaSource pagecode.1.

Doubleclick BankJSFLogin.java to open the file in an editor.2.

Insert the code in Example 134 to the BankJSFLogin.java at the end of the file.Example 134: Custom validation code to check customer's SSN

public static final String OUTCOME_FAILED = "failed"; public static final String OUTCOME_LOGIN = "login";

public String login(){ String outcome = OUTCOME_FAILED;

List custs = getCustomers();

// A valid customer SSN should only return one record if (custs == null || custs.size() < 1) { addErrorMessage("Customer Record not found."); } else if (custs.size() == 1){ // successfully entered a valid Customer SSN outcome = OUTCOME_LOGIN;

3.



} else { addErrorMessage("To many customer records found."); } return outcome; }

protected void addErrorMessage(String error){ if (errorMessages == null){ errorMessages = new ArrayList(); }

errorMessages.add(error); }

public String getErrorMessages(){ StringBuffer messages = new StringBuffer();

if (errorMessages != null && errorMessages.size() > 0){ int size = errorMessages.size(); for (int i=0;i

From the Faces Components Palette, select Output Formatted Text and drag it to the area between Login and Enter Customer SSN texts.

8.

Select the outputFormat component in the Design view.9.

In the Properties view for the new outputFormat component, do the following:Enter errorMessage in the Id field.a.

Click the icon next to Style: Props: to change the font, color, and size.Select the Font size 12.i.

Select Arial font and click Add.ii.

Select sansserif font and click Add.iii.

Select Red in the Color dropdown field.iv.

Click OK.v.

b.

10.

In the Page Data view, rightclick the errorMessages bean and select Bind to'errorMessage' from the context menu, where format1 is the ID of the output formatted textcomponent.

11.

Important At the time of writing, the procedure described here will result in invalid code beinggenerated for BankJSFLogin.jsp. The following is the code that has been added toBankJSFLogin.jsp:

This code instructs JSF to show the contents of the variable#{pc_BankJSFLogin.errorMessages.} in the outputFormat component.Unfortunately, there is no such variable. The correct name is#{pc_BankJSFLogin.errorMessages} without the dot. It is thus necessary to changethe code in BankJSFLogin.jsp to:

This is done in the Source view. After modifying the code, save BankJSFLogin.jsp.

Now we have bound the Command button to run the login method, which will get the customersfrom the database using the SDO Relational Record List. It will check the number of records found.If it is not equal to 1 then it will return an error message and we will come back to the login screen. Ifit returns only one record, the login method will return an outcome of success. As this outcome islinked to a navigation rule, that navigation rule will be invoked and will present the customer detailsscreen.



13.3.6 Completing the SDO ExampleThis section describes how to complete the sample application by using SDO with the pages todisplay and access the database.

Complete BankJSFCustomerDetails.jspWe will complete the following tasks to complete the BankJSFCustomerDetails.jsp to allow the userto update the customer details:

Add relational record.

Add the relational record component to the page.

Link update button to doCustomerUpdateAction (database update).

Add relational record list to display accounts.

Add the relational record list to the page.

Change the formatting of the balance field.

Add a row action.

Add reusable JavaBean.

Add logout method.

Add a logout button.

Add Relational Record

To add a relational record, do the following:

Doubleclick BankJSFCustomerDetails.jsp to open it in the editor.1.

In the Page Data view, click the Create new data component ( ) button, select RelationalRecord, and then click OK.

2.

When the Add Relational Record dialog appears, enter customer in the Name filed (as seenin Figure 1355 on page 731), and click Next.

3.

Select the ITSO.CUSTOMER table, as seen in Figure 1356, and click Next.4.

When the Column Selection and Other tasks dialog appears, click Filter Results.5.



When the Filters dialog appears, select the filter rule as seen in Figure 1357, and click theEdit button ( ).

6.

When the Conditions dialog appears, click the more button ( ) next to the Value field, asseen in Figure 1358 on page 733.

7.

When the Select Page Data Object dialog appears, expand sessionScope, select thecustomerSSN, and click OK.

8.

When you return to the Conditions dialog, the values should be set as seen in Figure 1358.Click OK.

9.

When you return to the Filters dialog, click Close.10.


Figure 1355: Adding a Relational Record



Figure 1356: Selecting the table for the Relational Record

Figure 1357: Filter rule selection



Figure 1358: Add sessionScope variable for customerSSNWe have now created the relational record.

Add the Relational Record Component to the Page

To add the relational record component to the page, do the following:

In the Design view, select the text Default content of bodyarea, rightclick, and selectDelete.

1.

In the Page Data view, expand customer (Service Data Object), select the customer(CUSTOMER) relational record component, and drag it onto the content area of the page.

2.

When the Insert Record Configure Data Controls dialog appears, select Updating anexisting record, uncheck the SSN field as seen in Figure 1359 on page 734, and thenclick the Options ... button.

3.

When the Options dialog appears, uncheck the Delete button check box, enter Update inthe Label field as seen in Figure 1360 on page 735, and then click OK.

4.

When you return to the Insert Record Configure Data Controls dialog, click Finish.5.

Save the BankJSFCustomerDetails.jsp.6.



Figure 1359: Insert Record wizard

Figure 1360: Insert Record Options dialogThe customer details can now be displayed on the page, with the input fields available to enter data.



Link Update Button to doCustomerUpdateAction (Database Update)

In this step, we provide the ability to update the database with the customer input field data, bylinking the doCustomerUpdateAction method to the update button.

In the Design view, select the Update button on the page.1.

In the Page Data view, expand customer (Service Data Object).2.

Rightclick doCustomerUpdateAction and select Bind to 'button1' from the contextmenu.

3.

Add Relational Record List to Display Accounts

In this section we demonstrate how to add the relational record list for accounts to the page, so thatwe can display the accounts for the customer.

To add the relational record list for the accounts, do the following:

In the Page Data view, click the button.1.

Select the Relational Record List from the New data component dialog and click OK.2.

When the Add Relational Record List dialog appears, enter accounts in the Name field andthen click Next.

3.

Select the ITSO.ACCOUNTS_CUSTOMERS table and then click Next.4.

Click the Filter results under the Tasks on the right of the dialog.5.

In the Filters dialog click the button.

When the Conditions dialog appears, do the following:Select the CUSTOMERS_SSN from the Column dropdown list.i.

Click the ... (more) button next to the Value field.ii.

When the Select Page Data Object dialog appears, select the customerSSNsession scope variable and click OK.

iii.

When you return to the Conditions dialog, click OK.iv.

a.

When you return to the Filters dialog, click Close.b.

6.

When you return to the Column Selection and Other tasks dialog, click Add anotherdatabase table through relationship under Advanced tasks.

7.



When the Choose Your Relationship dialog appears, select the ITSO.ACCOUNTtable (as seen in Figure 1361 on page 737), and then click Next.

a.

When the Edit Your Relationship dialog appears, enter the following, as seen inFigure 1362 on page 738:

Select *>1 FOREIGN KEY > PRIMARY KEY from the Multiplicitydropdown list.

i.

Select ACCOUNTS_ID from the ACCOUNT_CUSTOMERS primary keydropdown list.

ii.

Select ITSO.ACCOUNTS_CUSTOMER>ITSO.ACCOUNT in theRelationships panel to gain focus, and then click Finish.Note We found that if we did not highlight this field, the Finish button was not

available to click.

iii.

b.





Figure 1361: Create Relationship dialog



Figure 1362: Create Relationship conditions pageAdd the Relational Record List to the Page

To add the relational record list to the page, do the following:

In the Page Data view, expand accounts (Service Data Object).1.

Select the accounts (ACCOUNT_CUSTOMERS) relational record list component and dragit onto the area to the right of the Update button.

2.

When the Insert Record List Configure Data Control dialog appears, do the following, asseen in Figure 1363 on page 739:

In the Label field for the ACCOUNTS_ID enter Account ID.a.

3.



Uncheck CUSTOMERS_SSN.b.

Uncheck ACCOUNTS_CUSTOMERS_ACCOUNT.ID.c.

Click Finish.d.


Figure 1363: Insert Record List

Figure 1364 displays the Design view of BankJSFCustomerDetails.jsp representing the table of theaccounts that belong to the customer.



Figure 1364: Design view of showing the table for customer accountsChange the Formatting of the Balance Field

To change the formatting of the balance field, do the following:

Select the output component in the Design view.1.

In the Properties view, select Currency from the Type dropdown list.2.


Add a Row Action

We will now add a row action that will be activated when the user clicks a row of the table.

To add a row action, do the following:

In the Design view, select the data table component for accounts.1.

In the Properties view, select h:dataTable Row actions.2.



Click Add next to Add an action that's performed when a row is clicked.

The page should now look like Figure 1365 in the Design view.

3.

Select the Quick Edit view. Click the icon in the Properties view if there is no Quick Edittab.

4.

Copy the code from Example 135 in to the Quick Edit view.

Example 135: Code for accounts row action

try { int row = getRowAction1().getRowIndex(); Object keyvalue =((DataObject)getAccounts().get(row)).get("ACCOUNTS_ID"); getSessionScope().put("accountId", keyvalue); } catch(Exception e){ e.printStackTrace(); }

return "accountDetails";

Note To save time, the source code can be copied fromc:\6449code\jsf\BankJSFSource.jpage.

5.

Create a new Session scope variable named accountId, which is used by the code that wasadded.

In the Page Data view click the Create new data component button ( ) (upperright of view).

a.

When the Add Data Component dialog appears, select the Session Scope Variable,and then click OK.

b.

When the Add Session Scope Variable dialog appears, enter accountId in theVariable name field, enter java.lang.String in the Type field, and then click OK.

c.

6.



Figure 1365: Add row actionAdd Reusable JavaBean

We will now add the reusable JavaBean to the page to handle the logout process.

To add a reusable java bean, do the following:In the Page Data view, click the Create new data component button ( ).1.

Select JavaBean and click OK.2.

When the Add JavaBean dialog appears, do the following:Select Add existing reusable JavaBean (JSF ManagedMean).a.

Select the Logout bean, as seen in Figure 1366 on page 743.b.

Click Finish.c.

3.



Figure 1366: Add JavaBean wizardAdd Logout Method

To add the logout method from the Logout JavaBean, do the following:

In the Page Data view, rightclick the Logout JavaBean and select Add New JavaBeanMethod from the context menu.

1.

When the Select Method dialog appears, select logout() and click OK.Note This will add a new method on the page called

doLogoutLogoutAction(). This method will call the JavaBean methodlogout. Since the default code returns a null as the outcome, you willhave to change this method to return the logoutLogoutResultBean.

2.

Modify the return of the doLogoutLogoutAction() method.In the Page Data view, expand logout (com.ibm.bankjsf.actions.LogoutAction) logout().

a.

Doubleclick doLogoutLogoutAction() to open the fileBankJSFCustomerDetails.java in the editor.

b.

Change the return from null to the logoutLogoutResultBean.c.

Save and close BankJSFCustomerDetails.java.d.

3.



Save BankJSFCustomerDetails.jsp.4.

Add a Logout Button

To add a command button to the page and bind the logout method to the command button, do thefollowing:

Open BankJSFCustomerDetails.jsp.1.

From the Design view, select the Command Button from the Faces component paletteand drag it onto the page.

2.

Select the newly added Command Button in the Design view.3.

In the Properties view, click the Display options tab, and change the Button label to Logout.4.

In the Page Data view, rightclick the logout() method of the Logout JavaBean and selectBind to 'button2' from the context menu.

5.


The BankJSFCustomerDetails.jsp page is now complete.Complete the BankJSFAccountDetails.jspThis section describes the steps needed to complete the BankJSFAccountDetails.jsp. In manycases, the details for these steps can be found in the procedures used to complete theBankJSFCustomerDetails.jsp.To complete the BankJSFAccountsDetails.jsp, do the following:

In the Project Explorer view, expand Dynamic Web Projects BankJSF WebContent.1.

Doubleclick the BankJSFAccountDetails.jsp to open it in the editor.2.

Remove the text Default content of bodyarea like on previous pages.3.

Create a New Relational Record called account.

For details refer to "Add relational record" on page 730.Select the ACCOUNT table.

Add a filter condition of ID equal to the Session scope variable accountId.

4.



From the Page Data view drag the Relational Record account onto the page.

For details refer to "Add the relational record component to the page" on page 733.

On the Configure Data Controls page, do the following:Ensure that Display an existing record (readonly) is selected.

Use the up and down arrows to change the column order such that the ID column isdisplayed before the BALANCE column.

5.

Change the Balance output component type to Currency.

For details refer to "Change the formatting of the balance field" on page 740.

6.

Add a command button that:Has the display text Customer Details

Returns the outcome of customerDetails

Tip Use the Quick Edit view to change the outcome of a command button.

7.

Add the reusable Logout Java Bean as we did in the previous section.8.

Add a command button and bind the logout method to the command button.Tip Remember to return the logoutLogoutResultBean in the doLogoutLogoutAction().

9.

Add a column to the account information table containing the customer's SSN:Place the cursor in the Id: cell and select Table Add Row Add Above.a.

Enter SSN: in the leftmost cell of the new row.b.

Drag an outputFormat component to the rightmost cell of the new row.c.

Drag the customerSSN session variable to the new outputFormat component.d.

10.

The resulting page should look like Figure 1367 on page 746.



Figure 1367: Finished BankJSFAccountDetails.jsp



13.4 Run the Sample Web ApplicationThis section demonstrates how to run the sample Web application built using JSF and SDO.

13.4.1 Prerequisites to Run Sample Web ApplicationIn order to run the Web application you will need to have completed the following:

Sample code.Complete the sample following the procedures described in 13.3, "Develop a Webapplication using JSF and SDO" on page 684. Or do the following.

Import the completed sample c:\6449code\jsf\BankJSF.zip Project Interchange file.Refer to "Import sample code from a Project Interchange file" on page 1398 fordetails.

1.

Set up the sample database.

For details refer to 13.2.2, "Set up the sample database" on page 681.

2.

Configure the data source.

The details can be found in 13.2.3, "Configure the data source via the enhanced EAR" onpage 681.

3.

13.4.2 Run the Sample Web ApplicationTo run the sample Web application in the test environment, do the following:


Expand Dynamic Web Projects BankJSF WebContent.2.

Rightclick BankJSFLogin.jsp, and select Run Run on Server.3.

When the Server Selection dialog appears, select Choose an existing server, selectWebSphere Application Server v6.0, and click Finish.

4.

The Web application Logon page should be displayed in a Web browser.

13.4.3 Verify the Sample Web ApplicationOnce you have launched the application by running it on the test server, there are some basic stepsthat can be taken to verify that the Web application using JSF and SDO is working properly.

From the ITSO RedBank login page, enter 111111111 in the customer SSN field (as seenin Figure 1368 on page 748), and then click Enter.The resulting page should look like Figure 1369 on page 749.

1.


Note We noticed that under some circumstances, the JSF runtime would not initialize untilthe Enter button had been clicked. This resulted in the behavior that the first time thebutton was clicked, nothing happened. Retrying the login would then work asexpected.

From the page displayed in Figure 1369, you can do one of the following:Change the fields and then click Update. This verifies write access to the databaseusing SDO. For example, change Title to Sir and then click Update.

You can click Logout, which will perform a logout and return to the home page.

You can click the accounts to display the accounts information, resulting in the pagedisplayed in Figure 1370 on page 750.

2.

From the page displayed in Figure 1370, you can do one of the following:You can click Customer Details, which will return you to the page displayed inFigure 1369 on page 749.

You can click Logout, which will perform a logout and return you to the home page.

3.

Figure 1368: ITSO RedBank Login page



Figure 1369: Display of customer accounts

Figure 1370: Details for a selected account



Table of Contents Chapter 13: Develop Web Applications using JSF and SDO Overview 13.1 Introduction to JSF and SDO 13.1.1 JavaServer Faces (JSF) Overview 13.1.2 Service Data Objects (SDO)

13.2 Prepare for the Sample 13.2.1 Create a Dynamic Web Project 13.2.2 Set up the Sample Database 13.2.3 Configure the Data Source via the Enhanced EAR

13.3 Develop a Web Application using JSF and SDO 13.3.1 Create a Page Template 13.3.2 Useful Views for Editing Page Template Files 13.3.3 Customize the Page Template 13.3.4 Create JSF Resources using the Web Diagram Tool 13.3.5 Edit a JSF Page 13.3.6 Completing the SDO Example

13.4 Run the Sample Web Application 13.4.1 Prerequisites to Run Sample Web Application 13.4.2 Run the Sample Web Application 13.4.3 Verify the Sample Web Application

Documents

Develop Web Applications Using JSF and SDO