Java GUI Tutorial

Java GUI Tutorial – Part 1

Introduction

This tutorial will teach you about Graphical User Interfaces, or GUI’s. GUI’s are important because it’s an effective way for the user to interact with the program. The way Java allows you to create GUI’s is the Abstract Windowing Toolkit, or AWT. The java.awt package includes:

Ø Buttons, checkboxes, labels, other basic components

Ø Text fields, text areas, and other more complex components

Ø Dialog boxes and other windows

Ø Drop down boxes and other menus

This tutorial is divided into two parts – The first one (which you’re reading right now) will teach you about the different AWT components. It will teach you what they are, how to use them, give a complete working example of it (located in the Part 1 folder in the Code directory), and give a screenshot of what it looks like. The second one will teach you about all the events that these different objects have. You’ll learn how to set up event handling, how to detect which object the event belongs to, and more.

Well, it’s time to start coding!

Buttons

First, here’s an example of code to produce a basic AWT component – the button:

import java.awt.*;

public class SimpleButton extends java.applet.Applet {

Button helloButton = new Button(“Hello World!”);

public void init() {

add(helloButton);

}

First, you need to import the java AWT package by typing:

import java.awt.*;

This is required in every bit of code you make that has these components!

Next, you need to declare the class, this one will be named SimpleButton and it’s an applet so it needs to extend the Applet code.

Now, you need to declare the button like this:

Button helloButton = new Button(“Hello World!”);

The new Button(“ part tells Java that the button’s caption will be Hello World!

Now, to let the button show up, you need to add it during the init method:

add(helloButton);

Now, because it’s an applet, you need to create a web page to show it. Here’s the code:

<HTML>

<BODY>

</APPLET>

</BODY>

</HTML>

The result of this code is this:

After we cover all of the basic AWT components you’ll learn how to make them do stuff using events. Until then, just play around with them.

Also, because of the number of components, rather than writing out all the code all the time, I’ll just write out the main parts of it, refer to the Code directory for the complete listing.

Labels

Now, labels... Labels just give information to the user. They can’t be changed, you set their text when you initialize them. For example, a label might say what to enter into a text field.

Label eMailLabel = new Label("E-mail address: ");

add(eMailLabel);

The result of that is:

Text Fields

Next is text fields. Text fields allow the user to input data in such as their name. Text fields allow only one line of text. You decide how big the text box is by telling it how big in characters wide. So if you put it to be 10 characters wide, it’d be big enough to fit 10 characters, NOT 10 pixels wide. Also, you can give it a starting text when you initialize it.

TextField txtName = new TextField(“Donny”, 10);

add(txtName);

This is what that looks like:

Text Areas

Now, text fields can only hold one line of text. What if you want to have a multi-line input area? Well, you can use a text area for that. With a text area, you specify how high and how wide in characters the text area is. So, lets say you wanted one 20 characters wide and 3 characters tall:

TextArea comments = new TextArea(“This is on line 1\nThis is on line 2”, 3,20);

add(comments);

This is the result of that:

You may have noticed, to display the default text on multiple lines you use a forward slash followed by an n (\n) this goes to the next line.

Check Boxes

Now, another common AWT component is a checkbox and an option box. A check box is a box which has two values, true or false, and a label beside it describing what it is. Another thing is the option box, or radio button. Radio buttons can only be in groups, and only one of them can be selected at a time. First, a checkbox:

Checkbox goodTutorial = new Checkbox(“Is this a good tutorial?”);

add(goodTutorial);

The above code will create a checkbox with no value (False)

Now, you can also set the default value to true if you want by changing it to this:

Checkbox goodTutorial = new Checkbox(“Is this a good tutorial?”, true);

add(goodTutorial);

Radio Buttons (or Option Boxes)

Radio buttons are a bunch of option boxes in a group. Only one of then can be checked at a time. This is useful if you need to give the user a few options where only one will apply, for example what age range they are. First, you need to create a checkbox group and then specify that certain checkboxes are part of the group. Finally, you add the checkboxes to the screen.

CheckboxGroup age = new CheckboxGroup();

Checkbox chkUnder10 = new Checkbox(“Under 10 years old”, false, age);

Checkbox chk10to15 = new Checkbox(“10 to 14 years old”, false, age);

Checkbox chk15to20 = new Checkbox(“15 to 19 years old”, true, age);

Checkbox chkOver20 = new Checkbox(“Over 20 years old”, false, age);

add(chkUnder10);

add(chk10to15);

add(chk15to20);

add(chkOver20);

The result of the above code is this:

Drop Down Lists

Drop down lists are lists of different options that you can select. Only one is shown until you click to bring up the rest. These are the same as radio buttons except it’s in a list.

First, you need to create the choice object, and then you add different text to the choice. Finally, you add the choice object to the screen.

Choice textAlignment = new Choice();

textAlignment.add(“Left”);

textAlignment.add(“Center”);

textAlignment.add(“Right”);

textAlignment.add(“Random”);

add(textAlignment);

By default it will look like this:

But after you click on the arrow, it expands to show all option:

Panels

A panel is an object which holds other objects. It’s just a container to organize and arrange your GUI better. Once, you learn about Layout Managers you’ll see why panels are a useful tool. For now, just know that they’re useful. Here’s an example of a set of buttons added into a panel:

Panel myPanel = new Panel();

myPanel.add(helloButton);

myPanel.add(goodbyeButton);

add(myPanel);

It looks no different than if you just added the buttons regularly, but you’ll see why you might want to use panels later on... This is what it looks like:

Layout Managers

Up until now, all the objects on screen have been displayed on screen in no particular fashion. They’re added in the order you use the add( command. If you’ve experimented with the code and added more of any object, you’ll see that they’re left to right until there’s no more room, and then they go to the next line. But layout managers allow you to organize the objects more. The default layout manager is the FlowLayout. You set the layout by creating a layout object and setting the layout to that object. This would set the layout to FlowLayout:

FlowLayout myLayout = new FlowLayout();

setLayout(myLayout);

Here’s an example of a bunch of buttons using the FlowLayout manager:

Button btnHey = new Button(“Hey”);

Button btnHow = new Button(“how”);

Button btnAre = new Button(“are”);

Button btnYou = new Button(“you”);

Button btnQuestion = new Button(“?”);

add(btnHey);

add(btnHow);

add(btnAre);

add(btnYou);

add(btnQuestion);

This is what that code looks like with the default layout manager:

Now, there are other layout managers. There’s the GridLayout manager which, as you might have guessed, arranges the objects on the screen like a grid. You specify how many spaces high and how many wide. This will create a grid 2 spaces high and 3 wide:

GridLayout myLayout = new GridLayout(2, 3);

setLayout(myLayout);

And this is what all of the buttons look like when you use the GridLayout above:

There is yet another layout manager: the BorderLayout manager. It lets you choose where the objects are placed – north, south, east, west, and center.

With this layout manager, it nothing changes when you create the buttons, but when you add them to the screen you must specify where they go:

BorderLayout myLayout = new BorderLayout();

add(btnHey, “North”);

add(btnHow, “West”);

add(btnAre, “Center”);

add(btnYou, “East”);

add(btnQuestion, “South”);

This is what the buttons look like:

Also, you can specify how far apart the objects are by adding a few parameters to the constructor. This would make all objects 10 pixels apart from each other on the X axis and 15 apart on the Y axis:

BorderLayout myLayout = new BorderLayout(10,15);

And this is what it looks like:

Now, you’re probably wondering “Well, I’ve learned about panels... I’ve learned about layout managers... but I still don’t know why I’d want to use a panel!” Well, this is why you’d want to use a panel – you can use different layout managers in different panels. So, if it’s easier to layout one part with the GridLayout and another part with the BorderLayout, you can create two panels and use different layout managers where appropriate. Then you put all the panels together under whatever manager you like!

Well, this concludes part one of the GUI tutorial. Check out the next part to find out how to make your buttons and text fields do stuff.

Also, please remember to vote for this tutorial, and leave a comment if there’s anything I should do to improve this. Thank you!

.programmingenhance

Search This Blog

Java GUI Tutorial – Part 1

Labels

Comments

Post a Comment

Popular posts from this blog

WAP to calculate the monthly telephone bills as per the following rule: Minimum Rs. 200 for upto 100 calls. Plus Rs. 0.60 per call for next 50 calls. Plus Rs. 0.50 per call for next 50 calls. Plus Rs. 0.40 per call for any call beyond 200 calls.

Write a program to calculate the total expenses. Quantity and price per item are input by the user and discount of 10% is offered if the expense is more than 7000.

C++ program to write number 1 to 100 in a data file NOTES.TXT