AWT Panel Container in Java Explained

This example requires preliminary knowledge on the AWT Frame Window, Grid Layout and Border Layout. You can read the articles from the below Links in the order specified.

  1. Article on AWT Frame Window From Hub Pages Net work => Hub Page Article
  2. Example on Border Layout => Article from Coding-Examples
  3. Example on Grid Layout => Article From Coding-Examples

1. Introduction to AWT Panel

An AWT Panel in Java can act as a container and a component. A container can hold components like Buttons. For example, a Frame Window in AWT is a container which can host components. Unlike Frame Window, the Panel does not have the title and borders. However, one can assign a layout manager to a Panel.

As told earlier, a Panel can act as a container. Here, it can host components like Button, Text Area, Check Box, etc. A Panel can also act as a component and in such a state other containers like Frame Window and Dialog can host it. Most Java developers use Panels for nesting the container with different layout managers.

In this example, we will create a Frame Window two different layout manager. We will achieve this through java.awt.Panel class in Java.

2. About The Example

The below picture shows the example that we create in this article:


In this example, We will place a TextArea control between the Add and Remove button. An AWT Panel container hosts all these three controls in it. In the example’s bottom, there is a grid of buttons. One more AWT Panel takes the ownership of these controls. So in total, there are two Panels in the Frame Window.

The Add button in the top Panel adds a button in the bottom grid. The Remove button will remove the last added button from the button grid. TextArea component will tell which button is added and removed in the button grid. In this example, first we will create the Panels and add them to the Frame Window. Then, we will give the handler functions for the Add and Remove buttons.

3. Nested Containers Using AWT Panel

The Panel is a Container without a border. The Frame is also a Container but with a border. When we add a Panel to a Frame Window, we can see it as a Nested Container. Simply, if a Container holds another Container, we call it as Nested Containers. Let us see how we make our example by stacking the Container one over on top of another. Now we will have a look at the below picture.

Java AWT Nested Container
Java AWT Nested Container

In the above picture, one can see three AWT Containers. Now for explanation purpose, in this article, we will refer these Containers with a name. The Frame window we can call as Main Container. We can call the Panel in the top right of the picture as Button Manager and the one in the button as Button Grid.

Border Layout manages our Main Container and Button Manager. The Grid Layout takes care of the buttons of our Button Grid Panel. Main Container is a Frame Window whereas the Button Grid and Button Manager are Panels. First, we will create the Panels and then add them to the Frame Window one-by-one.

The add button will add a new button in the button grid at the bottom. The remove button will remove the last control in the Grid.

4. Preparing Main Container

The Frame Window is our Main Container which will house other Panels as components. In this section we will create our Main Container. To create it, we need Frame and BorderLayout classes. The below code shows the import statements:

Next, we give a size, location and title to our frame window. The code is below:

We create a WindowListener class to dispose the Frame Window when a user clicks the close button of the Frame Window. Here, we are referring the X button on the Top Right Corner as the close button. Note, in the constructor we receive the Frame Window and store that as internal member. Also, we provide a dummy handler for all other events. Below is the WindowEvent handler code:

First, we create the instance of the FrameWindowEventHandler and then hand over that to the addWindowListener function. It will attach our Frame Window to the Listener class. So, when a user clicks the X button, our Frame Window will send the WindowEvent to the Listener class. In the class, we dispose the window in the windowClosing handler function.

Finally, in the Application Main, we create and display our Frame Window. The code is below:

If we run the application at this stage, it looks like below:

A Frame Window Application
A Frame Window Application

5. Preparing the Button Manager AWT Panel

In this section we will create Button Manager Panel and then add it to our Frame Window. This Panel contains two buttons and one Text Area Control. The below code creates all these AWT controls.

We give the BorderLayout manager to our Panel to manage the alignment of these controls. In the below code, we call the setLayout method and feed the layout manager object to it.

