eXtropia: the open web technology company
Technology | Support | Tutorials | Development | About Us | Users | Contact Us
 ::   Tutorials
 ::   Presentations
Perl & CGI tutorials
 ::   Intro to Perl/CGI and HTML Forms
 ::   Intro to Windows Perl
 ::   Intro to Perl 5
 ::   Intro to Perl
 ::   Intro to Perl Taint mode
 ::   Sherlock Holmes and the Case of the Broken CGI Script
 ::   Writing COM Components in Perl

Java tutorials
 ::   Intro to Java
 ::   Cross Browser Java

Misc technical tutorials
 ::   Intro to The Web Application Development Environment
 ::   Introduction to XML
 ::   Intro to Web Design
 ::   Intro to Web Security
 ::   Databases for Web Developers
 ::   UNIX for Web Developers
 ::   Intro to Adobe Photoshop
 ::   Web Programming 101
 ::   Introduction to Microsoft DNA

Misc non-technical tutorials
 ::   Misc Technopreneurship Docs
 ::   What is a Webmaster?
 ::   What is the open source business model?
 ::   Technical writing
 ::   Small and mid-sized businesses on the Web

Offsite tutorials
 ::   ISAPI Perl Primer
 ::   Serving up web server basics
 ::   Introduction to Java (Parts 1 and 2) in Slovak


Introduction to Web Programming
Using the AWT To Build User Interfaces  

  • Okay, now it is time to make a big jump. We need to go from a simple application to a serious one that is more 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 I said 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 strange command-line input such as in this picture, you can present the user with a user-friendly interface such as that designed by Macintosh and then taken for Windows. GUIs make using a computer fun instead of a skill.

  • For the rest of the day we will focus on using the Java AWT packages to build user interfaces.

  • However, before we can begin, we need to understand how you can get information about all of the functionality available to you from the AWT libraries because there is no way that we can go over all the methods, fields and constructors of all the java objects (This is literally a book's worth of information).

  • Fortunately, you don't need to buy a book to know everything you need to about java user-interface design! All you need to do is 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. But if not, it is available at Javasoft. Of particular interest to you will be the java.awt package in which you will find the majority of classes that we will discus in this tutorial.

  • As we said, the online documentation provides everything you need to know about all of the objects java gives you to build user interfaces. Specifically, it 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.


  • 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 object you are interested in.

  • 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:

    Button b = new Button();
    Button b = new Button("Click Me");


  • 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, consider the following code:

    Button myButton = new Button();
    myButton.setLabel("My Button");

  • 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

java.awt.Button myButton = new java.awt.Buttton();

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

import java.awt.*;
public class TestFrame
  public static void main(String[] args)
    Frame f = new Frame();

    Button b = new Button("Hello Cyberspace");

Previous Page | Next Page