Java GUI PART II is the continues of JAVA GUI PART I covering and discussing the GUI components as well as the different available Layout Managers which is available in JAVA and you can find dedicated example for each Layout Managers …

1. » GUI
˃
˃
˃
˃
https://www.facebook.com/Oxus20
oxus20@gmail.com
GUI components
JButton, JLabel …
Layout Manager s
FlowLayout, GridLayout…
JAVA
GUI
PART II
Milad Kawesh

2. Agenda
» GUI Components
˃ JButton, JLabel
˃ JTextArea , JTextField
˃ JMenuBar, JMenu , JMenuItem
» Layout Managers
˃
˃
˃
˃
FlowLayout
GridLayout
BorderLayout
No Layout
2
https://www.facebook.com/Oxus20

3. GUI Components
» JButton
˃
˃
˃
˃
new JButton();
new JButton(String test);
new JButton(Icon icon);
new JButton(String text, Icon icon);
» JLable
˃ new JLable();
˃ new JLable(String text);
˃ new JLable(Icon image);
3
https://www.facebook.com/Oxus20

4. GUI Components(cont.)
» JTextField :
˃
˃
˃
˃
new JTextField ();
new JTextField (String test);
new JTextField (int columns);
new Jbutton(String text, int columns );
» JTextArea :
˃ new JTextArea();
˃ new JTextArea(String text);
˃ new JTextArea(int rows , int columns);
4
https://www.facebook.com/Oxus20

5. GUI Components(cont.)
» JMenuBar :
˃ new JMenuBar();
» JMenu :
˃ new JMenu();
˃ new JMenu(String text);
» JMenuItem:
˃
˃
˃
˃
new JMenuItem();
new JMenuItem(String text);
new JMenuItem(Icon icon);
new JMenuItem(String text , Icon icon);
https://www.facebook.com/Oxus20
5

6. GUI Components Example
import
import
import
import
import
import
import
import
java.awt.BorderLayout;
java.awt.Container;
javax.swing.JButton;
javax.swing.JFrame;
javax.swing.JLabel;
javax.swing.JMenu;
javax.swing.JMenuBar;
javax.swing.JMenuItem;
public class Gui_com extends JFrame {
private Container back;
public Gui_com() {
back = this.getContentPane();
back.setLayout(new BorderLayout());
JMenuBar menuBar = new JMenuBar();
this.setJMenuBar(menuBar);
https://www.facebook.com/Oxus20
6

7. GUI Components Example (cont.…)
JMenu file = new JMenu("File");
menuBar.add(file);
JMenuItem open = new JMenuItem("Open");
file.add(open);
JMenuItem print = new JMenuItem("Print");
file.add(print);
JMenuItem exit = new JMenuItem("Exit");
file.add(exit);
back.add(new JButton("ok"), BorderLayout.CENTER);
back.add(new JLabel("Oxus20"), BorderLayout.SOUTH);
7
https://www.facebook.com/Oxus20

8. GUI Components Example (Cont.…)
setTitle("Oxus20 Class");
setSize(400, 300);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setVisible(true);
}
public static void main(String[] args) {
new Gui_com();
}
}
8
https://www.facebook.com/Oxus20

9. GUI Components Example
OUTPUT
9
https://www.facebook.com/Oxus20

10. Layout Managers
» When adding components to container you mast uses a
layout manager to determine size and location of the
components within the container.
» A container can be assigned one layout manager, which is
done using the setLayout() method of the
java.awt.Container class:
» public void setLayout(LayoutManager m) LayoutManager
is an interface that all the layout managers’ classes must
implement.
https://www.facebook.com/Oxus20
10

11. FlowLayout Manager
» Components have their preferred size.
» The order in which the components are added determines
their order in the container.
» If the container is not wide enough to display all of the
components, the components wrap around to a new line.
» You can control whether the components are centered,
left-justified, or right-justified and vertical and horizontal
gap between components.
https://www.facebook.com/Oxus20
11

12. FlowLayout Constructors
» public FlowLayout(). Creates a new object that centers
the components with a horizontal and vertical gap of 5
units .
» public FlowLayout(int align). Creates a new object with
one of specified alignment: FlowLayout.CENTER
,FlowLayout.RIGHT, or FlowLayout.LEFT. And 5 units for horizontal
and vertical gap.
» public FlowLayout(int align, int hgap, int vgap). Creates
a FlowLayout object with the specified alignment,
horizontal gap, and vertical gap.
12
https://www.facebook.com/Oxus20

