Color selector popup in Flamingo 5.0

May 28th, 2010

The latest 5.0dev drop of Flamingo provides a flexible color selector popup that you can associate with the command buttons that control the color selection of elements in your application. Here is how a color selector popup looks like under left-to-right and right-to-left orientation:

https://flamingo.dev.java.net/release-info/5.0/color-selector-popup.png

To associate a color selector popup with the specific command button (that has a popup area), return an instance of JColorSelectorPopupMenu from the PopupPanelCallback. This class extends the JCommandPopupMenu and allows adding command menu buttons, command toggle menu buttons and separators. The screenshot above shows two command menu buttons in the color selector popup – one at the top and another at the bottom.

In adition, the JColorSelectorPopupMenu provides the following APIs to add color selector sections:

  • addColorSection that gets 10 colors. The “Standard Colors” in the screenshot above is an example.
  • addColorSectionWithDerived that gets 10 primary colors. Each primary color will show a column of 5 derived colors below it. The “Theme Colors” in the screenshot above is an example.
  • addRecentSection. Shows the LRU list of the recently selected colors.

A JColorSelectorPopupMenu is created with an instance of ColorSelectorCallback. This interface has two methods:

  • onColorRollover(Color) – allows your application to show the live preview of the color under the mouse. When called with null, the application needs to unset the live preview.
  • onColorSelected(Color) – called when the user selects one of the colors in the popup.

The selector sections added with the APIs above will be automatically wired to the color selector callback that you pass in the constructor. If your design requires displaying additional menu buttons to select color, these will need to be explicitly wired to the callback and the list of recently selected colors.

The test.common.TestColorSelector application shows sample code on how to do this. The top button selects a default color. It has an ActionListener which calls the same logic as onColorSelected(), and a ChangeListener that tracks changes to the rollover state of the menu button and calls the same logic as onColorRollover(). The bottom button in this sample application launches the core JColorChooser. When a color is selected in that chooser, the custom application code calls the same logic as onColorSelected().

When a color is selected in both custom menu buttons, the list of recently selected colors is updated – so that the user can quickly choose it again in the future. The relevant APIs in the JColorSelectorPopupMenu are:

  • static getRecentlyUsedColors(). The last element in the list is the most recently selected.
  • static addColorToRecentlyUsed() adds the specified color to the list. If the color is already there, it is moved to the end of the list.

This list is guaranteed to contain at most ten colors.

If you want to take the new color selector popup for a spin, you will need the following:

Note that the last two are required if you’re running your application under one of Substance skins.