Netbeans/C2/Designing-GUI-for-Sample-Java-Application/Tamil
From Script | Spoken-Tutorial
| Time | Narration |
| 00:02 | வணக்கம். Netbeansஐ பயன்படுத்தி GUIகளை கட்டமைப்பது குறித்த டுடோரியலுக்கு நல்வரவு. |
| 00:06 | இந்த டுடோரியலில், Netbeansன் மிக கவர்ச்சிகரமான அம்சங்களில் ஒன்றை காண்போம் , அது அதன் GUI Builder. |
| 00:13 | GUIஐ கட்டமைப்பதற்கு Netbeans தருவது என்ன? |
| 00:16 | நீங்கள் பார்ப்பதை designer ஆக பெறும் வசதியைத் தருகிறது. |
| 00:21 | உங்கள் layout ஐ உருவாக்க componentகளை இழுத்து வைக்கும் படியான சுலபமான interface ஐயும் தருகிறது. |
| 00:27 | AWT மற்றும் Swing componentகள் முன்னிருப்பாக நிறுவப்பட்டிருக்கும் Component Palette உடன் இது வருகிறது. |
| 00:33 | ஒரு சில நிமிடங்களில் முழு GUI application ஐ கட்டமைக்கக்கூடிய இந்த visual editor ஐ பயன்படுத்துவோம். |
| 00:39 | இந்த செயல்விளக்கத்திற்கு நான் பயன்படுத்துவது |
| 00:43 | உபுண்டு 11.04 |
| 00:46 | மற்றும் Netbeans IDE 7.1.1 |
| 00:50 | நிறுவுதல் மற்றும் தேவைகள் குறித்து மேலும் அறிய முன் டுடோரியலைக் காணவும். |
| 00:56 | இந்த டுடோரியலில் கற்கபோவது |
| 00:58 | Form Editor |
| 01:00 | Source Editor |
| 01:02 | Palette, Inspector, மற்றும் Properties features ஆகியவற்றை பயன்படுத்துதல் |
| 01:05 | event handlerகளை சேர்த்தல் |
| 01:07 | மற்றும் நம் application ஐ compile செய்து இயக்குதல். |
| 01:10 | இந்த டுடோரியலில் ஒரு எளிய Account balance application ஐ உருவாக்கலாம் |
| 01:15 | இந்த application |
| 01:18 | accountக்கு credit செய்யப்பட்ட amount ஐயும் |
| 01:21 | account ல் இருந்து debit செய்யப்பட்ட amount ஐயும் input ஆக ஏற்று |
| 01:24 | கடைசி balance ஐ கணக்கிட வேண்டும். |
| 01:26 | நம் application மேலும் வசீகரமாக இருக்க ஒரு படத்தையும் சேர்ப்போம். |
| 01:31 | சுலபமாகவும் சீக்கிரமாகவும் அணுக மேலே ஒரு menu bar ஐ வைக்கலாம். |
| 01:35 | இப்போது netbeans க்கு வந்து ஒரு புது project ஐ உருவாக்க துவங்கலாம். |
| 01:40 | File menu ல் New Project பின் Java Application, அடுத்து Next ஐ அழுத்துக. |
| 01:49 | உங்கள் project பெயரை கொடுக்கவும் |
| 01:51 | நான் என் project க்கு Account balance என தருகிறேன் |
| 01:58 | ஒரு main class ஐ உருவாக்காமல் அதை main project என அமைப்போம். |
| 02:02 | Finish' ஐ க்ளிக் செய்ய அது ஒரு புது project ஐ உங்கள் IDE ல் உருவாக்கும் |
| 02:07 | இப்போது File menu ல் New File ஐ தேர்ந்தெடுக்கவும் |
| 02:15 | Categories ல் Swing GUI forms ஐயும் |
| 02:18 | File Type ல் Jframe Form ஐயும் தேர்ந்தெடுக்கவும் |
| 02:21 | Next ஐ க்ளிக் செய்க |
| 02:24 | இதை நான் AccountBalance என்கிறேன், |
| 02:29 | ஆனால் உங்கள் விருப்பத்திற்கேற்ப பெயரிடலாம். |
| 02:33 | Finish ஐ க்ளிக் செய்தவுடன், main design areaக்கு செல்வீர்கள். |
| 02:39 | இப்போது GUI builder பற்றி அறிந்து கொள்வோம். |
| 02:43 | இங்கே வலப்பக்கம் palette |
| 02:45 | இது ஏற்கனவே நிறுவப்பட்ட Swing மற்றும் AWT componentகளை கொண்டுள்ளது. |
| 02:49 | palette க்கு கீழே இங்கே Properties window உள்ளது. |
| 02:53 | இது நாம் தேர்ந்தெடுக்கும் componentகளுக்கு properties ஐ காட்டுகிறது. |
| 02:58 | வலப்பக்கம் இங்கே navigator அல்லது inspector உள்ளது |
| 03:01 | இது frame க்கு சேர்க்கப்பட்ட componentகளை காட்டுகிறது. |
| 03:05 | இங்கே workspace... design modeல் உள்ளது |
| 03:08 | மேலே Source button |
| 03:11 | இதை க்ளிக் செய்யும் போது, source code திறக்கிறது. |
| 03:15 | designக்கு componentகளை சேர்க்கும் போது, |
| 03:18 | இது அதற்கான source code ஐ எடுத்து இங்கே இந்த source க்கு சேர்க்கிறது. |
| 03:23 | Design mode க்கு சென்று நாம் இப்போது பயன்படுத்தும் componentகளைக் காண்போம். |
| 03:28 | நம் applicationகளை உருவாக்க palette ல் இருந்து சில componentகளை பயன்படுத்துவோம் அவை |
| 03:31 | Buttonகள், Labelகள், Panelகள், Tabbed pane போன்றவை |
| 03:38 | இப்போது Palette ல் இருந்து swing Containers ல் TabbedPane ஐ தேர்ந்தெடுப்போம் |
| 03:45 | Tabbed Pane ஐ தேர்ந்தெடுத்து பின் form ல் க்ளிக் செய்க |
| 03:50 | இது ஒரு Tabbed frame ஐ கொடுக்கும். உங்கள் mouse ஐ கொண்டு இதன் அளவை மாற்றலாம். |
| 03:58 | இப்போது Palette க்கு சென்று Panel ஐ தேர்ந்தெடுப்போம் |
| 04:02 | மீண்டும் frame மீது க்ளிக் செய்க |
| 04:06 | அது ஒரு tab ஐ கொடுக்கும். |
| 04:09 | மீண்டும் ஒரு Panel ஐ தேர்ந்தெடுத்து form ல் க்ளிக் செய்க |
| 04:14 | மொத்தமாக இரு tabகளைக் கொடுக்கும் |
| 04:17 | இப்போது tab மீது டபுள் க்ளிக் செய்து அதன் பெயரை மாற்றலாம் அல்லது அந்த tab மீது ரைட் க்ளிக் செய்து Edit Text தேர்வை பயன்படுத்தலாம் |
| 04:29 | முதல் tab ஐ Image எனவும் இரண்டாம் tab ஐ Balance எனவும் மாற்றுகிறேன் |
| 04:37 | இப்போது Palette க்கு சென்று swing Controls menu ல் இருந்து labelகளை சேர்ப்போம் |
| 04:43 | Swing Controls ல் இருந்து Label ஐ தேர்ந்தெடுத்து உங்கள் form க்கு சேர்க்கலாம் |
| 04:48 | நம் applicationக்கு 6 labelகள் தேவை. |
| 04:54 | இப்போது என் form க்கு ஆறு labelகளை சேர்த்துள்ளேன் |
| 04:58 | அவற்றின் மீது க்ளிக் செய்து அவற்றை தேவையான இடத்தில் வைக்கலாம் |
| 05:02 | mouse ஐ பயன்படுத்தி அவற்றை நகரத்தலாம். |
| 05:06 | இப்போது label ல் உரையை மாற்றலாம் |
| 05:08 | அதற்கு அதன் மீது டபுள் க்ளிக் செய்யலாம் அல்லது ரைட் க்ளிக் செய்து |
| 05:12 | Edit Text ஐ தேர்ந்தெடுக்கலாம் |
| 05:14 | இப்போது labelகளின் பெயரை மாற்றலாம் |
| 05:16 | முதல் label ஐ Initial Amount என்கிறேன் |
| 05:22 | இரண்டாம் label Credit Amount. |
| 05:30 | மூன்றாம் label Debit amount |
| 05:35 | மற்றும் நான்காம் label Balance |
| 05:41 | ஆரம்பத்தில், initial amount ஐ Rs 5000 என அமைக்கிறேன். |
| 05:48 | balance ஐ கணக்கிட்ட பின் அதை இந்த lebel ல் வைப்போம் |
| 05:53 | ஆனால் இப்போதைக்கு அதில் சில நட்சத்திரங்களை வைப்போம் |
| 06:01 | இப்போது, Palette க்கு சென்று TextField ஐ தேர்ந்தெடுப்போம். credit amount மற்றும் debit amountக்கு அடுத்து text fieldகளை வைப்போம். |
| 06:16 | Textfield இடங்களை காலியாக விடவேண்டும். |
| 06:20 | இங்கே text ஐ edit செய்து ஏற்கனவே உள்ள text ஐ நீக்குகிறேன் |
| 06:27 | mouseஐ பயன்படுத்தி அதன் அளவை மாற்றுகிறேன் |
| 06:35 | அதை செய்தபின், இப்போது palette க்கு சென்று Button ஐ தேர்ந்தெடுப்போம் |
| 06:42 | உங்கள் frame க்கு கீழே ஒரு button ஐ வைப்போம் |
| 06:48 | label ஐ மாற்ற அதன் மீது ரைட் க்ளிக் செய்து |
| 06:53 | Edit text தேர்வை தேர்ந்தெடுத்து Get Balance என மாற்றுகிறேன் |
| 06:58 | இப்போது இது நம் GUI! |
| 07:01 | இப்போது Image tab (tab1) க்கு சென்று ஒரு படத்தை சேர்ப்போம். |
| 07:05 | அதற்கு Palette க்கு சென்று |
| 07:08 | மற்றொரு Labelஐ தேர்ந்தெடுத்து அதை panelல் வைப்போம். |
| 07:13 | இப்போது palette க்கு கீழே Properties Window ல் இருந்து, icon property க்கு சென்று வலப்பக்கமுள்ள மூன்று புள்ளிகள் மீது க்ளிக் செய்க. |
| 07:26 | icons properties window திறக்கிறது |
| 07:28 | இங்கே External Image ஐ தேர்ந்தெடுத்து, பின் வலப்பக்கமுள்ள மூன்று புள்ளிகள் மீது க்ளிக் செய்க. |
| 07:35 | உங்கள் applicaton ல் சேர்க்க விரும்பும் படத்தை தேர்ந்தெடுக்கவும் |
| 07:41 | நான் படத்தை தேர்ந்தெடுத்துள்ளேன். OKஐ க்ளிக் செய்க |
| 07:48 | mouse ஐ பயன்படுத்தி அதன் இடத்தை மாற்றுவோம். |
| 07:51 | இங்கே labelல் டபுள் க்ளிக் செய்து அந்த text ஐ நீக்குவோம் |
| 07:59 | இப்போது ஒரு படத்தை சேர்த்துள்ளோம் |
| 08:02 | அடுத்து நம் GUI க்கு ஒரு menu ஐ சேர்ப்போம் |
| 08:05 | palette க்கு சென்று swing menus ல் Menu bar ஐ தேர்ந்தெடுப்போம் |
| 08:12 | Menu Bar ஐ தேர்ந்தெடுத்து பின் panel ன் மேலே க்ளிக் செய்க. |
| 08:17 | முன்னிருப்பாக இது இரு Menu labelகளை கொண்டுள்ளது: File மற்றும் Edit. |
| 08:22 | Edit textஐ டபுள் க்ளிக் செய்து அதை Help என மாற்றுகிறேன் |
| 08:28 | Fileன் கீழ் ஒரு துணை menuஐயும் சேர்க்கலாம். |
| 08:32 | இப்போது இடப்பக்கம் Inspector அல்லது navigator ல், JMenu1 மீது ரைட் க்ளிக் செய்க, |
| 08:39 | Add From Palette பின் Menu Item ஐ தேர்ந்தெடுக்கவும். |
| 08:45 | இது ஒரு MenuItemஐ சேர்க்கும் |
| 08:47 | அதன் பெயரை Exit எனவும் மாற்றலாம். |
| 08:54 | இப்போது file menu க்கு கீழே ஒரு துணை menu ஐ சேர்த்து அதன் பெயரையும் மாற்றியுள்ளோம் |
| 09:00 | இப்போது, நம் GUI கிட்டத்தட்ட முடிந்தது. |
| 09:03 | ஒரு preview ஐ காண்போம். |
| 09:05 | மேலே 'Preview Design' button ஐ க்ளிக் செய்க |
| 09:09 | நாம் செய்திருப்பதன் ஒரு preview ஐ இது காட்டும். |
| 09:12 | இங்கே, buttonகள் வேலை செய்யாது. |
| 09:16 | ஆனால் code ஐ சேர்த்தபின், அனைத்தும் வேலைசெய்யும். |
| 09:20 | preview ஐ மூடுவோம் |
| 09:22 | இப்போது, codeஐ சேர்ப்பதற்கு முன், input textfieldகளுக்கு சரியான variable பெயர்களைக் கொடுப்போம். |
| 09:28 | Balance tabக்கு சென்று, இங்கே இந்த text fieldகளுக்கு சரியான variable பெயர்களைக் கொடுப்போம். |
| 09:34 | inspector ல் JTextfield1 மீது ரைட் க்ளிக் செய்க. |
| 09:40 | change variable name ஐ தேர்ந்தெடுக்கவும். |
| 09:43 | variable பெயரை Credit amount என மாற்றுவோம் |
| 09:50 | Okஐ க்ளிக் செய்க |
| 09:53 | design mode ல் இங்கே textfield மீது ரைட் க்ளிக் செய்யலாம் |
| 09:56 | Change Variable Name ஐ தேர்ந்தெடுக்கவும் |
| 10:00 | variable ஐ debitAmount என மாற்றுக |
| 10:04 | OK ஐ க்ளிக் செய்க |
| 10:08 | இந்த கடைசி label அதாவது நட்சத்திரங்கள் உள்ள textfields label ஐ resultBalance என மாற்றுகிறேன் |
| 10:16 | Change variable name தேர்வை மீண்டும் தேர்ந்தெடுத்து variable ஐ resultBalance என மாற்றுகிறேன் |
| 10:23 | OKஐ க்ளிக் செய்க |
| 10:25 | application ஐ வேலைசெய்ய வைக்க இப்போது codeஐ காண்போம். |
| 10:30 | இப்போது இது என் உதாரண code |
| 10:32 | creditAmount ல் இருந்து getText() உம்; |
| 10:37 | debitAmount ல் இருந்து getText() உம் வேண்டும், |
| 10:39 | balance ஐ கணக்கிட்டு amount ஐ கடைசி resultBalanceல் வைக்க வேண்டும் |
| 10:44 | இங்கே code ஐ copy செய்து பின் IDEக்கு வருவோம் |
| 10:51 | இப்போது Get Balance button மீது ரைட் க்ளிக் செய்க. |
| 10:55 | Events, Action மற்றும் Action Performed ஐ தேர்ந்தெடுக்கவும் |
| 11:00 | இது code ன் பகுதிக்கு அழைத்துச்செல்லும் |
| 11:03 | இங்கே button ஐ அழுத்தும்போது நடக்கும் செயல்பாட்டிற்கான code ஐ எழுதலாம் அல்லது paste செய்யலாம். |
| 11:10 | copy செய்யப்பட்ட code ஐ இங்கே paste செய்கிறேன் |
| 11:17 | இந்த codeஐ சேமித்து பின் Design modeக்கு செல்வோம் |
| 11:22 | இப்போது application ஐ exit செய்ய code ஐ சேர்ப்போம். |
| 11:25 | MenuItem ல் Exitல் ரைட் க்ளிக் செய்து Events, Action மற்றும் Action Performed ஐ தேர்ந்தெடுக்கவும் |
| 11:40 | source mode க்கு சென்று application ஐ வெற்றிகரமாக exit செய்ய code ஐ எழுதுவோம் |
| 11:46 | அது System.exit(1). |
| 11:53 | இப்போது code ஐ சேமித்து பின் நம் design modeக்கு செல்வோம். |
| 11:57 | Exit MenuItemக்கு ஒரு shortcutஐயும் அமைப்போம் |
| 12:02 | இங்கே shortcut மீது டபுள் க்ளிக் செய்க |
| 12:07 | திறக்கும் Window ல் key stroke ல் Q என கொடுத்து Ctrlல் குறியிடுக பின் OKல் க்ளிக் செய்க |
| 12:14 | எனவே இப்போது application ல் இருந்து வெளியேற keyboard shortcut ஆக Ctrl Qஐ அமைத்துள்ளோம் |
| 12:20 | இப்போது நம் application முடிந்துவிட்டது |
| 12:23 | keyboard ல் F6 ஐ அழுத்தி இப்போது நம் application ஐ இயக்குவோம். |
| 12:30 | இயக்க வேண்டிய main class ஏற்கனவே தேர்ந்தெடுக்கப்பட்டுள்ளது |
| 12:33 | OKல் க்ளிக் செய்க |
| 12:37 | இதோ வந்துவிட்டது. இது நம் GUI |
| 12:40 | இப்போது இதை சோதிப்போம் |
| 12:43 | balance tabக்கு சென்று, credit amount 300 எனவும் |
| 12:47 | debit amount 200 எனவும் கொடுப்போம். 'Get Balance' ல் க்ளிக் செய்க |
| 12:53 | இது balance ல் சரியான amount ஐ கொடுக்கிறது. |
| 12:56 | இப்போது applicationல் இருந்து வெளியேறுவோம். |
| 12:58 | File menu க்கு சென்று Exitஐ க்ளிக் செய்கிறேன் |
| 13:02 | keyboardல் Ctrl Q ஐ அழுத்தியும் application ஐ மூடலாம் |
| 13:08 | application முடிந்தது, இப்போது உங்களுக்கான பயிற்சி. |
| 13:14 | ஒரு Temperature convertor application ஐ உருவாக்கவும். |
| 13:18 | இது முன்னர் போல இரு tabகளை கொண்டிருக்க வேண்டும் |
| 13:21 | ஒன்று Celsiusஐ Fahrenheit ஆக மாற்றவும் மற்றொன்று Fahrenheit ஐ Celsiusஆகவும் மாற்றவும். |
| 13:27 | இது ஒரு input temperature ஐயும் ஏற்கவேண்டும். |
| 13:30 | பின் மாற்றப்பட்ட temperature ஐ காட்ட வேண்டும் |
| 13:33 | இது மேலே File மற்றும் Help தேர்வுகளை காட்டும் ஒரு menu bar ஐயும் கொண்டிருக்க வேண்டும் |
| 13:38 | file menu ல் ஒரு Exit itemஉம் application ஐ மூட ஒரு keyboard shortcut உம் இருக்க வேண்டும் |
| 13:46 | இந்த பயிற்சியை நான் ஏற்கனவே செய்து விட்டேன் |
| 13:48 | அது இவ்வாறு இருக்க வேண்டும் |
| 13:50 | என் பயிற்சியை இயக்குகிறேன் இது என் GUI |
| 13:56 | இப்போது input temperature ஐ -40 Celcius என கொடுத்து get Fahrenheit ல் க்ளிக் செய்கிறேன் |
| 14:05 | சரியாக மாற்றப்பட்ட output temperature ஐ application கொடுக்கவேண்டும். |
| 14:10 | இப்போது application ஐ மூட shortcut key அதாவது Ctrl Xஐ முயற்சிப்போம். |
| 14:18 | எனவே keyboard shortcut ஐ பயன்படுத்தி வெற்றிகரமாக application ல் இருந்து வெளியேறிவிட்டோம் |
| 14:25 | கீழ்க்காணும் இணைப்பில் உள்ள காணொளியைக் காணவும். |
| 14:29 | இது ஸ்போகன் டுடோரியல் திட்டம் பற்றி சுருங்க சொல்கிறது. |
| 14:32 | உங்கள் இணைய இணைப்பு வேகமாக இல்லையெனில் அதை தரவிறக்கிக் காணவும். |
| 14:37 | ஸ்போகன் டுடோரியல் திட்டக்குழு ஸ்போகன் டுடோரியல்களைப் பயன்படுத்தி செய்முறை வகுப்புகள் நடத்துகிறது. |
| 14:42 | இணையத்தில் பரீட்சை எழுதி தேர்வோருக்கு சான்றிதழ்களும் அளிக்கிறது |
| 14:46 | மேலும் தகவல்களுக்கு contact@spoken-tutorial.org க்கு மின்னஞ்சல் எழுதவும். |
| 14:52 | ஸ்போகன் டுடோரியல் பாடங்கள் டாக் டு எ டீச்சர் திட்டத்தின் முனைப்பாகும். இதற்கு ஆதரவு இந்திய அரசு துவக்கிய MHRD இன் ஐசிடி மூலம் தேசிய கல்வித்திட்டத்தின் வழியே கிடைக்கிறது. |
| 15:03 | இந்த திட்டம் பற்றிய மேலதிக தகவல்கள் கீழுள்ள இணைப்பில் கிடைக்கும் spoken hyphen tutorial dot org slash NMEICT hyphen Intro |
| 15:13 | இந்த டுடோரியலை தமிழாக்கம் செய்து குரல் கொடுத்தது ஐஐடி பாம்பேவில் இருந்து பிரியா. நன்றி. |
