Figure 1: Result of exacuting code presented in Table 1.
|
| 1. Introduction | |
| 2. Flow layout | |
| 3. Grid layout | |
| 4. No layout |
The concept of layout managers was introduced earlier. Essentially a layout manager is an interface (java.awt.LayoutManager) that defines the methods necessary for a class to be able to arrange components with a container. There are five lyout classes that implement the LayouyManager interface:
Two will be described here, flow layout and grid layout. There is also a sixth option available, no layout, which will also be described.
Flow layout ooperates in a left to right, top to bottom manner. The FlowLayout constructors allow users to specify the allignment (LEFT, RIGHT or CENTER), veertical spacing and horizintal spacing (an example is presented in Table 1 together with the corresponding output in Figure 1).
// FLOW LAYOUT EXAMPLE
// Frans Coenen
// Monday 1 April 2000
// Dept. of Comp. Sci., University of Liverpool
import java.awt.event.*;
import java.awt.*;
class Gui extends Frame implements WindowListener {
/* Constructor */
public Gui(String text) {
super(text);
Font mono = new Font("Monospaced",Font.BOLD,14);
this.setFont(mono);
setBackground(Color.lightGray);
setLayout(new FlowLayout(FlowLayout.LEFT,10,10));
addWindowListener(this);
// create a set of buttons
Button button1 = new Button("red ");
button1.setBackground(Color.red);
add(button1);
Button button2 = new Button("cyan ");
button2.setBackground(Color.cyan);
add(button2);
Button button3 = new Button("green ");
button3.setBackground(Color.green);
add(button3);
Button button4 = new Button("magenta");
button4.setBackground(Color.magenta);
add(button4);
Button button5 = new Button("orange ");
button5.setBackground(Color.orange);
add(button5);
Button button6 = new Button("pink ");
button6.setBackground(Color.pink);
add(button6);
Button button7 = new Button("gray ");
button7.setBackground(Color.gray);
add(button7);
Button button8 = new Button("white ");
button8.setBackground(Color.white);
add(button8);
Button button9 = new Button("blue ");
button9.setBackground(Color.blue);
add(button9);
}
/* Window Closed */
public void windowClosed(WindowEvent event) {
}
/* Window Deiconified */
public void windowDeiconified(WindowEvent event) {
}
/* Window Iconified */
public void windowIconified(WindowEvent event) {
}
/* Window Activated */
public void windowActivated(WindowEvent event) {
}
/* Window Deactivated */
public void windowDeactivated(WindowEvent event) {
}
/* Window Opened */
public void windowOpened(WindowEvent event) {
}
/* Window Closing */
public void windowClosing(WindowEvent event) {
System.exit(0);
}
}
class GuiEx1 {
/* Main method */
public static void main(String[] args) {
Gui screen = new Gui("GUI Example 1");
screen.setSize(500,140);
screen.setVisible(true);
}
}
|
Table 1:Flow layout example
Figure 1: Result of exacuting code presented in Table 1.
When using the grid layout mamanger components are position into the respective cells of a grid. The GridLayout constructors allow users to specify: the number of rows and columns making up the grid, and the horizontal and vertiacl spacing of components. An example is presented in Table 2 together with the corresponding output in Figure 2.
class Gui extends Frame implements WindowListener {
/* Constructor */
public Gui(String text) {
super(text);
Font mono = new Font("Monospaced",Font.BOLD,14);
this.setFont(mono);
setBackground(Color.lightGray);
setLayout(new GridLayout(3,3,5,5));
addWindowListener(this);
// create a set of buttons
Button button1 = new Button("red ");
button1.setBackground(Color.red);
add(button1);
Button button2 = new Button("cyan ");
button2.setBackground(Color.cyan);
add(button2);
Button button3 = new Button("green ");
button3.setBackground(Color.green);
add(button3);
Button button4 = new Button("magenta");
button4.setBackground(Color.magenta);
add(button4);
Button button5 = new Button("orange ");
button5.setBackground(Color.orange);
add(button5);
Button button6 = new Button("pink ");
button6.setBackground(Color.pink);
add(button6);
Button button7 = new Button("gray ");
button7.setBackground(Color.gray);
add(button7);
Button button8 = new Button("white ");
button8.setBackground(Color.white);
add(button8);
Button button9 = new Button("blue ");
button9.setBackground(Color.blue);
add(button9);
}
|
Table 2: Grid layout example
Figure 2: Result of exacuting code presented in Table 2.
It is possible to specify particular X and Y coordinates for components. These are measured from the top left hand corner of the window so car must be taken to ensure that components are not obscured bny the title bar! Locations are set using the setLocation method.
Similarly we can expressly define dimensions of components using the setSize method.
The use of both the setLocation and setSize methods are illustrated in the code fragment presented in Table 3 (some sample output is given in Figure 3).
class Gui extends Frame implements WindowListener {
/* Constructor */
public Gui(String text) {
super(text);
int buttonWidth = 150;
int buttonHeight = 25;
int xSpacing = 10;
int ySpacing = 10;
int yCoord = 20;
Font mono = new Font("Monospaced",Font.BOLD,14);
this.setFont(mono);
setBackground(Color.lightGray);
setLayout(null);
addWindowListener(this);
// create a set of buttons
yCoord = yCoord+ySpacing;
Button button1 = new Button("red ");
button1.setBackground(Color.red);
button1.setSize(buttonWidth,buttonHeight);
button1.setLocation(xSpacing,yCoord);
add(button1);
Button button2 = new Button("cyan ");
button2.setBackground(Color.cyan);
button2.setSize(buttonWidth,buttonHeight);
button2.setLocation((xSpacing*2)+buttonWidth,yCoord);
add(button2);
Button button3 = new Button("green ");
button3.setBackground(Color.green);
button3.setSize(buttonWidth,buttonHeight);
button3.setLocation((xSpacing*3)+(buttonWidth)*2,yCoord);
add(button3);
yCoord = yCoord+ySpacing+buttonHeight;
Button button4 = new Button("magenta");
button4.setBackground(Color.magenta);
button4.setSize(buttonWidth,buttonHeight);
button4.setLocation(xSpacing,yCoord);
add(button4);
Button button5 = new Button("orange ");
button5.setBackground(Color.orange);
button5.setSize(buttonWidth,buttonHeight);
button5.setLocation((xSpacing*2)+buttonWidth,yCoord);
add(button5);
Button button6 = new Button("pink ");
button6.setBackground(Color.pink);
button6.setSize(buttonWidth,buttonHeight);
button6.setLocation((xSpacing*3)+(buttonWidth)*2,yCoord);
add(button6);
yCoord = yCoord+ySpacing+buttonHeight;
Button button7 = new Button("gray ");
button7.setBackground(Color.gray);
button7.setSize(buttonWidth,buttonHeight);
button7.setLocation(xSpacing,yCoord);
add(button7);
Button button8 = new Button("white ");
button8.setBackground(Color.white);
button8.setSize(buttonWidth,buttonHeight);
button8.setLocation((xSpacing*2)+buttonWidth,yCoord);
add(button8);
Button button9 = new Button("blue ");
button9.setBackground(Color.blue);
button9.setSize(buttonWidth,buttonHeight);
button9.setLocation((xSpacing*3)+(buttonWidth)*2,yCoord);
add(button9);
}
|
Table 3: Example with no layout manager
Figure 3: Result of exacuting code presented in Table 3.
Created and maintained by Frans Coenen. Last updated 18 July 2001