JavaFX - Điều khiển giao diện người dùng

Mọi giao diện người dùng đều xem xét ba khía cạnh chính sau:

• UI elements- Đây là các yếu tố hình ảnh cốt lõi mà người dùng cuối cùng nhìn thấy và tương tác với. JavaFX cung cấp một danh sách khổng lồ các phần tử được sử dụng rộng rãi và phổ biến khác nhau, từ cơ bản đến phức tạp, mà chúng tôi sẽ trình bày trong hướng dẫn này.

• Layouts- Chúng xác định cách tổ chức các phần tử giao diện người dùng trên màn hình và cung cấp giao diện cuối cùng cho GUI (Giao diện người dùng đồ họa). Phần này sẽ được đề cập trong chương Bố cục.

• Behavior- Đây là những sự kiện xảy ra khi người dùng tương tác với các phần tử giao diện người dùng. Phần này sẽ được đề cập trong chương Xử lý sự kiện.

JavaFX cung cấp một số lớp trong gói javafx.scene.control. Để tạo các thành phần GUI (điều khiển) khác nhau, JavaFX hỗ trợ một số điều khiển như bộ chọn ngày, trường văn bản nút, v.v.

Mỗi điều khiển được đại diện bởi một lớp; bạn có thể tạo điều khiển bằng cách khởi tạo lớp tương ứng của nó.

Sau đây là danh sách các điều khiển thường được sử dụng trong khi GUI được thiết kế bằng JavaFX.

S. không	Kiểm soát & Mô tả
1	Label Đối tượng Nhãn là một thành phần để đặt văn bản.
2	Button Lớp này tạo một nút có nhãn.
3	ColorPicker ColorPicker cung cấp một ngăn điều khiển được thiết kế để cho phép người dùng thao tác và chọn màu.
4	CheckBox CheckBox là một thành phần đồ họa có thể ở trạng thái bật (đúng) hoặc tắt (sai).
5	RadioButton Lớp RadioButton là một thành phần đồ họa, có thể ở trạng thái BẬT (đúng) hoặc TẮT (sai) trong một nhóm.
6	ListView Thành phần ListView trình bày cho người dùng một danh sách cuộn các mục văn bản.
7	TextField Đối tượng TextField là một thành phần văn bản cho phép chỉnh sửa một dòng văn bản.
số 8	PasswordField Đối tượng PasswordField là một thành phần văn bản chuyên dùng để nhập mật khẩu.
9	Scrollbar Điều khiển Thanh cuộn đại diện cho một thành phần thanh cuộn để cho phép người dùng chọn từ phạm vi giá trị.
10	FileChooser Điều khiển FileChooser đại diện cho một cửa sổ hộp thoại mà từ đó người dùng có thể chọn một tệp.
11	ProgressBar Khi nhiệm vụ tiến tới hoàn thành, thanh tiến trình hiển thị phần trăm hoàn thành của nhiệm vụ.
12	Slider Slider cho phép người dùng chọn một giá trị bằng đồ thị bằng cách trượt một núm trong một khoảng giới hạn.

Thí dụ

Chương trình sau đây là một ví dụ hiển thị trang đăng nhập trong JavaFX. Ở đây, chúng tôi đang sử dụng các điều khiểnlabel, text field, password field và button.

Lưu mã này trong một tệp có tên 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); 
   } 
}

Biên dịch và thực thi tệp java đã lưu từ dấu nhắc lệnh bằng các lệnh sau.

javac LoginPage.java 
java LoginPage

Khi thực thi, chương trình trên tạo một cửa sổ JavaFX như hình dưới đây.

Chương trình sau đây là một ví dụ về biểu mẫu đăng ký, biểu mẫu này trình bày các điều khiển trong JavaFX, chẳng hạn như Date Picker, Radio Button, Toggle Button, Check Box, List View, Choice List, Vân vân.

Lưu mã này trong một tệp có tên 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); 
   } 
}

Biên dịch và thực thi tệp java đã lưu từ dấu nhắc lệnh bằng các lệnh sau.

javac Registration.java 
java Registration

Khi thực thi, chương trình trên tạo một cửa sổ JavaFX như hình dưới đây.