Sunday, July 1, 2012

JSP Custom Tag: Body Tag


Introduction

In the previous post (http://ben-bai.blogspot.tw/2012/06/jsp-custom-tag-simple-tag.html) we implement a simple tag 'errMsg' to display some error message, in this post, we will create a body tag 'fadeoutBlock' to display content in a fade-out block.

A body tag is a JSP custom tag that has a body, the only difference between simple-tag and body-tag is body-tag will evaluate its body content but simple-tag will not.

Pre-define
The spec of the fadeoutBlock tag:
1. Can contain any JSP content in its body.
2. Attributes:
    style: the css style as normal html tag's style.
    styleClass: the css class as normal html tag's class.
    duration: the duration of fade-out action in milli seconds.
    step: the value that the opacity will be 'decreased' in each fade-out step.
3. Do fade-out while clicked.

The Program

FadeoutBlock.java

package test.tag.custom;

import java.io.IOException;

import javax.servlet.jsp.JspException;
import javax.servlet.jsp.JspWriter;
import javax.servlet.jsp.tagext.TagSupport;

/**
 * Fadeout Block JSP Custom Tag, body tag, can contain jsp content body.
 *
 */
public class FadeoutBlock extends TagSupport {

    private static final long serialVersionUID = 3563006227719937104L;
    private String _style = "background-color: CCBBEE;";
    private String _styleClass = null; //--css class
    private Integer _duration = 1000;
    private float _step = 0.1f;

    /**
     * tag attribute setter
     * @param style The style of this element
     */
    public void setStyle(String style){
        if (style != null && !style.isEmpty())
            _style = style;
    }
    /**
     * tag attribute setter
     * @param styleClass The css class of this element
     */
    public void setStyleClass(String styleClass){
        _styleClass = styleClass;
    }
    /**
     * tag attribute setter
     * @param duration The duration of fade-out action
     */
    public void setDuration (Integer duration) {
        if (duration > 0)
            _duration = duration;
    }
    /**
     * tag attribute setter
     * @param step The step value of each fade-out step
     */
    public void setStep (float step) {
        if (step > 0)
            _step = step;
    }
    /**
     * do start tag
     */
    @Override
    public int doStartTag() throws JspException {
        try {
            JspWriter out = pageContext.getOut();
            // output div's start tag, style, class and fadeOut function
            out.print("<div style=\""+_style+"\"");
            if (_styleClass != null)
                out.print(" class=\""+_styleClass+"\"");
            out.print("onclick=\""+fadeOut()+"\">");
        } catch (Exception e) {
            throw new JspException("Error: IOException while writing to client");
        }
        //-- continue process the body content
        return EVAL_BODY_INCLUDE;
    }
    /**
     * do end tag
     */
    @Override
    public int doEndTag() throws JspException {
        try {
            // output div's end tag
            pageContext.getOut().print("</div>");
        }
        catch (IOException ioe) {
            throw new JspException("Error: IOException while writing to client");
        }
        //-- continue process the page
        return EVAL_PAGE;
    }
    /**
     * The fadeOut function, its better provided from a js file.
     * @return String, the fadeOut function
     */
    private String fadeOut () {
        StringBuilder sb = new StringBuilder();
        sb.append("var ele = this, time = "+_duration / (1.0/_step)
                +", eStyle = ele.style, inc = "+_step+", timer, value;")
            .append("if (!eStyle.opacity) eStyle.opacity = 1;")
            .append("if (!ele.fo) ele.fo = setInterval(function () {")
            .append("if (eStyle.opacity > 0) {")
            .append("value = eStyle.opacity; eStyle.opacity -= inc;")
            .append("if (value == eStyle.opacity) value = eStyle.opacity = 0;")
            .append("else value = eStyle.opacity;")
            .append("eStyle.filter = 'alpha(opacity = ' + (value*100) + ')';")
            .append("} else clearInterval(ele.fo);")
            .append("}, time);");
        
        return sb.toString();
    }
}

The tag definition

Add the fragment below to the tld file which already created from previous post (http://ben-bai.blogspot.tw/2012/06/jsp-custom-tag-simple-tag.html) then export jar as described in the previous post.

<!-- fadeoutBlock tag -->
    <tag>
        <!-- tag name -->
        <name>fadeoutBlock</name>
        <!-- tag class path -->
        <tagclass>test.tag.custom.FadeoutBlock</tagclass>
        <!-- denotes the tag has JSP body content -->
        <bodycontent>JSP</bodycontent>
        <!-- attributes -->
        <attribute>
            <!-- attribute name -->
            <name>style</name>
            <!-- required or not -->
            <required>false</required>
            <!-- el enable or not (true denotes can be eval at runtime) -->
            <rtexprvalue>false</rtexprvalue>
        </attribute>
        <attribute>
            <!-- attribute name -->
            <name>styleClass</name>
            <!-- required or not -->
            <required>false</required>
            <!-- el enable or not (true denotes can be eval at runtime) -->
            <rtexprvalue>false</rtexprvalue>
        </attribute>
        <attribute>
            <!-- attribute name -->
            <name>duration</name>
            <!-- required or not -->
            <required>false</required>
            <!-- el enable or not (true denotes can be eval at runtime) -->
            <rtexprvalue>false</rtexprvalue>
        </attribute>
        <attribute>
            <!-- attribute name -->
            <name>step</name>
            <!-- required or not -->
            <required>false</required>
            <!-- el enable or not (true denotes can be eval at runtime) -->
            <rtexprvalue>false</rtexprvalue>
        </attribute>
    </tag>

Test page

fadeoutBlockTest.jsp

<%@ page isErrorPage="true" language="java"
    contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page isELIgnored ="false" %>
<!-- use the custom taglib with prefix ct -->
<%@taglib prefix="ct" uri="http://test.tag.custom/jsp/impl/taglib"%>
<html>
    <head>
        <meta http-equiv="Content-Type" 
            content="text/html; charset=UTF-8"/>
        <title>EL Math Practice</title>
        <style>
            .msg_block {
                position: absolute;
                left: 300px;
                top: 200px;
                width: 300px;
                height: 150px;
            }
        </style>
    </head>
    <body>
        <ct:fadeoutBlock styleClass="msg_block"
            duration="3000" step="0.05">
            <div style="margin: 20px; border: 1px solid #8463AE;">
                test message, click to fade-out
            </div>
        </ct:fadeoutBlock>
    </body>
</html>


The Result

View the demo flash on line
http://screencast.com/t/DAY7MfKaxtSg

You can find the flash file at github:
https://github.com/benbai123/JSP_Servlet_Practice/blob/master/demo_src/JSP/Custom_tag/fadeOutBlock.swf


Reference
http://java.sun.com/j2ee/tutorial/1_3-fcs/doc/JSPTags.html

Download
The full project is at github
https://github.com/benbai123/JSP_Servlet_Practice/tree/master/Practice/CustomTagPractice

No comments:

Post a Comment