JavaFX ट्यूटोरियल: उन्नत लेआउट

उन्नत लेआउट का उपयोग करके JavaFX एप्लिकेशन में GUI घटकों को व्यवस्थित और व्यवस्थित कैसे करें।

पिछले लेख में, हमने कुछ बुनियादी JavaFX लेआउटों को देखा। अब बाकी उपलब्ध लेआउट पर विचार करने का समय है।

1. JavaFX ट्यूटोरियल: आरंभ करना
2. JavaFX ट्यूटोरियल: नमस्कार दुनिया!
3. JavaFX ट्यूटोरियल: FXML और दृश्य
4. JavaFX ट्यूटोरियल: बेसिक लेआउट
5. JavaFX ट्यूटोरियल: उन्नत लेआउट
6. JavaFX ट्यूटोरियल: सीएसएस स्टाइल
7. JavaFX वीवर: JavaFX और स्प्रिंग बूट एप्लिकेशन को एकीकृत करता है

AnchorPane

AnchorPane एक दिलचस्प और शक्तिशाली लेआउट है। यह आपको लेआउट के भीतर घटकों को एंकर पॉइंट्स (एंकर) को परिभाषित करने की अनुमति देता है। 4 प्रकार के लंगर हैं:

• शीर्ष (ऊपर)
• नीचे (नीचे)
• बाएं (बाएं)
• सही (दाएं)

प्रत्येक घटक में एंकरों का कोई संयोजन हो सकता है। शून्य से लेकर चारों तक।

एक घटक को लंगर करने का मतलब है कि यह लेआउट के एक निश्चित किनारे से एक निश्चित दूरी रखता है (उदाहरण के लिए, टीओपी)। लेआउट के आकार बदलने पर भी यह दूरी बनी रहती है।

उदाहरण के लिए: एंकर राइट = 10 का अर्थ है कि घटक लेआउट के दाहिने किनारे से 10 की दूरी रखेगा।

आप दो एंकर बिंदु निर्दिष्ट कर सकते हैं जो आपके घटक को लेआउट के एक विशिष्ट कोने में स्नैप करने के लिए विपरीत दिशाओं में नहीं हैं।

बाध्यकारी TOP = 10 , RIGHT = 10 का अर्थ है कि घटक दोनों किनारों से 10 की दूरी पर लेआउट के ऊपरी दाएं कोने में रहेगा।



उपरोक्त उदाहरण में, विंडो के आकार बदलने पर प्रत्येक घटक का आकार अपरिवर्तित रहता है। हालाँकि, यदि आप विपरीत दिशाओं में लंगर बिंदुओं को परिभाषित करते हैं, तो आप विंडो के आकार बदलने पर अपने घटक को बढ़ा / घटा सकते हैं।



आप विभिन्न बाध्यकारी संयोजनों का उपयोग कर सकते हैं, उदाहरण के लिए:

• LEFT + RIGHT क्षैतिज रूप से आकार बदलता है
• शीर्ष + बॉटम लंबवत आकार बदलता है
• सभी 4 एंकरों को निर्दिष्ट करने का अर्थ है घटक के क्षैतिज और ऊर्ध्वाधर दोनों आकार

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

<AnchorPane> <Button AnchorPane.topAnchor="10" AnchorPane.leftAnchor="10" AnchorPane.rightAnchor="10" AnchorPane.bottomAnchor="10">I am fully anchored!</Button> </AnchorPane> 

अब देखते हैं कि जावा में बाध्यकारी कैसे लागू किया जाता है:

 AnchorPane anchorPane = new AnchorPane(); Button button = new Button("I am fully anchored!"); AnchorPane.setTopAnchor(button, 10d); AnchorPane.setBottomAnchor(button, 10d); AnchorPane.setLeftAnchor(button, 10d); AnchorPane.setRightAnchor(button, 10d); anchorPane.getChildren().add(button); 

GridPane

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

 <GridPane hgap="10" vgap="10"> <Label GridPane.rowIndex="0" GridPane.columnIndex="0">First</Label> ... </GridPane> 

जावा में, एक नया घटक जोड़ते समय, हम पहले ColumnIndex (x) पैरामीटर और फिर RowIndex (y) निर्दिष्ट करते हैं।

  GridPane grid = new GridPane(); grid.add(new Label("Hello!"), columnIndex, rowIndex); 

रिक्ति

