Lab 5b) create a java server faces application

V4.1
Instructor Exercises Guide

EXempty Exercise 11.Create a JavaServer Faces
Application

Estimated time
01:00

What this exercise is about
In this exercise, you create a JavaServer Faces (JSF) Web project
and experiment with some of the functions and components of JSF.

What you should be able to do
At the end of the exercise, you will be able to:
• Create JSF pages in Page Designer using JSF components
• Bind user interface (UI) components to a Java bean
• Create a custom validator
• Implement an error page
• Add AJAX typeahead support

Introduction
Patrons register with the library system using a browser interface.
They give their names, e-mail addresses, and passwords for
identification and authentication. The JSF pages are set up with the
fields to enter this information. The fields will also validate that the
information is correctly filled in. There are pages for successful and
failed registration.
Search functionality will be enhanced by adding typeahead support.

Requirements
This exercise requires three code fragments (the code is also given in
the exercise instructions). Make sure that these files appear in the
<LAB_FILES> JSFsnippets directory before starting the lab.

© Copyright IBM Corp. 2004, 2007 Exercise 11. Create a JavaServer Faces Application 11-1
Course materials may not be reproduced in whole or in part
without the prior written permission of IBM.


Instructor exercise overview
Students should have basic knowledge of JSF and AJAX concepts before beginning this
exercise. They should understand what JSF is used for and should understand the concept
of validators.

Students import the RegisterPatronBean.java JavaBean, which provides the business logic
to register a patron. Encourage students to look through the code for the JavaBean in order
to understand what features will be provided, and how the JavaBean is used by the JSF
components in the user interface. Also encourage students to look through the code
snippets they add to the files, as these snippets provide the crucial elements that call the
business logic for the calculator, and configure the navigation. The snippet code is provided
in the exercise instructions to facilitate this.

In the first part of this exercise, students setup their development environment. They then
create the Faces JSP and add a new style class to the cascading stylesheet and bind the
JSF page to the Java bean,
The next step is to add code to invoke the logic on RegisterPatronBean.java. This will
attempt to register the patron, and returns the result “success” or “failure”. The navigation
rules for these two results are added to register.jsp and the application is tested.
A custom validator is created to ensure that the email field ends with ibm.com. Note that
this validator is too restrictive for real-world applications, but avoids having to create
regular expressions to do a more global validation. The validation class is registered in the
configuration file, and the application is tested again.
Finally using AJAX, an input field has typeahead functionality added to it. A Web service
project is imported and a bean is added to the JSF page to call the Web service

NOTE: If the students encounter a FacesContext error, try disabling the Appender Filter in
web.xml. To disable the filter, remove any URL or Servlet Mappings for the filter.

11-2 Developing Web Applications © Copyright IBM Corp. 2004, 2007

V4.1

EXempty Exercise instructions
Preface
In this exercise, you create a JSF Web project that uses a RegisterPatron bean and a JSF
front-end to enable registering a patron in the library system. You learn about some of the
functions and components of JSF.
The directory locations are specified in the exercise instructions using symbolic references,
as follows:
• <LAB_FILES>: C:LabFiles70



11.1. Prepare the Workspace and Dynamic Web Project
If you are starting with a new workspace at this lab, follow the instructions in step 1.c.
__ 1. Start IBM Rational Application Developer (V7 and later).
__ a. In the Workspace Launcher dialog, specify <LAB_FILES>workspace as the
workspace directory.
__ b. Click OK to open the workspace.
__ c. If this is a new workspace, import the necessary projects through File Project
interchange. Follow the instructions in the Appendix, Install the Library
Application in a New Workspace.
__ 2. Stop the server if it is running. In the Servers view, right-click the server and select
Stop.
__ 3. Add JavaServer Faces facets to LibraryWeb.

Note

If you are creating a new Dynamic Web project, you can choose the Faces Project
configuration during creation. A configuration is a way of grouping project facets.
Within the Add/Remove Facets dialog of an existing project you can also select the Faces
Project configuration.
Since LibraryWeb contains project facets that are not included in the Faces Project
configuration, the project facets need to be added individually.

__ a. Right-click LibraryWeb and select Properties.
__ b. In the Properties for LibraryWeb dialog, select Project Facets.
__ c. Click Add/Remove Project Facets.


V4.1

EXempty __ d. In the Add/Remove Project Facets dialog, select the following check boxes:
- Base Faces support - (Note: a warning about JSTL will appear if it was not
already added to the project.)
- Enhanced Faces components
- JSTL (if necessary)

__ e. Click Finish.
__ f. Click OK.



11.2. Import the Java Bean Class
__ 4. Import the RegisterPatronBean.java into the project.
__ a. In the Project Explorer view, expand LibraryWeb Java Resources: src.
__ b. Right-click Java Resources: src. and select New Package.
__ c. In the New Java Package dialog, make sure that the Source Folder is set to
LibraryWeb/src, and type com.ibm.library.jsf as the package name. Click
Finish to create the package.
__ d. Right-click com.ibm.library.jsf and select Import.
__ e. In the Import dialog, type file to Select an import source.
__ f. Select File system and click Next.
__ g. On the file system page, Browse to C:LabFiles70JSFimports for the From
directory. Select the imports folder in the left pane, and select
RegisterPatronBean.java in the right panel.

__ h. Click Finish.


V4.1

EXempty 11.3. Creating the Faces JSP
__ 5. Create a new Web page, register.jsp.
__ a. In the Project Explorer view, right-click LibraryWeb WebContent and select
New Web Page.
__ b. In the New Web Page dialog, type the File Name register.jsp.



Note

If you click Options in the New Web Page dialog, you will notice an entry for JavaServer
Faces. The check box Use JavaServer Faces technology is selected.
The equivalent check box for the Struts entry is not selected.

__ c. Click Finish.

Note

In the Java Resources folder, a new package named pagecode is automatically
generated. It contains the files PageCodeBase.java and Register.java. Register is a
subclass of PageCodeBase, which contains shared code for all JSF pages.

__ 6. Add a title to the new JSP page.
__ a. In Page Designer, switch to the Design tab if you are not already there.
__ b. Click on the page and type IBM Library System.
__ c. With the cursor on the same line, select Format Paragraph Heading 1 from
the main menu to change the paragraph to a heading.
__ d. Press the down arrow key to move the cursor to the next line.
__ e. Type Register a New Patron.
__ f. With the cursor on the same line, select Format Paragraph Heading 2 from
the main menu.


V4.1

EXempty __ g. Press the down arrow key again to move the cursor to the next line.

__ 7. Add a Display Errors JSF component to the JSP page.
__ a. In the Palette view, expand the Enhanced Faces Components drawer.
__ b. Double-click the Display Errors component near the bottom of the drawer. Note
that DisplayError is associated with individual components.



__ c. Switch to the h:messages tab in the Properties view. Notice in the Classes field
that the component is associated with the messages CSS style class, which is
empty at the moment. You will provide style properties later in the exercise.
__ d. In the same tab, select Display as list in the Layout drop-down box.

__ 8. Add an HTML table component to the JSP page.
__ a. Place the cursor beneath the Error Messages icon.
__ b. In the Palette view, expand the HTML Tags drawer.
__ c. Double-click the Table component.
__ d. In the Insert Table dialog, provide the following information.
• Rows: 5
• Columns: 2
• Apply Pattern: click the middle button
• Table width: 100%
__ e. Click OK.

__ 9. Add JSF Components to the HTML table.
__ a. From the Palette view, expand the Enhanced Faces Components drawer and
add the following components to the HTML table. Note that once you add a
component in Page Designer, you can copy the component by holding down the
CTRL key while you drag it.


V4.1

EXempty • Drag Output components to column 1, row 1,2,3,4
• Drag Input components to column 2, row 1,2,3
• Drag an Input - Password component to column 2 row 4
• Drag a Button - Command component to column 1, row 5

