Netbeans/C2/Handling-Images-in-a-Java-GUI-Application/Malayalam

From Script | Spoken-Tutorial
Revision as of 14:57, 18 June 2018 by Vijinair (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search
Time Narration
00:01 Netbeans IDE ഉപയോഗിച്ച് Handling Images in a Java GUI Application എന്ന ടൂട്ടോറിയലിലേക്ക് എല്ലാവര്‍ക്കും സ്വാഗതം.
00:10 നിങ്ങള്‍ക്ക് netbeasn'നെക്കുറിച്ചുള്ള പ്രാഥമിക വിവരങ്ങള്‍ അറിയുമെന്ന് കരുതുന്നു.
00:15 J Frame form ല്‍ text fields, buttons, menus എന്നിവ കൊണ്ട് വരാൻ നിങ്ങള്‍ക്ക് അറിയുമെന്ന് കരുതുന്നു.
00:22 അല്ലാത്തപക്ഷം ദയവായി Spoken Tutorial വെബ് സൈറ്റില്‍ Netbeansനെക്കുറിച്ചുള്ള ടൂട്ടോറിയല്‍സ് നോക്കേതാണ്.
00:29 ഈ ടൂട്ടോറിയലില്‍ നമ്മള്‍ ഇമേജ് കള്‍ ഹാൻഡ്ലിങ് ചെയ്യുന്നതിനെക്കുറിച്ച് വിശദമായി പഠിക്കും.
00:34 കൂടാതെ ഒരു സാമ്പിള്‍ GUI applicationല്‍ ഇവ പ്രവര്‍ത്തനമായി അവതരിപ്പിക്കുകയും ചെയ്യും
00:39 ഈ Demonstrationനായി ഞാന്‍ Linux Operating Systems Ubundu 'വേര്‍ഷന്‍ '11.04 ഉം Netbeans IDE വേര്‍ഷന്‍ 7.1.1നുമാണ്
00:52 ജാവ ആപ്ലിക്കേഷനില്‍ images handle ചെയ്യാനും അസസ്സ് ചെയ്യാനും സാധാരണ രീതിയില്‍ get Resource()' Method വഴി കഴിയും
00:59 നമുക്ക് IDE-സില്‍ GUI Builder ഉപയോഗിച്ച് കോഡ് ജനറേറ്റ് ചെയ്യുന്നതും നിങ്ങളുടെ ആപ്ലിക്കേഷനില്‍ ഇമേജുകള്‍ ഉള്‍ക്കൊള്ളിക്കുന്നതിനെക്കുറിച്ചും പഠിക്കാം
01:07 കൂടാതെ ഒരു സിംപിള്‍ Jframe ക്രിയേറ് ചെയ്ത് ഒരു Jlabelമായി ക്രിയേറ്റ് ചെയ്ത് ഇമേജുകള്‍ ഡിസ്പ്ലേ ചെയ്യുന്നത് എങ്ങനെയെന്ന് നോക്കാം
01:13 ഈ ടൂേേട്ടാറിയലില്‍, നമ്മള്‍
01:15 അപ്ലിക്കേഷൻ ഫോം ക്രീറ്റ ചെയ്യുക
01:18 ഇമേജില്‍ ഒരു package ഉള്‍പ്പെടുത്തുക
01:20 Labelല്‍ ഇമേജ് എങ്ങനെ ഡിസ്‌പ്ലേ ചെയ്യാം
01:22 Mouse-Eventകളും Pop-Up ഉം എങ്ങനെ ക്രിയേറ്റ് ചെയ്യാം
01:25 അപ്ലിക്കേഷൻ Build ചെയ്ത Run' " ചെയുക
01:28 ഇപ്പോള്‍ നമുക്ക് IDEലേക്ക് സ്വിച്ച് ചെയ്ത് ഒരു sample application എങ്ങനെ create ചെയ്യാം എന്ന് നോക്കാം
01:33 File' മെനു വില്‍ നിന്ന് New Project തിരഞ്ഞെടുക്കുക
01:37 Categoriseനുതാഴെ Java സെലക്ട് ചെയ്ത് Projetcts നു കീഴെ Java Application തിരഞ്ഞെടുത്ത് Next ക്ലിക്ക് ചെയ്യുക
01.46 Project Name fieldല്‍ Image Displya App ടൈപ്പ് ചെയ്യുക
01:54 Create Main Class ചെക്ക് ബോക്സ് ക്ലിയർ ചെയ്യുക
01:58 Set as Main Project ചെക്ക് ബോക്സ് തിരഞ്ഞെടുത്തുവെന്ന് ഉറപ്പുവരുത്തണം
02:03 'Finishക്ലിക്ക് ചെയുക . നിങ്ങളുടെ IDEല്‍ പോർജെക്ട ക്രിയേറ് ചെയ്യപ്പെട്ടു കഴിഞ്ഞു.
02:08 ഈ സെക്ഷനില്‍ നമ്മള്‍ Jframe form ക്രിയേറ്റ് ചെയ്ത് Jlabel ഫോം ലേക്ക് എങ്ങനെ ആഡ് ചെയ്യാം എന്നു നോക്കാം
02:14 ആദ്യം നമുക്ക് Jframe form ക്രിയേറ്റ് ചെയ്യാം
02:17 Projects വിന്ഡോ ല്‍ നിന്ന് Image Display Appനോട് ൽ എക്സ് പാന്റ് ചെയ്യുക.
02:23 'Source Packages നോട് ല്‍ റൈറ്റ് ക്ലിക്ക് ചെയ്ത് New>>Jframe form തിരഞ്ഞെടുക്കുക
02:30 Class Name ഫീല്‍ഡില്‍ Image Display എന്ന് ടൈപ്പ് ചെയ്യുക
02:37 Package ഫീല്‍ഡില്‍ org.me.myimageapp എന്ന് ടൈപ്പ് ചെയ്യുക
02:45 ശേഷം Finish ക്ലിക്ക് ചെയ്യുക
02:48 ഇനി നമുക്ക് J Label ചേർക്കാം
02:52 IDEയുടെ റൈറ്റ് ഹാന്‍ഡ് സൈഡിലുള്ള paletteല്‍ നിന്നും Label Component തിരഞ്ഞെടുത്ത് Jframeലേക്ക് ഡ്രാഗ് ചെയ്യുക
03:01 ഇപ്പോള്‍ നിങ്ങളുടെ form ഇതുപോലെ കാണപ്പെടും
03:06 നിങ്ങള്‍ ആപ്ലിക്കേഷനില്‍ ഇമേജുകളോ മറ്റെന്തെങ്കിലുമോ ഉപയോഗിക്കുകയാണെങ്കില്‍, സവിശേഷമായി നിങ്ങള്‍ പ്രത്യേക Java package Resourceനായി ക്രിയേറ്റ് ചെയ്യുന്നു്
03:15 നിങ്ങളുടെ ലോക്കല്‍ ഫയല്‍ സിസ്റ്റത്തില്‍ ഈ പാക്കേജ് ഫോള്‍ടറായി കാണപ്പെടുന്നു.
03:19 Projects വിന്ഡോ ല്‍ org.me.myimageapp നോഡില്‍ റൈറ്റ് ക്ലിക്ക് ചെയ്ത് New>Java Package തിരഞ്ഞെടുക്കുക
03:30 New Package Wizardല്‍ 'org.myimageapp' നൊപ്പെ 'resources 'കൂടി ആഡ് ചെയ്യുക
03:40 പുതിയ പാക്കേജ് ഇപ്പോള്‍ org.me.myimageapp.resource എന്ന് മാറുന്നു
03:47 Finish ക്ലിക് ചെയുക
03:49 നിങ്ങള്‍ ഇമേജുകള്‍ ആഡ് ചെയ്യുന്ന സമയത്ത് Projects വിന്ഡോ ല്‍ org.me.myimageapp.resources പാക്കേജില്‍ തന്നെ ഇമേജുകള്‍ കാണാന്‍ കഴിയും
03:59 ഈ ആപ്ലിക്കേഷനില്‍ ഇമേജുകള്‍ Jlabel കം പൊനന്റി ന് ഉള്ളില്‍ തന്നെ ഉറപ്പിക്കപ്പെടുന്നു
04:04 ഇനി നമുക്ക് labelല്‍ ഇമേജ് ചേർക്കാം
04:08 GUI Designer ല്‍ നിങ്ങള്‍ Formല്‍ ഉള്‍പ്പെടുത്തിയ label തെരഞ്ഞെടുക്കുക
04:14 windowയുടെ റൈറ്റ് ഹാന്റ് സൈഡിലുള്ള Properties Windowക്ക് താഴെയുള്ള palette ല്‍ സ്ക്രോൾ ഡൌൺ ചെയ്ത് icon propertyയിലേക്ക് സ്ക്രോൾ ഡൌൺ ചെയ്യുക
04:23 ellipsis (...) ഓ അല്ലെങ്കില്‍ റൈറ്റ് സൈഡിലുള്ള മൂന്നു ഡോട്ടുകളിലോ ക്ലിക്ക് ചെയ്യുക
04:30 Icon Property' dialoge boxല്‍ import to project ക്ലിക്ക് ചെയ്യുക
04:34 File chooserല്‍ നിന്നും നിങ്ങള്‍ക്ക് ഉപയോഗിക്കേ ഇമേജ് ഉള്‍ക്കൊള്ളുന്ന ഫോള്‍ഡറിലേക്ക് നാവിഗേറ്റ് ചെയ്തശേഷം
04:42 Next ക്ലിക്ക് ചെയ്യുക
04:45 'wizardല്‍ Select target folder Page ല്‍ resources ഫോൾഡർ തെരഞ്ഞെടുക്കുക
04:49 ശേഷം Finsh ല്‍ ക്ലിക്ക് ചെയ്യുക
04:52 Finishല്‍ click ചെയ്ത് കഴിയുമ്പോള്‍ IDE Project ലേക്ക് ഇമേജ് കോപ്പി ചെയ്യുന്നു
04:57 അതിനുശേഷം application build ചെയ്ത് run ചെയ്യുമ്പോള്‍ ഇമേജ് distributable JAR ഫയലില്‍ ഉള്‍ക്കൊള്ളുന്നതാണ്
05:07 OK ക്ലിക്ക് ചെയ്യുക
05:11 Project nodeല്‍ റൈറ്റ് ക്ലിക്ക് ചെയ്ത് clean and build ഓപ്ഷൻ തെരഞ്ഞെടുക്കുക
05:18 നിങ്ങള്‍ക്കിപ്പോള്‍ Files' മെനു ലേക്ക് പോകാന്‍ കഴിയും. build ഫോൾഡർ ല്‍
05:29 dist ഫോൾഡർ നു താഴെ നിങ്ങള്‍ക്ക് jar ഫയൽ കാണാന്‍ സാധിക്കും
05:33 ഇത് image display' class' ല്‍ ഇമേജ് അക്സസ്സ് ചെയ്യുന്നതിനുള്ള കോഡ് ജനറേറ്റ് ചെയ്യപ്പെടുന്നു
05:38 ഇത് കൂടാതെ നിങ്ങളുടെ image formലെ Design viewല്‍ label ആയും കാണാം
05:43 ഈ സന്ദര്‍ഭത്തില്‍ formന്റെ അപ്പീറെൻസ് ഇമ്പ്രൂവ് ചെയ്യാനുള്ള കാര്യങ്ങളും സാധ്യമാണ്
05:48 properties വിന്ഡോ ല്‍ നിന്ന് Text' properties' സെലക്ട് ചെയ്യുക
05:56 അതിനുശേഷം jlabel1' ഡിലീറ്റ് ചെയ്യുക
06:04 GUI Builder' generate ചെയ്യുന്ന value labelനുള്ള ഡിസ്‌പ്ലേ text ആണ്
06:10 എന്തായാലും image display ചെയ്യാന്‍ text അല്ല label ആണ് നിങ്ങള്‍ ഉപയോഗിക്കുന്നത്
06:15 അതിനാല്‍ ഈ ടെക്സ്റ്റ് ആവശ്യമില്ല
06:18 ഇപ്പോള്‍ നമുക്ക് labelനെ ഡ്രാഗ് ചെയ്ത് formന്റെ സെന്ററിലേക്ക് കൊണ്ടുവരാം
06:26 'GUI Designerല്‍ Source ടാബ് ക്ലിക്ക് ചെയ്യുക
06:30 Generated Code എന്ന് കാണിക്കുന്ന വരിയിലൂടെ സ്‌ക്രോള്‍ ഡൗണ്‍ ചെയ്യുക
06:33 GUI Designer generate ചെയ്ത കോഡ് display ആകുന്നതിനായി Generated Code Line ന്റെ Left Sideല്‍ കാണുന്ന plus (+) singnല്‍ click ചെയ്യുക
06:42 ഇവിടെ key line എന്നുപറയുന്നത് ഇതാണ്
06:49 jLabel1ന്റെ ഐക്കൺ പ്രോപ്പർട്ടി , Property editor ഉപയോഗിച്ചതിനാൽ IDE എന്നത് setIcon method ജനറേറ്റു ചെയ്തു .
06:57 അതിന്റെ പരാമീറ്റർ വിളിക്കുന്നത് getResource() method on an ImageIcon. ന്റെ അനോണിമസ് ഇന്നർ ക്ലാസ് മെത്തേഡ് എന്നതാണ്
07:10 ഒരിക്കല്‍ നിങ്ങളുടെ image add ആയിക്കഴിഞ്ഞാല്‍ design' view ല്‍ imageല്‍ റൈറ്റ് ക്ലിക്ക് ചെയ്യുക
07:19 Click on Events > Mouse > mouseClicked.
07:24 ഇപ്പോള്‍ വ്യൂ source' മോഡ് ലേക്ക് മാറിക്കഴിഞ്ഞു
07:28 ഇത്തരത്തില്‍ mouse-click വഴി നിങ്ങള്‍ ചെയ്യുന്ന പ്രവര്‍ത്തികള്‍ കസ്റ്റമൈസ് ചെയ്യുന്നതിനായി നിങ്ങള്‍ക്കിവിടെ കോഡ് ആഡ് ചെയ്യാവുന്നതാണ്.
07:33 GUIല്‍ imageല്‍ click ചെയ്യുമ്പോള്‍ pop-up generate ചെയ്യുന്നതിനായുള്ള കോഡില്‍ കുറച്ചു വരികള്‍ കൂടി add ചെയ്യാം
08:00 ഇപ്പോള്‍ ഞാന്‍ 'pop-up generate' ചെയ്യുന്നതിനായുള്ള കോഡില്‍ കുറച്ചു വരികള്‍ കൂടി എന്റർ ചെയ്യുകയാണ്
08:05 ആദ്യം ഞാന്‍ pop-upനായി പുതിയ Jframe ക്രിയേറ് ചെയ്യുന്നു.
08:12 അതിനായി defaultCloseOperation അത് സെറ്റ് ചെയ്യുന്നു
08:15 അവസാനമായി pop-up നായി പ്രൊവൈഡ് ചെയ്തിട്ടുള്ള ടെക്സ്റ്റ് ഉം
08:24 ഈ വരികള്‍ codeല്‍ ചേര്‍ത്ത ശേഷം നമുക്ക് ആവശ്യമുള്ള പാക്കേജുകള്‍ import ചെയ്യുന്നതിന് ഫയലിന്റെ തുടക്കത്തില്‍ 2 ് statementകള്‍ കൂടി add ചെയ്യാം
08:36 import javax.swing.*;ഉൾപെടുത്തുക
08:45 ശേഷം import java.awt.*;
08:53 ഇത് ഈ പ്രോഗ്രാമിന് ആവശ്യമുള്ള package ഇമ്പോര്ട ചെയ്യും.
08:59 ഇനി നമുക്ക് ആപ്ലിക്കേഷനില്‍ build and run നല്‍കാം
09:02 ഇമേജ് ഡിസ്പ്ലേ ചെയ്യുന്നതിനും ആക്സസ് ചെയ്യുന്നതിനുമുള്ള കോഡ് നമ്മള്‍ ജിൻേറാടെ ചെയ്തു കഴിഞ്ഞു
09:07 ഇമേജ് അക്സസ്സ് ചെയ്യുന്നുൈന്ന് ഉറപ്പുവരുത്താന്‍ നമുക്ക് ആപ്ലിക്കേഷനില്‍ ബിൽഡ്‌ ചെയ്ത് റൺ ചെയ്യാം
09:12 ആദ്യം പ്രൊജക്ടിന്റെ Main class സെറ്റ് ചെയ്യണം
09:16 നിങ്ങള്‍ Main class സെറ്റ് ചെയ്യുമ്പോള്‍ projectല്‍ ഏത് class ആണ് run ചെയ്യേതെന്ന് IDE തിരിച്ചറിയുന്നു
09:21 ഇതുകൂൂതെ അപ്ലിക്കേഷന്റെ JAR file ലുളള Main class elemet അപ്ലിക്കേഷന്‍ build ചെയ്യുമ്പോള്‍ ജനറേറ്റ് ചെയ്യപ്പെടുന്നു എന്നും ഉറപ്പുവരുത്തുന്നു.
09:33 ഇവിടെ ImageDisplayApp projectന്റെ Node ല്‍ റൈറ്റ് ക്ലിക്ക് ചെയ്ത് projects windowല്‍ നിന്ന് properties തെരഞ്ഞെടുക്കുക
09:41 Project Properties' Dialoge Boxല്‍ left sideല്‍ ഉള്ള Run കാറ്റഗറി തെരഞ്ഞെടുക്കുക
09:47 Main Class Fieldന് തൊട്ടടുത്തുള്ള Browse ബട്ടൺ ക്ലിക്ക് ചെയ്യുക
09:51 org.me.myimageapp.ImageDisplay തെരഞ്ഞെടുത്ത് Select Main Class ക്ലിക്ക് ചെയ്യുക
10:01 ഇവിടെ OK പറയാം
10:05 ഇപ്പോള്‍ Project nodeല്‍ റൈറ്റ് ക്ലിക്ക് ചെയ്ത് Clean & Build തെരഞ്ഞെടുക്കുക
10:11 Files Windowല്‍ നിന്ന് applicationന്റെ Build properties നിങ്ങള്‍ക്ക് കാണാന്‍ കഴിയും
10:20 'Build folderല്‍ compiled class ഉള്‍പ്പെട്ടിരിക്കുന്നു
10:23 dist folderല്‍ ഉള്‍പ്പെട്ടിരിക്കുന്ന executable JAR fileല്‍ compiled class ഉം image ഉം ഉള്‍ക്കൊള്ളുന്നു
10:32 ടൂള്‍ ബാറില്‍ നിന്നും 'Run' തെരഞ്ഞെടുക്കുക
10:34 നമ്മുടെ output' window ഇമേജോടുകൂടി തുറക്കുന്നതാണ്
10:39 ഞാനിപ്പോള്‍ ഇമേജില്‍ ക്ലിക്ക് ചെയ്യുന്നു
10:42 നിങ്ങള്‍ക്കിപ്പോള്‍ മുകള്‍ വശത്ത് ഇമേജിന്റെ ഡിസ്ക്രിപ്ഷൻ നോടു കൂടിയുള്ള pop-up കാണാന്‍ സാധിക്കും
10:50 ഇനി അസൈന്‍മെന്റിന്റെ സമയം
10:54 ഈ tutorialല്‍ വിശദമാക്കിയതിന് സമാനമായി നാല് ഇമേജുകള്‍ ഉള്‍ക്കൊള്ളുന്ന മറ്റൊരു GUI create ചെയ്യുക
11:01 ഓരോ ഇമേജിനും ഇവന്റുകള്‍ സ്പെസിഫിയ ചെയ്യേതാണ് അതായത് 'keyboard event, mouse-motion event, mouse-click event, mouse-wheel event' എന്നിങ്ങനെ
11:12 ഞാന്‍ ഇപ്പോള്‍ അസൈന്‍മെന്റ് ക്രിയേറ്റ് ചെയ്തുകഴിഞ്ഞു
11:17 ഇനി നമുക്ക് അസൈന്‍മെന്റ് project run ചെയ്യാം
11:20 നിങ്ങളുടെ അസൈന്‍മെന്റ് സമാനമായതായിരിക്കണം
11:26 എന്റെ അസൈന്‍മെന്റില്‍ ഇവിടെ ഞാന്‍ 'keyboard events'ഉം 'mouse Events'ഉം ക്രിയേറ്റ് ചെയ്തിട്ടു്
11:34 അതായത് ചുരുക്കത്തില്‍
11:36 നമ്മള്‍ ഒരു Jframe form ക്രിയേറ്റ് ചെയ്തു
11:39 ഇമേജില്‍ പാക്കേജുകള്‍ ആഡ് ചെയ്തു
11:41 ലേബൽ ല്‍ ഇമേജ് ഡിസ്പ്ലേ ചെയ്തു
11:44 mouse events ഉം pop-up ഉം ക്രിയേറ്റ് ചെയ്തു
11:49 ഈ സ്‌ക്രീനിലെ link കാണുന്ന വീഡിയോ ലഭ്യമാണ്
11:53 'സ്പോക്കൺ ട്യൂട്ടോറിയൽ പ്രൊജക്റ്റ് ' 'സംഗ്രഹിക്കുന്നു.
11:56 നിങ്ങൾക്ക് നല്ല ബാൻഡ് വിഡ്ത്ത് ഇല്ലെങ്കിൽ, അത് ഡൌൺലോഡ് ചെയ്ത് കാണാൻ കഴിയും.
12:02 സ്പോക്കൺ ട്യൂട്ടോറിയൽ പ്രോജക്ട് ടീം: സ്പോക്കൺ ട്യൂട്ടോറിയലുകൾ ഉപയോഗിച്ച് വർക്ക്ഷോപ്പുകൾ നടത്തുന്നു.
12:07 ഓൺലൈൻ ടെസ്റ്റ് പാസാകുന്നവർക്ക് സർട്ടിഫികറ്റുകൾ നല്കുന്നു.
12:11 കൂടുതൽ വിവരങ്ങൾക്ക് ദയവായി ഈ വിലാസത്തിൽ എഴുതുക: 'contact@spoken-tutorial.org'
12:19 'സ്പോക്കൺ ട്യൂട്ടോറിയൽ പ്രോജക്റ്റ്' ടോക്ക് ടു എ ടീച്ചർ പദ്ധതിയുടെ ഭാഗമാണ്.
12:23 ഇതിനെ പിന്തുണക്കുന്നത് നാഷണൽ മിഷൻ ഓൺ എഡ്യൂക്കേഷൻ ത്രൂ ഐസിടി, എംഎച്ച്ആർഡി, ഗവർമെന്റ് ഓഫ് ഇന്ത്യ.
12:30 ഈ മിഷനെ കുറിച്ചുള്ള കൂടുതൽ വിവരങ്ങൾ ലഭ്യമാണ്: 'spoken-tutorial.org/NMEICT-Intro.' '
12:42 ഈ ട്യൂട്ടോറിയൽ സംഭാവന നൽകിയത് 'IT FOR CHANGE ' ആണ്.
12:46 ഞങ്ങളോടൊപ്പം ചേരുന്നതിന് നന്ദി.

Contributors and Content Editors

Vijinair