Sunday Sep 17, 2006

Adding AJAX functionality to existing JSF Components

Writing a completely fresh JSF component that includes AJAX functionality may be easier. There are several examples to explain this scenario. However, given the fact that there are several JSF components already out there, one would want to add AJAX functionality to the existing JSF components.

I came across the article, Using Default Renderers in JavaServer Faces Technology to Add AJAX Functionality to Existing Components, that explains exactly this scenario. Even though this has been published a month ago, I thought it is worth to mention the article in my blog and certainly worth a read.

This article explains this topic with a neat example of a File Upload component. Earlier, I thought adding AJAX functionality to the existing JSF components may be an impossible task. However, with a simple example Mark proved that it is possible to do, even though, as he puts it, it is a complex task. Thanks Mark for the nice tutorial.

Friday Aug 18, 2006

AJAX resources for serious developers

Are you looking for AJAX resources? Yo can get all the info you need to AJAX-enable your web applications on the newly redesigned AJAX website http://developers.sun.com/ajax. You'll find more downloads, sample code, and documentation, and more info on surrounding technologies like jMaki, DynaFaces and Phobos.

If you are new to AJAX, then my recommendation is to take the 10-Week Free AJAX Programming (with Passion!) Online Course.

Tuesday Jan 17, 2006

Creating an AJAX application - my first experience

After seeing Craig's excellent AJAX demo during an Executive Briefing, I decided to learn AJAX. This is my first baby step, so decided to do it systematically

First, I got the book AJAX in action and stared reading it. It was a long read before I encountered the steps to write my first AJAX program in chapter 3, but worth a read.

I'm an IDE junkie. So I decided to use some kind of IDE that supports java script. Did a google search and after evaluating couple of Javascript editor, decided to use C-Point Antechinus JavaScript Editor v6

As you know, unlike Java development, Javascript development is a pain in the .. you know where. So having a JavaScript debugger will be handy. Since I'm already familiar with Mozilla project Venkman JavaScript Debugger, decided to use it.

Downloaded and installed Apache topmcat server to host the application.

Now on to the first AJAX program I wrote (turned out to be simpler than I imagined).

This is my simple AjAX program logic

  1. Create a Page with one button and title "My first AJAX Program"
  2. On clicking the button, asynchronously open a file and display its content in the page
First created couple of Java Script functions
  1. getXmlHttpRequest(), to crete the XML HTTP Request object. This object facilitates the asynchronous communication between the server and browser.
  2. sendHttpRequest(), to send the HTTP Request to the server.
  3. readyStateChangeCallback(), a call back function to monitor and receive data from server. This call back is added to the XmlHttpRequest object in the sendHttpRequest() function.
  4. displayData(), to display the received data, called in the readyStateChangeCallback(), when the completed status is received.
  5. geteData(), to get the data when the button is clicked. Set to the onClick attribute of the button.

Here is the simple HTML page with the AJAX code, I created.

Suggestion: If it is your first program, do not copy and paste. Rather type the code by hand. This will really help in understanding what you are doing. You might make mistake, but helps to understand the subject very clearly!

<html>
<head>
<title> AJAX Sample </title>
<script language = "JavaScript">

var READY_STATE_UNINITIALIZED = 0;
var READY_STATE_LOADING = 1;
var READY_STATE_LOADED = 2;
var READY_STATE_INTERACTIVE = 3;
var READY_STATE_COMPLETE = 4;

var xmlHttpRequest = null;
var console = null;

/\* Get the XMLHttpRequest object \*/
function getXmlHttpRequest(){
  if (window.XMLHttpRequest){
    xmlHttpRequest = new XMLHttpRequest();
  }else if (typeof ActiveXObject != "undefined"){
     xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
  }
  return xmlHttpRequest;
}

/\* Send the Http Request object to server\*/
function sendHttpRequest(url, params, httpMethod){
  if(httpMethod == null){
    httpMethod = "GET";
  }
  xmlHttpRequest = getXmlHttpRequest();
  if (xmlHttpRequest != null){
    xmlHttpRequest.onreadystatechange = readyStateChangeCallback;
    xmlHttpRequest.open(httpMethod, url, true);
    xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xmlHttpRequest.send(params);
  }
}

/\* Call back to monitor and receive data from server\*/
function readyStateChangeCallback(){
  var readyState = xmlHttpRequest.readyState;
  var data = null;
  if (readyState == READY_STATE_COMPLETE){
    data = xmlHttpRequest.responseText;
  }else{
     data = "loading .... [" + readyState + "]";
  }
  displayData(data);
}

/\* Display the received data in the \*/
function displayData(data){
  if( console != null){
    var newLine = document.createElement("div");
    console.appendChild(newLine);
    var txt = document.createTextNode(data);
    newLine.appendChild(txt);
  }
}

/\* Get the data when the button is clicked \*/
function getData(){
  console = document.getElementById("console");
  sendHttpRequest("welcome.txt");
}


</script>
</head>
<body bgcolor="white">
  <h1>My first AJAX program!</h1
  <input type="button" value="Get Data" name="button" onClick="getData()">
  </br> </br>
  <div id="console"> </div>
</body>
</html>

To ran the code, placed the HTML file in the webpages/ROOT folder along with welcome.txt file. This was needed because I did not create a web application to be deployed to the webserver.

Tip: Do not just open the HTML file in a browser from your desktop (the mistake I did first). This doesn't work and browser doesn't complain either. Using mozilla Javascript console I found out the problem

Here are the result

After clicking the button

Yahoo! My first AJAX Program worked.

Search

Categories
Archives
« August 2015
SunMonTueWedThuFriSat
      
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
     
Today