जेएसएफ में डेटा टेबल का उपयोग करना। - कोडक्लिक

शेयर करना

जेएसएफ में डेटा टेबल का उपयोग करना।

विज्ञापनों

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

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

प्रारंभ में, आइए निम्नलिखित संरचना के साथ एक JSF प्रोजेक्ट बनाएं:

जैसा कि हम देख सकते हैं, 2 जावा कक्षाएं बनाई गई हैं, एक व्यक्ति वर्ग से मेल खाती है जो हमें उन लोगों को संसाधित करने की अनुमति देती है जिन्हें हम अपनी तालिका में दिखाने जा रहे हैं और दूसरा बीन से संबंधित है जो हमें संबंधित के साथ अपनी तालिका का प्रबंधन करने की अनुमति देगा कॉलम और रिकॉर्ड.
पर्सन.जावा वर्ग हमें उस व्यक्ति का मूल डेटा प्रदान करता है जिसे हम तालिका में दिखाने जा रहे हैं, यहां हम संबंधित सेट जोड़ते हैं और विधियां प्राप्त करते हैं, साथ ही लोगों को सीधे पॉप्युलेट करने के लिए पैरामीटर के साथ एक कंस्ट्रक्टर भी प्रदान करते हैं।



TablaBean.java वर्ग तालिका और उसमें मौजूद लोगों के प्रबंधन को संदर्भित करता है, जो रिकॉर्ड प्रदर्शित किए जाते हैं उन्हें ArrayList व्यक्ति प्रकार में संग्रहीत किया जाता है, जो इस गाइड के उद्देश्य के लिए, कंस्ट्रक्टर में भरा जाता है।


Index.xhtml में हम डेटाटेबल घटक बनाते हैं जिसमें हम लोगों की सूची को सीधे मूल्य में और संबंधित कॉलम में बीन की विशेषताओं से जोड़ते हैं जो कि var = "डेटा" में संदर्भित है, डेटा वह तत्व है जो डेटा का प्रतिनिधित्व करता है तालिका से प्रत्येक पंक्ति में व्यक्ति ऑब्जेक्ट।



इसे चलाते समय हमारे पास कुछ इस तरह होगा


जैसा कि हम देख सकते हैं, जानकारी तालिका मोड में प्रस्तुत की गई है, क्योंकि हमने अभी तक सीएसएस शैलियों को लिंक नहीं किया है, हम बिना किसी प्रकार के डिज़ाइन के केवल पंक्तियों और स्तंभों में संरचना की सराहना करते हैं, हालांकि हम तालिका में "बॉर्डर" संपत्ति जोड़ सकते हैं और एक मार्जिन कुछ इस तरह है:


अंततः हम जानते हैं कि हम इसका उपयोग कर सकते हैं जानकारी को अधिक संरचित तरीके से प्रस्तुत करना।


डेटाटेबल में डेटा प्रबंधन उदाहरण।
इस अनुभाग में हम पिछले उदाहरण को जारी रखेंगे जहां हम देखेंगे कि जानकारी को पंजीकृत करने, संशोधित करने या हटाने जैसी सामान्य प्रक्रियाओं को पूरा करने के लिए तालिका डेटा में हेरफेर कैसे किया जाए।


लोगों को जोड़ें।
लोगों को पंजीकृत करने के लिए, हम अपने Index.xhtml पृष्ठ को संशोधित करेंगे जिससे हम व्यक्ति पंजीकरण फॉर्म को लिंक करेंगे। हम ग्रिड पैनल में इनपुट और चयन घटकों को "मायपर्सन" ऑब्जेक्ट से जोड़कर ऐसा करते हैं, जिस पर विभिन्न डेटा भेजे जाते हैं। हमारे सिस्टम में एक नया व्यक्ति पंजीकृत होता है।

जैसा कि हम देखते हैं कि डेटाटेबल में परिणाम प्राप्त होने से पहले ये नए तत्व जोड़े गए हैं:

इंडेक्स को संशोधित करने के बाद, आइए TableBean.java वर्ग में आवश्यक परिवर्तन करें, क्योंकि इस उदाहरण में हम डिफ़ॉल्ट स्कोप स्तर का उपयोग करना जारी रखेंगे, तो आइए लोगों की सूची को स्थिर बनाएं ताकि इसे बिना किसी समस्या के हेरफेर किया जा सके, हम अतिरिक्त रूप से करेंगे सूची पैडिंग को हटा दें क्योंकि विचार एक पंजीकरण फॉर्म के माध्यम से लोगों को पंजीकृत करने में सक्षम होना है।



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

इसके अतिरिक्त, हमने पंजीकरण डेटा को प्रबंधित करने में सक्षम होने के लिए एक व्यक्ति-प्रकार ऑब्जेक्ट जोड़ा और "एग्रेगरपर्सोना ()" विधि जोड़ी जो सूची में एक नया तत्व जोड़ने की अनुमति देती है और इसे जेएसएफ बटन से कॉल किया जाता है, बाद में हम एक नया उदाहरण उत्पन्न करते हैं “minhaPersona” ऑब्जेक्ट जो पंजीकरण फॉर्म की सफाई की अनुमति देगा।