The add method of a Panel will add the Controls to it. Since, the Border Layout Manager organizes Controls for this Panel, we specify the location in which the Controls needs to be added. The constants NORTH, SOUTH  and CENTER specify these locations to the Layout Manager. In the below code, the add button occupies the NORTH while the remove button eats up the SOUTH. The Layout manager considers all the left out area as CENTER and TextArea Control takes that space.

The Button Manager is ready and we can now add it to our Frame Window. In the below code, we add our Button Manager Panel to the Frame Window using the add method of it. Note, previously we added the control to Button Manager Panel. The Panel acted as a container. In the below code, the Frame Window acts as a Container and Panel acts as a Component. The Frame Window also managed by the BorderLayout Manager which is the default manager for it.

Our Example looks like below at this stage. One can close the Frame Window but the buttons do nothing. We will handle the button events later in this article. Also note the Text Area in the middle contains a vertical scroll bar.

Adding Button Manager Panel to AWT Frame Window
Adding Button Manager Panel to AWT Frame Window

6. Preparing the Button Grid AWT Panel

The ButtonGrid class extends the java.AWT.Panel. In this Panel, we maintain a grid of Button Controls. In a loop, we create seven buttons and add that to the Panel. After that, we assign GridLayout to the Panel. In the constructor we asked to create a 3 row, 10 column grid. Note, we also maintain the buttons in Array List called ButtonList. Below is our Button Grid class:

Previously, we added the Button Manager to the Frame Window, and it took the top location of the Frame Window. Now we will add our Button Grid to take the rest of the space in the Frame Window. This means, we add our Button Grid Panel to the CENTER location of the Border Layout managed Frame Window. Below is the code:

At this stage, our example looks like below:

Nested Containers
Nested Containers

In the above picture, we can see the Nested Containers. The two Panels are Containers. The Frame Window is also a Container. Since we added the Panel Containers to the Frame Window, we call this as Nested Containers. Note, we can add a Panel to some other Panel as well.

7. Button Events Using  ActionCommand

In this section, we will create button click event handler for the Add and Remove buttons in the Button Manager Panel. When the user clicks a button, it produces the ActionEvent, and Java AWT delivers this event to any registered ActionListener. So, we will derived our handler class from it.

When a user clicks the Add button in the Button Manager Panel, we will add an AWT Button in the in the Button Grid Panel. We will also show a descriptive message in the TextArea AWT Control, which is in the Button Manager Panel. Because of this reason, we hold references for the TextArea Control and ButtonGrid  in this Action Listener. Below is the Class and its constructor:

In Java AWT, we can set a Command String to a button and get back that string whenever we want. This will act as a tag to identify the button. In Java AWT, we call it as Action Command.

7.1 Handling the Add Button

Next, we override the actionPerformed function to receive the ActionEvent and handled that here. In the below code, we retrieved the button which is the source of the button click and then retrieved the command string by calling the getActionCommand function. Note, in the Button Manager Panel, soon we will set this action command. Through this action command, we get to know that the event source is add button or remove button. When we see that it is an add command, we create the button on the fly and then add it to the Button Grid Panel and the array list. We will also display a note in the TextArea Control.

7.2 Handling the Remove Button

When the action command is remove, we take the last added button from the Array List. Then, we pass that button reference to the remove function of our Button Grid Panel Container. Note, we also remove the button reference from our Array List. To see this change in the Button grid, we call revalidate and repaint  on the ButtonGrid Panel. The code is below:

Our Action Listener needs a Button Grid to add or remove the buttons. It also needs the Text Area to inform what happened to the Grid. Moreover, we have to set Action Commands for the add and remove buttons. We do all these in a class member function. First, we create our ActionListener derived object and then register the add and the remove button with it. Then, we set the Action Commands to these buttons using the setActionCommand method of the AWT Button. All these are done in a new method which takes ButtonGrid Panel as a parameter.

We are not yet done as we need to call our new method LinkActionListener. We call this method from the Frame Window.

That is all and we are done. The below video shows the example in action.

8. Code Listings








This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: