GUI Tutorial - Part 1

GUI Tutorial Part One
onny Nadolny
Introduction
This tutorial will teach you about Graphical User Interfaces, or GUIs. GUIs are important because its an effective way for the user to interact with the program. The way Java allows you to create GUIs 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 youre 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. Youll learn how to set up event handling, how to detect which object the event belongs to, and more. Well, its time to start coding!
Table of Contents Section

Buttons Labels Text Fields Text Areas Check Boxes Radio Buttons Drop Down Lists Panels Layout Managers
Page # 3 4 4 4 5 5 6 6 7
Buttons First, heres 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 its 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 buttons 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 its an applet, you need to create a web page to show it. Heres the code:
<HTML> <BODY> <APPLET CODE=SimpleButton.class WIDTH=100 HEIGHT=100> </APPLET> </BODY> </HTML>
The result of this code is this: After we cover all of the basic AWT components youll 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, Ill just write out the main parts of it, refer to the Code directory for the complete listing. Table of Contents
3
Labels Now, labels... Labels just give information to the user. They cant 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, itd 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.
Table of Contents
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:
Table of Contents
5
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 its 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. Its just a container to organize and arrange your GUI better. Once, you learn about Layout Managers youll see why panels are a useful tool. For now, just know that theyre useful. Heres 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 youll see why you might want to use panels later on... This is what it looks like:
Table of Contents
6
Layout Managers Up until now, all the objects on screen have been displayed on screen in no particular fashion. Theyre added in the order you use the add( command. If youve experimented with the code and added more of any object, youll see that theyre left to right until theres 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);
Heres 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. Theres 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:
Table of Contents
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, youre probably wondering Well, Ive learned about panels... Ive learned about layout managers... but I still dont know why Id want to use a panel! Well, this is why youd want to use a panel you can use different layout managers in different panels. So, if its 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 theres anything I should do to improve this. Thank you! Table of Contents
8

GUI Tutorial - Part 1

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

GUI Tutorial - Part 1

Uploaded by

Copyright:

Available Formats

GUI Tutorial Part One

Table of Contents Section

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

The result of that is:

This is what that looks like:

This is the result of that:

The result of the above code is this:

Heres an example of a bunch of buttons using the FlowLayout manager:

This is what the buttons look like:

And this is what it looks like:

You might also like