The goal of Flamingo project is to provide a small and cohesive set of powerful UI components with functionality similar to or superseding that of Vista Explorer and Office 2007. Command bar is one of the more complicated UI components in the Office 2007, and Flamingo’s JRibbon is the all-Java implementation of this component. It is already being used by a number of projects which provide valuable feedback on the missing parts and help in prioritizing their development. Recently, i have added two user-requested features to the JRibbon – modifying the contents of in-ribbon galleries and support for contextual tabs.
The documentation of JRibbon has been updated to bring it in-sync with the latest 3.1dev branch. If you’re new to this component, start with the overview and then delve into the specifics of each one of the ribbon’s building blocks.
To read more on modifying the contents of in-ribbon galleries scroll down to the “Dynamically changing gallery content” section in the ribbon bands page. To read about contextual task group, first read the page on creating a task group and then read the “Working with contextual task groups” section of the ribbon creation page.
Here is a screenshot of a ribbon with selected contextual tab. Note the vertical lines that separate the tasks in the two contextual groups. Also note the different background colorization of the task toggle tab and the top portion of the ribbon – this is done to provide visual indication that the currently selected task is a contextual one.
This marks the last new features for the version 3.1 of Flamingo. You’re more than welcome to download the latest 3.1dev drop and try it in your applications. The release candidate for Flamingo 3.1 is scheduled on September 1 with the final release scheduled on September 15. Click on the button below to launch a demo of JRibbon component in action (requires Java 6).
Jeff Friesen is a prolific Java desktop author on such sites as JavaWorld.com and InformIT.com, and his article on parsing .ico files and exposing the icon planes as BufferedImages. One of the areas mentioned in our JavaOne presentation on high-resolution monitors is scaling the application icons, and the org.jvnet.flamingo.common.icon.ResizableIcon interface aims to provide this support.
It was relatively easy to adapt Jeff’s code and create an implementation of ResizableIcon interface that loads .ico files and chooses the best icon plane for the specific size. The org.jvnet.flamingo.common.icon.IcoWrapperResizableIcon is the implementation and you can see how it is used in the test.imageviewer.IcoViewer.
Here is a screenshot of this application showing file icons from the Jordan Michael‘s portfolio under 128*128 size (click for the full view):
and here is the same application with the icon size changed to 256*256 (click for the full view):
The code for parsing the .ico format has been contributed by Jeff under the BSD license. The following must be referenced if you reuse this code in your application:
Over the course of the past few weeks the command button component in Flamingo component suite has been enhanced following the feedback from the project users. There is nothing better than getting the feedback from real-world use, and it is much appreciated on my side. Many thanks go to Kenneth Flynn and Christian Hebert for finding time to report these issues.
Supporting the disabled state
Calling setEnabled(false) on a command button will display the correct disabled state. As with the core AbstractButton, you can set a disabled icon with setDisabledIcon API. The helper org.jvnet.flamingo.common.icon.FilteredResizableIcon class can be used to wrap an existing resizable icon with a ColorConvertOp based on ColorSpace.CS_GRAY (core JDK functionality). Here is a screenshot of a few command buttons in enabled state:
And here are the same buttons in disabled state. Note how the visuals are changed to reflect the new state (including the foreground color of the main text and the extra text, as well as the popup arrow icon). The buttons in the first column specify a custom disabled icon (with the APIs mentioned above).
Supporting changing the text
Previously, once a command button has been created, it was not possible to change its display text with the setText(String) API. The new version supports this API, tracking the display text and recomputing the strings under the BIG and CUSTOM states as necessary. Here is a screenshot of a few command buttons with the default “Click!” text:
And here are the same buttons after they have been clicked a number of times. Each button has an action listener that counts the number of clicks and updates the button text accordingly. Note how the displayed text and the preferred size of the buttons are changed (automatically):
Supporting changing the font
Previously, the command button would ignore setting a custom font with setFont(Font) API. The new version supports this API. Here is a screenshot of a few command buttons using a custom italic font:
Support auto-repeat action mode
The auto-repeat action mode comes in handy when you want to have the action listeners invoked every N milliseconds as long as the button is pressed. This functionality is present, for example, on the arrow buttons in the core scroll bars. Once the scroll arrow button is pressed, it starts firing the scroll action events every 60 milliseconds after the initial delay of 300 milliseconds.
The JCommandButton component has two new APIs to support the auto-repeat action mode. Use the setAutoRepeatAction(true) to set the auto-repeat action mode on. The default initial delay is 500 milliseconds and the default subsequent delay is 100 milliseconds. To change the default values, call setAutoRepeatActionIntervals(int, int) API.
Support column-fill mode on command button panel
Previously, the command button panel component only supported row-fill mode. Under this mode, the buttons are placed in row-first fashion, wrapping the rows when the panel width is reached. Now, the component also supports the column-fill mode. Use the setLayoutKind(LayoutKind) API to specify the layout mode. Here is a screenshot of a command button panel with the default row-fill mode (note the vertical scroll bar):
and here is the same panel under the column-fill mode (notice the horizontal scroll bar):
This functionality is available in the latest 3.1dev drop of Flamingo.
Last week i talked about using Substance decoration painters to visually offset Flamingo ribbon component. Jonathan Giles asked a question in the comment sections on how hard would it be to apply these improvements to an application running under other (core or third-party look-and-feels). I did not wish to rush into implementing it, and let it simmer for a while. A few possible solutions presented themselves, some involving colorization on the UI delegate level, and some involving off-screen images and overriding one of the paint methods in the main component.
As expected, the simplest solution is also the most powerful, since it can be applied to any Swing component / container, involves a few lines of code and doesn’t require any changes in the component library. It uses the JXLayer wrapper developed by Alexander Potochkin and one of the filters from JHLabs project.
The JXLayer is a very powerful component that deserves much more attention that it has been getting over the past couple of years. It allows intercepting events, masking out some parts of the UI area, providing validation feedback, adding custom painting and much more. In our case, all we need to do is:
- Wrap the ribbon in a JXLayer
- Add a painter to that layer
- Create an image effect and add a rescale operation on it that shifts the colors towards light blue
- Add the effect to the painter
At this point, all the visuals from the ribbon will be shifted towards light blue color:
All this amounts to extra 8 lines of code, as shown in the new sample application shipping with the latest 3.1dev drop of Flamingo. While this requires extra two jars in your classpath, the solution is not only elegant, but also applicable to any Swing component / container.
