30
https://www.facebook.com/Oxus20 [email protected] JAVA GUI PART II Milad Kawesh » GUI ˃ GUI components ˃ JButton, JLabel … ˃ Layout Manager s ˃ FlowLayout, GridLayout…

Java GUI PART II

  • Upload
    oxus-20

  • View
    130

  • Download
    2

Embed Size (px)

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 …

Citation preview

Page 1: Java GUI PART II

https://www.facebook.com/Oxus20

[email protected]

JAVA GUI

PART II Milad Kawesh

» GUI ˃ GUI components

˃ JButton, JLabel …

˃ Layout Manager s

˃ FlowLayout, GridLayout…

Page 2: Java GUI PART II

Agenda » GUI Components

˃ JButton, JLabel

˃ JTextArea , JTextField

˃ JMenuBar, JMenu , JMenuItem

» Layout Managers ˃ FlowLayout

˃ GridLayout

˃ BorderLayout

˃ No Layout

2

https://www.facebook.com/Oxus20

Page 3: Java GUI PART II

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

Page 4: Java GUI PART II

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

Page 5: Java GUI PART II

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

Page 6: Java GUI PART II

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

Page 7: Java GUI PART II

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

Page 8: Java GUI PART II

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

Page 9: Java GUI PART II

GUI Components Example OUTPUT

9

https://www.facebook.com/Oxus20

Page 10: Java GUI PART II

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

Page 11: Java GUI PART II

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

Page 12: Java GUI PART II

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

Page 13: Java GUI PART II

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

Page 14: Java GUI PART II

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

Page 15: Java GUI PART II

FlowLayout OUTPUT

15

https://www.facebook.com/Oxus20

Page 16: Java GUI PART II

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

Page 17: Java GUI PART II

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

Page 18: Java GUI PART II

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

Page 19: Java GUI PART II

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

Page 20: Java GUI PART II

BorderLayout OUTPUT

20

https://www.facebook.com/Oxus20

Page 21: Java GUI PART II

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

Page 22: Java GUI PART II

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

Page 23: Java GUI PART II

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

Page 24: Java GUI PART II

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

Page 25: Java GUI PART II

GridLayout OUTPUT

25

https://www.facebook.com/Oxus20

Page 26: Java GUI PART II

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

Page 27: Java GUI PART II

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

Page 28: Java GUI PART II

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

Page 29: Java GUI PART II

No Layout OUTPUT

29

https://www.facebook.com/Oxus20

Page 30: Java GUI PART II

END

https://www.facebook.com/Oxus20

30