__ b. For each Output component in column 1, select the component in Page
Designer and switch to the Properties view. Change the Value field to specify the
following:
• Row 1: First Name:
• Row 2: Last Name:
• Row 3: Email:
• Row 4: Password:

__ 10. Configure the Input component for the First Name.
__ a. Select the first input field (for first name) in column 2 row 1 and switch to the
Properties view.



__ b. In the h:inputText tab, enter the following information.
• Id: firstName
• Width: 20 (characters)
• Format: String

__ c. Still in Properties view, switch to the Validation tab.
__ d. Select both the Value is required and the Display validation error messages
in an error message control check boxes. A Display Error component appears
next to the Input component.

__ e. Select the Display Error component in Page Designer, and switch to the
h:message tab in the Properties view.

Note

Be careful not to confuse CSS Classes with Java Classes. CSS classes allow you specify
the same style for multiple elements.

__ f. Click the button next to the Classes field to bring up the Select Class dialog.


V4.1

EXempty __ g. In the Select Class dialog, select the message class from the Class List. (Note:
select message, not messages).

__ h. Click OK. Note that this CSS class has not yet been defined. You will define it
later in this exercise.
__ 11. Configure the second Input component.
__ a. Select the input field for last name in column 2 row 2 and switch to the Properties
view.
• Id: lastName
• Format: String
__ d. Select the Value is required check box.
__ 12. Configure the third Input component.
__ a. Select the input field for email in column 2 row 3 and switch to the Properties
view.
• Id: email
• Format: String



__ d. Select both the Value is required and the Display validation error messages
in an error message control check boxes. A Display Error component is added
beside the Input component.
__ e. Select the Display Error component in Page Designer, and switch to the
h:message tab in Properties view.
__ f. Click the button next to the Classes field.
__ g. In the Select Class dialog, expand the list to select the message class.
__ h. Click OK.
__ 13. Configure the attributes and validation for the Input - Password component.
__ a. Select the input field in column 2 row 4 and switch to the Properties view.
__ b. In the h:inputSecret tab, enter the following information.
• Id: password
__ c. Still in Properties view, switch to the Validation tab. Select the Value is required
check box.
__ 14. Configure the JSF Command Button component.
__ a. Select the Command Button component labeled Submit, in column 1 row 5,
and switch to the Properties view.
__ b. In the hx:commandExButton tab, enter register in the Id field.
__ c. Switch to the Display options tab and enter Register in the Button label field.

__ 15. Save your changes.


V4.1

EXempty 11.4. Edit Style Classes in the CSS File
__ 16. Edit the .message and .messages style classes to display red text for error
messages.
__ a. In the Project Explorer view, double-click LibraryWeb WebContent theme
stylesheet.css to open it in the CSS editor. When the editor is loaded, a
sample HTML file is shown in the left frame and the CSS file shown on the right
frame.
__ b. In the Styles view (bottom left hand corner), double-click .message.

__ c. In the New Style --- .message dialog, select Red from the Color drop-down list.



__ d. Click OK. The CSS file in the right frame automatically refreshes showing color:
red inside the .message style class.
__ e. In the Styles view, double-click .messages and make the same change.
__ f. Verify that the CSS file refreshes with color: red inside the .messages style
class.

__ 17. Save your changes and close the file.


V4.1

EXempty 11.5. Bind the JSF Page to the Java Bean
In this part of the exercise, you bind the RegisterPatronBean.java bean to the
register.jsp page. The binding allows controls in the interface to invoke methods
provided by the bean.
__ 18. Create a binding RegisterPatronBean.java and register.jsp.
__ a. Open register.jsp in Page Designer.
__ b. In the Page Data view, right-click Faces Managed Beans and select New
Faces Managed Bean.
__ c. In the Page Data view (bottom left hand corner), right-click in the empty space of
the view and select New JavaBean. The Add JavaBean dialog appears.



__ d. In the Add JavaBean page, enter the following
- Name: registerPatron
- Class: Click the browse button , type registerp, and select
RegisterPatronBean
- Select the Make this JavaBean reusable (Make this JavaBean a JSF
ManagedBean) check box.
- Description: Register Patron Bean
- Scope: session

