Kirill Grouchnikov's Blog: February 2007 Archive

Windows Vista was released a few weeks ago, and it brings a sophisticated Aero user interface. I've just bought a brand new laptop with Vista on it, and i must say that Aero brings a substantial improvement in the UI experience (note to all Mac users - this is not a comparison between Mac and Windows, so there's no need for flamewars in the comments).

So i've installed my development environment on the laptop, including Eclipse and JDK 6.0u1 and had quite a few hours on them. One of the things that kind of "bothered" me was the Package Explorer view in Eclipse - the tree collapse / expand icons were constantly appearing and disappearing. It took me a few minutes to understand what's happening - when the mouse leaves the tree, these icons fade out and disappear, to reappear when the mouse enters the tree. On one hand this was kind of irritating at the beginning (i thought it was a UI bug, and there are some cases where you have to explicitly click outside the tree to make the icons disappear), but on the other hand it makes the overall UI less cluttered.

Following my experimentations on sliders and scroll bars, the latest development drop of Substance contains an option to have this effect on the trees (see the WebStart link below).

The new SubstanceLookAndFeel.TREE_DECORATIONS_ANIMATION_KIND fade kind is used to "describe" this animation effect. This is turned off by default (to provide backwards visual compatibility) and can be turned on using the following two APIs:


  /**

   * Allows fade of the specified kind on all controls.

   * 

   * @param fadeKind

   *            Fade kind to allow.

   */

  public synchronized void allowFades(FadeKind fadeKind)



  /**

   * Allows fade of the specified kind on the specified control.

   * 

   * @param fadeKind

   *            Fade kind to allow.

   * @param comp

   *            Control for allowing the fade kind.

   */

  public synchronized void allowFades(FadeKind fadeKind, Component comp)

These two are available in the org.jvnet.lafwidget.utils.FadeConfigurationManager class. The first can be used to enable the tree decorations animation on all trees (globally) while the second can be used to enable the tree decorations animation on the specific tree. Here is how it looks at runtime:

In order to see this functionality in a WebStart demo, click the button below, wait for the application to load, go to the "Tree" tab, select the "animate tree decorations" checkbox in the left task pane and move the mouse over the tree and away from it (and let me know if you see any bugs):

In addition, i finally had some chance to see the new Windows look and feel. It looks really good, reproducing the look of almost all components and having animations on the more common controls (buttons, check boxes, radio buttons etc). There is some work still left to be done (animations on progress bars, menus, etc), and still some more work to be done on trees. Here is how the native tree looks like (the mouse is hovering over the "build" folder - see the glowing icon):

And here is how a tree (with no custom icons) looks like under Mustang u1 latest weekly drop:

Here, the Swing Windows LAF loses (for now) to SWT which has native icons, animations and (lack of) tree lines. In addition, the selected tree node doesn't show any text - the custom tree renderer uses HTML to wrap the text in <html><b> tags (this works correctly in Metal and Substance). Last but not least, i'd like to remind you that i will be presenting a small session at Desktop Matters conference which will take place on March 9th in San Jose. If you're interested in one long all-desktop day, you're welcome to register and participate.

Spicing up your JTabbedPane - part VI.b

Posted by kirillcool on February 24, 2007 at 10:26 AM | Permalink | Comments (4)

This is an addendum to the sixth part of the series that describes the additional capabilities that you can get on your tabbed panes.

The first part described close buttons and animation on modified tabs
The second part described vetoable close buttons and vertical tabs.
The third part described single-click close of multiple tabs and custom alignment of tab texts on left and right placement.
The fourth part described hover preview popup and tab overview dialog.
The fifth part described tab pager (enhanced since first described).
The sixth part described carousel components integrated into the tab overview dialog.

Since the carousel components (round carousel and menu carousel) look quite better than the existing grid tab overview panel, the later was enhanced to provide better visuals.

Here is how it looked before:

Here is how it looks now:

The main improvement is the drop shadow borders (using the Looks implementation) on the individual thumbnail previews. In addition, the following shows what happens when you move the mouse over the grid:

The implementation itself is quite straightforward and uses a custom glass pane to overlay the animations. In order to see this functionality in a WebStart demo, click the button below, wait for the application to load and click the small button to the left of the tabs (the one with the magnifying glass).

An article on writing custom Swing components

Posted by kirillcool on February 22, 2007 at 08:54 AM | Permalink | Comments (0)

An article of mine on writing custom Swing components has been published today on java.net. It follows the article on how to write a custom look and feel and the article on enhancing Swing applications with widgets.

Hopefully, these three contain enough information to start you off on the path of writing custom components that play well with both core and third-party look and feels. Note that the latest article focuses mainly on the component building blocks, and less on the "automatization" side (bean interface, playing well with IDEs and builders etc). This is left as an exercise to the reader.

You're more than welcome to comment on the articles.

What's the big deal?

Posted by kirillcool on February 16, 2007 at 10:05 PM | Permalink | Comments (23)

