Flamingo ribbon component: key tips

December 14th, 2008

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.