__ e. Click Finish.

Information

This binds the JavaBean to your JSP page.
• A managed-bean entry has been added to faces-config.xml file, found under the
WebContent WEB-INF folder.
• The method getRegisterPatron has been added to the pagecode class
Register.java class, found under Java Resources: src pagecode.


V4.1

EXempty __ 19. Create bindings between the RegisterPatronBean and JSF components in your
register.jsp page.
__ a. In the register.jsp Page Designer editor, select the input field for first name (row
1 column 2)
__ b. In the Properties view, select the h:inputText tab and click the button beside the
Value field. The Select Page Data Object dialog appears.
__ c. Expand registerPatron(com.ibm.library.jsf.RegisterPatronBean) and select
the firstName (java.lang.String) property in the bean.

__ d. Click OK.
__ e. In the Page Data view, select Faces Managed Beans registerPatron
lastName.



__ f. Drag the lastName property onto the Input component for the Last Name field
in Page Designer..

__ g. Drag the email (java.lang.String) property onto the Input component for
the Email field.
__ h. Drag the password (java.lang.String) property onto the Input -
Password component for the Password field.

__ i. Save your changes.


V4.1

EXempty 11.6. Add Code to Invoke the Business Logic of
RegisterPatronBean
At this point in the exercise, you have nearly completed the register.jsp page. You have
created bindings for most of your JSF components. In order to use the register function,
you must add code that will invoke the business logic supplied by RegisterPatronBean
when the Register button is clicked.
__ 20. Add code to execute business logic from the Register button.
__ a. In Page Designer, select the Register button.
__ b. Click the Quick Edit view to make it active.
__ c. In the Quick Edit view, select Command in the left frame and click empty space
in the text area in the right frame. The text area refreshes with a simple return
statement.

__ d. Press CTRL+A to select the default text, and press DELETE.
__ e. In the text area, add the following code snippet. You can copy and paste the
code from c:IBMSDP70JSFsnippetssnippet01.txt.
getRegisterPatron().register();
if (getRegisterPatron().getErrorMessage()==null) {
return "success";
} else {
return "failure";
}
__ f. In the Project Explorer view, double-click LibraryWeb JavaResources: src
pagecode Register.java to open it in an editor.
__ g. Scroll down to the doRegisterAction method, and notice that the code
snippet you added appears in this method.
__ h. Save your changes.



11.7. Add Navigation Rules
__ 21. Configure page navigation for when the register action is successful.
__ a. In Page Designer, select the Register button in register.jsp.
__ b. Open the Properties view to its hx:commandExButton tab. The right frame
shows a list of navigation rules for the action. Click Add Rule.


V4.1

EXempty __ c. In the Add Navigation Rule dialog, enter the following
- Page: registerSuccess.jsp. (Note: You will create this page shortly.)
- When the action returns the outcome:
• Click The outcome named: and type success in the text field
- This rule is used for: This page only
- This rule is used by: This action only:
#{pc_Register.doRegisterAction}.
- When following this rule: Use request forwarding (parameters work
automatically).

__ d. Click OK.

__ 22. Add the navigation rule to handle the case when registration fails.
__ a. With the Register button still selected in Page Designer, click Add Rule in the
Properties view.
__ b. Enter the following information in the Add Navigation Rule dialog.
- Page: registerFailure.jsp. (Note that you will create this page shortly.)



- When the action returns the outcome:
• Click The outcome named: and type failure in the text field.
- This rule is used for: This page only
- This rule is used by: This action only
#{pc_Register.doRegisterAction}
- When following this rule: Use request forwarding (parameters work
automatically)

__ c. Click OK.

__ d. Save your changes.


V4.1

EXempty 11.8. Add the Registration Result JSP
__ 23. Create a new Web page called registerSuccess.jsp.
__ a. In the Project Explorer view, right-click WebContent and select New Web
Page.
__ b. In the New Web Page dialog, type registerSuccess.jsp for the File Name.
Click Finish.
__ c. In Page Designer Design tab, type IBM Library System.
__ d. With the cursor on the same line, select Format Paragraph Heading 1 from
the main menu.
__ e. Press the down arrow key to move the cursor to next line.
__ f. Type Registration Successful and then select Format Paragraph
Heading 2 from the main menu.
__ g. Press the down arrow key to move the cursor to next line.

