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

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 preinstalled 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
01.07	And also 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	Lets 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 options 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 level
05.53	But for now we will just make it as stars
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.
06.16	We should also leave the Textfield 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 icons properties windows opens
07.28	Here choose the options 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 applicaton
07.41	I have selected the image here. Click on OK
07.48	Let us repostion 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 submenu 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 MenuItem.
08.47	You can also rename that to say Exit.
08.54	Now we have added a submenu under the file menu and rename 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 shoud 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 conduct 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