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

|Hello everyone.  

 

| Welcome to the tutorial on Building GUIs using Netbeans.  

|In this tutorial, we will see one of the most attractive features of Netbeans, which is its GUI Builder.  

| It gives you a What You See Is What You Get designer to create your GUI.  

|Also it gives you an easy interface to drag-and-drop components to create your layout.  

|It comes with a Component Palette which has preinstalled AWT and Swing components.  

|We will be making use of this powerful visual editor to build a complete GUI application in just a few minutes.  

|For this demonstration I'm using a system that has  

|The Linux Operating system Ubuntu v11.04  

| and has the Netbeans   IDE v7.1.1

|For more details on the installation and requirements please refer to the previous tutorial.  

|In this tutorial we will learn to

|Use the Form Editor  

|The Source Editor  

 

|The Palette, Inspector, and Properties features  

|Add event handlers

|And also Compile and run our application  

|Let's get started and build a simple Account balance application in this tutorial

|For this application we want to be able to  

|Input the amount credited to the account.  

|The amount debited from the account.  

|And compute the final balance.  

|We will also add a picture to make our application look more attractive.  

|Let's now move to netbeans and start by creating a new project.  

|Fron the '''File''' menu choose '''New Project''' > and choose a '''Java Application'''. Say Next.

|And give your project a name  

|I will name my project as '''Account balance. '''

|Don't create a main class but set it as the main project.  

|Say '''Finish''',' that should create a new project in your IDE

| Now go back to '''File''' in the '''File menu''' and select  '''New File '''

| Choose '''Swing GUI''' forms under '''Categories'''

|and  '''Jframe Form''' under '''File Type'''

|Say '''Next. '''

