Welcome to Day 20! Many books on programming include discussions on graphics, and you might think that's impractical with JSP because the code is on the server, and the results in the browser. But in fact, you can create images on the server and send them to the browser, as you'll see today. You'll also get an introduction to Internet programming, including how to retrieve Web pages from the Web, and even how to create a mini-Web server using Java. Here are today's topics:
Creating images on the fly
Sending images back to the browser
Java drawing techniques
Embedding returned images in HTML documents
Reading Web documents directly from servers
Creating a mini-Web server
Today's work starts with learning how to create images on the Web server.
To get started, you'll see how to create a simple JPEG image now and send it back to the browser. This example will just create a JPEG image and draw a single diagonal line to get things started. You begin by setting the page directive's contentType attribute to image/jpeg so the browser knows a JPEG image is coming. You also must import the Java packages needed (the com.sun.image.codec.jpeg.* packages are bundled with Java, so no additional downloads or classpath concerns are needed here):
<%@ page contentType="image/jpeg" import="java.io.*, java.awt.*, java.awt.image.*,com.sun.image.codec.jpeg.*" %>
<%@ page contentType="image/jpeg" import="java.io.*, java.awt.*, java.awt. image.*,com.sun.image.codec.jpeg.*" %> <% try { BufferedImage image = new BufferedImage(200, 200, BufferedImage. TYPE_INT_RGB); . . .
You can see the fields of the java.awt.image.BufferedImage class in Table 20.1, and the methods of this class in Table 20.2.
Table 20.1. The Fields of the java.awt.image.BufferedImage Class
Table 20.2. The Methods of the java.awt.image.BufferedImage Class
Now that you have a buffered image in memory, you can get a Java Graphics2D object to work with that image. To get a Graphics2D object, you can use the BufferedImage object's createGraphics method:
<%@ page contentType="image/jpeg" import="java.io.*, java.awt.*, java.awt. image.*,com.sun
The Graphics2D class is the class you use to create two-dimensional graphics using the Java AWT. This class is based on the Java Graphics class, and both classes are huge, but worth knowing. You can see the methods of the java.awt.Graphics class in Table 20.3, and the methods of the java.awt.Graphics2D class in Table 20.4.
Table 20.3. The Methods of the java.awt.Graphics Class
Table 20.4. Methods of the java.awt.Graphics2D Class
Now that you have a Graphics2D object corresponding to your new buffered image in memory, you can use the drawing methods you see in Tables 20.3 and 20.4. For example, to draw a diagonal line, you can use the drawLine method:
<%@ page contentType="image/jpeg" import="java.io.*, java.awt.*, java.awt.image.*,com.sun
In graphics terms, the upper left corner of your 200×200 pixel image corresponds to (0, 0), and the lower right corner corresponds to (199, 199). That means that g.drawLine(0, 0, 199, 199) will draw a line from the upper left corner to the lower right corner.
To send this new image back to the browser, you can use an object that implements the JPEGImageEncoder interface. To create that object, you can use the createJPEGEncoder method of the JPEGCodec class (codec stands for coder/decoder), and you pass that method an OutputStream object (discussed in Day 15, “Handling Files on the Server”). Note that you can't use the customary JSP out object (a JSPWriter object) here. Instead, you can use the response object's getOutputStream method to get an OutputStream object:
<%@ page contentType="image/jpeg" import="java.io.*, java.awt.*, java.awt. image.*,com.sun
To send the image back to the browser, you can use the JPEGImageEncoder object's encode method:
<%@ page contentType="image/jpeg" import="java.io.*, java.awt.*, java.awt.image.*,com.sun
You can see the methods of the com.sun.image.codec.jpeg.JPEGCodec class in Table 20.5, and the methods of the com.sun.image.codec.jpeg.JPEGImageEncoder interface in Table 20.6.
Table 20.5. The Methods of the com.sun.image.codec.jpeg.JPEGCodec Class
Table 20.6. The Methods of the com.sun.image.codec.jpeg.JPEGImageEncoder Interface
You can see the full code for this example in Listing 20.1.
Example 20.1. Creating an Image (ch20_01.jsp)
<%@ page contentType="image/jpeg" import="java.io.*, java.awt.*, java.awt.image.*,com.sun
You can see the results in Figure 20.1, where you see the JPEG image produced by this code, showing the diagonal line as required. Now you're creating images on the server and sending them back to the browser.
There are two things to note here—first, the background of the image is black, which is the default color for buffered images. Second, the color of the line (the foreground color) is white, which is the default foreground color. You'll see how to set your own colors later today.
You can even go so far as to implement a measure of graphics interaction with the user. For example, take a look at Listing 20.2, which is an HTML document that displays a black rectangle the user can draw in with the mouse. The document includes some JavaScript (designed for Internet Explorer) that records the position at which the mouse went down and then went up, and sends those locations on to ch20_03.jsp:
<SCRIPT>
<!--
document.onmousedown = mouseDown
document.onmouseup = mouseUp
var x1, y1, x2, y2
function mouseDown()
{
x1 = event.offsetX
y1 = event.offsetY
}
function mouseUp()
{
x2 = event.offsetX
y2 = event.offsetY
var outString = "ch20_03.jsp?x1=" + x1
outString += "&y1=" + y1
outString += "&x2=" + x2
outString += "&y2=" + y2
location.href = outString
}
function dragStart(event)
{
return false
}
// -->
You can see the full code in Listing 20.2.
Example 20.2. Letting the User Draw a Line (ch20_02.html)
<HTML> <HEAD> </HEAD> <BODY> <DIV STYLE="POSITION:ABSOLUTE; LEFT:10; TOP:10; WIDTH:480; HEIGHT:400; BACKGROUND-COLOR:BLACK;"></DIV> </BODY> <SCRIPT> <!-- document.onmousedown = mouseDown document.onmouseup = mouseUp var x1, y1, x2, y2 function mouseDown() { x1 = event.offsetX y1 = event.offsetY } function mouseUp() { x2 = event.offsetX y2 = event.offsetY var outString = "ch20_03.jsp?x1=" + x1 outString += "&y1=" + y1 outString += "&x2=" + x2 outString += "&y2=" + y2 location.href = outString } function dragStart(event) { return false } // --> </SCRIPT> </HTML>
You can see ch20_03.jsp in Listing 20.3—this JSP page accepts the mouse data from ch20_02.html and draws the line to match.
Example 20.3. Creating the User-Drawn Line (ch20_03.jsp)
<%@ page contentType="image/jpeg" import="java.io.*, java.awt.*, java.awt.image.*,com.sun
You can see the results in Figure 20.2, where the user draws a line by dragging the mouse. When the user releases the mouse button, the new JPEG image with the new line in it appears (assuming the connection to the server is fairly fast), as you see in the figure. Pretty cool, but don't rely on this method for true interactive graphics—the server round trips take too long.
It's also worth noting that you can return JPEG images from servlet code. Here's what this example (Listing 20.3) would look like using a servlet instead of JSP—note that here, you can set the content type of the response to "image/jpeg" using the response object's setContentType method:
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
import java.awt.*;
import java.awt.image.*;
import com.sun.image.codec.jpeg.*;
public class ch20_03 extends HttpServlet
{
protected void doGet(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException
{
int x1 = Integer.parseInt(request.getParameter("x1"));
int y1 = Integer.parseInt(request.getParameter("y1"));
int x2 = Integer.parseInt(request.getParameter("x2"));
int y2 = Integer.parseInt(request.getParameter("y2"));
ServletOutputStream out = response.getOutputStream();
try {
response.setContentType("image/jpeg");
BufferedImage image = new BufferedImage(480, 400, BufferedImage.TYPE_INT_RGB);
Graphics2D g = image.createGraphics();
g.drawLine(x1, y1, x2, y2);
JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(out);
encoder.encode(image);
out.flush();
} catch (Exception e) {}
}
}
So far, the images you've created today just drew a single line. The next step is to elaborate on that and put other graphics methods to work. For example, take a look at the code in Listing 20.4; this code uses additional Java drawing methods to create the image you see in Figure 20.3—a graph of stock prices created on the fly (you can't see it in the figure, but the grid lines and text are blue here, and the actual graphed line is red).
Example 20.4. Using Additional Graphics Techniques (ch20_04.jsp)
<%@ page contentType="image/jpeg" import="java.io.*, java.awt.*, java.awt.image.*,com.sun
This code uses graphics methods to create this new image; for example, to give the whole image a white background, you can set the current drawing color to write with the Graphics2D setColor method, and then use the fillRect method to draw a solid white rectangle:
g.setColor(Color.white); g.fillRect(0, 0, 199, 199);
You can set AWT colors using the Java Color class, which has many predefined color fields like Color.white, Color.blue, Color.black, Color.red, and so on. The Color class also has many constructors, including one that lets you set a color using red, green, and blue color values (ranging from 0–255), just as you do with HTML colors:
g.setColor(new Color(int r, int g, int b));
Now you can draw the grid lines you see in Figure 20.3 with this code:
g.setColor(Color.blue);
g.drawLine(0, 0, 0, 199);
g.drawLine(0, 0, 199, 0);
g.drawLine(0, 199, 199, 199);
g.drawLine(199, 199, 199, 0);
for(int loopIndex = 0; loopIndex < 20; loopIndex++){
g.drawLine(0, loopIndex * 10, 199, loopIndex * 10);
g.drawLine(loopIndex * 10, 0, loopIndex * 10, 199);
}
Note also the boxed label with text in Figure 20.3. You can draw the box for the label this way:
g.drawRect(15, 15, 175, 30); g.setColor(Color.white); g.fillRect(16, 16, 174, 29);
The text in the label is drawn with the drawString method, which takes the text string to draw, and the (x, y) location of that text. To draw text, you can set the font used by the Graphics2D object with the setFont method. To do that, you can create a new Java Font object, passing the Font class's constructor the name of the font ("Courier" in this case), the type of font (using the Font.PLAIN field here—other choices include Font.BOLD and FONT.ITALIC), and the font size in points (a point is 1/72nd of an inch—this example uses 18 point font). Then you install the new font in the Graphics2D object and use drawString to draw the text:
g.setColor(Color.blue);
Font font = new Font("Courier", Font.PLAIN, 18);
g.setFont(font);
g.drawString("Stock Activity", 25, 35);
Finally, you can draw the graphed line itself in red:
g.setColor(Color.red); g.drawLine(0, 199, 40, 119); g.drawLine(40, 119, 90, 150); g.drawLine(90, 150, 150, 60); g.drawLine(150, 60, 180, 90); g.drawLine(180, 90, 199, 50);
And that's all it takes—you can see the results in Figure 20.3.
The image generated by ch20_04.jsp is a standalone JPEG image—how can you embed such generated images in HTML documents? That turns out to be easy enough—you just use the URL of the JSP that creates the image in the SRC attribute of an HTML <IMG> element.
You can see an example in Listing 20.5, which embeds the image you see in Figure 20.3 in an HTML document using this technique.
You can see the results in Figure 20.4.
That completes the graphics work you'll see today—next you'll see some Internet programming, including working with Internet servers directly.
You've learned how to create Web documents that the user can download throughout this book—but what if you want to get a Web document from some other server yourself? Java can help out here, using the Socket class.
For example, what if you wanted to download the main page from the Sun Microsystems Web site (www.sun.com) using code in a JSP page? It turns out that you can issue a GET command to that Web site's server directly (as long as you have a connection to the Internet, of course). You do that using the java.net.* package, and you start by creating a new Internet socket that connects to the Sun server on port 80 (the HTTP port used by browsers and Web servers):
Socket s = new Socket("www.sun.com", 80);
.
.
.
You can see the methods of the Socket class in Table 20.7.
Table 20.7. The Methods of the Socket Class
Next, you can create a BufferedReader object to read the data the server sends you, and a PrintWriter object to send commands to the server. Here's how you can send a GET command for the main page, www.sun.comindex.html (note that commands like these must end with two newline characters (
) to terminate them properly):
Socket s = new Socket("www.sun.com", 80);
BufferedReader in = new BufferedReader(new InputStreamReader(s.getInputStream()));
PrintWriter socketOut = new PrintWriter(s.getOutputStream());
socketOut.print("GET /index.html
");
socketOut.flush();
.
.
.
Now you can read the results from the server using the BufferedReader object, line by line, and display each line you read from the server this way:
BufferedReader in = new BufferedReader(new InputStreamReader(s.getInputStream()));
PrintWriter socketOut = new PrintWriter(s.getOutputStream());
socketOut.print("GET /index.html
");
socketOut.flush();
while ((line = in.readLine()) != null){
out.println(line);
}
.
.
.
You can see the whole code in Listing 20.6.
Example 20.6. Issuing Commands to a Server (ch20_06.jsp)
<%@ page contentType="text/html" import="java.io.*, java.net.*" %> <% try { Socket s = new Socket("www.sun.com", 80); BufferedReader in = new BufferedReader(new InputStreamReader(s.getInputStream())); PrintWriter socketOut = new PrintWriter(s.getOutputStream()); socketOut.print("GET /index.html "); socketOut.flush(); String line; while ((line = in.readLine()) != null){ out.println(line); } } catch (Exception e){} %>
You can see the resulting HTML fetched from www.sun.com in Figure 20.5 (bear in mind that this code only gets the HTML document index.html from the Sun site—it doesn't download any images, which you can do separately if you want to).
Now you can issue a GET command directly to a Web server—no browser needed.
You can even create a mini-Web server yourself using the ServerSocket class. This next example will do just that—here you'll learn how to create a mini-server and run it. A JSP page (the client) will connect to that mini-server and send it some text ("Hello!"). The mini-server will add a little additional text and return the result back to the client (returning "The server got this: Hello!").
To connect to such a mini-server in a client JSP page, you can create a new Internet socket using an IP address for the server and a port number you specify:
Socket socket = new Socket("127.0.0.1", 8765);
Then you can use the Socket class's input stream and output stream to send data to the mini-server and read it back like this (the newline character (
) at the end of the text sent to the mini-server is to inform the mini-server—which will read one line of data from the client connection—that no more data is coming):
Socket socket = new Socket("127.0.0.1", 8765);
InputStream inSocket = socket.getInputStream();
OutputStream outSocket = socket.getOutputStream();
String str = "Hello!
";
byte buffer[] = str.getBytes();
outSocket.write(buffer);
while ((character = inSocket.read()) != -1) {
out.print((char) character);
}
socket.close();
You can see the entire client JSP page in Listing 20.7.
Example 20.7. Sending and Reading Data Using a Mini-Server (ch20_07.jsp)
<%@ page import="java.io.*, java.net.*" %> <HTML> <HEAD> <TITLE>Creating Client/Server Applications</TITLE> </HEAD> <BODY> <H1>Creating Client/Server Applications</H1> <% try{ int character; Socket socket = new Socket("127.0.0.1", 8765); InputStream inSocket = socket.getInputStream(); OutputStream outSocket = socket.getOutputStream(); String str = "Hello! "; byte buffer[] = str.getBytes(); outSocket.write(buffer); while ((character = inSocket.read()) != -1) { out.print((char) character); } socket.close(); } catch(java.net.ConnectException e){ %> You must first start the server application (ch20_08.class) at the command prompt. <BR> See the book for more details. <% } %> </BODY> </HTML>
Creating the mini-server isn't difficult—you create a new ServerSocket object using the same port number that the client uses. Then you can use the ServerSocket object's accept method to create a Socket object for I/O:
ServerSocket socket = new ServerSocket(8765);
Socket insocket = socket.accept( );
.
.
.
Next, you can use the Socket object to create a BufferedReader object and a PrintWriter object to handle I/O:
ServerSocket socket = new ServerSocket(8765); Socket insocket = socket.accept( ); BufferedReader in = new BufferedReader (new InputStreamReader(insocket. getInputStream())); PrintWriter out = new PrintWriter (insocket.getOutputStream(), true); . . .
When the client sends text to the mini-server, you can read that text, preface it with "The server got this:", and send it back to the client:
ServerSocket socket = new ServerSocket(8765); Socket insocket = socket.accept( ); BufferedReader in = new BufferedReader (new InputStreamReader(insocket. getInputStream())); PrintWriter out = new PrintWriter (insocket.getOutputStream(), true); String instring = in.readLine(); out.println("The server got this: " + instring); insocket.close(); . . .
You can see the whole mini-server in Listing 20.8.
Example 20.8. A Java Mini-Server (ch20_08.java)
import java.io.*; import java.net.*; public class ch20_08 { public static void main(String[] args ) { try { ServerSocket socket = new ServerSocket(8765); Socket insocket = socket.accept( ); BufferedReader in = new BufferedReader (new InputStreamReader(insocket
To run this example, you need to run the mini-server, ch20_08.class, at the command prompt using Java (which would look something like this in Windows: c:>java ch20_08). The server starts on port 8765 and will wait for input from the client (note it doesn't display anything at the command prompt, it just waits for input from the client). When you open the JSP page (ch20_07.jsp) in a browser using Tomcat, text is sent to the mini-server. The mini-server reads that text and echoes it back.
You can see the results in Figure 20.6, where the JSP page has sent text to the mini-server, which added more text and echoed the resulting text back. Congratulations—now you've created and run your own mini-Web server. Although this example ran on the same machine, you could run this code on two different ISPs—as long as the client knows the IP address (or name) of the Web server and both client and server use the same port number, you can connect and send data back and forth this way.
As you can imagine from this discussion, working with sockets is a large topic in Java. Today's work just provided an introduction to that topic—but even so, you can see that it's possible to write powerful applications with just a few lines of code.
Today you learned how to send images back to the browser. This is done by setting the contentType attribute of the page directive to "image/jpeg" in the JSP code.
Next you create a buffered image in memory using the Java BufferedImage class. After you've created that object, you can get a Graphics2D object corresponding to your image with the buffered image's createGraphics method.
When you have a Graphics2D object corresponding to your image, you can use the drawing methods of this object to draw in the image. Then, to send the image back to the browser, you can use the JPEGImageEncoder object's encode method.
You also got an introduction to Internet programming, with the Java Socket class. You learned how to get BufferReader and PrintWriter objects corresponding to the socket, which enables you to read data and send it, and which also enables you to download an HTML document from the Internet.
You also learned how to create a mini-server using Java with the ServerSocket class. This mini-server is able to connect to a JSP page that has sent it text and return it.
Tomorrow, we're going to take a look at the client-side of things as we see how to work with JavaScript and JSP. We'll also take a look at how to deploy your Web applications.
This workshop tests whether you understand all the concepts you learned today. It's a good idea to master today's concepts by honing your knowledge here before starting tomorrow's material. You can find the answers to the quiz questions in Appendix A.
1: | Modify the user-interactive drawing code to let the user select which figure to draw—a line, a rectangle, or an oval—by clicking a button. Then implement the corresponding functionality in the JSP page to create the correct type of figure. |
2: | Augment the Web document-reading example (Listing 20.6) to read and store images as well as HTML documents from other servers. |