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

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