Applications | Professional XML Development with Apache Tools: Xerces, Xalan, FOP, Cocoon, Axis, Xindice (Wrox Professional Guides)

There are many possible applications for SVG. As a portable vector graphics format, it has a lot to offer to applications in many problem domains. The Batik team has done a reasonable job of making it easy to generate and display SVG from Java programs. They’ve made it easy to retrofit existing Java2D applications to generate SVG documents. We’ll discuss two applications for SVG/Batik; one is more immediate and short term, and the other is longer term.

In the short term, SVG provides a great way to dynamically generate complicated graphics visuals for Web applications. We’ll present a short application that illustrates this point. BatikServlet is designed to display an input form that prompts the user for the number of graphs in a bar graph. When the user clicks the Submit button in the form, the form action causes an HTTP POST to occur. BatikServlet’s POST behavior is to take the form argument and draw an increasing bar graph with the number of bars requested in the form. Although the example is simple, it illustrates the point that an SVG-enabled Web application can interact with the browser user, collect some data, combine that data with data of its own (probably obtained from a database in a more realistic example), and render it into SVG that is then displayed by the browser:

  1: /*   2:  *    3:  * BatikServlet.java   4:  *    5:  * Example from "Professional XML Development with Apache Tools"   6:  *   7:  */   8: package com.sauria.apachexml.ch4;   9:   10: import java.awt.Color;  11: import java.awt.Shape;  12: import java.awt.geom.Rectangle2D;  13: import java.io.IOException;  14: import java.io.PrintWriter;  15: import java.io.Writer;  16:   17: import javax.servlet.ServletException;  18: import javax.servlet.http.HttpServlet;  19: import javax.servlet.http.HttpServletRequest;  20: import javax.servlet.http.HttpServletResponse;  21:   22: import org.apache.batik.dom.svg.SVGDOMImplementation;  23: import org.apache.batik.svggen.SVGGraphics2D;  24: import org.w3c.dom.DOMImplementation;  25: import org.w3c.dom.svg.SVGDocument;  26:   27: public class BatikServlet extends HttpServlet {  28:

BatikServlet’s doGet method presents the HTML form used to collect information from the user:

 29:     protected void doGet(HttpServletRequest request,   30:                           HttpServletResponse response)  31:         throws ServletException, IOException {  32:             response.setContentType("text/html");  33:             PrintWriter w = response.getWriter();  34:               35:             w.println("<html><head></head>");  36:             w.println("<body>");  37:             w.println("Enter number of bars:");  38:             w.println("<form action=\"ch4\" method=\"post\">");  39:             w.println("<input type=\"text\" name=\"bars\"><br>");  40:             w.println("<input type=\"submit\">");  41:             w.println("</form>");  42:             w.println("</body>");  43:             w.println("</html>");  44:             w.flush();  45:     }  46:

The doPost method extracts the data from the form parameter and uses it to generate an SVG document. The form parameter, bars, is retrieved and converted to an integer:

 47:     protected void doPost(HttpServletRequest request,   48:                            HttpServletResponse response)  49:         throws ServletException, IOException {  50:             String numStr = request.getParameter("bars");  51:             int bars = 10;  52:             bars = Integer.parseInt(numStr)+1;  53:             DOMImplementation impl =   54:                 SVGDOMImplementation.getDOMImplementation();  55:             String svgNS =   56:                 SVGDOMImplementation.SVG_NAMESPACE_URI;  57:             SVGDocument doc =   58:                 (SVGDocument)impl.createDocument(svgNS,   59:                                                  "svg", null);  60:

Here’s the setup code for SVGGraphics2D. Lines 61-67 show the loop that renders the bar graph:

 61:             SVGGraphics2D g = new SVGGraphics2D(doc);  62:             for (int i = 0; i < bars; i++) {  63:                 Shape rect =   64:                     new Rectangle2D.Double(10+20*i,  65:                                            100-10*i,10,10*i);  66:                 g.setPaint(Color.green);  67:                 g.fill(rect);  68:             }

You have to properly set the HTTP content type so the browser will know it’s about to receive SVG data:

 69:             response.setContentType("image/svg+xml");  70:

After that, you get the writer from the HttpServletResponse and write the SVG directly to it:

 71:             Writer w = response.getWriter();  72:           73:             boolean useCSS = true;  74:             g.stream(w, useCSS);  75:             w.flush();  76:     }  77:   78: }

On the user’s end, they see a nice bar graph in their Web browser. Depending on the SVG functionality in their browser, they may be able to do simple manipulation of the graph.

To complete the example, the following listing shows the web.xml file that’s used to configure the servlet engine for BatikServlet:

  1: <?xml version="1.0" encoding="ISO-8859-1"?>   2:    3: <!DOCTYPE web-app   4:   PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"   5:   "http://java.sun.com/dtd/web-app_2_3.dtd">   6:    7: <web-app>   8:   <display-name>Professional XML Development with Apache Tools Examples   9:   </display-name>  10:   <description>  11:     Examples from Professional XML Development with Apache Tools.  12:   </description>  13:   14:   <!-- Define servlet-mapped and path-mapped example filters -->  15:   16:   <!-- Define filter mappings for the defined filters -->    17:    18:   <servlet>  19:     <servlet-name>BatikServlet</servlet-name>  20:     <servlet-class>com.sauria.apachexml.ch5.BatikServlet  21:     </servlet-class>  22:   </servlet>  23:       24:   <servlet-mapping>  25:     <servlet-name>BatikServlet</servlet-name>  26:     <url-pattern>/ch5/*</url-pattern>  27:   </servlet-mapping>  28:     29: </web-app>

Rich Client User Interfaces

Just over the horizon is another application for SVG, one that you should keep your eye on. Some Web developers have used Macromedia’s Flash as a method for producing visually rich and interactive user interfaces for Web applications. We believe SVG has the potential to take on this role. SVG has some important advantages over Flash in this regard. It’s specified by open standards, both for SVG and for ECMAScript, the scripting language recommended for producing dynamic SVG. The techniques for producing dynamic SVG are the same as for producing DHTML, so Web developers won’t have to learn a new set of concepts as they do for Flash.

There are at least two major obstacles to this happening. First, SVG isn’t supported in all Web browsers and requires users to download a plugin. This isn’t as big an obstacle as it might seem, because recent versions of Flash need to be downloaded as well. The other obstacle is that SVG needs a richer set of libraries for doing things like calling Web services. This API needs to be standardized somehow, perhaps via a standardized SVG extension mechanism. This will make the glue layer between SVG and the client browser/platform strong enough to build rich applications on the client side.

We hope you can see many possibilities for including SVG functionality in your applications—perhaps providing great illustrations for a publishing project or highly interactive client-side user interfaces for Web applications. SVG is just getting started, and the Batik libraries provide a great way for you to begin taking advantage of SVG in your applications.