Voyant Swing Highlights

Fading Popup

This fading popup appeared when we wanted to give the user some ephemeral confirmation notice.

Left alone, the dialog will fade away, but if the user hovers the mouse, it will return to full opacity until the mouse is moved off.
If clicked, it will be dismissed immediately.

The code synchronizes some key methods to handle access by the animation thread and the EventDispatchThread. It also allows multiple simultaneous popups. (Code Sample)

Hover Panel

This semi-transparent hover panel appears with a click on the chart, and displays financial data relevant to the year beneath it. The displayed data updates dynamically as the user moves the mouse over the chart.

All data with an associated color on the chart will have a matching colored box next to it.

Note the rounded corners. :)

Voyant Dialog Features

The Voyant Dialog you see here is actually a hierarchy I built of 4 classes, each of which adds a feature:

modality
corner-icons
custom border
resizing/moving

Most dialogs, including this one have all features. The custom border is rendered dynamically, and resizes with the dialog.

The top-right icon is super-imposed over the dialog, and can also be a functional button. The small white circle in the bottom right is a resize handle.

Glossy Faces

Both the button below and the "Stage Bar" on the chart have a glossy finish to them. I'm not going to tell you how I did it, because I'm too embarrassed to admit how easy it was. It's a nice effect for the user, though.

Overall look & feel

I am 95% responsible for implementing the overall look and feel of the client application. Put differently, I built the colors, styles, much of the layout, lists, and headers in the representative picture below.

Google Sites

Report abuse