Introduction to JavaFX UI Controls

Implementation

Let's put what we've learned so far into practice. 

Before we move on to our Java codes, you can brush up your Java skills by watching our Youtube video on Java.

Setting up JavaFX

Use this Table to find the JavaFX installation that best meets your needs, then follow the installation instructions.

You can also set up JavaFX as a dependency in your maven project. The pom.xml file of the JavaFX project will look like this.

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>JavaFX</groupId>
  <artifactId>JavaFX</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <build>
    <sourceDirectory>src</sourceDirectory>
    <plugins>
      <plugin>
        <artifactId>maven-compiler-plugin</artifactId>
        <version>3.8.1</version>
        <configuration>
          <release>17</release>
        </configuration>
      </plugin>
    </plugins>
  </build>
  <dependencies>
          <dependency>
        <groupId>org.openjfx</groupId>
        <artifactId>javafx-controls</artifactId>
        <version>11</version>
    </dependency>
  </dependencies>
</project>

Java Code

The following application is an example of a JavaFX login page. We're utilizing the controls label, text field, password field, and button right now.

import javafx.application.Application; 
import static javafx.application.Application.launch; 
import javafx.geometry.Insets; 
import javafx.geometry.Pos;


import javafx.scene.Scene; 
import javafx.scene.control.Button; 
import javafx.scene.control.PasswordField; 
import javafx.scene.layout.GridPane; 
import javafx.scene.text.Text; 
import javafx.scene.control.TextField; 
import javafx.stage.Stage;  


public class LoginPage extends Application { 
   @Override 
   public void start(Stage stage) {      
      //creating label email 
      Text text1 = new Text("Ninja Coder Name");       
      
      //creating label password 
      Text text2 = new Text("Password"); 
       
      //Creating Text Filed for ninja coder name     
      TextField textField1 = new TextField();       
      
      //Creating Text Filed for password        
      PasswordField textField2 = new PasswordField();  


      //Creating Buttons 
      Button button1 = new Button("Submit"); 
      Button button2 = new Button("Clear");  
      
      //Creating a Grid Pane 
      GridPane gridPane = new GridPane();    
      
      //Setting size for the pane 
      gridPane.setMinSize(450, 250); 
      
      //Setting the padding  
      gridPane.setPadding(new Insets(12, 12, 12, 12)); 


      //Set the vertical and horizontal gaps b/w the columns 
      gridPane.setVgap(6); 
      gridPane.setHgap(6);       
      
      //Setting the Grid alignment 
      gridPane.setAlignment(Pos.CENTER); 
       
      //Arranging all the nodes in the grid 
      gridPane.add(text1, 0, 0); 
      gridPane.add(textField1, 1, 0); 
      gridPane.add(text2, 0, 1);       
      gridPane.add(textField2, 1, 1); 
      gridPane.add(button1, 0, 2); 
      gridPane.add(button2, 1, 2); 


      //Styling nodes  
      button1.setStyle("-fx-background-color: blue; -fx-text-fill: white;"); 
      button2.setStyle("-fx-background-color: blue; -fx-text-fill: white;"); 
       
      text1.setStyle("-fx-font: normal bold 25px 'serif' "); 
      text2.setStyle("-fx-font: normal bold 25px 'serif' ");  
      gridPane.setStyle("-fx-background-color: BEIGE;"); 
       
      //Creating a scene object 
      Scene scene = new Scene(gridPane); 
       
      //Setting title to the Stage 
      stage.setTitle("CSS Example"); 
         
      //Adding scene to the stage 
      stage.setScene(scene);
      
      //Displaying the contents of the stage 
      stage.show(); 
   }      
   public static void main(String args[]){ 
      launch(args); 
   } 
}

You can also try this code with Online Java Compiler

Run Code

When run, the preceding software creates the JavaFX window shown below.

Frequently Asked Questions

What exactly is JavaFX UI Controls?

Each user interface takes into account the three primary characteristics listed, which are

UI Elements, Layouts, and Behavior.

Explain the aspects of UI Elements?

These are the middle visible items with which the customer eventually engages. JavaFX has a large number of commonly used and ubiquitous aspects ranging from basic to complicated, which we will go through in this course.

Describe the layouts of JavaFX UI Controls?

They specify how UI components should be displayed on the screen and provide the GUI (Graphical person Interface) with a final look and feel. This component can be included in the chapter on the layout.

Explain Behavior in JavaFX UI Controls?

These are events that occur when a user interacts with UI components. This section can be incorporated into the event handling chapter.

Describe label components in JavaFX UI Controls?

The label component is used to define the basic text on the screen. A label is often associated with the node that it describes.

Conclusion 

In this article, we just had an introduction to JavaFX UI Controls, which includes JavaFX UI Controls layouts and components applications.

After reading about JavaFX UI Controls, are you not feeling excited to read/explore more articles on the topic of Ruby? Don't worry; Coding Ninjas has you covered. To learn, see JavaFX Scaling, JavaFX Pie Chart, and JavaFX HBox.

Refer to our Guided Path on Coding Ninjas Studio to upskill yourself in Data Structures and Algorithms, Competitive Programming, JavaScript, System Design, and many more! 

Do upvote our blogs if you find them helpful and engaging!