Netbeans/C2/Designing-GUI-for-Sample-Java-Application/English

From Script | Spoken-Tutorial
Jump to: navigation, search

Resources for "Designing GUIs in Netbeans"

Visual Cue
Narration
Slide 1 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.

Slide 2 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 an easy interface to drag-and-drop components to create your layout.

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

Slide 4

System Setup

For this demonstration I'm using a system that has
  • Ubuntu 11.04 OS
  • and has the Netbeans 7.0.1 IDE

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

Slide 5, Slide 6

Lesson Outline

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


Slide 7, Slide 8 Let's get started and build a simple Account balance application.


Today we will build a simple Bank balance application,


to see how to create GUI using Netbeans.

What do we want?


For this (application) we want to be able to

  1. Input the amount credited to the account.
  2. Input the amount debited from the account.
  3. And compute the final balance.
  4. We will also add a picture to make our application look more attractive.
  5. Let's also have a menu bar on top for easy and quick navigation.


Move to Netbeans


File > New Project > Java Application

Create a new netbeans project.

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


Go to File > New Project > and choose a Java Application. Say Next.


Give it the name Account Balance.


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


Say finish, that should create a new project.

Netbeans JframeForm


File > New File > Swing GUI forms > Jframe Form

In Netbeans,


Now go back to File > New File >


and choose Swing GUI forms >


and choose a Jframe Form.


Say Next.


I'm going to call this AccountBalance as well,


but you can give it any other name you wish to.


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



Hover the mouse around the canvas, Palette, Properties and Inspector. Getting familiar with the GUI builder.


  1. Design area
  2. Palette
  3. Properties window
  4. Inspector

Palette

Here on the right is the Palette.


This contains the pre-installed Swing and AWT components.


Properties

Down here is the Properties window.


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


Inspector

Here on the left is the inspector.


The inspector shows you the components that have been added to the frame.

Switch to Source View Button. Source/Design


On top here, is the Source button.


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


As you add components to the design,


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


Let's go back to design and see what components we'll use today.

Slide 9

Components

(For this application, we are going to make use of some these components.)

We will be using:

  • a tabbed pane
  • panel
  • few labels
  • text field
  • button
  • and a menu


Netbeans

Palette > TabbedPane

Now go to the the Palette and choose a tabbedPane.


Go to Palette > TabbedPane


Click on the TabbedPane in the palette


and then click on the form (JframeForm)


This should give you a tabbed frame. And now, you can re-size it using a mouse.



Palette > Label


Switch between the two panels using the tabs.

Go back to the Palette, choose a Panel.


Click on the Panel and (then) click here (on the pane in your jFrameForm).


That should give you a tab.


Go back and choose another panel.


Click (on Panel) and click back here(Pane).


That gives you 2 tabs.

Double click on the tab# title. Rename tabs.

You can Rename it(tab) by double clicking on it


and give it the name you wish to.


I'm going to call this Image and let me call the other one (as) Balance.

Go to Palette > Swing controls > jLabel and click on the panel Adding Labels.


Let's go back to the Palette and add a label.


Choose label from the Swing Controls and add it here(JFrameForm).


We are going to need 6 labels for our(this) application.


You can position and align them as you click them.


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


(I have now added 6 labels.)

Double click on the text on the label to change the text displayed. Changing text displayed.

To change the text on the label, just double-click it


and add the text, and the label name gets changed.



Type Initial Amount I called the first one Initial Amount.
Type Credit Amount And I'm going to call this Credit Amount.
Type Rs.5000.0 on Initial Amount. Initial amount


We'll set the initial amount to be Rs.5000.

Type stars (*****) in label5. And after we compute the balance we have to put the balance here (next to balance label)


But initially, we'll set the balance to be just stars.


Once we compute the balance we can put them here.



Go to Palette > Swing Controls > TextField


Click on TextField and then click on panel.

Adding textboxes.


Now, go to Palette and choose TextField (textfield component), and drop it here.


That should give you the textfield.


(Click on it and click back into the panel.)


Choose another Textfield for the debit amount as well.


We should leave the textfield places also blank.


I am leaving this (textfield1) blank.


I'm also going to leave the other field(textfield2) blank.

Resize the textfield using the mouse. Aligning, resizing and repositioning components on your panel.


You can re-size them using the mouse.


Once you have done that(re-sizing), you can now go back to palette and choose a button.

Go to Palette > Swing Controls > Button


Set Button text as 'Get Balance'

Adding a button.


Let's add the button here(at the bottom of the frame).


You can change the label (text displayed on the label) in the button also, to read 'Get Balance'.


This is our GUI!



Go to Palette > Swing Controls > Label


Properties -> icon -> external image

Adding an image in your display.


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


To do that let's go back to Palette


and choose another Label, and drop it here(on the panel).


Now, go to Properties (button) and go to icon (property). Click on the 3 dots here (next to icon).


Choose External Image – and click on the 3 dots here (on the right).


Choose an image from your directory and say OK.


Click OK again here. This should give you an image.

You can remove the text on the label (here) by double clicking on it.


You can reposition and center your image using the mouse.


Now we have added an image.

Palette > Swing Menus > Menu Bar

