Difference between revisions of "Netbeans/C2/Designing-GUI-for-Sample-Java-Application/English-timed"

Latest revision as of 10:30, 15 March 2017

Time	Narration
00:01	Hello everyone. Welcome to the tutorial on Building GUIs using Netbeans.
00:06	In this tutorial, we will see one of the most attractive features of Netbeans which is its GUI Builder.
00:13	What does Netbeans provide for building GUI?
00:16	It gives you a What You See Is What You Get designer to create your GUI.
00:21	Also, it gives you an easy interface to drag-and-drop components to create your layout.
00:27	It comes with a component Palette with pre installed AWT and Swing components.
00:33	We will be making use of this powerful visual editor to build a complete GUI application in just a few minutes.
00:39	For this demonstration, I'm using a system that has
00:43	the Linux Operating system Ubuntu version 11.04
00:46	and Netbeans IDE version 7.1.1.
00:50	For more details on the installation and requirements, please refer to the previous tutorial.
00:56	In this tutorial, we will learn to:
00:58	Use the Form Editor
01:00	The Source Editor The Palette, Inspector and Properties features
01:05	Add event handlers and also
01:07	Compile and run our application.
01:10	Let's get started and build a simple Account balance application in this tutorial.
01:15	For this application, we want to be able to-
01:18	Input the amount credited to the account.
01:21	The amount debited from the account.
01:24	And compute the final balance.
01:26	We will also add a picture to make our application look more attractive.
01:31	Let's also have a menu bar on top for easy and quick navigation.
01:35	Let's now move to netbeans and start by creating a new project.
01:40	From the File menu, choose New Project > and choose a Java Application. Say Next
01:49	and give your project a name.
01:51	I will name my project as "Account balance".
01:58	Don't create a Main Class but set it as the Main Project.
02:02	Say Finish. That should create a new project in your IDE.
02:07	Now, go back to File in the File menu and select New File .
02:15	Choose Swing GUI Forms, under Categories
02:18	and Jframe Form, under File Type.
02:21	Say Next.
02:24	I'm going to call this "AccountBalance" as well.
02:29	But you can give it any other name you wish to.
02:33	Once you say Finish, it takes you to the main Design area.
02:39	Let's get familiar with the GUI builder.
02:43	On the right, here is the Palette.
02:45	This contains the pre-installed Swing and AWT components.
02:49	Down here, below the palette, is the Properties window.
02:53	This shows you the properties of the components as you choose them.
02:58	On the left, here is the Navigator or the inspector
03:01	which shows you the components that have been added to the frame
03:05	here, on the workspace, in the Design mode.
03:08	On the top, here is the Source button.
03:11	When you click on it, it takes you to the source code.
03:15	As you add components to the design,
03:18	it takes the corresponding source code and adds it to the source here.
03:23	Let's go back to Design mode and see what components we'll use today.
03:28	We will be using some of the components from the palette
03:31	such as Buttons, Labels, Panels, Tabbed pane etc. to create our applications.
03:38	Now, from the Palette, let us choose a Tabbed Pane under swing Containers.
03:45	Select Tabbed Pane and click on the form.
03:50	This should give you a Tabbed frame. You can re-size it using your mouse.
03:58	Now, go back to the Palette and choose a Panel.
04:02	And click again on your frame.
04:06	That should give you a tab.
04:09	Go back and choose another Panel. And click on the form again.
04:14	That gives you 2 tabs totally.
04:17	Now, you can rename the tab by either double-clicking on the tab or right-clicking on the tab and selecting the Edit Text option.
04:29	I will call the first tab as "Image" and rename the second tab to "Balance".
04:37	Now, let's go back to the Palette and add labels from Swing Controls menu.
04:43	Choose Label from the Swing Controls and add it to your form here.
04:48	We are going to need 6 labels for our application.
04:54	I have now added six labels to my form.
04:58	You can position and align them as you click them.
05:02	And, also use the mouse to re-position or re-align them.
05:06	Now, to change the text on a label-
05:08	You can either double-click on it or right-click on it
05:12	and choose the option Edit Text.
05:14	Let us rename the labels now.
05:16	I'm going to call the first one as "Initial Amount",
05:22	the second label as "Credit Amount",
05:30	the third one as "Debit Amount"
05:35	and the fourth one as "Balance".
05:41	Initially, we'll set the Initial Amount to be Rs 5000.
05:48	Once we compute the balance, we can put it into this label.
05:53	But for now, we will just make it as stars.
06:01	Now, go back to the Palette and choose a Text Field and we will add two text fields, one each next to the Credit Amount and to the Debit Amount.
06:16	We should also leave the Text field places blank.
06:20	Let me edit the text and remove the existing text here.
06:27	Let us resize it using the mouse.
06:35	Once you have done that, you can now go back to palette and choose a Button.
06:42	Add the button below your frame and
06:48	you can change the label by right-clicking on it.
06:53	Choose the Edit Text option and name it as "Get Balance".
06:58	Now, this is our GUI!
07:01	Let's now go to the Image tab (tab1) and add an image.
07:05	To do that, let's go back to the Palette
07:08	and choose another Label and drop it on the panel.
07:13	Now, from the Properties window below the palette, search for the icon property and click on the 3 dots here, on the right.
07:26	The icon properties window opens.
07:28	Here, choose the option External Image, click on the (...) 3 dots again here, on the right.
07:35	And, look for the image you want to include in your application.
07:41	I have selected the image here. Click on OK.
07:48	Let us re-position it using the mouse.
07:51	You can remove the text here on the label by double-clicking on it and removing the text.
07:59	Now we have added in image.
08:02	Let us next add a menu to our GUI.
08:05	Go to the palette and select the Menu bar option, under swing menus.
08:12	Choose Menu Bar and click here on top of the panel.
08:17	By default, it already has 2 menu labels: File and Edit.
08:22	Double-click on the Edit Text and rename it to Help.
08:28	You can also add a sub-menu under File.
08:32	Now, in the Inspector or the Navigator on the left side, right-click on JMenu1.
08:39	Choose Add From Palette option and select Menu Item.
08:45	That should add a Menu Item.
08:47	You can also rename that to say Exit.
08:54	Now, we have added a sub-menu under the File menu and renamed that menu item as well.
09:00	Now, our GUI is more or less complete.
09:03	Let's now look at a preview.
09:05	Click on the 'Preview Design' button on the top.
09:09	That shows a preview of what you have done so far.
09:12	Here, the buttons don't work yet.
09:16	But once you add in the code, you can have everything working.
09:20	Let us close the preview.
09:22	Now, before adding the code, let's give proper variable names to the input text fields.
09:28	Go to the Balance tab, let us give proper variable names to these text fields here.
09:34	Right-click on JTextfield1 in the inspector.
09:40	Select Change Variable Name.
09:43	Let us change the variable name to "creditAmount".
09:50	Click on OK.
09:53	You can also right-click on the text field here, in the Design mode.
09:56	Select Change Variable Name
10:00	and change variable name into "debitAmount".
10:04	Click on OK.
10:08	I'm also going to call this final label i.e. the stars text field's label as "resultBalance".
10:16	Select the Change Variable Name option again and change the variable to "resultBalance".
10:23	Click on OK.
10:25	Let's now see the code, to get the application working.
10:30	Now, this is my sample code.
10:32	What I want here is, to getText() from the "creditAmount";
10:37	getText() from the "debitAmount",
10:39	compute the balance and place the amount in the final "resultBalance".
10:44	Let us copy the code here and let us go back to the IDE.
10:51	Now, right-click on the Get Balance button.
10:55	Choose the option Events >> Action and Action Performed.
11:00	This will take you to the section of the code
11:03	where you will have to write or paste the code for the action to be performed on the button press.
11:10	Let me paste the copied code here.
11:17	Let's save this code and go back to the Design mode.
11:22	Now, let's add in the code to exit the application.
11:25	Right-click on the Menu Item >> Exit and choose Events >> Action and Action Performed.
11:40	It switches to the Source mode and now we have to write the code to exit successfully from the application.
11:46	That is going to be System.exit(1).
11:53	Now save the code and go back to Design mode.
11:57	Let us also add a shortcut to the Exit menu item.
12:02	Double-click on the shortcut option here, in the window that opens.
12:07	Give the key stroke as Q and Ctrl and click on OK.
12:14	So, now we have set Ctrl Q as the keyboard shortcut to quit from the application.
12:20	That's it. Our application is now complete..
12:23	Let's now run the application by pressing F6 on your keyboard.
12:30	It has already selected the main class that has to run.
12:33	Click on OK.
12:37	And, here it is! This is our GUI.
12:40	Now, let's run a check.
12:43	Go to the Balance tab, enter the Credit Amount with Rs. 300/-
12:47	and the Debit Amount as Rs. 200. And, say 'Get Balance'.
12:53	That gives us the correct amount in the Balance.
12:56	Let us now exit from the application.
12:58	I'll go to File menu and I'll click on Exit.
13:02	We could have also quit the application by pressing Ctrl Q on the keyboard.
13:08	Now, with the application complete, it's time for the assignment.
13:14	The task is to create a Temperature convertor application.
13:18	It should have two tabs like the previous one,
13:21	1 to convert from Celsius to Fahrenheit and another for Fahrenheit to Celsius.
13:27	It should also take an input temperature
13:30	and display the converted temperature.
13:33	It should also have a menu bar on top that shows File and Help options.
13:38	And, under the File menu, have an Exit item with a keyboard shortcut to exit from the application.
13:46	I have already solved the assignment.
13:48	Let us see how it should look.
13:50	I'm going to run my assignment and this is my GUI.
13:56	Now, let us enter the input temperature as -40 Celcius and let me click on Get Fahrenheit.
14:05	The application should give the correct converted output temperature.
14:10	Now, let us try the short-cut key to Exit i.e. Ctrl X to exit from the application.
14:18	So, we have successfully exited from the application upon the keyboard shortcut.
14:25	Watch the video available at the link shown on the screen.
14:29	It summarizes the Spoken Tutorial project.
14:32	If you do not have good bandwidth, you can download and watch the videos.
14:37	The Spoken Tutorial project team: * conducts workshops using Spoken Tutorials.
14:42	Gives certificates to those who pass an online test.
14:46	For more details please write to:contact@spoken-tutorial.org
14:52	Spoken Tutorial project is a part of the Talk to a Teacher Project,
14:56	supported by the National Mission on education through ICT, MHRD, Government of India.
15:03	More information on this mission is available at:spoken-tutorial.org/NMEICT-Intro.
15:13	This tutorial has been contributed by IT for Change.
15:17	Thank you for joining us.

Contributors and Content Editors

PoojaMoolya, Pratik kamble, Sandhya.np14

Difference between revisions of "Netbeans/C2/Designing-GUI-for-Sample-Java-Application/English-timed"

Latest revision as of 10:30, 15 March 2017

Contributors and Content Editors

Navigation menu

Personal tools

Namespaces

Variants

Views

Actions

Search

Navigation

Tools

@@ Line 5: / Line 5: @@
 |-
-| 00.01
+| 00:01
-|Hello everyone.
+|Hello everyone. Welcome to the tutorial on '''Build'''ing GUIs using '''Netbeans'''.
 |-
-| 00.02
+|00:06
-| Welcome to the tutorial on Building GUIs using Netbeans.
+|In this tutorial, we will see one of the most attractive features of Netbeans which is its '''GUI Builder'''.
 |-
-|00.06
+|00:13
-|In this tutorial, we will see one of the most attractive features of Netbeans, which is its GUI Builder.
-|-
-|00.13
 |What does Netbeans provide for building GUI?
 |-
-| 00.16
+| 00:16
-| It gives you a What You See Is What You Get designer to create your GUI.
+| It gives you a '''What You See Is What You Get''' designer to create your GUI.
 |-
-|00.21
+|00:21
-|Also it gives you an easy interface to drag-and-drop components to create your layout.
+|Also, it gives you an easy interface to drag-and-drop components to create your '''layout'''.
 |-
