12. GUI – 그래픽 이야기

12. GUI – 그래픽 이야기

Head First JAVA

GUI 만들기

2

프레임 (JFrame) 을 만든다 .

JFrame frame = new JFrame();

위젯 ( 버튼 , 텍스트 등 ) 을 만든다 .

JButton button = JButton(“click me”);

위젯을 프레임에 추가한다 .

frame.getContentPane().add(button);

화면에 표시한다 . ( 크기를 다음 화면에 표시하도록 설정 )

frame.setSize(300, 300);

frame.setVisible(true);

JFrame 은 화면 위에 있는창 (window) 을 나타내는 객체

위젯 – 각종 구성요소(component)

Javax.swing 패키지에서 ..

프레임은 창을 둘러싸고 있는 테두리 .

실제 위젯을 추가할 때는 틀 (pane)

에 ..

Head First JAVA

GUI - 버튼

3

import javax.swing.*; // 스윙패키지를 불러온다

public class SimpleGui1 {

public static void main(String[] args) {

JFrame frame = new JFrame(); // 프레임을 만든다 .

JButton button = new JButton("click me");

frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);




}

}

버튼을 만들고버튼에 텍스트 전달

프레임의 크기를픽셀 단위로 지정화면에 표시되도록

Head First JAVA

사용자 이벤트

4

사용자가 버튼을 클릭했을 때 어떤 특정한 일을 하게 만들려면 ???

사용자가 클릭했을 때 호출할 메소드

( 버튼을 클릭했을 때 해야 할 행동 )

그 메소드를 언제 실행시켜야 할지 ( 사용자가 버튼을 클릭했는지 )

button코 드

Button 객체

버튼의 이벤트에 관심이있다는 것을 알려줘야 함

Head First JAVA

사용자 이벤트

5

버튼의 이벤트에 관심이 있다는 것을 알려주는 인터페이스를 구현하면 된다 .

<< 인터페이스 >>ActionListener

actionPerformed(ActionEvent ev) << 인터페이스 >>

ItemListener

itemStateChanged(ItemEvend ev)<< 인터페이스 >>

KeyListener

KeyPressed(KetEven ev)KeyReleased(KetEven ev)

KeyTyped(KetEven ev)

사용자가 의미 있는 행동을 하면 이벤트 소스에서 이벤트 객체를 생성 .

이벤트를 받아 오는 이벤트 리스너를 만들어야 함 .

모든 이벤트 유형마다 그 유형에 맞는 리스너 인터페이스가 있음 .

어떤 인터페이스를 구현하겠다고 선언했으면그 인터페이스에 있는 모든 메소드를 구현해야 함 .

Head First JAVA

이벤트를 받는 방법

6

import javax.swing.*;import java.awt.event.*; // 리스너와 이벤트 패키지를 사용하기 위한public class SimpleGui1B implements ActionListener {

JButton button;public static void main(String[] args) {

SimpleGui1B gui = new SimpleGui1B();gui.go();

}public void go() {

JFrame frame = new JFrame();button = new JButton("click me");button.addActionListener(this);frame.getContentPane().add(button);frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);frame.setSize(300, 300);frame.setVisible(true);

}public void actionPerformed(ActionEvent event) {

button.setText("I've been clicked!");}

}

리스너 인터페이스를 구현하고 버튼에 등록한 뒤 이벤트 처리 메소드를 등록한다 .

인터페이스 구현버튼에서는 ActionListener 를 구현한 클래스에만 이벤트를 보냄

버튼에 등록 . 이 때 전달하는 인자는 반드시 ActionListener

를 구현한 클래스의 객체여야 함

ActionListener

인터페이스의 실제 이벤트를 처리하는 actionPerformed 메소드 구현

// 버튼에서는 이 메소드를 호출하여 이벤트가 일어났다는 것을 알려줌

Head First JAVA

리스너 , 소스 , 이벤트

7

리스너: 인터페이스를 구현하고 버튼에 등록하고 이벤트 처리 코드를 제공 .

이벤트를 받는 역할 .

이벤트 소스: 리스너로부터 등록을 받고 사용자로부터 이벤트를 받아서 이벤트 처리 메소드를 호출 . 이벤트를 보내는 역할 .

이벤트 객체: 이벤트콜백메소드 ( 이벤트 소스에서 이벤트가 일어났을 때 호출함으로써 이벤트 리스너에 그 이벤트가 일어났음을 알려주기 위한 메소드 ) 에 대한 인자고 , 이벤트에 대한 데이터를 리스너한테 돌려주는 역할 . 이벤트에 대한 데이터가 들어있음 .

