Create a reusable graphics background with JSP

js| Create | graphics

There is a technology that produces neat, fine-grained histograms in Java Server Pages (JSPs) that can be used as a reusable background. In order to achieve the purpose of reusability, you need to make the size of the graphics can be adjusted, you should also manage the straight square so that they do not cross the boundaries of the graphics area. You will then need to encode the graphic data into an available graphics format. We will use this code example to introduce this technique.

What do you need?

To start running the example given in this article, you need JDK 1.2 or its later version (http://java.sun.com). You also need a Web server that supports JSP. I tested this example on Tomcat and I coded the graphics data with the Com.sun.image.codec.jpeg class (published in the Sun Java 2 SDK).

A reusable background

Now that you want to have a reusable background, you should create a Java class to manage the layout, including the title area and the external boundaries. As shown in figure A .

Figure A

As you can see, I have shadow processing on the title and outside boundaries. The caption has a white, pixel-wide boundary, and the graph area has a thin black boundary. These boundaries add to the sharpness of the shadows.

Borders are easy to produce. Fill a blue title rectangle with the fill () method of the Graphics2D object, and then use the Draw () method to draw the boundary in another color.

The shading effect is also very simple. First, draw a shadow with the fill () method. Then, the caption is drawn in the seven pixel offset. This offset produces a three-dimensional effect, which results in a shadow effect.

Give an example

Suppose a company sells produce, it needs a histogram to show sales. In practical applications, we need to get this data from a database or an XML file, but for simplicity we assume that the sales data is stored in the following two arrays:
String datanames[] = {"Apple", "orange", "peach", "lemon", "grapefruit"};
int datavalues[] = {11, 62, 33, 102, 50};

The first array holds the items sold by the company for various agricultural products. The second array corresponds to the sales of each agricultural product.

Get the histogram ready.

The histogram will be displayed and saved in JPEG format, so we need to set the MIME correctly, which is the content type. The browser uses MIME types to determine how to react. The following code sets the MIME type:
Response.setcontenttype ("Image/jpeg");

Next, we need an object that represents the image. The Java 2D API supports the BufferedImage class, which provides a way to store and manage pixel data in memory. We wanted the graphic to be colored, so we used the type_int_rgb graphic type. width and height These two shaping data are used to specify the width and height of the image in pixels:
BufferedImage bi = new BufferedImage (WIDTH, HEIGHT, Bufferedimage.type_int_rgb);

Now that we have a BufferedImage object, we can set the contents of the graphics2d by calling the object's creategraphics () method:
Graphics2D Bicontext = Bi.creategraphics ();

width, height, and maximum value

The programmer who created the diagram needs to set the WIDTH parameter based on the importance of the graphic and the overall layout of the page. Graphic elements automatically resize themselves depending on the width of the graphic.

The width and bounds of the caption, as well as the longest straight square of the graph, need to be computed according to the width parameter. This is done to ensure that all graphics elements do not exceed the width of the graphic and cross the right edge of the graphic.

The number of data entries you need to display determines the HEIGHT parameter of the graphic. If new elements are added to the datavalues[] and datanames[] arrays, then the height of the graph should correspond to the size of the area you want to display.

The maximum parameter is used for the longest straight square. The width of the other straight squares is then calculated in relation to the amount of maximum :
int barwidth = (innerwidth * currentvalue)/maximum;

The above algorithm uses both the maximum and the innerwidth(graph area) to ensure that the straight squares will automatically scale as the WIDTH values change.

Show Graphics background

To display the graphic, we need to create a background image and then add graphic data. First, you create a GRAPHBG object and call its draw () method:
GRAPHBG gr = new GRAPHBG ();
Gr.draw (Bicontext, WIDTH, HEIGHT, "Farm produce", "overall Average:" + Average);

The parameters of the draw () method include graphic content,bicontext, WIDTH , and HEIGHT,GRAPHBG Classes use them to determine the width and height of the caption and graphics area. Finally, the average data value is computed and added to the text displayed in the caption.

Create a straight square

The Ordinate (y-axis) position of each square is calculated according to the following formula:y_pos = i * displayheight + headeroffset. where displayheight equals the height of the text on the straight square plus the height of the straight square,Headeroffset represents the vertical distance from the top of the graph, including the caption area and the height of the shadow.

I've created these straight squares and their boundaries by using the technology that created the header boundaries before. I subtract the width and height of the straight square boundary by one pixel, so that each straight square has a red border, and it makes the cut effect easier by drawing the inner boundary on the white background.

Coding

We've built this picture in memory, and now we encode it and show it to the user. We cannot use the default JSP output stream to process jpeg, so we need to use Response.getoutputstream () to get the stream from the response object. We can use the output stream to create a JPEGImageEncoder object and invoke its encode (), passing the bufferedimage object we created earlier:
JPEGImageEncoder encoder = jpegcodec.createjpegencoder (output);
Encoder.encode (BI);

The resulting image is relatively small and takes up only 13.7 kilobytes of capacity. Figure B gives the final effect:

Figure B

In that respect, the output ofindex.jsp is a JPEG image. You can save it to your desktop or press the Printscreen key to catch the picture. If you need to display multiple graphics on the same page or introduce graphics to other content, you can use the HTML img tag (<img src = "index.jsp" >), and then, when needed, place the graph, If you use a table.

Perhaps one of the oldest Internet technologies used to generate graphics dynamically can be a task that displays an image outside of it. Imagine that you need to keep track of the number of viewers (like the number of clicks on an ad), so you need to implement tasks such as click Count, database, or file access in the index.jsp , and you can handle these tasks in the background without having to use a buffered page to switch to the user.

Conclusion

In this article we examine a histogram that produces neat, comfortable looking. We handled the changes in graphic sizes and encoded them in JPEG format, and discussed how to modify the HTML code to place the resulting picture in different places on the page.