|I'm going to call this '''AccountBalance''' as well,

|Once you say '''Finish''', it takes you to the main design area.  

|Lets get familiar with the GUI builder.

|On the right here is the palette

|This contains the pre-installed Swing and AWT components.  

|Down here below the palette  is the '''Properties''' window.  

|On the left  here is the navigator or the inspector  

|which  shows you the components that have been added to the frame.

|Here on the workspace in the design mode

|On the top here is the '''Source''' button

|When you click on it, it takes you to the source code.  

|'it takes the corresponding source code and adds it to the source here.  

| such as''' Buttons, Labels, Panels,  Tabbed pane''' etc to create our applications

|Now from  the  '''Palette''' let us choose a '''TabbedPane''' under swing Containers

|Select '''Tabbed Pane''' and click on the form

|This should give you a Tabbed frame. You can re-size it using your mouse.  

|Now Go back to the '''Palette''' and choose a '''Panel.'''  

|And Click again on your frame

| Go back and choose another '''Panel'''. And click on the form again

|That gives you 2 tabs totally

|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

|I will call the first tab as '''Image''' and rename the second tab to '''Balance'''

|Now Let's go back to the Palette and add labels from  swing Controls menu

|Choose '''Label''' from the Swing Controls and add it to your form here

 

|We are going to need 6 labels for our application.  

|I have now added  six labels to my form  

|You can position and align them as you click them

|And also use the mouse to re-position or re-align them.

|Now to change the text on a label

|You can either double click on it or right click on it

|and  choose the options '''Edit Text '''

|Let us rename the labels now

|I'm going to call the first one as '''Initial Amount. '''

|The second label as '''Credit Amount. '''

|The third one as '''Debit amount'''

|And the fourth one as '''Balance'''

|Initially, we'll set the initial amount to be Rs 5000.  

|Once we compute the balance we can put it into this level

|But for now we will just make it as stars

|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.

|We should also leave the '''Textfield''' places blank.  

|Let me edit the text and remove the existing text here

|Let us resize it using the mouse

|Add a button below your frame and

|You can change the label by right clicking on it.  

|Choose the '''Edit text''' option and name it as '''Get Balance'''

|Now this is our GUI!  

|Let's now go to the Image tab (tab1) and add an image.  

|To do that let's go back to the Palette  

|and choose another '''Label''', and drop it on the panel.  

|Now from to Properties  Window below the palette, search for the icon property and click on the 3 dots here on the right.

|The icons properties windows opens

|Here choose the options '''External Image''', click on the (...) 3 dots again here on the right.  

|And look for the image you want to include in your applicaton

|I have selected the image here. Click on '''OK'''

|Let us repostion it using the mouse.

|You can remove the text here on the label by double clicking on it and removing the text

|Now we have added in image  

|Let us next add a menu to our GUI

|Go to the palette and select the '''Menu bar''' option under swing menus

|Choose '''Menu Bar''' and click here on top of panel.  

|By default it already has 2 Menu labels: '''File''' and '''Edit. '''

|Double click on the '''Edit text''' and  rename it to '''Help. '''

|You can also add a submenu under File.   

|Now in the Inspector or the navigator on the left side , right-click on  '''JMenu1''' ,

|Choose Add From Palette  option  and Select Menu Item.

|That should add a '''MenuItem.'''

|You can also rename that to say Exit.  

|Now we have added a submenu under the file menu and rename that menu item as well  

|Let's now look at a preview.  

|Click on the ''' 'Preview Design' ''' button on the top  

|Here, the buttons don't work yet .  

|Let us close the preview

|Now, before adding the code, let's give proper variable names to the input textfields.  

|Go to the '''Balance''' tab, let us give proper variable name to these text fields here.

|Right click on '''JTextfield1''' in the inspector.

|Select change variable name.

|Let us change the variable name to  '''Credit amount'''

|Click on '''Ok'''

|You can also right click on the textfield here in the design mode

|Select '''Change Variable Name.'''  

|And change variable name into  '''debitAmount. '''

|Click on '''OK'''

|I'm also going to call this final label i.e the stars textfields label as '''resultBalance. '''

|Select the '''Change variable name'''  option again and change the variable to '''resultBalance'''

|Click on '''OK'''

| Let's now see the code, to get the application working.  

|Now this is my sample code

| What I want is to '''getText()''' from the creditAmount;  

|'''getText()''' from the debitAmount,  

|compute the balance and place the amount in the final '''resultBalance. '''

|Let us  copy the code here and let us go back to the IDE

|Now right click on the '''Get Balance''' button.

|Choose the option '''Events, Action''' and '''Action Performed'''

|where you will have to write or paste the code for the action to be performed on the button press.  

|Let me paste the copied code here

|Let's save this code and go back to Design mode

|Now lets adding the code to Exit the application.  

|Right click on the '''MenuItem, Exit''' and Choose ''' Events, Action''' and '''Action Performed. '''

|It switches to the source mode and now we have to a write the code to Exit successfully from the application  

|That is going to be '''System.exit(1). '''

|Now Save the code and go back to design mode.  

|Let us also add a shortcut to the '''Exit''' MenuItem

|Double click on the shortcut option here in the Window thats opens

|Give the key stroke as '''Q''' and '''Ctrl''' and Click on '''OK'''

|So now we have set '''Ctrl Q''' as the keyboard shortcut to quit from the application

|That its our application is now complete

|Let's now run the application by pressing F6 on your keyboard.  

|It as already selected the main class that as to run

|Click on '''OK'''

|And here it is. This is our GUI

|Now let's run a check  

|Go to the balance tab, enter the credit  amount with Rs.300/-.

|And the debit amount as Rs.200. And Say  ''' 'Get Balance'. '''

|This gives us the correct amount in the balance.  

|I'll Go to '''File''' menu and I'll click on '''Exit. '''

|We could have also quit the application by pressing '''Ctrl Q''' on the keyboard

|Now With the application complete, it's time for the assignment.  

|The task is to create a Temperature convertor application.  

|I should have to tabs like the previous one

| 1 to convert from Centigrade to Fahrenheit and another for Fahrenheit to Celsius.  

|It should also take an input  temperature.

|And Display the converted temperature  

|It should also have a menu bar on top that shows File and Help options  

|And under the file menu have an Exit item with a keyboard shortcut to Exit from the application

|I have already solved the assignment

|Let us see how it shoud look

|I'm going to run my assignment and this is my GUI

|Now let us Enter the input temperature as -40 Celcius and let me click on get Fahrenheit

|The application should give the correct converted output temperature.  

|Now let us  try the short-cut key to Exit i.e  Ctrl X  to exit from  the application.  

|So we have successfully exited from the application upon the keyboard shortcut

|The Spoken Tutorial project team conduct workshops using Spoken Tutorials.  

|For more details please write to contact@spoken-tutorial.org

|Spoken Tutorial Project is a part of the Talk to a Teacher Project

| Supported by the National Mission on education through ICT, MHRD, Government  of India

|More information on this mission is available at spoken-tutorial.org/NMEICT-Intro

|This tutorial has been contributed by IT for Change