ONJava.com -- The Independent Source for Enterprise Java
oreilly.comSafari Books Online.Conferences.

advertisement

AddThis Social Bookmark Button

Data-Driven SVG Apps: A Rapid Development Approach

by Pramod Jain
02/13/2002

Scalable Vector Graphics (SVG) is a W3C-recommended standard for Web graphics. It is an XML-based standard for specifying both graphics and content. SVG replaces server-side image file creation or applet-based graphics with client-based rendering of images, and is likely to revolutionize the way Web graphics are rendered, stored, manipulated, and associated with content. This article will focus on a rapid development framework for creating SVG applications that are driven by data supplied from relational databases, EJBs, and/or Java objects.

Although current popular browsers like IE and Netscape do not directly render SVG, Adobe's SVG Viewer, among other plug-ins, will render SVG documents inside of browsers. Since SVG is a W3C standard, it is likely to be supported by future releases of browsers.

The appeal of SVG is that it is data-driven, meaning data contained in an SVG file is used by the Web browser to render graphics and store non-graphical business properties of objects. The article will present a declarative approach to creating such SVG applications. Our sample application will populate the SVG files with data from relational databases, EJBs, and/or Java objects, and update databases with data from SVG files. The declarative approach requires no coding in Java or VB; instead, the application is composed by specifying the data sources, data access, and update methods (SQL, Stored procedures, Java objects), and tag-based, XSL-based, or JSP-based transformations for converting data into an SVG file. This approach can be used for such applications as Web simulation, Web charting, Web reporting, and Web-based image annotation.

The Appeal of SVG

There are several aspects of SVG worth noting. These aspects are presented below with simple examples.

  1. SVG is XML-based, hence data-driven. Take, for example, this simple code to draw a circle:

       <?xml version="1.0" encoding="iso-8859-1"?> ...
       <svg width="800" height="440">
          <circle cx="200" cy="200" r="100"/>
       </svg>

    SVG is data-driven in that, in this example, the center of the circle and its radius are explicitly specified. Unlike bitmap formats such as GIF or JPEG, an SVG file declaratively specifies the properties of a drawing element. In addition, SVG code, like HTML code, is freely browsable. Just right-click on an SVG object, select View Source, and you can view, copy, and edit the code.

  2. SVG is interpreted and rendered by the browser (via a plug-in). Thus a dynamically-updated chart of sales numbers, for instance, can be generated as an SVG XML declaration instead of a GIF or JPEG bitmap. This leads to efficient storage and transfer of Web graphics. SVG also has advantages over applets and ActiveX controls for graphics rendering, since extensive programming is not involved. Generating XML to draw a graphic is a lot simpler than coding graphical elements in a procedural language.

  3. Business content can be associated with a graphic and delivered in XML to the browser. A simple SVG file will illustrate this:

    <svg width="800" height="440">
       <g id="ball">
          <circle cx="200" cy="200" r="100"/>
          <g style="visibility:hidden" 
             desc="ObjectProperty">
             <text>
               <tspan desc="weight">33.0 ounce</tspan>
               <tspan desc="material">rubber</tspan>
               <tspan desc="price">$0.50</tspan>
             </text>   
          </g>
       </g>
    </svg>

    The ball object is rendered in 2D by the browser, and three properties are associated with the ball object. <g> is a group tag. The three properties are accessible through JavaScript by walking through the DOM of SVG. So for example, a JavaScript can display the three values in a input text box when user clicks on the circle; when the user makes a change in the input box, the user-entered data can be updated in the DOM.

    In SVG, therefore, the drawing element and its business properties can be treated as a single object.

  4. Interactivity and animation can be controlled by JavaScript.

    <svg width="800" height="440">
    <g id="ball"
    onmousedown="DoOMD(evt)"
    onmouseup="DoOMU(evt)">
    <circle cx="200" cy="200" r="100"/>
    ...
    </g>
    </svg>

    In this example, when user clicks down on the ball, an event is generated that is processed by the JavaScript function DoOMD(). For animation, consider the following:

    <svg width="800" height="440">
       <g id="ball">
          <circle cx="200" cy="200" r="100">
             <animate begin="click" 
                   attributeName="r" 
                   from="100" 
                   to="200" 
                   dur=1s" 
                   fill="freeze"/>
          </circle>
       </g>
    </svg>

    Here, on mouse click, the radius of the ball increases from 100 to 200 in one second.

  5. From a browser client, a user may not only view and manipulate "business objects," but also create new business objects. The SVG API provides methods to clone elements and insert elements into an existing DOM. So with SVG, a graphics editor can be created in a Web browser and then business properties can be associated with graphic elements.

    Related Reading

    SVG Essentials
    By J. David Eisenberg

    Consider the business example of a building floor plan. The user wants to be able to pull up a digital image (GIF or JPEG file) of the floor plan; review and annotate the drawing to note locations of electrical outlets, phone jacks, and ethernet jacks; and save the changes into a database. Annotations are done by creating red rectangles for electrical outlets, blue rectangles for phone jacks, and green rectangles for Ethernet jacks. In addition to the graphics, the user can specify properties like the number of electrical outlets at the location, the number of phone jacks and the telephone numbers at each location; and the number of Ethernet jacks and the IP addresses at the location.

    For the above example, the appeal of SVG is that an XML document can be created dynamically on the server while pulling content (graphical and business) from a database, while changes made by the user can be updated in the database. This role is traditionally performed by the middle tier. The middle tier, in this case, will create the SVG file by extracting data from database, and parse the SVG file and update the database.

The focus of most SVG applications thus far has been on creating better Web pages using SVG. The focus of this article will be on creating better data-driven business applications. We will use the above example to illustrate how the declarative nature of SVG can be combined with the declarative nature of the middle tier to rapidly deliver scalable applications. With this combination there is little or no Java coding required to build SVG-based enterprise Web applications.

Pages: 1, 2, 3

Next Pagearrow