Tuesday, November 01, 2005

A simple JSP Button Maker using Ditchnet's 2D taglib

Luca Zappa's Brilliant Button Maker is a most impressive and useful application. It primarily uses PHP and the GD library to do its heavy lifting. I've used the GD library in a past life when I was a Perl programmer. I thought I'd see just how easy it was to use Ditchnet's 2D taglib to produce 80x15 buttons like Luca's application does. The answer is that 2D taglib is surprisingly easy to use and the resulting JSP page does not leave me feeling dirty like many "hacky" methods I've used previously do. The 2D taglib supports implicit objects in much the same way that JSTL does (I suspect that this is why it appears to require a 2.4 servlet container). Any object I can set on a page using JSP/JSTL I can access inside the 2D taglib scriptlet. I installed the wonderful Silkscreen font which is widely used in antipixel style buttons. I located a Hex2Color method in Traverse Technologies Open Source Fulcrum product and copied it into my page and after a little fiddling I've created a fairly simple JSP page that can create 80x15 buttons like this:

The simple script is shown below (I haven't yet tried the Java 2D API image support). Luca's HTML form and JavaScript cleverness could easily be converted to sit in front of this JSP powered Button Maker.

<%@ taglib prefix="twod" uri="http://ditchnet.org/jsp-2d-taglib" %>

pageContext.setAttribute("outerBorder", hex2Color("#666666"));
pageContext.setAttribute("innerBorder", hex2Color("#ffffff"));
pageContext.setAttribute("barPosition", new Integer(25));

pageContext.setAttribute("leftFill", hex2Color("#ff6600"));
pageContext.setAttribute("leftText", "RSS");
pageContext.setAttribute("leftTextColor", hex2Color("#ffffff"));
pageContext.setAttribute("leftTextPosition", new Integer(5));

pageContext.setAttribute("rightFill", hex2Color("#898E79"));
pageContext.setAttribute("rightText", "VALID");
pageContext.setAttribute("rightTextColor", hex2Color("#ffffff"));
pageContext.setAttribute("rightTextPosition", new Integer(4));

<twod:canvas id="button" width="80" height="15" alt="A button">


var endCap = BasicStroke.CAP_BUTT ;
var join = BasicStroke.JOIN_MITER;
var stroke = new BasicStroke(2,endCap,join);

// Border



// Bar

var barPosition = pageScope.barPosition;

// Left block

g.fillRect(2, 2, barPosition, 11);

// Right block

g.fillRect(barPosition + 3, 2, 80 - barPosition - 5, 11);

g.setFont(new Font("Silkscreen", Font.PLAIN, 9));

// Left text

g.drawString(pageScope.leftText, pageScope.leftTextPosition, 10);

// Right text

g.drawString(pageScope.rightText,pageScope.rightTextPosition + barPosition,10);

<%@page import="java.awt.Color" %>

// Hex2color method stolen from com.traversetechnologies.fulcrum.util

public static final String HEXSET = "0123456789ABCDEF";

public static Color hex2Color(String hexcolor) {
hexcolor = hexcolor.toUpperCase();
if ( hexcolor.startsWith("#") )
hexcolor = hexcolor.substring(1);
else if ( hexcolor.startsWith("0x") || hexcolor.startsWith("Ox") )
hexcolor = hexcolor.substring(2);

int r = hex2decimal(hexcolor.substring(0,2));
int g = hex2decimal(hexcolor.substring(2,4));
int b = hex2decimal(hexcolor.substring(4,6));
return ( new Color(r, g, b) );

private static int hex2decimal(String hex) {
hex = hex.toUpperCase();
int j = HEXSET.indexOf(hex.charAt(0)) * 16;
int k = HEXSET.indexOf(hex.charAt(1));
return (j+k);