Kirill Grouchnikov's Blog

SVG and Java UIs part 2: SVG file explorer with resizable previewer

This entry outlined the importance of scalable icons for the next-generation UIs and showed how SVG format can be used to achieve resolution-independent easily scalable icons. One thing that i haven't been able to find is a SVG file viewer / explorer that shows all SVG files in the current folder and allows scaling them. Inkscape file chooser provides the preview, but it's only for the selected image and it's not resizable. So, instead of looking further on the web, i decided to implement such viewer on top of the existing components in the flamingo components.

The SVG file explorer reuses two existing components. The first is the breadcrumb bar which was contributed to this project by Topologi. You can read how this component can be used to create a Vista-style file explorer right here. Another component is a ribbon button from the ribbon component that uses a resizable icon and two-line optional label (which is used to show the filename). After about two hours of work of putting this together (interrupted by spectaculously boring season premiere of "Bones"), here are some screenshots of the SVG file explorer in action. Note the breadcrumb bar file path selector on top.

The first image shows all folder SVG files in 32*32:

The second image shows all folder SVG files in 48*48:

The third image shows all folder SVG files in 80*80:

The last image shows all folder SVG files in 128*128:

Unfortunately, due to some issues with the underlying SVG renderer i can not provide a signed WebStart application. This issues have been reported on the relevant project tracker - you're welcome to vote on them.

Undoubtedly, for application like this, the Apache Batik renderer Swing components are a better choice, since they offload the SVG loading to a worker thread. Stay tuned for Batik integration.

Comments

• Really cool! Recently we did a kiosk in java that used plain old png images, with this now we can stage a rework to use svg. Thanks =)

  Posted by: aalmiray on August 31, 2006 at 11:06 AM

• Kirill, this looks pretty cool!

  I like the Ribbon component and the SVG stuff you've been posting, please keep it up.

  My only criticism is the use of the substance look and feel, which I'm sorry to say looks a bit like an eyesore. It's also been hard to use some of the other demos without using the native windows decorations (and it seems to degrade performance). Any way to show some of these without the Substance look and feel?

  Posted by: augusto on August 31, 2006 at 02:56 PM

• augusto,
  You can run the Ribbon and breadcrumb bar under basic look and feel by downloading the archives from the flamingo project site (flamingo.jar and flamingo-tst.jar) and using the test.bcb.BreadCrumbTest and test.ribbon.BasicCheckRibbon. For the ribbon you'll have to take the svgSalamander.jar (for SVG icons).
  One thing - as with the basic core UI delegates, they don't look that great. Since these components are not composed of other core Swing components, they don't have Metal / Windows / Motif implementation. It's too much work for me without (at least for now) the real need to do it. The reason i'm using them under Substance - to test that the basic delegates can be extended properly (so that other third-party LAFs can provide UI delegates for them) and that Substance / Laf-Widget / Laf-Plugin layers work correctly together at discovering the correct UI delegates at runtime, using fade animations and so on.

  A side note - you are not the only one who doesn't like Substance saturated themes (Romain, wink-wink). The previous entry showed a toned-down Silver skin - you can create such a skin in about 15 lines of code in Substance. In addition, you can tone, tint and desaturate the existing themes to make them less "eyesore", or even create your own color scheme that is pleasing to your eye. Or, you can take any other look-and-feel out there (there are plenty LAFs that use gray-silver toned-down themes) - but then you will not have full support for Flamingo components such as breadcrumb bar and ribbon, unless the developers of those LAFs provide the relevant UI delegates. I will most certainly welcome any such step since it will help me identify lurking bugs and problems in the base delegates and the components themselves.

  Posted by: kirillcool on August 31, 2006 at 05:50 PM

• Nice!

  Is Batik not integrated yet ? I wound't do it if you haven't got a good reason. Second - could you add a "Export as Png..." oprion, where I export all SVG in one folder as PNG using the given size to another folder.

  Cheers,
  jg

  Posted by: javagoodies on August 31, 2006 at 06:31 PM

• javagoodies,
  In fact, i have two very good very reasons to use Batik. The first is that SVG Salamander seems to miss support for quite a few SVG features. It's OK on Tango, but it completely bombs on GNOME / KDE icon set. The second is that Batik's Swing components use a separate thread to parse the SVG which allows opening a folder with hundreds of icons which are loaded asynchronously while the UI remains responsive - without any code writing on my part. More on this later when the support for Batik which i started last night will be finished when i get home. About the "Export as PNG" - i won't even go there. It's not supposed to be a full-fledged imaging application, although it can easily serve as a skeleton for such.

  Posted by: kirillcool on August 31, 2006 at 06:48 PM

• did I miss a download for this item. Some of the comments seem to indicate that there was an actual application here.

  I'm looking for EXACTLY this project, and I'd hate to re-invent the wheel, when its already been done so nicely...
  

  Posted by: brianj774 on March 13, 2007 at 08:56 AM

• brianj774 - follow this link - it has a WebStart link.

  Posted by: kirillcool on March 13, 2007 at 09:13 AM

This work is licensed under a Creative Commons License.