I've been following Cafe au Lait for a few weeks now, and it really amuses me. Quotes like "the best Java can or should do is faithfully mimic the native user interface" and "the goal of a Java application is to fit in with other native applications, not to stand out" most certainly indicate that the writer is a strong proponent of a native look and feel, which is kind of bemusing. The Mac UI is shifting constantly, and the upcoming OS X release is supposed to feature a new UI (Illuminous?). Given the history of OS X for the past few years, and numerous native look and feels (Aqua, Graphite, Brushed Metal), it would appear that even Apple's UI designers don't consider the current state of affairs as the best. But i digress.

The latest links to a well commented article on Swing / AWT against Cocoa which does have a lot of valid points, but the link itself concentrates on one of the more inaccurate and misleading quotes:

You need to be able to change the UI around really easily during development — after user testing, or a Steve Jobs encounter session — even after you’ve attached a lot of code to it. That means no RAD tools that write code for you, because once their code mingles with your code, it gets hard to disentangle. Instead, the UI should be described with data, like an Interface Builder ".nib" file.

The obvious target of this quote is NetBeans Matisse which puts the UI-related code in the same file as the business logic (say, event handlers). However, that is misleading at best and fanboyish at worst.

The code that NetBeans generates doesn't "mingle" with your code. It is kept in one section of code which is folded by default, and the Java editor doesn't allow you to edit it (you can still view it).
If you do open this class in an external editor, change the generated code and then play surprised that NetBeans doesn't like it (if you don't follow its conventions), think about what would happen if you'd do the same with the NIB file. Or with the good old Visual Studio RC files. Or with brand new XAML / C# extravaganza.
NetBeans doesn't use any proprietary format and is already supported by Instantiations for editing in Eclipse. Any other major Mac IDE providing support for editing NIB-based UIs?

So, what's the big deal? What's all the bickering about? That NetBeans doesn't use two separate files? Or that a major Java IDE finally provided a decent UI editor? Or that Java developers seem to treat a 5% market as what it is (a 5% market)?

I don't want to reopen the entire native against cross-platform look-and-feel debate again. I just would like to understand the real difference between Interface Builder approach and Matisse approach, as long as each one of these is used as it's designed to.

For some more thoughts read this and this.

Spicing up your JTabbedPane - part VI

Posted by kirillcool on February 14, 2007 at 12:22 AM | Permalink | Comments (11)

This is the sixth part of the series that describes the additional capabilities that you can get on your tabbed panes.

The first part described close buttons and animation on modified tabs
The second part described vetoable close buttons and vertical tabs.
The third part described single-click close of multiple tabs and custom alignment of tab texts on left and right placement.
The fourth part described hover preview popup and tab overview dialog.
The fifth part described tab pager (enhanced since first described).

This entry describes the new feature available in the next version of Substance look-and-feel (code-named Japan) and any other third-party LAF using laf-widget layer.

The vast majority of code was written by Nigel Hughes and contributed to the laf-widget under Apache license. Nigel first introduced the carousel component back in December, and later in January followed up with carousel menu (inspired by Apple TV interface). I spent the last weekend integrating this functionality in the tab overview dialog that provided a grid overview up until now. The time was spent well on both sides, with Nigel graciously making numerous changes that i requested to both carousel and carousel menu (thanks for bearing with all my requests), and me enhancing the TabPreviewPainter class that defines the tabbed overview dialog functionality.

By default, the tab overview button will show the regular grid overview dialog. To show the new carousel functionality, override the public TabOverviewKind getOverviewKind(JTabbedPane tabPane) method of TabPreviewPainter or DefaultTabPreviewPainter and return either TabOverviewKind.ROUND_CAROUSEL or TabOverviewKind.MENU_CAROUSEL.

Here is an example of the TabOverviewKind.ROUND_CAROUSEL tab overview (the WebStart link is at the end):

Here is an example of the TabOverviewKind.MENU_CAROUSEL tab overview (the WebStart link is at the end):

In order to see this functionality in a WebStart demo, click the button below, wait for the application to load and:

