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