👂🏼 👴 🅰️ JavaFX ट्यूटोरियल: FXML और दृश्य 👩🏻‍💻 🧜🏾 🚂

जावाएफएक्स ट्यूटोरियल का अनुवाद : Vojtech Ruzicka द्वारा FXML और दृश्य लेख ।

एफएक्सएमएल मार्कअप और सीनब्यूलर का उपयोग करके जावाएफएक्स के साथ एक जीयूआई कैसे बनाएं।

JavaFX श्रृंखला की सभी पोस्ट:

पारंपरिक तरीका

पिछले लेख में, हमने एक सरल हैलो वर्ल्ड एप्लिकेशन बनाया ।

बस एक अनुस्मारक - कोड इस तरह देखा:

@Override public void start(Stage primaryStage) throws Exception { primaryStage.setTitle("Hello world Application"); primaryStage.setWidth(300); primaryStage.setHeight(200); InputStream iconStream = getClass().getResourceAsStream("/icon.png"); Image image = new Image(iconStream); primaryStage.getIcons().add(image); Label helloWorldLabel = new Label("Hello world!"); helloWorldLabel.setAlignment(Pos.CENTER); Scene primaryScene = new Scene(helloWorldLabel); primaryStage.setScene(primaryScene); primaryStage.show(); }

जैसा कि आप देख सकते हैं, संपूर्ण उपयोगकर्ता इंटरफ़ेस जावा कोड में बनाया गया है।

यह एक बहुत ही सरल उदाहरण है, लेकिन जैसा कि आपका आवेदन अधिक जटिल हो जाता है, जब आपको नेस्टेड लेआउट और कई घटकों के कई स्तरों में प्रवेश करना होता है, तो परिणामस्वरूप कोड को समझना बहुत मुश्किल हो सकता है। हालांकि, यह सब नहीं है - एक ही वर्ग में कोड है जो एक ही समय में संरचना, दृश्य प्रभाव और व्यवहार के लिए जिम्मेदार है।

कक्षा में स्पष्ट रूप से एक भी जिम्मेदारी नहीं है। इसकी तुलना करें, उदाहरण के लिए, वेब इंटरफेस के साथ, जहां प्रत्येक पृष्ठ ने स्पष्ट रूप से अलग कार्य किए हैं:

HTML एक संरचना है
सीएसएस दृश्य प्रभाव है
जावास्क्रिप्ट व्यवहार है

एफएक्सएमएल का परिचय

जाहिर है, सभी कोड एक ही स्थान पर होना एक अच्छा विचार नहीं है। आपको इसे किसी तरह से संरचना करने की आवश्यकता है ताकि इसे समझने और इसे अधिक प्रबंधनीय बनाने में आसान हो।

वास्तव में, इसके लिए कई डिज़ाइन पैटर्न हैं। आमतौर पर, आप "मॉडल-व्यू-जो भी" विकल्प के साथ समाप्त होते हैं - यह "मॉडल व्यू कंट्रोलर," "मॉडल व्यू प्रस्तुतकर्ता," या "मॉडल व्यू व्यूमॉडल" जैसा कुछ है।

आप विभिन्न विकल्पों के पेशेवरों और विपक्षों पर चर्चा करते हुए घंटों बिता सकते हैं - चलो यहां ऐसा नहीं करते हैं। इससे भी महत्वपूर्ण बात, JavaFx के साथ आप उनमें से किसी का भी उपयोग कर सकते हैं।

यह संभव है क्योंकि आपके उपयोगकर्ता इंटरफ़ेस के प्रक्रियात्मक डिज़ाइन के अलावा, आप घोषणात्मक XML मार्कअप का उपयोग कर सकते हैं।

यह पता चलता है कि एक्सएमएल की पदानुक्रमित संरचना यूजर इंटरफेस में घटकों के पदानुक्रम का वर्णन करने का एक शानदार तरीका है। HTML बहुत अच्छा काम करता है, है ना?

जावाएफएक्स-विशिष्ट एक्सएमएल प्रारूप को एफएक्सएमएल कहा जाता है। इसमें, आप सभी एप्लिकेशन घटकों और उनके गुणों को परिभाषित कर सकते हैं, साथ ही उन्हें नियंत्रक के साथ जोड़ सकते हैं, जो बातचीत के प्रबंधन के लिए जिम्मेदार है।

FXML फ़ाइलें डाउनलोड करें

तो, हम एफएक्सएमएल के साथ काम करने के लिए अपनी लॉन्च विधि को कैसे बदल सकते हैं?

 FXMLLoader loader = new FXMLLoader(); URL xmlUrl = getClass().getResource("/mainScene.fxml"); loader.setLocation(xmlUrl); Parent root = loader.load(); primaryStage.setScene(new Scene(root)); primaryStage.show();

यहां रूट आपके उपयोगकर्ता इंटरफ़ेस के रूट घटक का प्रतिनिधित्व करता है, अन्य घटक इसमें निहित हैं।

लोड विधि का एक सामान्य रिटर्न मान है, इसलिए आप एक विशिष्ट प्रकार निर्दिष्ट कर सकते हैं, अभिभावक नहीं। अगला, आपको घटक-उन्मुख विधियों तक पहुंच मिलती है। हालाँकि, यह आपके कोड को अधिक नाजुक बनाता है। यदि आप अपने FXML में रूट कंपोनेंट के प्रकार को बदलते हैं, तो एप्लिकेशन रन टाइम पर काम करना बंद कर सकता है, लेकिन संकलन के दौरान कोई त्रुटि नहीं होगी। ऐसा इसलिए है क्योंकि अब आपके FXML और Java FXML लोडर में घोषित प्रकार का एक बेमेल है।

FXML फ़ाइल बनाएँ

अब हम जानते हैं कि एफएक्सएमएल फ़ाइल को कैसे लोड करना है, लेकिन हमें अभी भी इसे बनाने की आवश्यकता है। फ़ाइल में एक्सटेंशन .fxml होना चाहिए। मावेन प्रोजेक्ट में, आप इस फाइल को रिसोर्स फोल्डर में डाल सकते हैं या एफएक्सएमएलएलडियर इसे बाहरी यूआरएल से डाउनलोड कर सकते हैं।

फ़ाइल बनाने के बाद, अपनी पहली पंक्ति में XML घोषणा दर्ज करें:

 <?xml version="1.0" encoding="UTF-8"?>

आयात

इससे पहले कि आप किसी फ़ाइल में अलग-अलग घटकों को जोड़ते हैं, आपको यह सुनिश्चित करना चाहिए कि वे सही तरीके से पहचाने जाते हैं। ऐसा करने के लिए, आयात विवरण जोड़ें। यह जावा कक्षाओं में आयात करने के समान है। आप अलग-अलग वर्ग आयात कर सकते हैं या हमेशा की तरह वाइल्डकार्ड का उपयोग कर सकते हैं। आइए एक आयात अनुभाग का एक उदाहरण देखें:

 <?import java.lang.*?> <?import java.util.*?> <?import javafx.scene.*?> <?import javafx.scene.control.*?> <?import javafx.scene.layout.*?>

अच्छी खबर यह है कि सभी आयात विवरणों को मैन्युअल रूप से जोड़ने के बजाय, आपके आईडीई को आपको जावा कक्षाओं में जोड़ने जैसे आयात को जोड़ने में मदद करनी चाहिए।

घटक जोड़ना

अब कुछ घटकों को जोड़ने का समय है। पिछले लेख में, हमने सीखा कि प्रत्येक दृश्य में केवल एक बाल घटक हो सकता है। आरंभ करने के लिए, आइए एक सरल लेबल जोड़ें:

 <?xml version="1.0" encoding="UTF-8"?> <?import javafx.scene.control.Label?> <!--      --> <Label>Hello World!</Label>

बेशक, रूट घटक के रूप में लेबलिंग एक बहुत यथार्थवादी उदाहरण नहीं है। आमतौर पर कुछ प्रकार के लेआउट (लेआउट) का उपयोग करना बेहतर होता है, जो कई घटकों के लिए एक कंटेनर होता है और उनकी व्यवस्था को व्यवस्थित करता है। हम इस श्रृंखला में बाद में लेआउट को कवर करेंगे, लेकिन अभी के लिए, बस एक सरल VBox का उपयोग करें जो अपने बच्चों को एक-दूसरे के ऊपर लंबवत रूप से रखता है।

 <?xml version="1.0" encoding="UTF-8"?> <?import javafx.scene.control.Label?> <?import javafx.scene.layout.VBox?> <?import javafx.scene.control.Button?> <VBox> <Label text="Hello world!"/> <Label text="This is a simple demo application."/> <Button text="Click me!"/> </VBox>

एफएक्स नेमस्पेस

एफएक्सएमएल तत्वों और विशेषताओं के एक जोड़े हैं जो डिफ़ॉल्ट रूप से उपलब्ध नहीं हैं। आपको उन्हें उपलब्ध कराने के लिए एक Namespace FXML जोड़ना होगा। इसे मूल घटक में जोड़ा जाना चाहिए:

 <?xml version="1.0" encoding="UTF-8"?> ... <VBox xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml"> ... </VBox>

अब आप fx नाम स्थान से नए तत्वों का उपयोग कर सकते हैं। आइए हमारे घटकों में विशिष्ट पहचानकर्ता जोड़ने का प्रयास करें:

 <Label fx:id="mainTitle" text="Hello world!"/>

एफएक्स: आईडी विशेषता एक घटक के लिए एक विशिष्ट पहचानकर्ता है जिसका उपयोग हमारे एफएक्सएमएल के अन्य भागों और यहां तक कि हमारे नियंत्रक से एक घटक को संदर्भित करने के लिए किया जा सकता है।

स्क्रिप्ट

हमारा आवेदन अभी भी स्थिर है। कई लेबल और एक बटन हैं, लेकिन एप्लिकेशन कुछ भी गतिशील नहीं करता है।

चलो हमारे बटन पर क्लिक करने का जवाब दें और शीर्षक "मुझे क्लिक करें!" से बदलकर "मुझे फिर से क्लिक करें!"।

पहली बात यह है कि हमारे बटन के लिए एक ऑनएक्शन ईवेंट हैंडलर जोड़ें।

 <Button fx:id="mainButton" text="Click me!" onAction="buttonClicked()"/>

एफएक्स पर ध्यान दें: आईडी, यह पहचानकर्ता है जो बाद में बटन को संदर्भित करने के लिए उपयोग किया जाएगा।

अब आपको एक फ़ंक्शन प्रदान करने की आवश्यकता है जिसे घटना को संभालने के लिए बुलाया जाएगा। इसे एफएक्स के अंदर परिभाषित किया जा सकता है: स्क्रिप्ट टैग। महत्वपूर्ण बात यह है कि आप स्क्रिप्ट, जावास्क्रिप्ट, ग्रूवी या क्लोजर लिखने के लिए विभिन्न भाषाओं का उपयोग कर सकते हैं। आइए जावास्क्रिप्ट में एक उदाहरण देखें:

ध्यान दें कि हम अपने बटन घटक को मेनबटन पहचानकर्ता का उपयोग करके संदर्भित करते हैं, जिसे इस तरह घोषित किया गया था:

 fx:id = "mainButton"

आपको यह भी इंगित करना होगा कि एफएक्सएमएल फ़ाइल में आप किस स्क्रिप्टिंग भाषा का उपयोग करते हैं:

 <?language javascript?>

आइए उदाहरण का पूरा पाठ देखें:

क्या मुझे इसका उपयोग करना चाहिए?

उपरोक्त उदाहरण दिखाता है कि एफएक्स का उपयोग करके घटकों को कैसे संदर्भित किया जाए : आईडी और जावास्क्रिप्ट स्क्रिप्ट का उपयोग करके सरल व्यवहार कैसे जोड़ा जाए। क्या वास्तव में आपको ऐसा करना चाहिए?

इसका जवाब ज्यादातर मामलों में नहीं है। इस दृष्टिकोण के साथ कई समस्याएं हैं। FXML को शुरू करने का कारण हितों की जुदाई था - उपयोगकर्ता इंटरफ़ेस की संरचना और व्यवहार को अलग करना। इस स्क्रिप्ट में, उपयोगकर्ता इंटरफ़ेस संरचना के साथ विलय हुआ व्यवहार फिर से वापस आ गया। इसके अलावा, चूंकि अब हम जावा कोड के साथ काम नहीं करते हैं, लेकिन एक्सएमएल के साथ, संकलन समय और प्रकार की सुरक्षा के सभी कोड चेक खो गए थे। अब आवेदन में सभी समस्याओं को रनटाइम पर पता लगाया जाएगा, और संकलन समय पर नहीं। आवेदन बहुत नाजुक और त्रुटि प्रवण हो गया है।

