JaiswalTraining

Get the online training



Corejava Servlet Jsp  Php  Hibernate  Ajax Web Service   Ejb2.1 Ejb3.0 Struts Struts2  JPA Spring Ibatis   JSF    JSF2.0  CoreJavaDesignPattern    Jquery  Flex J2EE-Design-Patterns  Jboss7  Maven  Contact Me                                                                                                                                                                        
            IGNOU SMU PTU Project                                           Training                                                                                                                              
              

Contact Us  0091- 9210721663         jaiswaltraining@gmail.com





Corejava
Servlet
Jsp
Php
Hibernate
Ajax
Web Service
Ejb2.1
Ejb3.0
Struts  
Struts2
JPA
Spring
Ibatis
JSF
JSF2.0
CoreJavaDesignPattern
Jquery
Flex
J2EE-Design-Patterns
Jboss7
Maven








The Advanced AjaxTags Library

Overview

The Advanced AjaxTags Library

  • Regions that display temporarily while server-side resource runs
  • Autocomplete textboxes with associated values displayed in other textboxes
  • Prefunctions and postfunctions
    • Arbitrary JavaScript that runs before or after server-side resource
  • Functions that run when server has error
  • Multiple triggers for server-side resources

Setup/Review

Installation
  • Several required JAR files
    • In Eclipse: WebContent/WEB-INF/lib
    • In deployed app: WEB-INF/lib
  • Download from http://ajaxtags.sourceforge.net/
  • Prototype and Scriptaculous JS files
    • In Eclipse: WebContent/scripts
    • In deployed app: scripts
    • Download from http://script.aculo.us/
  • <%@ taglib uri="http://ajaxtags.org/tags/ajax"  prefix="ajax" %> is used with jsp.

Ajax:autocomplete with indicator

Basic Idea
  • Approach
    • indicator attribute designates section (usually div or span)
      that will be enabled while results are being loaded
  • It is disabled to start with, and disabled again when results come back
  • Often contains animated GIF showing progress
  • Main use
    •  Gives user feedback when server-side resource takes a long time
Example:

JSP Page

index.jsp

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%taglib uri="http://ajaxtags.org/tags/ajax" prefix="ajax"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" " />
<jsp:include page="/WEB-INF/includes/header.jsp" />
<title>Basic AjaxTags Examples</title>
</head>
<body>

  <h3>Ajax autocomplete Tags with Indicator Examples</h3>

<form>
<label for="language">Programming language:</label>
<input type="text" name="language" id="language"/>
<span id="indicatorRegion" style="display:none;">
<img src="${contextPath}/images/busy-indicator.gif"/>
Loading...
</span>
</form>
<ajax:autocomplete
source="language"
target="language"
baseUrl="${contextPath}/slow-language-completer.ajax"
className="autocomplete"
minimumCharacters="1"
indicator="indicatorRegion"/>


</body>
</html>

Server-Side Code

SlowLanguageCompleter.java
  • LanguageCompleter class shown in previous section Ajax basics tags.
package myservlets;

import javax.servlet.http.*;

public class SlowLanguageCompleter extends LanguageCompleter {
  @Override
  public String getXmlContent(HttpServletRequest request, 
                              HttpServletResponse response
      throws Exception {
    try Thread.sleep(5000)catch(Exception e) {}
    return(super.getXmlContent(request, response));
  }
}

Output:-




Downlaod Zip code

Ajax:autocomplete with Linked Fields

Basic Idea
  • Approach
    • – Server-side resource returns a list with names that are
      different from values
  • xmlBuilder.addItem("name1", "value1");
  • In last section, names and values were the same
    • When name selected from dropdown, that name (value) put into
      the textfield that has the dropdown
    • Names shown in dropdown box under main textfield
    • When a value is selected from dropdown, secondary
      value placed into a different textfield
  • Main uses
    • When you have auxiliary information to display to user
    • E.g., show description when catalog ID selected
  • When you have associated values
    • E.g., word in another language

Example:

JSP Page

index.jsp
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%taglib uri="http://ajaxtags.org/tags/ajax" prefix="ajax"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" " />
<jsp:include page="/WEB-INF/includes/header.jsp" />
<title>Basic AjaxTags Examples</title>
</head>
<body>

