Lab 5b) create a java server faces application

2,163 views

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,163
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Lab 5b) create a java server faces application

  1. 1. 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.
  2. 2. Instructor Exercises Guide 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 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  3. 3. V4.1 Instructor Exercises Guide 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 © Copyright IBM Corp. 2004, 2007 Exercise 11. Create a JavaServer Faces Application 11-3 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  4. 4. Instructor Exercises Guide 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. 11-4 Developing Web Applications © Copyright IBM Corp. 2004, 2007 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  5. 5. V4.1 Instructor Exercises Guide 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. © Copyright IBM Corp. 2004, 2007 Exercise 11. Create a JavaServer Faces Application 11-5 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  6. 6. Instructor Exercises Guide 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. 11-6 Developing Web Applications © Copyright IBM Corp. 2004, 2007 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  7. 7. V4.1 Instructor Exercises Guide 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. © Copyright IBM Corp. 2004, 2007 Exercise 11. Create a JavaServer Faces Application 11-7 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  8. 8. Instructor Exercises Guide 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. 11-8 Developing Web Applications © Copyright IBM Corp. 2004, 2007 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  9. 9. V4.1 Instructor Exercises Guide 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. © Copyright IBM Corp. 2004, 2007 Exercise 11. Create a JavaServer Faces Application 11-9 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  10. 10. Instructor Exercises Guide __ 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. 11-10 Developing Web Applications © Copyright IBM Corp. 2004, 2007 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  11. 11. V4.1 Instructor Exercises Guide 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. © Copyright IBM Corp. 2004, 2007 Exercise 11. Create a JavaServer Faces Application 11-11 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  12. 12. Instructor Exercises Guide __ 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. 11-12 Developing Web Applications © Copyright IBM Corp. 2004, 2007 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  13. 13. V4.1 Instructor Exercises Guide 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. __ b. In the h:inputText tab, enter the following information. • Id: lastName • Width: 20 (characters) • Format: String __ c. Still in Properties view, switch to the Validation tab. __ 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. __ b. In the h:inputText tab, enter the following information. • Id: email • Width: 30 (characters) • Format: String __ c. Still in Properties view, switch to the Validation tab. © Copyright IBM Corp. 2004, 2007 Exercise 11. Create a JavaServer Faces Application 11-13 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  14. 14. Instructor Exercises Guide __ 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 • Width: 20 (characters) __ 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. 11-14 Developing Web Applications © Copyright IBM Corp. 2004, 2007 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  15. 15. V4.1 Instructor Exercises Guide 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. © Copyright IBM Corp. 2004, 2007 Exercise 11. Create a JavaServer Faces Application 11-15 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  16. 16. Instructor Exercises Guide __ 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. 11-16 Developing Web Applications © Copyright IBM Corp. 2004, 2007 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  17. 17. V4.1 Instructor Exercises Guide 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. © Copyright IBM Corp. 2004, 2007 Exercise 11. Create a JavaServer Faces Application 11-17 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  18. 18. Instructor Exercises Guide __ 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. 11-18 Developing Web Applications © Copyright IBM Corp. 2004, 2007 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  19. 19. V4.1 Instructor Exercises Guide 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. © Copyright IBM Corp. 2004, 2007 Exercise 11. Create a JavaServer Faces Application 11-19 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  20. 20. Instructor Exercises Guide __ 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. 11-20 Developing Web Applications © Copyright IBM Corp. 2004, 2007 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  21. 21. V4.1 Instructor Exercises Guide 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. © Copyright IBM Corp. 2004, 2007 Exercise 11. Create a JavaServer Faces Application 11-21 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  22. 22. Instructor Exercises Guide 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. 11-22 Developing Web Applications © Copyright IBM Corp. 2004, 2007 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  23. 23. V4.1 Instructor Exercises Guide 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.) © Copyright IBM Corp. 2004, 2007 Exercise 11. Create a JavaServer Faces Application 11-23 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  24. 24. Instructor Exercises Guide - 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. 11-24 Developing Web Applications © Copyright IBM Corp. 2004, 2007 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  25. 25. V4.1 Instructor Exercises Guide 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. © Copyright IBM Corp. 2004, 2007 Exercise 11. Create a JavaServer Faces Application 11-25 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  26. 26. Instructor Exercises Guide __ 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. 11-26 Developing Web Applications © Copyright IBM Corp. 2004, 2007 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  27. 27. V4.1 Instructor Exercises Guide 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) © Copyright IBM Corp. 2004, 2007 Exercise 11. Create a JavaServer Faces Application 11-27 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  28. 28. Instructor Exercises Guide - Label column: Error Message:. __ c. Click Finish. __ d. Save your changes and close registerFailure.jsp. 11-28 Developing Web Applications © Copyright IBM Corp. 2004, 2007 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  29. 29. V4.1 Instructor Exercises Guide 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. © Copyright IBM Corp. 2004, 2007 Exercise 11. Create a JavaServer Faces Application 11-29 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  30. 30. Instructor Exercises Guide • 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. 11-30 Developing Web Applications © Copyright IBM Corp. 2004, 2007 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  31. 31. V4.1 Instructor Exercises Guide 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. © Copyright IBM Corp. 2004, 2007 Exercise 11. Create a JavaServer Faces Application 11-31 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  32. 32. Instructor Exercises Guide 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. 11-32 Developing Web Applications © Copyright IBM Corp. 2004, 2007 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  33. 33. V4.1 Instructor Exercises Guide 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). © Copyright IBM Corp. 2004, 2007 Exercise 11. Create a JavaServer Faces Application 11-33 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  34. 34. Instructor Exercises Guide __ 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. 11-34 Developing Web Applications © Copyright IBM Corp. 2004, 2007 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  35. 35. V4.1 Instructor Exercises Guide 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. © Copyright IBM Corp. 2004, 2007 Exercise 11. Create a JavaServer Faces Application 11-35 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  36. 36. Instructor Exercises Guide 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. 11-36 Developing Web Applications © Copyright IBM Corp. 2004, 2007 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  37. 37. V4.1 Instructor Exercises Guide 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. © Copyright IBM Corp. 2004, 2007 Exercise 11. Create a JavaServer Faces Application 11-37 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  38. 38. Instructor Exercises Guide __ 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. 11-38 Developing Web Applications © Copyright IBM Corp. 2004, 2007 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  39. 39. V4.1 Instructor Exercises Guide 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. © Copyright IBM Corp. 2004, 2007 Exercise 11. Create a JavaServer Faces Application 11-39 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  40. 40. Instructor Exercises Guide __ 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. 11-40 Developing Web Applications © Copyright IBM Corp. 2004, 2007 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  41. 41. V4.1 Instructor Exercises Guide 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. © Copyright IBM Corp. 2004, 2007 Exercise 11. Create a JavaServer Faces Application 11-41 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  42. 42. Instructor Exercises Guide __ 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. 11-42 Developing Web Applications © Copyright IBM Corp. 2004, 2007 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
  43. 43. V4.1 Instructor Exercises Guide 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 © Copyright IBM Corp. 2004, 2007 Exercise 11. Create a JavaServer Faces Application 11-43 Course materials may not be reproduced in whole or in part without the prior written permission of IBM.

×