Tutorial : How to Create Stacked Menus in JavaFX

At IDRSolutions, our PDF Viewer (part of our JPedal Library) currently uses Java Swing to create the PDF Viewer interface. However, we are now in the process of developing a JavaFX PDF Viewer, this involves mimicking our Swing PDF Viewer and producing the same Graphical Interface but with JavaFX 2.2 instead.

Previously, I wrote a tutorial on Creating a Glowing Border Effect in JavaFX which can be applied to any Node. In this tutorial, I will be demonstrating how to produce a stacked Menu with File, Edit and Help options with a ToolBar sitting underneath, bellow is an example of the stacked menu in Swing. However by the end of this tutorial we will have a JavaFX equivalent.

menuSwing

I am assuming people reading this article have a basic knowledge of how to set-up a Stage and BorderPane in JavaFX, if not then please see here, the top BorderPane is what we’ll be adding our MenuBar and ToolBar to.

Design your Stacked Menu Layout

I cannot emphasise the importance of planning and getting the hierarchy of your menu layout correct. If you do not plan your menu design then you may neglect efficient ways to structure your Menu and it may end up unmaintainable/messy (this is especially true when you extend  this tutorial for more complex menus). Please see the picture bellow for an example of how we’re going to structure our Menus hierarchy in this tutorial.

design

 

Coding the Hierarchy

Setting up the VBox
Looking at our design, the first thing we’re going to want to create is a VBox to hold our MenuBar and ToolBar Objects. Todo this we write the following code :

BorderPane root = new BorderPane();
VBox topContainer = new VBox();  //Creates a container to hold all Menu Objects.
MenuBar mainMenu = new MenuBar();  //Creates our main menu to hold our Sub-Menus.
ToolBar toolBar = new ToolBar();  //Creates our tool-bar to hold the buttons.

Add Menus to the Top Container (VBox)
We now want to add our mainMenu and toolBar object to our topContainer which in turn will be added to the top border of our BorderPane object using the setTop() method.

topContainer.getChildren().add(mainMenu);
topContainer.getChildren().add(toolBar);
 
root.setTop(topContainer);

Add Items to the Main Menu
Now we have created and added our main menu and tool-bar objects to the top container we can start to populate our main menu with some sub-menus and options. First we will add our File, Edit and Help sub-menus.

//Declare sub-menus and add to main menu.
Menu file = new Menu("File");
Menu edit = new Menu("Edit");
Menu help = new Menu("Help");
 
mainMenu.getMenus().addAll(file, edit, help);

We have now created and added some sub-menu options to our main menu. However our main menu is not yet complete, looking at our design we still need some selectable options from our sub-menus, so lets go ahead and code those in.

//Create and add the "File" sub-menu options. 
Menu file = new Menu("File");
MenuItem openFile = new MenuItem("Open File");
MenuItem exitApp = new MenuItem("Exit");
file.getItems().addAll(openFile,exitApp);
 
//Create and add the "Edit" sub-menu options.
Menu edit = new Menu("Edit");
MenuItem properties = new MenuItem("Properties");
edit.getItems().add(properties);
 
//Create and add the "Help" sub-menu options.
Menu help = new Menu("Help");
MenuItem visitWebsite = new MenuItem("Visit Website");
help.getItems().add(visitWebsite);
 
mainMenu.getMenus().addAll(file, edit, help);

We should now see something like the picture bellow :

example1

Add Buttons to the ToolBar.
Now we have added our tool-bar to our top container and added all of that to the top border-pane we have our basic setup of the tool-bar complete. We can now code in some buttons for our tool-bar.

Button openFileBtn = new Button();
Button snapshotBtn = new Button();
Button printBtn = new Button();
 
toolBar.getItems().addAll(openFileBtn, printBtn, snapshotBtn);

Add Graphics/Icons to the ToolBar Buttons.
Now we have added some buttons to our tool-bar I think it’s about time we spruce them up a bit, lets give them some nice icons.

//Create some Buttons.
Button openFileBtn = new Button();
Button snapshotBtn = new Button();
Button printBtn = new Button();
 
//Set the icon/graphic for the ToolBar Buttons.
openFileBtn.setGraphic(new ImageView("/pathToOpenFileBtnIcon.png"));
snapshotBtn.setGraphic(new ImageView("/pathToSnapshotBtnIcon.png"));
printBtn.setGraphic(new ImageView("/pathToPrintBtnIcon.png"));
 
//Add the Buttons to the ToolBar.
toolBar.getItems().addAll(openFileBtn, printBtn, snapshotBtn);

Now that we’ve coded in our Main Menu and added some nice graphics to our ToolBar Buttons our ToolBar is looking good! See what it looks like bellow :

toolbar

JavaFX End Result

Finally, we have finished our stacked ToolBar! Of course this is just a bare-bones example to get you started. See bellow for a more complex view of what you can achieve :

example2

There’s many creative and surprising things you can do with stacked menus, you may wish to look into using Grids, let your imagination run wild and let us know how you get on by posting bellow!

For the the code/class we have written in this tutorial please see here : StackedMenuExample

We also have a JavaFX PDF Viewer plugin for NetBeans which you can grab here.

This post is part of our “JavaFX article Index” series. In these articles, we aim to explore the world of Java and Javafx. Have a look through!

If you’re a first-time reader, or simply want to be notified when we post new articles and updates, you can keep up to date by social media (TwitterFacebook and Google+) or the Blog RSS.

Related Posts:

The following two tabs change content below.
Nathan is a developer at IDRSolutions, focusing mainly on the development of HTML5 and Form support for the online PDF converter. He was a speaker and exhibitor at JavaOne 2013, co-presenting a session titled 'Lessons Learned from Using GlassFish with NetBeans". Nathan also enjoys writing technical blog-articles.
Nathan

About Nathan Howard

Nathan is a developer at IDRSolutions, focusing mainly on the development of HTML5 and Form support for the online PDF converter. He was a speaker and exhibitor at JavaOne 2013, co-presenting a session titled ‘Lessons Learned from Using GlassFish with NetBeans”. Nathan also enjoys writing technical blog-articles.

One thought on “Tutorial : How to Create Stacked Menus in JavaFX

  1. […] of Developing a JavaFX implementation of our PDFViewer. In previous JavaFX articles I have shown How to Create Stacked Menus, How to Setup Key Combinations and How to Create a Border Glow Effect all in […]

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>