Netbeans/C2/Designing-GUI-for-Sample-Java-Application/Hindi

From Script | Spoken-Tutorial
Revision as of 15:56, 18 February 2015 by Shruti arya (Talk | contribs)

Jump to: navigation, search
Time Narration
00:01 नमस्कार दोस्तों।
00:02 Netbeans का उपयोग करके GUIs के निर्माण पर ट्यूटोरियल में स्वागत है।
00:06 इस ट्यूटोरियल में, हम Netbeans की सबसे आकर्षक सुविधाओं में से एक को देखेंगे, जो इसका GUI निर्माता है।
00:13 GUI के निर्माण के लिए Netbeans क्या प्रदान करता है?
00:16 यह आपको प्रदान करता है, जो आपने अपने GUI को बनाते समय देखा।
00:21 इसके अलावा यह आपको, आपके लेआउट को बनाने के लिए, कंपोनेंट्स को खींचने और रखने के लिए एक आसान इंटरफेस देता है।
00:27 यह कंपोनेंट Palette के साथ आता है,, जिसमें पूर्व संस्थापित AWT और स्विंग कंपोनेंट्स हैं।
00:33 हम बस कुछ ही मिनटों में पूर्ण GUI एप्लिकेशन का निर्माण करने के लिए इस शक्तिशाली visual एडिटर का उपयोग करेंगे।
00:39 इसके लिए मैं एक सिस्टम का उपयोग कर रही हूँ जिसमें हैं
00:43 लिनक्स ऑपरेटिंग सिस्टम ऊबुंटू वर्जन 11.04
00:46 और Netbeans IDE वर्जन 7.1.1
00:50 संस्थापन और आवश्यकताओं पर अधिक जानकारी के लिए, कृपया पिछले ट्यूटोरियल को देखें।
00:56 इस ट्यूटोरियल में हम सीखेंगे...
00:58 फॉर्म एडिटर उपयोग करना
01:00 सोर्स एडिटर
01:02 पैलेट, इंस्पेक्टर, और प्रॉपर्टीज विशेषताएँ
01:05 event handlers (घटना संचालकों) को जोड़ना।
01:07 और अपने एप्लिकेशन को कंपाइल औऱ रन करना भी।
01:10 शुरू करते हैं, और इस ट्यूटोरियल में एक साधारण Account balance एप्लिकेशन बनाते हैं।
01:15 इस एप्लिकेशन के लिए हमें सक्षम होना चाहिए,
01:18 खाते में क्रेडिट हुई राशि को इनपुट करने में।
01:21 राशि को खाते से डेबिट करने में।
01:24 और अंतिम शेषराशि की गणना करने में।
01:26 हम अपने एप्लिकेशन को अधिक आकर्षक बनाने के लिए तस्वीर भी जोड़ेंगे।
01:31 आसान और तेज़ नेविगेशन के लिए ऊपर मेन्यू बार भी जोड़ेंगे।
01:35 अब netbeans पर जाएँ और नए प्रोजेक्ट बनाने के साथ शुरू करें।
01:40 File मेन्यू से New Project > चुनें और Java Application चुनें, फिर Next.
01:49 और अपने प्रोजेक्ट को नाम दें।
01:51 मैं अपने प्रोजेक्ट को Account balance दूँगी।
01:58 मेन क्लास न बनाएँ लेकिन इसे मेन प्रोजेक्ट के रूप में सेट करें।
02:02 Finish पर क्लिक करें,' जो आपके IDE में नया प्रोजेक्ट बनाना चाहिए।
02:07 अब File menu में File पर जाएँ और New File चुनें।
02:15 Categories से Swing GUI फॉर्म चुनें
02:18 और File Type के अंदर Jframe Form चुनें।
02:21 Next क्लिक करें।
02:24 मैं इसे AccountBalance कहूँगी।
02:29 लेकिन आप इसे अपने इच्छानुसार नाम दे सकते हैं।
02:33 एक बार आप Finish पर क्लिक करते हैं, तो यह आपको मुख्य डिजाइन क्षेत्र में ले जाता है।
02:39 GUI निर्माता के साथ परिचित होते हैं।
02:43 यहाँ राइट पर palette है।
02:45 इसमें पूर्व संस्थापित स्विंग और AWT कंपोनेंट्स शामिल हैं।
02:49 यहाँ palette के नीचे Properties विंडो है।
02:53 यह आपको, आपके द्वारा चुने हुए कंपोनेंट्स के प्रॉपर्टीज को दर्शाता है ।
02:58 यहाँ बाईं तरफ navigator या inspector है।
03:01 जो आपको वह कंपोनेंट्स दिखाता है, जो फ्रेम में जोड़े गये हैं।
03:05 यहाँ वर्कस्पेस पर डिजाइन मोड में
03:08 यहाँ ऊपर Source बटन है।
03:11 जब आप इस पर क्लिक करते हैं, यह आपको सोर्स कोड पर ले जाता है।
03:15 जैसे आप डिजाइन करने के लिए कंपोनेंट्स को जोड़ेंगे,
03:18 यह समरुपी सोर्स कोड लेता है और इसे यहाँ सोर्स के लिए जोडता है।
03:23 Design मोड पर वापस जाएँ और देखें कि आज हम किन कंपोनेंट्स का उपयोग करेंगे।
03:28 हमारे एप्लिकेशन बनाने के लिए
03:31 हम palette से कुछ कंपोनेंट्स का उपयोग करेंगे, जैसे Buttons, Labels, Panels, Tabbed pane आदि ।
03:38 अब Palette से swing Containers के अंदर TabbedPane चुनें।
03:45 Tabbed Pane चुनें और form पर क्लिक करें।
03:50 यह आपको एक Tabbed frame देना चाहिए। आप इसका अपने माउस से आकार परिवर्तित कर सकते हैं।
03:58 अब Palette पर वापस जाएँ और Panel चुनें।
04:02 और फिर से अपने फ्रेम पर क्लिक करें।
04:06 यह आपको एक टैब देना चाहिए।
04:09 वापस जाएँ औऱ अन्य Panel चुनें। और फिर से form पर क्लिक करें।
04:14 वह आपको कुल 2 टेब्स देगा।
04:17 अब आप टेब पर डबल क्लिक करके या टेब पर राइट क्लिक करके और Edit Text ऑप्शन चुनकर टेब का नाम बदल सकते हैं।
04:29 मैं Image के रूप में पहले टेब को कॉल करूँगी और दूसरे टेब का नाम बदलकर Balance नाम दूँगी।
04:37 अब Palette पर जाएँ और swing Controls मेन्यू से labels जोडें।
04:43 Swing Controls से Label चुनें और यहाँ अपने फार्म में इसे जोड़ें।
04:48 हम अपने एप्लिकेशन के लिए 6 labels की आवश्याकता है।
04:54 अब मैंने अपने फॉर्म में 6 labels जोड़ दिये हैं।
04:58 आप उनपर क्लिक करके उन्हें स्थान दे सकते हैं और अलाइन कर सकते हैं।
05:02 और स्थान बदलने या उन्हें फिर से अलाइन करने के लिए माउस का उपयोग भी कर सकते हैं।
05:06 अब label पर टेक्स्ट बदलने के लिए,
05:08 आप या तो इस पर डबल क्लिक कर सकते हैं या इस पर राइट क्लिक कर सकते हैं।
05:12 और Edit Text ऑप्शन चुन सकते हैं।
05:14 अब labels का नाम बदलें।
05:16 मैं सबसे पहले को Initial Amount नाम दे रही हूँ
05:22 दूसरे label को Credit Amount.
05:30 तीसरे को Debit amount
05:35 और चौथे को Balance कहूँगी।
05:41 प्रारंभ में, हम initial amount Rs 5000 सेट करेंगे।
05:48 एक बार हम balance की गणना करते हैं, हम इसे इस level पर रख सकते हैं।
05:53 किंतु अभी के लिए हम इसे stars के रूप में बना देंगे।
06:01 अब Palette पर जाएँ और TextField चुनें और हम credit amount और debit amount के आगे टेक्स्ट फिल्ड्स जोड़ेंगे।
06:16 हमें Textfield स्थान को भी खाली छोड़ना चाहिए।
06:20 मैं टेक्स्ट को एडिट करती हूँ और यहाँ मौजूदा टेक्स्ट को हटा देती हूँ।
06:27 अब माउस का उपयोग करके इसका आकार परिवर्तन करें।
06:35 एक बार आपने यह किया, आप palette पर वापस जा सकते हैं और Button चुनें।
06:42 अपने फ्रेम के नीचे बटन जोड़ें और
06:48 आप इस पर राइट क्लिक करके लेबल बदल सकते हैं।
06:53 Edit text ऑप्शन चुनें और इसे Get Balance नाम दें।
06:58 अब यह हमारा GUI है।
07:01 अब Image टेब (tab1) पर जाएँ औऱ एक इमेज जोड़ें।
07:05 ऐसा करने के लिए Palette पर वापस जाएँ ।
07:08 औऱ अन्य Label चुनें, और इसे पेनल पर रखें।
07:13 अब palette के नीचे Properties विंडो से, icon प्रॉप्रटी खोजें और यहाँ दाईं ओर 3 डॉट्स पर क्लिक करें।
07:26 icons properties विंडो खुलती है।
07:28 यहाँ ऑप्शन External Image चुनें, फिर यहाँ दाईं ओर पर 3 डॉट्स(...) पर क्लिक करें।
07:35 और इमेज देखें, जिसे आप अपने एप्लिकेशन के लिए शामिल करना चाहते हैं।
07:41 मैंने यहाँ इमेज चुन ली है। OK पर क्लिक करें।
07:48 माउस का उपयोग करके इसका स्थान बदलें।
07:51 आप यहाँ इस पर डबल क्लिक करके लेबल पर टेक्स्ट हटा सकते हैं और टेक्स्ट को हटाएँ।
07:59 अब हमने इमेज जोड़ दी है।
08:02 अपने GUI में मेन्यू जोड़ते हैं।
08:05 palette पर जाएँ और swing मेन्यूज के अंदर Menu bar ऑप्शन चुनें।
08:12 Menu Bar चुनें और पेनल के शीर्ष पर क्लिक करें।
08:17 डिफॉल्ट रूप से यहाँ पहले ही दो मेन्यू लेबल्स File और Edit हैं।
08:22 Edit text पर डबल क्लिक करें और इसे Help नाम दें।
08:28 आप फाइल के अंदर सबमेन्यू भी जोड़ सकते हैं।
08:32 अब बाईं ओर Inspector या navigator में, JMenu1 पर राइट क्लिक करें।
08:39 Add From Palette ऑप्शन चुनें और Menu Item चुनें।
08:45 वह MenuItem जोड़ना चाहिए।
08:47 आप इसको Exit नाम भी दे सकते हैं।
08:54 अब हमने फाइल मेन्यू के अंदर सबमेन्यू जोड़ दिया है और उस मेन्यू आइटम का नाम भी बदल दिया है।
09:00 अब, हमारा GUI अधिक या कम पूरा हो चुका है।
09:03 अब एक पूर्वावलोकन पर नजर डालते हैं।
09:05 सबसे ऊपर 'Preview Design' बटन पर क्लिक करें।
09:09 अब तक आपने क्या किया है, वह उसका पूर्वावलोकन दिखाता है।
09:12 यहाँ, बटन्स अभी भी काम नहीं करते हैं।
09:16 लेकिन एक बार आपने कोड में जोड़ दिया, आप कुछ भी कार्य कर सकते हैं।
09:20 पूर्वावलोकन को बंद करें।
09:22 अब, कोड़ जोड़ने से पहले, इनपुट टेक्स्ट फिल्ड्स को उचित वेरिएबल नाम देते हैं।
09:28 Balance टैब पर जाएँ, यहाँ इन टेक्स्ट फिल्ड्स को उचित वेरिएबल नाम दें।
09:34 Inspector में JTextfield1 पर राइट क्लिक करें।
09:40 change variable name चुनें।
09:43 वेरिएबल नाम को Credit amount में बदलें।
09:50 Ok पर क्लिक करें।
09:53 आप यहाँ डिजाइन मोड में टेक्स्टफिल्ड पर राइट क्लिक भी कर सकते हैं।
09:56 Change Variable Name चुनें।
10:00 वेरिएबल नाम debitAmount में बदलें।
10:04 OK पर क्लिक करें।
10:08 मैं इस अंतिम लेबल को कॉल करने जा रही हूँ, अर्थात resultBalance के रूप में stars टेक्स्टफिल्ड्स।
10:16 Change variable name ऑप्शन फिर से चुनें और वेरिबल को resultBalance में बदलें।
10:23 OK पर क्लिक करें।
10:25 अब एप्लिकेशन के कार्य के लिए कोड को देखते हैं,
10:30 अब यह हमारा सेम्पल कोड है।
10:32 मैं creditAmount से Text()'
10:37 debitAmount से Text() प्राप्त करना चाहती हूँ।
10:39 balance की गणना करें और आखिरीresultBalance में amount रखें।
10:44 यहाँ कोड को कॉपी करें और IDE पर वापस जाएँ।
10:51 अब Get Balance बटन पर राइट क्लिक करें।
10:55 ऑप्शन Events, Action और Action Performed चुनें।
11:00 यह आपको कोड के भाग पर ले जायेगा।
11:03 जहाँ आपने बटन दबाने पर प्रदर्शित कार्य के लिए कोड को लिखना या पेस्ट करना होगा।
11:10 कॉपी किये गये कोड को यहाँ पेस्ट करें।
11:17 कोड को सेव करें और डिजाइन मोड पर वापस जाएँ।
11:22 अब एप्लिकेशन से बाहर निकलने के लिए कोड जोडते हैं।
11:25 मेन्यू आइटम, Exit पर राइट क्लिक करें और Events, Action और Action Performed चुनें।
11:40 यह सोर्स मोड पर जाता है और अब हमने एप्लिकेशन से बाहर निकलने के लिए सफलतापूर्वक कोड लिखा है।
11:46 जो System.exit(1) होने जा रहा है।
11:53 अब कोड को सेव करें और डिजाइन मोड पर वापस जाएँ।
11:57 Exit मेन्यू आइटम के लिए शॉर्टकट भी जोड़ते हैं।
12:02 यहाँ जो विंडो खुलता है, उस पर शॉर्टकट ऑप्शन पर डबल क्लिक करें।
12:07 Q और Ctrl दबाएँ और OK पर क्लिक करें।
12:14 अब हमने एप्लिकेशन से बाहर आने के लिए कीबोर्ड शार्टकट के रूप में Ctrl Q सेट किया है।
12:20 इसी के साथ हमारा एप्लिकेशन पूर्ण होता है।
12:23 अब अपने कीबोर्ड पर F6 दबाकर एप्लिकेशन को रन करें।
12:30 रन होने के लिए मेन क्लास पहले ही चयनित है।
12:33 OK पर क्लिक करें।
12:37 और यह यहाँ है। यह हमारा GUI है।
12:40 अब चेक करें।
12:43 balance टैब पर जाएँ, क्रेडिट अमाउंट(राशि) Rs.300/- प्रविष्ट करें।
12:47 और डेबिट अमाउंट Rs.200 प्रविष्ट करें और ' 'Get Balance' दबाएँ।
12:53 यह हमें वर्तमान बकाया राशि देता है।
12:56 अब एप्लिकेशन से बाहर आएँ।
12:58 'File मेन्यू पर जाऊँगी और Exit पर क्लिक करूँगी।
13:02 हम कीबोर्ड पर 'Ctrl Q दबाकर भी एप्लिकेशन से बाहर आ सकते हैं।
13:08 अब एप्लिकेशन पूर्ण होने के साथ यह नियत-कार्य का समय है।
13:14 एक टेंपरेचर कंवर्टर एप्लिकेशन बनाएँ।
13:18 पिछली तरह के टैब्स होने चाहिए।
13:21 पहला Centigrade से Fahrenheit और दूसरा Fahrenheit से Celsius बदलें।
13:27 यह एक इनपुट टेंपरेचर भी लेना चाहिए।
13:30 और बदला हुआ टेंपरेचर प्रदर्शित करना चाहिए।
13:33 इसमें सबसे ऊपर एक मेन्यू बार भी होना चाहिए, जो File और Help ऑप्शन्स दर्शाता है।
13:38 और file मेन्यू के नीचे एप्लिकेशन से बाहर आने के लिए कीबोर्ड शार्टकट के साथ एक Exit आइटम होना चाहिए।
13:46 मैंने नियत-कार्य पहले ही हल कर दिया है।
13:48 देखिए कि यह कैसा दिखना चाहिए।
13:50 मैं अपने नियत-कार्य को रन करने जा रही हूँ और यह मेरा GUI है।
13:56 अब, इनपुट टेंपरेचर -40 सेल्सियस प्रविष्ट करें और get Fahrenheit पर क्लिक करें।
14:05 एप्लिकेशन सही प्रवर्तित आउटपुट टेंपरेचर देना चाहिए।
14:10 अब एप्लिकेशन से बाहर आने के लिए शार्टकट कीज़ अर्थात Ctrl X का उपयोग करें।
14:18 अतः हम कीबोर्ड शार्टकट के माध्यम से एप्लिकेशन से सफलतापूर्वक बाहर आ गए हैं।
14:25 स्क्रीन पर दिखाए लिंक पर उपलब्ध वीडियो देखें।
14:29 यह स्पोकन ट्यूटोरियल प्रोजेक्ट को सारांशित करता है।
14:32 अच्छी बैंडविड्थ न मिलने पर आप इसे डाउनलोड करके देख सकते हैं।
14:37 स्पोकन ट्यूटोरियल प्रोजेक्ट टीम, स्पोकन ट्यूटोरियल्स का उपयोग करके कार्यशालाएँ चलाती है।
14:42 ऑनलाइन टेस्ट पास करने वालों को प्रमाण-पत्र भी देते हैं।
14:46 अधिक जानकारी के लिए Contact @spoken-tutorial.org पर लिखें।
14:52 स्पोकन ट्यूटोरियल प्रोजेक्ट टॉक-टू-अ टीचर प्रोजेक्ट का हिस्सा है।
14:56 यह भारत सरकार के एमएचआरडी के “आईसीटी के माध्यम से राष्ट्रीय साक्षरता मिशन” द्वारा समर्थित है।
15:03 इस मिशन पर अधिक जानकारी निम्न लिंक पर उपलब्ध है,
spoken-tutorial.org/NMEICT-Intro
15:13 यह स्क्रिप्ट प्रभाकर द्वारा अनुवादित है, आई आई टी बॉम्बे से मैं श्रुति आर्य आपसे विदा लेती हूँ।
15:17 हमसे जुड़ने के लिए, धन्यवाद ।

Contributors and Content Editors

Devraj, Prabhakarpandey, Shruti arya