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 AjaxTags Library-BASICS


Overview and  Installation

Overview of AjaxTags
  • Set of JSP custom tags to perform common Ajax operations
    • One of the biggest bangs for the buck of all Java-related Ajax tools
      •  Very low learning curve compared to other libraries
    • Built on top of script.aculo.us and Prototype
  • Pros
    • Very easy to use
    • Moderately powerful
    • Can extend functionality moderately easily with post functions and prefunctions
  • Cons
    • Moderately difficult to extend core tags
    • Future support and updates uncertain
Installation

  • Required Components
    • A variety of JAR files (to go in WEB-INF/lib)
      • ajaxtags-1.2-xxx.jar
      • JSTL, Jakarta Commons, several others
    • Script.aculo.us and Prototype JavaScript files
      • To go in WebContent/scripts or similar location
  • Downloading
    •  Build your own
      •  JAR files from http://ajaxtags.sourceforge.net/
        • But you have to dig for supporting JAR files
    • JavaScript from http://script.aculo.us/
Most Important Tags
  • ajax:anchors
    • Link that specifies a URL; result pops up in current page
      • In specified section (usually a div or span)
  • ajax:autocomplete
    • Textfield with dropdown giving completion options
      •  Completion options come from server
  • ajax:updateField
    • Field whose value is used to populate other field(s)
  • ajax:select
    • Pair of linked combo (dropdown) boxes.
      • When first one changes, result is sent to server and used to compute
        values for second
  • ajax:htmlContent
    • Button, link, or other element that invokes server-side resource and
      displays result in current page
    • Set of tabbed panels where contents of each panel comes from a
      different server-side resource
ajax:anchors

Tag Usage
  • General usage
    • Wrap around a hypertext link. 
    • When link clicked, result pops up in a designated region.
  • Tag attributes
    • target
      • id of the region where result should be displayed. Usually
        an initially-empty div or span element
    • parameters
      • Comma separated list of parameters that should be sent to
        server-side resource listed in the hypertext link.
  • Example:
    • <ajax:anchors ...parameters="name1={id1},name2={id2}">
    • Value in curly braces is the id of a textfield or other form entry
    •  Note that there is no $ -- it is  {id}, not ${id}
JSP Example

header.jsp
<% request.setAttribute("contextPath", request.getContextPath()); %>
<script src="${contextPath}/scripts/prototype-1.4.0.js"
        type="text/javascript"></script>
<script src="${contextPath}/scripts/scriptaculous.js"
        type="text/javascript"></script>
<script src="${contextPath}/scripts/overlibmws.js"
        type="text/javascript"></script>
<script src="${contextPath}/scripts/ajaxtags-1.2-beta2.js"
        type="text/javascript"></script>
<link rel="stylesheet" 
      href="${contextPath}/css/styles.css" 
      type="text/css"/>


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 Anchor Tags Examples</h3>

  <ajax:anchors target="time">
    <a href="${contextPath}/show-time.jsp">Show current time</a>
  </ajax:anchors>
  &nbsp;&nbsp;
  <span id="time"></span>


</body>
</html>

  • contextPath variable defined in header as
    request.getContextPath() and stored in request scope
  • Top of page used @taglib to enable ajax: tags
  • Attached style sheet used to style legend element

Server-Side Code

show-time.jsp
<b><%= new java.util.Date() %></b>

Directory Structure



Output:




Download Zip code


ajax:autocomplete

Tag Usage
  • • General usage
    • Place below form. Designate a server-side resource that is called each time
      textfield changes. Resource returns list that is displayed in dropdown.
  •  Tag attributes
    •  source
      •  id of the textfield where user will be typing
    •  target
      •  id of the textfield where result from dropdown displayed
      •  Usually same id as target, but see advanced usage section
    • baseUrl
      • Address of server-side resource
    • parameters
      • Comma separated list of parameters
    • className
      • CSS class name to apply to dropdown box. Dropdown will be formatted
        as a list, so CSS should suppress bullets and use absolute position
    • minimumCharacters
      • Number of chars in textfield before server-side resource triggered

Creating ajax-response List: Shortcut
  • Extend BaseAjaxServlet
    • – In package org.ajaxtags.servlets
  • Override getXmlContent
    • – Takes same arguments as doGet or doPost
  • Create an AjaxXmlBuilder
    • – In package org.ajaxtags.helpers
  • Add items to list
    • – builder.addItem("displayVal", "selectionVal")
  • Display val and selection val the same for most cases, but see advanced usage section
  • • Turn builder into XML list and return it
    • return(builder.toString())
