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 विंडो बनाता है जैसा कि नीचे दिखाया गया है।