Skip to main content

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

Posted by kirillcool on August 31, 2006 at 12:10 AM PDT

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.

Related Topics >>