Difference between revisions of "Netbeans/C2/Designing-GUI-for-Sample-Java-Application/English-timed"
From Script | Spoken-Tutorial
PoojaMoolya (Talk | contribs) |
Sandhya.np14 (Talk | contribs) |
||
Line 401: | Line 401: | ||
|- | |- | ||
| 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'''. |
|- | |- |
Latest revision as of 10:30, 15 March 2017
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. |