-| 00.27
+| 00:27
-|It comes with a Component Palette which has preinstalled AWT and Swing components.
+|It comes with a component '''Palette''' with  pre installed AWT and '''Swing''' components.
 |-
-| 00.33
+| 00:33
-|We will be making use of this powerful visual editor to build a complete GUI application in just a few minutes.
+|We will be making use of this powerful visual editor to build a complete '''GUI application''' in just a few minutes.
 |-
-|00.39
+|00:39
-|For this demonstration I'm using a system that has
+|For this demonstration, I'm using a system that has
 |-
-| 00.43
+| 00:43
-|The Linux Operating system Ubuntu v11.04
+|the '''Linux Operating system Ubuntu''' version '''11.04'''
 |-
-| 00.46
+| 00:46
-| and has the Netbeans   IDE  v7.1.1
+| and '''Netbeans IDE''' version '''7.1.1'''.
 |-
-|00.50
+|00:50
-|For more details on the installation and requirements please refer to the previous tutorial.
+|For more details on the installation and requirements, please refer to the previous tutorial.
 |-
-|00.56
+|00:56
-|In this tutorial we will learn to
+|In this tutorial, we will learn to:
 |-
+|00:58
-|00.58
+|Use the '''Form Editor'''
-|Use the Form Editor
 |-
+|01:00
-|01.00
+| The '''Source Editor''' The '''Palette, Inspector''' and '''Properties''' features
-|The Source Editor
 |-
+| 01:05
-|01.02
+| Add '''event handler'''s and also
-|The Palette, Inspector, and Properties features
 |-
+| 01:07
-| 01.05
+|Compile and '''run''' our '''application'''.
-|Add event handlers
 |-
