Try โ€‚โ€‰HackMD

Programming II Lab 8

Introduction to FXML

The Islamic University of Gaza
Engineering Faculty
Department of Computer Engineering
Author: Mohammed Nafiz ALMadhoun2021/04/09

In this lab, we are going to use FXML to create a JavaFX application, FXML will help us a lot in separating the design and the application logic, and it will make it easier for us to design and change the design of our program.

What is FXML

FXML is a user interface markup language, the language itself doesn't have any logic, but it's just a description of the user interface.

<?xml version="1.0" encoding="UTF-8"?> <?import javafx.geometry.Insets?> <?import javafx.scene.control.Button?> <?import javafx.scene.layout.VBox?> <VBox alignment="CENTER" spacing="20.0"> <children> <Button text="Test Button" /> </children> <padding> <Insets bottom="20.0" left="20.0" right="20.0" top="20.0" /> </padding> </VBox>

Notice that at the start of our FXML file, we describe what we need to import, and then the XML describes each component and its properties.

Note: We won't write FXML from scratch.

Loading an FXML file

You could load your design using FXMLLoader class:

import javafx.application.Application; import javafx.fxml.FXMLLoader; import javafx.scene.Parent; import javafx.scene.Scene; import javafx.stage.Stage; import java.io.File; import java.io.IOException; public class Test extends Application{ @Override public void start(Stage stage) throws IOException { File f = new File("./test.fxml"); FXMLLoader fxmlLoader = new FXMLLoader(f.toURI().toURL()); Parent fxmlParent = fxmlLoader.load(); Scene scene = new Scene(fxmlParent, 640, 480); stage.setScene(scene); stage.show(); } }

FXML Controller

After creating your FXML design, we will need to connect it to some code, this code will handle events, and change other things in the view while your program is running.

FXML allow us to specify a controller to the FXML file, the controller is just a Java class:

... <VBox alignment="CENTER" spacing="20.0" fx:controller="TestController" xmlns:fx="http://javafx.com/fxml/1"> ...
import javafx.fxml.FXML; public class TestController { @FXML private void testAction() { System.out.println("Test is working!"); } }

Notice that you will need @FXML for everything that communicates with your FXML file.

... <Button text="Test Button" onAction="#testAction" /> ...

Assigning ID to a component

You could assign an ID to a component, which will link the component to a variable inside the controller.

<?xml version="1.0" encoding="UTF-8"?> <?import javafx.geometry.Insets?> <?import javafx.scene.control.Button?> <?import javafx.scene.control.Label?> <?import javafx.scene.layout.VBox?> <VBox alignment="CENTER" spacing="20.0" fx:controller="TestController" xmlns:fx="http://javafx.com/fxml/1"> <children> <Label fx:id="label" text="Not pressed yet" /> <Button text="Test Button" onAction="#testAction" /> </children> <padding> <Insets bottom="20.0" left="20.0" right="20.0" top="20.0" /> </padding> </VBox>

Notice that Label has an ID label.

In your controller, you should define a data field named label

import javafx.fxml.FXML; import javafx.scene.control.Label; public class TestController { @FXML Label label; @FXML private void testAction() { label.setText("Button Pressed!"); } }

Using Scene Builder

Scene Builder is a GUI application to build our FXML application, you could drag and drop components in it to create your FXML file, notice that you should understand the JavaFX before using the drag and drop application to avoid a lot of mistakes.

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’

Scene Builder Main Window

You can download Scene Builder for free from its original site: https://gluonhq.com/products/scene-builder/

Using an IDE

You could use your prefered IDE and link it with scene builder to create a smoother development process, the scene builder will auto-complete a lot of things using this method.

In NetBeans for example, you will need to go to Tools -> Options -> Java -> JavaFX to link Scene builder with it.

NetBeans JavaFX Options Window
NetBeans JavaFX Options Window

Extra: Creating an exe from a jar

In this section, we will explain how to create an exe file to run your Java application, the first thing we will need is to create a jar file.

Creating a jar file in a Maven Project

if you created a maven project, you can export a jar file with the main class to run by editing the pom.xml file, just add the following plugin to your build options:

... <build> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-jar-plugin</artifactId> <version>3.2.0</version> <configuration> <archive> <manifest> <mainClass>edu.iugaza.simplewebbrowser.App</mainClass> </manifest> </archive> </configuration> </plugin> ...

after building your project, you will find a jar file in the target folder inside your project, you could run this using the following command:

java -jar name.jar

Creating an exe from jar

Now to build our exe file, we will use a program called launch4j, which will help us bundle our jar, and search for the correct JRE.

Launch4j
Launch4j main window

Notice that you will have to select your jar file and the output file, and from the JRE tab you will have to specify your minimum JRE version.

You could modify other properties, for example, you can add an icon to your exe file.

TADA Click build and you will have an exe file.

Note that you could bundle the JRE with your application (So the user won't have to install JRE).

Your first exe Application
Your first exe Application

Lab Tasks

Task 1: JavaFX Web Browser!

In this task, you should create a simple web browser, you should build your application as an FXML JavaFX application.

You will get the full mark if your browser could do the following:

  • Could navigate using a text field
  • Could search on Google using a text field
  • Have a Back button
  • Have a Home button (Which goes to Google.com)

You will get a bonus if you implemented the following:

  • Your URL text field updates when the page changes.
  • You implemented a loading progress bar.
  • You created a settings window.

You could search on google by going to the following link

https://www.google.com/search?q=<Your text here>

And here is a gif of my solution.

Task 1 Expceted Output
Task 1 Expceted Output

tags: Programming Java IUG
End Of Lab 8