Prabhakarpandey: Created page with "{| Border=1 || '''Time''' || '''Narration''' |- | 00:01 |नमस्कार दोस्तों। |- | 00:02 | Netbeans का उपयोग करके GUIs क..."

2015-01-25T06:17:58Z

Created page with "{| Border=1 || '''Time''' || '''Narration''' |- | 00:01 |नमस्कार दोस्तों। |- | 00:02 | Netbeans का उपयोग करके GUIs क..."

New page

{| Border=1

|| '''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
|लिनक्स ऑपरेटिंग सिस्टम ऊबुंटू वर्जन v11.04

|-
| 00:46
|और Netbeans IDE वर्जन v7.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''' मेन्यू आइटम के लिए शॉर्टकट भी जोड़ते हैं। MenuItem

|-
| 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
|हमसे जुड़ने के लिए, धन्यवाद ।

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

Devraj at 06:51, 26 February 2015

Shruti arya at 10:26, 18 February 2015

Prabhakarpandey: Created page with "{| Border=1 || '''Time''' || '''Narration''' |- | 00:01 |नमस्कार दोस्तों। |- | 00:02 | Netbeans का उपयोग करके GUIs क..."