用JSP创建可重用的图形背景_JSP编程

有一个技术可以在Java Server Pages(JSP)中产生整齐、精细的直方图,它可以用来作为可重用的背景。为了达到可重用性的目的,你需要使得图形的尺寸可以调整,你还应该管理直方块以免它们越过图形区域的边界。然后,你还需要把图形数据编码为一种可用的图形格式。我们将利用这个代码例子介绍本技巧。

你需要什么?

为了开始运行本文所给出的例子,你需要JDK 1.2或者它的更高版本(http://java.sun.com)。你还需要一个支持JSP的Web服务器。我在Tomcat上测试该例子,我用com.sun.image.codec.jpeg 类(在Sun Java 2 SDK中发布)进行图形数据的编码。

可重用的背景

既然你希望拥有可重用的背景,你应该创建一个Java类来管理布局,包括标题区和外部边界。如A所示。

图A

正如你所看到的那样,我在标题区和外部边界上都进行了阴影处理。标题有一个白色的、一个象素宽的边界,图形区有一个细的黑色边界。这些边界增加了阴影的清晰度。

边界很容易产生。用Graphics2D对象的fill()方法来填充一个蓝色的标题矩形,然后用draw()方法用其它颜色画出边界。

产生阴影效果也很简单。首先,用fill()方法画出一个阴影。然后,在偏移七个象素的地方画出标题。这个偏移产生了三维的效果,这样就得到了阴影效果。

举一个例子

假设有一家公司销售农产品,它需要一个直方图来显示销售额。在实际应用场合下,我们需要从一个数据库或者XML文件中获取这些数据,但是为了简单起见,我们假设销售额数据保存在下面的两个数组中:
String datanames[] = {"苹果", "桔子", "桃子", "柠檬", "柚子"};
int datavalues[] = {11, 62, 33, 102, 50};

第一个数组保存该公司出售的各种农产品的项目。第二个数组为对应各农产品的销售额。

准备好直方图

直方图将以JPEG格式显示和保存,所以我们需要正确设置MIME,即内容类型。浏览器利用MIME类型来决定如何做出反应。下面的代码用以设置MIME类型:
response.setContentType("image/jpeg");

接下来,我们需要一个表示该图像的对象。Java 2D API支持BufferedImage类,它提供了一种在内存中保存和管理象素数据的方法。我们希望图形是彩色的,所以使用了TYPE_INT_RGB图形类型。WIDTHHEIGHT这两个整形数据用来以象素为单位指定该图像的宽度和高度:
BufferedImage bi = new BufferedImage(WIDTH, HEIGHT, BufferedImage.TYPE_INT_RGB);

现在我们有个一个BufferedImage对象,我们可以通过调用该对象的createGraphics()方法来设置Graphics2D的内容:
Graphics2D biContext = bi.createGraphics();

宽度、高度和极大值

创建该图的程序员需要根据该图形的重要程度和页面的整体布局来设置WIDTH参数。图形元素根据图形宽度的改变自动调整自身的大小。

标题的宽度和边界区域,以及图形的最长直方块需要根据WIDTH参数进行计算。这样做的目的是为了确保所有的图形元素都没有超过图形的宽度而越过图形的右边界。

需要显示的数据条目数决定了图形的HEIGHT参数。如果有新的元素添加到datavalues[]datanames[]数组,那么图形的高度就应该对应增长以适应所需显示的区域大小。

maximum参数用于最长直方块。然后,其它直方块的宽度按照相对于maximum的量进行计算:
int barWidth = (innerWIDTH * currentValue) / maximum;

上面的算法用到了maximum和图形的innerWIDTH(图形区域)这两个数值来确保直方块会随着WIDTH数值的改变而自动伸缩。

显示图形背景

为了显示该图形,我们需要创建一个背景图像,然后添加图形数据。首先,创建一个graphBG对象并调用它的draw()方法:
graphBG gr = new graphBG();
gr.draw(biContext, WIDTH, HEIGHT, "Farm Produce", "Overall Average: " + average);

draw()方法的参数包括图形内容、biContext、WIDTHHEIGHTgraphBG类利用它们来决定标题和图形区域的宽度和高度。最后,计算average数据值并添加到标题中显示的文本中。

 

创建直方块

每个直方块的纵坐标(y轴)位置按照如下公式计算:y_pos = i * displayHeight + headerOffset。其中displayHeight等于直方块上文本的高度加上直方块的高度,headerOffset表示从图形顶端开始的垂直距离,包括标题区域以及阴影的高度。

我用了前面创建标题边界的技术创建了这些直方块以及它们的边界。我把直方块边界的宽度和高度分别减去一个象素,这样每个直方块看起来都有一个红色的边界,并通过在白色背景上画上内边界使得减切效果的产生变得简单起来。

编码

我们已经在内存中建立好了这幅图片,现在我们对它进行编码并把它显示给用户。我们不能用默认得JSP输出流来处理JPEG,所以我们需要利用response.getOutputStream()从响应对象中获取流。我们可以用输出流来创建一个JPEGImageEncoder对象并调用它的encode(),传递我们在前面创建的BufferedImage对象:
JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(output);
encoder.encode(bi);

产生的图象相对较小,只占用了13.7千字节的容量。B给出了最终的效果:

图B

无论从那个方面来说,index.jsp的输出都是一个JPEG图像。你可以把它保存到你的桌面上或者按PrintScreen键来抓图。如果你需要在同一页上显示多幅图形或者把图形引入到其它内容中,你可以使用HTML的img标记(<img src = ”index.jsp”>),然后,当需要时放置该图,如利用一个表格。

也许最老的用于动态产生图形的Internet技术之一可以实现处了显示一个图像之外的其它任务。设想你需要记录这副图的浏览人数(类似记录广告点击次数的情况),那么你需要在index.jsp中实现诸如点击计数、数据库或者文件访问之类的任务,你可以在后台处理这些任务而不需要利用缓冲页面切换给用户。

结论

我们在本文之中检验了一种产生整齐、看上去很舒服的直方图。我们巧妙的处理了图形尺寸的改变以及编码为JPEG格式,并且讨论了通过修改HTML代码的方式把最终产生的图片放置在页面的不同位置上。

时间: 2024-10-28 15:57:54

用JSP创建可重用的图形背景_JSP编程的相关文章

用JSP创建可重用的图形背景

js|创建|图形 有一个技术可以在Java Server Pages(JSP)中产生整齐.精细的直方图,它可以用来作为可重用的背景.为了达到可重用性的目的,你需要使得图形的尺寸可以调整,你还应该管理直方块以免它们越过图形区域的边界.然后,你还需要把图形数据编码为一种可用的图形格式.我们将利用这个代码例子介绍本技巧. 你需要什么? 为了开始运行本文所给出的例子,你需要JDK 1.2或者它的更高版本(http://java.sun.com).你还需要一个支持JSP的Web服务器.我在Tomcat上测

JBuilder2005实战JSP之登录页面实现代码[图]_JSP编程

通过File->New...->Web->双击JSP图标,弹出创建JSP向导的对话框,如下图所示: 图 3 通过向导创建login.jsp ·Web module:如果一个工程下有多个Web模块,你可以通过这儿指定JSP所要加入到的Web模块,因为我们的工程中只有一个webModule,所以是向导将默认设置为webModule. ·Name :键入JSP文件名,你可以键入.jsp后缀,也可以不写后缀,直接键入login就可以了. Generate sample bean选项勾选后JBui

JSP和Struts解决用户退出问题_JSP编程

在一个有密码保护的Web应用中,正确处理用户退出过程并不仅仅只需调用HttpSession的invalidate()方法.现在大部分浏览器上都有后退和前进按钮,允许用户后退或前进到一个页面.如果在用户在退出一个Web应用后按了后退按钮浏览器把缓存中的页面呈现给用户,这会使用户产生疑惑,他们会开始担心他们的个人数据是否安全.许多Web应用强迫用户退出时关闭整个浏览器,这样,用户就无法点击后退按钮了.还有一些使用javascript,但在某些客户端浏览器这却不一定起作用.这些解决方案都很笨拙且不能保

困扰JSP的一些问题与解决方法_JSP编程

如今每一个使用servlets的开发者都知道JSP,一种由Sun公司发明并花费大量精力加以推行并建构在servlet技术之上的web技术.JSP将servlet中的html代码脱离了出来,从而可以加速web应用开发和页面维护.实际上,由Sun发布的官方"应用开发模型"文档上说得更远: "JSP技术应该被视为标准,而servlets在多数情况下可视为一种补充." ( Section 1.9, 1999/12/15听取意见版 ). 本文的目的在于听取对该申明的合理性的评

JSP FusionCharts Free显示图表 具体实现_JSP编程

FusionCharts Free的下载地址:http://www.fusioncharts.com/goodies/fusioncharts-free/ 接下来在jsp页面中引入js 复制代码 代码如下: <script type="text/javascript" src="FusionChartsFree/JSClass/FusionCharts.js"></script> 然后写入 复制代码 代码如下: <script type

实例解析JSP中EL表达式的各种运用_JSP编程

EL运算符: <%@page language="java" contentType="text/html;charset=gb2312"%> <%@page import="java.sql.*" %> <!DOCTYPE html> <html> <head> <title>El算数运算符</title> </head> <body>

jsp自定义标签用法实例详解_JSP编程

本文实例讲述了jsp自定义标签用法.分享给大家供大家参考.具体如下: 在JSP中有一种机制,可以让你在JSP页面中插入与HTML类似的标记.本文介绍JSP定制标记的基本概念和构成,以及如何开发和应用JSP定制标记. 什么是标记 使用HTML语言我们可以这样去编辑我们的网页: <HTML> <HEAD> <TITLE> HELLO WORLD </TITLE> </HEAD> <BODY> HELLO WORLD </BODY&g

使用JavaBean创建您的网上日历本(2)_JSP编程

JavaBean程序分析 我想把HtmlCalendarNotePad中的主要方法介绍一些,相信会大家有所帮助 public void setYear(int year) //设置年份 .默认值为当前的年份 public int getYear() //获得年份 .默认值为当前的年份 //这是标准Java程序写法,因为Java程序就是一个类所以经常写这种setXXX/getXXXpublic void setMonth(int month) //设置月份(1-12),默认值为当前的月 publi

JSP实现的简单分页显示效果代码_JSP编程

本文实例讲述了JSP实现的简单分页显示效果代码.分享给大家供大家参考,具体如下: <%@ page contentType="text/html;charset=gb2312" %> <%@ page language="java" import="java.sql.*" %> <script language="javascript"> function newwin(url) { var