  <h3>Ajax autocomplete Tags with Linkedfield Examples</h3>

<form>
<label for="englishAnimal">English animal:</label>
<input type="text" id="englishAnimal"/>
<label for="spanishAnimal">Spanish animal:</label>
<input type="text" id="spanishAnimal"/>
</form>

<ajax:autocomplete
source="englishAnimal"
target="spanishAnimal"
baseUrl="${contextPath}/animal-completer.ajax"
parameters="englishAnimal={englishAnimal}"
className="autocomplete"
minimumCharacters="1"/>


</body>
</html>

Server-Side Code

AnimalCompleter.java
package myservlets;

import javax.servlet.http.*;
import org.ajaxtags.helpers.*;
import org.ajaxtags.servlets.*;

public class AnimalCompleter extends BaseAjaxServlet {
  @Override
  public String getXmlContent(HttpServletRequest request, 
                              HttpServletResponse response
      throws Exception {
    String animalPrefix = request.getParameter("englishAnimal");
    String animalList = makeAnimalList(animalPrefix);
    return(animalList);
  }
  
  private static final String[][] animals = 
  { {"aardvark""aardvark"},{"alligator""cocodrilo"},
    {"antelope""antílopo"}{"baboon""babuino"},
    {"bat""murciélago"}{"bear""oso"}{"cat""gato"},
    {"camel""camello"}{"conch""concha"}
  };
  
  private String makeAnimalList(String animalPrefix) {
    animalPrefix = animalPrefix.toUpperCase();
    AjaxXmlBuilder builder = new AjaxXmlBuilder();
    for(String[] animalPair: animals) {
      String englishAnimal = animalPair[0];
      String spanishAnimal = animalPair[1];
      if(englishAnimal.toUpperCase().startsWith(animalPrefix)) {
        builder.addItem(englishAnimal, spanishAnimal);
      }
    }
    return(builder.toString());
  }
}


Output:-








Download Zip code

Ajax:updateField with  postFunction

Basic Idea

  • Approach
    • You list a regular JavaScript function as the value of the
      postFunction or preFunction attribute
  • Almost all tags support postFunction and preFunction
    • The postFunction fires after the server-side resource is finished
  • The preFunction fires just before the server-side resource is called
  • Main uses
    • preFunction
  • To make an "I am working" message or image
  • Form field validation
    • postFunction
  • To highlight results or show a success message
Script
  • scripts/postFunction.js
    • Iit is using scriptaculous calls
function showConversionSuccess() {
// Temporarily highlight Celsius and Kelvin fields
new Effect.Highlight('c')
new Effect.Highlight('k')
// Turn on successMessage div, then fade it out.
Element.show('successMessage');
setTimeout("Effect.DropOut('successMessage');"2000);
}

  • index.jsp
    • Load scriptaculous and Prototype. Defines contextPath variable
<head>
...
<jsp:include page="/WEB-INF/includes/header.jsp"/>
<script src="${contextPath}/scripts/postFunction.js"
type="text/javascript"></script>
<title>Advanced AjaxTags Examples</title>
</head>


Example

JSP Page

index.jsp
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%taglib uri="http://ajaxtags.org/tags/ajax" prefix="ajax"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" " />
<jsp:include page="/WEB-INF/includes/header.jsp" />
<script src="${contextPath}/scripts/postFunction.js"
type="text/javascript"></script>

<title>Advance AjaxTags Examples</title>
</head>
<body>

  <h3>Ajax Updatefield Tags with post function Examples</h3> 
<form>

    <label for="f">Enter temperature in Fahrenheit:</label>
    <input type="text" id="f"/>
    <input type="button" id="convertButton" value="Convert"/>
    <hr width="500" align="left"/>
    <label for="c">Temperature in Celsius:</label>
    <input type="text" id="c"/>
    <label for="k">Temperature in Kelvin:</label>
    <input type="text" id="k"/><p/>
    <div id="successMessage" style="display:none" class="temporaryMessage">
    Calculation complete</div>
  </form>
  <ajax:updateField
    source="f"
    target="c,k"
    baseUrl="${contextPath}/temperature-converter.ajax"
    action="convertButton"
    parameters="f={f}"
    parser="new ResponseXmlParser()"
    postFunction="showConversionSuccess"/>
</body></html>

Server-Side Code
  • Same TemperatureConverter as in previous Basic tags 
    • Given a temperature in Fahrenheit, returns a list of
      corresponding temperatures in Celsius and Kelvin
    • Use of postFunction does not change how server-side
      resource works

Output:
  • Immediately after pressing convert button.

  • Two seconds later.


Download Zip code