(Drop it on top of jFrame)


Change Edit to Help


Inspector, right-click jMenu1

Add from Palette > Menu Item


MenuItem Text to Exit

Adding a Menu.

Let's now go to Palette and add a menubar.

  1. Choose Menu Bar from Swing Menus and click here (on top of panel). That should give you a menu bar.
  2. By default it already has 2 Menu labels (items): File and Edit. Double click on the Edit text and to rename it to Help.
  3. You can also add a submenu (item) under File. In the Inspector, right-click jMenu1 ,and choose Add From Palette > and choose Menu Item. That should add a MenuItem(jMenuItem). You can also rename that to say Exit.


[[Image:]]

Click on

Check your GUI.

[[Image:]]Now, our GUI is more or less complete.


Let's now look at a preview.


Click on the 'Preview Design' button on top

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


Here, the buttons don't (yet) work.


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

Go to the Inspector window and right-click on jTextfiedl1


Choose “Change Variable Name ...”


Choose the final label to display nothing and change it's name to resultBalance.

Assigning names to some of the components.

Now, before adding the code,


let's give proper variable names to the input textfields.

Go to the Inspector window and right-click on jTextfiedl1,


and Choose “Change Variable Name ...” and type in the name you want for the box.


I am going to call this first field creditAmount.

You can also do that by directly right clicking on the component


and choosing Change Variable Name.


Let's call that (2ndtextfield) debitAmount.


I'm also going to call this final label (****) resultBalance. final output in resultBalance.

Code Block from gedit


Copy Code

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


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


getText() from the debitAmount,


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


I am going to copy the code here:

double creditMoney = Double.parseDouble(creditAmount.getText());

double debitMoney = Double.parseDouble(debitAmount.getText());

double initialBalance = 5000.0;

double balanceMoney = initialBalance + creditMoney - debitMoney;

resultBalance.setText("Rs. " + balanceMoney);

and Go back to 'Get Balance' button.

Button (right click) > Events > Action > Action Performed Button press event.

Now right click on the Button.


Choose add an event., choose action, and choose Action Performed.

This will take you to the section of the code


where you will have to write the (copied) code for the action to be performed on the button press.



Ctrl+S


Click Design button.

Save

Let's save this code (Ctrl+S) and go back to Design.

File menu text (inspector) (right click) > Events > Action > Action Performed


Type in System.exit(1);


Ctrl+S (save)

Exit action.

Let's add in the code to Exit the application.


Right click on the menuItem, Choose Events, Action and Action Performed.


Now, we need to write the code to exit successfully from the application.


That is going to be System.exit(1) and exit with value 1. Save the code and go back to design.

File->Exit , next to it you can see shortcut, tripleclick on that. Type Ctrl+Q. Adding a shortcut (for a menu item)

If you noticed, we can also add a shortcut here (next to Exit)

Double click on it, and use the keyboard to add in keys. I'm going to say (set) Ctrl+Q as the shortcut-key to quit from the application.

That's it, our application is complete.

Show Run button on top.


Switch between Image and Balance tabs moving the mouse over each item.


Type 300, 200 and click Get Balance button.

Build and Run.

Let's now run the application by choosing F6. Say OK (on pop up). and get the application running.


Well, here it is.


Now let's just a check and credit the amount with Rs.300/-.


Let's put the debit amount as Rs.200. And Say 'Get Balance'.


This gives us the correct amount in the balance. Let's now exit from the application.

Application File > Exit Exit.

(To exit) Go to File and say Exit. That closed the application successfully. (We could have also closed using Ctrl+Q.) )

Slide 9, Slide 10

Assignment


Run TemperatureConvertor application.

Assignment.

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

The task is to create a Temperature convertor application. I will show you how it should look.

  1. It should have 2 tabs, slike the previous on. 1 to convert from Centigrade to Fahrenheit and another for Fahrenheit to Celsius.
  2. It should also take the input (textfield) temperature.
  3. Display the converted temperature
  4. It should also have a menu bar on top that shows File and Help and Exit under file, and a short-cut key that says Ctrl +X to exit from the application.

Let's run the application.

Type -40 and click on Get Fahrenheit.


Move mouse away from Exit menu item.

Run Assignment Solution.

When you run the application, e.g -40 which is the same in Celsius and Fahrenheit,


it (the app) should give the correct output temperature.

Let me try the short-cut key, Ctrl+X, to Exit form the application.. The application has exited succesfully.

Slide 11, Slide 12, Slide 13

About the Spoken Tutorial Project


The video at http://spoken-tutorial.org/What_is_a_Spoken_Tutorial summarizes the spoken tutorial project.


If you do not have good bandwidth, you can download and watch it.


We conduct workshops using spoken tutorials.


We also give certificates to those who pass an online test.


Please contact us for more details.

Slide 14, Slide 15 I would like to acknowledge the spoken tutorial project


which is a part of the talk to a teacher project.


It is supported by the National Mission on Education through ICT, MHRD, government of India.


For more information please visit their website.

Slide 16 The contributors for tutorial are Subhashini Venugopalan and Sindhu Ghanti from IT for Change.


Thank you for joining us.

Contributors and Content Editors

Chandrika

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