Designing GUIs isn't as straightforward as you might think. Java recognises that your JFrames might appear on large monitors, small monitors, mobile devices, tablets.
For that reason Java encourages you to use layouts when designing GUIs, rather than fixing the positions of such things as buttons and labels.
# FlowLayout Example
Objects are simply added, left to right
![[flowlayout.png|300]]
```java
package myframe;
import java.awt.FlowLayout;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JTextField;
public class MyFrame extends JFrame {
JLabel lblFirst, lblSecond;
JButton ok, cancel;
JTextField txt;
MyFrame() {
this.setSize(250, 100);
this.setLocationRelativeTo(null);
this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
lblFirst = new JLabel("First Label");
lblSecond = new JLabel("Second Label");
ok = new JButton("OK");
cancel = new JButton("Cancel");
txt = new JTextField("Enter Text Here...");
this.setLayout(new FlowLayout());
this.add(lblFirst);
this.add(lblSecond);
this.add(ok);
this.add(cancel);
this.add(txt);
this.setVisible(true);
}
public static void main(String[] args) {
new MyFrame();
}
}
```
## BorderLayout Example
Here the screen is split into five sections: North, South, East, West and Centre.
![[borderlayout.png|300]]
```java
package myframe;
import java.awt.BorderLayout;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JTextField;
public class MyFrame extends JFrame {
JLabel lblFirst, lblSecond;
JButton ok, cancel;
JTextField txt;
MyFrame() {
this.setSize(300, 300);
this.setLocationRelativeTo(null);
this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
lblFirst = new JLabel("First Label");
lblSecond = new JLabel("Second Label");
ok = new JButton("OK");
cancel = new JButton("Cancel");
txt = new JTextField("Enter Text Here...");
this.setLayout(new BorderLayout());
this.add(lblFirst, BorderLayout.NORTH);
this.add(lblSecond, BorderLayout.SOUTH);
this.add(ok, BorderLayout.WEST);
this.add(cancel, BorderLayout.EAST);
this.add(txt, BorderLayout.CENTER);
this.setVisible(true);
}
public static void main(String[] args) {
new MyFrame();
}
}
```
## Containers
Here, the two buttons are put in a horizontal container, which is then put in a vertical container with the other components. The vertical container is then added to the JFrame.
![[containers.png|300]]
```java
package myframe;
import java.awt.Container;
import javax.swing.Box;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JTextField;
public class MyFrame extends JFrame {
JLabel lblFirst, lblSecond;
JButton ok, cancel;
JTextField txt;
MyFrame() {
this.setSize(250, 150);
this.setLocationRelativeTo(null);
this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
lblFirst = new JLabel("First Label");
lblSecond = new JLabel("Second Label");
ok = new JButton("OK");
cancel = new JButton("Cancel");
txt = new JTextField("Enter Text Here...");
Container vert = Box.createVerticalBox();
Container horiz = Box.createHorizontalBox();
horiz.add(ok);
horiz.add(cancel);
vert.add(lblFirst);
vert.add(lblSecond);
vert.add(txt);
vert.add(horiz);
this.add(vert);
this.setVisible(true);
}
public static void main(String[] args) {
new MyFrame();
}
}
```
## Layout Exercise
1. Use BorderLayout to create a layout with four buttons reading North, South, East and West, in the appropriate position.
2. Use Horizontal and Vertical containers to create the following layout
![[layout exercise.png|300]]