__ 24. Bind the properties of the existing bean, RegisterPatronBean.java, to Output JSF
components in registerSuccess.jsp
__ a. In the Page Data view, expand Faces Managed Beans registerPatron.
__ b. CTRL-Click to select the four properties email, firstName, id, and lastName.



__ c. Drag the selected properties into Page Designer. Drop the properties underneath
the Registration Successful subtitle.

__ d. In the Insert JavaBean dialog:
- Click Displaying data (read-only).
- In Fields to display, change the order to firstName, lastName, id, and
email.
- In the Label column, add a space between each word.


V4.1

EXempty __ e. Click Finish.

__ f. Save the changes and close registerSuccess.jsp.
__ 25. Add the registerFailure.jsp page.
__ a. In the Project Explorer view, right-click WebContent and select New Web
Page from the pop-up menu.
__ b. In the New Web Page dialog, type registerFailure.jsp for the File Name.
Click Finish.
__ c. In Page Designer, in the Design tab, type IBM Library System.
__ d. With the cursor on the same line, select Format Paragraph Heading 1 from
the main menu.
__ e. Press the down arrow key to move the cursor to next line.
__ f. Type Registration Failed, then select Format Paragraph Heading 2
from the main menu.
__ g. Press the down arrow key to move the cursor to next line.

__ 26. Add the Faces Managed Bean RegisterPatronBean to the JSP page and bind its
properties to Output JSF components.
__ a. In the Page Data view, drag Faces Managed Beans registerPatron
errorMessage into Page Designer. Drop the property underneath the
Registration Failed subtitle.
__ b. In the Insert JavaBean dialog, enter the following:
- Click Displaying data (read-only)



- Label column: Error Message:.

__ c. Click Finish.

__ d. Save your changes and close registerFailure.jsp.


V4.1

EXempty 11.9. Test the JSF Pages
__ 27. Register a new Patron using the JSF pages.
__ a. In the Project Explorer view, right-click LibraryWeb WebContent
register.jsp and select Run As Run on Server.
__ b. Fill in the following information in the Register A New Patron page.
• First Name: <leave blank>
• Last Name: Doreme
• Email: hello.world@ibm.com
• Password: <leave blank>

__ c. Click Register.
__ d. The browser should reload the register.jsp page, this time displaying a number of
Validation Errors.

__ e. This time, fill in the following information.



• First Name: John
• Last Name: Valerie
• Email: jb@bogus.ibm.com
• Password: helloworld
__ f. Click Register.
__ g. This time it should forward you to a Registration Failed page, since the email
address is already registered with another Patron.

__ h. Click the Back button on the Web browser to go back to register.jsp.
__ i. In the register patron page, enter the following information.
• First Name: John
• Last Name: Valerie
• Email: jv@hotmail.com
• Password: helloworld
__ j. Click Register.
__ k. The Registration Successful page should show, displaying the Patron
information, including a randomly generated Patron ID.

__ 28. To ensure that the new patron was inserted into the database, search for the new
patron using the Patron ID.
__ a. Note the Patron ID in the Registration Successful page. In this case, it is
607187.
__ b. In the Project Explorer view, right-click LibraryWeb WebContent
search.jsp and select Run As Run on Server.


V4.1

EXempty __ c. In the Search page, type the new Patron ID 607187 in the Search Phrase field
and select Patron ID as the criteria.

__ d. Click Search.
__ e. The Search Result page should show the Patron name and an empty list of
items.



