Title: Software Development with Java User Interfaces

Fine, you heard all hype about Java and I am not going to add anything more to it. Java is three items: object oriented, security, and portable. I am going assume that you already have installed JavaSoft's freely available Java Development Kit (JDK), minimum version 1.1.3, on any machine with a compatible operating system. (I do not care, neither does Java, if this is Linux, Windows, Solaris, Arm etc.).

The first programming interface for developing windowed application was the abstract windows toolkit (AWT). The computer boffins at JavaSoft had another name for it "another window toolkit". In any case the AWT is supplied as standard in the JDK. With AWT, you can create windows, draw graphics , works with JPEG or GIF images, receive events from the mouse or keyboard and build quite complicated user interfaces from a standard set of components.

The AWT is abstract in the sense that it is a virtual programming interface that is exactly the same for all implementations of Java on any operating system. Hence the widely acclaimed portability.

The second important concept to understand is that the design of the AWT is split into two fundamental parts. Each user interface component in the AWT is actually made of pure Java object class and a native peer. The Java object class, which you program with your Java code, actually delegates calls to its peer class, which lies deep inside of the Java implementation, and draws the user interface of the component using the native windowing API. That is the native peer has code that draws Windows frame on a Microsoft Windows platform, or code that draws Motif frames on a Solaris platform. As you can quickly understand each AWT component will be rendered on the native platform with the native "Look and Feel". Unfortunately the AWT is not good enough for developing professional applications without heavily customising the AWT. (In actual fact, the next generation user interface Swing/JFC supports pluggable (read dynamic installable) look and feel, but this is out of scope for this article.)

The AWT has several standard user interface components: Checkbox, Choice, List, Button, Canvas, Container, Label, Scrollbar, TextArea, TextField, MenuBar, MenuItem, Menu, CheckBoxItem, and PopupMenu. This is just about acceptable for building an application. But where can you put these interface components? Well there is the ubiquitous Panel, ScrollPane, Window, Dialog, Frame, and FileDialog. Fine, how do position these components geometrically to create a nice user interface? The AWT already has a number of layout managers which do not perform any drawing graphically, but simply orientate and position the components like FlowLayout, GridLayout, GridBagLayout, CardLayout, and the infamous BorderLayout.

End of the theory, let me show you how easy it is to write an AWT application. I will not deal with applets in this article. Here is the code:

// AWTExample1.java
import java.awt.*;    // pull in the AWT classes
public class AWTExample1 {
  public AWTExample1()  {
  // This is the constructor 
    Frame frame = new Frame("My Own title");
    frame.setLayout( new BorderLayout() );
    Button button = new Button("I am a button");
    frame.add( button, "Center");
    frame.pack();
    frame.show();
  }
public static void main( String [] args ){
  // This is the main application.
  AWTExample1 example = new AWTExample1();
  }
}

Java is much like Smalltalk or Objective C as it defines all methods inside the class definition unlike C++ header and implementation source files. It has constructors, but no need for a destructor since every object can be garbage collected. However, there are finalizers to release and clean up important system resources like network Sockets or file pointers. In a Java source file it is possible to have as many classes as you like, but only one can be declared public. The main procedure is a static method, which does not return any parameter, and is declared public in the above example. It instantiates an AWTExample1 object. The constructor of this object creates a window Frame with a string the content of which appears in the title bar. Next a BorderLayout manager is utilised which allows you to place components to north, east, south, west and centre of a container. The constructor creates a button component with a label. The frame is then packed: all components in the container frame are asked for preferred geometric size and laid out accordingly. The last instruction makes the frame container and all of sub-components visible.

All AWT Components are subclassed from a Java class called Component, which support attributes such as fonts, foreground and background colour, location, dimension, and much more. Let us customise the button component. It is easy to set a font and colour in the constructor.

  Button button = new Button("A Coloured Button");
  button.setFont( new Font( "Serif", Font.BOLD, 18 ));
  button.setForeground( Color.white );
  button.setBackground( Color.blue );

We are not limited by predefined standard static colour objects in the Color class. It is possible to define our own quirky yellow colour using red, green, blue coordinates.

  Button.setForeground( new Color( 240, 230, 31 ) );

If you want to see exactly what the BorderLayout does to its components we can add some very terse source code, just before we pack the frame.

  frame.add( new Button( "North"), "North" );
  frame.add( new Button( "East"), "East" );
  frame.add( new Button( "South"), "South" );
  frame.add( new Button( "West"), "West" );

Of course the other buttons are not styled like the centre button, but experiment with this example to see what the layout manager does.

A Panel is a generic container component used to group other components inside of frames and other Panels. We will use this component to build an interface to simulate a video recorder's group of push buttons: to record, play, stop, pause, and go forward and backward. We will need to layout the panel so that the buttons it contains are uniformly positioned and have the same size. This is perfect candidate for the GridLayout manager, so let use that. We will also make the VideoRecorder1 class a subclass of the Frame component class, just to illustrate this is possible. It also means we can treat the video recorder object class just like another user interface component. Java uses the extends key to signify inheritance.

// VideoRecorder1.java
import java.awt.*;
public class VideoRecorder1 extends Frame{
  // Member variables
  Button bt_eject, bt_stop, bt_rec, bt_rw;
  Button bt_play, bt_ffwd, bt_pause;
  public VideoRecorder1 ( String  title ){
  // Constructor
    super( title );  // pass the title to the superclass frame class
    setLayout( new BorderLayout()  );
    Panel panel = new Panel();
    panel.setLayout( new GridLayout( 1, 7 ) );
    Font font = new Font( "Sanserif", Font.BOLD, 12 );
    bt_eject = new Button( "Eject" );
    bt_eject.setFont(font);
    bt_stop = new Button( "Eject" );
    bt_stop.setFont(font);
    bt_rec = new Button( "Rec" );
    bt_rec.setFont(font);
    bt_rew = new Button( "Rew" );
    bt_rew.setFont(font);
    bt_play = new Button( "Play" );
    bt_play.setFont(font);
    bt_ffwd = new Button( "FFwd" );
    bt_ffwd.setFont(font);
    bt_pause = new Button( "Pause" );
    bt_pause.setFont(font);
    // Add buttons to the panel
    panel.add( bt_eject);
    panel.add( bt_stop);
    panel.add( bt_rec);
    panel.add( bt_rew);
    panel.add( bt_play);
    panel.add( bt_ffwd);
    panel.add( bt_paus;
    // Add the panel to the frame
    add( panel, "Center" );
}
public static void main ( String[] args ){
  VideoRecorder1 dvr = new VideoRecorder1( "ACCU Digital Video Recorder" );
  dvr.pack();
  dvr.show();
  }
}

The VideoRecorder constructor takes a parameter, the title string, which is passed to the Frame super class using the super keyword. This video recorder class gets a border layout manager, and panel is created with a GridLayout manager with a grid row size of 1 and grid column size of 7. Next, the buttons are created and then added to the panel in order. Finally the panel is added to the video recorder class. The Main method now instantiates our video recorder component, packs the components in it and then maps it to the display.

In the next article I will replace the text label with GIF images and introduce AWT event handling mechanism. Have fun with AWT and Java.