AJAX Matters

  • Home
  • Articles
  • About Us
Rss Feeds

Article Topics

All Articles
General AJAX
ASP.NET AJAX
Google Web Toolkit
AJAX Using Java
AJAX Using PHP
Dojo
 

articles >> ajax using java >> Getting Started with AJAX using Java : ...

Getting Started with AJAX using Java : Tutorial

By : Mamun Zaman
Jul 03, 2007
Printer friendly

Page 2 / 3

There is also an OpenSource project called AjaxTags. This AJAX Tag Library is a set of JSP tags that simplify the use of AJAX technology in Java Server Pages. This tag library offers following tags for common AJAX functionality.

  • Autocomplete: retrieves a list of values that matches the string entered in a text form field to a data store, just plain old autocomplete!
  • Callout: displays a callout or popup balloon, anchored to an HTML element with an onclick event
  • Select/dropdown: based on a selection within a dropdown field, a second select field will be populated, important for narrowing down the selections, like after selecting a country from a list another list shows only the states of the selected country
  • Toggle: toggles a form field between true and false and at the same time switches an image between two sources
  • Update field: updates one or more form field values based on response to text entered in another field, this is very cool for huge forms with several text and select fields
  • Portlet: portlet-style capability from a AJAX-enabled JSP tag
  • Tab Panel: enable an AJAX-based set of property pages.

This tag library relieves J2EE developers to write the necessary JavaScript to implement an AJAX-capable web form.

This implementation is a combination of Java classes and JavaScript source files. The Java code should be OS independent as there are no client side components. However, the Java is dependent on JDK 1.4+ and requires a Servlet container (like Tomcat) to run. The JavaScript should run in at least Firefox 1.0+ and Internet Explorer 5.0+.
To use AjaxTags tag library, first download it from http://ajaxtags.sourceforge.net/ and then copy the ajaxtags.jar into your WEB-INF/lib directory. Modify the web.xml for adding this tag library. Then add the dependency JavaScripts in your JSP pages. To learn more about this AjaxTags please visit the project homepage at http://ajaxtags.sourceforge.net/index.html.
There is another way of using AJAX with Java Server Faces user interface designs using Ajax4jsf. You can also use that. But the coolest AJAX tag library is jMaki. I’ll show you how to create a cool and nice with feature rich web page with jMaki and Netbeans 5.5 IDE in the next section.
According to the jMaki project team - jMaki is an Ajax framework that provides a lightweight model for creating JavaScript centric Ajax-enabled web applications using Java, PHP, and Phobos. To use jMaki with Netbeans IDE, first download the Netbeans module from https://ajax.dev.java.net/jmaki-plugin.html and install the module. Installation procedure is described nicely in this link.
After installing jMaki module you can create your web 2.0 applications with just some drags and drops. Some examples are here.
First, run the Netbeans IDE. Create a new project from File menu. Select web application. Select jMaki Ajax Framework. It will ask you to choose the CSS layout, select Standard one. It will create the banners, a side bar, home page link, sitemap link etc.

Here, you can see the JSP code at the left and the Palette at the right. There are a lots of jMaki widgets at the palette. jMaki has widgets for Flickr, Google, Yahoo and others. Using Flickr widgets, you can create captcha, word art, and search for images very easily. Let’s create an image search using jMaki Flickr widget. Just drag the widget from palette and drop in your JSP page. Now save the project, build and run. A browser will be opened as below.

Enter some value in the edit box and click Search. It will get the images from Flickr using AJAX.

The JSP file looks like –
<%@ taglib prefix="a" uri="http://jmaki/v1.0/jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<link rel="stylesheet" href="jmaki-standard.css" type="text/css"></link>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div class="outerBorder">

<div class="header">
<div class="banner">Application Name</div>

<div class="subheader">

<div>
<a href="mailto:feedback@youraddress">Feedback</a> |
<a href="#">Site Map</a> |
<a href="#">Home</a>
</div>

</div> <!-- sub-header -->
</div> <!-- header -->

            <div class="main">
<div class="leftSidebar">

Sidebar Content Here

</div> <!-- leftSidebar -->

                <div class="content" style="height:400px">

<a:widget name="flickr.search"
args="{
topic:'flickrSearch',
columns:3,
count:9
}"
service="/xhp"/>


</div> <!-- content -->

</div> <!-- main -->
</div> <!-- outerborder -->
</body>
</html>


<< Prev Page     Next Page>>    








General AJAX | ASP.NET AJAX | Google Web Toolkit | AJAX Using Java | AJAX Using PHP | Dojo


© 2000 - 2008 vDerivatives Limited All Rights Reserved.