Difference between revisions of "Netbeans/C2/Handling-Images-in-a-Java-GUI-Application/English-timed"

Revision as of 16:27, 14 July 2015

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.
05: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 jLabel1s 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.

Contributors and Content Editors

PoojaMoolya, Pratik kamble, Sandhya.np14

Difference between revisions of "Netbeans/C2/Handling-Images-in-a-Java-GUI-Application/English-timed"

Revision as of 16:27, 14 July 2015

Contributors and Content Editors

Navigation menu

Personal tools

Namespaces

Variants

Views

Actions

Search

Navigation

Tools

@@ Line 31: / Line 31: @@
 | 00:34
 |And perform actions on them, in a sample '''GUI''' application.
 |-
@@ Line 48: / Line 47: @@
 |01:07
 |and create a simple Jframe with one Jlabel displaying an image.
 |-
@@ Line 55: / Line 53: @@
 |-
 |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.
@@ Line 134: / Line 103: @@
 | 02:08
 |In this section, we will create the '''Jframe form''' and add a '''Jlabel''' to the form.
 |-
@@ Line 171: / Line 139: @@
 | 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.
 |-
@@ Line 235: / Line 177: @@
 |-
 | 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.'''
@@ Line 268: / Line 197: @@
 |-
 | 04:42
 |Click '''Next. '''
@@ Line 282: / Line 209: @@
 |-
 | 04:52
+|After you click '''Finish,''' the IDE copies the image to your project.
-|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.
-| 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.
 |-
 | 05: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.
@@ Line 331: / Line 243: @@
 | 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
-|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.
@@ Line 391: / Line 283: @@
 | 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.
@@ Line 474: / Line 335: @@
 | 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.
-|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'''
-|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.
-|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.