Setting Up Your JavaFX Project

Overview

Welcome to your JavaFX adventure! If you're new to desktop application development or just getting started with JavaFX, don't worry - we've got you covered. This comprehensive guide will walk you through every step of creating your first JavaFX project, from setting up your development environment to creating your first interactive scene.

Getting Started: Preparing Your Development Environment

Enabling the JavaFX Plugin

Let's kick things off by making sure you have the JavaFX plugin installed and ready to go:

1. Open IntelliJ IDEA and navigate to the Plugins section

• Click on the "Plugins" tab on the left side of the window

2. In the search bar, type "JavaFX"

• Look for the official JavaFX plugin
• If it's not installed, click "Install"
• If it's already installed, make sure it's enabled by checking the box next to the plugin

Tip

The JavaFX plugin provides additional support and tools that make developing JavaFX applications much smoother. It includes helpful code completion, scene builder integration, and other useful features.

Creating Your First JavaFX Project

Now that the plugin is ready, let's create your project:

1. Navigate back to the projects screen

2. Click on "New Project" from the IntelliJ IDEA welcome screen

3. On the left side, select "JavaFX" from the project types

4. Project Configuration:

   • Choose a meaningful name for your project (e.g., "JavaFXTutorial")
   • Select a location to save your project
   • (Optional but recommended) Check the "Create Git repository" box if you want version control

Once you're finished, click "Next"

5. Additional Libraries

You will be prompted to select additional libraries once you press next. For this guide we will not be using any additional libraries, so you may ignore this prompt and move ahead to creating your project.

6. Create your project

Exploring Your Project Structure

Note

When your project first loads, you'll see some default files like "HelloApplication.java" and "HelloController.java". These are generated examples that can be helpful for reference, but for our tutorial, we'll be creating our own files from scratch.

Let's take a moment to understand the project layout:

1. Navigate to the src folder - This is the root of your source code

2. Expand the java folder - This is where all your Java classes will live

3. Look for the folder starting with "com." - This is your primary package folder - In JavaFX projects, this typically follows the format com.yourcompanyname.projectname

Creating Your Main Application Class

1. Navigate to the src/main/java folder in your project structure.
2. Create a new Java class (e.g., Main.java) in your package (e.g., com.example).
3. Name your new class MainMenu

4. Make your class extend Application:

    package com.javafxtutorial.javafxtutorial;




    import javafx.application.Application;


    public class MainMenu extends Application {


    }

When we extend application we must provide an implementation of its start method.

5. Override the start method:

package com.javafxtutorial.javafxtutorial;




import javafx.application.Application;
import javafx.stage.Stage;


public class MainMenu extends Application {

   @Override
   public void start(Stage stage) throws Exception {

    }

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

Note

launch(args) is a method of application, which handles all the logic for launching our application.

Understanding the Application Structure

• Application is the base class for JavaFX applications
• start() method is called when the application launches
• main() method is the entry point that calls launch()

Building Your First Scene

Scenes in JavaFX are like canvases where you'll draw your user interface. Creating a scene is as simple as this:

package com.javafxtutorial.javafxtutorial;


import javafx.application.Application;
import javafx.scene.Scene;
import javafx.stage.Stage;


public class MainMenu extends Application {


   @Override
   public void start(Stage stage) throws Exception {
       Scene scene = new Scene();
   }
}

Well... not quite. We need to pass a parent node as a parameter to our scene when we create it.

Note

JavaFX has a certain structure that we need to make sure we follow: Stage -> Scene -> Parent

To create a scene we need to pass it a Parent node, let's use a group.

    package com.javafxtutorial.javafxtutorial;


import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.stage.Stage;


public class MainMenu extends Application {


   @Override
   public void start(Stage stage) throws Exception {
        Group root = new Group();
        Scene scene = new Scene(root);
        stage.setScene(scene);
        stage.show();
   }
}

Now when you run the application you should get a window like this:

The window is a bit too big and is lacking a name so let's change that:

package com.javafxtutorial.javafxtutorial;




import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.stage.Stage;


public class MainMenu extends Application {
    //define constants for window dimensions
   private static final int WIDTH = 600;
   private static final int HEIGHT = 500;


   @Override
   public void start(final Stage stage) throws Exception {
       Group root = new Group();
       Scene scene = new Scene(root, WIDTH, HEIGHT);
       stage.setScene(scene);
       //assign a title to the window
       stage.setTitle("JavaFX Tutorial");
       stage.show();
   }
}

Adding Elements

Now that we have our scene set up let's start adding elements to it. There's two ways we can add elements to our scene:

1. Manually inserting elements
2. By using FXML files

To start we will add elements manually, then go over how we can translate the elements we added into a single FXML file.

Manually Inserting Elements

1. Make a helper method

Adding elements manually takes a decent amount of space, so lets create a helper method called makeSceneGroup for this. Our helper method will return a group, which we will use for our scene's parent.

    package com.javafxtutorial.javafxtutorial;




import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.stage.Stage;


public class MainMenu extends Application {
   private static final int WIDTH = 600;
   private static final int HEIGHT = 500;


   @Override
   public void start(final Stage stage) throws Exception {
       Group root = new Group();
       Scene scene = new Scene(root, WIDTH, HEIGHT);
       stage.setScene(scene);
       stage.setTitle("JavaFX Tutorial");
       stage.show();
   }


   private Group makeSceneGroup() {
       Group sceneGroup = new Group();

   }
}

2. Adding elements

Now that we have our scene set up, let's start by adding some basic shapes. We can create a rectangle by using this line of code:

Rectangle rectangle = new Rectangle(80, 80);

Note

When we create a rectangle, we need to pass the width and height to its constructor.

Note

We can also assign our rectangle a colour by passing Color.RED, where RED can be replaced with the colour we want.

Let's add our rectangle to our group and return the group to finish our method.

private Group makeSceneGroup() {
    Group sceneGroup  = new Group();
    Rectangle rectangle = new Rectangle(80, 80, Color.RED);
    sceneGroup.getChildren().add(rectangle);
    return sceneGroup;
}

Now when you run our application you should see a red rectangle on screen.

Let's remove the rectangle and add some other elements to make our menu.

package com.javafxtutorial.javafxtutorial;


import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.VBox;
import javafx.scene.text.Text;
import javafx.stage.Stage;


public class MainMenu extends Application {
   private static final int WIDTH = 600;
   private static final int HEIGHT = 500;


   @Override
   public void start(final Stage stage) throws Exception {
       Scene scene = new Scene(makeSceneGroup(), WIDTH, HEIGHT);
       stage.setScene(scene);
       stage.setTitle("JavaFX Tutorial");
       stage.show();
   }


   private Group makeSceneGroup() {
       Group sceneGroup = new Group();
       Text text = new Text("JavaFX Tutorial");
       Button Startbutton = new Button("Start");
       Button Exitbutton = new Button("Exit");
       VBox vbox = new VBox(20, text, Startbutton, Exitbutton);
       sceneGroup.getChildren().add(vbox);
       return sceneGroup;
   }
}

We added a couple of elements: Text, Buttons, and something called a VBox.

Note

VBox stands for vertical box, it stores node elements vertically. VBox has a horizontal counterpart called HBox.

When we run our application we should get something that looks like this.

If we don't use a VBox to contain our elements, it would look like this:

Here we used a few simple elements of JavaFX. For a deeper look into the types of elements JavaFx offers, take a look here.

Introduction to FXML: Separating Design from Logic

FXML allows you to design your user interface separately from your Java code. Let's take a look at how we can convert our menu into a FXML file. For a more detailed look into FXML check out the Oracle Documentation on it.

1. Creating an FXML File

Start by creating a new file called MainMenu.fxml in your resources folder:

When you create your FXML file it will look like this: From here, we can remove the AnchorPane tag and all the initial import statements as we won't be needing them.

2. Recreating our scene

To recreate our scene in our FXML file, insert this code:

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


<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Text?>
<?import javafx.scene.control.Button?>
<VBox>
   <Text>JavaFX Tutorial</Text>
   <Button>Start</Button>
   <Button>Exit</Button>
</VBox>

Let's walk through this step by step. First we create a VBox, using the VBox tag. Inside our VBox we add our text element and our two buttons, putting what we want the text and buttons to display in between their opening and closing tags.

3. Loading FXML in Your Application

Now to use our FXML file we need to load it in our start method.

 @Override
 public void start(final Stage stage) throws Exception {
     FXMLLoader menuFXML = new FXMLLoader(getClass().getResource("MainMenu.fxml"));
     Scene scene = new Scene(menuFXML.load(), WIDTH, HEIGHT);
     stage.setScene(scene);
     stage.setTitle("JavaFX Tutorial");
     stage.show();
 }

Note

Make sure that in our scene constructor we call our FXML loader we created with .load() attached!! Or else it will not accept it and will fail to construct our scene.

Success

You've successfully created the base for a menu. The final result should look like the image below.

Conclusion

Congratulations! You've just taken your first steps into the world of JavaFX application development. We've covered:

• Setting up a JavaFX project in IntelliJ IDEA
• Creating a basic application structure
• Building scenes with interactive elements
• Introducing FXML for UI design
• Remember, every great application starts with a simple first step. You've just taken that step! 🚀

Keep experimenting, have fun, and don't be afraid to try new things. Happy coding!