Example:

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 Examples</h3>

  <form>
    <label for="language">Programming language:</label>
    <input type="text" id="language"/>
  </form>
  <ajax:autocomplete
    source="language"
    target="language"
    baseUrl="${contextPath}/language-completer.ajax"
    parameters="language={language}"
    className="autocomplete"
    minimumCharacters="1"/>



</body>
</html>

Server-Side Code

LanguageCompleter.java
package myservlets;

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

public class LanguageCompleter extends BaseAjaxServlet {
  private static final String languages = 
    "Java,C,C++,PHP,Visual Basic,Perl,Python,C#,JavaScript,Ruby,Delphi,SAS,SQL,"+
    "D,Lisp,Ada,FoxPro,Fortran,COBOL,Pascal,Lua,ActionScript,awk,Tcl/Tk,Prolog," +
    "MATLAB,Logo,IDL,Bash,ColdFusion,RPG,LabView,Smalltalk,Forth,ML,CL,Haskell," +
    "APL,VBScript,Natural,PL/I,Icon,Lingo,S-lang,Objective-C,OCaml,REXX,Mathematica";
  private static final String[] languageNames = languages.split(",");
  
  @Override
  public String getXmlContent(HttpServletRequest request, 
                              HttpServletResponse response
      throws Exception {
    String languagePrefix = request.getParameter("language");
    String languageList = makeLanguageList(languagePrefix);
    return(languageList);
  }
  
  private String makeLanguageList(String languagePrefix) {
    AjaxXmlBuilder builder = new AjaxXmlBuilder();
    for(String language: languageNames) {
      if(language.toUpperCase().startsWith(languagePrefix.toUpperCase())) {
        builder.addItem(language, language);
      }
    }
    return(builder.toString());
  }
}

web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" 
  xmlns="http://java.sun.com/xml/ns/j2ee" 
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
  xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 
  http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
  <servlet>
    <servlet-name>LanguageCompleter</servlet-name>
    <servlet-class>myservlets.LanguageCompleter</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>LanguageCompleter</servlet-name>
    <url-pattern>/language-completer.ajax</url-pattern>
  </servlet-mapping>
</web-app>

styles.css
.autocomplete {
  position: absolute;
  color: #333333;
  background-color: #ffffff;
  border: 1px solid #666666;
  font-family: Arial;
  overflow: hidden;
}
.autocomplete ul {
  padding: 0;
  margin: 0;
  list-style: none;
  overflow: auto;
}
.autocomplete li {
  display: block;
  white-space: nowrap;
  cursor: pointer;
  margin: 0px;
  padding-left: 5px;
  padding-right: 5px;
  border: 1px solid #ffffff;
}
.autocomplete li.selected {
  background-color: #cceeff;
  border-top: 1px solid #99bbcc;
  border-bottom: 1px solid #99bbcc;
}

Output:-






Download Zip code


ajax:updateField

Tag Usage

  • General usage
    • Place below form. Designate a server-side resource. Resource returns
      values that are inserted into other textfields.
  • Tag attributes
    • source
      • id of the textfield containing initial value
    • target
      •  id of the textfield where result from server (derived value) will go
        • Can supply a comma-separated list of ids
    • baseUrl
      • Address of server-side resource
        • If one result textfield, resource should return a single string
        • If multiple result textfields, resource should return a list
    • action
      • id of button or other element that will trigger submission
    • parameters
      • Comma separated list of parameters
    • parser
      • Omit if you return a string for use in a single textfield
      • Use parser="new ResponseXmlParser()" if you return a list for use in
        multiple textfields

Example:

JSP Code

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 Updatefield Tags 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"/>
</form>
<ajax:updateField
source="f"
target="c,k"
baseUrl="${contextPath}/temperature-converter.ajax"
action="convertButton"
parameters="f={f}"
parser="new ResponseXmlParser()"/>
</body></html>/

Server-side code

TemperatureConverter.java
package coreservlets;

import javax.servlet.http.*;

import org.ajaxtags.helpers.*;
import org.ajaxtags.servlets.*;

public class TemperatureConverter extends BaseAjaxServlet {
  @Override
  public String getXmlContent(HttpServletRequest request, 
                              HttpServletResponse response
      throws Exception {
    String fString = request.getParameter("f");
    double fTemp = -500;
    try {
      fTemp = Double.parseDouble(fString);
    catch(NumberFormatException nfe) {}
    String degreesC = "Illegal Temp";
    String degreesK = degreesC;
    if (fTemp >= -459.4) {
      double cTemp = (fTemp - 32)*(5.0/9.0);
      double kTemp = cTemp + 273;
      degreesC = String.format("%.2f", cTemp);
      degreesK = String.format("%.2f", kTemp);
    }
    AjaxXmlBuilder builder = new AjaxXmlBuilder();
    builder.addItem("c", degreesC);
    builder.addItem("k", degreesK);
    return(builder.toString());
  }
}


  • If you have a single textfield for the result
    • And the default parser
public String getXmlContent(HttpServletRequest request, 
HttpServletResponse response)
throws Exception {
String result = getResult(...);
return(result);
}


  • If you have multiple textfields for results
    • And set the parser to ResponseXmlParser
public String getXmlContent(HttpServletRequest request, 
HttpServletResponse response)
throws Exception {
AjaxXmlBuilder builder = new AjaxXmlBuilder();
builder.addItem("name1""val for textfield1");
builder.addItem("name1""val for textfield2");
return(builder.toString());
}

web.xml

<web-app>
<servlet>
<servlet-name>TemperatureConverter</servlet-name>
<servlet-class>
myservlets.TemperatureConverter
</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>TemperatureConverter</servlet-name>
<url-pattern>/temperature-converter.ajax</url-pattern>
</servlet-mapping>
</web-app>


Output:-






Download Zip code

ajax:select

Tag Usage
  • General usage
    • Place below form. When first dropdown (combobox) changes,
      server-side resource is invoked and values placed in second dropdown.
  • Tag attributes
    • source
      • id of the dropdown box containing initial value
    • target
      •  id of the dropdown where results from server will go
    • baseUrl
      • Address of server-side resource
        • Resource should return a list
    • parameters
      • Comma separated list of parameters
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 select Tags Examples</h3>

<form>
<label for="state">State:</label>
<select id="state">
<option value="">Select State</option>
<option value="Maryland">Maryland</option>
<option value="Virginia">Virginia</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="New Jersey">New Jersey</option>
<option value="New York">New York</option>
</select>
<label for="city">City:</label>
<select id="city" disabled="disabled">
<option value="">Select City</option>
</select>
</form>
<ajax:select
source="state"
target="city"
baseUrl="${contextPath}/city-finder.ajax"
parameters="state={state}" />
</body></html>
  • Have "dummy" value at top. Otherwise no event will fire if first state (Maryland) selected.
  • Second combobox should be initially disabled. 
  • AjaxTags will enable it when value inserted

Server-Side Code:
  • Build a list of results
    • Item name and item value identical in this case
public String getXmlContent(HttpServletRequest request, 
HttpServletResponse response)
throws Exception {
findDataBasedOnParameterFromFirstCombobox(...);
AjaxXmlBuilder builder = new AjaxXmlBuilder();
builder.addItem(val1, val1);
builder.addItem(val2, val2);
...
return(builder.toString());
}

CityFinder.java
package myservlets;

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

public class CityFinder extends BaseAjaxServlet {
  private Map<String,String> cityMap;
  
  @Override
  public String getXmlContent(HttpServletRequest request, 
                              HttpServletResponse response
      throws Exception {
    String state = request.getParameter("state");
    String cityList = cityMap.get(state);
    if (cityList == null) {
      return("");
    else 
      return(cityList);
    }
  }
  
  @Override
  public void init() {
    cityMap = new HashMap<String,String>();
    for(StateInfo state: StateInfo.getNearbyStates()) {
      cityMap.put(state.getStateName(), makeCityList(state.getCities()));
    }
  }
  
  private String makeCityList(CityInfo[] cities) {
    AjaxXmlBuilder builder = new AjaxXmlBuilder();
    for(CityInfo city: cities) {
      builder.addItem(city.getCityName(), city.getCityName());
    }
    return(builder.toString());
  }
}

StateInfo.java(Helper class)
package myservlets;

public class StateInfo {
  private String stateName;
  private CityInfo[] cities;

  public StateInfo(String stateName, CityInfo...cities) {
    setStateName(stateName);
    setCities(cities);
  }
  
  public String getStateName() {
    return(stateName);
  }
  
  public void setStateName(String stateName) {
    this.stateName = stateName;
  }
  
  public CityInfo[] getCities() {
    return(cities);
  }
  
  public void setCities(CityInfo[] cities) {
    this.cities = cities;
  }
  
  private static StateInfo[] nearbyStates = 
    new StateInfo("Maryland"
                    new CityInfo("Baltimore"635815),
                    new CityInfo("Frederick"57907),
                    new CityInfo("Gaithersburg"57698),
                    new CityInfo("Rockville"57402)),
      new StateInfo("Virginia"
                   new CityInfo("Virginia Beach"438415),
                   new CityInfo("Norfolk"231954),
                   new CityInfo("Chesapeake"218968),
                   new CityInfo("Arlington"195965)),
      new StateInfo("Pennsylvania"
                    new CityInfo("Philadelphia"1463281),
                    new CityInfo("Pittsburgh"316718),
                    new CityInfo("Allentown"106992),
                    new CityInfo("Erie"102612)),
      new StateInfo("New Jersey"
                    new CityInfo("Newark"280666),
                    new CityInfo("Jersey City"239614),
                    new CityInfo("Paterson"149843),
                    new CityInfo("Elizabeth"125809)),
      new StateInfo("New York"
                    new CityInfo("New York"8143197),
                    new CityInfo("Buffalo"279745),
                    new CityInfo("Rochester"211091),
                    new CityInfo("Yonkers"196425)) };

  public static StateInfo[] getNearbyStates() {
    return(nearbyStates);
  }
}

CityInfo.java(Helper class)
package myservlets;

public class CityInfo {
  private String cityName;
  private int population;
  
  public CityInfo(String cityName, int population) {
    setCityName(cityName);
    setPopulation(population);
  }
  
  public String getCityName() {
    return(cityName);
  }
  
  public void setCityName(String cityName) {
    this.cityName = cityName;
  }
  
  public int getPopulation() {
    return(population);
  }
  
  public void setPopulation(int population) {
    this.population = population;
  }
}



web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" 
  xmlns="http://java.sun.com/xml/ns/j2ee" 
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
  xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 
  http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

<servlet>
<servlet-name>CityFinder</servlet-name>
<servlet-class>
myservlets.CityFinder
</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>CityFinder</servlet-name>
<url-pattern>/city-finder.ajax</url-pattern>
</servlet-mapping>

  
</web-app>

Output:-











Download Zip code


ajax:htmlContent

Tag Usage
  • General usage
    • Place below form. When source element clicked, server-side
      resource is invoked and values placed inside html area.
  • Tag attributes
    • source
      •  id of the button or other element that will trigger submission
    • target
      • id of the html element where results from server will go
        • Usually a div or span element
    • baseUrl
      • Address of server-side resource
      • Resource should return regular HTML, not XML
    • parameters
      • Comma separated list of parameters
Example:-

JSP Pge

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 htmlcontent Examples</h3>

 <form>
    <label for="state2">State:</label>
    <select id="state2">
      <option value="">Select State</option>
      <option value="Maryland">Maryland</option>
      <option value="Virginia">Virginia</option>
      <option value="Pennsylvania">Pennsylvania</option>
      <option value="New Jersey">New Jersey</option>
      <option value="New York">New York</option>
    </select>
    <label for="city2">City:</label>
    <select id="city2" disabled="disabled">
      <option value="">Select City</option>
    </select>
    <input type="button" value="Show Population" id="button"/>
    &nbsp;&nbsp;<span id="population"></span>
  </form>
  <ajax:select
    baseUrl="${contextPath}/city-finder.ajax"
    source="state2"
    target="city2"
    parameters="state={state2}"/>
  <ajax:htmlContent
     baseUrl="${contextPath}/population-finder.ajax"
     source="button"
     target="population"
     parameters="state={state2},city={city2}"/>

</body></html>

  • Earlier dropdowns called "state" and "city". id's in page must be unique.
  • To populate second dropdown.
  • To compute population once both dropdowns are used and button pressed.

Server-Side Code: Return Value
  • Return regular HTML
    • Not XML
    • No need for AjaxXmlBuilder
public String getXmlContent(HttpServletRequest request, 
HttpServletResponse response)
throws Exception {
findDataBasedOnParameters(...);
String result =
String.format("<html-tag>...%s</html-tag>", data);
...
return(result);
}

PopulationFinder.java
package myservlets;

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

public class PopulationFinder extends BaseAjaxServlet {
  @Override
  public String getXmlContent(HttpServletRequest request, 
                              HttpServletResponse response
      throws Exception {
    String state = request.getParameter("state");
    String city = request.getParameter("city");
    int population = findPopulation(state, city);
    String populationString;
    if (population == 0) {
      populationString =
        String.format("<b>Don't know the population of %s.</b>", city);
    else 
      populationString =
        String.format("<b>Population of %s, %s is %,d.</b>"
                      city, state, population);
    }
    return(populationString);
  }
  
  private int findPopulation(String state, String city) {
    for(StateInfo stateInformation: StateInfo.getNearbyStates()) {
      if (stateInformation.getStateName().equals(state)) {
        for(CityInfo cityInformation: stateInformation.getCities()) {
          if (cityInformation.getCityName().equals(city)) {
            return(cityInformation.getPopulation());
          }
        }
      }
    }
    return(0);
  }
}


Output:



Download Zip code

ajax:tabPanel (and ajax:tab)

Tag Usage
  • General usage
    • Not necessarily any explicit form. Each tab populated by data from
      different URL.
  • Tag attributes
    • ajax:tabPanel
      • panelStyleID, contentStyleId
        • – ids for generated divs
      • • panelStyleClass, contentStyleClass, currentStyleClass
        • CSS style names for unselected tabs, tab content, selected tab
    • ajax:tab
      • caption
        • Text to show on tab
      • baseUrl
        • Address of server-side resource (resource should return HTML)
      • parameters
        • Comma separated list of parameters
      • defaultTab (true or false)
        • Indicates if tab is initially selected. You must specify true for one tab.
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 tabpane Examples</h3>

 <h2>Largest Cities in Selected Northeast States</h2>
  <div class="tabPanelWrapper">
    <ajax:tabPanel 
      panelStyleId="panel
      contentStyleId="content"
      panelStyleClass="tabPanel"
      contentStyleClass="tabContent"
      currentStyleClass="currentTab">
      <ajax:tab 
        caption="Maryland"
        baseUrl="${contextPath}/population-finder.ajax"
        parameters="state=Maryland,city=Baltimore"
        defaultTab="true"/>
      <ajax:tab 
        caption="Virginia"
        baseUrl="${contextPath}/population-finder.ajax"
        parameters="state=Virginia,city=Virginia Beach"/>
      <ajax:tab 
        caption="Pennsylvania"
        baseUrl="${contextPath}/population-finder.ajax"
        parameters="state=Pennsylvania,city=Philadelphia"/>
      <ajax:tab 
        caption="New Jersey"
        baseUrl="${contextPath}/population-finder.ajax"
        parameters="state=New Jersey,city=Newark"/>
      <ajax:tab 
        caption="New York"
        baseUrl="${contextPath}/population-finder.ajax"
        parameters="state=New York,city=New York"/>
    </ajax:tabPanel>
  </div>
</body></html>
  • <div class="tabPanelWrapper">:- Wrap entire tabbed panel in a div with a fixed width.
  • panelStyleClass="tabPanel"
  • contentStyleClass="tabContent"
  • currentStyleClass="currentTab">• Unselected tabs
    • Panel contents (should have border)
    • Selected tab
Style Sheet Entries

styles.css

.tabPanelWrapper {
  width: 450px;
}
.tabPanel {
  border-bottom: 1px solid #cccccc;
  margin: 0;
  padding-bottom: 19px;
  padding-left: 10px;
}
.tabPanel ul, .tabPanel li {
  display: inline;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.tabPanel a:link, .tabPanel a:visited {
  background: #E8EBF0;
  border: 1px solid #ccc;
  color: #666;
  float: left;
  font-size: small;
  font-weight: normal;
  line-height: 14px;
  margin-right: 8px;
  padding: 2px 10px 2px 10px;
  text-decoration: none;
}
.tabContent {
  background: #ffffff;
  border: 1px solid #cccccc;
  border-top: none;
  clear: both;
  margin: 0px;
  padding: 15px;
}
.tabPanel a:link.currentTab, .tabPanel a:visited.currentTab {
  background: #ffffff;
  border-bottom: 1px solid #ffffff;
  color: #000000;
}

Server-Side Code
  • Same PopulationFinder as previous  examples
    • Given a state and a city, returns the population in an  HTML (not XML) string
Output:-







Download Zip code