ScalaFX Menu Basics

I am working on an application for a personal project, and learning ScalaFX in the process.
Since Menu bars are important parts of the user interface, with easy access to a range of application functionality, I plan to build a menu bar into my product.
This post explores some of what I am discovering about Menu-related features of ScalaFX.

First, let me set up a basic framework for my exploration, a scala object extending JFXApp.
I also import the scene, layout and control packages, since I will need them for the Scene, MenuBar and VBox classes.

import scalafx.application.JFXApp
import scalafx.scene.layout._
import scalafx.scene._
import scalafx.scene.control._

/**
 * Exploring Menu-related classes in ScalaFX
 */

object SfxMenuExplore extends JFXApp {

  // We will define the menu object here.
  
  val wholeLayout = new VBox {
    children = List(menu)
  }
  val myScene = new Scene(wholeLayout, 300, 200)
  stage = new JFXApp.PrimaryStage {
    scene = myScene
    title = "Menu Exploring"
  }
  stage.show
}

Since VBox lays out controls in a vertical stack, I will use it to place the menu bar at the top of the input form.
The code above does not yet define the menu object, just sets the stage for a 300 x 200 pixel window.

Let's create a very basic menu and add it to the above. Something like:



  val menu = new MenuBar {
    menus = List(
      new Menu("File") {
        items = List(
          new MenuItem("New..."),
          new MenuItem("Save")
        )
      },
      new Menu("Edit") {
        items = List(
          new MenuItem("Cut"),
          new MenuItem("Copy"),
          new MenuItem("Paste")
        )
      },
      new Menu("Help") {
        items = List(
            new MenuItem("About")
        )
      }
    )
  }

This code defines a MenuBar that will contain the other elements.
My initial, basic menu bar consists of 3 menus, each with one or more  MenuItems within.
Stick that code into the framework and run it, and get this:


Pretty nice and simple. We get a standard menu system at the top of the form, that application users can interact with in the usual way.

Some users, me included, love to use keyboard fast-keys or accelerators or short-cuts. On the menu above, I can press the ALT-key on my keyboard and use the arrow keys to navigate the menu structure.

Let's define some of the standard keyboard accelerators for our menus. We will add an underscore right before the key letter, which in these cases are the first letter, but can be later ones if desired.

Also set the mnemonicParsing attribute to true. Our MenuBar definition now looks like this:

  val menu = new MenuBar {
    menus = List(
      new Menu("_File") {
        mnemonicParsing = true
        items = List(
          new MenuItem("New..."),
          new MenuItem("Save")
        )
      },
      new Menu("_Edit") {
        mnemonicParsing = true
        items = List(
          new MenuItem("Cut"),
          new MenuItem("Copy"),
          new MenuItem("Paste")
        )
      },
      new Menu("_Help") {
        mnemonicParsing = true
        items = List(
            new MenuItem("About")
        )
      }
    )
  }

And the result is:



Now our menu visually shows the standard accelerators, and functions as expected, too.

We can do more with the ScalaFX menu classes. We can add sub-menus to our structure, for example. We'll add a Recent Items list to the File menu. To get a sub-menu, we add a new Menu object into the list of MenuItems.

Then, each of the sub-items gets added to this sub-Menu. Here's what the File Menu becomes:

      new Menu("_File") {
        mnemonicParsing = true
        items = List(
          new MenuItem("New..."),
          new MenuItem("Save"),
          new Menu("Recent _Items") {
            items = List( 
                new MenuItem("Some Item AAA"), 
                new MenuItem("Another item BBB") 
            )
          }
        )
      }

This gives us a sub-menu with two items, as shown below.



A menu can also show the state of some user options, by putting a check beside the item.

ScalaFX has two kinds of checkable menu item. The first is an independent item, that can be toggled on or off. Use the CheckMenuItem class for this kind of menu entry.

The second kind sets up a group of items, from which only one may be selected. Use the RadioMenuItem class for this kind.

This example shows both kinds.

  val nameOrderDisplay = new ToggleGroup
  val menu = new MenuBar {
    menus = List(
// duplicated bits skipped ...
      new Menu("_Display") {
        mnemonicParsing = true
        items = List(
          new RadioMenuItem("FirstName LastName") { toggleGroup = nameOrderDisplay },
          new RadioMenuItem("LastName, FirstName") { toggleGroup = nameOrderDisplay },
          new SeparatorMenuItem,
          new CheckMenuItem("Prefixes"),
          new CheckMenuItem("Suffixes")
        )
      },
// duplicated bits skipped ...
    )
  }

I've added a new Display menu. Under it, there are four items. The first two are grouped together so that only one at a time may be selected.

We use the RadioMenuItem class to define the items, and assign them to the same toggleGroup, which we've defined at the top of the code block.

Now, when we use the application, these items define the display order of the names of individuals.
The second kind of items appear below the separator (defined with the SeparatorMenuItem class). Since they are not grouped, and are independent of one another, we can set none, one, or both of them.

The result is this:



There is lots more to explore in the ScalaFX Menu classes. For one thing, our menu does not currently do anything, we have not attached any actions to the items.
I'll talk about some more Menu topics next time.