Ajax Hacks: Tips & Tools for Creating Responsive Web Sites

Extend your code's reach by calling built-in Java objects remotely.

What if you had to read a file like a log on a server from a JavaScript object on the client browser? You might want to use the java.io.FileReader class on the server. (This class is part of the Java 2 Standard Editiona fancy way of saying that FileReader is built into Java but not JavaScript.) The DWR framework allows you to easily call standard Java methods from your JavaScript. This hack displays some date information on a web page. The data derives from remote method calls using the java.util.Date object.

JavaScript has a robust Date object and several associated methods, which you would use in most real-world applications that display dates on a web page. It's still nice to know, from at least a hack writer's perspective, that a great variety of standard Java objects and their methods are available from JavaScript. At the very least, you can adapt these techniques to several other similar situations.

The code in this hack displays the current date and time, and compares this data to the Greenwich mean time (GMT) date and time. Figure 5-4 in "Use DWR to Populate an Ordered List from a Java Array" [Hack #47] shows what the Date information looks like on a web page.

Setting up this code involves a little server configuration, as this chapter's first hack explained. (If you're still setting up DWR on the server, check back to "Integrate DWR into Your Java Web Application" [Hack #43] for a summary of the required steps.) Here is the configuration file to place on the server:

<dwr> <allow> <create creator="new" javascript="JsDate"> <param name="class" value="java.util.Date"/> </create> </allow> </dwr>

This XML file binds the JavaScript name JsDate to a corresponding Java Date object. In a Java web application, this XML file belongs in /WEB-INF. Make sure dwr.jar is also in /WEB-INF/lib.

The next step on the client side is to import all of the necessary JavaScript libraries into the web page that is calling the Java object remotely:

<head> <script type="text/javascript" src="/parkerriver/ajaxhacks/js/hacks5_1.js"></script> <script type="text/javascript" src="/parkerriver/dwr/interface/JsDate.js"></script> <script type="text/javascript" src="/parkerriver/dwr/engine.js"></script> <script type="text/javascript" src="/parkerriver/dwr/util.js"></script> <title>Bike Information</title> </head>

The first imported script, hacks5_1.js, includes the code for our application. The second (highlighted) script tag involves the JsDate object, which DWR binds to the java.util.Date object. We can use this JavaScript object to call public methods on the Java Date object. The next two imported libraries, engine.js and util.js, represent a required library for using DWR and an optional utilities library, respectively.

The hack's web page includes an h3 subheading tag and a div for containing the Date information:

<h4>The time now</h4> <div ></div>

Here is the code for remotely calling the Date object:

window.onload=function( ){setupDates( );}; function setupDates( ){ var div = document.getElementById("showDates"); //remove old messages div.innerHTML=""; //define callback function for displaying a local date JsDate.toLocaleString(function(dateString){ div.appendChild(document.createTextNode( "Your local date: "+dateString)); div.appendChild(document.createElement("br")); }); //define callback function for displaying //Greenwich Mean Time JsDate.toGMTString( function(dateString){ div.appendChild(document.createTextNode( "Greenwich Mean Time date: "+ dateString)); div.appendChild(document.createElement("br"));}); JsDate.getTimezoneOffset( function(dateString){ div.appendChild(document.createTextNode( "The difference between your time and GMT (in minutes): "+ dateString)); }); }

This code displays the date information as part of the window.onload event handler, which the browser's JavaScript implementation calls when the browser finishes loading the web page. setupDates( ) then displays different elements of the current time by calling three Java Date methods remotely:

  • toLocaleString( ) generates a current time and date string, as in Nov 21, 2005 7:58:16 AM.

  • toGMTString( ) displays the same kind of string, but in Greenwich mean time.

  • getTimezoneOffset( ) displays the number, in minutes, representing the difference between the user's current local time and GMT. For example, my local time in Massachusetts is 300 minutes, or 5 hours, behind GMT.

The code uses the JsDate object to remotely call these Java methods. As part of the DWR mechanism, the lone parameter for these method calls is a function that handles the Java return values (in these cases, various date/time strings). For example, here is the function that handles the toLocaleString( ) return value:

function(dateString){ div.appendChild(document.createTextNode( "Your local date: "+dateString)); div.appendChild(document.createElement("br")); }

The dateString parameter represents the actual string returned by remotely calling java.util.Date.toLocaleString( ). The div tag our page uses for displaying this information creates a new text node representing this string followed by a line break (br) tag.

For information on all the different options for making Java remote method calls from JavaScript, see the DWR page at http://www.getahead.ltd.uk/dwr/browser/intro/.

After initially loading the web page, the user can refresh the page, and the date/time strings will change to reflect the current time (local and GMT).

You could hack the hack by including a Refresh button with an onclick event handler that updates the date information without refreshing the entire page.

Related

Категории