11.10. Create a Custom Validator
A custom validator needs to be created to ensure that the email field ends with ibm.com.
This custom validator can be represented by a Java class that implements the Validator
interface in the javax.faces.validator package. To use the custom validator, it needs to be
registered in the configuration file and bound to the Email input field.
__ 29. Create a new class called EmailValidator for the custom validator.
__ a. In the Project Explorer view, right-click Library Web Java Resources: src
com.ibm.library.jsf and select New Class.
__ b. In the New Java Class dialog, enter the following:
- Name: EmailValidator
- Interfaces: Click Add, type Validator and double-click Validator -
javax.faces.validator. Click OK.
__ c. In the Java Class page, the javax.faces.validator.Validator interface is now
listed.

__ d. Click Finish.


V4.1

EXempty __ 30. Implement the validate method in the EmailValidator class so that a
ValidationException is thrown if the field value does not end with ibm.com.
__ a. Replace the text in the public void validate method stub with the
following: Note that you can cut and paste from
C:LabFiles70JSFsnippetssnippet02.txt.
UIInput field = (UIInput)arg1;
String value = (String)arg2;
if(value.endsWith("ibm.com")) {
field.setValid(true);
} else {
FacesMessage errmsg = new FacesMessage
(FacesMessage.SEVERITY_ERROR,
"Email does not end with ibm.com.",
"Email does not end with ibm.com.");
throw new ValidatorException(errmsg);
}
__ b. To resolve the import errors, select Source Organize Imports from the main
menu.
__ c. Save your changes and close the file.
__ 31. Register the validator in the faces-config.xml configuration file. The ID of the
validator is emailValidator. You use this value later when you bind the custom
validator to the input field.
__ a. In the Project Explorer view, double-click LibraryWeb WebContent
WEB-INF faces-config.xml to open it.
__ b. Add the following code snippet to the end of the file just before the
</faces-config> tag, or cut and paste the code from C:LabFiles6010JSF
snippetssnippet03.txt.
<validator>
<description>
Registers the EmailValidator
</description>
<validator-id>emailValidator</validator-id>
<validator-class>com.ibm.library.jsf.EmailValidator
</validator-class>
</validator>
__ c. Save your changes and close the file.
__ 32. Bind the custom validator to the Email input field in register.jsp.
__ a. Open register.jsp in Page Designer.
__ b. Select the input component corresponding to the Email field (row 3, column 2).



__ c. Select the Source tab at the bottom of the editor.
__ d. Locate the <h:inputText styleClass="inputText" id="email" required="true"
size="30" value="#{registerPatron.email}"> </h:inputText> tags, and place the
cursor in between the opening tag and the closing tag, that is, right before
</h:inputText>.
__ e. Select JSP Insert Custom from the main menu. The Insert Custom Tag
dialog appears.
__ f. Select the http//java.sun.com/jsf/core tag library (with prefix f) from the list of
tag libraries on the left and select the validator custom tag from the list of
custom tags in the library on the right.

__ g. Click Insert and then click Close.
__ h. The <f:validator validatorId=""></f:validator> tags are added.
__ i. Type emailValidator inside the quotes of the validatorID attribute in the
f:validator tag. The result should look like the following:

__ j. Save your changes and close the file.


V4.1

EXempty 11.11. Test the Email Validator
__ 33. Run the register patron pages again, this time using a email that does not end with
ibm.com.
__ a. In the Project Explorer view, right-click LibraryWeb WebContent
register.jsp and select Run As Run on Server.
__ b. When the Register A New Patron page comes up, enter the following
information.
• First Name: Sally
• Last Name: Underwood
• Email: sally@gmail.com
• Password: ibmrocks
__ c. Click Register.
__ d. The page should indicate that the email address is invalid.



11.12. Adding AJAX Typeahead Support to Book Title Matching
In the part you will add typeahead support to the Search.jsp. This will allow you to search
for books by title. A LibraryWebService will create a list of suggestions for the typeahead
field. A Suggestions bean will use a Web service client proxy to create the list of
suggestions for the typeahead field.
__ 34. Stop the server. In the Servers view, right-click the server and select Stop.
__ 35. Add LibraryWebService to workspace
__ a. Select File Import from the main menu.
__ b. In the Import dialog, type inter for Select an import source. Select Other
Project Interchange and click Next.
__ c. For the From zip file, browse to
<LAB_FILES>JSFimportsLibraryWebService.zip.
__ d. Select the LibraryWebService check box and click Finish.

