Difference between revisions of "Netbeans/C2/Designing-GUI-for-Sample-Java-Application/English-timed"

From Script | Spoken-Tutorial
Jump to: navigation, search
Line 274: Line 274:
  
 
| 03.23
 
| 03.23
−
|Let's go back to design mode and see what components we'll use today.  
+
|Let's go back to '''Design''' mode and see what components we'll use today.  
  
  
Line 318: Line 318:
 
| 03.58
 
| 03.58
  
−
|Now Go back to the Palette and choose a Panel.  
+
|Now Go back to the '''Palette''' and choose a '''Panel.'''
 
|-
 
|-
  
Line 335: Line 335:
 
| 04.09
 
| 04.09
  
−
| Go back and choose another panel. And click on the form again
+
| Go back and choose another '''Panel'''. And click on the form again
  
 
|-
 
|-
Line 368: Line 368:
 
| 04.43
 
| 04.43
  
−
|Choose label from the Swing Controls and add it to your form here
+
|Choose '''Label''' from the Swing Controls and add it to your form here
  
 
|-
 
|-
Line 374: Line 374:
 
| 04.48
 
| 04.48
  
−
|We are going to need 6 labels for our(this) application.  
+
|We are going to need 6 labels for our application.  
  
 
|-
 
|-
Line 467: Line 467:
 
| 06.01
 
| 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.
+
|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.
  
  
Line 476: Line 476:
 
| 06.16
 
| 06.16
  
−
|We should also leave the textfield places blank.  
+
|We should also leave the '''Textfield''' places blank.  
  
 
|-
 
|-
Line 495: Line 495:
 
| 06.35
 
| 06.35
  
−
|Once you have done that, you can now go back to palette and choose a button.  
+
|Once you have done that, you can now go back to palette and choose a '''Button.'''
  
  
Line 515: Line 515:
 
| 06.53
 
| 06.53
  
−
|Choose the edit text option and name it as '''Get Balance'''
+
|Choose the '''Edit text''' option and name it as '''Get Balance'''
  
 
|-
 
|-
Line 541: Line 541:
 
| 07.08
 
| 07.08
  
−
|and choose another Label, and drop it on the panel.  
+
|and choose another '''Label''', and drop it on the panel.  
  
  
Line 560: Line 560:
 
| 07.28
 
| 07.28
  
−
|Here choose the options '''External Image''', click on the 3 dots again here on the right.  
+
|Here choose the options '''External Image''', click on the (...) 3 dots again here on the right.  
  
 
|-
 
|-
Line 606: Line 606:
 
| 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
 
|-
 
|-
  
 
| 08.12
 
| 08.12
 
   
 
   
−
|Choose Menu Bar and click here on top of panel.  
+
|Choose '''Menu Bar''' and click here on top of panel.  
  
  
Line 635: Line 635:
 
| 08.32
 
| 08.32
  
−
|Now in the Inspector or the navigator on the left side , right-click on  JMenu1 ,
+
|Now in the Inspector or the navigator on the left side , right-click on  '''JMenu1''' ,
  
 
|-
 
|-
Line 647: Line 647:
 
| 08.45
 
| 08.45
  
−
|That should add a MenuItem.
+
|That should add a '''MenuItem.'''
  
 
|-
 
|-
Line 721: Line 721:
 
| 09.34
 
| 09.34
  
−
|Right click on JTextfield1 in the inspector.
+
|Right click on '''JTextfield1''' in the inspector.
  
 
|-
 
|-
Line 751: Line 751:
 
| 09.56
 
| 09.56
  
−
|Select Change Variable Name.  
+
|Select '''Change Variable Name.'''
  
 
|-
 
|-
Line 763: Line 763:
 
| 10.04
 
| 10.04
  
−
|Click on Ok
+
|Click on '''OK'''
  
 
|-
 
|-
Line 775: Line 775:
 
| 10.16
 
| 10.16
  
−
|Select the change variable name  option again and change the variable to '''resultBalance'''
+
|Select the '''Change variable name''' option again and change the variable to '''resultBalance'''
  
 
|-
 
|-
Line 781: Line 781:
 
| 10.23
 
| 10.23
  
−
|Click on Ok
+
|Click on '''OK'''
  
 
|-
 
|-
Line 799: Line 799:
 
| 10.32
 
| 10.32
  
−
| What I want is to getText() from the creditAmount;  
+
| What I want is to '''getText()''' from the creditAmount;  
  
 
|-
 
|-
Line 805: Line 805:
 
| 10.37
 
| 10.37
  
−
|getText() from the debitAmount,  
+
|'''getText()''' from the debitAmount,  
  
 
|-
 
|-
Line 872: Line 872:
 
| 11.25
 
| 11.25
  
−
|Right click on the '''menuItem, Exit''' and Choose ''' Events, Action''' and '''Action Performed. '''
+
|Right click on the '''MenuItem, Exit''' and Choose ''' Events, Action''' and '''Action Performed. '''
  
 
|-
 
|-
Line 883: Line 883:
 
| 11.46
 
| 11.46
  
−
|That is going to be System.exit(1).  
+
|That is going to be '''System.exit(1). '''
  
 
|-
 
|-
Line 894: Line 894:
 
| 11.57
 
| 11.57
  
−
|Let us also add a shortcut to the Exit MenuItem
+
|Let us also add a shortcut to the '''Exit''' MenuItem
  
  
Line 906: Line 906:
 
| 12.07
 
| 12.07
  
−
|Give the key stroke as Q and Ctrl and Click on OK
+
|Give the key stroke as '''Q''' and '''Ctrl''' and Click on '''OK'''
  
  
Line 913: Line 913:
 
| 12.14
 
| 12.14
  
−
|So now we have set Ctrl Q as the keyboard shortcut to quit from the application
+
|So now we have set '''Ctrl Q''' as the keyboard shortcut to quit from the application
  
 
|-
 
|-
Line 938: Line 938:
 
| 12.33
 
| 12.33
  
−
|Click on Ok
+
|Click on '''OK'''
  
 
|-
 
|-
Line 980: Line 980:
 
| 12.58
 
| 12.58
  
−
|I'll  Go to File and I'll click on Exit.  
+
|I'll  Go to '''File''' menu and I'll click on '''Exit. '''
  
 
|-
 
|-
Line 986: Line 986:
 
| 13.02
 
| 13.02
  
−
|We could have also quit the application by pressing Ctrl Q on the keyboard
+
|We could have also quit the application by pressing '''Ctrl Q''' on the keyboard
  
 
|-
 
|-

Revision as of 11:53, 9 April 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.

Contributors and Content Editors

PoojaMoolya, Pratik kamble, Sandhya.np14

Retrieved from "https://script.spoken-tutorial.org/index.php?title=Netbeans/C2/Designing-GUI-for-Sample-Java-Application/English-timed&oldid=9798"