JAVA: Client Side Validation & JavaServer Faces (JSF)

<< JAVA: JavaServer Pages Standard Tag Library (JSTL)

JAVA: JavaServer Faces >>

Web Design & Development CS506

Lesson 44

Client Side Validation & JavaServer Faces (JSF)

In this handout, we'll talk about client side validation and also learn about growing in demand Java

technology i.e. JSF. First start with client side validation

Client Side Validation

Forms validation on the client-side is essential --it saves time and bandwidth, and gives you more options

to point out to the user where they've gone wrong in filling out the form. Furthermore, the browser doesn't

have to make a round-trip to the server to perform routine client-side tasks. For example, you wouldn't want

to send the browser to the server to validate that all of the required fields on a form were filled out.

Any scripting language can be used to achieve the said objective. However, JavaScript and VBScript are

two popular options

Why is Client Side Validation Good?

There are two good reasons to use client-side validation:

It's a fast form of validation: if something's wrong, the alarm is triggered upon submission of the

form.

You can safely display only one error at a time and focus on the wrong field, to help ensure that the

user correctly fills in all the details you need.

Code Example: Form Validation using JavaScript

For example on the following form, we want to make sure that text filed for name should not be left empty

and age field does not contain any negative value. To accomplish this we'll use JavaScript.

If user forgets to provide name and/or enters a negative value, a message would be displayed to the user

that indicates what was went wrong? However, if user conforms to requirements, he/she would be taken to

another page that displays a greeting message.

351

Web Design & Development CS506

Note: In this example, JavaScript semantics isn't discussed over here as I am assuming that you might be

familiar with some scripting language. Otherwise, www.w3schools.com is an excellent resource to

learn about scripting languages

The code that is used to generate this page is given below:

<HTML>

<HEAD>

<!-- defining a function that receives form's reference, defined inside the body and returns

false if

any requirement violated -->

function validateForm(thisform)

{

if (thisform.name.value == null || thisform.name.value == "")

{

alert("Username is required");

return false;

}

if (thisform.age.value < 0 )

{

alert("Age can't be negative");

return false;

}

} // end of function

</SCRIPT> <!--end of script-- >

</HEAD>

<!-- validateForm method is called and specified as a value of onsubmit value, if this method returns

false, the user remains on the same page -->

<h2> Client Side Validation Example </h2>

<BR/>

Name: <INPUT type="text" name="name" size="30" />

Age: <INPUT type="text" name="age" size="30" />

</FORM>

</BODY>

</HTML>

JavaServer Faces (JSF)

JSF technology simplifies building the user interface for web applications. It does this by

providing a higher-level framework for working with your web applications. Some distinct

352

Web Design & Development CS506

features will be discussed provided by this technology. To begin with, have a look on some

popular existing frameworks

Different existing frameworks

Struts

A popular open source JSP-based Web application framework helps in defining a structured

programming model (MVC), also validation framework and reduces tedious coding but...

Adds complexity and doesn't provide UI tags

Very Java programmer centric

Tapestry

Another popular framework that is extensively used in the industry is Tapestry. It has

almost similar sort of problems as with Struts.

JavaServer Faces

A framework which provides solutions for:

Representing UI components

Managing their state

Handling events

Input validation

Data binding

Automatic conversion

Defining page navigation

Supporting internationalization and accessibility.

If you are familiar with Struts and Swing (the standard Java user interface framework for desktop

applications), think of JavaServer Faces as a combination of those two frameworks. Like Swing,

JSF provides a rich component model that eases event handling and component rendering; and

like Struts, JSF provides Web application lifecycle management through a controller servlet

JSF UI Components

Some of the standard JavaServer Faces components are shown below:

Some custom JavaServer Faces components are

353

Web Design & Development CS506

And some open course JavaServer Faces components are also available like:

And some third-party JavaServer Faces components are also available:

A JSF application works by processing events triggered by the JSF components on the pages. These events

are caused by user actions. For example, when the user clicks a button, the button triggers an event. You,

the JSF programmer, decide what the JSF application will do when a particular event is fired. You do this

