SVG and Java UIs part 3: using Batik for asynchronously-loading UIs
This entry is the third part in the ongoing series about using SVG-based icons in Swing-based applications.
- The first part outlined the need for using scalable icons in next-generation Java UIs and proposed using SVG images as a possible format, showing the ribbon component which employs heavy icon rescaling.
- The second entry introduced an SVG file previewer based on the breadcrumb bar component, a ribbon button from the ribbon component and SVG Salamander renderer
Those with time on their hands who downloaded all the necessary jars to run the SVG file previewer, may have noticed that the underlying SVG renderer is not quite mature. It crashes on quite some few icons from the Tango project (sometimes outputting messages to System.err) and completely bombs on the Nuvola icon set and other GNOME icons (available for download right here). In addition, when you open a folder with 100+ icons you can go and grab a cookie - the SVG files are loaded synchronously. The same would go for the dynamic icon resizing. While the second issue can be addressed using custom threads in your application, the first issue can be addressed only by the project developers (relevant issues were filed).
What about Apache Batik SVG renderer? It has some clear advantages and a few disadvantages. First of all, it has much better support for various SVG files - all the files in Tango were rendered successfully. However, a significant portion of GNOME icons (in almost all bundled schemes, especially Nuvola and Amaranth) either failed to render (in the bundled Swing demo application as well) or rendered in incorrect size.
One very big advantage of Batik is the
JSVGCanvas Swing component that loads SVG files asynchronously and allows registering lifecycle listeners - one of them will be called when the SVG tree has been completed (at this point you can layout and render the specific icon). The result (see the WebStart link and video below) is that the application comes up much quicker, getting populated with the icons as they are loaded, while still remaining responsive. The same goes for icon resizing. There are some problems with this component as well. The major one - for every canvas instance, a new thread is created (bug report). If you preview a folder with a few hundred files you will have
OutOfMemory exception - it would be nice to have some sort of control over the pool size and thread reusage. Another problem (quite minor one) is that it doesn't respect the opacity setting (bug report) - this can be dealt with by setting the background color to 0x0. The main advantage of SVG Salamander over Batik in Swing support - the lack of
Icon-implementing class in Batik (bug report). You have to either have the
JSVGCanvas or copy-paste its implementation and have the custom
The additional advantage of SVG Salamander over Batik is the bundle download size and complexity. Salamander has one 320 KB jar, while Batik comes with 20 jars totalling to 4.3 MB (what's the deal with using Xerces - SAX and DOM from JDK are not good?). This may be a major factor for applications with small core footprint and for secure WebStart applications when you'll have to sign and publish 20 additional jars. However, Batik's SVG support is much better than Salamander.
Both toolkits are very similar in the time it takes to load all SVGs in the same folder. However, Batik is a clear winner here due to the out-of-the-box asynchronous loading.
The screenshot below shows the GNOME Lush icon set under Metal look-and-feel (as requested by one of the commenters):
To launch the test ribbon application using Batik renderer, click on the image below - note how the icons are shown and resized asynchronously leaving the UI responsive. You can play with the icon sizes by resizing the window. You can play with various themes / watermarks by going to the "Look & Feel" task.
To launch the SVG file viewer using Batik renderer, click on the image below - note how the icons are shown and resized asynchronously leaving the UI responsive. Play with the slider to resize all currently shown icons. Note that this application is signed since (obviously) it requires access to the local disk. If you don't want to run it, download and watch the video link below.
In case you don't want / can't run the WebStart demoes or download the stuff from the projects pages, this video (1.3MB, 0:35 min, original WMV format renamed to AVI) shows the SVG file previewer with various animation effects (from the Substance look-and-feel) and responsive UI thanks to Batik.
As i mentioned in the first part, Batik has much steeper learning curve - it took about three times as much as with Salamander to integrate with Flamingo components. Luckily the VMA awards was on in the background - did anyone notice that Lil Kim looks frighteningly similar to the pregnant Leah Rimini? But i digress. Note that the license for Flamingo remains BSD - the Batik and Salamander integrations are done in the test branch for the test applications. The next series installment (tomorrow) will show and compare the implementation details using Batik and Salamander.
And one last thing - crashing the award show, especially when the last award is given is indeed uncool. And Sarah Silverman still is the best comedienne around.