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 Web Design & Development

CS-506

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

-->

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 Umair© 2006, All Rights Reserved

-2-

Handout 44 Web Design & Development

CS-506

Client Side Validation Example

Name:

Age:

------------------

Umair© 2006, All Rights Reserved

-3-

Handout 44 Web Design & Development

CS-506

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

Umair© 2006, All Rights Reserved

-4-

Handout 44 Web Design & Development

CS-506

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

Some custom JavaServer Faces components are

Umair© 2006, All Rights Reserved

-5-

Handout 44 Web Design & Development

CS-506

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

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

Umair© 2006, All Rights Reserved

-6-

Handout 44 Web Design & Development

CS-506

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: 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.

----------------

Umair© 2006, All Rights Reserved

-9-

Handout 44 Web Design & Development

CS-506

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 -