सिस्टम चलाते समय हम निम्नलिखित व्यवहार देखेंगे:



प्रारंभ में फॉर्म खाली है और हमारी तालिका का हेडर भी प्रदर्शित होता है, लेकिन बिना किसी सामग्री के (याद रखें कि हमने सूची में भरने को हटा दिया है), ताकि जब कोई लोग पंजीकृत न हों तो हेडर दिखाई न दे, इसलिए हम "का उपयोग करते हैं" rendered" संपत्ति जहां हम सत्यापित करते हैं कि सूची की लंबाई शून्य से अधिक है, अन्यथा इसे हेडर नहीं दिखाना चाहिए। (इस संपत्ति के संचालन पर बाद में विस्तार से चर्चा की जाएगी)

जैसे ही हम लोगों को जोड़ते हैं, वे सूची में संग्रहीत हो जाते हैं और डेटाटेबल में प्रस्तुत हो जाते हैं

लोगों को बाहर करें.
अपनी सूची में लोगों को सफलतापूर्वक पंजीकृत करने के बाद, हम उन्हें इससे हटा सकते हैं, इसके लिए हम अपने डेटाटेबल में क्रियाओं का एक नया कॉलम जोड़ेंगे जिसमें "एलिमिनारपर्सन ()" विधि का एक लिंक होगा जिसे हम अपने बीन में बनाएंगे।


इसके लिए हम Index.xhtml को संशोधित करते हैं जहां कॉलम "सेक्स" के बाद हम "एक्शन" कॉलम जोड़ेंगे।


जैसा कि हम देख सकते हैं, हम एक घटक का उपयोग करते हैं और कार्रवाई में हम विधि को "eliminarPersona()" कहते हैं, जिसमें हम पैरामीटर के रूप में "डेटा" मान भेजेंगे, यह याद रखते हुए कि डेटा उस सूची के ऑब्जेक्ट के बराबर है जो एक विशिष्ट पंक्ति में प्रदर्शित किया जा रहा है।

बाद में, TablaBean.java क्लास में, हम "eliminarPersona()" विधि जोड़ते हैं जो एक पैरामीटर के रूप में उस व्यक्ति ऑब्जेक्ट को प्राप्त करता है जिसे हम हटाना चाहते हैं, यह उस "डेटा" से मेल खाता है जिसे हम jsf से भेजते हैं, और इसके बराबर है पंक्ति में वह व्यक्ति जिसे हम हटाना चाहते हैं, तो उसे सूची से हटा दें।

सिस्टम चलाते समय हमारे पास निम्नलिखित होंगे:

और हर बार जब हम संबंधित लिंक के माध्यम से कोई रिकॉर्ड हटाते हैं, तो तालिका अपडेट हो जाएगी

लोगों को संपादित करें.
हमारी सूची से लोगों को सफलतापूर्वक पंजीकृत करने और हटाने के बाद, हम उन्हें संशोधित कर सकते हैं, इसके लिए हम अपनी तालिका को संशोधित करेंगे ताकि जब हम कुछ डेटा अपडेट करना चाहें तो इसे संपादन योग्य बना सकें, इसके लिए हम "रेंडर" संपत्ति का फिर से उपयोग करेंगे जो दिखाई देगी या उपयोगकर्ता के निर्णय के आधार पर संपादन योग्य विकल्पों को छिपाएँ।


जैसा कि हम प्रत्येक कॉलम में देख सकते हैं, एक घटक जोड़ा गया है जो "रेंडर" प्रॉपर्टी के कारण डिफ़ॉल्ट रूप से छिपा रहेगा, जो संबंधित घटक को दिखाने या छिपाने के लिए सही या गलत डेटा संग्रहीत करने की अनुमति देता है।

हमारे मामले में "data.edit" एक बूलियन वैरिएबल (संपादित करें) पर कॉल करता है जिसे हमने व्यक्ति वर्ग में जोड़ा है, यदि संपत्ति सत्य है तो यह दिखाएगा संपादन की अनुमति देने के लिए, लेकिन यदि गुण सत्य असत्य (सत्य नहीं) है तो यह प्रदर्शित होगा


ऐसा ही क्रमशः पेशे, वेतन और लिंग कॉलम के लिए भी किया जाना चाहिए, जहां a जोड़ने के बजाय उत्तरार्द्ध में जोड़ा जाएगा a चूंकि फॉर्म में हम निम्नलिखित पथ के चयन कॉम्बो का उपयोग करते हैं:


इसी तरह, प्रदान की गई संपत्ति कॉम्बो दिखाने या लेबल दिखाने के लिए बाध्य है जैसा भी मामला हो।

