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

From Script | Spoken-Tutorial
Jump to: navigation, search
Line 10: Line 10:
 
|-
 
|-
 
| 00:02
 
| 00:02
−
| Welcome to the tutorial on Building GUIs using Netbeans.  
+
| Welcome to the tutorial on '''Building GUIs''' using '''Netbeans'''.  
  
 
|-
 
|-
 
|00:06
 
|00:06
−
|In this tutorial, we will see one of the most attractive features of Netbeans, which is its GUI Builder.  
+
|In this tutorial, we will see one of the most attractive features of Netbeans which is its '''GUI Builder'''.  
  
 
|-
 
|-
Line 22: Line 22:
 
|-
 
|-
 
| 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''' which has 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 v11.04'''
  
 
|-
 
|-
 
| 00:46
 
| 00:46
−
| and has the Netbeans   IDE v7.1.1
+
| and has the '''Netbeans IDE v7.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 '''Source Editor'''
  
 
|-
 
|-
 
|01:02
 
|01:02
−
|The Palette, Inspector, and Properties features  
+
|* The '''Palette, Inspector''' and '''Properties''' features  
  
 
|-
 
|-
 
| 01:05
 
| 01:05
−
|Add event handlers
+
|* Add '''event handler'''s and also
  
 
|-
 
|-
 
| 01:07
 
| 01:07
−
|And also Compile and run our application  
+
|* Compile and '''run''' our '''application'''.
  
 
|-
 
|-
 
|01:10
 
|01:10
−
|Let's get started and build a simple Account balance application in this tutorial
+
|Let's get started and '''build''' a simple '''Account balance application '''in this tutorial.
  
 
|-
 
|-
 
|01:15
 
|01:15
−
|For this application we want to be able to  
+
|For this application, we want to be able to-
  
 
|-
 
|-
 
|01:18
 
|01:18
−
|Input the amount credited to the account.  
+
|* Input the amount credited to the account.  
  
 
|-
 
|-
 
|01:21
 
|01:21
−
|The amount debited from the account.  
+
|* The amount debited from the account.  
  
 
|-
 
|-
 
|01:24
 
|01:24
−
|And compute the final balance.  
+
|* And compute the final balance.  
  
 
|-
 
|-
Line 106: Line 106:
 
|-
 
|-
 
| 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
−
|Fron 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.
  
 
|-
 
|-
Line 154: Line 154:
 
|-
 
|-
 
|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
−
|Lets get familiar with the GUI builder.
+
|Let's 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.  
  
 
|-
 
|-
Line 178: Line 178:
 
|-
 
|-
 
| 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
 
| 03:08
−
|On the top here is the '''Source''' button
+
|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'''.  
  
 
|-
 
|-
Line 202: Line 202:
 
|-
 
|-
 
| 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.  
  
 
|-
 
|-
Line 214: Line 214:
 
|-
 
|-
 
| 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 '''TabbedPane''' 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
 
| 03:50
−
|This should give you a Tabbed frame. You can re-size it using your mouse.  
+
|This should give you a '''Tabbed frame'''. You can re-size it using your '''mouse'''.  
  
 
|-
 
|-
 
| 03:58
 
| 03:58
−
|Now Go back to the '''Palette''' and choose a '''Panel.'''  
+
|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'''.
  
 
|-
 
|-
Line 242: Line 242:
 
|-
 
|-
 
| 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 labels from  swing Controls menu
+
|Now, Let's go back to the '''Palette''' and add '''label'''s 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
 
| 04:54
−
|I have now added  six labels to my form  
+
|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 options '''Edit Text '''
+
|and  choose the option '''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 level
+
|Once we compute the balance, we can put it into this label.
  
 
|-
 
|-
 
| 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 '''TextField'''  and we will add to text fields one each next to the credit amount and to the debit amount.
+
|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
 
| 06:16
−
|We should also leave the '''Textfield''' places blank.  
+
|We should also leave the '''Text field''' 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'''.
  
 
|-
 
|-
Line 346: Line 345:
 
|-
 
|-
 
| 06:42
 
| 06:42
−
|Add a 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".
  
 
|-
 
|-
Line 362: Line 361:
 
|-
 
|-
 
| 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 to 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 icons properties windows opens
+
|The '''icon''' properties window opens.
  
 
|-
 
|-
 
| 07:28
 
| 07:28
−
|Here choose the options '''External Image''', click on the (...) 3 dots again here on the right.  
+
|Here, choose the option '''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 applicaton
+
|And look for the image you want to include in your application.
  
 
|-
 
|-
 
| 07:41
 
| 07:41
−
|I have selected the image here. Click on '''OK'''
+
|I have selected the image here. Click on '''OK'''.
  
 
|-
 
|-
 
| 07:48
 
| 07:48
−
|Let us repostion it using the mouse.
+
|Let us reposition 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
 
| 08:05
−
|Go to the palette and select the '''Menu bar''' option under swing menus
+
|Go to the palette and select the '''Menu bar''' option under '''swing menus'''.
  
 
|-
 
|-
Line 418: Line 417:
 
|-
 
|-
 
| 08:17
 
| 08:17
−
|By default it already has 2 Menu labels: '''File''' and '''Edit. '''
+
|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
 
| 08:28
−
|You can also add a submenu under File.   
+
|You can also add a sub-menu 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 '''MenuItem.'''
+
|That should add a '''Menu Item.'''
  
 
|-
 
|-
 
| 08:47
 
| 08:47
−
|You can also rename that to say Exit.  
+
|You can also rename that to say '''Exit'''.  
  
 
|-
 
|-
 
| 08:54
 
| 08:54
−
|Now we have added a submenu under the file menu and rename that menu item as well  
+
|Now, we have added a sub-menu under the '''File''' menu and renamed that menu item as well.
  
 
|-
 
|-
Line 454: Line 453:
 
|-
 
|-
 
| 09:03
 
| 09:03
−
|Let's now look at a preview.  
+
|Let's now look at a '''preview'''.  
  
 
|-
 
|-
Line 678: Line 677:
 
|-
 
|-
 
| 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 shoud look
+
|Let us see how it should 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.
  
 
|-
 
|-
Line 734: Line 733:
 
|-
 
|-
 
| 14:37
 
| 14:37
−
|The Spoken Tutorial project team conduct workshops using Spoken Tutorials.  
+
|The Spoken Tutorial project team: * conducts workshops using Spoken Tutorials.  
  
 
|-
 
|-
 
| 14:42
 
| 14:42
−
|Gives certificates to those who pass an online test.  
+
|* 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.
 
|Thank you for joining us.

Revision as of 12:40, 26 October 2015

Time Narration
00:01 Hello everyone.
00:02 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 which has 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 v11.04
00:46 and has the Netbeans IDE v7.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 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 Fron 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 TabbedPane 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 a 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 to 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 reposition 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 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 textfields.
09:28 Go to the Balance tab, let us give proper variable name 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 Credit amount
09:50 Click on Ok
09:53 You can also right click on the textfield 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 textfields 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 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 Design mode
11:22 Now lets adding the code to Exit the application.
11:25 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 a 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 MenuItem
12:02 Double click on the shortcut option here in the Window thats 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 its our application is now complete
12:23 Let's now run the application by pressing F6 on your keyboard.
12:30 It as already selected the main class that as 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 This 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 I should have to tabs like the previous one
13:21 1 to convert from Centigrade 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

Retrieved from "https://script.spoken-tutorial.org/index.php?title=Netbeans/C2/Designing-GUI-for-Sample-Java-Application/English-timed&oldid=24198"