---
title: Computer Programming II Lab 8 v1.0
---
<h1 style='border: none'><center>Computer Programming II Lab 8</center></h1>
<h2 style='border: none'><center>Introduction to FXML</center></h2>
<h5><center>The Islamic University of Gaza<br>Engineering Faculty<br>Department of Computer Engineering</center></h5>
<h6>Authors: Usama R. Al Zayan<span style="float:right">2023/04/08</span></h6>
<h6>Parts of this Lab were adapted from work done by Mohammed Nafiz ALMadhoun</h6>
---
## Lab 8: Time and Plan
| Tasks | Timing |
| -------- | -------- |
| Quiz 7 | 10 min |
| Task 1 | 60 min |
<p style='text-align:justify'>
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.
</p>
## 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=
<?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:
```java=
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:
```xml=
...
<VBox alignment="CENTER" spacing="20.0" fx:controller="TestController" xmlns:fx="http://javafx.com/fxml/1">
...
```
```java=
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.
```xml=
...
<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=
<?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
```java=
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.
<center>
Scene Builder Main Window
</center>
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 IntelliJ, you will need to go to `File` -> `Settings` -> `Languages & Frameworks` -> `JavaFX` to link Scene builder with it.
<center>
IntelliJ JavaFX Options Window
</center>
In NetBeans for example, you will need to go to `Tools` -> `Options` -> `Java` -> `JavaFX` to link Scene builder with it.
<center>
NetBeans JavaFX Options Window
</center>
## 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 using IntelliJ
1. In the top menu bar, you will need to go to `File` -> `Project Structure`.
<center>
</center>
2. In the left side menu choose `Artifacts`, then click plus sign `+`, then `JAR` and `From modules dependncies`.
3. Click `Browse`.
<center>
</center>
4. Choose the class that has the main method (Usually only one class will appear). Then Click `OK`.
<center>
</center>
5. Click `OK`.
<center>
</center>
6. Click `OK`.
<center>
</center>
7. in the top menu bar, `Build` -> `Build Artifacts`.
<center>
</center>
8. Click `Build`.
<center>
</center>
9. You will find the output `.jar` file in `projectName/output/artifacts/`.
Note: In order to open `.jar` file right click on it the `Open In Explorer`.
### Creating a jar file in a Maven Project using NetBeans
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:
```xml=
...
<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:
```shell=
java -jar name.jar
```
### Creating an exe from jar
Now to build our exe file, we will use a program called [launch4j](http://launch4j.sourceforge.net/), which will help us bundle our jar, and search for the correct `JRE`.
<center>
Launch4j main window
</center>
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).
<center>
Your first exe Application
</center>
## 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.
<center>
Task 1 Expceted Output
</center>
###### tags: `Computer Programming II` `Lab` `IUG` `Computer Engineering`
<center>End Of Lab 8</center>
Sign in with Wallet
Connect another wallet