JavaBeat » AJAX

Using JSON forms with AJAX in Lift Framework

krishnas — Sat, 07 May 2011 00:28:58 +0000

This article is based on Lift in Action, to be published on July 2011. It is being reproduced here by permission from Manning Publications. Manning publishes MEAP (Manning Early Access Program,) ebooks and pbooks. MEAPs are sold exclusively through Manning.com. All print book purchases include an ebook free of charge. When mobile formats become available all customers will be contacted and upgraded. Visit Manning.com for more information.

Using JSON forms with AJAX

Introduction

Lift has several different ways of interacting with forms and AJAX, and you can quite easily configure Lift to create an AJAX form using SHtml. SHtml contains many useful methods and should be your main port of call for all of the out-of-the-box AJAX functionality. One of the other interesting facilities that this object provides is the ability to create forms that are serialized and sent to the server using JSON. Listing 1 details an example of using a JSON form.

Listing 1 Implementing JSON Form

import scala.xml.NodeSeq
	import net.liftweb.util.JsonCmd
	import net.liftweb.util.Helpers._
	import net.liftweb.http.{SHtml,JsonHandler}
	import net.liftweb.http.js.{JsCmd}
	import net.liftweb.http.js.JsCmds.{SetHtml,Script}
	class JsonForm {
		def head = Script(json.jsCmd) 							#1
		def show = {
			"#form" #>((ns: NodeSeq) => SHtml.jsonForm(json, ns)) 			#2
		}
		object json extends JsonHandler { 						#3
			def apply(in: Any): JsCmd =
			SetHtml("json_result", in match {
				case JsonCmd("processForm", _, params: Map[String, Any], _) => 	#4
				Publisher: {params("publisher")}, 				#4
					Title: {params("title")}				#4
				case x =>
					Unknown issue handling JSON: {x}
			})
		}
	}
	#1 Registers JSON serialize function
	#2 JSON form wrapper
	#3 Custom JSON handler
	#4 Parameter handling

Here, you can see that this is a basic class with a few snippet methods. #1 details a snippet that simply adds a JavaScript element to the page. Typically, you would call this method from the tag within your template so that the head is merged into the main page template. The point of this is that the JsonHandler implementation— in this instance the JSON object—contains JavaScript that registers a function to serialize the passed object to JSON. #2 is a snippet method setup that simply binds to the jsonForm method passing the JsonHandler instance and the passed NodeSeq. This generates a

element that will wrap the fields in your template. A point of note here is that the fields in your template won’t have randomized names because they are not generated with SHtml helpers. They are “raw” from the template so, from a security perspective, this is important to keep in mind.

Listing 2 shows the full contents of the template. Section #3 is the implementation of the JsonHanlder, but specifically the point of interest is #4. This defines the handling of parameters passed from the browser. As params is a Map, you must be careful to request only the keys that actually exist because this could throw a runtime exception if the key you are expecting does not exist.

Listing 2 Template implementation for JSON form

You need to call the head method from your template so the rendered output includes this function.

Summary

We covered how you can leverage the SHtml AJAX builder methods to create page elements that trigger server-side actions. The powerful thing about Lift‘s AJAX system is that you can capture the logic to be executed upon making the specific callback within a Scala function.

Asynchronous File Upload using Ajax, jQuery Progress Bar and Java

krishnas — Sun, 20 Mar 2011 13:33:44 +0000

Connect to us ( @twitter | @facebook )

Introduction

Download jQuery File Upload Sample Code

Source Code for jQuery File Upload

In this tutorial you will learn about Asynchronous File Upload using Ajax, jQuery Progress Bar and Java

The image below shows a screenshot of the file upload that we are going to learn in this tutorial.

Let us see what all is needed to develop this application. We shall create a web application which has the following files.

FileUpload.html (The html/jsp file where the file upload happens)
jQuery related script files(We are going to discuss about this in detail later)
FileUploadListener.java(The listener file which listens to the file upload)
FileUploadListener.java (The servlet file which takes care of the upload process)
web.xml

The image below shows the screenshot of the file Structure. We have used netBeans IDE to develop the web Application.

File Structure

Let us try to understand the webstructure.We have a web folder which has FileUpload.html.The source packages has a java package “fileupload” which has two java files FileUploadListener.java and FileUploadServlet.java

There is another folder called “scripts” which has jquery.js which is used for the core javascript and Ajax features of jQuery library.
Apart from this we also have ui.core.js and ui.progressbar.js. These files are necessary for constructing a progress bar using jQuery.You can download the latest version of jQuery from Download jQuery

The jquery progress bar can be downloaded from Download jQuery UI

Now let us add in code into FileUpload.html
We shall be adding script , style and html body sections to the html files. Lets deal with each one of these sections one after the other.

Please find below the code for the html body section.

Html Body Code


		
			Sample File Upload
			
				
					 File to be uploaded

Script Code

Add the following code to the script section.
The script code pasted below will import the various script files necessary for jQuery core functions, progress bar and Ajax.
After importing, we need to do the following tasks:

Add the progressbar to the page(The progress bar will be hidden on the load of the page and will be shown only when the file upload begins.)
Make an Ajax request to the java Servlet(Servlet code will be discussed later).The Java Servlet will take care of the file upload on the server.
The ajaxFunction() will take care of sending the xmlHttpRequest.
funcReadyStateChange() will be invoked soon after getting the output.It takes care of the collecting the servlet output which is in the form of XML.funcReadyStateChange()will also take care of:
- Parsing the response XML.
- Updating the progress bar value through updateProgressbar() function
- Update the page with the response.
The output xml will have details about the total number of bytes present in the file and the number of bytes uploaded.
Please note that the funcReadyState will make repetitive calls to ajaxFunction() and updateProgressBar() until the file is completely uploaded.Every request that is sent will get the recent most values of the “number of bytes that are uploaded” from the server.

Style Code

Now add the following code to the style section.

Listener Code

This listener will listen to the event of file upload and has a method called fileUpdate() which will be automatically invoked as and when there is an update on fileUpload.

package fileupload;
	import org.apache.commons.fileupload.ProgressListener;
	public class FileUploadListener implements ProgressListener{
		private volatile long bytesRead = 0L, contentLength = 0L, item = 0L;   
		public FileUploadListener() {
			super();
		}
 
		public void update(long aBytesRead, long aContentLength, int anItem) {
			bytesRead = aBytesRead;
			contentLength = aContentLength;
			item = anItem;
		}
 
		public long getBytesRead() {
			return bytesRead;
		}
 
		public long getContentLength() {
			return contentLength;
		}
 
		public long getItem() {
			return item;
		}
	}

Servlet Code

The servlet will get the information about the number of bytes read through the listener and will construct a response xml with tags “bytes-read” and “content-length” etc.

package fileupload;
 
	import javax.servlet.Servlet;
	import javax.servlet.http.HttpServlet;
	import java.io.*;
	import java.util.*;
	import javax.servlet.http.*;
	import org.apache.commons.fileupload.*;
	import javax.servlet.ServletException;
	import org.apache.commons.fileupload.disk.DiskFileItemFactory;
	import org.apache.commons.fileupload.servlet.ServletFileUpload;
 
	public class FileUploadServlet extends HttpServlet implements Servlet {
 
	    private static final long serialVersionUID = 2740693677625051632L;
 
	    public FileUploadServlet() {
	        super();
	    }
 
		protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	        PrintWriter out = response.getWriter();
		    HttpSession session = request.getSession();
	        FileUploadListener listener = null;
			StringBuffer buffy = new StringBuffer();
		    long bytesRead = 0, contentLength = 0;
 
	        if (session == null) {
	            return;
		    } else if (session != null) {
	            listener = (FileUploadListener) session.getAttribute("LISTENER");
 
		        if (listener == null) {
			        return;
	            } else {
		            bytesRead = listener.getBytesRead();
	                contentLength = listener.getContentLength();
		        }
	        }
 
		    response.setContentType("text/xml");
 
		    buffy.append("\n");
			buffy.append("\n");
	        buffy.append("\t" + bytesRead + "\n");
	        buffy.append("\t" + contentLength + "\n");
 
	        if (bytesRead == contentLength) {
	            buffy.append("\t\n");
		        session.setAttribute("LISTENER", null);
	        } else {
		        long percentComplete = ((100 * bytesRead) / contentLength);
	            buffy.append("\t" + percentComplete + "\n");
		    }
	        buffy.append("\n");
		    out.println(buffy.toString());
	        out.flush();
		    out.close();
	    }
 
		protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	        FileItemFactory factory = new DiskFileItemFactory();
		    ServletFileUpload upload = new ServletFileUpload(factory);
	        FileUploadListener listener = new FileUploadListener();
		    HttpSession session = request.getSession();
			session.setAttribute("LISTENER", listener);
	        upload.setProgressListener(listener);
		    List uploadedItems = null;
			FileItem fileItem = null;
	        String filePath = "c:\\temp";
 
		    try {
			    uploadedItems = upload.parseRequest(request);
	            Iterator i = uploadedItems.iterator();
 
		        while (i.hasNext()) {
			        fileItem = (FileItem) i.next();
				    if (fileItem.isFormField() == false) {
					    if (fileItem.getSize() > 0) {
						    File uploadedFile = null;
							String myFullFileName = fileItem.getName(), myFileName = "", slashType = (myFullFileName.lastIndexOf("\\") > 0) ? "\\" : "/";
	                        int startIndex = myFullFileName.lastIndexOf(slashType);
		                    myFileName = myFullFileName.substring(startIndex + 1, myFullFileName.length());
			                uploadedFile = new File(filePath, myFileName);
				            fileItem.write(uploadedFile);
					    }
	                }
		        }
			} catch (FileUploadException e) {
	            e.printStackTrace();
		    } catch (Exception e) {
			    e.printStackTrace();
	        }
		}
	}

web.xml

We need to declare the servlet and also the listener in web.xml.


		UploadServlet 
		fileupload.FileUploadServlet
	
	
		UploadServlet
		/example/FileUploadServlet
	
	
		fileupload.FileUploadListener

Conclusion

In this tutorial , we have seen how to upload a file when we have java on the server side.
We have also seen how to do the same using jQuery-Ajax and jQuery progress bar.

Using YUI to attach JavaScript event listeners

krishnas — Sat, 29 Jan 2011 15:26:39 +0000

Connect to us ( @twitter | @facebook )

Yahoo User Interface 2.X CookbookWelcome to Yahoo User Interface 2.x Cookbook. The Yahoo! User Interface (YUI) Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML, and AJAX. Although you can create stylish Internet applications by modifying its default components, even advanced users find it challenging to create impressive feature-rich Internet applications using YUI.

This book will help you learn how to use YUI 2.x to build richer, more interactive web applications that impress clients and wow your friends. It starts by explaining the core features of YUI 2.x, the utilities that the rest of the library depends on and that will make your life easier. It then explains how to build UI components and make AJAX requests using the YUI framework. Each recipe will cover the most common ways to use a component and how to configure it, and then explain any other features that may be available. We wrap things up by looking at some of the recent beta components and explain how to use them, and how they may be useful on your web application.

What This Book Covers

Chapter 1: Using YUI 2.x, teaches various techniques for including YUI into your project, and how to use the Get, Cookie, and JSON utilities.

Chapter 2: Using DOM and Selector Components, teaches how to use the DOM and Selector components to fetch and manipulate DOM elements.

Chapter 3: Using Event Component, teaches how to attach events to DOM elements and how to use the powerful custom event system to create your own events.

Chapter 4: Using Connection Component, teaches how to make AJAX requests with YUI and subscribe to related events.

Chapter 5: Using DataSource Component, teaches how to abstract away sources of data with a powerful and easy to use interface.

Chapter 6: Using Logger and YUI Test Components, teaches how to use YUI to log JavaScript and then how to test your JavaScript applications.

Chapter 7: Using Element and Button Components, teaches how to leverage Element to simplify working with DOM elements, and Button to simplify working with Button elements.

Chapter 8: Using Menu Component, teaches how to create and manage Menu objects.

Chapter 9: Using Animation Component, teaches how to use YUI to animate DOM elements.

Chapter 10: Using Drag and Drop Component, teaches how to use the Drag and Drop utility.

Chapter 11: Using Container Component, teaches all about the container stack and the various widgets that make use of it.

Chapter 12: Using DataTable Component, teaches how to use DataTable to build more useful and interactable tables.

Chapter 13: Using TreeView Component, teaches how to use TreeView to organize hierarchical data.

Chapter 14: Other Useful Components, teaches the basics about some of the other well established widgets, such as Autocomplete and Slider.

Chapter 15: Some Interesting Beta Components, teaches the basics about some of the latest widgets, such as Storage and Charts.

Using Event Component

In this chapter, we will cover:

Using YUI to attach JavaScript event listeners
Event normalization functions
Removing event listeners
Listening for key events
Using special YUI-only events
Using YUI helper functions
Using custom events
The simple way to add custom events to classes

In this chapter, you will learn how to use YUI to handle JavaScript events, what special events YUI has to improve the functionality of some JavaScript events, and how to write custom events for your own application.

Using YUI to attach JavaScript event listeners

When attaching events in JavaScript most browsers use the addEventListener function, but the developers of IE use a function called attachEvent. Legacy browsers do not support either function, but instead require developers to attach functions directly to element objects using the ‘on’ + eventName property (for example myElement.onclick=function(){…}).

Additionally, the execution context of event callback functions varies depending on how the event listener is attached. The Event component normalizes all the cross-browser issues, fixes the execution context of the callback function, and provides additional event improvements. This recipe will show how to attach JavaScript event listeners, using YUI.

How to do it…

Attach a click event to an element:

var myElement = YAHOO.util.Dom.get('myElementId');
	var fnCallback = function(e) {
		alert("myElementId was clicked");
	};
	YAHOO.util.Event.addListener(myElement, 'click', fnCallback);

Attach a click event to an element by its ID:

var fnCallback = function(e) {
		alert("myElementId was clicked");
	};
	YAHOO.util.Event.addListener('myElementId','click',fnCallback)

Attach a click event to several elements at once:

var ids = ["myElementId1", "myElementId2", "myElementId3"];
	var fnCallback = function(e) {
		var targ = YAHOO.util.Event.getTarget(e);
		alert(targ.id + " was clicked");
	};
	YAHOO.util.Event.addListener(ids, 'click', fnCallback);

When attaching event listeners, you can provide an object as the optional fourth argument, to be passed through as the second argument to the callback function:

var myElem = YAHOO.util.Dom.get('myElementId');
	var fnCallback = function(e, obj) {
		alert(obj);
	};
	var obj = "I was passed through.";
	YAHOO.util.Event.addListener(myElem,'click',fnCallback,obj);

When attaching event listeners, you can change the execution context of the callback function to the fourth argument, by passing true as the optional fi fth argument:

var myElement = YAHOO.util.Dom.get('myElementId');
	var fnCallback = function(e) {
		alert('My execution context was changed.');
	};
	var ctx = {
		/* some object to be the execution context of callback */
	};
	YAHOO.util.Event.addListener(
		myElement, 'click', fnCallback, ctx, true);

How it works…

The addListener function wraps the native event handling functions, normalizing the crossbrowser differences. When attaching events, YUI calls the correct browser specifi c function, or defaults to legacy event handlers. Before executing the callback function, the Event component must (in some browsers) fi nd the event object and adjust the execution context of the callback function. The callback function is normalized by wrapping it in a closure function that executes when the browser event fi res, thereby allowing YUI to correct the event, before actually executing the callback function.

In legacy browsers, which can only have one callback function per event type, YUI attaches a callback function that iterates through the listeners attached by the addListener function.

There’s more…

The addListener function returns true if the event listener is attached successfully and false otherwise.