इसके बाद, "कार्रवाइयां" कॉलम को संशोधित किया गया है, जहां पहले हमारे पास केवल "हटाएं" के लिए एक लिंक था, अब हम 2 और लिंक जोड़ देंगे, एक "संपादित करें" के लिए और दूसरा जानकारी को संपादित करने के बाद "सहेजने" के लिए।



जैसा कि हम देख सकते हैं, अब एडिट, सेव और डिलीट तरीकों के लिए क्रमशः 3 लिंक हैं, हालांकि एडिट और सेव में रेंडर प्रॉपर्टी है जो एक समय में 3 में से केवल 2 लिंक को दृश्यमान बनाती है (याद रखें कि रेंडर किए गए लिंक में सही या गलत है) स्थिति के आधार पर) इसलिए डिफ़ॉल्ट रूप से डिलीट लिंक हमेशा दिखाई देगा क्योंकि इसमें रेंडर की गई संपत्ति नहीं है, जबकि एडिट और सेव कभी भी एक साथ नहीं दिखाई देंगे। (आपको लिंक के बीच रिक्त स्थान जोड़ने की अनुमति देता है)

आंतरिक रूप से ग्राफ़िक स्तर पर, डेटाटेबल इस तरह दिखाई देगी:


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

Index.xhtml को संशोधित करने के बाद, अब पर्सन.जावा वर्ग को संशोधित करने का समय है, जिसमें ऊपर उल्लिखित रेंडरिंग द्वारा उपयोग की जाने वाली "संपादित करें" संपत्ति को जोड़ा गया है।


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

इस तरह, जब भी rendered=”#{data.edit}” Index.xhtml में किया जाता है, तो यह इस वेरिएबल को कॉल करेगा, जो मामले के आधार पर घटकों को दिखाने या छिपाने की अनुमति देगा।


अंत में, और पहले से ही पिछले परिवर्तनों के साथ, हम बीन वर्ग को संशोधित करने के लिए आगे बढ़ते हैं जहां हमें हटाने और सहेजने के लिए संबंधित तरीकों को जोड़ना होगा जिन्हें "क्रियाएं" फ़ील्ड से बुलाया जाता है।


जैसा कि हम देख सकते हैं, editPersona() विधि एक व्यक्ति ऑब्जेक्ट प्राप्त करती है (jsf कॉल से, जैसा कि यह डिलीट विधि में किया जाता है) और इसकी "संपादित करें" संपत्ति को सत्य मान भेजकर संशोधित किया जाता है, जो इस रिकॉर्ड की अनुमति देगा छुपाने के लिए और दिखाओ और यह वांछित परिवर्तन करने के लिए.

दूसरी ओर, savePersona() विधि सूची में सभी ऑब्जेक्ट्स की प्रत्येक "संपादन" संपत्ति को गलत में बदलने के लिए ज़िम्मेदार होगी ताकि डेटाटेबल को लोगों के मूल्यों के साथ पुनर्स्थापित किया जा सके न कि संपादन योग्य तत्वों के साथ।


सिस्टम चलाते समय हमारे पास निम्नलिखित होंगे:


और संपादन दबाने पर सिस्टम इसमें बदल जाता है:

जैसा कि देखा जा सकता है, जब संपादन लिंक पर क्लिक किया जाता है, तो संपादन योग्य घटक स्वचालित रूप से दिखाए जाते हैं जबकि गैर-संपादन योग्य घटक छिपे होते हैं, इसी प्रकार ऊपर बताए अनुसार सेव लिंक के लिए रास्ता बनाने के लिए संपादन लिंक गायब हो जाता है।

और तैयार!!!

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

इसके अलावा आप एक पा सकते हैं स्क्रैच से पाठ्यक्रम जहां मैं एंड्रॉइड पर मोबाइल ऐप बनाना सिखाता हूं चरण-दर-चरण वीडियो अनुक्रम के माध्यम से जो लगातार अद्यतन किया जाता है।


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


इसीलिए मैं आपको Codejavu.blogspot.com पर जाने के लिए आमंत्रित करता हूं मेरा चैनल क्रिस्टियन हेनाओ और वे नए सीक्वेल के बारे में बहुत जागरूक हैं

इसमें आपकी रुचि भी हो सकती है.

क्या आप इस प्रविष्टि के बारे में कुछ जोड़ना या टिप्पणी करना चाहते हैं? करने के लिए स्वतंत्र महसूस करें....और यदि आपको यह पसंद आया, तो मैं आपको इसे साझा करने के लिए आमंत्रित करता हूं वाई इस तरह की और पोस्ट सुनने के लिए "इस साइट से जुड़ें" बटन पर क्लिक करके सदस्यता लें 😉

सबसे ज़्यादा पढ़ा हुआ

सबसे ज्यादा देखा गया

फेसबुक
Pinterest
Linkedin