RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Put Some Ajax4JSF Magic into Data Validation : Page 2

Apply an open source framework that gives you the functionality of AJAX and the best of JSF to validate data entries dynamically on the server side.

Setting the Stage for Dynamic Validation
You can employ JSF UI components and the Ajax4JSF framework to develop an application that performs dynamic validation as a user enters data. The form acts as an interface for creating catalog entries that are stored in a database table. Each catalog entry has a unique field, called Catalog ID, and for each record there are fields for journal title, publisher, edition, article title, and author.

You can use the AJAX web technique to verify dynamically whether or not an ID value is valid. To perform this kind of validation without AJAX, the complete form would need to be posted to the server to check if a specific ID value exists. If the specified ID value is already in the database, and therefore "invalid" to use as a new ID value, the form would have to be resubmitted with another ID value.

By using AJAX the ID value can be "validated" dynamically as the value is typed in the Catalog ID field. In the example discussed here, catalog records are stored in an Oracle database; therefore, be sure to install Oracle Database 10g—including the sample schema—and create a database instance called ORCL, if you are following along. You can use this SQL script create a database table:

  PRIMARY KEY, Journal VARCHAR(25), Publisher VARCHAR(25), 
  Edition VARCHAR(25), Title Varchar(255), Author Varchar(25));

INSERT INTO OE.Catalog VALUES('catalog1', 'Oracle Magazine', 
  'Oracle Publishing', 'July-August 2006', 
  'Evolving Grid Management', 'David Baum');

INSERT INTO OE.Catalog VALUES('catalog2', 'Oracle Magazine', 
  'Oracle Publishing', 'July-August 2005',
  'Tuning Undo Tablespace', 'Kimberly Floss');
Installing JDeveloper is also recommended. This version supports JSF 1.1. Then download and extract the Ajax4JSF binary distribution ZIP file: ajax4jsf-1.0.6-binary.zip.

Now you are set to create a JSF application and use the Ajax4JSF framework to add AJAX functionality to it. Your JSF application will consist of a simple input form for a catalog record. As mentioned previously, the form requires a unique Catalog ID field, and the value it receives is validated dynamically on the server. A message displays to indicate the validity status of the ID value. Begin by creating a new application that will be added to the Applications Navigator along with a project:

  1. Select File-->New to create a JDeveloper application in the New Gallery dialog.
  2. Select the General node in the Categories pane, select Application in the Items pane, and click OK.
  3. Specify an application name, and click OK.
  4. Specify a project name.

Next, you'll need to create a JSF page:

  1. Select File-->New, and select Web Tier-->JSF.
  2. Select JSF JSP, and click OK.
  3. Click Next in the Create JSF JSP Wizard.
  4. Select J2EE 1.4 in the Web Application frame, and click Next.
  5. Specify a file name, input.jsp, and click Next.
  6. Select Automatically Expose UI Components in a New Managed Bean in the Component Binding frame, and click Next.
  7. Click Next in the next frame, as the JSF Core 1.0 and JSF HTML 1.0 libraries are selected by default.
  8. Select the default HTML Options, and click Next.
  9. Click Finish.
Completing this procedure adds the input.jsp file to the AjaxJSF project.

Next, add a JSF JSP page named catalog.jsp that is to be displayed if a catalog entry is created without an error. Also, create a JSF JSP page named error.jsp that is to be displayed if an error does occur as an entry is being created. Be sure to select the default options in the Create JSF JSP Wizard for both catalog.jsp and error.jsp.

Figure 1. Project Libraries: Project libraries for the Ajax4JSF project are available in the Ajax4JSF binary distribution.

Figure 2. Structure: The Applications Navigator area shows the hierarchical directory structure of the AjaxJSF application.

Select the Do Not Automatically Expose UI Components in a Managed Bean option in the Component Binding frame. You will also need to add the lib/Ajax4jsf.jar and lib/oscache-2.3.2.jar files from the Ajax4JSF binary distribution to the project. The project libraries for the Ajax4JSF project are shown in Figure 1.

Copy the JAR files ajax4jsf.jar and oscache-2.3.2.jar from the lib directory of the Ajax4JSF binary distribution to the WEB-INF/lib directory of the AjaxJSF application. The directory structure of the AjaxJSF application is shown in Figure 2.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date