JavaFX Tutorial: Menu

JavaFX menu creation is essential to most complex applications. This JavaFx tutorial explains how to create menus using FXML. If need a quick introduction to JavaFX, check out my beginner’s tutorial, JavaFX 8 Hello World for Eclipse.

In case you’re new to JavaFX, or been away for a while, JavaFX 8 applications are arranged with a Stage, a Scene, Groups, and Leaf Nodes. The Stage is the application’s window. The Scene has the containers such as AnchorPanes and BorderPanes. Containers hold other containers, and leaf nodes. Leaf nodes are Controls such as Buttons, Labels, and text files.

JavaFX Stage, Scene, Group, and Leaf Node
JavaFX organizes its UI into Stages, Scenes, Groups, and Leaf Nodes.

Menus fall slightly outside of the Stage, Scene, Group, Leaf Node graph. You typically attach menus to the top level group in a Scene. But, I’ll get back to that in a moment. First we need to discuss what menus are.

Menus as the general public thinks of them are actually made up of a MenuBar, at least one Menu and several MenuItems. The MenuBar is the container that holds individual menus, such as the File menu, the Edit menu, and the Help menu. The menus in turn hold menu items that you see when you click on the menus. Some MenuItems in the File menu are often Save, Open, and Quit.

MenuBar, Menu, MenuItem
MenuBars contain Menus. Menus contain MenuItems.

What people mostly think of as the menu across the top of a window or across the top of the screen is actually the MenuBar. See the illustration above for a better view of the distinction between MenuBar, Menu, and MenuItem.

The next part assumes you have read my previous tutorial on JavaFX 8 and SceneBuilder. If using JavaFX 8 and SceneBuilder is not completely clear, read through that tutorial.

Create a new JavaFX 8 project in Eclipse. You will need a Main class that extends Application, a controller class, and an FXML file to construct your scene with. You may use the FXML template in Eclipse, or you can create the FXML file directly from SceneBuilder. Just make sure you save it to the proper place in your class path.

Open up SceneBuilder 8.

SceneBuilder 8
Our FXML scene opened in SceneBuilder 8.

The root node for your scene going to be a BorderPane. If you have an AnchorPane in your Hierarchy, delete it. You can create a pre-sized BorderPane simply by double-clicking on BorderPane in the Containers list. Double-clicking on BorderPane results in a 600 pixel by 400 pixel BorderPane being created in your central design area.

BorderPanes are split into five areas: Top, Bottom, Right, Left, and Center. Leaf nodes and groups are placed into these areas. Look at some windows you have open now, and you might recognize some of these five areas in use in the applications you have open. For our purposes, we want to put our MenuBar in the Top area of a BorderPane.

Open up the Controls list, and scroll down to the MenuBar. Remember, MenuBars contain Menus which in turn contain MenuItems. We want to start by placing a MenuBar on the BorderPane.

Find the MenuBar and drag it to the BorderPane you have in the central design area of SceneBuilder. As you drag the MenuBar over the BorderPane, the five areas (Top, Center, Bottom, Right, and Left) are shown with labels. Drag the MenuBar to the top area of the BorderPane and release.

As it turns out, the MenuBar comes pre-populated with some common Menus and MenuItems. You can add more, or change (or delete) the Menus and MenuItems that are pre-populated. Menus can be dragged from the Menu list on the left side of SceneBuilder and dropped directly on the MenuBar, but MenuItems are a little trickier. MenuItems need to be dragged down to the proper place in the Hierarchy.

Of course you can go ahead and change names by selecting Menus and MenuItems from the Hierarchy, and then expand the Properties section on the right hand side of SceneBuilder and modify the Text property.

Creating actions for MenuItems is as easy as in the JavaFX 8 Hello World tutorial. Just select a MenuItem from the Hierarchy on the left side of SceneBuilder, and then open up the Code section on the right side. Set the fx:id and the On Action property.

That’s all there is to creating a menu in JavaFX 8. Don’t forget to set the controller (at the bottom left of SceneBuilder, and grab the skeleton code from View->Show Sample Controller Skeleton.