JavaFX: Hello World using FXML

 FXML is a XML based markup language, used to define UI components. One major advantage of FXML is, you can create Scene graphs in XML file and load them in run time.

 

Scene Builder tool is available to generate this FXML by drag and drop the widget.

 

Why FXML?

We can separate the view from controller logic.

 

How to define application using FXML?

Step 1: Define .fxml file with all the UI components. This .fxml file contains information about the controller which is responsible to initialize these ui components.

 

Define ‘HelloFxmlDemo.fxml’ file in src/main/resources folder.

 

HelloFxmlDemo.fxml

<?import javafx.scene.*?>
<?import javafx.scene.shape.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>

<StackPane xmlns:fx="http://javafx.com/fxml" fx:controller="com.sample.app.controller.HelloWorldController">

	<Rectangle fx:id="rectangle" arcHeight="30" arcWidth="30" fill="gray" width="300" height="100" />
	
	<Text fx:id = "text" fill="lightsalmon" text="Hello World" style="-fx-font-weight: bold; -fx-font-size: 30" />

</StackPane>

 

As you see the snippet, I defined StackPane, Rectangle and Text widget. I specified the controller that mapped to this view using fx:controller attribute.

 

‘fx:id’ is required to map the widget in respective Java property. If fx:id property is ‘rectangle’, then you should map this widget in controller class with the property name ‘rectangle’.

 

@FXML

private Rectangle rectangle;

 

Step 2:  Define a controller that access the UI components defined in .fxml file using @FXML annotations.

 

You can specify custom behaviours to the components by implementing Initializable interface.

 

HelloWorldController.java

package com.sample.app.controller;

import java.net.URL;
import java.util.ResourceBundle;

import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.shape.Rectangle;
import javafx.scene.text.Text;

public class HelloWorldController implements Initializable{
	
	@FXML
	private Rectangle rectangle;
	
	@FXML
	private Text text;

	@Override
	public void initialize(URL location, ResourceBundle resources) {
		// Write custom logic here
		
	}

}

 

Step 3: You need a main class

a.   that invokes FXML loader which in turn read FXML file.

b.   To set the Scene and stage.

 

HelloFXML.java

 

package com.sample.app;

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

public class HelloFXML extends Application {

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

	}

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

		Parent root = (Parent) FXMLLoader.load(HelloFXML.class.getResource("/HelloFxmlDemo.fxml"));

		Scene scene = new Scene(root, 500, 500, Color.WHITE);

		primaryStage.setTitle("StackPane Demo");
		primaryStage.setScene(scene);
		primaryStage.show();
	}

}

Run HelloFXML application, you will see below screen.

 

 

Previous                                                    Next                                                    Home