Click the "General settings" task pane on the left hand side.
Select either "round carousel" or "menu carousel" in the "Overview kind" combo box (under "Miscellaneous" section).
Click the small button to the left of the tabs (the one with the magnifying glass

To view dynamically updating overview dialog (updating painting, automatic tracking of added and removed tabs) go to the "Tabbed Pane", configure its tab overview kind in the "Tabbed Pane" task pane and follow the instructions above.

Bringing life to your (j)sliders

Posted by kirillcool on February 11, 2007 at 08:26 PM | Permalink | Comments (16)

One of the more interesting suggestions on the entries about translucent scroll bars came from Mikael Grev: an interesting addition would be if the scroll bars would be very thin or in some other way very subtle and only when the mouse is close/over they would animate to their full size. While this hasn't been implemented yet on the scroll bars, this functionality is now available on the sliders in the latest development drop of the next version of Substance (code-named Japan).

First, here's a screenshot of how sliders look like under the latest release:

Now, here's a screenshot of how sliders look like in the latest development drop:

Question 3 of the project FAQ states that while the binary backwards compatibility is of topmost importance (in fact, it was broken only in one release), the visual compatibility is less strictly enforced. As a matter of fact, one of the main reasons for the slider overhaul was the amount of vertical space that the horizontal sliders take, and after seeing a video demonstration of Yahoo Messenger for Vista, it was time to make some changes. In fact, a horizontal slider with no ticks and no labels is now 18 pixels high instead of 24, a horizontal slider with ticks and no labels is 21 pixels high instead of 32 and a full blown slider with ticks and labels is 38 pixels high instead of 49.

Another, and more interesting addition comes in the form of slider thumb animation on mouse pointer proximity. This can be seen in both the demonstration of Yahoo Messenger and in the following short clips (click the play button). Here are the new sliders under the Business Black Steel skin:

Here are the new sliders under the Raven Graphite skin:

Note how the slider thumb grows when the mouse is directly over it or in its vicinity and shrinks back (the essence of this functionality is apparently lost on some). The slider ticks are less obtrusive (translucent near the end). The focus ring properly fades in on focus acquiring and fades out on focus lost. In addition, the first and the last ticks are not painted since they're pretty much redundant.

To see the new sliders in action, click on the image below and go to the "Sliders" tab.

Last but not least, i will be presenting a small session at Desktop Matters conference which will take place on March 9th in San Jose. If you're interested in one long all-desktop day, you're welcome to register and participate.

New skins for Swing applications

Posted by kirillcool on February 06, 2007 at 12:06 AM | Permalink | Comments (33)

I wouldn't be the first to admit it, but my programming skills are much better than my designing / color-matching skills. The ever merciless community won't let me forget this (and i thank you for it). Apparently, people just don't like happy jelly buttons (sigh). And as much as i would like to concentrate on even happier jelly buttons, this is not what my users want (based on the comments on this blog and on the sample applications attached to the bug reports).

The leading third party look-and-feels have one thing in common - they all provide toned-down appearance that targets business applications. Even the names branded by the marketing are very suggestive. Synthetica calls itself "The Enterprise look and feel", Alloy is a "truly professional" and JGoodies Looks is "high-fidelity, precise and elegant". As one can't argue with success (i tried in vain for over a year), and since imitation is the sincerest form of flattery, i had to curb my taste for acid saturated colors and join the party.

This continues in the next version of Substance look and feel (code-named Japan) with four new skins that target business applications.

The first is Business Blue Steel which follows the design of Blue Ice Synthetica theme:

The second is Business Black Steel which follows the design of Black Moon Synthetica theme:

The last two are based on the latest products from Microsoft and Apple camp (is it a coincidence that both design giants have chosen a strikingly similar skinning for their major product releases?) Microsoft's Expression Blend (free Beta download) and Apple's Aperture (free trial download) both sport the same dark-grayish UI that doesn't draw the attention away from the main work canvas (see sample Blend screenshot and sample Aperture screenshot). This isn't actually the first time that i tried to create a dark skin, but i really like these two.

The first is Raven Graphite:

and the second is Raven Graphite Glass (note that the button gradients and the header gradient are "glassier" and the foreground color is whiter):

One last thing is the introduction of a new client property called SubstanceLookAndFeel.USE_THEMED_DEFAULT_ICONS which renders all button icons of inactive (non-selected, non-pressed, non-rollover, non-armed) buttons in theme colors. This setting plays especially good with the last two themes ( i actually borrowed the idea from Expression Blend), since you can have a lot of icon buttons on your toolbars and they still wouldn't distract the user from what he's doing.

For the comparison, here is a screenshot without this setting:

Now, the same application with this setting turned on:

The same application when the mouse is over the "Paste" toolbar button (third from the left):

If you want to play with the latest development drop, head over to the download section and try out the new skins. You're more than welcome to leave comments.

Substance LAF 3.2 official release

Posted by kirillcool on February 05, 2007 at 12:15 AM | Permalink | Comments (2)

Substance LAF is pleased to announce the release of version 3.2 (code-named Iowa). The list of new features includes:

Two new dark skins, Challenger Deep and Emerald Dusk
New SubstanceDefaultLookAndFeel - can be set to restore the default Substance settins
Overlay effects on scroll bars
Customizable grip handles on scroll bars
Aligned menu opacity on rollovers / selection with tree/table/list
Slider respecting current shaper
Rollover effects on table editors
New version of Xoetrope color wheel panel
Customizable menu gutter fill kind
Support for removing the pin button from internal frame title pane
Support for image watermark from input stream

In addition, the following new features from release 2.1 of laf-widget project (code-named Camellia) are available:

Image ghosting effects on buttons
Tab pager enhancements
Component preview painter
Scroll pane selector
ESCAPE-select widget
API for configuring animation effects
Combobox auto-completion removal

Note that the support for image ghosting effects on buttons has been moved to laf-widget 2.1 release (bundled with the 3.2 release of Substance).

In addition, complete documentation for Substance API, Substance client properties and Laf-Widget client properties is available.

The Flamingo component collection project has also officially released version 1.1 (code-named Brianna).

Powered by
Movable Type 3.01D

java.net RSS Feeds