by writing event listeners. In other words, a JSF application is event-driven

354

Web Design & Development CS506

For example, if you write a JSF code to create a button, you will write:

<h:commandButton value="Login"

actionListener="#{customer.loginActionListener}"

action="#{customer.login}" />

The value attribute specifies the text that appeared on the face of a button, the actionListener attributes

specifies to call the loginActionListener method written somewhere in a Customer class if an event is

triggered and on which to go next, is decided by the login method of Customer class and given as a value of

action attribute. The method specified in action attribute should return a String value as the returned

Stringvalue is used in page navigation.

Note: Many IDE provides visual support for JSF so you can drag and drop components instead of writing

tedious coding for defining JSF components as shown above. Sun Studio Creator® is a free open

source IDE that provides visual support for JSF and can be downloaded form Sun site. The code

examples are also built using this IDE.

A code snippet of a Customer class is given below:

class Customer {

public void loginActionListener(ActionEvent e) {

..................... }

public String login() {

return "OK";

}

Example Code: Hello User

The example code ("hello user 1") is given along with the handout. It is strongly advised that you must see

the lecture video in order to learn how this example is built.

User will provide a name in the text field and his/her name after appending "hello" to it, would be

displayed on the same page.

Validators make input validation simple and save developers hours of programming. JSF provides a set of

validator classes for validating input values entered into input components. Alternatively, you can write

your own validator if none of the standard validators suits your needs. Some built-in validators are:

DoubleRangeValidator

Any numeric type, between specified maximum and minimum values

LongRangeValidator

Any numeric type convertible to long, between specified maximum and minimum values

LengthValidator

Ensures that the length of a component's local value falls into a certain range (between

minimum

& maximum). The value must be of String type.

Example Code: Hello User

The example code ("hello user 2") is given along with the handout. You can open it using Sun Studio

Creator IDE. It is strongly advised that you must see the lecture video in order to learn how this example is

built.

It is actually a modified version of the last example. This time, we'll make sure that user couldn't left blank

the name field and must enter a name between ranges of 2 to 10 characters. If any condition fails, an

appropriate message would be displayed.

355

Web Design & Development CS506

JSF Managed Bean-Intro

These are JavaBeans defined in the configuration file and are used to hold the data from JSF components.

Managed beans represent the data model, and are passed between business logic and pages. Some other

salient features are:

Use the declarative model

Entry point into the model and event handlers

Can have beans with various states

Here is an example of a managed-bean element whose scope is session, meaning that an instance of this

bean is created at the beginning of a user session.

<managed-bean>

<managed-bean-name>myBean</managed-bean-name>

<managed-bean-class>myPackage.MyBean</managed-bean-class>

<managed-bean-scope>session</managed-bean-scope> </managed-bean>

JSF Value Binding

Value binding expressions can be used inside of JSF components to:

Automatically instantiate a JavaBean and place it in the request or session scope.

Override the JavaBean's default values through its accessor methods.

Quickly retrieve Map, List, and array contents from a JavaBean.

Synchronize form contents with value objects across a number of requests.

The syntax of binding expressions is based on the JavaServer Pages (JSP) 2.0 Expression Language. In

JSP, expressions are delimited with "${}", but in JSF they are delimited with "#{}".

JSF Method Binding

Unlike a value binding, a method binding does not represent an accessor method. Instead, a method binding

represents an activation method.

For example, binding an event handler to a method

<h:commandButton ......

actionListener="#{customer.loginActionListener}"

......... />

JSF Navigation

Page navigation determines the control flow of a Web application. JSF provides a default navigational

handler and this behavior can be configured in configuration. However, you can do it visually in most tools

like Sun Studio Creator

Note: We have quickly breezed through the JSF technology essentials due to shortage of time. You must

explore it by yourself to excel on it. You can find the resources in the last handout to acquire further skills.

References:

Java A Lab Course by Umair Javed

Intrduction to JavaServer Faces by Sun

http://java.sun.com

JavaServer Faces Programming by Kumiawan

356

Table of Contents: