The ribbon component is one the major building blocks of the Flamingo component suite. It is designed to work well with the existing core and third-party look-and-feels, adopting the appearance of the current skin / theme. It also provides a collection of extensible UI delegates that allow third-party look-and-feel developers to further tweak the appearance and the functionality of the ribbon component.
Perhaps the biggest addition to the upcoming release 4.3 of Substance look-and-feel are two new painter types, highlight and decoration. The decoration painters come especially handy for “offsetting” the ribbon component from the rest of the application UI. This is, indeed, how the original Office 2007 command bar (f.k.a. Ribbon) looks like under the Black and Blue themes.
The new public SubstanceLookAndFeel.setDecorationType API allows the applications to mark specific visual areas as decoration areas. The current Substance skin then decides how to paint the background of these areas, as well as all the controls that lie inside them. Specifically for the ribbon component, the Substance plugin for Flamingo sets the following decoration types on the ribbon (see below for the screenshots):
- The ribbon itself is marked as
DecorationAreaType.HEADER.
- The task buttons and task bands are marked as
DecorationAreaType.GENERAL.
The first makes the ribbon blend with the title pane, especially under decorated mode. The second makes all the ribbon controls be a) visually different from the title pane and b) provide a slightly different visual appearance than the “real” application area. Let’s see a few screenshots of the ribbon to better understand these two points.
Here is the ribbon under the last Substance release and Autumn skin:
And here is the same ribbon under the latest dev drop of Substance 4.3. Note how the ribbon blends much better with the title pane, clearly delineating the currently selected task:
The old implementation under Coffee Creme skin:
And the new visuals that make the top part of the application look more polished:
Finally, the old visuals under the Business Blue Steel skin:
And the new visuals (see explanation below):
Note that Business Blue Steel defines a separate theme for the DecorationAreaType.GENERAL decoration areas. For ribbon, it helps to make it stand apart from the rest of the application window, but not in a too “aggressive” way. Also note how this theme is applied to all ribbon visuals, including the command buttons, icons, in-ribbon galleries and the usual controls (combo boxes, buttons).
While the “tagging” of various ribbon areas is done by the Substance plugin for Flamingo, the SubstanceLookAndFeel.setDecorationType is public API and open for the application use.
To try the latest Substance and Flamingo visuals on your applications, use:
The version 4.3 of Substance is in feature freeze state, with release candidate scheduled on March 31st, and the final release scheduled on April 14.
It gives me great pleasure to announce the official release for version 3.0 of Flamingo component suite (code-named Deirdre). The goal of this project is to provide a small and cohesive set of powerful UI components that allow creating modern applications that provide visual functionality similar to or superseding that of Vista Explorer and Office 2007. The components provide consistent visuals under the existing core and third-party look-and-feels, respect the DPI settings of the user desktop and follow the core Swing guidelines in the external APIs and the internal implementation details.The component suite includes:
The project is licensed under BSD license and requires JDK 6.0. You can see the demo applications here. The binary and source bits are available here. A few screenshots of some of the Flamingo components:
File-selector breadcrumb bar and file viewer panel with medium command buttons:
Ribbon under Windows XP look-and-feel with resizable SVG-based icons:
Ribbon under Synthetica Mauve Metallic look-and-feel:
SVN-selector breadcrumb bar and file viewer with tile command buttons and SVG based icons:
Command button with a command button panel embedded in a popup panel:
The release candidate for version 3.0 of Flamingo component suite (code-named Deirdre) is available. The goal of this project is to provide a small and cohesive set of powerful UI components that allow creating modern applications that provide visual functionality similar to or superseding that of Vista Explorer and Office 2007. The components provide consistent visuals under the existing core and third-party look-and-feels, respect the DPI settings of the user desktop and follow the core Swing guidelines in the external APIs and the internal implementation details.
The component suite includes:
The project is licensed under BSD license and requires JDK 6.0. You can see the demo applications here. The binary and source bits are available here. The final release is scheduled for February 18.
The ribbon component is one of the major parts of the Flamingo component suite. It is a Swing component that provides capabilities of Office 2007 Command Bar, and the detailed documentation has been updated to show the latest visuals, APIs and terminology of the ribbon component. Here, i will show a few screenshots that illustrate the ribbon functionality.
The following screenshot shows a sample ribbon component (under Metal look-and-feel with the default Ocean theme):
Ribbon consists of a set of ribbon tasks. Only one task is visible at a time (a-la card layout). Logically, a task also includes its toggle button (the top portion of the ribbon control):
When another task is selected (programmatically or via user interaction), the contents of the selected task replace the previously selected task:
A ribbon task consists of a number of ribbon task bands:
A ribbon task band can contain command buttons in different states, usual core Swing controls (buttons, check boxes, combo boxes) and in-ribbon galleries. The available width is distributed between the task bands based on the priority of the elements in the task. As can be seen in these screenshots, some command buttons are in <font color="darkblue">ElementState.BIG</font> (big icon and text), some are in <font color="darkblue">ElementState.MEDIUM</font> (small icon and text), and the others are in <font color="darkblue">ElementState.SMALL</font> (only small icon).
An in-ribbon gallery allows scrolling and operating a large number of command buttons in a limited space.
Clicking on the gallery expand button opens a popup panel that shows the gallery command buttons arranged in a multi-row scrollable grid:
As mentioned earlier on this blog, the ribbon component uses the visuals of the current look-and-feel. Here is how ribbon looks under the Windows XP with Windows look-and-feel:
And under Windows Vista:
And under Ubuntu 7.10 with GTK look-and-feel:
And under Looks Plastic XP:
And under Synthetica Mauve Metallic:
And finally under Pagosoft:
The release candidate of Flamingo 3.0 is scheduled for February 11, with the official release scheduled for February 18. The latest binaries and source can be downloaded here.