Head First JAVA

GUI 에 뭔가를 집어넣는 방법

8

프레임에 위젯을 집어넣는 방법: 버튼 , 메뉴 , 라디오 버튼 등의 위젯을 집어넣는다 .

frame.getContentPane().add(myButton);

javax.swing 에는 십여 개가 넘는 위젯 유형이 포함되어 있다 .

위젯에 2D 그래픽을 그린다 .: 그래픽 객체를 사용하여 도형을 그릴 수 있다 .

graphics.fillOval(70, 70, 100, 100);

java2D API 에는 여러가지 특이하고 복잡한 그래픽 메소드가 있다 .

위젯에 JPEG 를 집어넣는다 .: 위젯에 그림을 집어넣을 수도 있다 .

graphics.drawImage(myPic, 10, 10, this);

Head First JAVA

그림을 그릴 패널 만들기

9

JPanel 의 하위클래스를 만들고 paintComponent() 라는 메소드를 오버라이드 하면 된

다 .그래픽 관련 코드는 모드 이 메소드에 들어감

import java.awt.*;

import javax.swing.*;

class MyDrawPanel extends JPanel {

public void paintComponent(Graphics g)

{

g.setColor(Color.orange);

g.fillRect(20, 50, 100, 100);

}

}

둘 다 있어야 함

프레임에 추가할 수 있는 위젯인 JPanel 의 하위클래스를 만듬 .사용자 주문형 위젯

이 메소드는 시스템에서 직접 호출하는데 그림을 그리기 위한 도화지 역할 . Graphics 유형의 인자를 객체를 인자로 전달

위치와 크기의 좌표

객체에 그림을 그릴 때사용할 색 지정

Head First JAVA

paintComponent() (1/2)

10

public void paintComponent(Graphics g) {

Image image = new

ImageIcon(“catzilla.jpg”).getImage();

g.drawImage(image, 3, 4, this);

}

JPEG 파일 표시

파일명 지정 부분

그림의 좌표를 나타냄 .Ex) 패널의 맨 왼쪽에서 세 픽셀 , 맨 위쪽에서 네 픽셀 떨어진 지점을 그림의 왼쪽 맨 윗부분으로 지정 . 이 숫자는 전체 프레임이 아닌 위젯에 대한 상대적 위치

Head First JAVA

paintComponent() (2/2)

11


g.fillRect(0, 0, this.getWidth(), this.getHeight());

int red = (int) (Math.random() * 255);

int green = (int) (Math.random() * 255);

int blue = (int) (Math.random() * 255);

Color randomColor = new Color(red, green, blue);

g.setColor(randomColor);

g.fillOval(70, 70, 100, 100);

}

검은 색 배경에 임의의 색의 원 그리기

패널 전체를 검은색( 기본 색 ) 으로

패널의 크기와 같은직사각형 그림

빨 , 녹 , 파의 성분을나타내는 정수 세 개를 전달하여 색을 만듦

다음과 같은 위치와 크기로 타원을 생성

Head First JAVA

Graphics2D (1/2)

12

Graphics 레퍼런스는 Graphics2D 를 참조한다 .

Dog 객체를 Animal 레퍼런스 변수로 참조하였을 때 bark() 메소드를 호출할 수 없었듯이 Graphics 레퍼런스도 많은 Graphics2D 객체의 메소드를 호출할 수 없다 .

Graphics

drawImage() drawLine() drawPolygon() drawRect() drawOval() fillRect() fillRoundRect() setColor()

Graphics2D fill3DRect() draw3DRect() rotate() scale() shear() transform() setRenderingHints()

Graphics2D g2d = (Graphics2D) g;

Head First JAVA

Graphics2D (2/2)

13



GradientPaint gradient =

new GradientPaint(70, 70, Color.blue, 150, 150,

Color.orange);

g2d.setPaint(gradient);

g2d.fillOvall(70, 70, 100, 100);

}

원을 단색이 아닌 그래디언트로

Graphics 객체의 탈을 쓴 Graphics2D 객체

Graphics 에는 없고 Graphics2D 에만 있는 것을 호출하려면 캐스트 해야 함

시작 점과 색 끝 점과 색

현재 지정된 gradient 색으로 타원을 채워 생성

Head First JAVA

핵심정리 (1/4)

14

GUI 를 만들 때는 우선 창을 만들어야 하는데 보통 JFrame 을

사용

