Netbeans/C2/Handling-Images-in-a-Java-GUI-Application/Gujarati - Revision history

PoojaMoolya at 07:17, 14 July 2014

2014-07-14T07:17:47Z

Show changes

Jyotisolanki at 11:39, 10 July 2014

2014-07-10T11:39:04Z

Jyotisolanki at 12:38, 27 June 2014

2014-06-27T12:38:08Z

Jyotisolanki at 05:03, 27 June 2014

2014-06-27T05:03:26Z

Jyotisolanki at 06:44, 17 June 2014

2014-06-17T06:44:44Z

Show changes

Jyotisolanki at 14:42, 16 June 2014

2014-06-16T14:42:00Z

Show changes

Jyotisolanki at 11:27, 16 June 2014

2014-06-16T11:27:54Z

Jyotisolanki at 11:20, 16 June 2014

2014-06-16T11:20:41Z

Jyotisolanki at 11:14, 16 June 2014

2014-06-16T11:14:19Z

Show changes

Jyotisolanki: Created page with '{| Border=1 || Time || Narration |- | 00.01 |Hii everyone. |- | 00.02 | Welcome to this tutorial on '''Handling Images in a Java GUI Application using Netbeans IDE. ''' |-…'

2014-06-16T04:30:38Z

Created page with '{| Border=1 || Time || Narration |- | 00.01 |Hii everyone. |- | 00.02 | Welcome to this tutorial on '''Handling Images in a Java GUI Application using Netbeans IDE. ''' |-…'

New page

{| Border=1

|| Time

|| Narration

|-
| 00.01
|Hii everyone.

|-
| 00.02
| Welcome to this tutorial on '''Handling Images in a Java GUI Application using Netbeans IDE. '''

|-
|00.10
|We assume that you have the basic working knowledge of Netbeans.

|-
|00.15
|We also assume that you know to place '''text fields, buttons, menus,''' etc. on a '''JFrame form. '''

|-
| 00.22
| If not, then please visit the Spoken Tutorial website for relevant tutorials on Netbeans.

|-
|00.29
|In this tutorial, we will learn in detail about handling images

|-
| 00.34
|And perform actions on them, in a sample '''GUI''' application.

|-
|00.39
|For this demonstration, I am using the Linux Operating System Ubuntu v11.04 and Netbeans IDE v7.1.1

|-
| 00.52
|The standard way to handle and access images in a Java Application is by using the '''getResource()''' method.

|-
| 00.59
| We will learn how to use the IDE's GUI Builder to generate the code to include images in your application,

|-
|01.07
|and create a simple Jframe with one Jlabel displaying an image.

|-
|01.13
|In this tutorial, we will -

|-

|01.15

|Create the application form

|-

|01.18
|Add a package for the image

|-

| 01.20

|Display the image on the Label

|-

|01.22

|Create mouse-events and pop-ups

|-

|01.25

|Build and run the application

|-

|01.28

|Now let us switch to the '''IDE''' to create our sample application.

|-

|01.33

|From the '''File''' menu, choose '''New Project. '''

|-

|01.37

|Under '''Categories ''', select '''Java''', under '''Projects''' select ''' Java Application''' and click '''Next. '''

|-

|01.46

| In the '''Project Name''' field, type '''ImageDisplayApp. '''

|-

| 01.54

|Clear the ''' Create Main Class''' checkbox.

|-

| 01.58

|Make sure that the '''Set as Main Project''' checkbox is selected.

|-
| 02.03
|Click '''Finish.''' The project is created in your IDE.

|-
| 02.08
|In this section, we will create the '''Jframe form''' and add a '''Jlabel''' to the form.

|-
| 02.14
|Let us first create the '''Jframe form. '''

|-
| 02.17
|In the '''Projects''' window, expand the ''' ImageDisplayApp''' node.

|-
| 02.23
|Right-click on the '''Source Packages''' node and choose ''' New''', '''Jframe form.'''

|-
|02.30
|In the '''Class Name''' field, type '''ImageDisplay. '''

|-
|02.37
| In the '''Package''' field, type '''org.me.myimageapp.'''

|-
|02.45
| And Click '''Finish. '''

|-
|02.48
|Now let us add the '''Jlabel. '''

|-
| 02.52
|In the '''Palette,''' on the right hand side of the IDE, select the '''Label''' component and drag it to the '''Jframe.'''

|-
| 03.01
|For now, your form should look something like this.

|-

|03.06

|When you use images or other resources in an application, typically you create a separate Java package for the resource.

|-

|03.15

|On your local file system, a package corresponds with a folder.

|-

| 03.19

|In the '''Projects''' window, right-click the '''org.me.myimageapp''' node and choose '''New > Java Package.'''

|-

| 03.30

|In the '''New Package Wizard,''' add '''.resources''' to '''org.me.myimageapp.'''

|-

| 03.40

|So the new package is now called '''org.me.myimageapp.resources.'''

|-

| 03.47

|Click '''Finish. '''

|-

| 03.49

|In the '''Projects''' window, you should see the image appear within the '''org.me.myimageapp.resources''' package, when you add the image.

|-

| 03.59
|In this application, the image will be embedded within a '''Jlabel''' component.

|-
| 04.04
| Let us now add the image to the label.

|-

| 04.08
|In the '''GUI designer''', select the label that you have added to your form.

|-

| 04.14

|In the '''Properties''' window, below the palette, on the right hand side of the window, scroll to the '''Icon''' property.

|-

| 04.23

| Click the '''ellipsis (...)''' or the three dots on the right side.

|-

| 04.30

|In the '''Icon Property''' dialog box, click '''Import to Project.'''

|-
| 04.34
|In the file chooser, navigate to the folder that contains your image that you want to use.

|-

| 04.42

|Click '''Next. '''

|-
| 04.45
|In the '''Select Target Folder''' page of the wizard, select the '''Resources''' folder.

|-
| 04.49
|And click '''Finish. '''

|-

| 04.52

|After you click '''Finish,''' the IDE copies the image to your project.
|-

| 04.57

|Therefore, when you build and run the application, the image is included in the distributable '''JAR''' file.

|-

| 05.07

|Click '''OK''' here.

|-

| 05.11

| And right click on your project node and select ''' Clean and Build''' option.
|-

| 05.18

|You can now go to the '''Files''' menu, and under the '''build''' folder,

|-

| 05.29

| under '''dist''' folder, you can see the '''jar''' file.

|-

| 04.33

|It generates the code in the imagedisplay class to access the image.

|-

| 05.38

|It also displays your image on the label in the '''Design''' view of your form.

|-
| 05.43
|At this point, you can do some simple things to improve the appearance of the form.

|-

| 05.48

|In the '''Properties''' window, select the '''Text''' property
|-

| 05.56

|and delete '''jLabel1.'''

|-

| 06.04

|That value was generated by the '''GUI Builder''' as display text for the label.

|-

| 06.10

|However, you are using the label to display an image rather than text.

|-

| 06.15

|So this text is not needed.

|-

| 06.18

|Now let us drag the '''label''' to center it on the form.

|-

| 06.26

|In the '''GUI Designer,''' click the ''' Source''' tab.

|-
| 06.30
|Scroll down to the line that says ''' Generated Code.'''
|-

| 06.33

| And click the plus sign (+) to the left of the ''' Generated Code''' line to display the code that the ''' GUI Designer''' has generated.

|-
| 06.42
|Here, the keyline is this.

|-

| 06.49

|Since you have used the ''' Property editor''' for ''' jLabel1'''s icon property, the '''IDE''' has generated the '''setIcon''' method.

|-

| 06.57

|The parameter of that method contains a call to the ''' getResource()''' method on an anonymous inner class of '''ImageIcon. '''

|-

| 07.10

|Once your image has been added, in the ''' Design''' view right-click on the image.

|-

| 07.19

|Click on '''Events > Mouse > mouseClicked.'''

|-

| 07.24

|The view is switched to the '''Source''' mode.

|-

| 07.28

|Here you can add the code to customize your action on a mouse click.

|-

| 07.33

|Let me add a few lines of code to generate a '''pop-up''' when the image is clicked in the GUI.

|-

| 08.00

|I have now entered a few lines of code to generate the pop-up.

|-

| 08.05

|First I have created a new ''' Jframe''' for the pop-up.

|-

| 08.12

|And I have set the default close operation.

|-

| 08.15

|And finally provided the text for the '''pop-up. '''
|-

| 08.24

|After adding these lines of code, let us import the necessary packages by adding two statements at the beginning of the file.

|-
| 08.36
|Include: ''' import javax.swing.*; '''

|-
| 08.45
|and ''' import java.awt.*; '''

|-
| 08.53
|This will import the necessary packages required for this program.
|-

| 08.59

|Let us now build and run the application.

|-

| 09.02

|We have generated the code for accessing and displaying the image.

|-

| 09.07

|Let us build and run the application to ensure that the image is accessed.

|-

| 09.12

|First, we need to set the project's ''' Main class.'''

|-

| 09.16

|When you set the ''' Main class''', the ''' IDE''' knows which class to run when you run the project.

|-

| 09.21

|In addition, this ensures that the '''Main class''' element in the application's '''JAR''' file is generated when you build the application.
|-

| 09.33

|Here right-click on the '''ImageDisplayApp''' project's '''Node''' in the Projects window, and choose '''Properties. '''

|-

| 09.41

|In the '''Project Properties''' dialog box, select the '''Run''' category on the left side.

|-

| 09.47

|Click the '''Browse''' button, that is next to the '''Main Class''' field.

|-

| 09.51

|Select ''' org.me.myimageapp.ImageDisplay''' and click on ''' Select Main Class'''

|-

| 10.01

|Say OK here.

|-

| 10.05

|Now right-click on the ''' Project node,''' and select '''Clean & Build. '''

|-

| 10.11

|You can view the '''Build ''' properties of the application in the ''' Files''' window.

|-

| 10.20

|The '''Build''' folder contains the compiled class.

|-

| 10.23

|The '''dist''' folder contains an executable JAR file that contains the compiled class and the image.

|-

| 10.32

|Now choose '''Run''' from the tool bar.

|-

| 10.34

|Our output window opens with the image.

|-

| 10.39

|I will click on this image now.

|-

| 10.42

|And you can see the pop-up at the top, which shows the description of the image.

|-

| 10.50

|Now, time for the assignment!

|-

| 10.54

|Create another GUI with four images, similar to the demonstration shown in this tutorial,

|-

| 11.01

|For each of the image, specify different events such as '''keyboard event, mouse-motion event, mouse-click event, mouse-wheel event''' .

|-

| 11.12

|I have already created the assignment.

|-

| 11.17

|Let us run the assignment project.
|-

| 11.20

| Your assignment should look similar to this.

|-

| 11.26

|I have created keyboard-events and mouse events for my assignment here.

|-

| 11.34

|So, to summarize,

|-

| 11.36

|we have, created a Jframe form

|-

| 11.39

|added a package for the image

|-

| 11.41

|displayed the image on the label

|-

| 11.44

|and also created mouse events and pop-ups

|-

| 11.49

|Watch the video available at the link shown on the screen.

|-

| 11.53

|It summarizes the Spoken Tutorial project.

|-

| 11.56

|If you do not have good bandwidth, you can download and watch it.

|-

| 12.02

|The Spoken Tutorial project team conduct workshops using Spoken Tutorials.

|-

| 12.07

|Gives certificates to those who pass an online test.

|-

| 12.11

|For more details please write to contact@spoken-tutorial.org

|-

| 12.19

|Spoken Tutorial Project is a part of the Talk to a Teacher Project

|-

| 12.23

| It is Supported by the National Mission on education through ICT, MHRD, Government of India

|-

| 12.30

|More information on this mission is available at spoken-tutorial.org/NMEICT-Intro

|-

| 12.42

|This tutorial has been contributed by IT for Change

|-

| 12.46

|Thank you for joining us.

@@ Line 143: / Line 143: @@
 |-
 | 03.06
-| જ્યારે એક એપ્લીકેશનમાં તમે ઈમેજો અથવા અન્ય સ્ત્રોતોનો ઉપયોગ કરો છો, સામાન્ય રીતે તમે સ્ત્રોત માટે એક જુદું જાવા પેકેજ બનાવો છો.
+| જ્યારે એક એપ્લીકેશનમાં તમે ઈમેજો અથવા અન્ય સ્ત્રોતો ઉપયોગ કરો છો, સામાન્ય રીતે તમે સ્ત્રોત માટે એક જુદું જાવા પેકેજ બનાવો છો.
 |-
@@ Line 247: / Line 247: @@
 |-
 | 05.48
-| '''Properties''' (પ્રોપર્ટીઝ) વિન્ડોમાં, '''Text''' (ટેક્સ્ટ) પ્રોપર્ટી પસંદ કરો
+| '''Properties''' (પ્રોપર્ટીઝ) વિન્ડોમાં,  પ્રોપર્ટી પસંદ કરો
 |-
@@ Line 439: / Line 439: @@
 |-
 | 11.17
-| ચાલો એસાઈનમેંટ પ્રોજેક્ટને રન કરીએ.
+| ચાલો એસાઈનમેંટ પ્રોજેક્ટ રન કરીએ.
 |-

@@ Line 23: / Line 23: @@
 |-
 | 00.22
-| જો નથી, તો કૃપા કરી નેટબીન્સ પર સંદર્ભિત ટ્યુટોરીયલો માટે સ્પોકન ટ્યુટોરીયલ વેબસાઈટની મુલાકાત લો.
+| જો નથી, તો નેટબીન્સ પર સંદર્ભિત ટ્યુટોરીયલો માટે સ્પોકન ટ્યુટોરીયલ વેબસાઈટની મુલાકાત લો.
 |-
 | 00.29
-| આ ટ્યુટોરીયલમાં, આપણે વિગતમાં જાણીશું ઈમેજો સંભાળવા વિશે
+| આ ટ્યુટોરીયલમાં, આપણે વિગતમાં જાણીશું ઈમેજો સંભાળવા વિશે.
 |-
@@ Line 55: / Line 55: @@
 |-
 | 01.15
-| '''application form'''  (એપ્લીકેશન ફોર્મ) બનાવવાનું
+| '''application form'''  (એપ્લીકેશન ફોર્મ) બનાવવાનું,
 |-
 | 01.18
-| ઈમેજ માટે '''package'''  (પેકેજ)  ઉમેરવાનું
+| ઈમેજ માટે '''package'''  (પેકેજ)  ઉમેરવાનું,
 |-
@@ Line 71: / Line 71: @@
 |-
 | 01.25
-| એપ્લીકેશન બીલ્ડ કરીને રન કરવી
+| એપ્લીકેશન બીલ્ડ કરીને રન કરવી.
 |-
@@ Line 235: / Line 235: @@
 |-
 | 05.33
-| ઈમેજ એક્સેસ કરવા માટે તે '''imagedisplay''' (ઈમેજડિસ્પ્લે) ક્લાસમાં કોડ બનાવે છે.
+| ઈમેજ એક્સેસ કરવા માટે '''imagedisplay''' (ઈમેજડિસ્પ્લે) ક્લાસમાં કોડ બનાવે છે.
 |-
@@ Line 455: / Line 455: @@
 |-
 | 11.36
-| આપણે '''Jframe''' (જેફ્રેમ) ફોર્મ બનાવ્યું
+| આપણે '''Jframe''' (જેફ્રેમ) ફોર્મ બનાવ્યું ,
 |-
 | 11.39
-| ઈમેજ માટે પેકેજ ઉમેર્યું
+| ઈમેજ માટે પેકેજ ઉમેર્યું.
 |-
 | 11.41
-| ઈમેજને લેબલ પર દર્શાવી
+| ઈમેજને લેબલ પર દર્શાવી.
 |-
 | 11.44
-| અને સાથે જ બનાવ્યા માઉસ ઇવેન્ટો અને પોપ-અપ
+| અને સાથે જ બનાવ્યા માઉસ ઇવેન્ટો અને પોપ-અપ .
 |-

@@ Line 15: / Line 15: @@
 |-
 | 00.10
-| અમે એ માનીને ચાલીએ છીએ કે તમને નેટબીન્સ પર કામ કરવાની સામાન્ય જાણકારી છે.
+| અમે એ માનીને ચાલીએ છીએ કે તમને '''Netbeans'''  (નેટબીન્સ) પર કામ કરવાની સામાન્ય જાણકારી છે.
 |-
@@ Line 35: / Line 35: @@
 |-
 | 00.39
-| આ ડેમોનસ્ટ્રેશન માટે, હું લીનક્સ ઓપરેટીંગ સીસ્ટમ ઉબુન્ટુ આવૃત્તિ 11.04 અને નેટબીન્સ આઈડીઈ આવૃત્તિ 7.1.1 વાપરી રહ્યી છું
+| આ ''' demonstration'''  (ડેમોનસ્ટ્રેશન) માટે, હું લીનક્સ ઓપરેટીંગ સીસ્ટમ ઉબુન્ટુ આવૃત્તિ 11.04 અને નેટબીન્સ આઈડીઈ આવૃત્તિ 7.1.1 વાપરી રહ્યી છું
 |-
@@ Line 55: / Line 55: @@
 |-
 | 01.15
-| એપ્લીકેશન ફોર્મ બનાવવાનું
+| '''application form'''  (એપ્લીકેશન ફોર્મ) બનાવવાનું
 |-
 | 01.18
-| ઈમેજ માટે પેકેજ ઉમેરવાનું
+| ઈમેજ માટે '''package'''  (પેકેજ)  ઉમેરવાનું
 |-
 | 01.20
-| લેબલ પર ઈમેજ દર્શાવવાનું
+| '''Label'''  (લેબલ) પર ઈમેજ દર્શાવવાનું.
 |-
 | 01.22
-| માઉસ-ઇવેન્ટ અને પોપ-અપ બનાવવાનું
+| માઉસ-ઇવેન્ટ અને પોપ-અપ બનાવવાનું .
 |-

@@ Line 542: / Line 542: @@
 |-
 | 11.12
+| મેં પહેલાથી જ એસાઈનમેંટ બનાવી લીધો છે.
-|I have already created the assignment.
 |-
 | 11.17
 |-
 | 11.20
+| તમારો એસાઈનમેંટ આ પ્રકારે દેખાવવો જોઈએ.
-| Your assignment should look similar to this.
-−
 |-
 | 11.26
+| મેં અહીં મારા એસાઈનમેંટ માટે કીબોર્ડ-ઇવેન્ટો અને માઉસ ઇવેન્ટો બનાવ્યા છે.
-|I have created keyboard-events and mouse events for my assignment here.
 |-
 | 11.34
+| તો, સારાંશમાં,
-|So, to summarize,
 |-
 | 11.36
+| આપણે '''Jframe''' (જેફ્રેમ) ફોર્મ બનાવ્યું
-|we have, created a Jframe form
 |-
 | 11.39
+| ઈમેજ માટે પેકેજ ઉમેર્યું
-|added a package for the image
 |-
 | 11.41
+| ઈમેજને લેબલ પર દર્શાવી
-|displayed the image on the label
 |-
 | 11.44
+| અને સાથે જ બનાવ્યા માઉસ ઇવેન્ટો અને પોપ-અપ
-|and also created mouse events and pop-ups
-−
 |-

@@ Line 597: / Line 597: @@
 |-
 | 11.49
+| સ્ક્રીન પર દર્શાવેલ લીંક પર ઉપલબ્ધ વિડીયો નિહાળો.
-|Watch the video available at the link shown on the screen.
 |-
 | 11.53
+| તે સ્પોકન ટ્યુટોરીયલ પ્રોજેક્ટનો સારાંશ આપે છે.
-|It summarizes the Spoken Tutorial project.
 |-
 | 11.56
+| જો તમારી પાસે સારી બેન્ડવિડ્થ ન હોય તો, તમે વિડીયો ડાઉનલોડ કરીને જોઈ શકો છો.
-|If you do not have good bandwidth, you can download and watch it.
 |-
 | 12.02
+| સ્પોકન ટ્યુટોરીયલ પ્રોજેક્ટ ટીમ સ્પોકન ટ્યુટોરીયલોનાં ઉપયોગથી વર્કશોપોનું આયોજન કરે છે.
-|The Spoken Tutorial project team conduct workshops using Spoken Tutorials.
-−
 |-
 | 12.07
+| જેઓ ઓનલાઈન પરીક્ષા પાસ કરે છે તેઓને પ્રમાણપત્રો આપે છે.
-|Gives certificates to those who pass an online test.
-−
 |-
 | 12.11
+| વધુ વિગતો માટે '''contact@spoken-tutorial.org''' પર લખો
-|For more details please write to contact@spoken-tutorial.org
-−
 |-
 | 12.19
+| સ્પોકન ટ્યુટોરીયલ પ્રોજેક્ટ ટોક ટુ અ ટીચર પ્રોજેક્ટનો એક ભાગ છે
-|Spoken Tutorial Project is a part of the Talk to a Teacher Project
 |-
 | 12.23
+| જેને આઈસીટી, એમએચઆરડી, ભારત સરકાર મારફતે શિક્ષણ પર નેશનલ મિશન દ્વારા આધાર અપાયેલ છે
-| It is Supported by the National Mission on education through ICT, MHRD, Government  of India
 |-
 | 12.30
+| આ મિશન પરની વધુ માહિતી '''spoken-tutorial.org/NMEICT-Intro''' પર ઉપલબ્ધ છે
-|More information on this mission is available at spoken-tutorial.org/NMEICT-Intro
 |-
 | 12.42
+| આ ટ્યુટોરીયલ માટે યોગદાન '''IT for Change''' દ્વારા અપાયું છે
-|This tutorial has been  contributed by  IT for Change
-−
 |-
 | 12.46
+| અમને જોડાવાબદ્દલ આભાર. આઈઆઈટી બોમ્બે તરફથી હું, જ્યોતી સોલંકી વિદાય લઉં છું.
-|Thank you for joining us.