If the element to listen on is not available when the addListener function is called, the function will poll the DOM and wait to attach the listener when the element becomes available.

Additionally, the Event component also keeps a list of all events that it has attached. This list is maintained to simplify removing events listeners, and so that all event listeners can be removed when the end-user leaves the page.

Find all events attached to an element:

var listeners = YAHOO.util.Event.getListeners('myElementId');
	for (var i=0,j=listeners.length; i
Find all events of a certain type attached to an element:
// only click listeners
	var listeners =
		YAHOO.util.Event.getListeners('myElementId', 'click');

		The garbage collector in JavaScript does not always do a good job cleaning up
		event handlers. When removing nodes from the DOM, remember to remove
		events you may have added as well.
The garbage collector in JavaScript does not always do a good job cleaning up event handlers. When removing nodes from the DOM, remember to remove events you may have added as well.
More on YAHOO.util.Event.addListener
The addListener function has been aliased by the shorter on function:
var myElement = YAHOO.util.Dom.get('myElementId');
	var fnCallback = function(e) {
		alert("myElementId was clicked");
	};
	YAHOO.util.Event.on(myElement, 'click', fnCallback);
By passing an object in as the optional fifth argument of addListener, instead of a Boolean, you can change the execution context of the callback to that object, while still passing in an another object as the optional fourth argument:
var myElement = YAHOO.util.Dom.get('myElementId');
	var fnCallback = function(e, obj) {
		// this executes in the context of 'ctx'
		alert(obj);
	};
	var obj = "I was passed through.";
	var ctx = {
		/* some object to be the execution context of callback */
	};
	YAHOO.util.Event.addListener(
		myElement,'click',fnCallback,obj, ctx);
Lastly, there is an optional Boolean value that can be provided as the sixth argument of addListener, which causes the callback to execute in the event capture phase, instead of the event bubbling phase. You probably won’t ever need to set this value to true, but if you want to learn more about JavaScript event phases see:
http://www.quirksmode.org/js/events_order.html
See also
Refer to Removing event listeners, to learn about how to remove event callbacks when they are not longer needed.
Event normalization functions
The event object, provided as the first argument of the callback function, contains a variety of values that you may need to use (such as the target element, character code, etc.). YUI provides a collection of static functions that normalizes the cross-browser variations of these values. Before trying to use these properties, you should read this recipe, as it walks you through each of those functions.
How to do it…
Fetch the normalized target element of an event:
var fnCallback = function(e) {
		var targetElement = YAHOO.util.Event.getTarget(e);
		alert(targetElement.id);
	};
	YAHOO.util.Event.on('myElementId', 'click', fnCallback);
Fetch the character code of a key event (also known as the key code):
var fnCallback = function(e) {
		var charCode = YAHOO.util.Event.getCharCode(e);
		alert(charCode);
	};
	YAHOO.util.Event.on('myElementId', 'keypress', fnCallback);
Fetch the x and y coordinates of a mouse event:
var fnCallback = function(e) {
		var x = YAHOO.util.Event.getPageX(e);
		var y = YAHOO.util.Event.getPageY(e);
		alert("x-position=" + x + " and x-position= " + y);
	};
	YAHOO.util.Event.on('myElementId', 'click', fnCallback);
Fetch both the x and y coordinates of a mouse event, using:
var fnCallback = function(e) {
		var point = YAHOO.util.Event.getXY(e);
		alert("x-position="+point[0]+" and x-position= "+point[1]);
	};
	YAHOO.util.Event.on('myElementId', 'click', fnCallback);
Fetch the normalized related target element of an event:
var fnCallback = function(e) {
		var targetElement = YAHOO.util.Event.getRelatedTarget(e);
		alert(targetElement.id);
	};
	YAHOO.util.Event.on('myElementId', 'click', fnCallback);
Fetch the normalized time of an event:
var fnCallback = function(e) {
		var time = YAHOO.util.Event.getTime(e);
		alert(time);
	};
	YAHOO.util.Event.on('myElementId', 'click', fnCallback);
Stop the default behavior, propagation (bubbling) of an event, or both:
var fnCallback = function(e) {
		// prevents the event from bubbling up to ancestors
		YAHOO.util.Event.stopPropagation(e);
		// prevents the event's default
		YAHOO.util.Event.preventDefault(e);
		// prevents the event's default behavior and bubbling
		YAHOO.util.Event.stopEvent(e);
	};
	YAHOO.util.Event.on('myElementId', 'click', fnCallback);
How it works…
All of these functions test to see if a value exists on the event for each cross-browser variation of a property. The functions then normalize those values and return them. The stopPropogation and preventDefault functions actually modify the equivalent cross-browser property of the event, and delegate the behavior to the browsers.
See also
Refer to Using YUI helper functions, for information on event delegation, which can be used to improve the performance of events.
Removing event listeners
As with attaching listeners, there are two browser variations for removing events and legacy browser considerations as well. Additionally, when using the native event removal functions, you must pass in exactly the same arguments as you passed to the native add event functions. YUI not only handles the cross-browser variations, but ensures that you pass the correct arguments when removing a function. This recipe shows several ways to remove event listeners from elements.
How to do it…
Remove a callback function directly, by passing in the exact same arguments you used when calling addListener:
YAHOO.util.Event.removeListener('myElementId', 'click',
		fnCallback);
Removing all events of a specific type does not require the arguments from addListener:
// removes all 'click' type events from 'myElementId'
	YAHOO.util.Event.removeListener('myElementId', 'click');
Remove all listeners from an element:
YAHOO.util.Event.purgeElement('myElementId');
Remove all listeners from an element and its descendant elements recursively:
YAHOO.util.Event.purgeElement('myElementId', true);
Remove all events of a specific type from an element and its descendant elements recursively:
// removes all 'click' type events
	YAHOO.util.Event.purgeElement('myElementId', true, 'click');

How it works…
In most cases YUI calls the native browser remove listener function, with the proper arguments from the internal array of listeners, and removes the listeners from its internal array. In legacy browsers, YUI simply deletes the function that was added to the event.
There’s more…
Like the addListener function, the removeListener functions can accept either an element object or the id attribute of an element as its fi rst parameter. If the element cannot be found, YUI fails silently.
To prevent memory leaks and improve site performance, YUI attaches an unload event listener, which removes all event listeners when the page unloads. When removing nodes from the DOM, you should call purgeElement on any element that might (or whose descendant elements might) have events attached to them.
Listening for key events
The native browser support for key events is identical to other events, except in addition to the other properties, the character code is attached to the event object. There are several browser variations to where the character code is stored and some value discrepancies. YUI handles these cross-browser issues, as well as adding the ability to test for key combinations (such as ‘ctrl’ plus another key), and a simplifi ed interface. This recipe explains how to listen for key events, and how to leverage the more powerful YUI key management functions.
How to do it…
Listen for the keypress event and fi nd the character code:
var fnCallback = function(e) {
		var charCode = YAHOO.util.Event.getCharCode(e);
		alert('Key pressed with character code ' + charCode);
	};
	YAHOO.util.Event.on('myElementId', 'keypress', fnCallback);
The event callback has some properties which are true when the Alt, Control, or Shift keys are pressed along with the triggering key:
var fnCallback = function(e) {
		if (e.altKey) {
			alert("alt key was pressed as well");
		}
		if (e.ctrlKey) {
			alert("control key was pressed as well");
		}
		if (e.shiftKey) {
			alert("shift key was pressed as well");
		}
	};
	YAHOO.util.Event.on('myElementId', 'keypress', fnCallback);
Use the KeyListener function to effortlessly attach key events:
var fnCallback = function(e) {
		alert("The enter key was pressed");
	};
	var keyObj = {keys:13};
	var keyHandle =
		new YAHOO.util.KeyListener('myElemId', keyObj, fnCallback);
		keyHandle.enable();
Use the KeyListener function to listen for several key events when Ctrl is also pressed:
var fnCallback = function(e) {
		alert("Up, Right, Down, or Left and Control was pressed");
	};
	var keyObj = {
		alt: false,
		ctrl: true,
		shift: false,
		keys: [37,38,39,40]
	};
	var keyHandle =
		new YAHOO.util.KeyListener('myElemId', keyObj, fnCallback);
	keyHandle.enable();
The KeyListener function returns an object with two functions, enable and disabled, which allow you to turn the event listener on and off:


// turn off the key listener
	keyHandle.disable();
	// turn on the key listener
	keyHandle.enable();
How it works…
When subscribing to any key event directly, YUI behaves as it does with other events, wrapping the native event and handling-cross browser variations. The getCharCode function checks the event object for the browser variations of character code, and normalizes the value.
The KeyListener function wraps a keydown event with an instantiatable object that checks the character codes before executing the callback. The disable and enable functions of the returned object respectively call removeListener and addListener for you. You must call the enable function before the instantiated KeyListener to work.
There’s more…
The second argument of the KeyListener function is called the keyData object, and requires the keys property, but the Boolean values alt, ctrl, and shift are optional. The keys property can either be a single or an array of integer character codes.
By default the KeyListener function listens for the keydown event, but you can also specify the keyup event by passing it as a fourth optional argument:
var fnCallback = function(e) {
		alert("The escape key was keyed up");
	};
	var keyObj = {keys:27};
	var KeyListener = YAHOO.util.KeyListener;
	var keyHandle =
		new KeyListener('myElemId', keyObj, fnCallback, 'keyup');
	keyHandle.enable();
Also, common key codes are available for you on a static object:
YAHOO.util.KeyListener.KEY = {
		ALT : 18,
		BACK_SPACE : 8,
		CAPS_LOCK : 20,
		CONTROL : 17,
		DELETE : 46,
		DOWN : 40,
		END : 35,
		ENTER : 13,
		ESCAPE : 27,
		HOME : 36,
		LEFT : 37,
		META : 224,
		NUM_LOCK : 144,
		PAGE_DOWN : 34,
		PAGE_UP : 33,
		PAUSE : 19,
		PRINTSCREEN : 44,
		RIGHT : 39,
		SCROLL_LOCK : 145,
		SHIFT : 16,
		SPACE : 32,
		TAB : 9,
		UP : 38
	};
Using special YUI only events
The Event component has two special events to bubble the focus and blur events, and two events that emulate IE’s mouseenter and mouseleave events. This recipe explains how to use each of these events.
Getting ready
Use the following DOM for the examples in this recipe:

		Example Title
		
How to do it…
Use the special focusin event to handle bubbling focus events:
// the focus of all 3 inputs can be handled by one callback
	YAHOO.util.Event.on("myElementId", "focusin", function(e) {
		var targ = YAHOO.util.Event.getTarget(e);
		alert("focused on target: " + targ.name);
	});
Use the special focusout event to handle bubbling blur events:
// the blur of all 3 inputs can be handled by one callback
	YAHOO.util.Event.on("myElementId", "focusout", function(e) {
		var targ = YAHOO.util.Event.getTarget(e);
		alert("blurred on target: " + targ.name);
	});
Use the mouseenter event to fi re an event once when the mouse first enters an element:
// this callback fire once when the mouse enters the p tag
	YAHOO.util.Event.on('myHeaderId', 'mouseenter', function(e){
		alert("Mouse entered: " + this.id);
	});
Use the mouseleave event to fi re an event once when the mouse first leaves an element:
// this callback fire once when the mouse enters the p tag
	YAHOO.util.Event.on('myHeaderId', 'mouseleave', function(e){
		YAHOO.log("Mouse left: " + this.id);
	});
How it works…
The focusin and focusout are special-cased events that leverage the capture phase of JavaScript events to emulate bubbling of blur and focus events.
The mouseenter and mouseleave events use IE’s native event of the same name, but in other browsers YUI adds listeners to the mouseover and mouseout events of an element to emulate the behavior. YUI removes or re-attaches these events as necessary, to minimize the number of event subscribers.
Using YUI helper event functions
YUI events have four useful helpers functions: delegate, onAvailable, onContentReady, and onDOMReady. These functions augment how developers interact with the DOM. This recipe explains how they work.
Getting ready
To use the delegate function in this recipe, you will need to include the event-delegate and Selector components. Use the following DOM for the examples in this recipe:

		
			Item Type One
			Item Type Two
			Item Type Three
		
	
How to do it…
Use event delegation to have a single handler for all three anchors:
YAHOO.util.Event.delegate("myElementId", "click",
	function(e, matchedElement, container) {
		// The matchedElement is the default scope
		alert("Default scope id: " + this.id);
		alert("Clicked link id: " + matchedElement.id);
		/* The actual click target, which could be the matched item or a
		descendant of it. */
		alert("Event target: " + YAHOO.util.Event.getTarget(e));
		// The delegation container is passed as a third argument
		alert("Delegation container: " + container.id);
	}, "li a");
Remove event delegation with the removeDelegate function:
YAHOO.util.Event.removeDelegate("myElementId", "click",
		fnCallback);
Use onAvailable to fi re a function as soon as an element is detected in the DOM:
var fnCallback = function(obj) {
		alert('myElementId is now available');
	};
	var obj = {/* optional pass-through object */};
	YAHOO.util.Event.onAvailable('myElementId', fnCallback, obj);
Use onContentReady to fi re a function as soon as an element and its nextSibling are

detected in the DOM:
var fnCallback = function(obj) {
		// the execution context was changed to obj
		alert('myElementId is now ready');
	};
	var obj = {/* optional pass-through object */};
	YAHOO.util.Event.onContentReady('myElementId', fnCallback,
		obj, true);
Fire a callback function as soon as the DOM has fi nished loading:
var fnCallback = function(obj) {
		// the execution context was changed to window
		alert('The DOM is now available');
	};
	var obj = {/* optional pass-through object */};
	YAHOO.util.Event.onDOMReady(fnCallback, obj, window);
How it works…
Event delegation works by attaching one event listener, of the specifi ed type, to the container element (argument one). When the specifi ed event type fi res, anywhere on the container element, the DOM path from the event target to the container element is compared against the selector specifi ed as the fourth argument of the delegate function. If the selector matches, then the callback function is executed.
The onAvailable and onContentReady functions poll the DOM until the element is available by document.getElementById or the window load event isfired. The onContentReady function only differs from onAvailable, in that it waits until the nextSibling of the element is also available to ensure that its descendants have completely loaded.
There’s more…
The onAvailable and onContentReady functions have signatures exactly like the addListener function, except without the event type. You can use both functions after the window load event fi res, and they will poll the DOM for up to 10 seconds.
The onDOMReady function also shares a signature with addListener, except without the element and event type. The recipes for these three functions show the variations you could use for the optional fourth and fi fth arguments.
Attaching fewer events to the DOM improves the performance of your
	site. Use the event delegation function as much as possible to reduce
	the number of event listeners.
See also
Refer to Using YUI to attach JavaScript event listeners, for more information on the optional arguments for onAvailable and onContentReady.
Using custom events
YUI provides a framework for publishing and fi ring arbitrary events that you create. This simple feature drives much of the framework, and is the basis for most of the more complicated widgets covered in this book. This recipe shows you how to create, subscribe to, and fire custom events.
How to do it…
Create a basic custom event:
var myEvent =	new YAHOO.util.CustomEvent('myEvent');
Create a custom event, whose callback has the specifi ed execution context:
var ctx = {};
	var myEvent = new YAHOO.util.CustomEvent('myEvent', ctx);
Subscribe to a custom event:
var myCallback = function(eventName, fireArgs, obj) {
		/* … */
	};
	myEvent.subscribe(myCallback);
Fire a custom event:
myEvent.fire();
Unsubscribe one callback from a custom event:
// the signature is the same as the subscribe function
	if (myEvent.unsubscribe(myCallback)) {
		alert('callback unsubscribed successfully');
	}
Unsubscribe all callbacks from a custom event:
myEvent.unsubscribeAll();
How it works…
The custom event framework maintains an array of all instantiated custom events, and an object to map the event names to the custom event object. Custom event objects contain a list of subscriber callback functions, logic to handle scope normalization, and logic for passing parameters from its constructor, subscribe, and fire functions to each subscriber function. The unsubscribe function removes the specifi ed function by comparing the provided function against each subscriber function, and unsubscribeAll will truncate the array of subscriber functions.
There’s more…
When calling the fire function of a custom event (and using the default callback signature), you can pass any number of arguments into the fire function, and they will be passed as an array to the second argument of each subscriber function.
When calling the unsubscribe function you should pass it the same signature as well calling the subscribe function to ensure the removal of the correct subscriber function.
The following subsections explain optional arguments that can be provided for the functions discussed in this recipe:
Instantiation function arguments
When instantiating a CustomEvent object, you need to only provide the fi rst argument, which is the event name, but you can provide up to four additional arguments:

 
var myEvent = YAHOO.util.CustomEvent('myEvent', this, false, YAHOO.
	util.CustomEvent.LIST, false);
Subscribe function
When calling the subscribe function you must pass a required callback function as the first argument, but can also pass up to two additional arguments:

 
var newContext = { /* … */ };
	var obj = { /* … */ };
	var myCallback = function(type, fireArgs, obj) {
		/* … */
	}
	myEvent.subscribe(myCallback, obj, newContext);
Subscriber callback functions
When the signature is CustomEvent.LIST (the default value) the following arguments will be passed to the subscriber callback functions when the custom event is fi red:

When the signature is CustomEvent.FLAT the following arguments will be passed:

See also
Refer to Apply EventProvider to manage custom events on objects for information on how to more effectively use custom events with objects.
The simple way to add custom events to classes
Since custom events drive much of the YUI framework, the developers have created the YAHOO.util.EventProvider class to simplify interacting with custom events on classes.

This recipe explains how to apply EventProvider to your classes and leverage its subscription model.
How to do it…
Apply EventProvider to your class:
var MyClass = function() {/* … */};
	MyClass.prototype = {/* … */};
	YAHOO.lang.augment(MyClass, YAHOO.util.EventProvider);
	var myClassInst = new MyClass();
Create an event on myClassInst:
myClassInst.createEvent('myEvent');
Subscribe to an event on myClassInst:
var myCallback = function() {/* … */};
	myClassInst.subscribe('myEvent', myCallback);
Test if an event has been created on myClassInst:
if (myClassInst .hasEvent('myEvent')) {
		alert('myEvent has been created');
	}
Fire an event on myClassInst:
myClassInst.fireEvent('myEvent');
Unsubscribe a callback from an event on myClassInst:
myClassInst.unsubscribe('myEvent', myCallback);
Unsubscribe from all callbacks from an event on myClassInst:
myClassInst.unsubscribeAll('myEvent');
Unsubscribe all events on myClassInst:
myClassInst.unsubscribeAll();
How it works…
When creating an event using the EventProvider framework, YUI prefaces the event name with a unique ID, so that custom event names are unique per object. Thus fi ring a custom event called myEvent on object A, does not execute callbacks subscribing to myEvent on object B. Otherwise, the functions work like their counterparts from the previous recipe, except they require you to specify the event name as the fi rst argument. The only exception to this rule is the fireEvent function , which calls the subscriber functions using the CustomEvent.FLAT argument signature, instead of CustomEvent.LIST.
There’s more…
The createEvent function will return the CustomEvent object that it creates or a previously existing one with the same name. The createEvent function instantiates the custom event object and hence you have less control over the instantiation arguments. However, you can pass a confi guration object as the second optional argument of createEvent, with the following properties:

 
Any subscriber functions applied using the subscribe function
	before calling the createEvent function will be lost. Make sure,
	when instantiating classes you made, that you create all events the
	class may use.
See also
Using custom events, for more information on optional arguments that can be passed to the event functions.
The extending JavaScript objects, the YUI way, for more information on how to create your own extendable JavaScript objects.

Introduction to Comet and Reverse AJAX

krishnas — Mon, 27 Sep 2010 01:14:06 +0000

Connect to us ( @twitter | @facebook )

Introduction

It’s an era of Web 2.0. Most of the web applications are following the web 2.0 standards. AJAX played a major role in promoting web 2.0 applications and it had a great role in enhancing the user experience of a web applications.

Comet challenges the request-response model in HTTP and allows the server to decide when it should send the data to client, usually referred to as “Server-Push”. Comet or Reverse AJAX is a technology that initiates exchange of data from the server to the client whenever there is any update in the server. Comet is expected to change the next generation web.

To understand the concept behind Comet you need to know the HTTP limitation and AJAX.

Buy AJAX Books from Java Books Store

HTTP Limitations

In a web application the communication between client and server is always originated by the client and not by the server following the “request-response model”. It is not possible for any server to send the response to the client without having received the request from the client.

Consider the web application that gives the online cricket score. The page in the client browser should be refreshed / reloaded to view the modified score though the updation might have happened on the server much before the client raises the request to reload. Is there is any way to send the updated data from server to client without the client request? We will discuss it shortly.

In a web application the connection between client and server is NOT maintained. Since HTTP is following disconnected architecture the architects were forced to look for alternate way to identify the client uniquely. HTTP session helps the developers to overcome the disconnected architecture of HTTP in order to identify the user. Session handling is supported by all the server side technologies and web servers.

AJAX – A Technology For Second Generation Of Web (web 2.0)

AJAX is a set of technologies that allows the web programmers to create interactive web interface on web pages. In simple words AJAX helps in developing web application interfaces that works just like a desktop application. In typical web applications, the client sends a request to server and server sends the entire page content as response. On the other hand, AJAX based applications can interact with the server in the background and load only the required data in the page instead of refreshing the entire page. AJAX is following HTTP request-response model and the client need to initiate the communication using a JavaScript code.

However, even with AJAX the client is still forced to send the request to the server.

“Reverse AJAX” is term used to describe a web application where the server initiates the communication to the client.

Introduction to Comet and Reverse AJAX

AJAX based applications are becoming the de facto technology for architecting the web applications. AJAX allows the browsers to request data from the web server. However this does not enable the web server to respond without received any request from the browser.

Comet is capable of solving this issue by enabling the web servers to asynchronously push the data to clients through a single, previously opened connection. This approach was unheard previously with web applications. The Comet style applications can send the latest data from the server to client with negligible latency.

Comet helps us to develop different type of multi-user collaborative and monitoring web applications. This is impossible to develop without client side plugins. Comet keeps the clients synchronized with the server which might be changing frequently.

AJAX improves the dynamism of a User interface for a single user, and for getting the modified data the browser is forced to make asynchronous request the server. The browser has to wait until the server performs some actions which internally make a request to server and displays the modified data. Since the web is a multi-user system, which is certain that some of the AJAX based applications might suffer transparency hurdles for users. If the same application can be implemented with the Comet technology, it can avoid the issues by pushing the latest updates to all clients. AJAX is responsible for improving single user responsiveness and Comet is responsible for the improving responsiveness for multi-user, collaborative web applications.

Where you can use comet

Comet is NOT fit for all kind of web applications. Comet can be used in the following situations.

If your application collaborates on shared data
If the users are getting advantage using the updated data from the server
If the user is spending long time on a single page

Scalability of Comet Web Application

Comet requires an open connection per client session on the underlying HTTP protocol. In most of the browsers the number of concurrent connection to a domain is limited to two. With Comet you need to keep one open connection to a server for a longer period of time. Under the standard Servlet life cycle, this is NOT a scalable model because each connection requires one thread on the Servlet. To overcome this limitation most of the application servers support Asynchronous Request Processing (ARP). In ARP a thread-pool is used to service the asynchronous request. ARP is using non-blocking IO technique for building highly scalable communications.

Comet and Reverse AJAX frameworks

When AJAX was introduced it was a roll-your-own solution, and you have to take care of browser dependency, XmlHTTPRequest object, generating request and parsing and displaying the responses. Nowadays many AJAX frameworks are available eliminating all the worries about building AJAX applications. Fortunately a lot of frameworks and servers are available for implementing Comet-style application. Let us discuss some of the frameworks which can help us in implementing the Comet style applications.

DWR 2.0
Grizzly Comet API
Atmosphere
AJAX push with ICEfaces
Asynchronous Servlet using Servlet 3.0

DWR 2.0

DWR is an open source framework to implement AJAX using Java. The most easy-to-use Comet implementation is available with DWR framework. The important feature of DWR 2.0 is reverse AJAX. It helps you to send asynchronous data from server to client. It is possible with the help of JavaScript API’s available at the client side.

Grizzly Comet API

The new Sun glassfish web server comes with Grizzly HTTP engine to support Comet. It avoids blocking HTTP connections by using asynchronous request process, otherwise the server need to make a permanent connection to server for Comet communication. This affects the scalability of Comet web application. Grizzly ensures greater performance by Asynchronous request processing which makes use of the thread pool system. Grizzly’s support includes a small set of API that makes it easy to develop Comet web application without any hazards.

Atmosphere

Atmosphere is a Comet framework which can work on any JEE web server. It is a POJO based framework and developers can create Comet web application without the help of Servlet 3.0 API. This framework includes several modules and helps us in implementing Bayeux protocol, Atmosphere runtime as well. The Framework contains its own web server called “Atmosphere Spade Server”. If you are using Atmosphere framework please be aware that only Jetty, GlashFish, and Grizzly servers can make use of asynchronous native API. The other webservers using the blocking IO approach and hence the application is NOT scalable.

AJAX push with ICEfaces

It is an open source AJAX based framework for developing Rich Internet Applications using Java. AJAX push is an exciting feature of ICEfaces which enable us to develop Comet web application with simple Java API without worrying about the low-level details of the push-mechanism. ICEfaces uses “long polling” to communicate from server to client. This involves holding an open connection from client to server with a blocking request, and then sends the response only when some state change in the application.

Asynchronous Servlet using Servlet 3.0

The new feature added with Servlet 3.0 supports Comet style of application development. With Servlet 3.0 we can write portable Comet web applications. The asynchronous feature provides great design ideas to multiple vendors and provides a portable solution for the thread usage in Comet web application. APIs are available for easy implementation of Comet and supported by various containers. It also provides support for suspending a request and resume later. The suspended request can access the resource and like access to a database or wait for a response from web service. The resumed request can be re-dispatched through the filter for processing. Notifications are available to the developers regarding the status of suspend, resume and complete.

Conclusion

Comet is making wonders in web applications by using mechanisms unspecified by web standards. Going forward comet has the potential to become standardization. Today if you look at AJAX using XHR is universally supported. Comet-style web applications can bring a new way of creating interactive and collaborative web applications. It also puts complex challenges for implementing comet-style web applications in large scale. However, most of the web servers are providing stable and mature technology for implementing Comet. Let us hope that in future Comet become a standard for building web application and we can easily create cross-platform, portable and scalable Comet web application.

Acknowledgement

I would like to thank my manager Mr. Rajagopalan P, Principal, Education and Research Department, Infosys for the guidance and continuous support. I would like to thank Mr. Satheesha B N, Associate Vice-President, Education and Research Department, Infosys for motivating me to write this article. I would like to thank Mrs. Yuvarani, Lead, Education and Research Department, Infosys for giving valuable suggestions.

AJAX Articles

AJAX and PHP

krishnas — Mon, 07 Jun 2010 00:17:48 +0000

Connect to us ( @twitter | @facebook )

AJAX and PHP

Building Modern Web Applications – Second Edition

AJAX is a complex phenomenon that means different things to different people.
Computer users appreciate that their favorite websites are now friendlier and feel more
responsive. Web developers learn new skills that empower them to create sleek web
applications with little effort. Indeed, everything sounds good about AJAX!

At its roots, AJAX is a mix of technologies that lets you get rid of the evil page reload,
which represents the dead time when navigating from one page to another. Eliminating
page reloads is just one step away from enabling more complex features into websites,
such as real-time data validation, drag-and-drop, and other tasks that weren’t traditionally
associated with web applications. Although the AJAX ingredients are mature (the
XMLHttpRequest object, which is the heart of AJAX, was created by Microsoft in
1999), their new role in the new wave of web trends is very young, and we’ll witness a
number of changes before these technologies will be properly used to the best benefit of
the end users.

AJAX isn’t, of course, the answer to all the Web’s problems, as the current hype around it
may suggest. As with any other technology, AJAX can be overused, or used the wrong
way. AJAX also comes with problems of its own: you need to fight with browser
inconsistencies, AJAX-specific pages don’t work on browsers without JavaScript, they
can’t be easily bookmarked by users, and search engines don’t always know how to parse
them. Also, not everyone likes AJAX. While some are developing enterprise
architectures using JavaScript, others prefer not to use it at all. When the hype is over,
most will probably agree that the middle way is the wisest way to go for most scenarios.

In AJAX and PHP: Building Modern Web Applications – Second Edition, we take a
pragmatic and safe approach by teaching relevant patterns and best practices that we
think any web developer will need sooner or later. We teach you how to avoid the
common pitfalls, how to write efficient AJAX code, and how to achieve functionality that
is easy to integrate into current and future web applications, without requiring you to
rebuild the whole solution around AJAX. You’ll be able to use the knowledge you learn
from this book right away, in your PHP web applications.

What This Book Covers

Chapter 1: The World of AJAX and PHP is all about a quick introduction to the world of
AJAX. In order to proceed with learning how to build AJAX applications, it’s important
to understand why and where they are useful. It describes the XMLHttpRequest object,
which is the key element that enables the client-side JavaScript code to call a page on the
server asynchronously.

Chapter 2: JavaScript and the AJAX Client walks you through many fields such as
working with HTML, JavaScript, CSS, the DOM, XML, and XMLHttpRequest. It
discusses the theory (and practice) that you will need to know to make these components
come together smoothly, and form a solid foundation for your future AJAX applications.
It also shows you how to implement simple error-handling techniques, and how to write
code efficiently.

Chapter 3: Object Oriented JavaScript covers a large area of what object-oriented
programming means in the world of JavaScript starting from basic features and
going far into the execution context of functions. It teaches you the basic OOP
concepts—encapsulation, polymorphism, and inheritance, how to work with JavaScript
objects, functions, classes, and prototypes, how to simulate private, instance, and static
class members in JavaScript, what the JavaScript execution context is, how to implement
inheritance by using constructor functions and prototyping, and the basics of JSON.

Chapter 4: Using PHP and MySQL on the Server starts putting the server to work, using
PHP to generate dynamic output, and MySQL to manipulate and store the backend data.
This chapter shows you how to use XML and JSON with PHP (so that you can create
server-side code that communicates with your JavaScript client), how to implement errorhandling
code in your server-side PHP code, and how to work with MySQL databases.

Chapter 5: AJAX Form Validation creates a form validation application that implements
traditional techniques with added AJAX flavor, thereby making the form more userfriendly,
responsive, and pleasing. The intention of this chapter isn’t to build the perfect
validation technique but, rather, a working proof of concept that takes care of user input
and ensures its validity.

Chapter 6: Debugging and Profiling AJAX Applications teaches how to enable and use
Internet Explorer’s debugging capabilities. It shows how you can work with Web
Development Helper, Developer Toolbar, and other Internet Explorer tools and with
Firefox plugins such as Firebug, Venkman JavaScript Debugger, and Web Developer.

Chapter 7: Advanced Patterns and Techniques briefly covers some of the most important
patterns and techniques covering usability, security, and techniques. Looking at methods,
patterns, and techniques is so important that it has developed into its own science and has
created a set of guidelines for typical problems that offer us predictable results.

Chapter 8: AJAX Chat with jQuery teaches how to use AJAX to easily implement an
online chat solution. This will also be your opportunity to use one of the most important
JavaScript frameworks around—jQuery. More precisely, this chapter will explain the
basics of jQuery and show how to create a simple, yet efficient clientserver chat
mechanism using AJAX.

Chapter 9: AJAX Grid explains the usage of an AJAX-enabled data grid plugin, jqGrid.

Appendix: Preparing Your Working Environment covers the installation instructions that
set up your machine for the exercises in this book. It also covers preparing the database
that is used in many examples throughout the book.

AJAX Form Validation

Input data validation is an essential feature for any modern software application.
In the case of web applications, validation is an even more sensitive area because
your application is widely reachable by many users with varying skill sets
(and intentions).

Validation is not something that you can play with—invalid data has the potential
to harm the application’s functionality, result in errant and inaccurate reporting, and
even corrupt the application’s most sensitive area—the database.

Validating data requires checking whether the data entered by the user complies
with rules established in accordance with the business rules of your application before
allowing it to be used. For example, if dates must be entered in the YYYY-MM-DD
format, then a date of February 28 would be invalid. Email addresses and phone
numbers are other examples of data that should be checked against valid formats.
In addition, validation must guard against “SQL injection”—which could corrupt,
control, and/or access your data and database.



	The importance of carefully defining input data validation rules

	and consistently applying those rules cannot be overstated!

Historically, web form validation was implemented primarily on the server side,
after the form was submitted. In some cases, on the client side, there was also some
JavaScript code that performed simple validation such as checking whether the email
address was valid or if a field had been left blank.

But, there were a few problems with traditional web form validation techniques:

Server-side form validation butted up against the limits of the HTTP
protocol—a stateless protocol. Unless special code was written to deal with
this issue, submitting a page with invalid data had the user receiving an
empty form as a reply, and then, much to his chagrin, the entire form had to
be filled in again from scratch. How annoying.

After submitting the page, the user waited (not so) patiently for a full-page
reload. With every mistake made in filling out the form, the annoying “new
page reload with blank form” happened.

In this chapter, we will create a form validation application that implements
traditional techniques with added AJAX fl avor, thereby making the form more
user-friendly, responsive, and pleasing. In the AJAX world, entered data is validated
on the fl y, so the users are never confronted with waiting for full-page reloads or the
rude “blank form” as a reply.

The server is the last line of defense against invalid data, so even if you implement
client-side validation, server-side validation is mandatory. The JavaScript code that
runs on the client can be disabled permanently from the browser’s settings and/or it
can be easily modified or bypassed.

Implementing AJAX form validation

The form validation application we will build in this chapter validates the form at
the server side on the classic form submit, implementing AJAX validation while the
user navigates through the form. The final validation is performed at the server, as
shown in Figure 5-1:

Doing a final server-side validation when the form is submitted should never be
considered optional. If someone disables JavaScript in the browser settings, AJAX
validation on the client side clearly won’t work, exposing sensitive data, and thereby
allowing an evil-intentioned visitor to harm important data on the server (for
example, through SQL injection).



	Always validate user input on the server.

As shown in the preceding figure, the application you are about to build
validates a registration form using both AJAX validation (client side) and typical
server-side validation:

AJAX-style (client side): It happens when each form field loses focus
(onblur). The field’s value is immediately sent to and evaluated by the
server, which then returns a result (0 for failure, 1 for success). If validation
fails, an error message will appear and notify the user about the failed
validation, as shown in Figure 5-3.

PHP-style (server side): This is the usual validation you would do on the
server—checking user input against certain rules after the entire form is
submitted. If no errors are found and the input data is valid, the browser
is redirected to a success page, as shown in Figure 5-4. If validation fails,
however, the user is sent back to the form page with the invalid fields
highlighted, as shown in Figure 5-3.

Both AJAX validation and PHP validation check the entered data against our
application’s rules:

Username must not already exist in the database

Name field cannot be empty

A gender must be selected

Month of birth must be selected

Birthday must be a valid date (between 1-31)

Year of birth must be a valid year (between 1900-2000)

The date must exist in the number of days for each month (that is, there’s no
February 31)

E-mail address must be written in a valid email format

Phone number must be written in standard US form: xxx-xxx-xxxx

The I’ve read the Terms of Use checkbox must be selected

Watch the application in action in the following screenshots:

CF AJAX Programming

krishnas — Mon, 23 Nov 2009 00:42:04 +0000

Connect to us ( @twitter | @facebook )

ColdFusion 8 Developer Tutorial

Adobe ColdFusion is an application server, renowned for rapid development of dynamic
websites, with a straightforward language (CFML), powerful methods for packaging and
reusing your code, and AJAX support that will get developers deep into powerful web
applications quickly.

This book is the most intense guide to creating professional ColdFusion applications
available. Packed with example code, and written in a friendly, easy-to-read style, this
book is just want you need if you are serious about ColdFusion.

This book will give you clear, concise and, of course, practical guidance to take you from
the basics of ColdFusion 8 to the skills that will make you a ColdFusion developer to be
reckoned with.

ColdFusion expert John Farrar will teach you about the basics of ColdFusion
programming, application architecture, and object reuse, before showing you a range of
topics including AJAX library integration, RESTful Web Services, PDF creation and
manipulation, and dynamically generated presentation files that will make you the toast
of your ColdFusion developer town.

This book digs deep with the basics, with real-world examples of the how and whys, to
get more done faster with ColdFusion 8.

This book also covers the new features of ColdFusion 8 Update 1.

What This Book Covers

Chapter 1 describes how to enhance basic HTML pages with the power and simplicity of
ColdFusion. It also explains the difference between static HTML pages and dynamic
ColdFusion pages.

Chapter 2 describes how to create object classes and instantiate object instances. It also
describes the object constructors. This chapter explains how to connect to a database
through the internal methods of our objects.

Chapter 3 helps us in understanding how to manage multiple products through common
forms for listing, editing, and adding data. This chapter explains integrating and
streamlining the workflow of web forms and CFC database processing.

In Chapter 4, we will learn how to use the web server memory to create engaging and
interactive web applications by using variable scopes. We will also learn how to share
some information, and how to protect the rest of the information in a controlled manner.

In Chapter 5, we will learn about the basics of custom tags. We will also learn how to
integrate cfinclude for libraries of segments. This chapter also includes skinning a
website by using custom tags, the use of nested tags, and so on.

Chapter 6 includes wrapping of the ThickBox gallery functions into a custom tag for
simple functional reuse and wrapping of a Google map library into our code with a
custom tag for simplified interactive maps. This chapter helps us in understanding how to
create a multi-state form list wrapped in a custom tag.

In Chapter 7, we will see how to use the authentication that comes standard with CF.
This chapter explains how to control the site content based on current user permissions.

In Chapter 8, we will see how AJAX is different from HTML and regular server-oriented
web pages. This chapter includes the comparison of HTML, server, and browser
technology sites. It also explains about the ColdFusion widgets.

In Chapter 9, we will see the benefit received from the combined power of tag-based
encapsulation with AJAX functionality.

Chapter 10 explains about binding, proxy connections, JSON features, Spry data
integration, and debugging.

In Chapter 11, we will have a look at the different ways in which we can reorganize
pages of PDF documents into a new PDF file from one or more separate PDF
source documents.

Chapter 12 explains how to create Verity search collections, how to initialize the Verity
indexes, how to interface with the indexes. This chapter also explains how to interface
with PDF content for more control when calling documents.

Chapter 13 discusses files, emails, and images. This chapter helps in understanding how
some of the common ColdFusion features empower developers to shift the web pages to
web applications in many ways.

In Chapter 14, we will learn how to interact with other web servers and create features on
our site that will allow others to interact with us.

Chapter 15 gives a broad introduction to ColdFusion’s way of generating dynamic
reports. This chapter also gives a brief introduction to the ColdFusion Report
Builder tool.

Chapter 16 shows the unique presentation capabilities built into ColdFusion. It gives
practical examples to help build custom presentations with dynamic content on demand.

Appendix A covers some important details of setting up a development environment. It
also includes some important tips for better productivity.

Appendix B includes some links and resources that are aimed at giving us a good starting
base of information. It also explains a group of libaries that prove to be very significant.

CF AJAX Programming

This chapter deals with AJAX programming in ColdFusion. ColdFusion acts a great
platform not just because of its code features, but because of its characteristics as
to how the code interacts with other features. ColdFusion is a language with depth
and power. Yet, as we developers know, it seems real power always requires a bit of
custom code. In this chapter, we will have a look at the following topics:

Binding

Proxy connections

JSON features

Spry data integration

Debugging

Binding

When it comes to programming, the two most commonly used features are
CFAJAXProxy and binding. The binding feature allows us to bind or tie things
together by using a simpler technique than we would otherwise have needed
to create. Binding acts as a double-ended connector in some scenarios. You can
set the bind to pull data from another ColdFusion tag on the form. These must be
AJAX tags with binding abilities.

There are four forms of bindings, on page, CFC, JavaScript, and URL. Let’s work
through each style so that we will understand them well. We will start with on page
binding. Remember that the tag has to support the binding. This is not a general
ColdFusion feature, but we can use it wherever we desire.

On Page Binding

We are going to bind ‘cfdiv’ to pull its content to show on page binding. We will set
the value of a text input to the div. Refer to the following code. ColdFusion AJAX
elements work in a manner different from how AJAX is written traditionally. It is
more customary to name our browser-side HTML elements with id attributes. This
is not the case with the binding features. As we can see in our code example, we
have used the name attribute. We should remember to be case sensitive, since this is
managed by JavaScript. When we run the code, we will notice that we must leave the
input field before the browser registers that there has been a change in the value of
the field. This is how the event model for the browser DOM works.



	

		This is my edit box.


		

	

	


	And this is the bound div container.

Notice how we use curly brackets to bind the value of the ‘myText’ input box. This
inserts the contents into ‘div’ when the text box loses focus.

This is an example of binding to in-page elements. If the binding we use is tied to a
hidden window or tab, then the contents may not be updated.

CFC Binding

Now, we are going to bind our div to a CFC method. We will take the data that was
being posted directly to the object, and then we will pass it out to the CFC. The CFC
is going to repackage it, and send it back to the browser. The binding will enable the
modified version of the content to be sent to the div. Refer to the following
CFC code:



	

		
			access=”remote”>

			

				
					the div, the calling page variable is ‘#arguments.edit#
					strong>’.”>

From the previous code, we can see that the CFC only accepts the argument
and passes it back. This could have even returned an image HTML segment
with something like a user picture. The following code shows the new page
code modifications.

This is my edit box. And this is the bound div container.

The only change lies in how we bind the cfdiv element tag. Here, you can see that
it starts with CFC. Next, it calls bindsource, which is the name of a local CFC. This
tells ColdFusion to wire up the browser page, so it will connect to the CFC and
things will work as we want. You can observe that inside the method, we are passing
the bound variable to the method. When the input field changes by losing focus, the
browser sends a new request to the CFC and updates the div. We need to have the
same number of parameters going to the CFC as the number of arguments in our
CFC method. We should also make sure that the method has its access method set to
remote. Here we can see an example results page.

It is valid to pass the name of the CFC method argument with the data value. This
can prevent exceptions caused by not pairing the data in the same order as the
method arguments. The last line of the previous code can be modified as follows:

Yahoo! User Interface library(YUI)

krishnas — Thu, 18 Dec 2008 16:00:08 +0000

Connect to us ( @twitter | @facebook )

About Yahoo! User Interface Library – Book

Learning the Yahoo! User Interface Library introduces the popular open-source YUI JavaScript library and takes the user through each of the fully released components in detail looking at the classes that make up each component and the properties and methods that can be used. It includes a series of practical examples to reinforce how each component should/can be used. Author Dan Wellman takes the reader from beginner to advanced-level YUI usage and understanding.

What This Book Covers

In Chapter 1 we look at the library as a whole covering subjects such as how it can be
obtained, how it can be used, the structure and composition of it, and the license it has
been released under. We also look at a coding example featuring the Calendar control.

Chapter 2 covers the extensive CSS tools that come with the library, specifically the
Reset and Base tools, the Fonts tool, and the extremely capable Grids tool. Examples on
the use of each tool are covered.

In Chapter 3 we look at the all important DOM and Event utilities. These two
comprehensive utilities can often form the backbone of any modern web application and
are described in detail. We look at the differences between traditional and YUI methods
of DOM manipulation, and how the Event utility unites the conflicting Event models of
different browsers. Examples in this chapter include how the basic functions of the DOM
utility are used, and how custom events can be defined and subscribed to.

AJAX is the subject of Chapter 4, where we look in detail at how the Connection
Manager handles all of our XHR requirements. Examples include obtaining remote
data from external domains and the sending and receiving of data asynchronously to our
own servers.

Chapter 5 looks first at how the Animation utility can be used to add professional effects
to your web pages. It then moves on to cover how the Browser History Manager reenables
the back and forward buttons and bookmarking functionality of the browser when
used with dynamic web applications.

The Button family of controls and the TreeView control are the focus of Chapter 6. We
first cover each of the different buttons and look at examples of their use. We then
implement a TreeView control and investigate the methods and properties made available
by its classes.

In Chapter 7 we look at one of the most common parts of any web site—the navigation
structure. The example looks at the ease at which the Menu control can be implemented.
We also look at the AutoComplete control and create both array and XHR-based versions
of this component.

Chapter 8 looks at the container family of controls as well as the tabView control. Each
member of the container family is investigated and implemented in the coding examples.
The visually engaging and highly interactive TabView control is also looked at and
implemented.

Drag-and-Drop, one of DHTML‘s crowning acheivements is wrapped up in an easy to
use utility, forms the first part of Chapter 9. In the second part of this chapter we look
at the related Slider control and how this basic but useful control can be added to pages
with ease.

In Chapter 10 we cover the Logger control in detail and work through several examples
that include how the Logger is used to view the event execution of other controls and
how it can be used to debug existing controls and custom classes.

AJAX and Connection Manager

As far as web interface design techniques are concerned, AJAX is defi nitely the way to go. So what JavaScript library worth its salt these days wouldn’t want to include a component dedicated to this extremely useful and versatile method of client/server communication?

The term AJAX has been part of the mainstream development community’s vocabulary since early 2005 (with the advent of Google Mail). Although some of the key components that AJAX consists of, such as the XMLHttp object, have been around for much longer (almost a decade in fact). The goal of asynchronously loading additional data after a web page has rendered is also not a new concept or requirement.

Yet AJAX reinvented existing technologies as something new and exciting, and paved the way to a better, more attractive, and interactive web (sometimes referred to loosely as web 2.0) where web applications feel much more like desktop applications.

AJAX can also perhaps be viewed as the godfather of many modern JavaScript libraries. Maybe it wasn’t the sole motivating factor behind the growing plethora of available libraries, but it was certainly highly infl uential and orchestral in their creation and was at least partly responsible for the fi rst wave of modern, class-based JavaScript libraries.

Like many other cornerstone web techniques developed over the years, AJAX was (and still is) implemented in entirely different ways by different browsers. I don’t know if developers just fi nally had enough of dealing with these issues.

The very fi rst JavaScript libraries sprang into existence as a means of abstracting away the differences in AJAX implementation between platforms, thereby allowing developers to focus on the important things in web design instead of worrying about compatibility issues.

The result in many cases is a quick and easy way for developers to cut down on the amount of code they are required to produce, and a better more interactive experience for end users and website visitors.

The Connection Manager—A Special Introduction

The Connection Manager utility is by no means the smallest, most light-weight component included with the YUI, but it’s certainly not the largest either, yet it packs so much functionality into just 12Kb (for the –min version).

Connection Manager provides a fast and reliable means of accessing server-side resources, such as PHP or ASP scripts and handling the response. A series of supporting objects manage the different stages of any asynchronous transactions, whilst providing additional functionality where necessary.

Connection is one of just a few of the utilities that are supported by a single class; this makes looking up its methods nice and straight-forward. It also doesn’t have any properties at all (although the objects that it creates all have their own members which hold various pieces of information), which makes using it even easier!

This utility is what is known as a singleton utility, which means that there can only be one live instance of the utility at any one time, differing from many of the other components of the library. Don’t worry though, this doesn’t restrict you to only making one request; Connection will manage as many separate requests as you need.

Because this utility is a singleton, there are important considerations that advanced coders may want to take note of. Unlike some of the other library components, Connection cannot be subclassed—all of its class’s members are static, meaning that they won’t be picked up when using the YAHOO global .extend() method.

It wraps up the cross-browser creation of the XMLHttpRequest (XHR) object, as well as a simple to use object-based method of accessing the server response and any associated data, into a simple package which handles the request from start to finish. This requires minimal input from you, the developer, saving time as well as effort.

Another object created by Connection is the response object, which is created once the transaction has completed. The response object gives you access via its members to a rich set of data including the id of the transaction, the HTTP status code and status message, and either the responseText and responseXML members depending on the format of the data returned.

Like most of the other library components, Connection Manager provides a series of global custom events that can be used to hook into key moments during any transaction. We’ll look at these events in more detail later on in the chapter but rest assured, there are events marking the start and completion of transactions, as well as success, failure, and abort events.

The Connection utility has been a part of the YUI since its second public release (the 0.9.0 release) and has seen considerable bug fi xing and refi nement since this time. This makes it one of the more reliable and better documented utilities available.

Connection is such a useful utility that it’s used by several other library components in order to obtain data from remote sources. Other components that make use of Connection Manager include the AutoComplete control, DataTable, DataSource, and Tabview.

It is one of the only library components not dependant on the DOM utility. All it requires are the YAHOO global utility and the Event utility. That doesn’t mean that you can’t include a reference to the DOM utility, however, to make use of its excellent DOM manipulation convenience methods.

The XMLHttpRequest Object Interface

When working with the Connection utility you’ll never be required to manually create or access an XHR object directly. Instead, you talk to the utility and this works with the object for you using whichever code is appropriate for the browser in use. This means that you don’t need separate methods of creating an XHR object in order to keep each browser happy.

A transaction describes the complete process of making a request to the server and receiving and processing the response. Connection Manager handles transactions from beginning to end, providing different services at different points during a request.

Transactions are initiated using the .asyncRequest() method which acts as a constructor for the connection object. The method takes several arguments: the fi rst specifi es the HTTP method that the transaction should use, the second specifi es the URL of your server-side script while the third allows you to add a reference to a callback object.

A fourth, optional, argument can also be used to specify a POST message if the HTTP method is set to use POST giving you an easy means of sending data to the server as well as retrieving it. This is rarely required however, even when using the POST method, as we shall see later in the chapter.

It’s also very easy to build in query string parameters if these are required to obtain the data that you are making the request for. It can be hard coded into a variable and then passed in as the second argument of the Connection constructor instead of setting the second argument manually within the constructor.

Connection Manager takes these arguments and uses them to set up the XHR object that will be used for the transaction on your behalf. Once this has been done, and Connection has made the request, you then need to defi ne a new object yourself that will allow you to react to a range of responses from the server.

A Closer Look at the Response Object

I briefl y mentioned the response object that is created by the utility automatically once a transaction has completed, let’s now take a slightly more in-depth view at this object. It will be created after any transaction, whether or not it was considered a success.

The callback functions you defi ne to handle successful or failed transactions (which we’ll examine in more detail very shortly) are automatically passed to the response object as an argument. Accessing it is extremely easy and requires no additional intervention from yourself.

If the transaction fails, this object gives you access to the HTTP failure code and HTTP status message which are received from the server. Examining these two members of the response object can highlight what happened to make the request fail, making it integral to any Connection implementation.

If the transaction was a success, these two members will still be populated but with a success code and status message, and additional members such as responseText or responseXML will also contain data for you to manipulate.

If you need to obtain the HTTP response headers sent by the server as part of the response, these can be obtained using either the getResponseHeader collection, or the getAllResponseHeaders member.

In the case of fi le uploads, some of these members will not be available via the response object. File uploads are the one type of transaction that do not make use of the XHR object at all, so the HTTP code and status message members cannot be used. Similarly, there will not be either a textual or XML-based response when uploading files.

Managing the Response with a Callback Object

In order to successfully negotiate the response from the server, a literal callback object should be defi ned which allows you to deal quickly and easily with the information returned whether it is a success, failure, or another category of response.

Each member of this object invokes a callback function or performs some other action relevant to your implementation. These members can be one of several types including another object, a function call or even a string or integer depending on the requirements of your application.

The most common members you would use in your callback object would usually be based upon success and failure function calls to handle these basic response types, with each member calling its associated function when a particular HTTP response code is received by the response object.

It’s also very easy to add an additional member to this object which allows you to include data which may be useful when processing the response form the server. In this situation, the argument object member can be used and can take a string, a number, an object, or an array.

Other optional members include a customevents handler to deal with custom, pertransaction events as opposed to the global events that are available to any and all transactions, a scope object used to set the scope of your handler functions, and a timeout count used to set the wait time before Connection aborts the transaction and assumes failure.

The remaining member of the callback object is the upload handler which is of course a special handler to deal specifi cally with fi le uploads. As I already mentioned, the response object will be missing success of failure details when dealing with fi le uploads, however, you can still defi ne a callback function to be executed once the upload transaction has completed.

Working with responseXML

In this example we’re going to look at a common response type you may want to use—responseXML. We can build a simple news reader that reads headlines from a
remote XML fi le and displays them on the page.

We’ll also need an intermediary PHP fi le that will actually retrieve the XML file from the remote server and pass it back to the Connection Manager. Because of the
security restrictions placed upon all browsers we can’t use the XHR object to obtain the XML fi le directly because it resides on another domain.

This is not a problem for us however, because we can use the intermediary PHP fi le that we’re going to have to create anyway as a proxy. We’ll make requests from
the browser to the proxy thereby sidestepping any security issues, and the proxy will then make requests to the external domain’s server. The proxy used here in
this example is a cut down version of that created by Jason Levitt that I modified specifi cally for this example.

In order to complete this example you’ll need to use a full web server setup, with PHP installed and confi gured. Our proxy PHP fi le will also make use of the cURL
library, so this will also need to be installed on your server.

The installation of cURL varies depending on the platform in use, so full instructions for installing it is beyond the scope of this book, but don’t worry because there are
some excellent guides available online that explain this quick and simple procedure.

Even though Connection Manager only requires the YAHOO and Event utilities to function correctly, we can make use of some of the convenient functionality provided
by the DOM utility, so we will use the aggregated yahoo-dom-event.js instead of the individual YAHOO and Event fi les. We’ll also need connection-min.js and
fonts.css so make sure these are all present in your yui folder and begin with the following HTML:

Yui Connection Manager Example
Recent News Copyright: © British Broadcasting Corporation

We’ll start off with this very simple page which at this stage contains just the markup for the newsreader and the references to the required library fi les. There’s also a to a custom stylesheet which we’ll create in a little while.

Adding the JavaScript

Directly after the final closing tag, add the following

Once again, we can make use of the .onDOMReady() method to specify a callback function that is to be executed when the YUI detects that the DOM is ready, which is usually as soon as the page has fi nished loading.

The code within our master initialization function is split into distinct sections. We have our success and failure callback functions, as well as a callback object which will call either the success or failure function depending on the HTTP status code received following the request.

The failure handler code is very short; we can simply alert the HTTP status code and status message to the visitor. The callback object, held in the variable callback, is equally as simple, just containing references to the success and failure functions as values.

The pseudo-constructor which sets up the actual request using the .asyncRequest() method is just a single line of code, It’s arguments specify the response method (GET), the name of the PHP fi le that will process our request (myproxy.php), the name of our callback object (callback), and a null reference.

Connection Manager is able to accept URL query string parameters that are passed to the server-side script. Any parameters are passed using the fourth argument of the .asyncRequest() method and as we don’t need this feature in this implementation, we can simply pass in null instead.

Most of our program logic resides in the successHandler() function. The response object (o) is automatically passed to our callback handlers (both success and failure) and can be received simply by including it between brackets in the function declaration. Let’s break down what each part of our successHandler() function does.

We fi rst defi ne three arrays; they need to be proper arrays so that some useful array methods can be called on the items we extract from the remote XML fi le. It does make the code bigger, but means that we can get exactly the data we need, in the format that we want. We also grab the newsitems container from the DOM.

The root variable that we declare next allows us easy access to the root of the XML document, which for reference is a news feed from the BBC presented in RSS 2.0 format. The three variables following root allow us to strip out all of the elements we are interested in.

These three variables will end up as collections of elements, which are similar to arrays in almost every way except that array methods, such as the ones we need to use, cannot be called on the

DWR Java AJAX Applications

krishnas — Sat, 13 Dec 2008 16:08:31 +0000

Connect to us ( @twitter | @facebook )

In this chapter, we will get to the actual hands-on work. We will develop samples based on DWR, which show how to dynamically change the common user interface elements such as tables and lists as well as fi eld completion. We also make a dynamic user interface skeleton for our samples that will hold all the samples in this book.

The section on dynamic user interfaces shows how to get started with a DWR application, and it presents a user interface skeleton that will be used to hold the tables and lists sample, and the fi eld completion (aka. autosuggest/autocomplete) sample. Samples in the following chapter will use the same user interface skeleton, with the exception of the sample applications in Chapter 7.

The following are the sections in this chapter:

Creating a Dynamic User Interface—starts with creating a web project and a
basis for samples mentioned in this chapter

Implementing Tables and Lists—shows us how to use DWR with them

Implementing Field Completion—has a sample for typical fi eld completion

Creating a Dynamic User Interface

The idea behind a dynamic user interface is to have a common “framework” for all samples. We will create a new web application and then add new features to the application as we go on. The user interface will look something like the following figure:

The user interface has three main areas: the title/logo that is static, the tabs that are dynamic, and the content area that shows the actual content.

The idea behind this implementation is to use DWR functionality to generate tabs and to get content for the tab pages. The tabbed user interface is created using a CSS template from the Dynamic Drive CSS Library (http://dynamicdrive.com/style/csslibrary/item/css-tabs-menu). Tabs are read from a properties fi le, so it is possible to dynamically add new tabs to the web page. The following screenshot shows the user interface.

Creating a New Web Project

1.First, we will create a new web project. Using the Eclipse IDE we do the following: select the menu File | New | Dynamic Web Project.

2.This opens the New Dynamic Web Project dialog; enter the project name DWREasyAjax and click Next, and accept the defaults on all the pages till the last page, where Geronimo Deployment Plan is created as shown in the following screenshot:

3.Enter easyajax as Group Id and DWREasyAjax as Artifact Id. On clicking Finish, Eclipse creates a new web project. The following screen shot shows the generated project and the directory hierarchy.

4.Before starting to do anything else, we need to copy DWR to our web application. All DWR functionality is present in the dwr.jar fi le, and we just copy that to the WEB-INF | lib directory.

A couple of files are noteworthy: web.xml and geronimo-web.xml. The latter is generated for the Geronimo application server, and we can leave it as it is. Eclipse has an editor to show the contents of geronimo-web.xml when we double-clickthe file.

Configuring the Web Application

The context root is worth noting (visible in the screenshot above). We will need it when we test the application.

The other XML fi le, web.xml, is very important as we all know. This XML will hold the DWR servlet defi nition and other possible initialization parameters. The following code shows the full contents of the web.xml file that we will use:

DWREasyAjax DWR Servlet dwr-invoker org.directwebremoting.servlet.DwrServlet debug true dwr-invoker /dwr/* index.html index.htm index.jsp default.html default.htm default.jsp

We hav e already seen the servlet defi nition in Chapter 3, in the section on confi guration. We use the same debug-init parameter here. Servlet mapping is the commonly used /dwr/*.

We remember that DWR cannot function without the dwr.xml configuration file. So we need to create the confi guration fi le. We use Eclipse to create a new XML file in the WEB-INF directory. The following is required for the user interface skeleton. It already includes the allow-element for our DWR based menu.

In the allow element, there is a creator for the horizontal menu Java class that we are going to implement here. The creator that we use here is the new creator, which means that DWR will use an empty constructor to create Java objects for clients. The parameter named class holds the fully qualifi ed class name.

Developing the Web Application

Since we have already defi ned the name of the Java class that will be used for creating the menu, the next thing we do is implement it. The idea behind the HorizontalMenu class is that it is used to read a properties fi le that holds the menus that are going to be on the web page.

We add properties to a fi le named dwrapplication.properties, and we create it in the same samples-package as the HorizontalMenu-class. The properties fi le for the menu items is as follows:

menu.1=Tables and lists,TablesAndLists
menu.2=Field completion,FieldCompletion

The syntax for the menu property is that it contains two elements separated by a comma. The fi rst element is the name of the menu item. This is visible to user. The second is the name of HTML template fi le that will hold the page content of the menu item. The class contains just one method, which is used from JavaScript and via DWR to retrieve the menu items. The full class implementation is shown here:

package samples; import java.io.IOException; import java.io.InputStream; import java.util.List; import java.util.Properties; import java.util.Vector; public class HorizontalMenu { public HorizontalMenu() { } public List getMenuItems() throws IOException { List menuItems = new Vector(); InputStream is = this.getClass().getClassLoader(). getResourceAsStream( "samples/dwrapplication.properties"); Properties appProps = new Properties(); appProps.load(is); is.close(); for (int menuCount = 1; true; menuCount++) { String menuItem = appProps.getProperty("menu." + menuCount); if (menuItem == null) { break; } menuItems.add(menuItem); } return menuItems; } }

The implementation is straightforward. The getMenuItems() method loads properties using the ClassLoader.getResourceAsStream() method, which searches the class path for the specified resource. Then, after loading properties, a for loop is used to loop through menu items and then a List of String-objects is returned to the client. The client is the JavaScript callback function that we will see later. DWR automatically converts the List of String objects to JavaScript arrays, so we don’t have to worry about that.

Testing the Web Application

We hav en’t completed any client-side code now, but let’s test the code anyway. Testing uses the Geronimo test environment.

1.The Project context menu has the Run As menu that we use to test the application as shown in the following screenshot:

2.Run on Server opens a wizard to defi ne a new server runtime. The following screenshot shows that the Geronimo test environment has already been set up, and we just click Finish to run the application. If the test environment is not set up, we can manually defi ne a new one in this dialog:

3.After we click Finish, Eclipse starts the Geronimo test environment and our application with it. When the server starts, the Console tab in Eclipse informs us that it’s been started.

The Servers tab shows that the server is started and all the code has been synchronized, that is, the code is the most recent (Synchronization happens whenever we save changes on some deployed fi le.) The Servers tab also has a list of deployed applications under the server. Just the one application that we are testing here is visible in the Servers tab.

Now comes the interesting part—what are we going to test if we haven’t really implemented anything? If we take a look at the web.xml fi le, we will fi nd that we have defi ned one initialization parameter. The Debug parameter is true, which means that DWR generates test pages for our remoted Java classes. We just point the browser (Firefox in our case) to the URL ttp://127.0.0.1:8080/DWREasyAjax/
dwr and the following page opens up:

This page w ill show a list of all the classes that we allow to be remoted. When we click the class name, a test page opens as in the following screenshot:

This is an interesting page. We see all the allowed methods, in this case, all public class methods since we didn’t specifi cally include or exclude anything. The most important ones are the script elements, which we need to include in our HTML pages. DWR does not automatically know what we want in our web pages, so we must add the script includes in each page where we are using DWR and a
remoted functionality.

Then there is the possibility of testing remoted methods. When we test our own method, getMenuItems(), we see a response in an alert box:

The array in the alert box in the screenshot is the JavaScript array that DWR returns from our method.

Developing Web Pages

The next step is to add the web pages. Note that we can leave the test environment running. Whenever we change the application code, it is automatically published to test the environment, so we don’t need to stop and start the server each time we make some changes and want to test the application.

The CSS style sheet is from the Dynamic Drive CSS Library. The fi le is named styles.css, and it is in the WebContent directory in Eclipse IDE. The CSS code is as shown:

/*URL: http://www.dynamicdrive.com/style/ */ .basictab{ padding: 3px 0; margin-left: 0; font: bold 12px Verdana; border-bottom: 1px solid gray; list-style-type: none; text-align: left; /*set to left, center, or right to align the menu as desired*/ } .basictab li{ display: inline; margin: 0; } .basictab li a{ text-decoration: none; padding: 3px 7px; margin-right: 3px; border: 1px solid gray; border-bottom: none; background-color: #f6ffd5; color: #2d2b2b; } .basictab li a:visited{ color: #2d2b2b; } .basictab li a:hover{ background-color: #DBFF6C; color: black; } .basictab li a:active{ color: black; } .basictab li.selected a{ /*selected tab effect*/ position: relative; top: 1px; padding-top: 4px; background-color: #DBFF6C; color: black; }

This CSS is shown for the sake of completion, and we will not go into details of CSS style sheets. It is suffi cient to say that CSS provides an excellent method to create websites with good presentation.

The next step is the actual web page. We create an index.jsp page, in the WebContent directory, which will have the menu and also the JavaScript functions for our samples. It should be noted that although all JavaScript code is added to a single JSP page here in this sample, in “real” projects it would probably be more useful to create a separate fi le for JavaScript functions and include the JavaScript fi le in the HTML/JSP page using a code snippet such as this:
DWR samples
DWR Easy Java Ajax Applications

This JSP is our user interface. The HTML is just normal HTML with a head element and a body element. The head includes reference to a style sheet and to DWR JavaScript fi les, engine.js, util.js, and our own HorizontalMenu.js. The util. js fi le is optional, but as it contains very useful functions, it could be included in all the web pages where we use the functions in util.js.

The body elem ent has a contentArea place holder for the content pages just below the menu. It also contains the content area for JavaScript functions for a particular content.The body element onload-event executes the loadMenuItems() function when the page is loaded. The loadMenuItems()function calls the remoted method of the HorizontalMenu Java class. The parameter of the HorizontalMenu. getMenuItems()JavaScript function is the callback function that is called by DWR when the Java method has been executed and it returns menu items.

The setMenuItems()function is a callback function for the loadMenuItems() function mentioned in the previous paragraph. While loading menu items, the Horizontal.getMenuItems()remoted method returns menu items as a List of Strings as a parameter to the setMenuItems() function. The menu items are formatted using the menuItemFormatter() helper function.

The menuItemFormatter()function creates li elements of menu texts. Menus are formatted as links, (a href) and they have an onclick event that has a function call to the getContent-function, which in turn calls the AppContent.getContent() function. The AppContent is a remoted Java class, which we haven't implemented yet, and its purpose is to read the HTML from a fi le based on the menu item that the user clicked. Implementation of AppContent and the content pages are described in the next section.

The setContent() function sets the HTML content to the content area and also evaluates JavaScript options that are within the content to be inserted in the content area (this is not used very much, but it is there for those who need it).

Our dynamic user interface looks like this:

Note the Fireb ug window at the bottom of the browser screen. The Firebug console in the screenshot shows one POST request to our HorizontalMenu.getMenuItems() method. Other Firebug features are extremely useful during development work, and we fi nd it useful that Firebug has been enabled throughout the development work.

Callback Functions

We saw our fi r st callback function as a parameter in the HorizontalMenu.getMen uItems(setMenuItems) function, and since callbacks are an important concept in DWR, it would be good to discuss a little more about them now that we have seen their fi rst usage.

Callbacks are used to operate on the data that was returned from a remoted method. As DWR and AJAX are asynchronous, typical return values in RPCs (Remote Procedure Calls), as in Java calls, do not work. DWR hides the details of calling the callback functions and handles everything internally from the moment we return a value from the remoted Java method to receiving the returned value to the callback function.

Two methods are recommended while using callback functions.

We have already seen the fi rst method in the HorizontalMenu.getMenuItems (setMenuItems) function call. Remember that there are no parameters in the getMenuItems()Java method, but in the JavaScript call, we added the callback function name at the end of the parameter list. If the Java method has parameters, then the JavaScript call is similar to CountryDB.getCountries(selectedLett ers,setCountryRows), where selectedLetters is the input parameter for the Java method and setCountryRows is the name of the callback function (we see the implementation later on).

The second method to use callbacks is a meta-data object in the remote JavaScript call. An example (a full implementation is shown later in this chapter) is shown here:

CountryDB.saveCountryNotes(ccode,newNotes, { callback:function(newNotes) { //function body here } });

Here, the function is anonymous and its implementation is included in the JavaScript call to the remoted Java method. One advantage here is that it is easy to read the code, and the the code is executed immediately after we get the return value from the Java method. The other advantage is that we can add extra options to the call. Extra options include timeout and error handler as shown in the following example:

CountryDB.saveCountryNotes(ccode,newNotes, { callback:function(newNotes) { //function body here }, timeout:10000, errorHandler:function(errorMsg) { alert(errorMsg);} });

It is also possible to add a callback function to those Java methods that do not return a value. Adding a callback to methods with no return values would be useful in getting a notifi cation when a remote call has been completed.

Afterword

Our first sample is ready, and it is also the basis for the following samples. We also looked at how applications are tested in the Eclipse environment.

Using DWR, we can look at JavaScript code on the browser and Java code on the server as one. It may take a while to get used to it, but it will change the way we develop web applications. Logically, there is no longer a client and a server but just a single run time platform that happens to be physically separate. But in practice, of course, applications using DWR, JavaScript on the client and Java in the server, are using the typical client-server interaction. This should be remembered when writing applications in the logically single run-time platform.

Implementing Tables and Lists

The first actual sample is very common in applications: tables and lists. In this sample, the table is populated using the DWR utility functions, and a remoted Java class. The sample code also shows how DWR is used to do inline table editing. When a table cell is double-clicked, an edit box opens, and it is used to save new cell data. The sample will have country data in a CSV fi le: country Name, Long Name, two-letter Code, Capital, and user-defi ned Notes. The user interface for the table sample appears as shown in the following screenshot:

Server Code for Tables and Lists

T he fi rst thing to do is to get the country data. Country data is in a CSV fi le (named countries.csv and located in the samples Java package). The following is an excerpt of the content of the CSV fi le (data is from http://www.state.gov ).

Short-form name,Long-form name,FIPS Code,Capital Afghanistan,Islamic Republic of Afghanistan,AF,Kabul Albania,Republic of Albania,AL,Tirana Algeria,People's Democratic Republic of Algeria,AG,Algiers Andorra,Principality of Andorra,AN,Andorra la Vella Angola,Republic of Angola,AO,Luanda Antigua and Barbuda,(no long-form name),AC,Saint John's Argentina,Argentine Republic,AR,Buenos Aires Armenia,Republic of Armenia,AM,Yerevan

The CSV fi le is read each time a client requests country data. Although this is not very effi cient, it is good enough here. Other alternatives include an in-memory cache or a real database such as Apache Derby or IBM DB2. As an example, we have created a CountryDB class that is used to read and write the country CSV. We also have another class, DBUtils, which has some helper methods. The DBUtils code is as follows:

package samples; import java.io.BufferedReader; import java.io.File; import java.io.FileReader; import java.io.FileWriter; import java.io.IOException; import java.io.InputStream; import java.io.InputStreamReader; import java.io.PrintWriter; import java.util.List; import java.util.Vector; public class DBUtils { private String fileName=null; public void initFileDB(String fileName) { this.fileName=fileName; // copy csv file to bin-directory, for easy // file access File countriesFile = new File(fileName); if (!countriesFile.exists()) { try { List countries = getCSVStrings(null); PrintWriter pw; pw = new PrintWriter(new FileWriter(countriesFile)); for (String country : countries) { pw.println(country); } pw.close(); } catch (IOException e) { e.printStackTrace(); } } } protected List getCSVStrings(String letter) { List csvData = new Vector(); try { File csvFile = new File(fileName); BufferedReader br = null; if(csvFile.exists()) { br=new BufferedReader(new FileReader(csvFile)); } else { InputStream is = this.getClass().getClassLoader() .getResourceAsStream("samples/"+fileName); br=new BufferedReader(new InputStreamReader(is)); br.readLine(); } for (String line = br.readLine(); line != null; line = br.readLine()) { if (letter == null|| (letter != null && line.startsWith(letter))) { csvData.add(line); } } br.close(); } catch (IOException ioe) { ioe.printStackTrace(); } return csvData; } }

The DBUtils class is a straightforward utility class that returns CSV content as a List of Strings. It also copies the original CSV fi le to the runtime directory of any application server we might be running. This may not be the best practice, but it makes it easier to manipulate the CSV fi le, and we always have the original CSV fi le untouched if and when we need to go back to the original version. The code for CountryDB is given here:

package samples; import java.io.FileWriter; import java.io.IOException; import java.io.PrintWriter; import java.util.Arrays; import java.util.List; import java.util.Vector; public class CountryDB { private DBUtils dbUtils = new DBUtils(); private String fileName = "countries.csv"; public CountryDB() { dbUtils.initFileDB(fileName); } public String[] getCountryData(String ccode) { List countries = dbUtils.getCSVStrings(null); for (String country : countries) { if (country.indexOf("," + ccode + ",") > -1) { return country.split(","); } } return new String[0]; } public List> getCountries(String startLetter) { List> allCountryData = new Vector>(); List countryData = dbUtils.getCSVStrings(startLetter); for (String country : countryData) { String[] data = country.split(","); allCountryData.add(Arrays.asList(data)); } return allCountryData; } public String[] saveCountryNotes(String ccode, String notes) { List countries = dbUtils.getCSVStrings(null); try { PrintWriter pw = new PrintWriter(new FileWriter(fileName)); for (String country : countries) { if (country.indexOf("," + ccode + ",") > -1) { if (country.split(",").length == 4) { // no existing notes country = country + "," + notes; } else { if (notes.length() == 0) { country = country.substring(0, country .lastIndexOf(",")); } else { country = country.substring(0, country .lastIndexOf(",")) + "," + notes; } } } pw.println(country); } pw.close(); } catch (IOException ioe) { ioe.printStackTrace(); } String[] rv = new String[2]; rv[0] = ccode; rv[1] = notes; return rv; } }

The CountryDB class is a remoted class. The getCountryData() method returns country data as an array of strings based on the country code. The getCountries()method returns all the countries that start with the specifi ed parameter, and saveCountryNotes() saves user added notes to the country specifi ed by the country code.

In order to use CountryDB, the following script element must be added to the index.jsp fi le together with other JavaScript elements.

There is one other Java class that we need to create and remote. That is the AppContent class that was already present in the JavaScript functions of the home page. The AppContent class is responsible for reading the content of the HTML fi le and parses the possible JavaScript function out of it, so it can become usable by the existing JavaScript functions in index.jsp file.

package samples; import java.io.ByteArrayOutputStream; import java.io.IOException; import java.io.InputStream; import java.util.List; import java.util.Vector; public class AppContent { public AppContent() { } public List getContent(String contentId) { InputStream is = this.getClass().getClassLoader(). getResourceAsStream( "samples/"+contentId+".html"); String content=streamToString(is); List contentList=new Vector(); //Javascript within script tag will be extracted and sent separately to client for(String script=getScript(content);!script.equals("");script=g etScript(content)) { contentList.add(script); content=removeScript(content); } //content list will have all the javascript //functions, last element is executed last //and all other before html content if(contentList.size()>1) { contentList.add(contentList.size()-1, content); } else { contentList.add(content); } return contentList; } public List getLetters() { List letters=new Vector(); char[] l=new char[1]; for(int i=65;i<91;i++) { l[0]=(char)i; letters.add(new String(l)); } return letters; } public String removeScript(String html) { //removes first script element int sIndex=html.toLowerCase().indexOf("")+9; return html.substring(sIndex, eIndex); } public String streamToString(InputStream is) { String content=""; try { ByteArrayOutputStream baos=new ByteArrayOutputStream(); for(int b=is.read();b!=-1;b=is.read()) { baos.write(b); } content=baos.toString(); } catch(IOException ioe) { content=ioe.toString(); } return content; } }

The getContent() method reads the HTML code from a fi le based on the contentId. ContentId was specifi ed in the dwrapplication.properties fi le, and the HTML is just contentId plus the extension .html in the package directory. There is also a getLetters() method that simply lists letters from A to Z and returns a list of letters to the browser.

If we test the application now, we will get an error as shown in the following screenshot:

We know why the AppContent is not defi ned error occurs, so lets fi x it by adding AppContent to the allow element in the dwr.xml fi le. We also add CountryDB to the allow element. The fi rst thing we do is to add required elements to the dwr.xml fi le. We add the following creators within the allow element in the dwr.xml fi le.

We explicitly define the methods we are remoting using the include elements. This is a good practice, as we don't accidentally allow access to any methods that are not meant to be remoted.

Client Code for Tables and Lists

We also need to add a JavaScript interface to the index.jsp page. Add the following with the rest of the scripts in the index.jsp file.

Be fore testing, we need the sample HTML for the content area. The following HTML is in the TablesAndLists.html fi le under the samples directory:

Countries

Show countries starting with
'; editBox+=""; editBox+=""; tdElement=dwr.util.byId(tdId); tdElement.innerHTML=editBox; dwr.util.byId(ccode+'NotesEditBox').focus(); } function cancelEditNotes(ccode) { var countryData=CountryDB.getCountryData(ccode, { callback:function(data) { var notes=data[4]; if(notes==undefined) { notes=' '; } var html=getNotesHtml(ccode,notes); var tdId=ccode+'_NotesCell'; var td=dwr.util.byId(tdId); td.innerHTML=html; } }); } function saveCountryNotes(ccode) { var editBox=dwr.util.byId(ccode+'NotesEditBox'); var newNotes=editBox.value; CountryDB.saveCountryNotes(ccode,newNotes, { callback:function(newNotes) { var ccode=newNotes[0]; var notes=newNotes[1]; var notesHtml=getNotesHtml(ccode,notes); var td=dwr.util.byId(ccode+"_NotesCell"); td.innerHTML=notesHtml; } }); }

There are lots of functions for table samples, and we go through each one of them. The fi rst is the selectLetter()function. This function gets the selected letter from the select element and calls the CountryDB.getCountries() remoted Java method. The callback function is setCountryRows. This function receives the return value from the Java getCountries() method, that is List>, a List of Lists of Strings.

The second function is addLetters(letters), and it is a callback function for theAppContent.getLetters() method, which simply returns letters from A to Z. The addLetters() function uses the DWR utility functions to populate the letter list. Th en there is a callback function for the CountryDB.getCountries() method. The parameter for the function is an array of countries that begin with a specifi ed letter. Each array element has a format: Name, Long name, (country code) Code, Capital, Notes. The purpose of this function is to populate the table with country data; and let's see how it is done. The variable, cellFuncs, holds functions for retrieving data for each cell in a column. The parameter named data is an array of country data that was returned from the Java class.

The table is populated using the DWR utility function, addRows(). The cellFuncs variable is used to get the correct data for the table cell. The cellCreator function is used to create custom HTML for the table cell. Default implementation generates just a td element, but our custom implementation generates the td-element with the div placeholder for user notes.

The getNotesHtml() function is used to generate the div element with the event listener for double-click.

The editCountryNotes() function is called when the table cell is double-clicked. The function creates input fi elds for editing notes with the Save and Cancel buttons. The cancelEditNotes() and saveCountryNotes()functions cancel the editing of new notes, or saves them by calling the CountryDB.saveCountryNotes() Java method.

The following screenshot shows what the sample looks like with the populated table:

Now that we have added necessary functions to the web page we can test the application.

Testing Tables and Lists

The application should be ready for testing if we have had the test environment running during development. Eclipse automatically deploys our new code to the server whenever something changes. So we can go right away to the test page http://127.0.0.1:8080/DWREasyAjax. On clicking Tables and lists we can see the page we have developed. By selecting some letter, for example "I" we get a list of all the countries that start with letter "I" (as shown in the previous screenshot).

Now we can add notes to countries. We can double-click any table cell under Notes. For example, if we want to enter notes to Iceland, we double-click the Notes cell in Iceland's table row, and we get the edit box for the notes as shown in the following screenshot:

The edit box is a simple text input fi eld. We didn't use any forms. Saving and canceling editing is done using JavaScript and DWR. If we press Cancel, we get the original notes from the CountryDB Java class using DWR and saving also uses DWR to save data. CountryDB.saveCountryNotes() takes the country code and the notes that the user entered in the edit box and saves them to the CSV fi le. When notes are available, the application will show them in the country table together with other country information as shown in the following screenshot:

Afterword

The sample in this section uses DWR features to get data for the table and list from the server. We developed the application so that most of the application logic is written in JavaScript and Java beans that are remoted. In principle, the application logic can be thought of as being fully browser based, with some extensions in the server.

Implementing Field Completion

Nowadays, fi eld completion is typical of many web pages. A typical use case is getting a stock quote, and fi eld completion shows matching symbols as users type letters. Many Internet sites use this feature.

Our sample here is a simple license text fi nder. We enter the license name in the input text fi eld, and we use DWR to show the license names that start with the typed text. A list of possible completions is shown below the input fi eld. The following is a screenshot of the fi eld completion in action:

Selected license content is shown in an iframe element from

http://www.opensource.org.

Server Code for Field Completion

We will re-use some of the classes we developed in the last section. AppContent is used to load the sample page, and the DBUtils class is used in the LicenseDB class. The LicenseDB class is shown here:

package samples; import java.util.List; import java.util.Vector; public class LicenseDB{ private DBUtils dbUtils=new DBUtils(); public LicenseDB() { dbUtils.initFileDB("licenses.csv"); } public List getLicensesStartingWith(String startLetters) { List list=new Vector(); List licenses=dbUtils.getCSVStrings(startLetters); for(String license : licenses) { list.add(license.split(",")[0]); } return list; } public String getLicenseContentUrl(String licenseName) { List licenses=dbUtils.getCSVStrings(licenseName); if(licenses.size()>0) { return licenses.get(0).split(",")[1]; } return ""; } }

The getLicenseStartingWith()method goes through the license names and returns valid license names and their URLs. Similar to the data in the previous section, license data is in a CSV fi le named licenses.csv in the package directory. The following is an excerpt of the fi le content:

Academic Free License, http://opensource.org/licenses/afl-3.0.php Adaptive Public License, http://opensource.org/licenses/apl1.0.php Apache Software License, http://opensource.org/licenses/apachepl-1.1.php Apache License, http://opensource.org/licenses/apache2.0.php Apple Public Source License, http://opensource.org/licenses/apsl-2.0.php Artistic license, http://opensource.org/licenses/artisticlicense- 1.0.php

There are quite a few open-source licenses. Some are more popular than others (like the Apache Software License) and some cannot be re-used (like the IBM Public License).

We want to remote the LicenseDB class, so we add the following to the dwr.xml file.

Client Code for Field Completion

The following script element will go in the index.jsp page.

The HTML for the field completion is as follows:

Field completion

Enter Open Source license name to see it's contents.

The input element, where we enter the license name, listens to the onkeyup event which calls the showPopupMenu() JavaScript function. Clicking the Input button calls the showLicenseText() function (the JavaScript functions are explained shortly). Finally, the two div elements are place holders for the pop-up menu and the iframe element that shows license content.

For the pop-up box functionality, we use existing code and modify it for our purpose (many thanks to http://www.jtricks.com). The following is the popup.js file, which is located under the WebContent | js directory.

jtricks.com/javascript/window/box.html * * Modified by Sami Salkosuo. */ // Moves the box object to be directly beneath an object. function move_box(an, box) { var cleft = 0; var ctop = 0; var obj = an; while (obj.offsetParent) { cleft += obj.offsetLeft; ctop += obj.offsetTop; obj = obj.offsetParent; } box.style.left = cleft + 'px'; ctop += an.offsetHeight + 8; // Handle Internet Explorer body margins, // which affect normal document, but not // absolute-positioned stuff. if (document.body.currentStyle && document.body.currentStyle['marginTop']) { ctop += parseInt( document.body.currentStyle['marginTop']); } box.style.top = ctop + 'px'; } var popupMenuInitialised=false; // Shows a box if it wasn't shown yet or is hidden // or hides it if it is currently shown function show_box(html, width, height, borderStyle,id) { // Create box object through DOM var boxdiv = document.getElementById(id); boxdiv.style.display='block'; if(popupMenuInitialised==false) { //boxdiv = document.createElement('div'); boxdiv.setAttribute('id', id); boxdiv.style.display = 'block'; boxdiv.style.position = 'absolute'; boxdiv.style.width = width + 'px'; boxdiv.style.height = height + 'px'; boxdiv.style.border = borderStyle; boxdiv.style.textAlign = 'right'; boxdiv.style.padding = '4px'; boxdiv.style.background = '#FFFFFF'; boxdiv.style.zIndex='99'; popupMenuInitialised=true; //document.body.appendChild(boxdiv); } var contentId=id+'Content'; var contents = document.getElementById(contentId); if(contents==null) { contents = document.createElement('div'); contents.setAttribute('id', id+'Content'); contents.style.textAlign= 'left'; boxdiv.contents = contents; boxdiv.appendChild(contents); } move_box(html, boxdiv); contents.innerHTML= html; return false; } function hide_box(id) { document.getElementById(id).style.display='none'; var boxdiv = document.getElementById(id+'Content'); if(boxdiv!=null) { boxdiv.parentNode.removeChild(boxdiv); } return false; } //-->

Functions in the popup.js fi le are used as menu options directly below the edit box.

The show_box()function takes the following arguments: HTML code for the pop-up, position of the pop-up window, and the "parent" element (to which the pop-up box is related). The function then creates a pop-up window using DOM. The move_box()function is used to move the pop-up window to its correct place under the edit box and the hide_box()function hides the pop-up window by removing the pop-up window from the DOM tree.

In order to use functions in popup.js, we need to add the following script-element to the index.jsp file:

Our own JavaScript code for the fi eld completion is in the index.jsp file. The following are the JavaScript functions, and an explanation follows the code:

function showPopupMenu() { var licenseNameEditBox=dwr.util.byId('licenseNameEditBox'); var startLetters=licenseNameEditBox.value; LicenseDB.getLicensesStartingWith(startLetters, { callback:function(licenses) { var html=""; if(licenses.length==0) { return; } if(licenses.length==1) { hidePopupMenu(); licenseNameEditBox.value=licenses[0]; } else { for (index in licenses) { var licenseName=licenses[index];//.split(",")[0]; licenseName=licenseName.replace(/\"/g,"""); html+="
"+licenseName+"
"; } show_box(html, 200, 270, '1px solid','completionMenuPopup'); } } }); } function hidePopupMenu() { hide_box('completionMenuPopup'); } function completeEditBox(licenseName) { var licenseNameEditBox=dwr.util.byId('licenseNameEditBox'); licenseNameEditBox.value=licenseName; hidePopupMenu(); dwr.util.byId('showLicenseTextButton').focus(); } function showLicenseText() { var licenseNameEditBox=dwr.util.byId('licenseNameEditBox'); licenseName=licenseNameEditBox.value; LicenseDB.getLicenseContentUrl(licenseName,{ callback:function(licenseUrl) { var html=''; var content=dwr.util.byId('licenseContent'); content.style.zIndex="1"; content.innerHTML=html; } }); }

The showPopupMenu() function is called each time a user enters a letter in the input box. The function gets the value of the input fi eld and calls the LicenseDB. getLicensesStartingWith() method. The callback function is specifi ed in the function parameters. The callback function gets all the licenses that match the parameter, and based on the length of the parameter (which is an array), it either shows a pop-up box with all the matching license names, or, if the array length is one, hides the pop-up box and inserts the full license name in the text fi eld. In the pop up box, the license names are wrapped within the div element that has an onclick event listener that calls the completeEditBox() function.

The hidePopupMenu()function just closes the pop-up menu and the competeEditBox() function inserts the clicked license text in the input box and moves the focus to the button. The showLicenseText() function is called when we click the Show license text button. The function calls the LicenseDB. getLicenseContentUrl() method and the callback function creates an iframe element to show the license content directly from http://www.opensource.org, as shown in the following screenshot:

Afterword

Field completion improves user experience in web pages and the sample code in this section showed one way of doing it using DWR.

It should be noted that the sample for fi eld completion presented here is only for demonstration purposes.

Summary

This chapter provided samples for a couple of common tasks that are used in web development: tables and lists, fi eld completion, and even a generic frame, called a dynamic user interface, for our sample code. Both the tables and lists sample and the fi eld completion sample had a very simple CSV-based "database" that holds the data for our purposes, and both had a remoted method that DWR uses to get the data from the server and show it in the client.

We also saw some good examples of HTML, CSS, and JavaScript. In fact, without knowledge of JavaScript it would be diffi cult to write web applications. Many years ago, as some of you may remember, JavaScript was a dirty word in web development and no self-respecting developer would touch JavaScript. But change is a part of life, and in this case, change has been for the better. JavaScript and Java work very well together with the DWR in between.

The next chapter continues with the user interface part, and shows a couple more samples, including a map scrolling functionality, similar to what is found in the popular Google Maps website. // ]]>

AJAX – Conversation with an Ajaxian

krishnas — Thu, 10 Apr 2008 12:18:51 +0000

Connect to us ( @twitter | @facebook )

AJAX – Conversation with an Ajaxain

Session 1: What is Ajax?

Scene: Friday evening at Malcolms cafe-a pub downtown frequented by Geeks:

Me : (jostling my way through the crowd) Where can I find the Ajaxian?

Bartender (pointing to a table on the far corner) Last table on the right.

Me : (interrupting an animated conversation on the Me : rits of social networking)
Excuse Me : ! I am looking for the Ajaxian.

Geek (pointing to a guy in black T-shirt and jeans) That’s him at the dart
board.
I waited till the gaMe : was over.

Me : Hi! You must be the Ajaxian. I am Raj’s friend.

Ajaxian You are ten minutes late. Let’s move over to the reading room where it will be quieter. A reading room in a pub! This must be the first, I thought.

Me : Thanks for Me : eting Me : .

Ajaxian No sweat, pal. How much of Ajax do you know?

Me : Pretty little except that it is extensively used by the likes of Google.

Ajaxian Why this sudden interest in Ajax?

Me : I am developing this highly interactive application that needs to perform a series of server hits at various stages of the user input. Conventional Web applications seem to take painfully long to refresh pages, rendering the application useless.

Ajaxian How many years of programming experience do you have? And what are the types of projects that you have done?
I was being questioned to determine my suitability to satisfy His Holinesss criteria. He was watching Me : keenly. I felt nervous. Even the interview for my first job was easy in comparison to this.

Me : For the last five years. I did a Field Force Automation application that ran off the Web used by Reps. Then I have been involved in a couple of intranets used by the staff Me : mbers of a multinational over a secure network. These projects have been developed on Java and Microsoft technologies.

Ajaxian Good. Only a Web developer with a minimum of two years of live applications that cater to a user base of over five hundred users can truly appreciate what we will be discussing. You just about Me : et that criterion. Else, I would have treated you to beer and a gaMe : of darts and wished you good-bye. I passed the test, I guess.

Ajaxian Do you know the history of Ajax?

I shook my head. This was like a classroom. Never had beer in one though. Ajaxian Let Me : quote Mr Jesse JaMe : s Garnett. In an article, soMe : tiMe : in 2005, he wrote “Web interaction designers can’t help but feel a little envious of our colleagues who create desktop software. Desktop applications have a richness and responsiveness that has
seeMe : d out of reach on the Web. The saMe : simplicity that
enabled the Web’s rapid proliferation also creates a gap between the experiences we can provide and the experiences users can get from a desktop application ….” The article describes how the early adopters like Google Suggest, Google Maps, Gmail, and Flickr used it to create a whole new user experience to browser applications.

Me : But why call it Ajax? It seems that soMe : one struggled to fit an
acronym.

Ajaxian True. Again to quote Garnett “… I needed soMe : thing shorter than ‘Asynchronous JavaScript+CSS+DOM+XMLHttp Request’ to use when discussing this approach with clients.” The fact is that
the naMe : has coMe : to stay and is accepted in the industry.

Me : So Ajax is Asynchronous JavaScript and XML.

Ajaxian Do you know the key difference between a classical Web application and an Ajax-enabled one?

Me : (Me : ekly) Is it the high use of JavaScript?

Ajaxian The difference is in the approach. It is a whole new way in which you architect a Web application to make it seem closer to a richclient application. The tools, as a developer, you use are the saMe : —HTML to display a page, JavaScript to build soMe : intelligence on the browser side, and a server-side scripting using Java, PHP, Visual Basic, etc. for backend processing.

Me : I see no difference.

Ajaxian Simply put, a normal Web application refreshes a whole page when any change has to be made on the screen, while in an Ajax-enabled application only that part of the browser screen that needs to be refreshed gets updated.

Me : Does this Me : an that clicking on the next-page button of a Webmail application causes the request to be sent to the server and the response from the server causes the whole page to be “repainted” in a typical Web application? While in the Ajaxversion of the saMe : , the request to the server causes data to be received by the browser which would update the relevant portions of the screen using JavaScript.

Ajaxian Perfect. This can be best understood by a diagram. Let’s move to the white board at that corner.
A café with a white board too! He sketches a diagram. Ajaxian Notice that in a normal Web application, every user interaction, i.e. click of a button, or Me : nu item, or link, or soMe : tiMe : s even shortcut keys, results in an HTTP request sent to the server. The server processes the request and generates a fresh HTML page using server-side scripts. This response stream traverses back to the browser which, then, renders the saMe : on the screen. During
this tiMe : , the user is dwindling his thumb.

Me : That’s when the browser is in a frozen stage, right?

Ajaxian That’s correct. Now, compare this to an Ajax scenario. Here, the user interaction, like before, causes an HTTP request to be sent to the server. The server, like before, processes the request and sends the response in the form of data back to the browser. Now, the browser parses this data and updates the page.

Me : Ah! That is the reason why you Me : ntioned that there is no screen refresh.

Ajaxian Yes, however, while the request is being serviced by the server, the user—and the browser—is free to let another interaction happen. Thus, the user can make a second server request, and while that is being serviced, the response from the earlier request could get refreshed on the screen.

Me : Interesting. Then, are there any prerequisites for Ajax to work?

Ajaxian ReMe : mber, this is Me : rely a new approach to Web developMe : nt. Thus, there are no external software components that it requires on the browser side as well as the server side to enable it. However, like any other Web application, it rides over the HTTP layer.

Me : Does this Me : an that it will work on all browsers?

Ajaxian The popular ones like Microsoft Internet Explorer 5.5 upwards, Mozilla 1.1 upwards, Safari, and Opera all support Ajax. Basically, it requires a browser to support asynchronous server communication using what is called as “xml-http-request.” Support for other technologies like DocuMe : nt Object Model or DOM and
Cascading Style Sheets or CSS are required. JavaScript is the scripting tool that is required to “package” all these together.

Me : If I disabled JavaScript on my browsers, Ajax applications would
fail, isn’t it?

Ajaxian Mate, if you disabled JavaScript, there is pretty little that will work on the Web today. But, yes, you are right! These applications won’t work.

Me : What, then, are the true benefits of Ajax?

Ajaxian (gulping soMe : beer he looked sternly) Why don’t you try answering that based on what you have heard?

Me : (soMe : what nervous) Firstly, the user has a much richer experience due to the faster response. This is especially so in input-formsbased screen where the input of one field could instantaneously cause additional inputs in the form…

Ajaxian better context-sensitive form manipulation,

Me : … and the user could simultaneously continue working while waiting for a response from an earlier request.

Ajaxian The benefits to an application architect and a developer are enormous. The steps for any given activity can now be broken down into smaller simpler steps. This renders itself to a serviceoriented structure using smaller components of code that are easy to develop and manage. The overall bandwidth required is also much lesser when using Ajax.

Me : How is that?

Ajaxian This is so because the response from the server that traverses over the network is only the updated data and not the full Web page. This results in applications appearing more efficient or rendering themselves “workable” even in low-bandwidth environ.

Me : nts.

Me : Yes. I did not think of it in that fashion. Now I get an idea as to
why the industry is going all agog with Ajax.

Ajaxian Would you like a print of this diagram? He pressed a key and a print out appeared on a printer attached alongside. Wow!

KEY POINTS

1. Ajax is a whole new approach to Web developMe : nt.

2. Ajax stands for Asynchronous Java and XML.

3. Mr. Jesse JaMe : s Garnett originally coined this acronym.

4. Ajax code is written in JavaScript and uses DocuMe : nt Object Model (DOM)
objects and Cascading Style Sheets (CSS) concepts.

5. Ajax causes a browser to get updated without a full screen refresh.

6. Simply put, an Ajax call causes a request to be submitted to the concerned

Web server and waits for the results from that server. Then, it extracts the
information received and updates the screen.

7. While an Ajax operation is “on,” the user can interact with the browser to
perform other “clicks.”

8. Popular sites that use Ajax include Google Mail, Google Maps, and Flickr.

AJAX Support in Struts 2.0

krishnas — Sat, 09 Jun 2007 01:44:38 +0000

Connect to us ( @twitter | @facebook )

Ajax or Asynchronous JavaScript and XML was introduced by Jesse James Garrett in 2005. He is called the “Father of Ajax” .Ajax is a collection of concepts and technologies that allows richer and more interactive user interaction with the web applications. The Ajax engine allows the user’s interaction with the application to happen asynchronously — independent of communication with the server. So the user is never staring at a blank browser window and an hourglass icon, waiting around for the server to do something.

Who is using AJAX

The most popular and the biggest user of AJAX is Google. Orkut, Gmail, the latest beta version of Google Groups, Google Suggest, and Google Maps — are Ajax applications Google mail, Google calendar and Google home page are some examples. In your Google mailbox the “loading” that is displayed in the top right corner is using these Ajax technologies. The new Yahoo homepage too uses some of these technologies. Another cool Ajax implemented website would be www.pageflakes.com Others are following suit: many of the features that people love in Flickr depend on Ajax, and Amazon’s A9.com search engine applies similar techniques.

The BackScreen of Ajax

In traditional webpages, the pages will be reloaded for each and every request. But in most of the cases only a part of the page will be processed. Hence such a page reload is unnecessary. Thus the usage of ajax plays a efficient role. In the webpages, that are using ajax, only the part of the page that has to be processed will be transferred to the web server and the processed data will be loaded in the page without a page reload.

AJAX internals

AJAX is not a single technology as mentioned earlier. It is important to remember that AJAX is not Java or .NET dependent.

Whatever be your back end code, you can use AJAX to communicate with it. People prefer AJAX for the high speed with which it works. It does it with three basic ways

Better utilization of browser cache

Batching up of network requests in a single packet to reduce network latency issues

Decreasing the workload on the server by not requiring it to process the entire page

Where can we use AJAX

Forms:

Web based forms are slow. AJAX can definitely improve the performance of web-based formsUser Communication:

User communications like chat pages, voting’s and ratings can be done efficiently using AJAX

News:

RSS feed is another popular concept where AJAX can be used

Data Manipulation:

This includes some sort of filtering data, selecting names from one combo box to another, sorting data, invoking the suggest criteria or a hint

Defining Ajax

As we have seen an introduction to AJAX, let us try to define it. Ajax isn’t a technology. It’s really several technologies, each flourishing in its own right, coming together in powerful new ways. Ajax incorporates:

Standards-based presentation using XHTML and CSS;

Dynamic display and interaction using the Document Object Model;

Data interchange and manipulation using XML and XSLT;

Asynchronous data retrieval using XMLHttpRequest;

And JavaScript binding everything together.
So, how does AJAX does this sending request and getting response from the backend server??

Using the XML Http Request object.

XML Http Request object

The XML HttpRequest was introduced by Microsoft in Internet Explorer 5.0. Recently , Mozilla and apple have included support for this in their web browsers(Firefox and Safari).This object is the fundamental basis for Ajax. Microsoft implementation is different from that of other web browsers, so when you create this object in your code, you need to do a typical browser check.

For Internet Explorer, we can create this object using,

Var req = new ActiveXObject(“Microsoft.XMLHTTP”);

For firefox and safari,

Var req = new XMLHttpRequest();

Struts and Ajax in Action

As we have seen enough of the theory behind the working of Ajax in struts let us see an example. Simple example is loading a drop down depending on the selected item in another drop down. We need to populate the characters in a “showcharacters” dropdown when a particular TV Show is selected in the “showTVShow” drop down using AJAX. Let us see the Ajax request response cycle for this scenario.

Fig 1.1 Ajax Request Response Cycle

Step 1: Create a jsp page (“tvshow.jsp”)

Let us take three TV shows which I like.”Lisse Maguire”,” That’s so Raven” and “Dhoom Machallo Dhoom”. We need to populate the characters dropdown as and when the TV Show dropdown value changes , so we decide to call the javascript in the “onchange()” of the select box.

TV Show: Lissie Maguire That’s so Raven Dhoom machale
Characters:

Here we are sending a URL to the Java script function.

“’ showCharacters.do?tvShow=' + this.value”

We are appending the selected item with the URL as a query string. We can also just send the Url and append the form contents in the java script.

Step:2 Making the AJAX Call to the Server

In the java script we need to create a XML HttpRequest object

function retrieveURL(url) { if (window.XMLHttpRequest) { // Non-IE browsers req = new XMLHttpRequest(); req.onreadystatechange = processStateChange; try { req.open("GET", url, true); } catch (e) { alert(e); } req.send(null); } else if (window.ActiveXObject) { // IE req = new ActiveXObject("Microsoft.XMLHTTP"); if (req) { req.onreadystatechange = processStateChange; req.open("GET", url, true); req.send(); } } }

Within the retrieveURL() method, the line req.onreadystatechange = processStateChange (note: no brackets) tells the browser to call the processStateChange() method once the server sends back its response. This method (now standard in AJAX) also determines whether it should use the Internet Explorer (ActiveX) or Netscape/Mozilla (XmlHttpRequest) object to ensure cross-browser compatibility.

Now when the XMLHttpRequest object is created , we ask the browser to call the processstatechange method when we get the response from the server.

Step 3: Configure action path in struts-config

This is the same old struts functioning.

“’showCharacters.do” is configured in the struts-config.xml

struts-config.xml

Step 4: Write the action class

The action class has to get the value selected in the TVShow dropdown and Get the appropriate list of characters using the function getCharacters(String tvShow) .

public class ShowTVAction extends Action { public ActionForward execute(ActionMapping mapping, ActionForm inForm, HttpServletRequest request, HttpServletResponse response) throws Exception { // Get a list of characters associated with the select TV show String tvShow = (String)request.getParameter("tvShow"); if (tvShow == null) { tvShow = ""; } ArrayList characters = getCharacters(tvShow); request.getSession().setAttribute("characters", characters); response.setContentType("text/html"); return mapping.findForward("success"); } // End execute() // This method returns a list of characters for a given TV show. If no TV // show is selected, i.e., initial page view, am empty ArrayList is returned. private ArrayList getCharacters (String tvShow) { ArrayList al = new ArrayList(); if (tvShow.equalsIgnoreCase("Lissie Mcguire")) { al.add("Lizzie Mcguire"); al.add("Mathew Mcguire"); al.add("Miranda"); al.add("Gordon"); } if (tvShow.equalsIgnoreCase("That’s so Raven ")) { al.add("Raven"); al.add("Chelse”); al.add("Orlanda"); al.add("Victor Backstor"); al.add("Cory Backstor"); } if (tvShow.equalsIgnoreCase("Dhoom machale ")) { al.add("Priyanka"); al.add("Koyel"); al.add("Nehal"); al.add("Aadhiraj"); al.add("Maleni"); } return al; } // End getCharacters() } // End class

Then it sets the Appropriate characters in the session and returns the keyword “success” Thus the control passes to showCharacters.jsp

Step 5: Write the contents you need to reload in the characters drop down (“ShowCharacters.jsp”)

In the showCharacters.jsp we load the contents of the characters drop down by taking their values from the session. Remember to add the tag libraries and surround the code with a form tag.

ShowCharacters.jsp

<%ArrayList ch = (ArrayList) request.getSession().getAttribute("characters"); String[] s = new String[ch.size()]; ch.toArray(s); for(int i=0;i <%} %>

Thus the showCharacters.jsp is the response from the Back end server. Once the response form the server is got by the browser. It calls the processStateChange() method

Step 6: Updating the Web Page with the AJAX Response

So far, we have looked at the JavaScript to do the AJAX call (listed above) and the Struts Action, ActionForm, and JSP (mostly the same, with the addition of tags). To complete our understanding of the Struts-AJAX project, we need to look at the following JavaScript function that is responsible for updating the current web page when the results from the server are received.

processStateChange(): The method name that we set before making the AJAX call. The XMLHttpRequest/Microsoft.XMLHTTP object calls this method once the server has completed sending back its response.

function processStateChange() { if (req.readyState == 4) { // Complete if (req.status == 200) { // OK response document.getElementById("characters").innerHTML = req.responseText; } else { alert("Problem: " + req.statusText); } } }

Here readystate is checked .If it is equal to 4 , it means the response is completely received and the status of the response is checked to 200.

If everything fit in, the response is set as the innerHTML of the span “characters”. We can also give the response to a div.

Thus we have done a asynchronous call to the back end and got the response and set it to a span element. Only the contents of the span have been reloaded while the rest of the page remained there.

Flow of Control

By adding the above JavaScript code to our application, the following steps now happen on the server and on the browser.

The page loads as per a normal Struts application.

The user changes a dropdown value, triggering an onChange() event, which calls the retrieveURL() JavaScript function

This JavaScript function makes a (background) call to the Struts Action on the server

This JavaScript function also sets the name of a second JavaScript function, which will be called when the server response is finished. In this case, it is set to the processStateChange() method.

As expected, when the server response is finished, the processStateChange() method is called.

The JavaScript sets the response to a span in the page

New Features in Struts 2.0 for AJAX

One of the useful enhancements in Struts 2.0 is the introduction of AJAX Theme

The Ajax theme extends the xhtml theme with AJAX features. The theme uses the popular DOJO AJAX/JavaScript toolkit. The new AJAX features include:

AJAX Client Side Validation

Remote form submission support (works with the submit tag as well)

An advanced div template that provides dynamic reloading of partial HTML

An advanced a template that provides the ability to load and evaluate JavaScript remotely

An AJAX-only tabbed Panel implementation

A rich pub-sub event model

Interactive auto complete tag

The framework provides a set of tags to help you ajaxify your applications, on Dojo.

To use the Ajax tags you need to set the “theme” attribute to “Ajax”.Use the head tag to configure the page for the Ajax theme.

URL

The “href” attribute must contain a url built with the URL tag
Example:

Initial Content

Set the “debug” attribute of the head tag to “true” to display debug information on the bottom of the page

Indicators

Use indicators to notify the user that a request is in progress. The indicator should be hidden when the page is loaded.

Dynamic Div

The div tag is a content area that can load its content asynchronously. The div tag can be forced to reload its content using topics. To define the topics that will trigger the refresh of the panel, use the “listenTopics” attribute. This tag will load its content when the page is loaded, unless “autoStart” is set to “false”.
While Dojo supports crossdomain XHR using IFrames, the S2 Ajax tags do not (yet)

This div will refresh every time the topics “/refresh0″ or “/refresh1″ are published:

to publish a topic use.

dojo.event.topic.publish("/refresh”);

Retrieve Remote Data

The simplest way to use the div tag is to provide an href attribute. For example

What this does after the HTML page is completely loaded; the specified URL will be retrieved asynchronously in the browser. The entire contents returned by that URL will be injected in to the div and will update every minute after a two second delay: Include the attribute errorText in case the URL is not loaded

errorText="Unable to contact weather server"

Submit

The submit tag can be used to update the content of its “targets” attribute with text returned from the asynchronous request. “targets” is a comma-delimited list of element ids. The “targets” attribute is optional.

Regular submit button that will update the content of div1:

Div 1

For using Submit button using an image add the attribute src

src="${pageContext.request.contextPath}/images/struts-rocks.gif"

If the submit button is used inside a form (href is not required on this case), the form will be submitted asynchronously using
A submit button can be used to submit a form, even if it is outside the form, using “formId”, “formFilter” and “href”. Note that in this case “href” is required.

Anchor

The anchor tag, like the submit tag; can be used to update the content of its “targets” attribute with text returned from the asynchronous request. “Targets” is a comma-delimited list of element ids. The “targets” attribute is optional.

This anchor will update the content of div1 and div2 with text returned form “/AjaxTest.action”

Div 1

Div 2

Update divs If the anchor tag is used inside a form (href is not required on this case), the form will be submitted asynchronously:

Submit form

Using the anchor tag to submit a form:

Submit form

AJAX Client Side Validation

Ajax Validation requires DWR servlet being setup, Dojo and the Ajax theme being used.

In the Ajax theme, DWR is used for normal validation while Dojo handles everything else (widgets, XHR, browser JS events etc.)

In order for validation to function properly it is advised to use standard Struts Tags

Setup DWR

DWR could be setup by having the following dwr configuration (dwr.xml) at /WEB-INF/ directory. If it needs to be in other places.

A DWRServlet need to be registered with the web application as well. The following shows a typical web.xml with DWRSerlvet.

dwr uk.ltd.getahead.dwr.DWRServlet debug true faces javax.faces.webapp.FacesServlet 1 faces *.action dwr /dwr/*

Add a form attribute

Add the attribute validate to the. The validate=”true” option is set for thetag to enable onblur-triggered validation

Validation - Basic

Now as usual have a form bean for this form with getters and setters and constructors, and configure the validation.xml for required fields

You must enter a name1319 Only people ages 13 to 19 may take this quiz

Summary

This is a simple introduction to Ajax.Start implementing it and you will find it simple, easy and attractive. One can use it to do many different things. It all accounts your creativity. It is a good approach in many cases, but will not be appropriate in others. If reaching the maximum possible audience is your goal, you would want to stay away from this. If a user disabling scripting in their browser might be a concern (and your site wouldn’t be any good without it), this probably isn’t a good answer either. There are other reasons to stay away from it in some situations, but the bottom line is treat it like any other tool in your toolbox: it will be right for some jobs, maybe “not so” for others.