ZeePedia buy college essays online

Web Design and Development

<<< Previous JAVA: Client Side Validation & JavaServer Faces (JSF) Next >>>
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
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.
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:
<!-- 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-- >
<!-- 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>
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">
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
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
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
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
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
Web Design & Development ­ CS506
For example, if you write a JSF code to create a button, you will write:
<h:commandButton value="Login"
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:
Any numeric type, between specified maximum and minimum values
Any numeric type convertible to long, between specified maximum and minimum values
Ensures that the length of a component's local value falls into a certain range (between
& 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
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.
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-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 ......
......... />
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.
Java A Lab Course by Umair Javed
Intrduction to JavaServer Faces by Sun
JavaServer Faces Programming by Kumiawan