13. FlowLayout example
import java.awt.FlowLayout;
import javax.swing.JButton;
import javax.swing.JFrame;
public class FlowLayoutDemo {
public static void main(String[] args) {
JFrame window = new JFrame("Oxus20 Class");
window.setLayout(new FlowLayout());
JButton[] btns = new JButton[10];
for (int i = 0; i < btns.length; i++) {
btns[i] = new JButton(String.format("%d", i + 1));
window.add(btns[i]);
}
13
https://www.facebook.com/Oxus20

14. FlowLayout example (Cont.…)
window.setSize(300, 100);
window.setLocationRelativeTo(null);
window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
window.setVisible(true);
}
}
14
https://www.facebook.com/Oxus20

15. FlowLayout OUTPUT
15
https://www.facebook.com/Oxus20

16. BorderLayout Manager
» BorderLayout Divides a container into five regions, allowing
one component to be added to each region. Frame and the
content pane of a JFrame have BorderLayout by default.
» When adding a component to a container you can use one
of possible static values (NORTH, SOUTH, EAST, WEST, and
CENTER ) from BorderLayout class.
» Only one component can be added to a given region, and
the size of the component is determined by the region it
appears in.
16
https://www.facebook.com/Oxus20

17. BorderLayout Constructors
» public BorderLayout(). Creates a new BorderLayout
with a horizontal and vertical gap of five units between
components.
» public BorderLayout(int hgap, int vgap). Creates a
BorderLayout object with the specified horizontal and
vertical gap.
17
https://www.facebook.com/Oxus20

18. BorderLayout example
import java.awt.BorderLayout;
import javax.swing.JButton;
import javax.swing.JFrame;
public class BorderlayoutDemo {
public static void main(String[] args) {
JFrame window = new JFrame("Oxus20 Class");
window.setLayout(new BorderLayout());
JButton up = new JButton("up");
JButton down = new JButton("down");
JButton right = new JButton("right");
JButton left = new JButton("left");
18
https://www.facebook.com/Oxus20

19. BorderLayout example (Cont.…)
JButton center = new JButton("center");
window.add(up, BorderLayout.NORTH);
window.add(right, BorderLayout.EAST);
window.add(center, BorderLayout.CENTER);
window.add(left, BorderLayout.WEST);
window.add(down, BorderLayout.SOUTH);
window.setSize(300, 300);
window.setLocationRelativeTo(null);
window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
window.setVisible(true);
}
}
19
https://www.facebook.com/Oxus20

20. BorderLayout OUTPUT
20
https://www.facebook.com/Oxus20

21. GridLayout Manager
» Divides a container into a grid of rows and columns,
only one component can be added to each region of
the grid and each component having the same size.
» The order in which components are added determines
their locations in the grid.
» No components get their preferred height or width.
21
https://www.facebook.com/Oxus20

22. GridLayout Constructors
» public GridLayout(int rows, int cols). Creates new
object with the specified number of rows and columns.
The horizontal and vertical gap between components is
five units.
» public GridLayout(int rows, int cols, int hgap, int vgap).
Creates new object with the specified number of rows
and columns and also with the specified horizontal and
vertical gap.
» public GridLayout(). Creates new object with one row
and any number of columns.
22
https://www.facebook.com/Oxus20

23. GridLayout example
import java.awt.GridLayout;
import javax.swing.JButton;
import javax.swing.JFrame;
public class GridLayoutDemo {
public static void main(String[] args) {
JFrame window = new JFrame("Oxus20 Class");
window.setLayout(new GridLayout(3, 4));
JButton[] btns = new JButton[10];
for (int i = 0; i < btns.length; i++) {
btns[i] = new JButton(String.format("%d", i + 1));
window.add(btns[i]);
}
23
https://www.facebook.com/Oxus20

24. GridLayout example (Cont.…)
window.setSize(300, 300);
window.setLocationRelativeTo(null);
window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
window.setVisible(true);
}
}
24
https://www.facebook.com/Oxus20

25. GridLayout OUTPUT
25
https://www.facebook.com/Oxus20

26. No Layout Manager
» You can create a GUI with components in the exact
location and size that you want.
» To do this, you set the layout manager of the container
to null
» Set the bounds for each component within the
container by using setBounds(x, y, width, height)
method.
26
https://www.facebook.com/Oxus20

27. No Layout example
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
public class NoLayout {
public static void main(String[] args) {
JFrame window = new JFrame("Oxus20 Class");
window.setLayout(null);
JButton btn_oxus20 = new JButton("Oxus20");
btn_oxus20.setBounds(100, 100, 100, 30);
window.add(btn_oxus20);
27
https://www.facebook.com/Oxus20

28. No Layout example (Cont.…)
JLabel lbl_Oxus20 = new JLabel("Oxus20 ");
lbl_Oxus20.setBounds(10, 150, 100, 40);
window.add(lbl_Oxus20);
window.setSize(300, 300);
window.setLocationRelativeTo(null);
window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
window.setVisible(true);
}
}
28
https://www.facebook.com/Oxus20

29. No Layout OUTPUT
29
https://www.facebook.com/Oxus20

30. END
30
https://www.facebook.com/Oxus20