JavaFX - การควบคุม UI

อินเทอร์เฟซผู้ใช้ทุกคนพิจารณาสามประเด็นหลักดังต่อไปนี้ -

• UI elements- สิ่งเหล่านี้คือองค์ประกอบภาพหลักที่ผู้ใช้เห็นและโต้ตอบในที่สุด JavaFX มีรายการองค์ประกอบที่ใช้กันอย่างแพร่หลายและองค์ประกอบทั่วไปที่แตกต่างกันไปตั้งแต่พื้นฐานจนถึงแบบซับซ้อนซึ่งเราจะกล่าวถึงในบทช่วยสอนนี้

• Layouts- พวกเขากำหนดวิธีการจัดองค์ประกอบ UI บนหน้าจอและให้รูปลักษณ์สุดท้ายของ GUI (อินเทอร์เฟซผู้ใช้แบบกราฟิก) ส่วนนี้จะกล่าวถึงในบทเค้าโครง

• Behavior- นี่คือเหตุการณ์ที่เกิดขึ้นเมื่อผู้ใช้โต้ตอบกับองค์ประกอบ UI ส่วนนี้จะครอบคลุมในบทการจัดการเหตุการณ์

JavaFX มีหลายคลาสในแพ็คเกจ javafx.scene.control. ในการสร้างคอมโพเนนต์ GUI ต่างๆ (ตัวควบคุม) JavaFX รองรับการควบคุมหลายอย่างเช่นตัวเลือกวันที่ฟิลด์ข้อความของปุ่มเป็นต้น

แต่ละตัวควบคุมจะแสดงโดยคลาส คุณสามารถสร้างการควบคุมโดยการสร้างอินสแตนซ์คลาสตามลำดับ

ต่อไปนี้เป็นรายการตัวควบคุมที่ใช้กันทั่วไปในขณะที่ GUI ได้รับการออกแบบโดยใช้ JavaFX

ส. เลขที่	การควบคุมและคำอธิบาย
1	Label ออบเจ็กต์ Label เป็นส่วนประกอบสำหรับวางข้อความ
2	Button คลาสนี้สร้างปุ่มที่มีป้ายกำกับ
3	ColorPicker ColorPicker มีบานหน้าต่างควบคุมที่ออกแบบมาเพื่อให้ผู้ใช้จัดการและเลือกสีได้
4	CheckBox CheckBox เป็นส่วนประกอบแบบกราฟิกที่สามารถอยู่ในสถานะเปิด (จริง) หรือปิด (เท็จ)
5	RadioButton คลาส RadioButton เป็นส่วนประกอบแบบกราฟิกซึ่งอาจอยู่ในสถานะเปิด (จริง) หรือปิด (เท็จ) ในกลุ่ม
6	ListView คอมโพเนนต์ ListView นำเสนอผู้ใช้ด้วยรายการข้อความแบบเลื่อน
7	TextField ออบเจ็กต์ TextField คือส่วนประกอบข้อความที่อนุญาตให้แก้ไขข้อความบรรทัดเดียว
8	PasswordField ออบเจ็กต์ PasswordField เป็นส่วนประกอบข้อความที่เชี่ยวชาญสำหรับการป้อนรหัสผ่าน
9	Scrollbar ตัวควบคุมแถบเลื่อนแสดงส่วนประกอบของแถบเลื่อนเพื่อให้ผู้ใช้สามารถเลือกจากช่วงของค่าได้
10	FileChooser ตัวควบคุม FileChooser แสดงถึงหน้าต่างโต้ตอบที่ผู้ใช้สามารถเลือกไฟล์
11	ProgressBar เมื่องานดำเนินไปสู่ความสำเร็จแถบความคืบหน้าจะแสดงเปอร์เซ็นต์ความสำเร็จของงาน
12	Slider แถบเลื่อนช่วยให้ผู้ใช้เลือกค่าแบบกราฟิกโดยการเลื่อนปุ่มภายในช่วงเวลาที่กำหนด

ตัวอย่าง

โปรแกรมต่อไปนี้เป็นตัวอย่างที่แสดงเพจล็อกอินใน JavaFX ที่นี่เรากำลังใช้การควบคุมlabel, text field, password field และ button.

บันทึกรหัสนี้ในไฟล์ที่มีชื่อ 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); 
   } 
}

คอมไพล์และเรียกใช้ไฟล์ java ที่บันทึกไว้จากพรอมต์คำสั่งโดยใช้คำสั่งต่อไปนี้

javac LoginPage.java 
java LoginPage

ในการดำเนินการโปรแกรมด้านบนจะสร้างหน้าต่าง JavaFX ดังที่แสดงด้านล่าง

โปรแกรมต่อไปนี้เป็นตัวอย่างของแบบฟอร์มการลงทะเบียนซึ่งแสดงให้เห็นถึงการควบคุมใน JavaFX เช่น Date Picker, Radio Button, Toggle Button, Check Box, List View, Choice List, เป็นต้น

บันทึกรหัสนี้ในไฟล์ที่มีชื่อ 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); 
   } 
}

คอมไพล์และเรียกใช้ไฟล์ java ที่บันทึกไว้จากพรอมต์คำสั่งโดยใช้คำสั่งต่อไปนี้

javac Registration.java 
java Registration

ในการดำเนินการโปรแกรมด้านบนจะสร้างหน้าต่าง JavaFX ดังที่แสดงด้านล่าง