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

From Script | Spoken-Tutorial
Revision as of 10:45, 10 July 2014 by PoojaMoolya (Talk | contribs)

Jump to: navigation, search
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