Lecture 44

Handout 44
Web Design & Development CS-506
Lecture 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.
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
Umair© 2006, All Rights Reserved -1-

Handout 44
The code that is used to generate this page is given below:
<HTML>
<HEAD>
<!— start of scripting code and mentioning type -->

<SCRIPT TYPE = "text/javascript">
<!— defining a function that receives form’s reference, defined

inside the body and returns false if any requirement violated
-->
function validateForm(thisform)
{
<!— checking the value of the name field, if it is left empty
then displaying a message
-->
if (thisform.name.value == null || thisform.name.value == "")
{
alert("Username is required");
return false;
}
<!— if value of age is negative, displaying a message -->

if (thisform.age.value < 0 )
{
alert("Age can't be negative");
return false;
}
} // end of function
</SCRIPT> <!—end of script-- >

</HEAD>

Handout 44
<BODY>
<!— validateForm method is called and specified as a value of

onsubmit value, if this method returns false, the user remains
on the same page -->
<FORM method="post" onsubmit="return validateForm(this)"
action = “greeting.jsp” >
<h2> Client Side Validation Example </h2>
<BR/>
Name: <INPUT type="text" name="name" size="30" />
<BR/> <BR/>
Age: <INPUT type="text" name="age" size="30" />
<BR/> <BR/>
<INPUT type="submit" value="Submit">
</FORM>
</BODY>
</HTML>
------------------

Handout 44
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 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

Handout 44
JSF UI Components
Some of the standard JavaServer Faces components are shown below:
Some custom JavaServer Faces components are

Handout 44
And some open course JavaServer Faces components are also available like:
And some third-party JavaServer Faces components are also available:

Handout 44
JSF Events Handling

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.
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 String value 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.

Handout 44
JSF Validators
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.
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>

Handout 44
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.
----------------

Handout 44
References:
Java A Lab Course by Umair Javed

Intrduction to JavaServer Faces by Sun
http://java.sun.com
JavaServer Faces Programming by Kumiawan
Umair© 2006, All Rights Reserved - 10 -

Lecture 44

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lecture 44

Uploaded by

Copyright:

Available Formats

Handout 44

Web Design & Development CS-506

Client Side Validation

Client Side Validation

Why is Client Side Validation Good?

Code Example: Form Validation using JavaScript

Umair© 2006, All Rights Reserved -1-

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

<!— start of scripting code and mentioning type -->

<!— defining a function that receives form’s reference, defined

<!— if value of age is negative, displaying a message -->

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

Umair© 2006, All Rights Reserved -2-

<!— validateForm method is called and specified as a value of

<h2> Client Side Validation Example </h2>

Umair© 2006, All Rights Reserved -3-

JavaServer Faces (JSF)

Different existing frameworks

Umair© 2006, All Rights Reserved -4-

Some of the standard JavaServer Faces components are shown below:

Some custom JavaServer Faces components are

Umair© 2006, All Rights Reserved -5-

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

Umair© 2006, All Rights Reserved -6-

JSF Events Handling

A code snippet of a Customer class is given below:

Example Code: Hello User

Umair© 2006, All Rights Reserved -7-

Example Code: Hello User

JSF – Managed Bean-Intro

 Use the declarative model

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

Umair© 2006, All Rights Reserved -8-

JSF – Value Binding

JSF – Method Binding

For example, binding an event handler to a method

Umair© 2006, All Rights Reserved -9-

 Java A Lab Course by Umair Javed

Umair© 2006, All Rights Reserved - 10 -

You might also like

Use the declarative model

Java A Lab Course by Umair Javed