एक नियंत्रक जोड़ना

तो हितों के स्पष्ट पृथक्करण के लिए क्या किया जा सकता है? आप कंट्रोलर को हमारी FXML फाइल से लिंक कर सकते हैं। एक नियंत्रक एक जावा वर्ग है जो एक अनुप्रयोग में व्यवहार और उपयोगकर्ता बातचीत को संभालने के लिए जिम्मेदार है। इस तरह आप टाइप सेफ्टी और कंपाइल-टाइम चेक वापस कर सकते हैं।

नियंत्रक एक POJO है, इसे किसी चीज का विस्तार या कार्यान्वयन नहीं करना चाहिए, न ही इसकी कोई विशेष व्याख्या होनी चाहिए।

मैं अपने FXML के साथ एक नियंत्रक वर्ग को कैसे जोड़ सकता हूं? अनिवार्य रूप से दो विकल्प हैं।

जावा में

आप नियंत्रक का एक उदाहरण स्वयं बना सकते हैं या उदाहरण बनाने के किसी अन्य तरीके का उपयोग कर सकते हैं, जैसे कि निर्भरता इंजेक्शन। तो बस अपने FXMLLoader डाउनलोड करें।

 FXMLLoader loader = new FXMLLoader(); loader.setController(new MainSceneController());

एफएक्सएमएल में

आप अपने नियंत्रक के वर्ग को एक विशेषता fx: नियंत्रक के रूप में निर्दिष्ट कर सकते हैं, जो रूट घटक में स्थित होना चाहिए।

 <VBox xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml" fx:controller="com.vojtechruzicka.MainSceneController"> ... </VBox>

यदि आप एफएक्सएमएल में अपने नियंत्रक वर्ग की घोषणा करते हैं, तो यह स्वचालित रूप से आपके लिए बनाया गया है। इस दृष्टिकोण में एक सीमा है - नियंत्रक में आपको तर्क के बिना एक निर्माता बनाने की जरूरत है ताकि नियंत्रक वर्ग का एक नया उदाहरण बनाना आसान हो सके।

स्वचालित रूप से बनाए गए नियंत्रक के उदाहरण तक पहुँचने के लिए, आप FXML लोडर का उपयोग कर सकते हैं:

 FXMLLoader loader = new FXMLLoader(); loader.setLocation(getClass().getResource("/mainScene.fxml")); MainSceneController controller = loader.getController();

कॉलिंग कंट्रोलर के तरीके

अब आपके पास एक नियंत्रक है, आप स्क्रिप्ट को हटा सकते हैं और नियंत्रक में सीधे बटन दबाने के लिए तर्क को लागू कर सकते हैं:

 public class MainSceneController { public void buttonClicked() { System.out.println("Button clicked!"); } }

अगला कदम इस विधि की कॉल को हमारे बटन के ऑनएक्शन ईवेंट हैंडलर के रूप में पंजीकृत करना है। हमारे नियंत्रक से विधियों को संदर्भित करने के लिए, हमें विधि नाम के सामने # चिह्न का उपयोग करने की आवश्यकता है:

 <VBox xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml" fx:controller="com.vojtechruzicka.MainSceneController"> <Label fx:id="mainTitle" text="Hello world!"/> <Label fx:id="subTitle" text="This is a simple demo application."/> <Button fx:id="mainButton" text="Click me!" onAction="#buttonClicked"/> </VBox>

जब एक बटन क्लिक किया जाता है, तो यह MainSceneController.buttonClicked () विधि को कॉल करता है। ध्यान रखें कि यह केवल तभी काम करता है जब विधि सार्वजनिक घोषित की जाती है। यदि एक्सेस संशोधक अधिक सख्त है, तो आपको @FXML एनोटेशन के साथ विधि को एनोटेट करना होगा।

 @FXML private void buttonClicked() { System.out.println("Button clicked!"); }

नियंत्रक में घटक एम्बेड करना

अब तक, हम सिर्फ कंसोल पर प्रिंट कर रहे हैं। क्या होगा अगर हम अपने बटन के टेक्स्ट को " फिर से क्लिक करें " फिर से बदलना चाहते हैं? हम अपने नियंत्रक में घटकों के लिंक कैसे प्राप्त कर सकते हैं?

सौभाग्य से, यह आसान है। इन fx याद रखें : आईडी विशेषताएँ?

 <Button fx:id="mainButton" text="Click me!" onAction="#buttonClicked"/>

