JavaFX - UI Kontrolleri

Her kullanıcı arayüzü aşağıdaki üç ana hususu dikkate alır:

• UI elements- Bunlar kullanıcının sonunda gördüğü ve etkileşim kurduğu temel görsel öğelerdir. JavaFX, bu eğitimde ele alacağımız, temelden karmaşığa değişen, yaygın olarak kullanılan ve yaygın öğelerin geniş bir listesini sağlar.

• Layouts- UI öğelerinin ekranda nasıl düzenleneceğini tanımlarlar ve GUI'ye (Grafik Kullanıcı Arayüzü) son bir görünüm ve his sağlarlar. Bu kısım, Düzen bölümünde ele alınacaktır.

• Behavior- Bunlar, kullanıcı UI öğeleriyle etkileşime girdiğinde meydana gelen olaylardır. Bu kısım, Olay İşleme bölümünde ele alınacaktır.

JavaFX, pakette birkaç sınıf sağlar javafx.scene.control. JavaFX, çeşitli GUI bileşenleri (kontroller) oluşturmak için tarih seçici, düğme metin alanı vb. Gibi çeşitli kontrolleri destekler.

Her denetim bir sınıfla temsil edilir; ilgili sınıfını örnekleyerek bir denetim oluşturabilirsiniz.

GUI JavaFX kullanılarak tasarlanırken yaygın olarak kullanılan kontrollerin listesi aşağıdadır.

S.No	Kontrol ve Açıklama
1	Label Bir Etiket nesnesi, metni yerleştirmek için bir bileşendir.
2	Button Bu sınıf, etiketli bir düğme oluşturur.
3	ColorPicker ColorPicker, kullanıcının bir rengi işlemesine ve seçmesine izin vermek için tasarlanmış bir denetim bölmesi sağlar.
4	CheckBox CheckBox, açık (doğru) veya kapalı (yanlış) durumda olabilen bir grafik bileşendir.
5	RadioButton RadioButton sınıfı, bir grupta AÇIK (doğru) veya KAPALI (yanlış) durumda olabilen grafiksel bir bileşendir.
6	ListView ListView bileşeni, kullanıcıya metin öğelerinin kayan bir listesini sunar.
7	TextField TextField nesnesi, tek bir metin satırının düzenlenmesine izin veren bir metin bileşenidir.
8	PasswordField PasswordField nesnesi, parola girişi için özelleştirilmiş bir metin bileşenidir.
9	Scrollbar Kaydırma çubuğu kontrolü, kullanıcının değerler aralığı arasından seçim yapmasını sağlamak için bir kaydırma çubuğu bileşenini temsil eder.
10	FileChooser Bir FileChooser denetimi, kullanıcının bir dosya seçebileceği bir iletişim penceresini temsil eder.
11	ProgressBar Görev tamamlanmaya doğru ilerledikçe, ilerleme çubuğu görevin tamamlanma yüzdesini görüntüler.
12	Slider Bir Kaydırıcı, kullanıcının sınırlı bir aralık içinde bir düğmeyi kaydırarak grafiksel olarak bir değer seçmesini sağlar.

Misal

Aşağıdaki program, JavaFX'te bir oturum açma sayfasını görüntüleyen bir örnektir. Burada kontrolleri kullanıyoruzlabel, text field, password field ve button.

Bu kodu adıyla bir dosyaya kaydedin 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); 
   } 
}

Kaydedilen java dosyasını aşağıdaki komutları kullanarak komut isteminden derleyin ve yürütün.

javac LoginPage.java 
java LoginPage

Yürütüldüğünde, yukarıdaki program aşağıda gösterildiği gibi bir JavaFX penceresi oluşturur.

Aşağıdaki program, JavaFX'teki kontrolleri gösteren bir kayıt formu örneğidir. Date Picker, Radio Button, Toggle Button, Check Box, List View, Choice List, vb.

Bu kodu adıyla bir dosyaya kaydedin 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); 
   } 
}

Kaydedilen java dosyasını aşağıdaki komutları kullanarak komut isteminden derleyin ve yürütün.

javac Registration.java 
java Registration

Yürütüldüğünde, yukarıdaki program aşağıda gösterildiği gibi bir JavaFX penceresi oluşturur.