JavaFX Menu - first letter, underline decoration

Question

Following the UI standards: If application menu item (on the top menu bar) opens a dropdown, it MUST be decorated as it is shown under: The first letter has "text-decoration:underline" property. But accoring to this http://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html I can't do like that in in javafx app.

Any suggestions?

Answer 1

Background on Mnemonics

What you point to in your image is a keyboard mnemonic. JavaFX does support mnemonics, but you will only see them on platforms which natively use mnemonics and where you have programmed your application to use mnemonics. For example, Windows programs generally use mnemonics so you will see mnemonics in your JavaFX application when you run the application on Windows, but OS X programs do not generally use mnemonics, so if you run your JavaFX application on OS X, you may not see mnemonics displayed.

Also note, that on Windows, even if you have defined your mnemonics as above, you need to press the ALT key to see the Mnemonics underlined in a JavaFX application (this is how standard windows applications like Notepad work as well, so JavaFX is no different in this respect).

Define your Mnemonics

Set mnemonic parsing to true on the menu item. (It's actually true by default on menu items, but read the linked documentation to understand it a bit better). In your menu item text, place an underscore character _ in front of the letter you would like to use as the keyboard mnemonic for your menu item.

Anything which is Labeled (which is every control with text) can potentially display and react to mnemonics as long as you set mnemonic parsing to true for the labeled item and place an underscore in the label text.

Also define accelerators

Apple's developer guidelines encourage the use of accelerators rather than mnemonics when writing applications for OS X. So, to allow your application to work better cross-platform, I recommend supplying accelerators for your menu items, even if you already have mnemonics for use under Windows. You can setAccelerators on menu items in JavaFX. For more information on using accelerators in a JavaFX application, see the answer to Using JavaFX 2.2 Mnemonic (and accelerators) (which actually demonstrates accelerator use rather than mnemonic use...).

Use JavaFX CSS attributes, not w3c CSS attributes

The first letter has "text-decoration:underline" property.

That's irrelevant and will not work in a JavaFX application. JavaFX supports different CSS properties than the w3c CSS attributes used in HTML development. In particular, JavaFX does not support: text-decoration:underline. JavaFX only supports CSS properties defined in the JavaFX CSS reference guide. In particular JavaFX Text supports -fx-underline to specify that text should have an underline style applied to it. But even then, fx-underline is going to underline all of the text in a label rather than a specific letter, which isn't what you want.

Sample Application

Demonstrates the use of accelerators and mnemonics on menus in a JavaFX application. Note how in the example, it uses KeyCombination.keyCombination("SHORTCUT+N") to specify the accelerator shortcut. This is an OS independent way of specifying a standard OS shortcut key in JavaFX. In Windows, SHORTCUT will map to CTRL. In OS X, SHORTCUT will map to the OS X COMMAND key.

The screenshot demonstrates running the application on Windows 7 and pressing the ALT key to get the mnemonics to display.

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.input.KeyCombination;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class MnemonicAcceleratedMenu extends Application {
    @Override
    public void start(Stage stage) {
        Menu fileMenu = new Menu("_File");
        MenuItem newFileMenuItem = new MenuItem("_New...");
        newFileMenuItem.setAccelerator(
            KeyCombination.keyCombination("SHORTCUT+N")
        );
        newFileMenuItem.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent event) {
                System.out.println("Something new, this way comes");
            }
        });
        fileMenu.getItems().add(
                newFileMenuItem
        );

        MenuBar menuBar = new MenuBar();
        menuBar.getMenus().setAll(
                fileMenu
        );

        VBox layout = new VBox(menuBar);
        layout.setPrefSize(200, 100);

        stage.setScene(new Scene(layout));
        stage.show();
    }

   public static void main(String[] args) {
        launch(args);
    }
}