Share on Google+Share on Google+

Change Background color using Custom Tag

In this program, We will create a Custom Tag which changes the background color.

Change Background color using Custom Tag

In this program, We will create a Custom Tag which changes the background color.

JSP Custom Tags :
  • Provide a mechanism to a Web programmer to reuse and encapsulate complex recurring code in a JSP application.

  •  Provide simplicity and reusability of Java code.

  • Enable you to perform various functions, such as:

  1. Accessing all implicit variables of a JSP page, such as request, response, in, and out.

  2.  Modifying the response generated by a calling JSP page.

  3. Initializing and instantiating a JavaBean component.
Types of Custom Tags

The various types of custom tags that you can develop in JSP are :

  • Empty tags: Refer to the custom tags that do not have any attribute or body. The following code snippet shows an empty custom tag:

  <td:welcome />

  • Tags with attributes: Refer to custom tags for which you can define attributes to customize the behavior of the custom tag. The following code snippet shows a custom tag with an attribute color:

  <td: welcome color=?blue?></td:welcome>

  •  Tags with a body: Refer to the custom tag within which you can define nested custom tags, scripting elements, actions, HTML text,   and JSP directives. The following code snippet shows a custom tag that contains a JSP scripting element as its body:

 <td: welcome>



  •  Nested tags: Refer to the set of custom tags in which one custom tag encloses one or more custom tags. The following code snippet shows a nested custom tag:

 <td1:ifTag condition ?<%=eval>? >


       The expression evaluates to true



Development of Custom Tag :

To develop a custom tag, you need to perform following steps:

  •  Develop a tag handler or class file(.java)

  • Develop the Tag Library Descriptor (TLD) file

  •  Include the Tag Library in a JSP page

  • Deploy the application

EXAMPLE : In this Example, We will create a Custom Tag which changes the background color .When you enter your Name in Html form & select color -color changes according to your choice, this background color change is due to the custom tag, which we  have created with the help of tag handler class :-

Tag Handler File :  Build a class that implements the javax.servlet.jsp.tagext  tag interface as follows. Compile it and place it under the web-inf/classes directory (in the appropriate package structure).
package hello;
/* Import packages that are required for implementing custom tag */
import javax.servlet.jsp.*;
import javax.servlet.jsp.tagext.*;
import java.util.GregorianCalendar;
/* Extending the BodyTagSupport interface */
public class HelloTag extends BodyTagSupport
    private String name;
    private PageContext pageContext;
    private Tag parent;
    String color;
  /* Declaring the constructor for the class */
  public HelloTag()
  /* Initializing the name */
  public void setName(String name)
  { = name;
  /* Initializing the color */
  public void setColor(String color)
    this.color = color;
  public int doAfterBody() throws JspException
      /* Creating an instance of the BodyContent class */
      // Get the bodycontent as string
      BodyContent bc = getBodyContent();

      // GetJspWriter to output content 
String body = bc.getString();   
      /* Creating an instance of the JspWriter class */
      JspWriter out = bc.getEnclosingWriter();
      String dt;//Declaring the variable for system date
      /* Creating an instance of the GregorianCalendar class */
      GregorianCalendar now = new GregorianCalendar();
      /* Invoking the getTime() method */
      dt = now.getTime().toString();
      /* Finding the substring of the date type variable dt */
      String dt1 = dt.substring(11,16);
      /* Setting the color as selected by the user */
      out.print("<body bgcolor="+color+">");
      /* Displaying the custom message to the user according to 
         the system time */

      if(body != null)
        out.print("<CENTER>Hi"+body+"! </CENTER>");
        out.print("<CENTER>Good Morning to You.</CENTER>");
      if((dt1.compareTo("12.00")>0&& (dt1.compareTo("16.00")<0))
        out.print("<CENTER>Good Afternoon to You.</CENTER>");
      if((dt1.compareTo("16.00")>0&& (dt1.compareTo("24.00")<0))
        out.print("<CENTER>Good Evening to You.</CENTER>");
      out.print("<CENTER>Welcome to ABC Inc.</CENTER>");
      out.print("<CENTER>The current time: "+dt1+"</CENTER>");
    catch(IOException ioe)
             throw new JspException("Error:"+ioe.getMessage());
    return SKIP_BODY;

Tag Library Descriptor (TLD) file :  Now we need to describe the tag, so create a file called Mytaglib.tld and place it under the web-inf directory. 

<!-- tag specifies how you are going to reference the tag library

from the JSP page -->
<!-- tag can be used as a unique identifier for your tag library.-->
<info>A simple tag library for the examples</info>

HTML File :


<h2>Select a color of your choice </h2>
<font size=4 face="Verdana" color=#112244>
<form method="post" action="helloCustomTag.jsp">
<input type="radio" name="r1" value="G" checked="false">Green
<input type="radio" name="r1" value="Y" checked="false">Yellow
<input type="radio" name="r1" value="R" checked="false">Pink
<input type="radio" name="r1" value="B" checked="false">Blue
<p>Enter Name <input type="type" name="uname">
<input type="Submit" value= "Submit" name="b1">

JSP File :


<%-- Providing the location of the Mytaglib directive --%>
<%taglib uri="/Mytaglib.tld" prefix="first" %>
<TITLE>Customized Tag</TITLE>
  /* Setting the color parameter selected by the user */
  String str = request.getParameter("r1");
  /* Comparing the color and then invoking the custom
     tag with attribute color and body */

    <first:hello color="LIGHTGREEN">
    <first:hello color="RED">

    <first:hello color="LIGHTYELLOW">
    <first:hello color="LIGHTBLUE">

Deployment of application (OUTPUT) :

After Submitting the values :

Download Source Code



Posted on: June 29, 2010 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.