|
|
[an error occurred while processing this directive]
|
|
|
 |
introduction |
|
|
|
Since Java Server Pages (JSP) are growing in popularity, I would like to show you how easy it is to implement a JavaScript-based validation framework using JSP. This article focuses on JSP architecture and implementation options.
A major goal of JSP is to separate presentation from business rules. This allows Web designers who don't necessarily know Java or JavaScript programming to easily create JSP. To fulfill this goal, a Model-View-Controller (MVC) design pattern is recommended for most JSP-based applications. A typical MVC framework, such as Struts from the Apache Group, implements the business logic in Java Beans, JSP custom tags, or both.
The JSP JavaScript framework follows the same approach. Its goal is to provide Web designers with a set of generic JavaScript functions that can be easily applied to every JSP. All the validation functions, or business rules, are stored in a separate JavaScript file for easy manageability. Web designers only need to do two things in the JSP:
- register the validation fields
- register the buttons that invoke the validation
Users don't need to know how the fields are validated because the framework validates the required fields using several standard data validation functions such as integer, number and date. The user can extend the framework by writing additional validation functions in the JavaScript file.
|
|
|
JSP Include File |
|
|
|
Listing 1 shows a simple JSP page that utilizes the JavaScript framework.
Listing 1: Simple JSP page utilizing the JavaScript framework
<%@ page import="com.jsframework.*" errorPage="error.jsp"%>
<html>
<head>
<title>Sample JavaScript JSP</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<LINK REL="stylesheet" HREF="/jsp/jspframework.css">
<SCRIPT LANGUAGE="JavaScript" SRC="/jsp/jspframework.js"></SCRIPT>
<SCRIPT>
addVFields('ITEM_DESC','Item Description',true, 'STRING');
addVFields('QTY','Quantity',false, 'INTEGER');
addVFields('ORDER_DATE','Order Date',true, 'DATE');
addButtons('Save',true, true, 'Save it');
</SCRIPT>
</head>
<body>
<p>
<table width="75%" border="0">
<form name="framework" action="/framework" method="post">
<table width="75%" border="0">
<tr><td CLASS=required_label width="23%">Item Description:</td>
<td width="25%"><input type="text" name="ITEM_DESC" value=""></td>
</tr>
<tr><td CLASS=required_label width="23%">Quantity:</td>
<td width="25%"><input type="text" name="QTY" value=""></td>
</tr>
<tr><td CLASS=required_label width="23%">Order Date:</td>
<td width="25%"><input type="text" name="ORDER_DATE" value=""></td>
</tr>
</table>
<p>
<input type="Button" name="Save" value="Save" onClick="jsButtonSubmit('Save','do-add');">
</p>
</form>
</body>
</html>
As seen in Listing 1, the JavaScript file is referenced with:
<SCRIPT LANGUAGE="JavaScript" SRC="/jsp/framework.js"></SCRIPT>
If this syntax is too difficult, it can be put it into a separate JSP file. The JSP file can be included using a JSP include directive like:
<%@ include file="/jsp/head_inc.jsp"%>
This directive normally stores the common html tags such as the meta tag, the referencing of the Cascading Style Sheet (CSS), and the JavaScipt file (JS) in an include file. Following is a sample include file:
Listing 2: JSP include file
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<LINK REL="stylesheet" HREF="/jsp/jspframework.css">
<SCRIPT LANGUAGE="JavaScript" SRC="/jsp/jspframework.js"></SCRIPT>
If this include directive is still too hard, a custom tag that encapsulates Listing 2 can be created as follows:
<jsframework:head_inc/>
Remember that this is a framework and not a canned approach, so be creative.
|
|
|
Validation Field Registration |
|
|
|
Validation fields are registered using the addVFields function in the JavaScript framework. Its signature is addVFields (fieldObj, fieldLabel, isRequired, dataType) where:
- "fieldObject" is the name of the field (input tag) to be validated
- "fieldLabel" is the label of the field to be displayed in the error message box
- "isRequired" indicates whether the control is a required field
- "dataType" is the data type of the control
For example, addVFields('ITEM_DESC','Item Description',true, 'STRING') tells the framework to validate the input field 'ITEM_DESC', which is a required field with a data type 'STRING.' If the validation fails, a JavaScript error message box is displayed (Figure 1).
Figure 1: JavaScript error message box
Details about how the registration works can be found in the attached jspframework.js file. Basically, the addVFields function stores the validation fields along with the supplied information in an array of objects. These fields are validated based on their required flags and data types upon submission.
|
|
|
Button Registration |
|
|
|
The button used to invoke the validation, confirmation, or both is registered with the JavaScript framework by calling the addButtons function. The signature is addButtons(btnName, isValidate, isConfirm, message) where:
- "btnName" is the name of the button
- "isValidate" indicates whether the button invokes the validation functions
- "isConfirm" indicates if the submit action needs to be confirmed by the user
- "message" is the message for the confirmation message box
For example, addButtons('Save',true, true, 'Save it') tells the framework to validate all registered fields. If field validation fails, a JavaScript error message box is displayed (Figure 1). If all registered fields pass validation, the user's action is confirmed with a JavaScript confirmation box (Figure2).
Figure 2: JavaScript confirmation box
|
|
|
jsButtonSubmit Function |
|
|
|
Once the validation fields and buttons are registered, the submit action must be captured so that the JavaScript framework can perform the validation and confirmation. The following code indicates how the button is defined in the JSP:
<input type="button" name="Save" value="Save" onClick="jsButtonSubmit('Save');">
Notice that the input type is "button" instead of "submit." The "button" input type does not automatically cause a submit action. The JavaScript determines the action. In this case, it calls the jsButtonSubmit function when the user clicks the button. Once again, if this syntax is too difficult, a custom tag like the one below can be created.
<jsframework:button name="save" value="Save"/>
Listing 3 indicates the source code of the jsButtonSubmit function. The code's first action is to check whether the button is registered for validation. If it is, then it calls the function pageValidate(), which validates the fields that were registered in the header tag using the addVFields function. If any of the fields fail validation, an error message is displayed and the code returns false. If this happens, the jsButtonSubmit simply returns to cancel the submit action. If the field validation passes, the jsButtonSubmit confirms the button's registration and submits the form after the user confirms the actions.
Listing 3: jsButtonSubmit function
function jsButtonSubmit(name) {
if (btnList[name].isValidate) // if the button invokes validation
if (!pageValidate())//validate the registered fields
return; //cancel the submit if validation failed
if (btnList[name].isConfirm) // if the button needs confirmation
if (!confirm("Are you sure you want to " + btnList[name].Message + " ?")) //call the confirmation function
return; // cancel the submit if user did not confirm
document.forms[0].submit(); //submit the form
}
|
|
|
summary |
|
|
|
|
This JavaScript framework has been used to expedite several projects. It is an effective and timesaving tool that does not require users to understand its detailed underpinnings. Simply follow the instructions and it works. This same thing can be achieved with JSP by putting together a framework that is effective but does not require a Java guru to program it. Hopefully this article gives you some insight into creating effective JSP applications. If you'd like to get started, the source code for the jspframework.js can be downloaded from here.
|
|
|
|
|
|
Introduction
