Introduction to Java : Using the AWT To Build User Interfaces

Using the AWT To Build User Interfaces

Now we will make a big jump: we need to go from a simple application to a more serious one that will be representative of the kinds of applications you will build in real life. To do so, we will take advantage of the AWT class package that is distributed with the JDK.

As stated in the pre-requisite article “Web Programming 101,” one of the big benefits of using Java is the ability it gives you to create web-based graphical user interfaces (GUIs).

GUIs are one of the nicest things about modern-day programming. Instead of forcing the user to deal with the strange command-line input such as in the picture below, you can present the user with an easy-to-use interface akin to the early Macintosh design, later adapted by Microsoft. GUIs make using a computer fun, instead of a skill.

We will now focus on using the Java AWT packages to build user interfaces. Before we can begin, you will need to understand how to get functionality information from the AWT libraries. We will not go over all the methods, fields, and constructors of all of the java objects, since that information could make up an entire book unto itself!

Fortunately, you don’t need to buy a book to know everything you need to about java user-interface design. All you need is to understand how to use the online API reference that is generated by a java utility called javadoc.

Hopefully you downloaded the documentation when you downloaded the JDK. If not, it is available at Javasoft. The java.awt package will be of particular interest to you because there you will find the majority of classes that will be discussed in this tutorial. The online documentation provides everything you need to know about all of the objects used to build user interfaces. It specifically provides you with the public API you will use.

Let’s look at the documentation for the AWT Button, widget for example.

Decrypting the Inheritance Hierarchy

Each class begins with a section discussing its inheritance hierarchy. The inheritance hierarchy lets you know from which classes this class extends. You can easily see from button’s inheritance diagram that it extends from both Component and Object.

The benefit of knowing the inheritance hierarchy is that you will know where to look if the functionality you’re after is not contained in the class you are looking at. For example, suppose you are interested in changing the color of the button. You will soon find that there is no color changing method in the Button class. But you know that Buttons can change color because you’ve seen them on the web with other colors. Well, using the inheritance hierarchy diagram, you would next look to see if Button  inherits its chameleon powers from Component. In fact, it does.

Constructors

The next interesting section of the online documentation will be the Constructor Index. The constructor index outlines any constructors that you can use to build the desired object.

In the case of the Button, you can see that it has two constructors (If you click on the constructors, you’ll get a detailed description).

  • Button() which creates a button
  • Button(String) which creates a button with a given string to display

Thus, you know that you could easily use a Button in your code by using the syntax:

or

Methods

You will also notice about a dozen methods that you can use to manipulate the button object.

All public methods are available to you using dot notation, and the parameters you need to pass to them are listed. For example, you know that if you use the setLabel() method, you will have to pass a string as a parameter. Notice also that if you click on the method, you will get a detailed description including its return type.

Using the Online Documentation by Example

So how would you use a button in an application? Well, just as we did for our Announcer class, we would simply use the “new” keyword to instantiate a Button and then use dot notation to affect its state. For example:

Let’s consider a more complex example in which we place a button inside a frame. We will use the constructor to display “Hello Cyberspace” and we will color it white on black. using methods inherited from Component. Don’t get to hung up on the complexities of layout, just get the basic idea! However, do note the first line. It is essential that you import the awt package so that java will know where it can find the Button class. Notice also that we use the dot notation to reference the fields black and white in the Color class.

Actually, you could bypass the import statement by referring to the absolute path of Button such as

However, the import statement will save you a lot of typing since it creates a shortcut for you.