12. GUI – 그래픽 이야기.

Presentation on theme: "12. GUI – 그래픽 이야기."— Presentation transcript:

1 12. GUI – 그래픽 이야기

2 GUI 만들기 프레임(JFrame)을 만든다. 위젯(버튼, 텍스트 등)을 만든다. 위젯을 프레임에 추가한다.
JFrame frame = new JFrame(); JFrame은 화면 위에 있는 창(window)을 나타내는 객체 위젯(버튼, 텍스트 등)을 만든다. JButton button = JButton(“click me”); 위젯 – 각종 구성요소(component) Javax.swing 패키지에서.. 위젯을 프레임에 추가한다. frame.getContentPane().add(button); 프레임은 창을 둘러싸고 있는 테두리. 실제 위젯을 추가할 때는 틀(pane)에.. 화면에 표시한다. (크기를 다음 화면에 표시하도록 설정) frame.setSize(300, 300); frame.setVisible(true); Head First JAVA

3 GUI - 버튼 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); frame.getContentPane().add(button); frame.setSize(300, 300); frame.setVisible(true); } 버튼을 만들고 버튼에 텍스트 전달 프레임의 크기를 픽셀 단위로 지정 화면에 표시되도록 Head First JAVA

4 사용자 이벤트 사용자가 버튼을 클릭했을 때 어떤 특정한 일을 하게 만들려면??? 코 드 사용자가 클릭했을 때 호출할 메소드
(버튼을 클릭했을 때 해야 할 행동) 그 메소드를 언제 실행시켜야 할지 (사용자가 버튼을 클릭했는지) button 코 드 버튼의 이벤트에 관심이 있다는 것을 알려줘야 함 Button 객체 Head First JAVA

5 사용자 이벤트 버튼의 이벤트에 관심이 있다는 것을 알려주는 인터페이스를 구현하면 된다. ActionListener
사용자가 의미 있는 행동을 하면 이벤트 소스에서 이벤트 객체를 생성. 이벤트를 받아 오는 이벤트 리스너를 만들어야 함. <<인터페이스>> 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

8 GUI에 뭔가를 집어넣는 방법 위젯에 2D 그래픽을 그린다. 위젯에 JPEG를 집어넣는다. 프레임에 위젯을 집어넣는 방법
: 버튼, 메뉴, 라디오 버튼 등의 위젯을 집어넣는다. 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 paintComponent()라는 메소드를 오버라이드 하면 된다.
그림을 그릴 패널 만들기 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

10 paintComponent() (1/2) JPEG 파일 표시
public void paintComponent(Graphics g) { Image image = new ImageIcon(“catzilla.jpg”).getImage(); g.drawImage(image, 3, 4, this); } 파일명 지정 부분 그림의 좌표를 나타냄. Ex) 패널의 맨 왼쪽에서 세 픽셀, 맨 위쪽에서 네 픽셀 떨어진 지점을 그림의 왼쪽 맨 윗부분으로 지정. 이 숫자는 전체 프레임이 아닌 위젯에 대한 상대적 위치 Head First JAVA

11 paintComponent() (2/2) 검은 색 배경에 임의의 색의 원 그리기
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); } 패널 전체를 검은색(기본 색)으로 패널의 크기와 같은 직사각형 그림 빨, 녹, 파의 성분을 나타내는 정수 세 개를 전달하여 색을 만듦 다음과 같은 위치와 크기로 타원을 생성 Head First JAVA

12 Graphics 레퍼런스는 Graphics2D를 참조한다. Graphics2D g2d = (Graphics2D) g;
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

13 Graphics2D (2/2) 원을 단색이 아닌 그래디언트로
Graphics 객체의 탈을 쓴 Graphics2D 객체 원을 단색이 아닌 그래디언트로 public void paintComponent(Graphics g) { Graphics2D g2d = (Graphics2D) g; GradientPaint gradient = new GradientPaint(70, 70, Color.blue, 150, 150, Color.orange); g2d.setPaint(gradient); g2d.fillOvall(70, 70, 100, 100); } Graphics에는 없고 Graphics2D에만 있는 것을 호출하려면 캐스트 해야 함 시작 점과 색 끝 점과 색 현재 지정된 gradient 색으로 타원을 채워 생성 Head First JAVA

14 핵심정리 (1/4) GUI를 만들 때는 우선 창을 만들어야 하는데 보통 JFrame을 사용
JFrame frame = new JFrame(); JFrame에 위젯(버튼, 텍스트 등)을 추가할 때는 다음과 같이 한다. Frame.getContentPane().add(button); JFrame에는 다른 위젯을 직접 추가할 수 없기 때문에 JFrame의 내용 틀(content pane)에 추가해야 한다. 창을 화면에 표시하려면 크기를 지정한 다음 화면에 나타나게 설정해야 한다. frame.setSize(300, 300); frame.setVisible(true); Head First JAVA

15 핵심정리 (2/4) 사용자가 언제 버튼을 클릭하는지 알아내려면 GUI 이벤트가 일어나는지 지켜봐야 한다.
이벤트가 일어나는지 지켜보려면 이벤트 소스에 등록해야 한다. 리스너 인터페이스는 이벤트 소스에서 이벤트를 받아서 처리하는 메소드를 호출할 수 있는 방법을 제공한다. 이벤트 소스에 등록할 때는 소스의 등록 메소드를 호출하면 된다. Ex> 버튼의 ActionEvent에 등록하고 싶다면 button.addActionListener(this); 리스너 인터페이스를 구현할 때는 그 인터페이스에서 선언한 모든 이벤트 처리 메소드를 구현해야 한다. Head First JAVA

16 핵심정리 (3/4) 이벤트 처리 메소드로 전달된 이벤트 객체에는 이벤트의 소스에 대한 정보를 포함한 이벤트에 대한 정보가 들어 있다. 위젯에 2차원 그래픽을 직접 그릴 수 있다. .gif나 .jpeg 파일을 위젯에 직접 그릴 수도 있다. 그래픽을 직접 만들고 싶다면 JPanel의 하위클래스를 만든 다음 paintComponent() 메소드를 오버라이드 하면 된다. paintComponent() 메소드는 GUI 시스템에서 호출하고 사용자가 직접 호출하는 일은 절대 없다. Head First JAVA

17 핵심정리 (4/4) paintComponent()의 Graphics 매개변수로 참조하는 객체는 사실 Graphics2D 클래스의 인스턴스이다. Graphics2D 클래스에는 다양한 메소드가 들어 있다. Graphics2D 메소드를 호출하려면 매개변수를 Graphics 객체에서 Graphics2D 객체로 캐스트 해야 한다. Graphics2D g2d = (Graphics2D) g; Head First JAVA

18 GUI 레이아웃 (1/3) frame.getContentPane().add(button); 북쪽(NORTH) 서쪽 (WEST)
프레임의 기본 내용 틀에 위젯을 추가할 때는 항상 그 위젯을 어디에 넣어야 할지를 지정해야 한다. 인자가 하나뿐인 add 메소드를 호출하면 위젯은 자동으로 중앙 지역으로 들어간다. 서쪽 (WEST) 중앙 (CENTER) 동쪽 (EAST) 남쪽(SOUTH) frame.getContentPane().add(BorderLayout.CENTER, button); Head First JAVA

19 GUI 레이아웃 (2/3) 버튼을 클릭할 때마다 원의 색이 바뀌도록… 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 GUI 레이아웃 (3/3) 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() 메소드가 호출됨 Head First JAVA