JavaFX - UI-Steuerelemente

Jede Benutzeroberfläche berücksichtigt die folgenden drei Hauptaspekte:

UI elements- Dies sind die visuellen Kernelemente, die der Benutzer schließlich sieht und mit denen er interagiert. JavaFX bietet eine große Liste weit verbreiteter und allgemeiner Elemente, die von einfach bis komplex reichen und die wir in diesem Tutorial behandeln werden.
Layouts- Sie definieren, wie UI-Elemente auf dem Bildschirm organisiert werden sollen, und geben der GUI (Graphical User Interface) ein endgültiges Erscheinungsbild. Dieser Teil wird im Kapitel Layout behandelt.
Behavior- Dies sind Ereignisse, die auftreten, wenn der Benutzer mit UI-Elementen interagiert. Dieser Teil wird im Kapitel Ereignisbehandlung behandelt.

JavaFX bietet mehrere Klassen im Paket javafx.scene.control. Um verschiedene GUI-Komponenten (Steuerelemente) zu erstellen, unterstützt JavaFX verschiedene Steuerelemente wie Datumsauswahl, Schaltflächentextfeld usw.

Jedes Steuerelement wird durch eine Klasse dargestellt. Sie können ein Steuerelement erstellen, indem Sie die entsprechende Klasse instanziieren.

Im Folgenden finden Sie eine Liste häufig verwendeter Steuerelemente, während die GUI mit JavaFX erstellt wurde.

S.No.	Kontrolle & Beschreibung
1	Label Ein Beschriftungsobjekt ist eine Komponente zum Platzieren von Text.
2	Button Diese Klasse erstellt eine beschriftete Schaltfläche.
3	ColorPicker Ein ColorPicker bietet einen Bereich mit Steuerelementen, mit denen ein Benutzer eine Farbe bearbeiten und auswählen kann.
4	CheckBox Eine CheckBox ist eine grafische Komponente, die sich entweder im Status "Ein" (wahr) oder "Aus" (falsch) befinden kann.
5	RadioButton Die RadioButton-Klasse ist eine grafische Komponente, die sich in einer Gruppe entweder im Status EIN (wahr) oder AUS (falsch) befinden kann.
6	ListView Eine ListView-Komponente zeigt dem Benutzer eine Liste mit Textelementen an.
7	TextField Ein TextField-Objekt ist eine Textkomponente, mit der eine einzelne Textzeile bearbeitet werden kann.
8	PasswordField Ein PasswordField-Objekt ist eine Textkomponente, die auf die Kennworteingabe spezialisiert ist.
9	Scrollbar Ein Bildlaufleisten-Steuerelement stellt eine Bildlaufleisten-Komponente dar, damit der Benutzer aus einem Wertebereich auswählen kann.
10	FileChooser Ein FileChooser-Steuerelement stellt ein Dialogfenster dar, in dem der Benutzer eine Datei auswählen kann.
11	ProgressBar Während die Aufgabe abgeschlossen wird, zeigt der Fortschrittsbalken den Fertigstellungsgrad der Aufgabe an.
12	Slider Mit einem Schieberegler kann der Benutzer einen Wert grafisch auswählen, indem er einen Knopf innerhalb eines begrenzten Intervalls schiebt.

Beispiel

Das folgende Programm ist ein Beispiel, das eine Anmeldeseite in JavaFX anzeigt. Hier verwenden wir die Steuerelementelabel, text field, password field und button.

Speichern Sie diesen Code in einer Datei mit dem Namen LoginPage.java.

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("Email");       
      
      //creating label password 
      Text text2 = new Text("Password"); 
       
      //Creating Text Filed for email        
      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(400, 200); 
      
      //Setting the padding  
      gridPane.setPadding(new Insets(10, 10, 10, 10)); 
      
      //Setting the vertical and horizontal gaps between the columns 
      gridPane.setVgap(5); 
      gridPane.setHgap(5);       
      
      //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: darkslateblue; -fx-text-fill: white;"); 
      button2.setStyle("-fx-background-color: darkslateblue; -fx-text-fill: white;"); 
       
      text1.setStyle("-fx-font: normal bold 20px 'serif' "); 
      text2.setStyle("-fx-font: normal bold 20px '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); 
   } 
}

Kompilieren Sie die gespeicherte Java-Datei und führen Sie sie mit den folgenden Befehlen an der Eingabeaufforderung aus.

javac LoginPage.java 
java LoginPage

Bei der Ausführung generiert das obige Programm ein JavaFX-Fenster wie unten gezeigt.

Das folgende Programm ist ein Beispiel für ein Registrierungsformular, das Steuerelemente in JavaFX wie z Date Picker, Radio Button, Toggle Button, Check Box, List View, Choice List, usw.

Speichern Sie diesen Code in einer Datei mit dem Namen Registration.java.

import javafx.application.Application; 
import javafx.collections.FXCollections; 
import javafx.collections.ObservableList; 

import javafx.geometry.Insets; 
import javafx.geometry.Pos; 

import javafx.scene.Scene; 
import javafx.scene.control.Button; 
import javafx.scene.control.CheckBox; 
import javafx.scene.control.ChoiceBox; 
import javafx.scene.control.DatePicker; 
import javafx.scene.control.ListView; 
import javafx.scene.control.RadioButton; 
import javafx.scene.layout.GridPane; 
import javafx.scene.text.Text; 
import javafx.scene.control.TextField; 
import javafx.scene.control.ToggleGroup;  
import javafx.scene.control.ToggleButton; 
import javafx.stage.Stage; 
         
