JavaFX UI controls

Introduction to JavaFX UI Controls

JavaFX UI controls are the basic building blocks of graphical user interfaces (GUIs) in JavaFX. They allow users to interact with applications in a variety of ways, such as entering text, clicking buttons, and selecting items from lists.

There are a wide variety of UI controls available in JavaFX, including:

Buttons: Buttons allow users to trigger actions, such as opening a new window or submitting a form.
Text fields: Text fields allow users to enter text.
Check boxes: Check boxes allow users to select or deselect items from a list.
Radio buttons: Radio buttons allow users to select one item from a list.
Choice boxes: Choice boxes allow users to select a single item from a list.
List views: List views allow users to view and select items from a list.
Table views: Table views allow users to view and edit data in a tabular format.
Tree views: Tree views allow users to view and interact with hierarchical data.
Progress bars:Progress bars allow users to track the progress of an operation.

JavaFX UI controls are highly customizable and can be styled to match the look and feel of your application. You can also create your own custom UI controls by extending the existing classes.

To use UI controls in your JavaFX application, you simply need to add them to a Scene. You can then arrange the controls using a layout manager.

Here is an example of a simple JavaFX application that uses a few basic UI controls:


import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

public class MyApp extends Application {

  @Override
  public void start(Stage stage) throws Exception {
    Button button = new Button("Click Me!");

    HBox layout = new HBox(10);
    layout.getChildren().add(button);

    Scene scene = new Scene(layout);

    stage.setTitle("My JavaFX Application");
    stage.setScene(scene);
    stage.show();
  }

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

This application will create a window with a button. When the user clicks the button, nothing will happen, because we have not added any event handlers.

However, we can easily add an event handler to the button to handle the click event. Here is how to do that:


button.setOnAction(event -> {
  System.out.println("You clicked the button!");
});

Now, when the user clicks the button, the message "You clicked the button!" will be printed to the console.

JavaFX UI controls are a powerful and versatile tool for creating user interfaces. By understanding how to use UI controls, you can create a wide variety of JavaFX applications with intuitive and user-friendly GUIs.

Exercises

Adding a button control in Javafx


package practiceproject;
import java.io.*;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.HBox;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.scene.text.TextAlignment;
import javafx.stage.Stage;

public class democlass extends Application{
  
    public static void main(String[] args){
  
    launch(args);
    }

  @Override
  public void start(Stage primaryStage) throws Exception {
    //create a button 
    Button bt1= new Button("click here");
    bt1.setText("I am setting text here");
    bt1.setWrapText(true);
    bt1.setTextFill(Color.RED);
    bt1.setText("This is a long text and i need to wrap it");
    //bt1.setDisable(true);
    FileInputStream input = new FileInputStream("F:\\\\Fall Semester 2020-2021\\\\database.jpg");
    Image img = new Image(input);
    ImageView imgview = new ImageView(img);
    Button bt1= new Button("click here",imgview);
    HBox root = new HBox();
    //we need to add this button to this layout
    root.getChildren().add(bt1);
    //we need to add this layout to a scene
    Scene sc = new Scene(root);
    primaryStage.setHeight(500);
    primaryStage.setWidth(500);
    primaryStage.setScene(sc);
    primaryStage.show();
    
  }
}

Code for creating a Radio Button Control in Javafx


package practiceproject;
import java.io.*;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.RadioButton;
import javafx.scene.control.TextField;
import javafx.scene.control.ToggleGroup;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.FlowPane;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class Satish20BCE001 extends Application{
  public static void main(String[] args){	
        
      launch();
    }

  @Override
  public void start(Stage primaryStage) throws Exception {
    Label lbl = new Label("Select your Favourite Subject");
    ToggleGroup toggle = new ToggleGroup();
    RadioButton bt1 = new RadioButton("English");
    RadioButton bt2 = new RadioButton("chemistry");
    RadioButton bt3 = new RadioButton("Maths");
    RadioButton bt4 = new RadioButton("Computer Science");
    bt1.setToggleGroup(toggle);
    bt2.setToggleGroup(toggle);
    bt3.setToggleGroup(toggle);
    bt4.setToggleGroup(toggle);
    VBox root = new VBox();
    //we need to add this button to this layout
    root.getChildren().add(lbl);
    root.getChildren().addAll(bt1,bt2,bt3,bt4);
    //we need to add this layout to a scene
    Scene sc = new Scene(root);
    primaryStage.setHeight(500);
    primaryStage.setWidth(500);
    primaryStage.setTitle("Radio Button Demo");
    primaryStage.setScene(sc);
    primaryStage.show();
    
  }
}

Code for creating a checkbox control in javafx


import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.CheckBox;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;
public class Satish20BCE001 extends Application{
public static void main(String[] args){	
    
  launch();
}

@Override
public void start(Stage primaryStage) throws Exception {
    Label lbl = new Label("Select all your Favourite Subjects");
//creating a check box button
    CheckBox opt1 = new CheckBox("English");
    CheckBox opt2 = new CheckBox("chemistry");
    CheckBox opt3 = new CheckBox("Computer Science");
    CheckBox opt4 = new CheckBox("DBMS");
    VBox root = new VBox();
    //we need to add this button to this layout
    root.getChildren().add(lbl);
    root.getChildren().addAll(opt1,opt2,opt3,opt4);
    //we need to add this layout to a scene
    Scene sc = new Scene(root);
    primaryStage.setHeight(500);
    primaryStage.setWidth(500);
    primaryStage.setTitle("Check Box Demo");
    primaryStage.setScene(sc);
    primaryStage.show();
    
  }
}

Code for adding an hyperlink in javafx


package practiceproject;
import java.io.*;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.CheckBox;
import javafx.scene.control.Hyperlink;
import javafx.scene.control.Label;
import javafx.scene.control.RadioButton;
import javafx.scene.control.ToggleGroup;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.stage.Stage;

public class democlass extends Application{
  