+|01:10
-| 01.07
+|Let's get started and '''build''' a simple '''Account balance application '''in this tutorial.
-|And also Compile and run our application
 |-
+|01:15
-|01.10
+|For this application, we want to be able to-
-|Let's get started and build a simple Account balance application in this tutorial
 |-
+|01:18
+|Input the amount '''credit'''ed to the account.
-|01.15
-|For this application we want to be able to
 |-
+|01:21
-|01.18
+|The amount '''debit'''ed from the account.
-|Input the amount credited to the account.
 |-
-|01.21
+|01:24
-|The amount debited from the account.
+| And compute the final '''balance'''.
 |-
+|01:26
-|01.24
+|We will also add a picture to make our '''application''' look more attractive.
-|And compute the final balance.
 |-
+|01:31
-|01.26
-|We will also add a picture to make our application look more attractive.
-|-
-|01.31
 | Let's also have a menu bar on top for easy and quick navigation.
 |-
+| 01:35
-| 01.35
+|Let's now move to '''netbeans''' and start by creating a new project.
-|Let's now move to netbeans and start by creating a new project.
 |-
+| 01:40
-| 01.40
+|From the '''File''' menu, choose '''New Project''' > and choose a '''Java Application'''. Say '''Next'''
-|Fron the '''File''' menu choose '''New Project''' > and choose a '''Java Application'''. Say Next.
 |-
-| 01.49
+| 01:49
-|And give your project a name
+|and give your project a name.
 |-
-| 01.51
+| 01:51
-|I will name my project as '''Account balance. '''
+|I will name my project as "Account balance".
 |-
-| 01.58
+| 01:58
-|Don't create a main class but set it as the main project.
+|Don't create a '''Main Class''' but set it as the '''Main Project'''.
 |-
-| 02.02
+| 02:02
-|Say '''Finish''',' that should create a new project in your IDE
+|Say '''Finish'''.  That should create a new project in your IDE.
 |-
-|02.07
+|02:07
-| Now go back to '''File''' in the '''File menu''' and select  '''New File '''
+| Now, go back to '''File''' in the '''File menu''' and select  '''New File '''.
 |-
-|02.15
+|02:15
-| Choose '''Swing GUI''' forms under '''Categories'''
+| Choose '''Swing GUI Forms''', under '''Categories'''
 |-
-|02.18
+|02:18
-|and  '''Jframe Form''' under '''File Type'''
+|and  '''Jframe Form''', under '''File Type'''.
 |-
-| 02.21
+| 02:21
-|Say '''Next. '''
+|Say '''Next.'''
 |-
-| 02.24
+| 02:24
-|I'm going to call this '''AccountBalance''' as well,
+|I'm going to call this "AccountBalance" as well.
 |-
-| 02.29
+| 02:29
 |But you can give it any other name you wish to.
 |-
-|02.33
+|02:33
-|Once you say '''Finish''', it takes you to the main design area.
+|Once you say '''Finish''', it takes you to the main '''Design''' area.
 |-
+| 02:39
-| 02.39
+|Let's get familiar with the '''GUI builder'''.
-|Lets get familiar with the GUI builder.
 |-
+|02:43
-|02.43
+|On the right, here is the '''Palette'''.
-|On the right here is the palette
 |-
+|02:45
-|02.45
+|This contains the pre-installed '''Swing''' and '''AWT''' components.
-|This contains the pre-installed Swing and AWT components.
 |-
+| 02:49
-| 02.49
+|Down here, below the palette,  is the '''Properties''' window.
-|Down here below the palette  is the '''Properties''' window.
 |-
+| 02:53
-| 02.53
 |This shows you the properties of the components as you choose them.
 |-
+| 02:58
-| 02.58
+|On the left,  here is the '''Navigator''' or the '''inspector'''
-|On the left  here is the navigator or the inspector
 |-
+| 03:01
-| 03.01
+|which  shows you the components that have been added to the '''frame'''
-|which  shows you the components that have been added to the frame.
 |-
+| 03:05
-| 03.05
+|here, on the workspace, in the '''Design''' mode.
-|Here on the workspace in the design mode
 |-
+| 03:08
+|On the top, here is the '''Source''' button.
-| 03.08
-|On the top here is the '''Source''' button
 |-
+| 03:11
-| 03.11
+|When you click on it, it takes you to the '''source code'''.
-|When you click on it, it takes you to the source code.
 |-
-| 03.15
+| 03:15
 | As you add components to the design,
 |-
-| 03.18
+| 03:18
-|'it takes the corresponding source code and adds it to the source here.
+|it takes the corresponding source code and adds it to the source here.
 |-
+| 03:23
-| 03.23
 |Let's go back to '''Design''' mode and see what components we'll use today.
 |-
+| 03:28
-| 03.28
 |We will be using some of the components from  the palette
 |-
+| 03:31
-| 03.31
+| such as''' Buttons, Labels, Panels,  Tabbed pane''' etc. to create our applications.
-|  such as''' Buttons, Labels, Panels,  Tabbed pane''' etc to create our applications
 |-
+| 03:38
-| 03.38
+|Now, from  the  '''Palette''', let us choose a '''Tabbed Pane''' under '''swing Containers'''.
-|Now from  the  '''Palette''' let us choose a '''TabbedPane''' under swing Containers
 |-
+| 03:45
-| 03.45
+|Select '''Tabbed Pane''' and click on the '''form'''.
-|Select '''Tabbed Pane''' and click on the form
 |-
+| 03:50
+|This should give you a '''Tabbed frame'''. You can re-size it using your '''mouse'''.
-| 03.50
-|This should give you a Tabbed frame. You can re-size it using your mouse.
 |-
+| 03:58
+|Now, go back to the '''Palette''' and choose a '''Panel.'''
-| 03.58
-|Now Go back to the '''Palette''' and choose a '''Panel.'''
 |-
+| 04:02
-| 04.02
+|And click again on your '''frame'''.
-|And Click again on your frame
 |-
+| 04:06
-| 04.06
 |That should give you a tab.
 |-
+| 04:09
-| 04.09
+| Go back and choose another '''Panel'''. And click on the '''form''' again.
-| Go back and choose another '''Panel'''. And click on the form again
 |-
+| 04:14
-| 04.14
+|That gives you 2 tabs totally.
-|That gives you 2 tabs totally
 |-
+| 04:17
-| 04.17
+|Now, you can '''rename''' the tab by either double-clicking on the tab or right-clicking on the tab and selecting the '''Edit Text''' option.
-|Now you can Rename the tab by either double clicking on the tab or right clicking on the tab and selecting the '''Edit Text''' option
 |-
+| 04:29
-| 04.29
+|I will call the first tab as "Image" and rename the second tab to "Balance".
-|I will  call the first  tab as '''Image''' and rename the second tab to '''Balance'''
 |-
+| 04:37
-| 04.37
+|Now, let's go back to the '''Palette''' and add '''label'''s from  '''Swing Controls''' menu.
-|Now Let's go back to the Palette and add labels from  swing Controls menu
 |-
+| 04:43
-| 04.43
+|Choose '''Label''' from the '''Swing Controls''' and add it to your '''form''' here.
-|Choose '''Label''' from the Swing Controls and add it to your form here
 |-
+| 04:48
-| 04.48
+|We are going to need 6 labels for our '''application'''.
-|We are going to need 6 labels for our application.
 |-
+| 04:54
+|I have now added  six labels to my '''form'''.
-| 04.54
-|I have now added  six labels to my form
 |-
+| 04:58
-| 04.58
+|You can position and align them as you click them.
-|You can position and align them as you click them
 |-
+| 05:02
-| 05.02
+|And, also use the '''mouse''' to re-position or re-align them.
-|And also use the mouse to re-position or re-align them.
 |-
+| 05:06
-| 05.06
+|Now, to change the '''text''' on a label-
-|Now to change the text on a label
 |-
+| 05:08
-| 05.08
+|You can either double-click on it or right-click on it
-|You can either double click on it or right click on it
 |-
+| 05:12
-| 05.12
+|and  choose the option '''Edit Text.'''
-|and  choose the options '''Edit Text '''
 |-
+| 05:14
-| 05.14
+|Let us '''rename''' the labels now.
-|Let us rename  the labels now
 |-
+| 05:16
-| 05.16
+|I'm going to call the first one as "Initial Amount",
-|I'm going to call the first one as '''Initial Amount. '''
 |-
+| 05:22
-| 05.22
+|the second label as "Credit Amount",
-|The second label as '''Credit Amount. '''
 |-
+| 05:30
-| 05.30
+|the third one as "Debit Amount"
-|The third one as '''Debit amount'''
 |-
+| 05:35
-| 05.35
+|and the fourth one as "Balance".
-|And the fourth one as '''Balance'''
 |-
+| 05:41
-| 05.41
+|Initially, we'll set the '''Initial Amount''' to be Rs 5000.
-|Initially, we'll set the initial amount to be Rs 5000.
 |-
+| 05:48
-| 05.48
+|Once we compute the balance, we can put it into this label.
-|Once we compute the balance we can put it into this level
 |-
+| 05:53
-| 05.53
+|But for now, we will just make it as stars.
-|But for now we will just make it as stars
 |-
+| 06:01
-| 06.01
+|Now, go back to the '''Palette''' and choose a '''Text Field'''  and we will add two text fields, one each next to the '''Credit Amount''' and to the '''Debit Amount'''.
-|Now, go back to the Palette and choose a '''TextField'''  and we will add to text fields one each next to the credit amount and to the debit amount.
 |-
+| 06:16
-| 06.16
+|We should also leave the '''Text field''' places blank.
-|We should also leave the '''Textfield''' places blank.
 |-
+| 06:20
-| 06.20
+|Let me '''edit''' the text and remove the existing text here.
-|Let me edit the text and remove the existing text here
 |-
+| 06:27
-| 06.27
+|Let us '''resize''' it using the '''mouse'''.
-|Let us resize it using the mouse
 |-
+| 06:35
-| 06.35
 |Once you have done that, you can now go back to palette and choose a '''Button.'''
 |-
+| 06:42
-| 06.42
+|Add the button below your '''frame''' and
-|Add a button below your frame and
 |-
+| 06:48
-| 06.48
+|you can change the label by right-clicking on it.
-|You can change the label by right clicking on it.
 |-
+| 06:53
-| 06.53
+|Choose the '''Edit Text''' option and name it as "Get Balance".
-|Choose the '''Edit text''' option and name it as '''Get Balance'''
 |-
+| 06:58
-| 06.58
+|Now, this is our GUI!
-|Now this is our GUI!
 |-
+| 07:01
-| 07.01
+|Let's now go to the '''Image''' tab (tab1) and add an image.
-|Let's now go to the Image tab (tab1) and add an image.
 |-
+| 07:05
-| 07.05
+|To do that, let's go back to the '''Palette'''
-|To do that let's go back to the Palette
 |-
+| 07:08
-| 07.08
+|and choose another '''Label''' and drop it on the panel.
-|and choose another '''Label''', and drop it on the panel.
 |-
+| 07:13
-| 07.13
+|Now, from the '''Properties'''  window below the palette, search for the '''icon''' property and click on the 3 dots here, on the right.
-|Now from to Properties  Window below the palette, search for the icon property and click on the 3 dots here  on the right.
 |-
+| 07:26
-| 07.26
+|The '''icon properties''' window opens.
-|The icons properties windows opens
 |-
+| 07:28
-| 07.28
+|Here, choose the option '''External Image''', click on the (...) 3 dots again here, on the right.
-|Here choose the options '''External Image''', click on the (...) 3 dots again here on the right.
 |-
+| 07:35
-| 07.35
+|And, look for the image you want to include in your application.
-|And look for the image you want to include in your applicaton
 |-
+| 07:41
-| 07.41
+|I have selected the image here. Click on '''OK'''.
-|I have selected the image here. Click on '''OK'''
 |-
+| 07:48
+|Let us re-position it using the '''mouse'''.
-| 07.48
-|Let us repostion it using the mouse.
 |-
+| 07:51
-| 07.51
+|You can remove the text here on the label by double-clicking on it and removing the text.
-|You can remove the text here on the label  by double clicking on it and removing the text
 |-
+| 07:59
-| 07.59
+|Now we have added in image.
-|Now we have added in image
 |-
+| 08:02
-| 08.02
+|Let us next add a menu to our GUI.
-|Let us next add a menu to our GUI
 |-
+| 08:05
+|Go to the '''palette''' and select the '''Menu bar''' option, under '''swing menus'''.
-| 08.05
-|Go to the palette and select the '''Menu bar''' option under swing menus
 |-
+| 08:12
-| 08.12
+|Choose '''Menu Bar''' and click here on top of the panel.
-|Choose '''Menu Bar''' and click here on top of panel.
 |-
+| 08:17
+|By default, it already has 2 menu labels: '''File''' and '''Edit.'''
-| 08.17
-|By default it already has 2 Menu labels: '''File''' and '''Edit. '''
 |-
+| 08:22
-| 08.22
+|Double-click on the '''Edit Text''' and  rename it to '''Help.'''
-|Double click on the '''Edit text''' and  rename it to '''Help. '''
 |-
+| 08:28
+|You can also add a sub-menu  under '''File'''.
-| 08.28
-|You can also add a submenu  under File.
 |-
+| 08:32
-| 08.32
+|Now, in the '''Inspector''' or the '''Navigator''' on the left side, right-click on  '''JMenu1'''.
-|Now in the Inspector or the navigator on the left side , right-click on  '''JMenu1''' ,
 |-
+| 08:39
-| 08.39
+|Choose '''Add From Palette'''  option  and select '''Menu Item'''.
-|Choose Add From Palette  option  and Select Menu Item.
 |-
+| 08:45
-| 08.45
+|That should add a '''Menu Item.'''
-|That should add a '''MenuItem.'''
 |-
+| 08:47
+|You can also '''rename''' that to say '''Exit'''.
-| 08.47
-|You can also rename that to say Exit.
 |-
+| 08:54
+|Now, we have added a sub-menu under the '''File''' menu and renamed that menu item as well.
-| 08.54
-|Now we have added a submenu under the file menu and rename that menu item as well .
 |-
+| 09:00
-| 09.00
 |Now, our GUI is more or less complete.
 |-
+| 09:03
-| 09.03
+|Let's now look at a '''preview'''.
-|Let's now look at a preview.
 |-
+| 09:05
-| 09.05
+|Click on the ''''Preview Design'''' button on the top.
-|Click on the ''' 'Preview Design' ''' button on the top
 |-
+| 09:09
-| 09.09
 |That shows a preview of what you have done so far.
 |-
+| 09:12
-| 09.12
+|Here, the buttons don't work yet.
-|Here, the buttons don't work  yet .
 |-
+| 09:16
-| 09.16
 |But once you add in the code, you can have everything working.
 |-
+|09:20
-|09.20
+|Let us close the preview.
-|Let us close the preview
 |-
+|09:22
-|09.22
+|Now, before adding the code, let's give proper variable names to the input '''text field'''s.
-|Now, before adding the code, let's give proper variable names to the input textfields.
 |-
+| 09:28
-| 09.28
+|Go to the '''Balance''' tab, let us give proper variable names to these text fields here.
-|Go to the '''Balance''' tab, let us give proper variable name to these text fields here.
 |-
+| 09:34
-| 09.34
+|Right-click on '''JTextfield1''' in the '''inspector'''.
-|Right click on '''JTextfield1''' in the inspector.
 |-
+| 09:40
-| 09.40
+|Select '''Change Variable Name'''.
-|Select change variable name.
 |-
+| 09:43
-| 09.43
+|Let us change the variable name to  "creditAmount".
-|Let us change the variable name to  '''Credit amount'''
 |-
+| 09:50
-| 09.50
+|Click on '''OK'''.
-|Click on '''Ok'''
 |-
+| 09:53
-| 09.53
+|You can also right-click on the text field here, in the '''Design''' mode.
-|You can also right click on the textfield here in the design mode
 |-
+| 09:56
-| 09.56
+|Select '''Change Variable Name'''
-|Select '''Change Variable Name.'''
 |-
+| 10:00
-| 10.00
+|and change variable name into  "debitAmount".
-|And change variable name into  '''debitAmount. '''
 |-
+| 10:04
-| 10.04
+|Click on '''OK'''.
-|Click on '''OK'''
 |-
+| 10:08
-| 10.08
+|I'm also going to call this final label i.e. the stars text field's label as "resultBalance".
-|I'm also going to call this final label i.e the stars textfields label as '''resultBalance. '''
 |-
+| 10:16
-| 10.16
+|Select the '''Change Variable Name'''  option again and change the variable to "resultBalance".
-|Select the '''Change variable name'''  option again and change the variable to '''resultBalance'''
 |-
+| 10:23
-| 10.23
+|Click on '''OK'''.
-|Click on '''OK'''
 |-
+| 10:25
-| 10.25
+| Let's now see the code, to get the '''application''' working.
-| Let's now see the code, to get the application working.
 |-
+| 10:30
-| 10.30
+|Now, this is my sample code.
-|Now this is my sample code
 |-
+| 10:32
-| 10.32
+| What I want here is, to '''getText()''' from the "creditAmount";
-| What I want is to '''getText()''' from the creditAmount;
 |-
+| 10:37
-| 10.37
+|'''getText()''' from the "debitAmount",
-|'''getText()''' from the debitAmount,
 |-
+| 10:39
-| 10.39
+|compute the balance and place the amount in the final "resultBalance".
-|compute the balance and place the amount in the final '''resultBalance. '''
 |-
+| 10:44
-| 10.44
+|Let us  copy the code here and let us go back to the IDE.
-|Let us  copy the code here and let us go back to the IDE
 |-
+| 10:51
-| 10.51
+|Now, right-click on the '''Get Balance''' button.
-|Now right click on the '''Get Balance''' button.
 |-
+| 10:55
-| 10.55
+|Choose the option '''Events >>  Action''' and '''Action Performed'''.
-|Choose the option '''Events,  Action''' and '''Action Performed'''
 |-
+| 11:00
-| 11.00
 |This will take you to the section of the code
 |-
+| 11:03
-| 11.03
+|where you will have to write or '''paste''' the code for the action to be performed on the button press.
-|where you will have to write or paste the code for the action to be performed on the button press.
 |-
+| 11:10
-| 11.10
+|Let me paste the copied code here.
-|Let me paste the copied code here
 |-
+| 11:17
-| 11.17
+|Let's '''save''' this code and go back to the '''Design''' mode.
-|Let's save this code and go back to Design mode
 |-
+| 11:22
-| 11.22
+|Now, let's add in the code to exit the application.
-|Now lets adding the code to Exit the application.
 |-
+| 11:25
-| 11.25
+|Right-click on the '''Menu Item >> Exit''' and choose ''' Events >> Action''' and '''Action Performed. '''
-|Right click on the '''MenuItem, Exit''' and Choose ''' Events, Action''' and '''Action Performed. '''
 |-
+| 11:40
+|It switches to the '''Source''' mode and now we have to write the code to exit successfully from the application.
-| 11.40
-|It switches to the source mode and now we have to a write the code to Exit successfully from the application
 |-
+| 11:46
-| 11.46
+|That is going to be '''System.exit(1).'''
-|That is going to be '''System.exit(1). '''
 |-
+| 11:53
+|Now '''save''' the code and go back to '''Design''' mode.
-| 11.53
-|Now Save the code and go back to design mode.
 |-
+| 11:57
-| 11.57
+|Let us also add a shortcut to the '''Exit''' menu item.
-|Let us also add a shortcut to the '''Exit''' MenuItem
 |-
+| 12:02
+|Double-click on the '''shortcut''' option here, in the window that opens.
-| 12.02
-|Double click on the shortcut option here in the Window thats opens
 |-
+| 12:07
-| 12.07
+|Give the key stroke as '''Q''' and '''Ctrl''' and click on '''OK'''.
-|Give the key stroke as '''Q''' and '''Ctrl''' and Click on '''OK'''
 |-
+| 12:14
-| 12.14
+|So, now we have set '''Ctrl Q''' as the keyboard shortcut to quit from the application.
-|So now we have set '''Ctrl Q''' as the keyboard shortcut to quit from the application
 |-
+| 12:20
-| 12.20
+|That's it. Our application is now complete..
-|That its our application is now complete
 |-
+| 12:23
-| 12.23
+|Let's now '''run''' the application by pressing '''F6''' on your keyboard.
-|Let's now run the application by pressing F6 on your keyboard.
 |-
+| 12:30
-| 12.30
+|It has already selected the '''main class''' that has to '''run'''.
-|It as already selected the main class that as to  run
 |-
+| 12:33
-| 12.33
+|Click on '''OK'''.
-|Click on '''OK'''
 |-
+| 12:37
-| 12.37
+|And, here it is! This is our '''GUI'''.
-|And here it is. This is our GUI
 |-
+| 12:40
-| 12.40
+|Now, let's run a check.
-|Now let's run a check
 |-
+| 12:43
-| 12.43
+|Go to the '''Balance''' tab, enter the '''Credit Amount''' with Rs. 300/-
-|Go to the balance tab, enter the credit  amount with Rs.300/-.
 |-
+| 12:47
-| 12.47
+|and  the '''Debit Amount''' as Rs. 200. And, say ''''Get Balance'.'''
-|And  the debit amount as Rs.200. And Say  ''' 'Get Balance'. '''
 |-
+| 12:53
-| 12.53
+|That gives us the correct amount in the '''Balance'''.
-|This gives us the correct amount in the balance.
 |-
+| 12:56
-| 12.56
 |Let us now exit from the application.
 |-
+| 12:58
-| 12.58
+|I'll go to '''File''' menu and I'll click on '''Exit.'''
-|I'll  Go to '''File''' menu and I'll click on '''Exit. '''
 |-
+| 13:02
-| 13.02
+|We could have also quit the application by pressing '''Ctrl Q''' on the keyboard.
-|We could have also quit the application by pressing '''Ctrl Q''' on the keyboard
 |-
+| 13:08
-| 13.08
+|Now, with the '''application''' complete, it's time for the assignment.
-|Now With the application complete, it's time for the assignment.
 |-
+| 13:14
-| 13.14
+|The task is to create a '''Temperature convertor''' application.
-|The task is to create a Temperature convertor application.
 |-
+| 13:18
-| 13.18
+|It should have two tabs like the previous one,
-|I should have to tabs like the previous one
 |-
+| 13:21
-| 13.21
+| 1 to convert from Celsius to Fahrenheit and another for Fahrenheit to Celsius.
-| 1 to convert from Centigrade to Fahrenheit and another for Fahrenheit to Celsius.
 |-
+| 13:27
-| 13.27
+|It should also take an input  temperature
-|It should also take an input  temperature.
 |-
+| 13:30
-| 13.30
+|and display the converted temperature.
-|And Display the converted temperature
 |-
+| 13:33
-| 13.33
+|It should also have a menu bar on top that shows '''File''' and '''Help''' options.
-|It should also have a menu bar on top that shows File and Help options
 |-
+| 13:38
-| 13.38
+|And, under the '''File''' menu, have an '''Exit''' item with a keyboard shortcut to exit from the application.
-|And  under the file menu have an Exit item with a keyboard shortcut to Exit from the application
 |-
+| 13:46
-| 13.46
+|I have already solved the assignment.
-|I have already solved the assignment
 |-
+| 13:48
-| 13.48
+|Let us see how it should look.
-|Let us see how it shoud look
 |-
+| 13:50
-| 13.50
+|I'm going to '''run''' my assignment and this is my GUI.
-|I'm going to run my assignment and this is my GUI
 |-
+| 13:56
-| 13.56
+|Now, let us enter the input temperature as '''-40 Celcius''' and let me click on '''Get Fahrenheit'''.
-|Now let us Enter the input temperature as -40 Celcius and let me click on get Fahrenheit
 |-
+| 14:05
-| 14.05
+|The application should give the correct converted output temperature.
-|The application  should give the correct converted output temperature.
 |-
+| 14:10
-| 14.10
+|Now, let us  try the short-cut key to '''Exit''' i.e.  '''Ctrl X'''  to exit from  the application.
-|Now let us  try the short-cut key to Exit  i.e  Ctrl X  to exit from  the application.
 |-
+| 14:18
-| 14.18
+|So, we have successfully exited from the '''application''' upon the keyboard shortcut.
-|So we have successfully exited  from the application upon the keyboard shortcut
 |-
+| 14:25
-| 14.25
 |Watch the video available at the link shown on the screen.
 |-
+| 14:29
-| 14.29
 |It summarizes the Spoken Tutorial project.
 |-
+| 14:32
-| 14.32
 |If you do not have good bandwidth, you can download and watch the videos.
 |-
+| 14:37
-| 14.37
+|The Spoken Tutorial project team: * conducts workshops using Spoken Tutorials.
-|The Spoken Tutorial project team conduct workshops using Spoken Tutorials.
 |-
+| 14:42
-| 14.42
 |Gives certificates to those who pass an online test.
 |-
+| 14:46
-| 14.46
+|For more details please write to:'''contact@spoken-tutorial.org'''
-|For more details please write to contact@spoken-tutorial.org
 |-
+| 14:52
-| 14.52
+|'''Spoken Tutorial''' project is a part of the '''Talk to a Teacher''' Project,
-|Spoken Tutorial Project is a part of the Talk to a Teacher Project
 |-
+| 14:56
-| 14.56
+| supported by the National Mission on education through ICT, MHRD, Government  of India.
-| Supported by the National Mission on education through ICT, MHRD, Government  of India
 |-
+| 15:03
-| 15.03
+|More information on this mission is available at:spoken-tutorial.org/NMEICT-Intro.
-|More information on this mission is available at spoken-tutorial.org/NMEICT-Intro
 |-
+| 15:13
-| 15.13
+|This tutorial has been contributed by '''IT for Change'''.
-|This tutorial has been  contributed by  IT for Change
 |-
+| 15:17
-| 15.17
 |Thank you for joining us.