Difference between revisions of "Netbeans/C2/Designing-GUI-for-Sample-Java-Application/English-timed"
From Script | Spoken-Tutorial
Sandhya.np14 (Talk | contribs) |
|||
| Line 601: | Line 601: | ||
|- | |- | ||
| 12:02 | | 12:02 | ||
| − | |Double-click on the shortcut option here, in the window that opens. | + | |Double-click on the '''shortcut''' option here, in the window that opens. |
|- | |- | ||
Revision as of 17:08, 23 February 2017
| 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 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 |
| 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 | 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. |
