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

|-

|-

|Hello everyone.  

|Hello everyone.  

|-

|-

| Welcome to the tutorial on Building GUIs using Netbeans.  

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

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

|-

|-

|What does Netbeans provide for building GUI?

|What does Netbeans provide for building GUI?

|-

|-

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

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

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

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

|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  

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

|-

|-

|The Linux Operating system Ubuntu v11.04  

|The Linux Operating system Ubuntu v11.04  

|-

|-

| and has the Netbeans  IDE  v7.1.1

| and has the Netbeans  IDE  v7.1.1

|-

|-

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

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

|-

|-

|In this tutorial we will learn to

|In this tutorial we will learn to

|-

|-

|Use the Form Editor  

|Use the Form Editor  

|-

|-

|The Source Editor  

|The Source Editor  

|-

|-

|The Palette, Inspector, and Properties features  

|The Palette, Inspector, and Properties features  

|-

|-

|Add event handlers  

|Add event handlers  

|-

|-

|And also Compile and run our application  

|And also Compile and run our application  

|-

|-

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

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

|-

|-

|-

|-

|Input the amount credited to the account.  

|Input the amount credited to the account.  

|-

|-

|The amount debited from the account.  

|The amount debited from the account.  

|-

|-

|And compute the final balance.  

|And compute the final balance.  

|-

|-

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

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

|-

|-

| Let's also have a menu bar on top for easy and quick navigation.  

| Let's also have a menu bar on top for easy and quick navigation.  

|-

|-

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

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

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

|-

|-

|And give your project a name  

|And give your project a name  

|-

|-

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

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

|-

|-

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

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

|-

|-

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

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

|-

|-

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

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

|-

|-

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

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

|-

|-

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

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

|-

|-

|Say '''Next. '''

|Say '''Next. '''

|-

|-

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

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

|-

|-

|But you can give it any other name you wish to.  

|But you can give it any other name you wish to.  

|-

|-

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

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

|-

|-

|Lets get familiar with the GUI builder.

|Lets get familiar with the GUI builder.

|-

|-

|On the right here is the palette

|On the right here is the palette

|-

|-

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

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

|-

|-

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

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

|-

|-

|This shows you the properties of the components as you choose them.  

|This shows you the properties of the components as you choose them.  

|-

|-

|On the left  here is the navigator or the inspector  

|On the left  here is the navigator or the inspector  

|-

|-

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

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

|-

|-

|Here on the workspace in the design mode

|Here on the workspace in the design mode

|-

|-

|-

|-

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

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

|-

|-

| As you add components to the design,  

| As you add components to the design,  

|-

|-

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

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

|-

|-

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

|-

|-

|We will be using some of the components from  the palette

|We will be using some of the components from  the palette

|-

|-

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

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

|-

|-

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

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

|-

|-

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

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

|-

|-

|-

|-

|-

|-

|And Click again on your frame

|And Click again on your frame

|-

|-

|That should give you a tab.  

|That should give you a tab.  

|-

|-

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

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

|-

|-

|That gives you 2 tabs totally

|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

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

|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

|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

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

|-

|-

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

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

|-

|-

|-

|-

|You can position and align them as you click them

|You can position and align them as you click them

|-

|-

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

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

|-

|-

|Now to change the text on a label

|Now to change the text on a label

|-

|-

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

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

|-

|-

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

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

|-

|-

|Let us rename  the labels now

|Let us rename  the labels now

|-

|-

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

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

|-

|-

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

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

|-

|-

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

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

|-

|-

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

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

|-

|-

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

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

|-

|-

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

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

|-

|-

|But for now we will just make it as stars

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

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

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

|-

|-

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

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

|-

|-

|Let us resize it using the mouse

|Let us resize it using the mouse

|-

|-

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

|-

|-

|Add a button below your frame and

|Add a button below your frame and

|-

|-

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

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

|-

|-

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

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

|-

|-

|Now this is our GUI!  

|Now this is our GUI!  

|-

|-

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

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

|-

|-

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

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

|-

|-

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

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

|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

|The icons properties windows opens

