एक सरल जावा ग्राफिकल यूजर इंटरफेस कोडिंग

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

कक्षा।

आप अपने GUI डिज़ाइन में किसी भी लेयर को जोड़ सकते हैं, जो इसकी जटिलता पर निर्भर करता है। आप सीधे ग्राफिकल घटकों (जैसे, टेक्स्ट बॉक्स, लेबल, बटन) को अंदर रख सकते हैं

, या आप उन्हें अन्य कंटेनरों में समूहित कर सकते हैं।

जीयूआई की परतों को कंस्ट्रक्शन पदानुक्रम के रूप में जाना जाता है और इसे एक परिवार के पेड़ के रूप में माना जा सकता है। अगर द

दादाजी शीर्ष पर बैठे हैं, तो अगले कंटेनर को पिता के रूप में और घटकों को बच्चों के रूप में माना जा सकता है।

इस उदाहरण के लिए, हम एक के साथ एक जीयूआई का निर्माण करेंगे

दो युक्त

और एक

. सबसे पहला

धारण करेगा

तथा

. द्वितीय

instagram viewer

धारण करेगा

और एक

. केवल एक

(और इसलिए इसमें शामिल चित्रमय घटक) एक समय में दिखाई देंगे। बटन का उपयोग दो की दृश्यता को स्विच करने के लिए किया जाएगा

.

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

GUI बनाने के लिए स्विंग के बजाय JavaFX का उपयोग करने के बारे में जानकारी के लिए, देखें JavaFX क्या है?

ध्यान दें: इस परियोजना के लिए पूरा कोड है उदाहरण के लिए एक सरल जीयूआई अनुप्रयोग बिल्डिंग के लिए जावा कोड.

नेटबीन्स परियोजना की स्थापना

कोई नया बनाएं जावा एक मुख्य वर्ग के साथ NetBeans में एप्लिकेशन प्रोजेक्ट हम प्रोजेक्ट को कॉल करेंगे

चेक प्वाइंट: NetBeans के प्रोजेक्ट विंडो में एक शीर्ष-स्तरीय GuiApp1 फ़ोल्डर होना चाहिए (यदि नाम बोल्ड में नहीं है, तो फ़ोल्डर पर राइट-क्लिक करें और चुनें

). के नीचे

फ़ोल्डर स्रोत पैकेज फ़ोल्डर होना चाहिए

GuiApp1 कहा जाता है। इस फ़ोल्डर में मुख्य वर्ग कहा जाता है

।जावा।

इससे पहले कि हम कोई जावा कोड जोड़ते हैं, निम्नलिखित आयातों को शीर्ष पर जोड़ दें

वर्ग, के बीच

लाइन और

:

इन आयातों का मतलब है कि हमें इस GUI एप्लिकेशन को बनाने के लिए सभी वर्गों का उपयोग करने के लिए उपलब्ध होगा।

मुख्य विधि के भीतर, कोड की यह पंक्ति जोड़ें:

इसका मतलब यह है कि पहली बात यह है कि एक नया बनाना है

वस्तु। यह उदाहरण कार्यक्रमों के लिए एक अच्छा शॉर्ट-कट है, क्योंकि हमें केवल एक वर्ग की आवश्यकता है। इस काम के लिए, हमें एक निर्माता की आवश्यकता है

कक्षा, इसलिए एक नई विधि जोड़ें:

इस पद्धति में, हम GUI बनाने के लिए आवश्यक सभी जावा कोड डालेंगे, जिसका अर्थ है कि अब से हर पंक्ति अंदर होगी

तरीका।

डिजाइन नोट: आपने जावा कोड प्रकाशित देखा होगा जो कक्षा दिखाता है (यानी,

) से बढ़ाया गया

. इस वर्ग को एक अनुप्रयोग के लिए मुख्य GUI विंडो के रूप में उपयोग किया जाता है। सामान्य GUI एप्लिकेशन के लिए वास्तव में ऐसा करने की कोई आवश्यकता नहीं है। केवल समय आप को विस्तारित करना चाहते हैं

वर्ग है अगर आपको अधिक विशिष्ट प्रकार का बनाने की आवश्यकता है

(पर एक नज़र डालें

एक उपवर्ग बनाने के बारे में अधिक जानकारी के लिए)।

जैसा कि पहले उल्लेख किया गया है, की पहली परत जीयूआई एक अनुप्रयोग विंडो एक से बनाया गया है

. बनाने के लिए

वस्तु, पुकार

निर्माता:

अगला, हम इन चार चरणों का उपयोग करके अपने GUI एप्लिकेशन विंडो के व्यवहार को सेट करेंगे:

1. सुनिश्चित करें कि उपयोगकर्ता द्वारा विंडो बंद करने पर एप्लिकेशन बंद हो जाता है, ताकि वह पृष्ठभूमि में अज्ञात चलना जारी न रखे:

2. खिड़की के लिए एक शीर्षक सेट करें ताकि खिड़की में खाली शीर्षक पट्टी न हो। इस पंक्ति को जोड़ें:

3. विंडो का आकार सेट करें, ताकि आपके द्वारा इसमें लगाए गए ग्राफ़िकल घटकों को समायोजित करने के लिए विंडो का आकार हो।

डिजाइन नोट: विंडो का आकार सेट करने के लिए एक वैकल्पिक विकल्प कॉल करना है

की विधि

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

तरीका।

4. कंप्यूटर स्क्रीन के मध्य में प्रदर्शित होने के लिए विंडो को केंद्र में रखें ताकि यह स्क्रीन के ऊपरी बाएं कोने में दिखाई न दे:

दो JPanels जोड़ना

