09 GUIsHUREE University ICT

Instructor: M.J LEE

2

Abstract Window Toolkit Container

◦Frame◦Panel

Layout Manager◦Flow Layout◦Border Layout◦Grid Layout

Contents

3

AWT: the group of classes for GUI in Java

AWT(Abstract Window Toolkit)

Java.awt.* Component / Container

4

Frameimport java.awt.*;

public class MyFrame extends Frame { public MyFrame (String str) {

super(str); }

public class MyFrameMain {public static void main (String args[]) {

MyFrame fr = new MyFrame(“It’s frame!"); fr.setSize(500,500); fr.setBackground(Color.blue); fr.setVisible(true);

} }

1

2

“is a relation” MyFrame is Frame

3Create container Set the size of frame4

5Set the background Color:Color is Class

5

Use add() method, when adding components

Panel can’t be displayed by itself. Therefore, it should be included in Frame

Some components are disposed in Panel by Layout Manager

Panel

6

import java.awt.*; public class FrameWithPanel extends Frame {

public FrameWithPanel (String str) { super(str);

} }Public class FrameWithPanelMain() {

public static void main (String args[]) {FrameWithPanel fr = new FrameWithPanel(“Panel

in Frame"); Panel pan = new Panel();

 fr.setSize(200,200); // a framefr.setBackground(Color.blue); fr.setLayout(null);

 pan.setSize(100,100); // a panelpan.setBackground(Color.yellow);  fr.add(pan); // put the panel in the framefr.setVisible(true);

} }

Panel

7

1. FlowLayoutPanel, default Layout manager of Applet

2. BorderLayoutWindow, default Layout manager of Frame

3. GridLayout

4. CardLayout5. GridBagLayout

Layout Manager

8

import java.awt.*; public class ExGui {

private Frame f; // declaration Frame private Button b1; // declaration Button private Button b2;public void go() {

f = new Frame("GUI example"); f.setLayout(new FlowLayout()); b1 = new Button(“Yes”); b2 = new Button(“No"); f.add(b1); // append Button on Framef.add(b2); f.pack(); // instead of “.setSize()”f.setVisible(true);

} }public static ExGuiMain() {

public static void main(String args[]) { ExGui guiWindow = new ExGui(); guiWindow.go();

}}

1. Flow Layout

9

At above example, which didn't inherit Frame, declared new frame in the class

Properties, Flow Layout Manager1. is a default layout manager of Panel2. depose components from left to right!3. depose components at the middle of

Frame, as default4. decide the size of components by itself5. It is possible to exchange attributes by

using constructor

Layout Manager –1.Flow Layout

setLayout(new FlowLayout(FlowLayout.RIGHT, 20, 40))

10

1. Components are disposed at right side.2. Gap of left and right between components3. Gap of top and bottom between

components (unit: pixel)

Layout Manager –1.Flow Layout

setLayout(new FlowLayout(FlowLayout.RIGHT, 20, 40)) 1 2 3

11

import java.awt.*; public class MyFlow {

private Frame f; private Button button1, button2, button3; public void go() {

f = new Frame("Flow Layout");f.setLayout(new FlowLayout()); button1 = new Button("Ok"); button2 = new Button("Open"); button3 = new Button("Close"); f.add(button1); f.add(button2); f.add(button3); f.setSize(100,100); f.setVisible(true);

} }Public class MyFlowMain() {

public static void main(String args[]) { MyFlow mflow = new MyFlow(); mflow.go();

} }

1. Flow Layout

12

import java.awt.*;public class ExGui2 {

private Frame f; private Button bn, bs, bw, be, bc; public void go() {

f = new Frame("Border Layout"); bn = new Button("B1");bs = new Button("B2");bw = new Button("B3");be = new Button("B4");bc = new Button("B5");f.add(bn, BorderLayout.NORTH); f.add(bs, BorderLayout.SOUTH); f.add(bw, BorderLayout.WEST);f.add(be, BorderLayout.EAST);f.add(bc, BorderLayout.CENTER); f.setSize(200,200);f.setVisible(true);

} public static void main(String args[]) {

ExGui2 guiWindow2 = new ExGui2(); guiWindow2.go();

}}

2. Border Layout

13

import java.awt.*; public class TestGrid {

private Frame f;private Button b1, b2, b3, b4, b5, b6;public void go() {

f = new Frame(“Grid Layout");f.setLayout (new GridLayout(3,2));b1 = new Button("1");b2 = new Button("2");b3 = new Button("3");b4 = new Button("4"); b5 = new Button("5");b6 = new Button("6"); f.add(b1); f.add(b2);f.add(b3);f.add(b4);f.add(b5);f.add(b6);f.pack();f.setVisible(true);

} public static void main(String args[]) {

TestGrid grid = new TestGrid(); grid.go();

}}

2. Grid Layout

14

Add(): components are disposed from left to right, upside to bottom

The size of each cell, which is divided by Grid Layout Manager, is same.

The number of cells can be defined when they are created with Constructor.◦ f.setLayout (new GridLayout(3,2));

Layout Manager –3.Grid Layout