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


AddThis Social Bookmark Button

Data-Driven SVG Apps: A Rapid Development Approach
Pages: 1, 2, 3

Format of the Retrieved Dataset

After processing the declarative specifications of data sources and data access methods, the following XML file is created by the middle tier from the data obtained by executing the data access methods.

<!-- Illustration of middle-tier XML output 
   format from data sources -->
   <image_id>8829</ image_id>
   <loop name="loop1">
               <g id="power1"><use>...</use></g>
            <g id="phone1"><use>...</use></g>
            <g id="ethernet1"><use>...</use></g>

The above XML data structure reflects the way data access methods deliver rows of data. The first two elements of the XML file correspond to the first two select statements in the "Data Access and Update Methods Defined Declaratively" section of this article. The third select statement there delivers data in loop1.

XSL/Tags/JSP-based Transformations to Create SVG

Next, the generic (typeless) XML data structure above must be transformed to the target XML. Again, this is accomplished declaratively by indicating the necessary transformation to the above dataset. Here is an example of Tags-based transformation:

<!--section 3 of dts.xml -->

Note that dataset1 is the same name used in section 2 of dds.xml. So after the middle tier creates the XML document using the dataset1 specification, dts.xml transforms the XML using the dataset1 specification. As illustrated above, depending on the Java class and the template transformation file (floorplanTemplate.svg), the source data set is transformed to the appropriate output (floorplan.svg).

SVG Tools

Tools are essential for any productive development process. A set of tools that will help SVG development is presented here for each of the following phases.

Manipulate SVG from the browser--Front-end Tier
Adobe's SVGViewer plugin for browser and Adobe's SVG Editor
Retrieve and store SVG in databases--Middle Tier
Write tools to extend your SVG arsenal --Tool Tier

SVG Viewer & Editor from Adobe

A browser plug-in, SVG Viewer interprets and renders SVG. For our day-to-day work, the authors use the SVG plug-in from Adobe.

Adobe SVG Viewer makes the DOM representation of the SVG XML available. DOM can be manipulated using JavaScript right in the browser -- nodes in the DOM can be created, updated, or deleted.

More importantly, it allows an event model that can be responded to from JavaScript. This is how regular mouse movements can be used to manipulate graphical objects from the browser. Use SVG Editor to better understand the capabilities.

Batik from Apache

Batik is a Java toolkit for working with SVG content. For example, using Batik, Swing-based graphics can be exported to SVG, or SVG documents can be browsed in a GUI panel powered by AWT or Swing.

One of the stated goals of Batik is to be able to "manipulate SVG documents anywhere Java is available." This is a great benefit -- wherever Java is available. But for a browser environment, it may not directly help in the manipulation of the SVG by the end user. Nevertheless, it could play a role in storing and constructing of the SVG documents from other basic content. For instance, an SVG layer (or group) could be broken apart using this toolkit and saved as individual constructs.

Batik is highly applicable for standalone Java-based IDE environments and also, potentially, as a Java-based applet when the Java Plugin software fully matures and offers a viable alternative to HTML-based applications.

Aspire from INDENT

To develop SVG applications that are driven by databases, the authors' company has developed Aspire. Aspire provides an effective middle tier that is broadly available, and at the same time enables developers to be productive. Aspire is a J2EE-based Java middle tier that allows storage and retrieval of SVG documents in and out of databases with a minimal amount of coding.

Aspire streamlines and makes declarative the process of converting relational data to suitable SVG/XML, as illustrated in this article. This greatly reduces the effort and development time of projects that require the conversion of relational data to XML.

Aspire is not limited to relational data; any kind of data source can be plugged in as long as a Java adapter is written for that source. Aspire provides the APIs to write such adapters.

The target SVG/XML generation can be done using XSL, JSP, Tags, or even a Batik-based transformation. Being a J2EE-based Web development platform, Aspire automatically offers authentication, authorization, session management, and declarative Web navigation.

A high-level architecture diagram for Aspire is presented here. Note that Aspire runs as a servlet-based J2EE engine, it can collect data from multiple data sources using DDS and DTS specifications, and it converts the retrieved data to the target format using any of the user-specified transformations. A demonstration of the system for creating Web-based charts and graphs is available.

Further Reading

  • SVG Specifications
  • Designing SVG Web Graphics, Andrew H. Watt (New Riders Publishing, 2001).
  • "Java/XML Programming for Relational Databases," Satya Komatineni, XML Journal, Vol. 2, Issue 4, 2001. This article explains how to use TDP to convert relational data to XML data on the fly.
  • "A JSP Architecture for Oracle Stored Procedures," Satya Komatineni, Java Report July 2001. Article explains how Oracle stored procedures are used as plug-in adapters for the declarative middle tier that is described here.

Pramod Jain is President of INDENT, Inc. INDENT has developed a data engine for SVG-based charting software.

Return to ONJava.com.