public class Registration extends Application { 
   @Override 
   public void start(Stage stage) {    
      //Label for name 
      Text nameLabel = new Text("Name"); 
      
      //Text field for name 
      TextField nameText = new TextField(); 
       
      //Label for date of birth 
      Text dobLabel = new Text("Date of birth"); 
      
      //date picker to choose date 
      DatePicker datePicker = new DatePicker(); 
       
      //Label for gender
      Text genderLabel = new Text("gender"); 
      
      //Toggle group of radio buttons       
      ToggleGroup groupGender = new ToggleGroup(); 
      RadioButton maleRadio = new RadioButton("male"); 
      maleRadio.setToggleGroup(groupGender); 
      RadioButton femaleRadio = new RadioButton("female"); 
      femaleRadio.setToggleGroup(groupGender); 
       
      //Label for reservation 
      Text reservationLabel = new Text("Reservation"); 
      
      //Toggle button for reservation 
      ToggleButton Reservation = new ToggleButton(); 
      ToggleButton yes = new ToggleButton("Yes"); 
      ToggleButton no = new ToggleButton("No"); 
      ToggleGroup groupReservation = new ToggleGroup(); 
      yes.setToggleGroup(groupReservation);   
      no.setToggleGroup(groupReservation); 
       
      //Label for technologies known 
      Text technologiesLabel = new Text("Technologies Known"); 
      
      //check box for education 
      CheckBox javaCheckBox = new CheckBox("Java"); 
      javaCheckBox.setIndeterminate(false); 
      
      //check box for education 
      CheckBox dotnetCheckBox = new CheckBox("DotNet"); 
      javaCheckBox.setIndeterminate(false); 
       
      //Label for education 
      Text educationLabel = new Text("Educational qualification"); 
      
      //list View for educational qualification 
      ObservableList<String> names = FXCollections.observableArrayList( 
         "Engineering", "MCA", "MBA", "Graduation", "MTECH", "Mphil", "Phd"); 
      ListView<String> educationListView = new ListView<String>(names); 
      
      //Label for location 
      Text locationLabel = new Text("location"); 
      
      //Choice box for location 
      ChoiceBox locationchoiceBox = new ChoiceBox(); 
      locationchoiceBox.getItems().addAll
         ("Hyderabad", "Chennai", "Delhi", "Mumbai", "Vishakhapatnam"); 
       
      //Label for register 
      Button buttonRegister = new Button("Register");  
      
      //Creating a Grid Pane 
      GridPane gridPane = new GridPane();    
      
      //Setting size for the pane 
      gridPane.setMinSize(500, 500); 
       
      //Setting the padding    
      gridPane.setPadding(new Insets(10, 10, 10, 10));  
      
      //Setting the vertical and horizontal gaps between the columns 
      gridPane.setVgap(5); 
      gridPane.setHgap(5);       
      
      //Setting the Grid alignment 
      gridPane.setAlignment(Pos.CENTER); 
       
      //Arranging all the nodes in the grid 
      gridPane.add(nameLabel, 0, 0); 
      gridPane.add(nameText, 1, 0); 
       
      gridPane.add(dobLabel, 0, 1);       
      gridPane.add(datePicker, 1, 1); 
      
      gridPane.add(genderLabel, 0, 2); 
      gridPane.add(maleRadio, 1, 2);       
      gridPane.add(femaleRadio, 2, 2); 
      gridPane.add(reservationLabel, 0, 3); 
      gridPane.add(yes, 1, 3);       
      gridPane.add(no, 2, 3);  
       
      gridPane.add(technologiesLabel, 0, 4); 
      gridPane.add(javaCheckBox, 1, 4);       
      gridPane.add(dotnetCheckBox, 2, 4);  
       
      gridPane.add(educationLabel, 0, 5); 
      gridPane.add(educationListView, 1, 5);      
       
      gridPane.add(locationLabel, 0, 6); 
      gridPane.add(locationchoiceBox, 1, 6);    
       
      gridPane.add(buttonRegister, 2, 8);      
      
      //Styling nodes   
      buttonRegister.setStyle(
         "-fx-background-color: darkslateblue; -fx-textfill: white;"); 
       
      nameLabel.setStyle("-fx-font: normal bold 15px 'serif' "); 
      dobLabel.setStyle("-fx-font: normal bold 15px 'serif' "); 
      genderLabel.setStyle("-fx-font: normal bold 15px 'serif' "); 
      reservationLabel.setStyle("-fx-font: normal bold 15px 'serif' "); 
      technologiesLabel.setStyle("-fx-font: normal bold 15px 'serif' "); 
      educationLabel.setStyle("-fx-font: normal bold 15px 'serif' "); 
      locationLabel.setStyle("-fx-font: normal bold 15px 'serif' "); 
       
      //Setting the back ground color 
      gridPane.setStyle("-fx-background-color: BEIGE;");       
       
      //Creating a scene object 
      Scene scene = new Scene(gridPane); 
      
      //Setting title to the Stage 
      stage.setTitle("Registration Form"); 
         
      //Adding scene to the stage 
      stage.setScene(scene);  
      
      //Displaying the contents of the stage 
      stage.show(); 
   }      
   public static void main(String args[]){ 
      launch(args); 
   } 
}

Kompilieren Sie die gespeicherte Java-Datei und führen Sie sie mit den folgenden Befehlen an der Eingabeaufforderung aus.

javac Registration.java 
java Registration

Bei der Ausführung generiert das obige Programm ein JavaFX-Fenster wie unten gezeigt.