डिफ़ॉल्ट रूप से, तालिका कोशिकाओं का कोई स्थान नहीं है। घटक एक-दूसरे के बगल में हैं, अंतराल के बिना। अंतराल को पंक्तियों और स्तंभों के लिए अलग-अलग परिभाषित किया जा सकता है, अर्थात् क्षैतिज और लंबवत।

• hgap क्षैतिज रिक्ति (कॉलम के बीच) सेट करता है
• vgap ऊर्ध्वाधर रिक्ति (पंक्तियों के बीच) सेट करता है

 <GridPane hgap="10" vgap="10"> ... </GridPane> 

जावा में परिभाषित अंतर:

 GridPane grid = new GridPane(); grid.setHgap(10); grid.setVgap(10); 

कई कोशिकाओं के लिए रिक्ति

GridPane में घटक कई पंक्तियों और / या स्तंभों को फैला सकते हैं। Rowspan के साथ घटक अपने मूल सेल से नीचे तक फैली हुई है। कोलस्पैन घटक दाईं ओर फैलता है।


Java में, rowSpan और columnSpan सेट करने के दो तरीके हैं। तालिका में एक घटक जोड़ते समय आप उन्हें सीधे स्थापित कर सकते हैं:

 grid.add(component, columnIndex, rowIndex, columnSpan, rowSpan); 

या ग्रिडपेन के माध्यम से:

 GridPane.setColumnSpan(component, columnSpan); GridPane.setRowSpan(component, rowSpan); 

आकार (आकार)

हालांकि मूल उदाहरण में सभी कोशिकाएं एक ही आकार की थीं, लेकिन ऐसा होना जरूरी नहीं है। तालिका सेल आकार निम्नानुसार परिभाषित किए गए हैं:

• प्रत्येक पंक्ति की ऊंचाई पंक्ति में सबसे बड़ा तत्व है
• प्रत्येक कॉलम की चौड़ाई कॉलम के सबसे चौड़े तत्व के बराबर होती है

स्तंभ और पंक्ति की कमी

जैसा कि पहले ही उल्लेख किया गया है, डिफ़ॉल्ट रूप से, स्तंभ और पंक्ति आकार पैनल के भीतर घटकों पर आधारित होते हैं। सौभाग्य से, व्यक्तिगत कॉलम और पंक्तियों के आकार को बेहतर ढंग से नियंत्रित करना संभव है।

इसके लिए, ColumnContstraints और RowConstraints वर्गों का उपयोग किया जाता है।

वास्तव में, आपके पास दो विकल्प हैं। या तो व्यक्तिगत पंक्तियों और स्तंभों के लिए उपलब्ध स्थान का प्रतिशत निर्धारित करें, या पसंदीदा चौड़ाई / ऊंचाई निर्धारित करें। बाद के मामले में, आप कॉलम और पंक्तियों का आकार बदलने पर पसंदीदा व्यवहार भी निर्धारित कर सकते हैं।

का प्रतिशत

यह बहुत सरल है। आप उपलब्ध स्थान का प्रतिशत निर्धारित कर सकते हैं जो किसी पंक्ति या स्तंभ द्वारा कब्जा कर लिया जाएगा। जब आप लेआउट का आकार बदलते हैं, तो नए आकार को दर्शाने के लिए पंक्तियाँ और कॉलम भी बदल जाते हैं।

 <GridPane> <columnConstraints> <ColumnConstraints percentWidth="50" /> <ColumnConstraints percentWidth="50" /> </columnConstraints> <rowConstraints> <RowConstraints percentHeight="50" /> <RowConstraints percentHeight="50" /> </rowConstraints> ... </GridPane> 

जावा में एक ही उदाहरण:

 GridPane gridPane = new GridPane(); ColumnConstraints col1 = new ColumnConstraints(); col1.setPercentWidth(50); ColumnConstraints col2 = new ColumnConstraints(); col2.setPercentWidth(50); gridPane.getColumnConstraints().addAll(col1, col2); RowConstraints row1 = new RowConstraints(); row1.setPercentHeight(50); RowConstraints row2 = new RowConstraints(); row2.setPercentHeight(50); gridPane.getRowConstraints().addAll(row1, row2); 

पूर्ण आकार

आकार को प्रतिशत के रूप में निर्धारित करने के बजाय, आप पसंदीदा और न्यूनतम आकार निर्धारित कर सकते हैं। इसके अलावा, आप निर्दिष्ट कर सकते हैं कि लेआउट के आकार बदलने पर पंक्ति / स्तंभ को कैसे व्यवहार करना चाहिए। कॉलम hgrow प्रॉपर्टी का उपयोग करते हैं, और पंक्तियों में vgrow प्रॉपर्टी होती है।

इन गुणों के तीन अलग-अलग अर्थ हो सकते हैं।

• कभी नहीं : लेआउट के आकार बदलने पर कभी बढ़ता या घटता है। डिफ़ॉल्ट मान।
• ALWAYS : ALWAYS: जब आप लेआउट का आकार बदलते हैं, तो इस मान वाली सभी वस्तुएँ या तो उपलब्ध स्थान, या श्रग को भरने के लिए खिंच जाती हैं।
• SOMETIMES (SOMETIMES): इन तत्वों का आकार केवल तभी बदलता है जब कोई अन्य तत्व न हों।

 <GridPane> <columnConstraints> <ColumnConstraints minWidth="50" prefWidth="100" /> <ColumnConstraints minWidth="50" prefWidth="100" hgrow="SOMETIMES" /> </columnConstraints> <rowConstraints> <RowConstraints minHeight="50" prefHeight="100" /> <RowConstraints minHeight="50" prefHeight="100" vgrow="SOMETIMES" /> </rowConstraints> ... </GridPane> 

जावा में एक ही उदाहरण:

  GridPane gridPane = new GridPane(); ColumnConstraints col1 = new ColumnConstraints(); col1.setMinWidth(50); col1.setPrefWidth(100); ColumnConstraints col2 = new ColumnConstraints(); col2.setMinWidth(50); col2.setPrefWidth(100); col2.setHgrow(Priority.SOMETIMES); gridPane.getColumnConstraints().addAll(col1, col2); RowConstraints row1 = new RowConstraints(); row1.setMinHeight(50); row1.setPrefHeight(100); RowConstraints row2 = new RowConstraints(); row2.setMinHeight(50); row2.setPrefHeight(100); row2.setVgrow(Priority.SOMETIMES); gridPane.getRowConstraints().addAll(row1, row2); 

आप अलग-अलग पंक्तियों और स्तंभों के लिए मैक्सहाइट और मैक्सविड पैरामीटर (अधिकतम ऊंचाई और रेखा) भी निर्दिष्ट कर सकते हैं।

BorderPane

बॉर्डरपैन एक पांच-खंड लेआउट है:

• शीर्ष (शीर्ष)
• नीचे (नीचे)
• राइट (दाएं)
• वाम (बाएं)
• केंद्र (केंद्र)

आप अलग-अलग सीमा वर्गों के लिए घटक असाइन कर सकते हैं:

 <BorderPane> <top> <Label>TOP</Label> </top> <bottom> <Label>BOTTOM</Label> </bottom> <left> <Label>LEFT</Label> </left> <right> <Label>RIGHT</Label> </right> <center> <Label>CENTER</Label> </center> </BorderPane> 

अब जावा में एक ही उदाहरण:

 Label top = new Label("TOP"); Label bottom = new Label("BOTTOM"); Label left = new Label("LEFT"); Label right = new Label("RIGHT"); Label center = new Label("CENTER"); BorderPane borderPane = new BorderPane(); borderPane.setTop(top); borderPane.setBottom(bottom); borderPane.setLeft(left); borderPane.setRight(right); borderPane.setCenter(center); 

आकार (आकार)

केंद्रीय ( केंद्र ) को छोड़कर सभी क्षेत्रों का एक निश्चित आकार होता है। केंद्र फिर बाकी जगह को भरता है।

ऊपरी ( शीर्ष ) और निचले ( निचला ) क्षेत्र पूरे उपलब्ध क्षैतिज स्थान पर खिंचाव करते हैं। उनकी ऊंचाई घटक की ऊंचाई पर निर्भर करती है।

बाएं और दाएं सभी उपलब्ध ऊर्ध्वाधर स्थान भरें (सिवाय इसके कि वे ऊपर और नीचे कब्जा करते हैं)। उनकी चौड़ाई घटक की चौड़ाई पर निर्भर करती है।

केंद्र आकार में गतिशील है और बाकी हिस्सों को अन्य वर्गों के कब्जे में नहीं भरता है। आइए एक उदाहरण देखें:

आगे क्या है

अब जब हम जानते हैं कि विभिन्न लेआउट का उपयोग कैसे करना है, तो हम CSS के साथ JavaFX घटकों को कैसे शैली में देखते हैं।