---
# System prepended metadata

title: Computer Programming II Pre-Lab 6
tags: [Computer Engineering, IUG, Computer Programming II, Pre-Lab]

---

---
title: Computer Programming II Pre-Lab 6
---
<h1 style='border: none'><center>Computer Programming II Pre-Lab 6</center></h1>
<h2 style='border: none'><center>Introduction to JavaFX</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/03/17</span></h6>
<h6>Parts of this Lab were adapted from work done by Mohammed Nafiz ALMadhoun and  Mohammed AlBanna</h6>
---


<p style='text-align:justify'>
In this lab, we are going to talk about JavaFX, and how to write GUI applications in Java using JavaFX, then we will talk about JavaFX containers, finally, we will talk about JavaFX components.
</p>

## Theoretical Introduction
In this section, we will talk about the basic skeleton of a JavaFX application.

### Application

What we are creating right now is an application, this application has a known flow from the start of it until the end, so the creator of JavaFX created a class named Application, this
class provides you with the methods you need to create an application, so you can override some methods in it to create the basic functionality of an application.

The first method you should know about is the start method, this method will be called at the start of your application, and will give you something called Stage, we will talk about Stage later, the signature of this method is: 
```java=
public void start(Stage primaryStage)
```

### Stage

The stage in JavaFX is the window, the window itself contains a lot of things, the first things you will notice is the buttons on the title bar, the title bar contains the title, minimize, maximize, and close buttons, as we have talked before the application provides you with a stage to start from, you can create stages in any life point of the application (You will need to create new windows)

### Scene

The scene is the root for every component in JavaFX, so if you want to create a button you will need to add this button to a scene, the scene has a width and a height and a fill color.

<center>
    
![JavaFX Application](https://i.imgur.com/8oouB8C.png)

JavaFX Application [^1]

</center>

```java=
import javafx.application.Application; 
import javafx.scene.Scene;
import javafx.stage.Stage; 
import javafx.scene.layout.StackPane;

public class Test extends Application {
   @Override
   public void start(Stage stage) {   
        Scene scene = new Scene(new StackPane());
        stage.setTitle("Test JavaFX");
        stage.setScene(scene);
        stage.show();
   }
   public static void main(String args[]){ 
        launch(args);
   } 
}
```

## Containers

#### HBox
Arrange components in a horizontal line
<center>
    
![Horizontal Box](https://i.imgur.com/PiCUIC0.png)
</center>

#### VBox
Arrange components in a vertical line.
<center>
    
![Vertical Box](https://i.imgur.com/41NIuez.png)
</center>

#### Stack

The components will go on top of each other.
<center>
    
![Stack](https://i.imgur.com/VWsjmhN.png)
</center>

#### Grid

A grid is just a table, you can put the component in any cell you want.
<center>
    
![Grid](https://i.imgur.com/pfrsIvJ.png)
</center>

Note that all images above are from Tutorials Point You can look at other containers
examples here: https://www.tutorialspoint.com/javafx/javafx_layout_panes.htm

Notice that your scene will have a root container, this could be any of the containers above.


## UI Components:

* **Label:** A Label object is a component for placing text.
* **Button:** This class creates a labelled button.
* **ColorPicker:** A ColorPicker provides a pane of controls designed to allow a user to manipulate and select a color.
* **CheckBox:** A CheckBox is a graphical component that can be in either an on(true) or off (false) state.
* **RadioButton:** The RadioButton class is a graphical component, which can either be in an ON (true) or OFF (false) state in a group.
* **ListView:** A ListView component presents the user with a scrolling list of text items.
* **TextField:** A TextField object is a text component that allows for the editing of a single line of text.
* **PasswordField:** A PasswordField object is a text component specialized for password entry.
* **Scrollbar:** A Scrollbar control represents a scroll bar component to enable the user to select from a range of values.
* **FileChooser:** A FileChooser control represents a dialog window from which the user can select a file.
* **ProgressBar:** As the task progresses towards completion, the progress bar displays the task's percentage of completion.
* **Slider:** A Slider lets the user graphically select a value by sliding a knob within a bounded interval.

Here is a small list of UI components that you can find in `javafx.scene.control`, note that all the description is by Tutorials Point.
https://www.tutorialspoint.com/javafx/javafx_ui_controls.htm

[^1]: [JavaFX 2 Tutorials and Documentation](https://docs.oracle.com/javafx/2/get_started/hello_world.htm)



###### tags: `Computer Programming II` `Pre-Lab` `IUG` `Computer Engineering`

<center>End Of Pre-Lab 6</center>