|-

|-

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

|-

|-

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

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

|-

|-

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

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

|-

|-

|-

|-

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

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

|-

|-

|Now we have added in image  

|Now we have added in image  

|-

|-

|Let us next add a menu to our GUI

|Let us next add a menu to our GUI

|-

|-

|-

|-

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

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

|-

|-

|-

|-

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

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

|-

|-

|-

|-

|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''' ,

|-

|-

|Choose Add From Palette  option  and Select Menu Item.

|Choose Add From Palette  option  and Select Menu Item.

|-

|-

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

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

|-

|-

|-

|-

|-

|-

|Now, our GUI is more or less complete.  

|Now, our GUI is more or less complete.  

|-

|-

|Let's now look at a preview.  

|Let's now look at a preview.  

|-

|-

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

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

|-

|-

|That shows a preview of what you have done so far.  

|That shows a preview of what you have done so far.  

|-

|-

|Here, the buttons don't work  yet .  

|Here, the buttons don't work  yet .  

|-

|-

|But once you add in the code, you can have everything working.  

|But once you add in the code, you can have everything working.  

|-

|-

|Let us close the preview

|Let us close the preview

|-

|-

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

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

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

|-

|-

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

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

|-

|-

|Select change variable name.

|Select change variable name.

|-

|-

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

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

|-

|-

|Click on '''Ok'''

|Click on '''Ok'''

|-

|-

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

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

|-

|-

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

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

|-

|-

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

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

|-

|-

|Click on '''OK'''

|Click on '''OK'''

|-

|-

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

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

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

|-

|-

|Click on '''OK'''

|Click on '''OK'''

|-

|-

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

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

|-

|-

|Now this is my sample code

|Now this is my sample code

|-

|-

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

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

|-

|-

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

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

|-

|-

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

|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

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

|-

|-

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

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

|-

|-

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

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

|-

|-

|This will take you to the section of the code  

|This will take you to the section of the code  

|-

|-

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

|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 me paste the copied code here

|-

|-

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

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

|-

|-

|Now lets adding the code to Exit the application.  

|Now lets adding the code to Exit the application.  

|-

|-

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

|-

|-

|-

|-

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

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

|-

|-

|-

|-

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

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

|-

|-

|-

|-

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

|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

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

|-

|-

|That its our application is now complete

|That its our application is now complete

|-

|-

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

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

|-

|-

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

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

|-

|-

|Click on '''OK'''

|Click on '''OK'''

|-

|-

|And here it is. This is our GUI

|And here it is. This is our GUI

|-

|-

|Now let's run a check  

|Now let's run a check  

|-

|-

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

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

|-

|-

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

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

|-

|-

|This gives us the correct amount in the balance.  

|This gives us the correct amount in the balance.  

|-

|-

|Let us now exit from the application.  

|Let us now exit from the application.  

|-

|-

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

|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

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

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

|-

|-

|The task is to create a Temperature convertor application.  

|The task is to create a Temperature convertor application.  

|-

|-

|I should have to tabs like the previous one

|I should have to tabs like the previous one

|-

|-

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

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

|-

|-

|It should also take an input  temperature.  

|It should also take an input  temperature.  

|-

|-

|And Display the converted temperature  

|And Display the converted temperature  

|-

|-

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

|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

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

|-

|-

|I have already solved the assignment

|I have already solved the assignment

|-

|-

|Let us see how it shoud look

|Let us see how it shoud look

|-

|-

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

|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

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

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

|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

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

|-

|-

|Watch the video available at the link shown on the screen.  

|Watch the video available at the link shown on the screen.  

|-

|-

|It summarizes the Spoken Tutorial project.  

|It summarizes the Spoken Tutorial project.  

   

   

|-

|-

|If you do not have good bandwidth, you can download and watch the videos.  

|If you do not have good bandwidth, you can download and watch the videos.  

|-

|-

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

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

|-

|-

|Gives certificates to those who pass an online test.  

|Gives certificates to those who pass an online test.  

|-

|-

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

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

|-

|-

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

|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

| 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

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

|-

|-