यहां दो लाइनें बनती हैं मान के लिए

तथा

वस्तुओं का उपयोग हम जल्द ही करेंगे, दो का उपयोग करके

सरणियों। इससे उन घटकों के लिए कुछ उदाहरण प्रविष्टियों को पॉप्युलेट करना आसान हो जाता है:

पहला JPanel ऑब्जेक्ट बनाएँ

अब, पहले बनाते हैं

वस्तु। इसमें ए शामिल होगा

और एक

. इन तीनों को उनके निर्माण के तरीकों से बनाया गया है:

उपरोक्त तीन पंक्तियों पर नोट्स:

  • JPanel
    चर घोषित किया जाता है अंतिम. इसका मतलब है कि चर केवल पकड़ कर सकते हैं
    JPanel
    इस पंक्ति में बनाया गया है। परिणाम यह है कि हम एक आंतरिक वर्ग में चर का उपयोग कर सकते हैं। यह स्पष्ट हो जाएगा कि हम बाद में कोड में क्यों चाहते हैं।
  • JLabel
    तथा
    JComboBox
    उनके चित्रमय गुणों को निर्धारित करने के लिए उनके पास मान हैं। लेबल "फल:" के रूप में दिखाई देगा और कॉम्बोबॉक्स में अब निहित मूल्य होंगे
    fruitOptions
    पहले घोषित किया गया ऐरे।
  • (जोड़ें)
    की विधि
    JPanel
    इसमें चित्रमय घटक रखता है। ए
    JPanel
    अपने डिफ़ॉल्ट के रूप में FlowLayout का उपयोग करता है लेआउट प्रबंधक. यह इस एप्लिकेशन के लिए ठीक है क्योंकि हम चाहते हैं कि लेबल कॉम्बोक्स के बगल में बैठे। जब तक हम जोड़ते हैं
    JLabel
    पहले, यह ठीक लगेगा:

दूसरा JPanel ऑब्जेक्ट बनाएँ

द्वितीय

उसी पैटर्न का अनुसरण करता है। हम एक जोड़ देंगे

और एक

और उन घटकों के मूल्यों को "सब्जियां:" और दूसरा होना चाहिए

सरणी

. केवल अन्य अंतर का उपयोग है

छिपाने की विधि

. मत भूलना वहाँ एक हो जाएगा

दोनों की दृश्यता को नियंत्रित करना

. इस काम के लिए, किसी को शुरुआत में अदृश्य होना चाहिए। दूसरे को सेट करने के लिए इन पंक्तियों को जोड़ें

:

उपरोक्त कोड में एक पंक्ति ध्यान देने योग्य है

की विधि

.

मूल्य सूची को उन वस्तुओं को प्रदर्शित करता है जिनमें दो कॉलम होते हैं। इसे "समाचार पत्र शैली" कहा जाता है और यह एक पारंपरिक पारंपरिक स्तंभ के बजाय वस्तुओं की सूची प्रदर्शित करने का एक अच्छा तरीका है।

फिनिशिंग टच जोड़ना

आवश्यक अंतिम घटक है

की दृश्यता को नियंत्रित करने के लिए

रों। में मान पास हुआ

निर्माता बटन का लेबल सेट करता है:

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

एक ईवेंट श्रोता अनुप्रयोग को बताता है कि ईवेंट होने पर क्या करना चाहिए।

उपयोगकर्ता द्वारा एक बटन क्लिक करने के लिए ActionListener वर्ग का उपयोग "सुनने" के लिए।

ईवेंट श्रोता बनाएँ

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

यह डरावना कोड की तरह लग सकता है, लेकिन आपको यह देखने के लिए इसे तोड़ना होगा:

  • सबसे पहले, हम कहते हैं
    addActionListener
    की विधि
    JButton
    . इस विधि से एक उदाहरण की उम्मीद है
    ActionListener
    वर्ग, वह वर्ग जो घटना को सुनता है।
  • अगला, हम का उदाहरण बनाते हैं
    ActionListener
    वर्ग का उपयोग करके एक नई वस्तु घोषित करके
    नया एक्शनलिस्ट ()
    और फिर एक अनाम आंतरिक वर्ग प्रदान करना - जो घुंघराले कोष्ठक के अंदर सभी कोड है।
  • अनाम आंतरिक वर्ग के अंदर, नामक एक विधि जोड़ें
    कार्य पूरा हुआ()
    . यह वह विधि है जिसे बटन क्लिक करने पर कहा जाता है। इस पद्धति में आवश्यक सभी का उपयोग करना है
    setVisible ()
    की दृश्यता को बदलने के लिए
    JPanel
    रों।

JPFels को JFrame में जोड़ें

अंत में, हमें दोनों को जोड़ना होगा

रेत

को

. डिफ़ॉल्ट रूप से, ए

BorderLayout लेआउट प्रबंधक का उपयोग करता है। इसका मतलब है कि पाँच क्षेत्र (तीन पंक्तियों के पार) हैं

इसमें एक ग्राफिकल घटक (NORTH, {WEST, CENTER, EAST}, SOUTH) हो सकता है। का उपयोग करके इस क्षेत्र को निर्दिष्ट करें

तरीका:

दृश्यमान होने के लिए JFrame सेट करें

अंत में, उपरोक्त सभी कोड कुछ भी नहीं होगा अगर हम सेट नहीं करते हैं

दिखाई देना:

अब हम अनुप्रयोग विंडो प्रदर्शित करने के लिए NetBeans प्रोजेक्ट को चलाने के लिए तैयार हैं। बटन पर क्लिक करने से कॉम्बोक्स या सूची दिखाने के बीच स्विच हो जाएगा।

instagram story viewer