 |
|
 |
 |
|
|
 
Kirill Grouchnikov's Blog
«Naming project releases |
Main
| SVG and Java UIs part 2: SVG file explorer with resizable previewer »
SVG and Java UIs part 1: SVG-based resizable icons for next-generation UIsPosted by kirillcool on August 30, 2006 at 12:01 AM | Comments (10)The high-resolution LCD and plasma monitors are quickly becoming an affordable commodity, and the next versions of two major OSes (Vista and Leopard) will be using vector-based continuously-scalable icons and UI elements to create UIs that easily scale on 120+ DPI monitors. One of the vector-based formats quickly gaining popularity is SVG. One of the flagship Microsoft's applications was and remains Office. Office 2007 introduces a new UI concept called ribbon which makes very heavy usage of scalable graphics to convery the same amount of information on different monitor sizes and application resizing. You can either read through Jensen's blog or find a short version right here. Giving the user the ability to scale the UI to his / her taste will be an invaluable feature, but it comes at a price for us, the developers. See this entry on Geertjan's blog to see the wrong way to scale icons. This entry from about a year ago showed how to utilize Java2D to create scalable icons. However, this requires considerable design talent and time investment. What if you're short on one of them? SVG comes to the rescue. With continuous additions to the Tango project (thanks to Kohsuke for mentioning this project on his blog a few months back), and open-source libraries such as Apache Batik toolkit, the icon scalability can be easily achieved in modern Java UIs. The test application that comes with the flamingo components (see WebStart link at the end) uses the SVG Salamander renderer to turn SVG files into scalable icons. The choice between Batik and SVG Salamander in this particular case was in favor of the later, since it is much smaller and has less steep learning curve (although it has quite a few problems in rendering some of the Tango images). Here are a few screenshots of the Ribbon UI under different application sizes. All the screenshots feature the same highlighted button, to that you will be able to see the same icon rendered in different sizes. The first image shows the UI when all the buttons are rendered at full size: 
The second image shows the UI when some of the less important buttons use smaller icons but still show the labels: 
The third image shows the UI when all buttons use smaller icons only due to the lack of screen space: 
The final image shows the UI under extremely small width, where the entire band has been collapsed to a single button, which (when clicked) shows the original full-size buttons in a popup window: 
Note that SVG supports transparency and translucency, allowing the icons to blend with different color backgrounds (note the circular shadow beneath the clock and the fuzzy yellow thingies in the top corners). Here are some screenshots of the same band under different color schemes (using Substance skins described here):     
To launch the test application, click on the image below. 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. 
Bookmark blog post:  del.icio.us  Digg  DZone  Furl  Reddit
CommentsComments are listed in date ascending order (oldest first) | Post Comment
| |
 java.net RSS Feeds
|