JFrame frame = new JFrame();JFrame 에 위젯 ( 버튼 , 텍스트 등 ) 을 추가할 때는 다음과 같이

한다 .

Frame.getContentPane().add(button);JFrame 에는 다른 위젯을 직접 추가할 수 없기 때문에 JFrame

의 내용 틀 (content pane) 에 추가해야 한다 .

창을 화면에 표시하려면 크기를 지정한 다음 화면에 나타나게

설정해야 한다 .



Head First JAVA

핵심정리 (2/4)

15

사용자가 언제 버튼을 클릭하는지 알아내려면 GUI 이벤트가

일어나는지 지켜봐야 한다 .

이벤트가 일어나는지 지켜보려면 이벤트 소스에 등록해야 한다 .

리스너 인터페이스는 이벤트 소스에서 이벤트를 받아서 처리하는

메소드를 호출할 수 있는 방법을 제공한다 .

이벤트 소스에 등록할 때는 소스의 등록 메소드를 호출하면 된다 .

Ex> 버튼의 ActionEvent 에 등록하고 싶다면

button.addActionListener(this);

리스너 인터페이스를 구현할 때는 그 인터페이스에서 선언한 모든

이벤트 처리 메소드를 구현해야 한다 .

Head First JAVA

핵심정리 (3/4)

16

이벤트 처리 메소드로 전달된 이벤트 객체에는 이벤트의 소스에

대한 정보를 포함한 이벤트에 대한 정보가 들어 있다 .

위젯에 2 차원 그래픽을 직접 그릴 수 있다 .

.gif 나 .jpeg 파일을 위젯에 직접 그릴 수도 있다 .

그래픽을 직접 만들고 싶다면 JPanel 의 하위클래스를 만든 다음

paintComponent() 메소드를 오버라이드 하면 된다 .

paintComponent() 메소드는 GUI 시스템에서 호출하고

사용자가 직접 호출하는 일은 절대 없다 .

Head First JAVA

핵심정리 (4/4)

17

paintComponent() 의 Graphics 매개변수로 참조하는

객체는 사실 Graphics2D 클래스의 인스턴스이다 .

Graphics2D 클래스에는 다양한 메소드가 들어 있다 .

Graphics2D 메소드를 호출하려면 매개변수를 Graphics

객체에서 Graphics2D 객체로 캐스트 해야 한다 .


Head First JAVA

GUI 레이아웃 (1/3)

18


frame.getContentPane().add(BorderLayout.CENTER,

button);

북쪽 (NORTH)

서쪽(WEST)

중앙(CENTE

R)

동쪽(EAST)

남쪽 (SOUTH)

프레임의 기본 내용 틀에 위젯을

추가할 때는 항상 그 위젯을 어디에

넣어야 할지를 지정해야 한다 .

인자가 하나뿐인 add 메소드를

호출하면 위젯은 자동으로 중앙

지역으로 들어간다 .

Head First JAVA


19

import javax.swing.*;import java.awt.*;import java.awt.event.*;public class SimpleGui3C implements ActionListener {

JFrame frame;public static void main(String[] args) {

SimpleGui3C gui = new SimpleGui3C();gui.go();

}public void go() {

frame = new JFrame();

frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);JButton button = new JButton("Change colors");button.addActionListener(this); // 리스너를 버튼에 추가MyDrawPanel drawPanel = new MyDrawPanel();frame.getContentPane().add(BorderLayout.SOUTH,

button);frame.getContentPane().add(BorderLayout.CENTER,

drawPanel);frame.setSize(300, 300);frame.setVisible(true);

}

버튼을 클릭할 때마다 원의 색이 바뀌도록…

버튼과 그림 패널을프레임의 두 지역에 추가

Head First JAVA


20

public void actionPerformed(ActionEvent event) {frame.repaint();

}}

class MyDrawPanel extends JPanel {public void paintComponent(Graphics g) {

g.fillRect(0, 0, this.getWidth(), this.getHeight());int red = (int) (Math.random() * 255);int green = (int) (Math.random() * 255);int blue = (int) (Math.random() * 255);

Color randomColor = new Color(red, green, blue);g.setColor(randomColor);g.fillOval(70, 70, 100, 100);

} // 타원을 무작위적으로 선택한 색으로 칠하기 위한 코드

}

사용자가 버튼을 클릭하면 프레임의 repaint() 메소드를 호출하는데 그러면 그 프레임에 들어있는 모든 위젯의 paintComponent() 메소드가 호출됨

Documents

12. GUI – 그래픽 이야기