Keyboard shortcuts and mnemonic in JavaFX

Nowadays you won’t find an application without keyboard shortcuts and mnemonic, that’s a fact. This article is about to deal with them in a menu in a JavaFX 2 application. The way to do it is very simple and powerful.

Set up a context

In order to introduce you the concepts, let’s set up the context I use in TweetWallFX.

FXML menubar

I have an FXML that contains my application menubar which is the following one:

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<MenuBar id="menuBar" fx:id="menuBar" xmlns:fx="http://javafx.com/fxml" fx:controller="com.twasyl.tweetwallfx.controllers.MenuController">
  <menus>
    <Menu text="File" mnemonicParsing="true">
      <items>
        <MenuItem fx:id="accountMenuItem" text="Account ..." onAction="#displayAccount" />
      </items>
    </Menu>
    <Menu text="View">
      <items>
        <MenuItem fx:id="fullScreenMenuItem" text="Fullscreen" onAction="#displayFullscreen" />
      </items>
    </Menu>
    <Menu text="_Tools" mnemonicParsing="true">
      <items>
        <MenuItem fx:id="musicPlayerMenuItem" text="Music player" onAction="#playBackgroundSongAction" />
      </items>
    </Menu>
  </menus>
</MenuBar>

Controller

And the needed code for the controller:

public class MenuController implements Initializable {
  @FXML private MenuBar menuBar;
  @FXML private MenuItem fullScreenMenuItem;
  @FXML private MenuItem musicPlayerMenuItem;
  @FXML private MenuItem accountMenuItem;

  @Override
  public void initialize(URL url, ResourceBundle rb) {
    // TODO create the keyboard shortcuts here
  }
}

Mnemonics

The easy one is the mnemonic because you don’t need to write a lot of stuff … ! The mnemonic, on Windows, is when underscored letter of a menu of a menubar. When you press Alt+<the letter> the menu will be opened. It gives you a quick access to the menu. In order to define a mnemonic, in the text of your menu, place the character ‘_’ and set the mnemonicParsingProperty() to true either in your FXML or either in your backing code. And automatically, JavaFX will compute and set the mnemonic for your menu. That’s it! Easy, isn’t it?

Keyboard shortcut

Defining a keyboard shortcut for a menu entry isn’t really though when you know where to look at. In JavafX, it’s called an accelerator. An accelerator is composed of a combination of keys:

  • a main key: A, B, C, …
  • a modifier: Ctrl, Meta, Shift, Alt

. In order to define an accelerator, there are, for me, two main classes:

  • KeyCombination
  • KeyCode

Once you got them defining an accelerator is easy because it is a … KeyCombination. A keyboard shortcut is usually something like Ctrl+<a key> on Windows and Meta+<a key> on Mac, which is called the modifier. The first thing is to manage both system in order to know which modifier (Ctrl or Meta) to use … JavaFX already manages this for you by providing KeyCombination.SHORTCUT_ANY and KeyCombination.SHORTCUT_DOWN. So use them instead of CTRL or META if you want to be platform independent.
So if I want to create a combination for (Ctrl | Meta) + F as accelerator of a menu item I can use this piece of code:

this.fullScreenMenuItem.setAccelerator(new KeyCodeCombination(KeyCode.F, KeyCombination.CONTROL_DOWN, KeyCombination.SHORTCUT_DOWN));

Nothing more, nothing less. Of course you can combine multiple modifiers like Shortcut and Shift for example to get Shortcut+Shift+F.

About these ads

2 Responses to Keyboard shortcuts and mnemonic in JavaFX

  1. Pingback: Java desktop links of the week, August 6 | Jonathan Giles

  2. Pingback: JavaFX links of the week, August 6 // JavaFX News, Demos and Insight // FX Experience

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: