Login screen – JavaFX and SceneBuilder

In this post, I’ll show you how to create a simple JavaFX login screen using scene builder. Scenebuilder is a simple way of making a graphical user interface (GUI) for your application. If done correctly it works like a charm.

First of you’ll need to download a few libraries and other files on the links below.

You’ll find all of the code on my GitHub on this link!

I am by no means a pro and I’ve learned this just for fun after a course in database technology. Please let me know if I’ve forgotten something or if something is wrong.

This is the first article I ever write so both the writing part and coding part is rather new to me.

Getting started

  • Step one: Download the JavaFX-plugin for Eclipse IDE using Eclipse marketplace.

Press “Eclipse Marketplace…”

Search for “e(fx)clipse” and press install when you’ve found it. If it doesn’t appear you probably have an old version of Eclipse. Download a later version and try again.

Design your application

  • Step four: Create a new FXML-file in your project in Eclipse, right click it and choose open with SceneBuilder. Design your application.

My suggestion is to play around a lot with SceneBuilder and learn how to make it function as you want. In the GIF above I start of with an “AnchorPane”. This is in my opinion the easiest pane. What you should keep in mind is that it does not scale as good as, say a “borderpane”.

You will also have to name every node (like texts) so that you can use call them from your controller class. I’ll explain the controller class later on.

  • Press the node you would like to name
  • Press the tab in the menu to the right called “Code”
  • Assign an fx:id. Example: “username_txtField”

Nodes like buttons don’t really need an fx:id. Though you will have to choose a method to execute once you press the button. To do this:

  • Press the node you would like to add a method to
  • Press the tab in the menu to the right called “Code”
  • Assign a method in the “On Action” TextField

Create the main class

  • Step four: Create a main class. The code below is a good start for any application when using SceneBuilder. You’ll need at least one Main-class, one Controller-class and one Database-class. Your controller class is used to “give life” to your application. Below is the code for the main class.

You will probably get some warnings when you create the main class and later on the controller class. Make sure you’ve imported all the necessary libraries. You can hover over the warnings and choose import. Make sure to import the “javafx.bla.bla”-alternative. You may also have to press import unimplemented methods from the interface called “Applications” which your main class will extend to.

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.stage.Stage;
import javafx.scene.Parent;
import javafx.scene.Scene;


public class MainApplication extends Application {
	
	private Stage primaryStage;
	
	public Stage getStage() {
		return primaryStage;
	}
	@Override
	public void start(Stage primaryStage) throws Exception {
		this.primaryStage = primaryStage;

		try {
			//Parent root = FXMLLoader.load(getClass().getResource("../application/LoginGUI.fxml"));

			FXMLLoader loader = new FXMLLoader(getClass().getResource("LoginGUI.fxml"));
			Parent root = loader.load();

			primaryStage.setTitle("Login");
			Scene scene = new Scene(root);
			scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
			primaryStage.setScene(scene);
			primaryStage.show();
		
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

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

Create the controller class

  • Step five: Create the controller class. This class extracts the information from the text fields and also handles the pieces of information once you press the login button.
import java.io.IOException;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.control.PasswordField;
import javafx.scene.control.TextField;
import javafx.stage.Stage;

public class LoginController {

	private String secretPw1 = "sUp3RsTroNGp4ssW0rd";
	private String username1 = "user";

	@FXML
	private TextField usr_txt;
	@FXML
	private PasswordField pw_txt;

	@FXML
	public void login_btn_onClick(ActionEvent e) throws IOException {
		String username = usr_txt.getText();
		String password = pw_txt.getText();	
		System.out.println(username + password);
		if(username.equals(username1) && password.equals(secretPw1)) {
			System.out.println("Succesful login");
			Stage stage = (Stage) usr_txt.getScene().getWindow();
			Parent root = FXMLLoader.load(getClass().getResource("MainGUI.fxml"));
			stage.setScene(new Scene(root));
			stage.centerOnScreen();
			stage.setTitle("Sapply - Administrator");
		}else {
			System.out.println("Wrong username or password");
		}
	}
}

Here I’ve simply created one “user”. This is not the best method. I’ve never tried to make this kind of app not using a database. Creating a user with a connected password in memory is not very suitable but I’ll do it anyway for proof of concept. Later on, I’ll make a guide on how to connect the login-screen to a SQL-database.

However, this controller class consists of three main parts. The declarations of the text field for the username, the declaration for the password field and the method I’ve chosen to call “login_btn_onClick”.

The names you assign to the nodes is their fx:id that you assigned earlier. They need to be the same. They also need to be of the same kind. If you added a TextField in SceneBuilder you will also need the make a TextField in your controller class.

Make sure to leave the “@FXML” annotation above the declaration of your nodes. As shown below.

@FXML
private TextField usr_txt;
@FXML
private PasswordField pw_txt;

As you can see in the code you get the entered text from the text field and password field by using the “.getText()” method. When you got the text you can then compare it to either a database containing all your users or maybe later on a database.

I’ll go through how to connect a database to this controller screen in another post.

If I’ve missed any steps, which I probably did, leave a comment and I’ll add it.

Leave a comment