JavaFX एफएक्स के साथ घटकों को स्वचालित रूप से मिलान करने का प्रयास करता है : आईडी उसी नाम के साथ आपके नियंत्रक में परिभाषित फ़ील्ड के साथ।

मान लीजिए हमारे पास ऊपर वर्णित एक बटन है

 fx:id="mainButton"

JavaFX मेनबटन नामक फ़ील्ड में अपने कंट्रोलर में बटन ऑब्जेक्ट को इंजेक्ट करने की कोशिश करता है:

 public class MainSceneController { //    fx:id = "mainButton" @FXML private Button mainButton; }

पिछले तरीकों की तरह, आपके फ़ील्ड सार्वजनिक या एनोटेट @FXML होने चाहिए।

अब हमारे पास हमारे बटन का लिंक है, हम आसानी से इसके पाठ को बदल सकते हैं:

 public class MainSceneController { @FXML private Button mainButton; @FXML private void buttonClicked() { mainButton.setText("Click me again!"); } }

दृश्य बनाने वाला

XML में आपकी GUI संरचना लिखना जावा की तुलना में अधिक स्वाभाविक हो सकता है (विशेषकर यदि आप HTML से परिचित हैं)। हालांकि, यह अभी भी बहुत सुविधाजनक नहीं है। अच्छी खबर यह है कि दृश्य बिल्डर नामक एक आधिकारिक उपकरण है जो उपयोगकर्ता इंटरफ़ेस बनाने में आपकी सहायता करेगा। संक्षेप में, यह आपके GUI के लिए एक आलेखीय संपादक है।

संपादक के तीन मुख्य क्षेत्र हैं:

बाएं भाग में उपलब्ध घटक प्रदर्शित होते हैं जिन्हें मध्य भाग में खींचा जा सकता है। इसमें आपके उपयोगकर्ता इंटरफ़ेस में सभी घटकों का एक पदानुक्रम भी शामिल है, जिससे आप इसे आसानी से नेविगेट कर सकते हैं।
मध्य भाग आपके एफएक्सएमएल फ़ाइल के आधार पर प्रदर्शित किया गया आवेदन है।
दाईं ओर वर्तमान घटक निरीक्षक है। यहां आप चयनित वर्तमान घटक के विभिन्न गुणों को संपादित कर सकते हैं। पदानुक्रम के बीच में चयनित किसी भी घटक को निरीक्षक में प्रदर्शित किया जाता है।

स्टैंडअलोन

सीन बिल्डर को एक स्टैंडअलोन एप्लिकेशन के रूप में डाउनलोड किया जा सकता है जिसका उपयोग एफएक्सएमएल फाइलों को संपादित करने के लिए किया जा सकता है।

इंटेलीज आईडिया के साथ एकीकरण

वैकल्पिक रूप से, सीन बिल्डर आईडीई के साथ एकीकरण प्रदान करता है।

IntelliJ IDEA में, आप किसी भी FXML फ़ाइल पर राइट-क्लिक कर सकते हैं और फिर SceneBuilder में ओपन मेनू विकल्प का चयन कर सकते हैं।

वैकल्पिक रूप से, इंटेलीजे आईडीईए सीधे आईडीई में सीनब्यूरील को एकीकृत करता है। यदि आप IDEA में FXML फ़ाइल खोलते हैं, तो स्क्रीन के निचले भाग में दो टैब दिखाई देंगे

टेक्स्ट
SceneBuilder

प्रत्येक एफएक्सएमएल फ़ाइल के लिए, आप आसानी से सीधे एफएक्सएमएल फ़ाइल को एडिट करने के बीच या सीनबिल्ट के माध्यम से स्विच कर सकते हैं।

इंटेलीज आईडीईए में, आप सीन्यूबल निष्पादन के स्थान को कॉन्फ़िगर कर सकते हैं:

Settings → Languages & Frameworks → JavaFX → Path to SceneBuilder

आगे क्या है

हमारी श्रृंखला की अगली पोस्ट में, हम कुछ मूल लेआउट पर चर्चा करेंगे जिनका उपयोग JavaFX में GUI एप्लिकेशन के घटकों को व्यवस्थित करने के लिए किया जा सकता है।

JavaFX ट्यूटोरियल: FXML और दृश्य