Building UI components using JSP custom tags

In the name of Allah, the gracious the merciful

In this article, we will build custom UI components using JSP custom tags so that we can customize your own UI components by adding for example style sheet effects.

Lets start:

Tocreate any custom tag in JSP, first you need to figure it out, so we expect that tag will looks like that

<ui:TextBox
id=”txt1” size=”20” value=”${param.username}” />

so, the TextBox component appears to have id attribute that is mandatory, size and value attributes that are not.

Lets build the Tag Handler class:

we will use JSP 2.0 new SimpleTagSupport class as a superclass for our handler:

package org.daz;

import javax.servlet.jsp.tagext.*;

import javax.servlet.jsp.JspWriter;

import javax.servlet.jsp.JspException;

public class UITagHandler extends SimpleTagSupport {

private java.lang.String id;
private java.lang.String value = "";
private java.lang.String size;

public void doTag() throws JspException {

JspWriter out=getJspContext().getOut();

try
{

String tag = "<input type='text' name='" + id + "' size='"
+ size + "'" + " value = '" + value + "' />";

out.write(tag);}

catch (java.io.IOException ex) {

throw new JspException(ex.getMessage());

}

}
public void setId(java.lang.String value) {

this.id = value;

}

public void setValue(java.lang.String value) {

this.value = value;

}

public void setSize(java.lang.String value) {

this.size = value;

}

}

Note the doTag() method, it calls getJspContext() to get a JspContext instance that can get a JspWriter from to write tag contents.

As you noticed that we utilize the class <input> tag of HTML, so we need to customize that tag as we need as I said before.

Lets now create the TLD file:

<?xml
version="1.0" encoding="UTF-8"?>

<taglib
version="2.0" 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
web-jsptaglibrary_2_0.xsd">

<tlib-version>1.0</tlib-version>

<short-name>ui
customtags</short-name>

<uri>http://daz.org/uicustomtags</uri>

<tag>

<name>TextBox</name>

<tag-class>org.daz.UITagHandler</tag-class>

<body-content>empty</body-content>

<attribute>

<name>id</name>

<required>true</required>

<type>java.lang.String</type>

</attribute>

<attribute>

<name>value</name>

<rtexprvalue>true</rtexprvalue>

<type>java.lang.String</type>

</attribute>

<attribute>

<name>size</name>

<rtexprvalue>true</rtexprvalue>

<type>java.lang.String</type>

</attribute>

</tag>

</taglib>

That's all about the custom UI component, lets try it in.

create a JSP page and code that in it:

<%@
taglib uri=”http://daz.org/uicustomtags”
prefix=”ui” %>

<form
action="doAction.do" method="post" >

firstname
<ui:TextBox id="firstname" size="50" /> <br
/>

lastname
<ui:TextBox id="lastname" size="50" /> <br
/>

programming
languages <ui:TextBox id="fav" size="30" />
<br />

<input
type="submit" />

</form>

create
this Servlet to handle the JSP page ( as a Controller ):

import java.io.*;

import java.net.*;

import javax.servlet.*;

import javax.servlet.http.*;

public class TestServlet extends HttpServlet {

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

response.setContentType("text/html");

PrintWriter out = response.getWriter();
out.println ("Hello " + request.getParameter("firstname") + " " + request.getParameter("lastname"));

out.println ("<br> we know that you like " + request.getParameter("fav")+ " programming language.");

out.flush();

}

}

note: put this in your DD file to make the Servlet is the action of the form:

<servlet>

<servlet-name>TestServlet</servlet-name>

<servlet-class>TestServlet</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>TestServlet</servlet-name>

<url-pattern>/insertData.do</url-pattern>

</servlet-mapping>

Now our example has finished, but you should realize that this idea also can be used to make the design of your JSP pages more easier.
thus instead of using <jsp:include> and <c:import> tags to import headers and footers for your pages, you can build your own custom tags that represent each part of you page, example you would

design tag for the header <ui:header id=”hdr1” param1=”${xx}
param2=${xxx} /> and also for the navigation pans and the footer,
so your page design became easier and more clearer.