Yesterday’s entry has marked the completion of all planned core features for the version 4.0 of Flamingo component suite (code named Fainnear). Here is a short list of all the features that have been added to Flamingo ribbon component – click on each feature to see the screenshots and the relevant APIs.
The ribbon component is ready for application testing and feedback. Release candidate is scheduled for January 26 and the final release is scheduled for February 9.
To see the Flamingo ribbon component in action under core look-and-feels, run the following WebStart demo:
To see the Flamingo ribbon component in action under Substance look-and-feel, run the following WebStart demo:
If you want to test the ribbon in your applications, you would need the following (the last two only for applications running under Substance look-and-feel):
The latest addition in the Flamingo component suite is support for core Swing components. This has been the last unaddressed item on the roadmap for version 4.0 (code named Fainnear), and is now available in the latest 4.0dev drop of Flamingo core and 5.1dev drop of Substance Flamingo plugin.
First, there is a new notion of groups in ribbon bands. This allows fine-tuning the layout of larger ribbon bands, grouping associated controls while still not breaking the groups across multiple ribbon bands. Ribbon band groups are separated with vertical separators and are started with the new JRibbonBand.startGroup() API. Here is a screenshot of a ribbon band with two groups:
Here is a screenshot of another ribbon band, with two groups as well:
And here is a screenshot of a ribbon band with three groups:
As you can see, you can vary the priority of command buttons across the different ribbon band groups.
The new JFlowRibbonBand class allows placing flowing content in a ribbon band. Unlike the JRibbonBand, it can host any core or third-party Swing component. It is highly recommended to use components that do not take too much vertical space (good examples are buttons, combo boxes, radio buttons, checkboxes, spinners). The new CoreRibbonResizePolicies.getCoreFlowPoliciesRestrictive API can be used to install a resize policy that first tries to place the controls in two rows, and then, if there is not enough horizontal space, will place the controls in three rows.
Here is a screenshot of a flow ribbon band with enough horizontal space to host all the controls in two rows:
When the ribbon is resized, the content of this band will be placed in three rows as necessary:
Support for placing keytips on the flow ribbon band content is aligned with placing the keytips of the command buttons on regular ribbon bands. Here is a screenshot of flow ribbon band keytips with two rows:
As you can see, the keytips for both the top row and the bottom row are aligned, resulting in a consistent UI appearance. As a side note, to associate a keytip with a core Swing component, wrap it with JRibbonComponent (more on this below).
And here is a screenshot of the same flow ribbon band with three rows:
It is now possible to add core Swing components into regular JRibbonBands. To do so, you need to wrap such a component with the new JRibbonComponent class. In the simple case, use the constructor that takes a JComponent to create a ribbon band like this:
You can also associate an icon and a caption with the core Swing component that you want to add to the ribbon band. For this, use the JRibbonComponent constructor that takes three parameters to create ribbon bands like these:
In this screenshot, the first ribbon band hosts three JRibbonComponents, each one wrapping a JComboBox with a custom icon and caption text. The second ribbon band has two groups, first hosting two JSpinners with associated icons and captions, and the second hosting two JSpinners. The second ribbon band also shows that ribbon band groups can have titles – use the JRibbonBand.startGroup(String) API.
Why do you need to wrap a core Swing component with JRibbonComponent to place it in the JRibbonBand? The answer is – support for keytips and rich tooltips.
The JRibbonComponent.setKeyTip allows associating a keytip with the wrapped component. For simple wrappers, the keytip is shown on the left hand side of the component, vertically aligned with the other keytips shown on the ribbon:
For wrappers that show icons and captions, the keytips are shown between the icon and the caption, vertically aligned with the other keytips shown on the ribbon:
Pressing the key sequence that leads to the specific core component will activate the relevant action. Buttons will be activated (including toggling the selection on toggle buttons, radio buttons and check boxes), comboboxes will show the popup, and other controls will acquire focus.
Finally, the JRibbonComponent.setRichTooltip allows associating a rich tooltip with the icon / caption area of the wrapped component. As with command buttons placed in the ribbon bands, the rich tooltip will be shown below the ribbon so as not to interfere with navigating the UI:
Here, the mouse is hovering over the Right: caption of the left-bottom spinner in the Paragraph ribbon band.
If you want to see the support for core Swing components, flow ribbon bands and ribbon band groups in action under the core look-and-feels, run the following WebStart demo:
If you want to see this functionality under Substance (all the screenshots in this entry were taken under the Nebula skin), run the following WebStart demo:
If you want to test the new functionality in your applications, you would need the following (the last two only for applications running under Substance look-and-feel):
Your feedback is, as always, greatly appreciated.
The latest addition in the Flamingo component suite is support for key tips. This has been one of the items on the roadmap for version 4.0 (code named Fainnear), and is now available in the latest 4.0dev drop of Flamingo core and 5.1dev drop of Substance Flamingo plugin.
Key tips is one of the four supported ways to operate the Office 2007 ribbon with keyboard. Unlike the traditional menus-and-toolbars system, every command and control in ribbon can have associated key tip. This allows efficient access and activation of application menu items, task toggle buttons, task bar buttons, task expand buttons and other ribbon sub-components. As specified in the keyboard documentation, the key tip mode is initiated with either Alt or F10 key. Subsequent interaction will be illustrated in the screenshots below taken under the latest 4.0dev drop of Flamingo core and Synthetica Mauve Metallic skin.
Key tips are shown in groups (internally called chains). A key tip group is associated with the specific ribbon entity. When the key tip mode is initiated, the key tip group for the entire ribbon is displayed. It contains key tips for the application menu button, taskbar components and task toggle buttons:
Pressing the letter for taksbar button activates that button. Key tips for disabled buttons are painted with partial translucency. Pressing the letter for task toggle button selects the matching ribbon task. Pressing the letter for the application menu button shows the application menu:
Once the next key tip group is shown, the previously shown key tip group is hidden (no key tips on the application menu button and taskbar buttons in this screenshot). Pressing Esc dismisses the currently shown key tip group and shows the previous key tip group. When the initial key tip group is dismissed, the key tip mode is exited.
This screenshot also shows that the menu buttons can have two key tips associated with them – one for the action, and one for the popup. Pressing ‘D‘ (associated with the popup “Send” button) shows the second level menu, switching off the key tips for the first level and showing them for the second level:
Pressing keys ‘E‘, ‘H‘ or ‘W‘ will activate the relevant second level menu buttons. Pressing key ‘X‘ activates the popup menu associated with the “Wireless” menu button:
Going back to the first screenshot (that shows the top level key tip group). Pressing key ‘P‘ shows the key tip group for the first (and currently selected) ribbon task:
The key tips are shown for ribbon buttons, task expand buttons (look for ‘FO‘ and ‘FN‘), ribbon gallery expand buttons (look for ‘L‘) and buttons in button strips (in the “Font” ribbon band). As you can see, some key tips have two letters. This can be useful not only when there are not enough letters for the contents of the current task. It can also help in grouping key tips of related functionality (such as alignment and indentation command buttons in the “Font” ribbon band that start with A). In the present situation, when letter ‘F‘ is pressed, only key tips that start with that letter are shown:
As before, pressing Esc will show the previous key tip group – in this case, it would be key tips for the entire “Page Layout” ribbon task.
Key tips are also shown in popup menus. Pressing ‘V‘ when the key tips for the entire first ribbon task are shown activates the popup menu of the “Paste” button:
Pressing one of the relevant keys will activate the matching menu button, dismissing the key tip mode as well. Key tips are also shown for the menu buttons in rich popup panels:
Here, in order to activate the “Save Selection”, you would have to press the following sequence of keys:
- Alt or F10 to activate the key tip mode
- P to select the first ribbon task
- F, P to show the popup of the “Format” button in the “Clipboard” ribbon task
- S, S to activate the “Save Selection” menu button
As you can see, the sequence to activate a specific command can be quite long. As such, commands that are used often need to be identified and associated with shorter (and perhaps more memorable) sequences.
The APIs to associate key tips with different ribbon components are:
- AbstractCommandButton.setActionKeyTip
- JCommandButton.setPopupKeyTip
- JRibbonBand.setExpandKeyTip
- JRibbonBand.setRibbonGalleryExpandKeyTip
- RibbonApplicationMenuEntry.setActionKeyTip
- RibbonApplicationMenuEntry.setPopupKeyTip
- JRibbon.setApplicationMenuKeyTip
- RibbonTask.setKeyTip
If you want to see the scrolling in action under the core look-and-feels, run the following WebStart demo:
If you want to see this functionality under Substance, run the following WebStart demo:
If you want to test the new functionality in your applications, you would need the following (the last two only for applications running under Substance look-and-feel):
Your feedback is, as always, greatly appreciated.
A03 is a third-party Swing look-and-feel developed by Davide Raccagni and available under BSD license. Today Davide has announced release 4.0 of A03, with the main emphasis on performance. One of the tools he used during the development cycle is the LightBeam testbed that aims to assist in performance analysis of look-and-feels, as well as rendering pipelines.
Here are the results for the different core and third-party look-and-feels, as measured on my machine (without hardware acceleration that makes some of the scenarios run by up to 40% faster) – lower numbers mean faster performance:
- 3039 Metal
- 3721 Windows
- 4004 Looks PlasticXP
- 4332 Nimbus
- 4665 Substance 5.1
- 4902 A03
- 4908 Synthetica Base
In addition to performance improvements, Davide has also worked with me over the last few weeks to provide support for Flamingo components. Not only does the A03 Flamingo plugin provide fine-tuned visuals to some of Flamingo’s components, it also allows A03-powered JRibbonFrames to host the application menu button, taskbar panel and contextual task groups on the title pane under decorated mode. In doing so, A03 has joined Substance in providing streamlined visuals for the interested applications.
Below you can find a few screenshots of JRibbon and JRibbonFrame under A03 – click to see the full-sized versions.
The first screenshot shows the default content of the test ribbon shipped with Flamingo:
The next screenshot shows the activated application menu button:
The next screenshot shows the rich popup panel associated with a command button:
The next screenshot shows the extended tooltip associated with a command button in the taskbar panel:
The last screenshot shows the contextual task group headers:
Davide – congratulations on the release, and thanks for providing feedback on the extensibility points of the core Flamingo UI delegates.
