19th june 2013

 Containers and Components

There are two types of GUI elements:

1. Component: Components are elementary GUI entities (such as Button, Label, and TextField.)
2. Container: Containers (such as Frame, Panel and Applet) are used to hold components in a specific layout. A container can also hold sub-containers.

GUI components are also called controls (Microsoft ActiveX Control), widgets (Eclipse's Standard Widget Toolkit, Google Web Toolkit), which allow users to interact with the application via mouse, keyboard, and other forms of inputs such as voice.

In the above example, there are three containers: a Frame and two Panels. A Frame is the top-level container of an AWT GUI program. AFrame has a title bar (containing an icon, a title, and the minimize/maximize(restore-down)/close buttons), an optional menu bar and the content display area. A Panel is a rectangular area (or partition) used to group related GUI components in a certain layout. In the above example, the top-level Frame contains two Panels. There are five components: a Label (providing description), a TextField (for users to enter text), and three Buttons (for user to trigger certain programmed actions).

In a GUI program, a component must be kept in a container. You need to identify a container to hold the components. Every container has a method called add(Component c). A container (says aContainer) can invokeaContainer.add(aComponent) to add aComponent into itself. For example,

Panel panel = new Panel();        // Panel is a Container
Button btn = new Button("Press"); // Button is a Component
panel.add(btn);                   // The Panel Container adds a Button Component

2.3  AWT Container Classes

Top-Level Containers: Frame, Dialog and Applet

Each GUI program has a top-level container. The commonly-used top-level containers in AWT are Frame, Dialog and Applet:

• A Frame provides the "main window" for the GUI application, which has a title bar (containing an icon, a title, the minimize, maximize/restore-down and close buttons), an optional menu bar, and the content display area. To write a GUI program, we typically start with a subclass extending from java.awt.Frame to inherit the main window as follows:

  import java.awt.Frame;  // Using Frame class in package java.awt
  
  // A GUI program is written as a subclass of Frame - the top-level container
  // This subclass inherits all properties from Frame, e.g., title, icon, buttons, content-pane
  public class MyGUIProgram extends Frame {
     // Constructor to setup the GUI components
     public MyGUIProgram() { ...... }
  
     ......
     ......
  
     // The entry main() method
     public static void main(String[] args) {
        // Invoke the constructor (to setup the GUI) by allocating an instance
        MyGUIProgram m = new MyGUIProgram();
     }
  }

• An AWT Dialog is a "pop-up window" used for interacting with the users. A Dialog has a title-bar (containing an icon, a title and a close button) and a content display area, as illustrated.
• An AWT Applet (in package java.applet) is the top-level container for an applet, which is a Java program running inside a browser. Applet will be discussed in the later chapter.

Secondary Containers: Panel and ScrollPane

Secondary containers are placed inside a top-level container or another secondary container. AWT also provide these secondary containers:

• Panel: a rectangular box (partition) under a higher-level container, used to layout a set of related GUI components. See the above examples for illustration.
• ScrollPane: provides automatic horizontal and/or vertical scrolling for a single child component.
• others.

Hierarchy of the AWT Container Classes

The hierarchy of the AWT Container classes is as follows:

2.4  AWT Component Classes

AWT provides many ready-made and reusable GUI components. The frequently-used are: Button, TextField, Label, Checkbox, CheckboxGroup (radio buttons), List, and Choice, as illustrated below.

AWT GUI Component: Label

A java.awt.Label provides a text description message. Take note that System.out.println() prints to the system console, not to the graphics screen. You could use a Label to label another component (such as text field) or provide a text description.

Check the JDK API specification for java.awt.Label.

Constructors

public Label(String strLabel, int alignment); // Construct a Label with the given text String, of the text alignment
public Label(String strLabel);                // Construct a Label with the given text String
public Label();                               // Construct an initially empty Label

The Label class has three constructors:

1. The first constructor constructs a Label object with the given text string in the given alignment. Note that three static constants Label.LEFT, Label.RIGHT, and Label.CENTER are defined in the class for you to specify the alignment (rather than asking you to memorize arbitrary integer values).
2. The second constructor constructs a Label object with the given text string in default of left-aligned.
3. The third constructor constructs a Label object with an initially empty string. You could set the label text via the setText() method later.

Constants

public static final LEFT;    // Label.LEFT
public static final RIGHT;   // Label.RIGHT
public static final CENTER;  // Label.CENTER

These three constants are defined for specifying the alignment of the Label's text.

Public Methods

// Examples
public String getText();
public void setText(String strLabel);
public int getAlignment();
public void setAlignment(int alignment);

The getText() and setText() methods can be used to read and modify the Label's text. Similarly, the getAlignment() and setAlignment() methods can be used to retrieve and modify the alignment of the text.

Constructing a Component and Adding the Component into a Container

Three steps are necessary to create and place a GUI component:

1. Declare the component with an identifier;
2. Construct the component by invoking an appropriate constructor via the new operator;
3. Identify the container (such as Frame or Panel) designed to hold this component. The container can then add this component onto itself via aContainer.add(aComponent) method. Every container has a add(Component) method. Take note that it is the container that actively and explicitly adds a component onto itself, instead of the other way.

AWT GUI Component: Button

A java.awt.Button is a GUI component that triggers a certain programmed action upon clicking.

Constructors

public Button(String buttonLabel);
   // Construct a Button with the given label
public Button();
   // Construct a Button with empty label

The Button class has two constructors. The first constructor creates a Button object with the given label painted over the button. The second constructor creates a Button object with no label.

AWT GUI Component: TextField

A java.awt.TextField is single-line text box for users to enter texts. (There is a multiple-line text box called TextArea.) Hitting the "ENTER" key on a TextField object triggers an action-event.

Constructors

public TextField(String strInitialText, int columns);
   // Construct a TextField instance with the given initial text string with the number of columns.
public TextField(String strInitialText);
   // Construct a TextField instance with the given initial text string.
public TextField(int columns);
   // Construct a TextField instance with the number of columns.