View source for Netbeans/C2/Designing-GUI-for-Sample-Java-Application/English-timed

{| Border=1

|| '''Time'''
|| '''Narration'''

|-
| 00:01
|Hello everyone. 

|-
| 00:02
| Welcome to the tutorial on '''Build'''ing 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''' 

|-
|01:02
|* The '''Palette, Inspector''' and '''Properties''' features 

|-
| 01:05
|* Add '''event handler'''s 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 '''credit'''ed to the account. 

|-
|01:21
|* The amount '''debit'''ed 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 '''label'''s 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 field'''s. 

|-
| 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.