    public static void main(String[] args){
  
    launch(args);
    }

  @Override
  public void start(Stage primaryStage) throws Exception {
    //creating an hyperlink
    
    Hyperlink satish = new Hyperlink("https://www.youtube.com/c/satishcj");
    
    VBox root = new VBox();
    //we need to add this button to this layout
    root.getChildren().add(satish);
    //we need to add this layout to a scene
    Scene sc = new Scene(root);
    primaryStage.setHeight(500);
    primaryStage.setWidth(500);
    primaryStage.setTitle("Hyperlink Demo");
    primaryStage.setScene(sc);
    primaryStage.show();
  }
}

Code for creating a combobox in javafx


package practiceproject;
import java.io.*;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.CheckBox;
import javafx.scene.control.ComboBox;
import javafx.scene.control.Hyperlink;
import javafx.scene.control.Label;
import javafx.scene.control.RadioButton;
import javafx.scene.control.ToggleGroup;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.stage.Stage;

public class democlass extends Application{
  
    public static void main(String[] args){
  
    launch(args);
    }

  @Override
  public void start(Stage primaryStage) throws Exception {
    //creating an combobox
    ComboBox subjects = new ComboBox();
    subjects.getItems().add("English");
    subjects.getItems().add("Computer");
    subjects.getItems().add("Maths");
    subjects.getItems().add("Physics");
    VBox root = new VBox();
    //we need to add this button to this layout
    root.getChildren().add(subjects);
    //we need to add this layout to a scene
    Scene sc = new Scene(root);
    primaryStage.setHeight(500);
    primaryStage.setWidth(500);
    primaryStage.setTitle("Controls Demo");
    primaryStage.setScene(sc);
    primaryStage.show();
    
  }
}

Code for creating a list view control in javafx


package practiceproject;
import java.io.*;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.CheckBox;
import javafx.scene.control.ComboBox;
import javafx.scene.control.Hyperlink;
import javafx.scene.control.Label;
import javafx.scene.control.ListView;
import javafx.scene.control.RadioButton;
import javafx.scene.control.SelectionMode;
import javafx.scene.control.ToggleGroup;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.stage.Stage;

public class democlass extends Application{
  
    public static void main(String[] args){
  
    launch(args);
    }

  @Override
  public void start(Stage primaryStage) throws Exception {
    //creating listview
    ListView subjects = new ListView();
    subjects.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE);
    subjects.getItems().add("English");
    subjects.getItems().add("physics");
    subjects.getItems().add("chemistry");
    subjects.getItems().add("history");
    VBox root = new VBox();
    //we need to add this button to this layout
    root.getChildren().add(subjects);
    //we need to add this layout to a scene
    Scene sc = new Scene(root);
    primaryStage.setHeight(500);
    primaryStage.setWidth(500);
    primaryStage.setTitle("Controls Demo");
    primaryStage.setScene(sc);
    primaryStage.show();
    
  }
}

Code for adding a text field control in javafx


package practiceproject;
import java.io.*;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.CheckBox;
import javafx.scene.control.ComboBox;
import javafx.scene.control.Hyperlink;
import javafx.scene.control.Label;
import javafx.scene.control.ListView;
import javafx.scene.control.RadioButton;
import javafx.scene.control.SelectionMode;
import javafx.scene.control.TextField;
import javafx.scene.control.ToggleGroup;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.stage.Stage;

public class democlass extends Application{
  
    public static void main(String[] args){
  
    launch(args);
    }

  @Override
  public void start(Stage primaryStage) throws Exception {
    //creating textfield
    TextField t = new TextField();
    VBox root = new VBox();
    //we need to add this button to this layout
    root.getChildren().add(t);
    t.setMaxWidth(100);
    //we need to add this layout to a scene
    Scene sc = new Scene(root);
    primaryStage.setHeight(500);
    primaryStage.setWidth(500);
    primaryStage.setTitle("Controls Demo");
    primaryStage.setScene(sc);
    primaryStage.show();
    
  }
}

Code for adding a password field control in javafx


package practiceproject;
import java.io.*;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.CheckBox;
import javafx.scene.control.ComboBox;
import javafx.scene.control.Hyperlink;
import javafx.scene.control.Label;
import javafx.scene.control.ListView;
import javafx.scene.control.PasswordField;
import javafx.scene.control.RadioButton;
import javafx.scene.control.SelectionMode;
import javafx.scene.control.TextField;
import javafx.scene.control.ToggleGroup;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.stage.Stage;

public class democlass extends Application{
  
    public static void main(String[] args){
  
    launch(args);
    }

  @Override
  public void start(Stage primaryStage) throws Exception {
    //creating textfield
    PasswordField t = new PasswordField();
    VBox root = new VBox();
    //we need to add this button to this layout
    root.getChildren().add(t);
    t.setMaxWidth(100);
    //we need to add this layout to a scene
    Scene sc = new Scene(root);
    primaryStage.setHeight(500);
    primaryStage.setWidth(500);
    primaryStage.setTitle("Controls Demo");
    primaryStage.setScene(sc);
    primaryStage.show();
    
  }
}