JavaFX - UI कंट्रोल

प्रत्येक उपयोगकर्ता इंटरफ़ेस निम्नलिखित तीन मुख्य पहलुओं पर विचार करता है -

  • UI elements- ये मुख्य दृश्य तत्व हैं जो उपयोगकर्ता अंततः देखता है और उसके साथ बातचीत करता है। JavaFX बुनियादी से जटिल तक व्यापक रूप से उपयोग किए जाने वाले और सामान्य तत्वों की एक विशाल सूची प्रदान करता है, जिसे हम इस ट्यूटोरियल में शामिल करेंगे।

  • Layouts- वे परिभाषित करते हैं कि कैसे यूआई तत्वों को स्क्रीन पर व्यवस्थित किया जाना चाहिए और जीयूआई (ग्राफिकल यूजर इंटरफेस) को अंतिम रूप और अनुभव प्रदान करना चाहिए। यह भाग लेआउट अध्याय में शामिल किया जाएगा।

  • Behavior- ये ऐसी घटनाएं हैं जो तब होती हैं जब उपयोगकर्ता UI तत्वों के साथ बातचीत करता है। यह हिस्सा इवेंट हैंडलिंग चैप्टर में कवर किया जाएगा।

JavaFX पैकेज में कई कक्षाएं प्रदान करता है javafx.scene.control। विभिन्न GUI घटक (नियंत्रण) बनाने के लिए, JavaFX कई नियंत्रणों का समर्थन करता है जैसे दिनांक पिकर, बटन पाठ क्षेत्र, आदि।

प्रत्येक नियंत्रण को एक वर्ग द्वारा दर्शाया जाता है; आप इसकी संबंधित कक्षा को तत्काल करके एक नियंत्रण बना सकते हैं।

निम्नलिखित आमतौर पर उपयोग किए जाने वाले नियंत्रणों की सूची है, जबकि GUI को JavaFX का उपयोग करके बनाया गया है।

S.No नियंत्रण और विवरण
1

Label

एक लेबल ऑब्जेक्ट पाठ रखने के लिए एक घटक है।

2

Button

यह वर्ग एक लेबल बटन बनाता है।

3

ColorPicker

एक ColorPicker एक उपयोगकर्ता को हेरफेर करने और एक रंग का चयन करने की अनुमति देने के लिए डिज़ाइन किए गए नियंत्रणों का एक फलक प्रदान करता है।

4

CheckBox

एक चेकबॉक्स एक ग्राफिकल घटक है जो एक (सच्चा) या बंद (गलत) स्थिति में हो सकता है।

5

RadioButton

RadioButton क्लास एक ग्राफिकल कंपोनेंट है, जो या तो किसी ग्रुप में ON (ट्रू) या OFF (गलत) अवस्था में हो सकता है।

6

ListView

एक ListView घटक उपयोगकर्ता को पाठ आइटम की स्क्रॉलिंग सूची के साथ प्रस्तुत करता है।

7

TextField

एक TextField वस्तु एक पाठ घटक है जो पाठ की एक पंक्ति के संपादन के लिए अनुमति देता है।

8

PasswordField

एक पासवर्डफ़ीड ऑब्जेक्ट एक पाठ घटक है जो पासवर्ड प्रविष्टि के लिए विशेष है।

9

Scrollbar

स्क्रॉलबार नियंत्रण उपयोगकर्ता को मानों की श्रेणी से चयन करने के लिए स्क्रॉल बार घटक का प्रतिनिधित्व करता है।

10

FileChooser

एक FileChooser नियंत्रण एक संवाद विंडो का प्रतिनिधित्व करता है जिसमें से उपयोगकर्ता एक फ़ाइल का चयन कर सकता है।

1 1

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); 
   } 
}

निम्न कमांड का उपयोग करके कमांड प्रॉम्प्ट से सहेजे गए जावा फ़ाइल को संकलित और निष्पादित करें।

javac LoginPage.java 
java LoginPage

निष्पादित करने पर, उपरोक्त कार्यक्रम एक 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); 
   } 
}

निम्न कमांड का उपयोग करके कमांड प्रॉम्प्ट से सहेजे गए जावा फ़ाइल को संकलित और निष्पादित करें।

javac Registration.java 
java Registration

निष्पादित करने पर, उपरोक्त कार्यक्रम एक JavaFX विंडो बनाता है जैसा कि नीचे दिखाया गया है।