14 장 . 그래피컬 사용자 인터페이스

69
14장. 장장장장 장장장 장장장장장 1 public class SumTest { public static void main(String a1[]) { int a, b, sum; a = Integer.parseInt(a1[0]); b = Integer.parseInt(a1[1]); sum = a + b ; // 장 장장 장장장 장장장장장 System.out.println(" 장장장 장장 " + sum + " 장장장 "); } } JAVA

description

14 장 . 그래피컬 사용자 인터페이스. Java. public class SumTest { public static void main(String a1[]) { int a, b, sum; a = Integer.parseInt (a1[0]); b = Integer.parseInt (a1[1]); sum = a + b ; // 두 수를 더하는 부분입니다 System.out.println (" 두수의 합은 " + sum + " 입니다 "); - PowerPoint PPT Presentation

Transcript of 14 장 . 그래피컬 사용자 인터페이스

Page 1: 14 장 .  그래피컬  사용자 인터페이스

14장. 그래피컬 사용자인터페이스

1

public class SumTest { public static void main(String a1[]) { int a, b, sum; a = Integer.parseInt(a1[0]); b = Integer.parseInt(a1[1]); sum = a + b ; // 두 수를 더하는 부분입니다 System.out.println(" 두수의 합은 " + sum + " 입니다 "); }}

JAVA

Page 2: 14 장 .  그래피컬  사용자 인터페이스

사용자 인터페이스인 GUI 의 개념에 대해 학습한다 .

자바에서 제공되는 GUI 인 AWT 와 스윙 (Swing) 의 차이점에 대해 학습한다 .

AWT 패키지의 주요 클래스의 메소드에 관해 학습한다 .

프레임 클래스에 관해 사용방법을 학습한다 .

배치관리자에 대해 학습한다 .

프레임에 배치할 수 있는 패널에 대해 학습한다 .

패널에서의 그래픽 사용과 컬러의 사용에 대해 학습한다 .

학습목표

2

Page 3: 14 장 .  그래피컬  사용자 인터페이스

section 1 AWT 와 스윙 (Swing) - 1-1 AWT(Abstract Window Toolkit) - 1-2 스윙 (Swing)

section 2 AWT 패키지와 주요 클래스 - 2-1 java.awt 패키지

- 2-2 Component 클래스

- 2-3 Container 클래스

section 3 프레임 (Frame)

목차

3

Page 4: 14 장 .  그래피컬  사용자 인터페이스

section 4 배치관리자 (Layout Manager) - 4-1 FlowLayout 클래스

- 4-2 BorderLayout 클래스

- 4-3 GridLayout 클래스

section 5 패널 (Panel)

section 6 패널에서의 그래픽 사용

section 7 색의 사용

section 8 글꼴 (Font) 의 사용

목차

4

Page 5: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

1-1 TCP/IP(Transmission Control Protocol/Internet Protocol)1 AWT 와 스윙 (Swing)

5

사용자 인터페이스 (User Interface)- 일반적인 응용 프로그램이나 웹 프로그램에서 사용자가 접속하는 부분

GUI(Graphical User Interface)- 사용자 인터페이스에 다양한 그래픽을 적용한 것

- “goo-ee” 라고 부름

Page 6: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

1-1 AWT(Abstract Window Toolkit)1 AWT 와 스윙 (Swing)

6

AWT(Abstract Window Toolkit)- 자바 언어는 초기에 GUI 를 제공하기 위해 패키지를 제공

윈도와 Linux 에서 실행된 AWT 컴포넌트의 예

462 page

Page 7: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

1-2 스윙 (Swing)1 AWT 와 스윙 (Swing)

7

스윙 (Swing)- 선 (sun) 사가 넷스케이프사와 공동으로 개발한 새로운 그래픽 툴킷 (toolkit)- 자바의 표준 클래스인 JFC(Java Foundation Classes) 로 제공되고 있으며 JDK 에 포함

- 스윙은 AWT 와 달리 그래픽을 JVM 이 자체적으로 처리

Page 8: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

1-2 스윙 (Swing)1 AWT 와 스윙 (Swing)

8

AWT 패키지와 스윙 패키지의 관련도

463 page

Page 9: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

1-2 스윙 (Swing)1 AWT 와 스윙 (Swing)

9

스윙 컴포넌트의 예

463 page

Page 10: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

2-1 java.awt 패키지2 AWT 패키지와 주요 클래스

10

java.awt 패키지- GUI 구축을 위한 컴포넌트 클래스뿐만 아니라 다른 클래스들도 많이 제공

java.awt 패키지에서 제공되는 클래스들의 유형별 분류

유형 구분 클래스 명컴포넌트의 배치와 관련된클래스 BorderLayout, FlowLayout, GridLayout, GridBagLayout,

GridBagConstraints, CardLayout

GUI 구성과 관련된 클래스 Button, Label, Canvas, Checkbox, Choice, Scrollbar, Component,List, Menu, TextComponent, TextArea, MenuBar, MenuItem, TextField,CheckboxGroup, CheckboxMenuItem, MenuComponent

그래픽 출력과 관련된 클래스 Color, Font, FontMetrics, Rectangle, Point, Polygon, Graphics, Image

컨테이너 클래스 Frame, Panel, Window, Container, FileDialog, Dialog

그 외의 클래스 Insets, Dimension, Toolkit, Event, MediaTracker

Page 11: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

2-2 Component 클래스2 AWT 패키지와 주요 클래스

11

Component 클래스- 추상 클래스로

- 그래피컬 사용자 인터페이스 (GUI) 구축에 필요한 많은 하위 클래스를 가지고 있음

- 약 100 여 개의 메소드가 제공

Page 12: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

2-2 Component 클래스2 AWT 패키지와 주요 클래스

12

Component 클래스의 주요 메소드

유형 구분 클래스 명Image createImage(int width, int height) width, height 크기의 Image 객체를 생성하여 반환Font getFont() 현재 설정된 폰트를 폰트 객체로 반환FontMetrics getFontMetrics(Font font) font 폰트에 관한 FontMetrics 객체를 반환Color getForeground() 전경색 (foreground) 을 Color 객체로 반환Dimension getSize() 현재 컴포넌트의 크기를 Dimension 객체로 반환void paint(Graphics g) 현재의 컴포넌트에 Graphics 객체 g 를 이용하여 그림을 그리는 메소드void repaint() JVM 에 update() 메소드 호출을 요청한다 .void setBackground(Color c) 배경색을 c 로 설정void setFont(Font f) 폰트를 f 로 설정void setForeground(Color c) 전경색을 c 로 설정void setSize(int x, int y) 컴포넌트의 크기를 x, y 값으로 설정한다 . x, y 값은 픽셀 단위이다 .void setVisible(boolean b) b 가 true 일 경우 컴포넌트를 화면에 나타낸다 .public void update(Graphics g) 컴포넌트를 배경색으로 채우고 paint() 메소드를 호출한다 .

Page 13: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

2-3 Container 클래스2 AWT 패키지와 주요 클래스

13

Container 클래스- Component 클래스의 하위 클래스로서 컴포넌트를 담는 쟁반 역할을 하는 클래스

- 사용되는 쟁반 역할을 하는 클래스는 JFrame, JPanel, Applet, JApplet 클래스

Page 14: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

2-3 Container 클래스2 AWT 패키지와 주요 클래스

14

Container 클래스의 주요 메소드

유형 구분 클래스 명Component add(Component c) 컴포넌트 c 를 현재의 컨테이너에 추가하고 c 를 반환Component add(Component c, int position) 컴포넌트 c 를 position 이 지정하는 위치에 추가void remove(Component c) 컴포넌트 c 를 현재의 컨테이너에서 제거void setLayout(LayoutManager lm) lm 으로 지정된 배치관리자를 현재 컨테이너의 배치관리자로 설정void addContainerListener(ContainerListener cl)

이벤트를 받아들이기 위한 이벤트 리스너를 등록void removeContainerLis-tener(ContainerListener cl) 이벤트 리스너의 등록을 해제

Page 15: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

3 프레임 (Frame)

15

응용 프로그램에서 GUI 를 구축하기 위해서는 프레임 클래스를 이용

JFrame 클래스- Component → Container → Window → Frame → JFrame 형태로 상속된 클래스

JFrame 클래스 생성자

public JFrame()public JFrame(String title)

형식

Page 16: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

3 프레임 (Frame)

16

JFrame 클래스의 메소드

메소드 설명public Container getContentPane() 현재의 프레임에 대한 Container 객체를 반환void setDefaultCloseOperation(int operation)

프레임의 오른쪽 상단에 묵시적으로 “ close” 버튼을 만든다 . operation 은 상수를 의미하며 , 일반적으로 EXIT_ON_CLOSE 를 지정하여 프레임을 종료시킨다 .

void setJMenuBar(JMenuBar menubar) 프레임에 menubar 를 설정한다 .

void setTitle(String title)프레임의 타이틀바에 title 로 지정된 문자열을 나타낸다 . 이 메소드는 java.awt 패키지인 Frame 클래스로부터 상속된 클래스이다 .

Page 17: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

3 프레임 (Frame)

17

실습예제

프로그램 설명- 01 : 프로그램에서는 JFrame 클래스를 사용하기 위해 swing 패키지를 포함시킨다 .- 04 : “Test Frame” 제목을 가지고 프레임 객체를 생성하였다 .- 05~06 : JFrame 클래스의 상위 클래스인 Component 클래스에 선언된 메소드이다 .

setSize() 메소드는 프레임의 크기를 설정하는 메소드이고 , setVisible() 메소드는 컴포넌트를 화면에 나타내는 메소드이다 .

FrameTest1.java0102030405060708

import javax.swing.*; public class FrameTest1{ public static void main(String[] args) { JFrame jf = new JFrame("Test Frame"); jf.setSize(400,300); jf.setVisible(true); }}

swing 패키지를 포함

JFrame 클래스로부터 객체 생성객체 ( 프레임 ) 크기 설정객체를 나타냄

Page 18: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

3 프레임 (Frame)

18

Page 19: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

3 프레임 (Frame)

19

실습예제FrameTest2.java010203040506070809101112

import javax.swing.*; import java.awt.*; public class FrameTest2{ public static void main(String[] args) { JFrame jf = new JFrame("Test Frame( 버튼포함 )"); Container ct = jf.getContentPane(); JButton jb = new JButton(" 테스트버튼 "); ct.add(jb); jf.setSize(400,300); jf.setVisible(true); }}

swing 패키지를 포함

Container( 쟁반 역할 ) 객체 생성버튼을 쟁반에 추가

awt 패키지 포함

버튼 객체 생성

Page 20: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

3 프레임 (Frame)

20

프로그램 설명- 01~02 : JFrame, JButton 클래스들은 swing 패키지에 속한 클래스이고 , Container

클래스는 awt 패키지에 속한 클래스이다 . 두 개의 패키지를 포함하여 프로그램을 작성하였다 .

- 06 : Container 클래스는 그릇을 담는 쟁반 역할을 수행하는 클래스이다 . getContent-Pane() 메소드는 JFrame 클래스에 선언된 메소드로서 Container 클래스의 객체를 반환하는 메소드이다 . jf.getContentPane() 메소드는 jf( 프레임 객체 ) 와 연관된 Con-tainer 객체를 반환한다 . Container 객체는 그릇 역할을 하므로 이 컨테이너에 추가되는 모든 컴포넌트들은 프레임에 나타나게 된다 .

- 07 : JButton 클래스로 버튼 객체를 생성하였다 (16 장에서 JButton 클래스 설명 ).- 08 : 생성된 버튼 객체를 Container 객체에 추가하였다 .

Page 21: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

3 프레임 (Frame)

21

Page 22: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

4 배치관리자 (Layout Manager)

22

배치관리자- 애플릿이나 컨테이너에 컴포넌트를 자동으로 배치

- 프로그램 작성자는 컴포넌트가 위치할 좌표를 계산할 필요가 없음

- 사용자가 애플릿의 크기를 변형시켰을 때도 배치관리자는 재배치를 자동으로 수행

Page 23: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

4-1 FlowLayout 클래스4 배치관리자 (Layout Manager)

23

FlowLayout 클래스 생성자

FlowLayout()FlowLayout(int align)FlowLayout(int align, int hgap, int vgap)

형식

Page 24: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

4-1 FlowLayout 클래스4 배치관리자 (Layout Manager)

24

실습예제FlowLayoutTest.java0102030405060708091011121314151617181920

import javax.swing.*; import java.awt.*; class FlowLayout1 extends JFrame{ public FlowLayout1(){ Container ct = getContentPane(); FlowLayout f = new FlowLayout(FlowLayout.RIGHT, 10, 15); ct.setLayout(f); for ( int i = 1; i<=15 ; i++) ct.add(new JButton(" 버튼 "+i)); setTitle("FlowLayout Test"); setSize(400,300); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setVisible(true); } }public class FlowLayoutTest { public static void main(String[] args) { new FlowLayout1(); }}

JFrame 클래스로부터 상속생성자

Container( 쟁반 역할 ) 객체 생성오른쪽 정렬 layout 객체 생성쟁반 객체에 layout 설정

객체 변수 없이 객체 생성

쟁반에 버튼 15 개 추가

Page 25: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

4-1 FlowLayout 클래스4 배치관리자 (Layout Manager)

25

프로그램 설명- 03 : JFrame 클래스로부터 상속받아 클래스를 생성하였다 . JFrame 클래스의 모든

특성을 상속받는다 .- 05 : 객체 변수 없이 getContentPane() 메소드가 사용되었다 . 메소드 앞에 객체

변수명이 없을 경우는 현재의 객체를 의미한다 . 즉 현재 클래스에서 이 메소드를 탐색하고 없으면 상위 클래스로 가서 탐색하여야 한다 . 이 메소드는 JFrame 클래스에서 선언된 메소드이다 . 프레임과 연관된 Container 객체를 반환한다 .

- 06 : layout 객체를 생성한다 . FlowLayout 클래스의 생성자를 이용하여 오른쪽 정렬과 버튼 사이의 간격을 지정하여 객체를 생성하였다 .

- 07 : 생성된 layout 객체를 이용하여 쟁반 객체인 Container 객체의 정렬 방법을 설정하였다 .

- 08~09 : 설정된 쟁반 객체에 15 개의 버튼을 생성하여 추가하였다 .- 18 : 객체 변수 없이 클래스로부터 객체를 생성하는 문장이다 . 객체 변수가 필요하지

않을 경우 위와 같이 객체만 생성하면 된다 .

Page 26: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

4-1 FlowLayout 클래스4 배치관리자 (Layout Manager)

26

Page 27: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

4-2 BorderLayout 클래스4 배치관리자 (Layout Manager)

27

BorderLayout 클래스- 컴포넌트를 프레임에 추가할 때 방향을 지정하여 추가할 수 있도록 해주는 클래스

BorderLayout 클래스 생성자

BorderLayout()BorderLayout(int hgap, int vgap)형식

Page 28: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

4-2 BorderLayout 클래스4 배치관리자 (Layout Manager)

28

실습예제BorderLayoutTest.java

010203040506070809101112131415

import javax.swing.*; import java.awt.*; class BorderLayout1 extends JFrame{ public BorderLayout1() { Container ct = getContentPane(); BorderLayout bl = new BorderLayout(10, 10); ct.setLayout(bl); ct.add(new JButton(" 오른쪽버튼 "), BorderLayout.EAST); ct.add(new JButton(" 왼쪽버튼 "), BorderLayout.WEST); ct.add(new JButton(" 위쪽버튼 "), BorderLayout.NORTH); ct.add(new JButton(" 아래쪽버튼 "), BorderLayout.SOUTH); ct.add(new JButton(" 중앙버튼 "), BorderLayout.CENTER); setTitle("BorderLayout Test"); setSize(400,300); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

BorderLayout 객체 생성 ( 수직 수평 간격 10)

쟁반에 버튼 5 개방향 지정하여 추가

쟁반 객체에 layout 설정

Page 29: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

4-2 BorderLayout 클래스4 배치관리자 (Layout Manager)

29

실습예제BorderLayoutTest.java

1617181920212223

setVisible(true); }} public class BorderLayoutTest { public static void main(String[] args) { new BorderLayout1(); }}

Page 30: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

4-2 BorderLayout 클래스4 배치관리자 (Layout Manager)

30

프로그램 설명- 06 : BorderLayout 클래스로부터 객체를 생성하였다 . 각 요소들의 수직 , 수평 간격을

10 픽셀로 지정하였다 .- 07 : 생성된 layout 객체를 이용하여 쟁반 객체인 Container 객체의 정렬 방법을

설정하였다 . - 08~12 : 설정된 쟁반 객체에 5 개의 버튼을 생성하여 추가하였다 . 각각의 버튼은 배치

방향이 설정되어 생성되었다 .

Page 31: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

4-2 BorderLayout 클래스4 배치관리자 (Layout Manager)

31

Page 32: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

4-3 GridLayout 클래스4 배치관리자 (Layout Manager)

32

GridLayout 클래스- 컴포넌트를 행과 열을 가진 배열 형태로 배치

GridLayout 클래스 생성자

GridLayout()GridLayout(int rows, int cols)GridLayout(int rows, int cols, int hgap, int vgap)

형식

Page 33: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

4-3 GridLayout 클래스4 배치관리자 (Layout Manager)

33

실습예제GridLayoutTest.java0102030405060708091011121314151617181920

import javax.swing.*; import java.awt.*; class FlowLayout1 extends JFrame{ public FlowLayout1(){ Container ct = getContentPane(); FlowLayout f = new FlowLayout(FlowLayout.RIGHT, 10, 15); ct.setLayout(f); for ( int i = 1; i<=15 ; i++) ct.add(new JButton(" 버튼 "+i)); setTitle("FlowLayout Test"); setSize(400,300); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setVisible(true); } }public class FlowLayoutTest { public static void main(String[] args) { new FlowLayout1(); }}

GridLayout 객체 생성(3 행 5 열 , 수직 수평 간격 10)

Page 34: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

4-3 GridLayout 클래스4 배치관리자 (Layout Manager)

34

프로그램 설명- 00 : GridLayout 클래스로부터 객체를 생성하였다 . 각 요소들을 3 행 5 열로

배치하도록 설정하였고 , 각 요소들의 수직 , 수평 간격을 10 픽셀로 지정하였다 .

Page 35: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

5 패널 (Panel)

35

Frame, Container, Panel 의 관계- Frame 에 연관된 Container 객체를 지정

- Container 객체에는 다수 개의 Panel 객체를 생성

478 page

Page 36: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

5 패널 (Panel)

36

실습문제JPanelTest.java0102030405060708091011121314151617181920

import javax.swing.*; import java.awt.*; class JPanel1 extends JFrame{ public JPanel1() { Container ct = getContentPane(); ct.setLayout(new BorderLayout()); JPanel jp1 = new JPanel(); jp1.setLayout(new GridLayout(5,1)); jp1.add(new JRadioButton(" 자바 ")); jp1.add(new JRadioButton("C")); jp1.add(new JRadioButton("VisualBasic")); jp1.add(new JRadioButton("JSP")); jp1.add(new JRadioButton("PHP")); JPanel jp2 = new JPanel(); jp2.setLayout(new GridLayout(5,1)); jp2.add(new JButton(" 자바 ")); jp2.add(new JButton("C")); jp2.add(new JButton("VisualBasic")); jp2.add(new JButton("JSP")); jp2.add(new JButton("PHP"));

Frame 과 연관된 Container 객체 생성BorderLayout 으로 설정JPanel 객체 생성

JPanel 객체에 GridLayout 설정 (5 행 1 열 )

또 다른 패널 객체 생성

Radio 버튼을패널 객체에 추가

Page 37: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

5 패널 (Panel)

37

실습문제JPanelTest.java21222324252627282930313233

ct.add(jp1, BorderLayout.EAST); ct.add(jp2, BorderLayout.WEST); setTitle("JPanel Test"); setSize(300,200); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setVisible(true); }}public class JPanelTest { public static void main(String[] args) { new JPanel1(); }}

두 개의 패널을 Container 에 추가 ( 방향 지정 )

Page 38: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

5 패널 (Panel)

38

프로그램 설명- 05 : JFrame 으로부터 상속받아 객체를 생성하였다 .- 06 : Container 객체의 레이아웃을 BorderLayout 으로 설정하였다 .- 07 : JPanel 클래스로부터 객체를 생성하였다 .- 08 : JPanel 객체의 레이아웃을 GridLayout 으로 설정하였다 . 5 행 1 열로 설정하였다 .- 09~13 : JPanel 객체에 Radio 버튼 객체를 생성하여 추가하였다 .- 21~22 : 작성한 두 개의 패널 객체를 Container 객체에 추가하였다 . 각 패널을

추가하면서 방향을 지정하여 배치하였다 .

Page 39: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

5 패널 (Panel)

39

Page 40: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

6 패널에서의 그래픽 사용

40

paintComponent 메소드

protected void paintComponent(Graphics g)형식

.........................class DrawTest extends JPanel { protected void paintComponent(Graphics g) { super.paintComponent(g); g.drawString(.........); g.drawLine(..........); g.drawRect(...........); }}

JPanel 클래스로부터 상속메소드 오버라이딩상위 클래스의 paintComponent() 메소드 호출다양한 그래픽 기능 사용

Page 41: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

6 패널에서의 그래픽 사용

41

Graphics 클래스- java.awt 패키지에 포함된 클래스 (java.awt.Graphics)- 윈도에 다양한 그래픽을 나타낼 수 있는 많은 메소드를 제공

- 적합한 메소드를 이용하여 선 , 사각형 , 원 , 원호 , 그림 , 문자 등 많은 그래픽 기능을 사용

- Graphics 클래스에는 약 40 여 개의 메소드가 정의

Page 42: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

6 패널에서의 그래픽 사용

42

Graphics 클래스의 주요 메소드

메소드 설명void drawArc(int x, int y, int w, int h, int star-tAngle, int endAngle)

startAngle 과 endAngle 로 지정된 각도를 가지는 원호를 그린다 .

void drawImage(Image img, int x, int y, ima-geObserver io) img 로 지정된 이미지를 애플릿의 x,y 좌표에 그린다 .

viod drawLine(int x0, int y0, int x1, int y1) x0,y0 부터 x1,y1 까지 라인을 그린다 .

viod drawLine(int x0, int y0, int x1, int y1) x0,y0 부터 x1,y1 까지 라인을 그린다 .

void drawOval(int x, int y, int w, int h) x,y 좌표에 w,h 의 폭과 높이를 가진 타원을 그린다 .

void drawPolygon(int x[ ], int y[ ], int n) x[] 와 y[] 배열의 각 점을 좌표로 하여 n 개의 코너점을 가진 다각형을 그린다 .

void drawRect(int x, int y, int w, int h) x,y 좌표에 w,h 의 폭과 높이를 가진 사각형을 그린다 .

void drawString(String str, int x, int y) 문자열을 x,y 좌표에 그린다 .void fillArc(int x, int y, int w, int h, int star-tAngle, int endAngle) 속이 찬 원호를 그린다 .

void fillOval(int x[ ], int y[ ], int n) 속이 찬 타원을 그린다 .

Page 43: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

6 패널에서의 그래픽 사용

43

Graphics 클래스의 주요 메소드

메소드 설명void fillOval(int x[ ], int y[ ], int n) 속이 찬 타원을 그린다 .

void fillPolygon(int x[ ], int y[ ], int n) 속이 찬 다각형을 그린다 .

void fillRect(int x, int y, int w, int h) 속이 찬 사각형을 그린다 .

Color getColor( ) 현재 객체의 색을 Color 객체로 반환Font getFont( ) 현재 객체의 폰트를 Font 객체로 반환FontMetrics getFontMetrics( ) 현재 객체의 폰트 정보를 FontMetrics 객체로 반환void setColor(Color color) 현재 객체의 색을 color 로 설정

Page 44: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

6 패널에서의 그래픽 사용

44

실습예제LineTest.java

01020304050607080910111213

import javax.swing.*; import java.awt.*; class LineTestPanel extends JPanel{ protected void paintComponent(Graphics g) { super.paintComponent(g); g.drawLine(10, 10, 100, 10); g.drawLine(100, 10, 100, 100); g.drawLine(100, 100, 10, 100); g.drawLine(10, 100, 10, 10); g.drawLine(10, 10, 100, 100); g.drawLine(10, 100, 100, 10); }}

그림을 그릴 수 있는 클래스 작성 (JPanel 클래스로부터 상속 )

Graphics 객체 g 를이용하여 그린다

paintComponent() 메소드를 오버라이딩상위 클래스의 paintComponent() 메소드 호출

Page 45: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

6 패널에서의 그래픽 사용

45

실습예제LineTest.java

14151617181920212223242526272829

class LineTestFrame extends JFrame{ LineTestFrame() { setTitle("DrawLine Test"); Container ct = getContentPane(); LineTestPanel ltp = new LineTestPanel(); ct.add(ltp); setSize(300,200); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setVisible(true); }}public class LineTest { public static void main(String args[]){ new LineTestFrame(); }}

JFrame 클래스로부터 상속받아클래스 작성

LineTestPanel 클래스로부터 객체를 생성

생성된 패널 객체를 프레임에 추가

Page 46: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

6 패널에서의 그래픽 사용

46

프로그램 설명- 03 : 우선 그림을 그리기 위한 객체를 만들기 위해서는 반드시 JPanel 클래스로부터

상속받아 클래스를 작성해야 한다 . - 04 : paintComponent(Graphics g) 메소드를 오버라이딩하였다 . 이 메소드는 JPanel

클래스 ( 상속된 클래스 포함 ) 로부터 객체가 생성될 때 자동으로 수행되는 메소드이다 . 이 메소드는 매개변수로 Graphics 클래스의 객체를 가지며 , 이 Graphics 객체를 이용하여 다양한 그래픽 기능을 수행할 수 있다 . Graphics 클래스는 java.awt 패키지에 속하는 클래스이며 다양한 그래픽 메소드들을 제공하고 있다 .

- 05 : 상위 클래스의 paintComponent() 메소드를 호출하며 , 이 메소드는 현재의 패널과 Graphics 객체를 연동시키는 역할을 수행한다 .

- 06~11 : Graphics 객체를 이용하여 라인을 그린다 .- 14 : 프레임 클래스를 생성한다 .- 18~19 : LineTestPanel 클래스로부터 객체를 생성하여 , 프레임에 추가한다 . - 27 : 메인 클래스에서 LineTestFrame 클래스의 객체를 생성한다 . 프레임 객체는 패널

객체를 생성하게 되고 , 패널 객체가 생성되면 paintComponent() 메소드가 자동으로 수행되어 그림이 그려지게 된다 .

Page 47: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

6 패널에서의 그래픽 사용

47

Page 48: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

6 패널에서의 그래픽 사용

48

실습예제RectanglesTest.java

01020304050607080910111213

import javax.swing.*; import java.awt.*; class RectanglesPanel extends JPanel{ protected void paintComponent(Graphics g) { super.paintComponent(g); g.drawRect(10, 10, 100, 100); g.fllRect(120, 10, 100, 100); g.fllRoundRect(10, 120, 100, 100, 15, 15); g.drawRoundRect(120, 120, 100, 100, 30, 40); }}class RectanglesFrame extends JFrame{ public RectanglesFrame() {

다양한 사각형을그린다

Page 49: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

6 패널에서의 그래픽 사용

49

실습예제RectanglesTest.java

14151617181920212223242526

setTitle("DrawRectangle Test"); Container ct = getContentPane(); ct.add(new RectanglesPanel()); setSize(300,300); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setVisible(true); } }public class RectanglesTest { public static void main(String[] args) { new RectanglesFrame(); }}

객체의 생성과 추가를하나의 문장으로 작성

Page 50: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

6 패널에서의 그래픽 사용

50

프로그램 설명- 06~08 : Graphics 객체를 이용하여 다양한 사각형을 그린다 . 프로그램의 다른 부분은

이전 프로그램과 같다 .- 16 : 객체를 생성하는 문장과 생성된 객체를 프레임에 추가하는 문장을 하나로 작성하여

기술하였다 .

Page 51: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

6 패널에서의 그래픽 사용

51

실습예제CircleTest.java

01020304050607080910111213

import javax.swing.*; import java.awt.*; class CirclePanel extends JPanel{ protected void paintComponent(Graphics g) { super.paintComponent(g); g.drawOval(10, 10, 50, 50); g.fllOval(100, 10, 75, 50); g.drawArc(210, 50, 70, 70, 0, 75); g.fllArc(150, 50, 90, 90, 0, 75); g.drawArc(10, 100, 70, 80, 0, 175); g.fllArc(100, 100, 70, 90, 180, 270); }}

다양한 원호를그린다

Page 52: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

6 패널에서의 그래픽 사용

52

실습예제CircleTest.java

141516171819202122232425262728

class CircleFrame extends JFrame{ public CircleFrame() { setTitle("DrawCircle Test"); Container ct = getContentPane(); ct.add(new CirclePanel()); setSize(300,300); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setVisible(true); }}public class CircleTest { public static void main(String[] args) { new CircleFrame(); }}

Page 53: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

6 패널에서의 그래픽 사용

53

프로그램 설명- 06~18 : Graphics 객체를 이용하여 다양한 원호를 그린다 .

Page 54: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

7 색의 사용

54

색을 객체로 취급하며 이를 위해 Color 클래스 (java.awt 패키지 ) 를 제공

Graphics 객체에 컬러 설정

Color 클래스 생성자

.......public void paintComponent(Graphics g) { ...... Color c = Color.orange; g.setColor(c); g.fillRect(100, 10, 60, 50);}

형식

Color(int red, int green, int blue)Color(float r, float g, float b)Color(int rgb)

Page 55: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

7 색의 사용

55

Color 클래스에서 제공하는 색상 관련 상수

색의 이름 RGB 값black (0, 0, 0)

magenta (255, 0, 255)blue (0, 0, 255)

orange (255, 200, 0)cyan (0, 255, 255)pink (255, 175, 175)

darkGray (64, 64, 64)red (255, 0, 0)gray (128, 128, 128)white (255, 255, 255)green (0, 255, 0)yellow (255, 255, 0)

lightGray (192, 192, 192)

Page 56: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

7 색의 사용

56

Color 클래스의 주요 메소드

메소드 설명Color brighter() 현재 객체의 색보다 한 단계 밝은 색의 Color 객체를 반환Color darker() 현재 객체의 색보다 한 단계 어두운 색의 Color 객체를 반환static Color decode(String str) throws NumberFormatException

문자열 str 과 동일한 Color 객체를 반환booleanequals(Object obj) 현재의 객체와 obj 로 지정된 객체가 같은 색을 가지면 true, 아니면 false

를 반환int getRed() 현재 객체의 R(red) 값을 반환int getGreen() 현재 객체의 G(green) 값을 반환int getBlue() 현재 객체의 B(blue) 값을 반환int getRGB() 현재 객체의 RGB 값을 반환

Page 57: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

7 색의 사용

57

실습예제ColorTest.java0102030405060708091011121314151617

import javax.swing.*; import java.awt.*; class ColorPanel extends JPanel{ protected void paintComponent(Graphics g) { super.paintComponent(g); g.setColor(Color.red); g.drawString(" 객체지향 프로그래밍 JAVA", 50, 50); g.setColor(Color.blue); g.drawString(" 배우기 쉬운 자바 프로그래밍 ", 50, 80); Color c1 = new Color(100, 255, 100); Color c2 = new Color(255, 100, 255); g.setColor(c1); g.fllRect(50, 100, 60, 50); g.setColor(c2); g.fllOval(130, 100, 90, 30); g.setColor(Color.cyan); g.drawRoundRect(50, 190, 200, 50, 15, 15);

상수를 사용하여 컬러를 설정

Color 객체를 생성 (r,g,b 번호로 생성 )

문자열을 그래픽으로 그린다

Color 객체로 컬러를 설정

Page 58: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

7 색의 사용

58

실습예제ColorTest.java1819202122232425262728293031323334

} } class ColorFrame extends JFrame{ public ColorFrame() { setTitle("Color Test"); Container ct = getContentPane(); add(new ColorPanel()); setSize(300,300); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setVisible(true); } }public class ColorTest { public static void main(String[] args) { new ColorFrame(); }}

Page 59: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

7 색의 사용

59

프로그램 설명- 06 : Color 클래스에서 제공되는 상수를 가지고 Graphics 객체의 컬러를 설정한다 .

한번 설정되면 , 그 이후에 그려지는 모든 그래픽은 설정된 컬러로 표현된다 .- 07 : g.drawString() 메소드는 문자열을 그래픽으로 그리는 메소드이다 . 패널의 특정

위치에 지정된 컬러로 문자열을 그린다 .- 10~11 : Color 클래스의 생성자를 이용하여 객체를 생성한다 . 생성자에 컬러의 red,

green, blue 값을 지정하여 객체를 생성할 수 있다 .- 12 : 생성된 Color 객체를 이용하여 Graphics 객체의 컬러를 설정한다 .

Page 60: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

7 색의 사용

60

Page 61: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

8 글꼴 (Font) 의 사용

61

자바에서는 패널이나 애플릿에 대한 텍스트 출력을 그래픽 객체로 처리

drawString() 메소드- 패널이나 애플릿에 텍스트를 출력하기 위해서는 Graphics 클래스에서 제공

setFont(Font font) 메소드를 이용하여 출력할 텍스트의 글꼴을 지정

Page 62: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

8 글꼴 (Font) 의 사용

62

Font 클래스 생성자

Font(String name, int style, int fontsize)형식

.........public void paintComponent(Graphics g) { ........ Font font = new Font("Serif", Font.ITALIC, 36); g.setFont(font); g.drawString("JAVA APPLET", 100, 50); .......}

Page 63: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

8 글꼴 (Font) 의 사용

63

Font 클래스의 주요 메소드

메소드 설명String getName( ) 글꼴의 이름을 반환int getSize( ) 글꼴의 크기를 반환int getStyle( ) 글꼴의 스타일을 반환

Page 64: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

8 글꼴 (Font) 의 사용

64

실습예제FontTest1.java01020304050607080910111213141516171819

import javax.swing.*; import java.awt.*; class FontPanel extends JPanel{ protected void paintComponent(Graphics g) { super.paintComponent(g); Font sanserif, serif, monospaced, etc; sanserif = new Font("SansSerif",Font.BOLD,20); serif = new Font("Serif",Font.ITALIC,20); monospaced = new Font ("Monospaced",Font.BOLD+Font.ITALIC,20); etc = new Font(" 굴림 ",Font.BOLD,20); g.setFont(sanserif); g.drawString("Teach you self JAVA : Courier ",20,20); g.setFont(serif); g.drawString ("Complete Reference JAVA : Timesoroman ",20,50); g.setFont(monospaced); g.drawString("JAVA Tutorial : Symbol ",20,82); g.setFont(etc);

Font 객체 변수 선언Font 객체 생성

Graphics 객체에 폰트를 설정하고 문자열 출력

Page 65: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

8 글꼴 (Font) 의 사용

65

실습예제FontTest1.java202122232425262728293031323334353637

g.drawString(" 객체지향 프로그래밍 자바 : 굴림체 ",20,118); }}class FontFrame extends JFrame{ public FontFrame() { setTitle("Font Test"); Container ct = getContentPane(); ct.add(new FontPanel()); setSize(430,200); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setVisible(true); } }public class FontTest1 { public static void main(String[] args) { new FontFrame(); }}

Page 66: 14 장 .  그래피컬  사용자 인터페이스

14 장 . 그래피컬 사용자 인터페이스

8 글꼴 (Font) 의 사용

66

프로그램 설명- 06 : Font 클래스의 객체 변수를 선언하였다 .- 07 : 다양한 형태의 폰트 객체를 생성하였다 .- 12, 13 : Graphics 객체에 폰트를 설정하고 , 문자열을 출력하면 설정된 폰트로 문자열이

출력된다 .

Page 67: 14 장 .  그래피컬  사용자 인터페이스

AWT 와 스윙 (Swing) ① 응용 프로그램에서 사용자가 접속하는 부분을 GUI 라고 한다 .② 자바 언어는 초기에 AWT 라는 GUI 패키지를 제공하였다 . 이 클래스들은

그래픽을 실행되는 시스템의 그래픽 컴포넌트를 이용하는 방법을 사용하였기 때문에 , 실행되는 시스템에 따라 조금씩 다르게 나타나는 단점이 있다 .

③ Swing GUI 패키지는 실행되는 시스템의 그래픽 컴포넌트와는 무관하게 JVM 이 모든 그래픽을 처리한다 . 이 방법은 실행시간이 AWT 방법에 비해 더 소요되지만 , 실행되는 시스템에 상관없이 일관된 형태의 GUI 를 제공할 수 있는 장점이 있다 .

AWT 패키지와 주요 클래스 ① AWT 패키지에는 GUI 구축을 위한 다양한 클래스들을 제공하고 있다 .② Component 클래스는 약 100 여 개의 메소드를 제공하는 추상 클래스로서

대부분의 GUI 관련 클래스들이 Component 클래스의 하위 클래스이다 .③ Container 클래스는 쟁반 역할을 하는 클래스로서 다른 GUI 컴포넌트들을 쟁반에

담아 나타내는 역할을 수행한다 .

학습정리

67

Page 68: 14 장 .  그래피컬  사용자 인터페이스

프레임 (Frame) 과 배치관리자 ① 일반적인 응용 프로그램 구축 시 GUI 부분을 작성하기 위해 프레임을 사용한다 . 자바는 JFrame

클래스를 제공한다 .② 자바는 쟁반 역할을 하는 클래스로 Container 클래스와 JPanel 클래스를 제공하고 있다 .

일반적으로 프레임에 하나의 Container 클래스 객체를 배정하고 , 하나의 Container 클래스

객체에는 다수 개의 JPanel 객체를 배정한다 .③ 자바는 쟁반 클래스에 객체를 배치하기 위해 배치관리자를 클래스로 제공하고 있다 . 자바는

배치관리자의 특성에 따라 FlowLayout, BorderLayout, GridLayout 클래스를 제공하고 있다 .

그래픽의 사용 ① 패널 객체에는 다양한 그래픽을 표현할 수 있다 . 일반적으로 패널 객체에 그래픽을 나타내기

위해서는 paintComponent(Graphics g) 메소드를 이용한다 . 이 메소는 패널 객체가 생성될 때

자동으로 호출되는 메소드이다 .② paintComponent(Graphics g) 메소드의 매개변수로 지정된 Graphics 클래스의 객체를

이용하여 패널에 그래픽을 출력한다 .③ 컬러와 폰트를 설정하여 도형과 문자열의 출력이 가능하다 .

학습정리

68

Page 69: 14 장 .  그래피컬  사용자 인터페이스

14장. 그래피컬 사용자인터페이스

69

수고하셨습니다 .질문 있습니까 ?