java gui part ii
DESCRIPTION
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 …TRANSCRIPT
https://www.facebook.com/Oxus20
JAVA GUI
PART II Milad Kawesh
» GUI ˃ GUI components
˃ JButton, JLabel …
˃ Layout Manager s
˃ FlowLayout, GridLayout…
Agenda » GUI Components
˃ JButton, JLabel
˃ JTextArea , JTextField
˃ JMenuBar, JMenu , JMenuItem
» Layout Managers ˃ FlowLayout
˃ GridLayout
˃ BorderLayout
˃ No Layout
2
https://www.facebook.com/Oxus20
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
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
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);
5
https://www.facebook.com/Oxus20
GUI Components Example
import java.awt.BorderLayout;
import java.awt.Container;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JMenu;
import javax.swing.JMenuBar;
import 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);
6
https://www.facebook.com/Oxus20
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
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
GUI Components Example OUTPUT
9
https://www.facebook.com/Oxus20
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. 10
https://www.facebook.com/Oxus20
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.
11
https://www.facebook.com/Oxus20
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
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
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
FlowLayout OUTPUT
15
https://www.facebook.com/Oxus20
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
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
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
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
BorderLayout OUTPUT
20
https://www.facebook.com/Oxus20
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
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
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
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
GridLayout OUTPUT
25
https://www.facebook.com/Oxus20
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
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
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
No Layout OUTPUT
29
https://www.facebook.com/Oxus20
END
https://www.facebook.com/Oxus20
30