__ 36. Add LibraryWebService to LibraryEAR.
__ a. In the Project Explorer, double-click LibraryEAR Deployment Descriptor.
__ b. Select the Module tab.
__ c. Click Add in the Modules area and select LibraryWebService. Click Finish.
__ d. Save your changes and close the Application Deployment Descriptor editor.
__ 37. Add typeahead input field to search.jsp.


V4.1

EXempty __ a. Open search.jsp in the Web perspective.
__ b. In search.jsp, place the cursor on the line after the form.
__ c. In the Palette view, in the Enhanced Faces Components, double-click the
Input component.

Note

This will add JSF support to the page and the input field. As you can see in the next image,
a second form, with a dashed marquee, is added to the page.

__ d. Place the cursor before the input that was just added and type Book Title
Matcher:

__ e. Select the input field and, in the Properties view, select the h:inputText
Behavior tab.
__ f. Select the Enable typeahead option check box.

__ g. A new tab will appear: hx:inputHelperTypeahead.



__ 38. In the hx:inputHelperTypeahead, type #{suggestions} for the Value.

__ 39. Create a LibraryWebService client using the Page Data view for search.jsp.
__ a. In the Page Data view, right-click Services and select New Web Service.
Note that you may need to close and re-open search.jsp for the new JSF entries
to appear in the Page Data view.
__ b. In the Web Service Discovery Home dialog, select the Web Services from
your workspace link.

__ c. In the Web Services from your workspace page, click the
BookSearchSuggestionsService link.


V4.1

EXempty __ d. In the Web Services from a known URL page, click Add to Project.

__ e. If a Warning Dialog opens to allow automatic overwriting, click Yes All.



__ f. In the Add Web Service dialog, click Finish.

__ g. Save your changes.
__ 40. Import Suggestions.java into com.ibm.library.jsf.
__ a. Right-click LibraryWeb Java Resources com.ibm.library.jsf and select
Import.
__ b. Type system in the Import dialog and select General File System. Click
Next.
__ c. Browse to C:LabFiles70JSFimports for the From directory.


V4.1

EXempty __ d. Click imports and select the Suggestions.java check box.

__ e. Click Finish.
__ 41. Add a Suggestions bean to Search.jsp
__ a. Open search.jsp if it is not already opened.
__ b. In the Page Data view, right-click Faces Managed Beans and select New
Faces Managed Bean.



__ c. In the Add JavaBean dialog, type suggestions for the name and Browse to
the class com.ibm.library.jsf.Suggestions.

__ d. Click Finish. Note that this adds JSF functionality to the page and adds a JSF
Form.
__ 42. Test search.jsp.
__ a. Right-click search.jsp and select Run As Run on Server.
__ b. Type J2E in the Book Title Matcher field. Note that the matcher is
case-sensitive.


V4.1

EXempty 11.13. Support Invoking search.jsp Directly
When you tested search.jsp in the preceding step, the Web URL ended in search.faces
and not search.jsp. This is because the request needs to go through the JavaServer Faces
framework. However the LibraryWeb application needs to be able to invoke search.jsp
directly. If this was attempted right now, an error would occur because the Faces Context
would be null.
__ 43. Add code to search.jsp, after the taglib directives. This will support invoking the
JSP using the URL ...search.jsp.
__ a. In Page Designer for search.jsp, click the Source tab.
__ b. At the top of the file, add the following code after the taglib directives:
<%if (javax.faces.context.FacesContext.getCurrentInstance() ==null) {
request.getRequestDispatcher("search.faces")
.forward(request,response);
return;
}%>
__ c. Save your changes.

End of exercise


Lab 5b) create a java server faces application

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Lab 5b) create a java server faces application

Similar to Lab 5b) create a java server faces application (20)

More from techbed

More from techbed (18)

Recently uploaded

Recently uploaded (20)

Lab 5b) create a java server faces application