Custom Tag Using Tag File

     In my last post, I demonstrated use of EnumMap by creating two custom tags, calendar and number, implementing HTMLTagTemplate interface. However, you can also write the tag in pure tag file as following.

calendar.tag

<%@ attribute name="value" required="true" rtexprvalue="true" %>
<%@ attribute name="property" required="true" rtexprvalue="true" %>
<%@ attribute name="src" required="false" rtexprvalue="true" %>
<%@ attribute name="size" required="false" rtexprvalue="true" %>
<%@ attribute name="imgStyleClass" required="false" rtexprvalue="true" %>
<%@ attribute name="styleClass" required="false" rtexprvalue="true" %>
<%@ attribute name="errorStyleClass" required="false" rtexprvalue="true" %>
<%@ attribute name="tabindex" required="false" rtexprvalue="true" %>
<%@ attribute name="timepicker" required="false" rtexprvalue="true" %>
<%@ attribute name="interval" required="false" rtexprvalue="true" %>

<%@ include file="/WEB-INF/jsp/common/includes.jsp"%>

<c:if test="${timepicker == null}"><c:set var="timepicker" value="false"/></c:if>
<c:if test="${interval == null}"><c:set var="interval" value="15"/></c:if>
<c:set var="inputName" value="${fn:replace(fn:replace(fn:replace(fn:replace(fn:replace(property, '.', ''), '(', ''), ')', ''), '[', ''), ']', '')}"/>
<c:set var="class" value="${styleClass == null ? 'right-align' : styleClass}"/>
<c:if test="${not empty request.errors.messages[property]}">
<c:set var="class" value="${errorStyleClass == null ? 'errorField' : errorStyleClass}"/>
</c:if> 
<input type="text" id="${inputName}" name="${inputName}" class="${class}" size="${size == null ? '29' : size}" tabindex="${tabindex}"/>
<img src="${src == null ? '../images/calendar.gif' : src}" id="${inputName}_img" name="${inputName}_img" class="${imgStyleClass == null ? 'calendar' : imgStyleClass}"/>
<div id="${inputName}_fmt"></div>
<input type="hidden" name="${property}" id="${property}" value="${value}"/>
<script type="text/javascript">
epochCalendar('${property}', '${inputName}', ${timepicker}, ${interval});
</script>

number.tag

<%@ attribute name="property" required="true" rtexprvalue="true" %>
<%@ attribute name="type" required="true" rtexprvalue="true" %>
<%@ attribute name="size" required="false" rtexprvalue="true" %>
<%@ attribute name="styleClass" required="false" rtexprvalue="true" %>
<%@ attribute name="errorStyleClass" required="false" rtexprvalue="true" %>
<%@ attribute name="tabindex" required="false" rtexprvalue="true" %>

<%@ include file="/WEB-INF/jsp/common/includes.jsp"%>

<c:set var="inputName" value="${fn:replace(property, '.', '')}"/>
<c:set var="class" value="${styleClass == null ? 'right-align' : styleClass}"/>
<c:if test="${not empty request.errors.messages[property]}">
<c:set var="class" value="${errorStyleClass == null ? 'errorField' : errorStyleClass}"/>
</c:if> 
<input type="text" id="${inputName}" name="${inputName}" class="${class}" size="${size == null ? "29" : size}" tabindex="${tabindex}"
onblur="javascript:formatNumberFunc(this,'${property}','${type}');"
onfocus="javascript:unformatNumber(this,'${type}');" maxlength="11"/>
<tags:input type="hidden" property="${property}" />
<script type="text/javascript">
if($('${property}').value == null || $('${property}').value == '')
$('${property}').value = 0;
$('${inputName}').value = formatNumberFunction($('${property}').value,'${type}');
</script>

     Please note that these tag files uses prototype in javascript. Following is some sample code in JSP page.

<%-- calendar selector for date of birth --%>
<tags:calendar value="${request.form.dob}" property="dob" tabindex="1"/>

<%-- format a number in currency --%>
<tags:number property="retailPrice" type="currency" tabindex="2"/>