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.
- Article on AWT Frame Window From Hub Pages Net work => Hub Page Article
- Example on Border Layout => Article from Coding-Examples
- 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.
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:
|
1 2 3 |
//Snippet 01: Required Imports for the Frame Window import java.awt.BorderLayout; import java.awt.Frame; |
Next, we give a size, location and title to our frame window. The code is below:
|
1 2 3 4 |
//Snippet 02: Setup the Frame Window super(FrameTitle); setSize(500, 400); setLocation(100,100); |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
//Snippet 03: Class for Handling the Frame Window Events public class FrameWindowEventHandler implements WindowListener{ public Frame theWindow; public FrameWindowEventHandler(Frame theWindow) { super(); this.theWindow = theWindow; } @Override public void windowActivated(WindowEvent arg0) {} @Override public void windowClosed(WindowEvent arg0) {} @Override public void windowClosing(WindowEvent arg0) { theWindow.dispose(); } @Override public void windowDeactivated(WindowEvent arg0) {} @Override public void windowDeiconified(WindowEvent arg0) {} @Override public void windowIconified(WindowEvent arg0) {} @Override public void windowOpened(WindowEvent arg0) {} } |
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.
|
1 2 3 4 |
//Snippet 04: Setup the Listener for Window Events FrameWindowEventHandler Handler_Window = new FrameWindowEventHandler(this); addWindowListener(Handler_Window); |
Finally, in the Application Main, we create and display our Frame Window. The code is below:
|
1 2 3 4 5 6 7 |
public class AwtPanelExample { public static void main(String[] args) { //Snippet 05: Create Frame and Display it PanelsWindow fw = new PanelsWindow("AWT Nested Containers - Panels"); fw.setVisible(true); } } |
If we run the application at this stage, it looks like below:
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.
|
1 2 3 4 5 6 7 8 9 10 |
public class ButtonManager extends Panel { private Button btnadd; private Button btnremove; TextArea taInfo; public ButtonManager() { //Snippet 06: Create Controller Buttons //Information Display Text Area btnadd = new Button("Add"); btnremove = new Button("Remove"); taInfo = new TextArea(); |
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.
|
1 2 3 |
//Snippet 07: Set Layout Manager for the Panel BorderLayout layout = new BorderLayout(); setLayout(layout); |
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.
|
1 2 3 4 |
//Snippet 08: Add Components to Panel add(btnadd, BorderLayout.NORTH); add(btnremove, BorderLayout.SOUTH); add(taInfo, BorderLayout.CENTER); |
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.
|
1 2 3 4 |
//Snippet 09: Add Button Controller Panel to Top //Note: The default Layout Manager is Border Layout. ButtonManager BtnMgrPanel = new ButtonManager(); add(BtnMgrPanel, BorderLayout.NORTH); |
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.
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
public class ButtonGrid extends Panel { public ArrayList ButtonList; public ButtonGrid() { //Snippet 10: Let us create 7 Buttons ButtonList = new ArrayList(); for (int i=0; i<6; i++) { Button btn = new Button(Integer.toString(i+1)); ButtonList.add(btn); add(btn); } //Snippet 11: Set Layout Manager GridLayout layout = new GridLayout(3, 10); setLayout(layout); } } |
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:
|
1 2 3 |
//Snippet 12: Add Button Grid Panel to Center ButtonGrid buttonGridPanel = new ButtonGrid(); add(buttonGridPanel, BorderLayout.CENTER); |
At this stage, our example looks like below:
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:
|
1 2 3 4 5 6 7 8 9 |
public class ControlPanelButtonHandler implements ActionListener { //Snippet 13: Button Event Handler Ctor private ButtonGrid buttonGrid; private TextArea taInfo; public ControlPanelButtonHandler(ButtonGrid grid, TextArea ta) { buttonGrid = grid; taInfo = ta; } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
@Override public void actionPerformed(ActionEvent e) { Button btn = (Button) e.getSource(); String command = btn.getActionCommand(); //Snippet 14: Handler to Add Button if(command.matches("Add") == true ){ Button newbtn = new Button(Integer.toString( buttonGrid.ButtonList.size()+1 )); taInfo.append("Button " + (buttonGrid.ButtonList.size()+1) + " Added\n"); buttonGrid.ButtonList.add(newbtn); buttonGrid.add(newbtn); } |
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:
|
1 2 3 4 5 6 7 8 9 10 |
//Snippet 15: Handler to Remove Button if(command.matches("Remove") == true ){ //buttonGrid.ButtonList.remove(index) Button btnToRemove = (Button)buttonGrid.ButtonList.get(buttonGrid.ButtonList.size()-1); taInfo.append("Button " + buttonGrid.ButtonList.size() + " Removed\n"); buttonGrid.remove(btnToRemove); buttonGrid.ButtonList.remove(btnToRemove); } buttonGrid.revalidate(); buttonGrid.repaint(); |
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.
|
1 2 3 4 5 6 7 8 9 10 |
//Snippet 16: Register the Buttons with Action Listener //And supply the Grid Panel so that It can manipulate it public void LinkActionListener(ButtonGrid bGrid) { ControlPanelButtonHandler btnHandler = new ControlPanelButtonHandler(bGrid, taInfo); btnadd.addActionListener(btnHandler); btnremove.addActionListener(btnHandler); btnadd.setActionCommand("Add"); btnremove.setActionCommand("Remove"); } |
We are not yet done as we need to call our new method LinkActionListener. We call this method from the Frame Window.
|
1 2 3 4 |
//Snippet 17: Register Action Listener with //Buttons in Button Manager. Also link it with //Button Grid Panel BtnMgrPanel.LinkActionListener(buttonGridPanel); |
That is all and we are done. The below video shows the example in action.
8. Code Listings
8.1 AWTPanelExample.java
|
1 2 3 4 5 6 7 |
public class AwtPanelExample { public static void main(String[] args) { //Snippet 05: Create Frame and Display it PanelsWindow fw = new PanelsWindow("AWT Nested Containers - Panels"); fw.setVisible(true); } } |
8.2 FrameWindowEventHandler.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
import java.awt.Frame; import java.awt.event.WindowEvent; import java.awt.event.WindowListener; //Snippet 03: Class for Handling the Frame Window Events public class FrameWindowEventHandler implements WindowListener{ public Frame theWindow; public FrameWindowEventHandler(Frame theWindow) { super(); this.theWindow = theWindow; } @Override public void windowActivated(WindowEvent arg0) {} @Override public void windowClosed(WindowEvent arg0) {} @Override public void windowClosing(WindowEvent arg0) { theWindow.dispose(); } @Override public void windowDeactivated(WindowEvent arg0) {} @Override public void windowDeiconified(WindowEvent arg0) {} @Override public void windowIconified(WindowEvent arg0) {} @Override public void windowOpened(WindowEvent arg0) {} } |
8.3 ButtonManager.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
import java.awt.BorderLayout; import java.awt.Button; import java.awt.Panel; import java.awt.TextArea; public class ButtonManager extends Panel { private Button btnadd; private Button btnremove; TextArea taInfo; public ButtonManager() { //Snippet 06: Create Controller Buttons //Information Display Text Area btnadd = new Button("Add"); btnremove = new Button("Remove"); taInfo = new TextArea(); //Snippet 07: Set Layout Manager for the Panel BorderLayout layout = new BorderLayout(); setLayout(layout); //Snippet 08: Add Components to Panel add(btnadd, BorderLayout.NORTH); add(btnremove, BorderLayout.SOUTH); add(taInfo, BorderLayout.CENTER); } //Snippet 16: Register the Buttons with Action Listener //And supply the Grid Panel so that It can manipulate it public void LinkActionListener(ButtonGrid bGrid) { ControlPanelButtonHandler btnHandler = new ControlPanelButtonHandler(bGrid, taInfo); btnadd.addActionListener(btnHandler); btnremove.addActionListener(btnHandler); btnadd.setActionCommand("Add"); btnremove.setActionCommand("Remove"); } } |
8.4 ButtonGrid.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
import java.awt.BorderLayout; import java.awt.Button; import java.awt.Panel; import java.awt.TextArea; public class ButtonManager extends Panel { private Button btnadd; private Button btnremove; TextArea taInfo; public ButtonManager() { //Snippet 06: Create Controller Buttons //Information Display Text Area btnadd = new Button("Add"); btnremove = new Button("Remove"); taInfo = new TextArea(); //Snippet 07: Set Layout Manager for the Panel BorderLayout layout = new BorderLayout(); setLayout(layout); //Snippet 08: Add Components to Panel add(btnadd, BorderLayout.NORTH); add(btnremove, BorderLayout.SOUTH); add(taInfo, BorderLayout.CENTER); } //Snippet 16: Register the Buttons with Action Listener //And supply the Grid Panel so that It can manipulate it public void LinkActionListener(ButtonGrid bGrid) { ControlPanelButtonHandler btnHandler = new ControlPanelButtonHandler(bGrid, taInfo); btnadd.addActionListener(btnHandler); btnremove.addActionListener(btnHandler); btnadd.setActionCommand("Add"); btnremove.setActionCommand("Remove"); } } |
8.5 ControlPanelButtonHandler.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
import java.awt.Button; import java.awt.TextArea; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; public class ControlPanelButtonHandler implements ActionListener { //Snippet 13: Button Event Handler Ctor private ButtonGrid buttonGrid; private TextArea taInfo; public ControlPanelButtonHandler(ButtonGrid grid, TextArea ta) { buttonGrid = grid; taInfo = ta; } @Override public void actionPerformed(ActionEvent e) { Button btn = (Button) e.getSource(); String command = btn.getActionCommand(); //Snippet 14: Handler to Add Button if(command.matches("Add") == true ){ Button newbtn = new Button(Integer.toString( buttonGrid.ButtonList.size()+1 )); taInfo.append("Button " + (buttonGrid.ButtonList.size()+1) + " Added\n"); buttonGrid.ButtonList.add(newbtn); buttonGrid.add(newbtn); } //Snippet 15: Handler to Remove Button if(command.matches("Remove") == true ){ //buttonGrid.ButtonList.remove(index) Button btnToRemove = (Button)buttonGrid.ButtonList.get( buttonGrid.ButtonList.size()-1); taInfo.append("Button " + buttonGrid.ButtonList.size() + " Removed\n"); buttonGrid.remove(btnToRemove); buttonGrid.ButtonList.remove(btnToRemove); } buttonGrid.revalidate(); buttonGrid.repaint(); } } |
8.6 PanelsWindow.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
//Snippet 01: Required Imports for the Frame Window import java.awt.BorderLayout; import java.awt.Frame; public class PanelsWindow extends Frame { public PanelsWindow(String FrameTitle){ //Snippet 02: Setup the Frame Window super(FrameTitle); setSize(500, 400); setLocation(100,100); //Snippet 04: Setup the Listener for Window Events FrameWindowEventHandler Handler_Window = new FrameWindowEventHandler(this); addWindowListener(Handler_Window); //Snippet 09: Add Button Controller Panel to Top //Note: The default Layout Manager is Border Layout. ButtonManager BtnMgrPanel = new ButtonManager(); add(BtnMgrPanel, BorderLayout.NORTH); //Snippet 12: Add Button Grid Panel to Center ButtonGrid buttonGridPanel = new ButtonGrid(); add(buttonGridPanel, BorderLayout.CENTER); //Snippet 17: Register Action Listener with //Buttons in Button Manager. Also link it with //Button Grid Panel BtnMgrPanel.LinkActionListener(buttonGridPanel); } } |
Tags: ActionCommand, AWT, BorderLayout, GridLayout, Panel
Do you like this Example? Please comment about it for others!!
This site uses Akismet to reduce spam. Learn how your comment data is processed.