🈲 🤫 👚 JavaFX ट्यूटोरियल: बेसिक लेआउट 🐮 💐 🖖🏾

जावाएफएक्स ट्यूटोरियल का अनुवाद : वोजटेक रूजिका द्वारा मूल लेआउट लेख।

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

यह JavaFX श्रृंखला का चौथा लेख है। पिछले लेख में, मैंने वर्णन किया था कि अपने उपयोगकर्ता इंटरफ़ेस को बनाने के लिए एफएक्सएमएल और सीनब्यूलर का उपयोग कैसे करें। अब हम लेआउट को देखते हैं।

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

लेआउट

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

इसके अलावा, लेआउट आपके घटकों को भी अपने भीतर व्यवस्थित और व्यवस्थित करते हैं। उपयोग किए गए लेआउट के आधार पर, बाल घटक स्थित हो सकते हैं:

एक एक करके क्षैतिज रूप से
एक एक करके खड़ी
एक-दूसरे के ऊपर ढेर हो गए
ग्रिड में

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

HBox

यह उपलब्ध सबसे आसान मॉकअप में से एक है। यह बस सभी वस्तुओं को क्षैतिज रूप से एक पंक्ति में रखता है, एक के बाद एक, बाएं से दाएं।

FXML में, आप HBox का उपयोग इस प्रकार कर सकते हैं:

<HBox> <Button>1</Button> <Button>2</Button> <Button>3</Button> <Button>4</Button> </HBox>

जावा में, आप इस कोड का उपयोग कर सकते हैं:

 HBox hbox = new HBox(); Button btn1 = new Button("1"); Button btn2 = new Button("2"); Button btn3 = new Button("3"); Button btn4 = new Button("4"); hbox.getChildren().addAll(btn1, btn2, btn3, btn4);

रिक्ति

हमारे तत्व अब बड़े करीने से एक पंक्ति में व्यवस्थित हैं, एक के बाद एक:

हालांकि, यह विकल्प बहुत अच्छा नहीं है, क्योंकि तत्वों को एक के बाद एक अंतराल के बिना व्यवस्थित किया जाता है। सौभाग्य से, हम HBacing रिक्ति संपत्ति का उपयोग कर घटकों के बीच रिक्ति निर्धारित कर सकते हैं:

 <HBox spacing="10"> ... </HBox>

या जावा में setSpacing () का उपयोग कर:

 HBox hbox = new HBox(); hbox.setSpacing(10);

गद्दी

तत्वों को अब सही ढंग से तैनात किया गया है, हालांकि, अभी भी तत्वों और HBox के बीच कोई इंडेंटेशन नहीं है। यह हमारे HBox में पैडिंग जोड़ने में सहायक हो सकता है:

आप प्रत्येक क्षेत्र को अलग-अलग भरने के लिए निर्दिष्ट कर सकते हैं - ऊपर, नीचे, बाएं और दाएं।

 <HBox> <padding> <Insets top="10" bottom="10" left="10" right="10"/> </padding> ... </HBox>

वही जावा में किया जा सकता है:

 HBox hbox = new HBox(); hbox.setPadding(new Insets(10, 10, 10, 10));

VBox

VBox HBox के समान है, लेकिन आंतरिक घटकों को क्षैतिज रूप से एक के बाद एक प्रदर्शित करने के बजाय, यह उन्हें स्तंभ में लंबवत प्रदर्शित करता है:

आप अभी भी HBox की तरह रिक्ति और पैडिंग गुण सेट कर सकते हैं।

VBox कोड का उपयोग HBox की तरह ही किया जाता है, केवल नाम अलग है:

 <VBox spacing="10"> <padding> <Insets top="10" bottom="10" left="10" right="10"/> </padding> <Button>1</Button> <Button>2</Button> <Button>3</Button> <Button>4</Button> </VBox>

और जावा में:

 VBox vbox = new VBox(); vbox.setPadding(new Insets(10, 10, 10, 10)); vbox.setSpacing(10); Button btn1 = new Button("1"); Button btn2 = new Button("2"); Button btn3 = new Button("3"); Button btn4 = new Button("4"); vbox.getChildren().addAll(btn1, btn2, btn3, btn4);

StackPane

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

यह उपयोगी हो सकता है, उदाहरण के लिए, लेआउट में एक तस्वीर दिखाने और उसके ऊपर कुछ पाठ या बटन प्रदर्शित करने के लिए।

निम्नलिखित उदाहरण FXML में StackPane का उपयोग करता है:

 <StackPane> <ImageView> <Image url="/image.jpg"/> </ImageView> <Button>Click Me!</Button> </StackPane>

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

 StackPane stackPane = new StackPane(); Image image = new Image(getClass().getResourceAsStream("/image.jpg")); ImageView imageView = new ImageView(image); Button btn = new Button("Click Me!"); stackPane.getChildren().addAll(imageView, btn);

तत्वों को संरेखित करें

आप उनकी व्यवस्था को बेहतर ढंग से व्यवस्थित करने के लिए स्टैक पर तत्वों के संरेखण को सेट कर सकते हैं:

 <StackPane alignment="BOTTOM_CENTER"> ... </StackPane>

बेशक आप जावा में भी ऐसा कर सकते हैं:

 StackPane stackPane = new StackPane(); stackPane.setAlignment(Pos.BOTTOM_CENTER);

हाशिया

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

 <StackPane alignment="BOTTOM_CENTER"> <ImageView> <Image url="/image.jpg"/> </ImageView> <Button> <StackPane.margin> <Insets bottom="10"/> </StackPane.margin> Click Me! </Button> </StackPane>

या जावा में:

 StackPane stackPane = new StackPane(); Button btn = new Button("Click Me!"); stackPane.getChildren().add(btn); StackPane.setMargin(btn, new Insets(0,0,10,0));

FlowPane

फ़्लो पैनल दो मोड में काम कर सकता है - क्षैतिज (डिफ़ॉल्ट) या वर्टिकल।

क्षैतिज मोड में, आइटम क्षैतिज रूप से प्रदर्शित किए जाते हैं, एक के बाद एक, जैसे HBox में। अंतर यह है कि जब अधिक क्षैतिज स्थान नहीं होता है, तो इसे पहली पंक्ति के तहत अगली पंक्ति में स्थानांतरित किया जाता है और फिर से जारी रहता है। इस प्रकार, कई लाइनें हो सकती हैं, और सिर्फ एक ही नहीं, जैसा कि HBox में है।

वर्टिकल मोड बहुत समान है, लेकिन (VBox की तरह) यह ऊपर से नीचे तक लंबवत रूप से तत्वों को प्रदर्शित करता है। जब अधिक जगह नहीं होती है, तो वह एक और कॉलम जोड़ता है और जारी रखता है।

निम्नलिखित आंकड़ा इन दो तरीकों को दिखाता है:

ध्यान दें कि तत्वों को ऊपर की छवि के समान आकार का नहीं होना चाहिए।

ध्यान दें कि यदि आप कंटेनर का आकार बदलते हैं तो घटकों की स्थिति कैसे पुनर्गठित होती है:

आप इस लेआउट के आंतरिक भराव को उसी तरह से सेट कर सकते हैं जैसे HBox और VBox के लिए। हालांकि, रिक्ति संपत्ति का उपयोग थोड़ा अलग है। रिक्ति के लिए एक एकल संपत्ति के बजाय, आपको अलग-अलग क्षैतिज और ऊर्ध्वाधर रिक्ति गुण रखने की आवश्यकता है, क्योंकि तत्वों को कई पंक्तियों / स्तंभों में प्रदर्शित किया जा सकता है। क्षैतिज रिक्ति गुण के लिए hgap का उपयोग करें और ऊर्ध्वाधर गुण के लिए vgap ।

 FlowPane flowPane = new FlowPane(); flowPane.setOrientation(Orientation.VERTICAL); flowPane.setVgap(10); flowPane.setHgap(10); flowPane.getChildren().addAll(...);

एफएक्सएमएल में फ्लोपेन उदाहरण:

 <FlowPane hgap="10" vgap="10" orientation="VERTICAL"> ... </FlowPane>

TilePane

यह लेआउट FlowPane के समान है। घटकों को प्रदर्शित करने का इसका तरीका लगभग समान है। आप अभी भी क्षैतिज या ऊर्ध्वाधर मोड का उपयोग कर सकते हैं और vgap और hgap को परिभाषित कर सकते हैं।

एक महत्वपूर्ण अंतर कोशिकाओं के आकार का है। फ़्लोपैन केवल प्रत्येक घटक के लिए आवश्यक स्थान प्रदान करता है। दूसरी ओर, टाइलपैन सबसे बड़े तत्व के आधार पर सभी कोशिकाओं के आकार को समान बनाता है। इस प्रकार, सभी नियंत्रण पंक्तियों / स्तंभों में अच्छी तरह से संरेखित होते हैं।

ऊपर की छवि में, समान घटकों को समान तरीके से रखा गया है, लेकिन आप अंतर को आसानी से देख सकते हैं।

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

टाइलपैन का निर्माण नाम के अलावा, फ्लोपेन से अलग नहीं है।

 <TilePane vgap="10" hgap="10" orientation="VERTICAL" >

जावा में एक ही बात:

 TilePane tilePane = new TilePane(); tilePane.setVgap(10); tilePane.setHgap(10); tilePane.setOrientation(Orientation.VERTICAL);

आगे क्या है

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

JavaFX ट्यूटोरियल: बेसिक लेआउट