Difference between revisions of "Netbeans/C2/Designing-GUI-for-Sample-Java-Application/English-timed"
From Script | Spoken-Tutorial
PoojaMoolya (Talk | contribs) |
|||
| Line 1: | Line 1: | ||
{| Border=1 | {| Border=1 | ||
| − | || Time | + | || '''Time''' |
| − | + | || '''Narration''' | |
| − | || Narration | + | |
| − | + | ||
|- | |- | ||
Revision as of 17:58, 9 July 2014
| 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. |
