스윙 프로그래밍

(1)

스윙 프로그래밍

[ 단원 09 ]

(2)

단원 09 스윙 프로그래밍

학습목표

❖

그래픽 사용자 인터페이스를 이해하고 스윙 프로그래밍에 활용할 수 있다.

• 그래픽 사용자 인터페이스 이해와 컴포넌트 분류

• AWT와 스윙의 공통점과 차이점, • 스윙의 주요 클래스와 계층구조

❖

스윙을 이용하여 간단한 윈도우 프로그래밍에 활용할 수 있다.

• JFrame의 이해, • 윈도우의 제목, 크기, 바탕색 수정 방법

• 간단한 컴포넌트 추가하기

❖

자바의 배치관리자의 필요성을 이해하고 프로그래밍에 활용할 수 있다.

• 컨테이너의 기본 배치관리자

• 배치관리자 BorderLayout, FlowLayout, GridLayout의 이해

• 배치관리자 BoxLayout의 이해

• 배치관리자를 해지하고 컴포넌트 삽입 방법

❖

스윙의 다양한 컴포넌트를 이해하고 프로그래밍에 활용할 수 있다.

• JComponent의 이해

• JButton, JCheckBox, JRadioButton의 이해

• JTextField, JTextArea의 이해, • JList, JComboBox, JScrollPane의 이해

• JSlider, JTabbedPane의 이해

2

(3)

단원 09 스윙 프로그래밍 ³

1. 그래픽 사용자 인터페이스 개요

(4)

그래픽 사용자 인터페이스

❖ 그래픽 사용자 인터페이스 방식의 프로그래밍

▪ GUI(Graphical User Interface) 기반의 윈도우 화면으로 결과가 표시

▪

다양한 요소를 컨트롤(control) 또는 컴포넌트(component)

•

메뉴, 아이콘, 버튼, 레이블, 리스트, 콤보박스, 체크박스, 텍스트필드, 라디오 버튼

4

Section 1 그래픽 사용자 인터페이스 개요 p352

(5)

❖ 컴포넌트는 크게 일반 컴포넌트(component)와 컨테이너(container) 구분

▪

일반 컴포넌트

•

버튼(button), 레이블(label), 메뉴(menu), 체크박스(checkbox), 리스트(list), 텍스 트필드(text field)

▪

다양한 컴포넌트를 담을 수 있는 컨테이너

•

다시 일반 컨테이너와 최상위 수준의 컨테이너로 다시 분류

•

일반 컨테이너

– 패널(panel), 스크롤 패인(scroll pane)

•

최상위 수준의 컨테이너

– 프레임(frame), 대화상자(dialog), 애플릿(applet )

5

Section 1 그래픽 사용자 인터페이스 개요

다양한 컴포넌트와 분류

(6)

최상위 수준의 컨테이너

❖ 내부에 다양한 컴포넌트를 배치하여 독립적으로 화면에 표시

6

(7)

AWT 개요

❖ AWT(Abstract Window Toolkit)

▪

자바가 윈도우 프로그래밍을 위하여 처음으로 제공한 클래스 라이브러리

▪

실행되는 플랫폼의 운영체제의 컴포넌트 자원을 활용하여 GUI를 제공

•

플랫폼에 따라 GUI 외양이 다를 수 있음

▪

패키지

•

java.awt, java.awt.dnd 등

▪

컴포넌트

•

Frame, Panel, Label, Button, TextField 등

7

(8)

스윙 개요

❖ AWT 를 기반으로 하여 더욱 발전된 윈도우 프로그래밍 방식

▪

Java SE 1.2 버전부터 스윙이라는 새로운 윈도우 프로그래밍 방식을 제공

▪

해당 운영체제의 컴포넌트 자원을 활용하지 않고 순수하게 자바로 구현

▪

다양하고 풍부한 GUI를 제공

•

외양은 플랫폼에 따라 마이크로소프트microsoft의 외양(Windows look and feel) 일 수 있으며

•

고유한 자바 외양(Java look and feel) 등 다양한 모습으로도 가능

▪

경량 컴포넌트(light weight component)

•

스윙 컴포넌트는 운영체제의 도움 없이 AWT보다 가볍게 실행

▪

AWT를 비슷

•

이벤트 처리와 배치관리 등은 상당 부분 기존 방식인 AWT를 동일하게 사용

•

프로그래밍 방식 또한 거의 비슷

▪

주로 패키지 javax.swing으로 제공

•

컴포넌트 JFrame, JPanel, JLabel, JButton, JTextField와 같이 J로 시작

8

(9)

AWT 와 스윙의 클래스 계층구조

9

(10)

단원 09 스윙 프로그래밍 ¹⁰

2. 스윙 프로그래밍 기초

(11)

첫 윈도우 프로그램

❖ 클래스 JFrame의 객체를 이용한 윈도우 프로그램

▪

클래스 Jframe

•

패키지가 javax.swing으로 AWT의 Frame을 상속받은 클래스

▪

간단한 윈도우 프로그래밍 절차

•

JFrame으로 객체 생성: new JFrame()

•

가로와 세로 크기 지정: 메소드 setSize(가로, 세로)

•

윈도우 캡션에 표시되는 제목 지정: 메소드 setTitle(제목)

•

화면에 표시: setVisible(true)

11

Section 2 스윙 프로그래밍 기초 p356

(12)

클래스 JFrame을 상속받은 윈도우 프로그램

❖ 클래스 HelloJFrame

▪

JFrame의 상속받아 제목을 인자로 받는 생성자

•

윈도우의 주요 속성을 지정하여 화면에 표시하는 기본 기능을 구현

12

Section 2 스윙 프로그래밍 기초

(13)

윈도우 종료 버튼과 바탕색 수정

❖ 윈도우의 종료 버튼

▪

setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE)을 호출

❖ 윈도우의 바탕 색상 수정

▪

getContentPane()으로 반환 받은 컨테이너 객체로 setBackground(색상) 호출

13

(14)

실습예제 9-3

14

FrameTest.java

(15)

버튼 추가

❖ JButton 의 계층구조

▪

AbstractButton 하위 클래스

❖ 버튼 추가 과정

▪

JButton의 객체

•

버튼의 이름을 인자로 생성

•

생성된 객체를 JFrame 내부에서 메소드 add(버튼객체)로 추가

•

setVisible(true)을 호출

15

(16)

실습예제 9-4

16

(17)

단원 09 스윙 프로그래밍 ¹⁷

3. 배치관리

(18)

배치관리 종류

❖ 배치관리자(layout manager)

▪

컨테이너에 배치되는 컴포넌트의 위치를 일관성 있게 관리하는 방법을 제공하는 클 래스

▪

삽입되는 컴포넌트는 배치관리자에 따라 크기와 위치가 결정

▪

컨테이너의 크기가 변하면 다시 컴포넌트의 크기와 위치가 결정

❖ 다양한 배치 관리자 제공

18

Section 3 배치관리 p362

(19)

컨테이너의 배치관리자 지정

❖ 배치관리 지정을 위한 메소드

▪

클래스 Container는 메소드 setLayout(Layout)을 제공

▪

null을 인자로 메소드 setLayout(null)을 사용

•

배치관리자를 해지하여 절대 위치에 컴포넌트를 배치

❖ 기본 배치관리자

▪

특별히 배치관리를 지정하지 않아도 기본으로 배치관리가 결정

19

Section 3 배치관리

(20)

배치관리자 BorderLayout

❖ 컨테이너의 컴포넌트의 위치

▪

동East, 서West, 남South, 북North, 중앙Center인 다섯 가지로 미리 정의하는 배치관리

20

(21)

실습예제 9-5

❖ JButton 5 개를 배치관리 BorderLayout에 추가한 윈도우

21

(22)

배치관리자 FlowLayout

❖ 물 흐르는듯한 배치관리자 FlowLayout

▪

컴포넌트를 왼쪽에서 오른쪽으로 위에서 아래로 우선하는 배치관리

22

(23)

실습예제 9-6

❖ JButton 5 개를 배치관리 FlowLayout에 추가한 윈도우

23

(24)

배치관리자 GridLayout

❖ 컴포넌트를 같은 크기의 사각 셀에 배치하는 GridLayout

▪

컨테이너를 같은 크기의 행과 열을 나눈 셀cell에 추가되는 컴포넌트를 배치하는 관 리 방법

•

모든 셀의 가로 크기는 같으며 세로 크기도 같음

•

추가되는 컴포넌트는 순서대로 행의 왼쪽부터 오른쪽으로 열의 위쪽부터 아래쪽으로 우 선순위를 가지며 배치

•

생성자에서 0은 다른 지정된 값에 따라, 추가되는 컴포넌트 수에 따라 적절한 값으로 변 한다는 의미

24

(25)

실습예제 9-7

❖ 전화 다이얼을 위한 Jbutton을 GridLayout에 추가한 윈도우

25

(26)

배치관리자 BoxLayout

❖ 박스를 정렬하듯이 여러 컴포넌트를 수직 또는 수평 방향으로 배치

26

(27)

실습예제 9-8

27

(28)

배치관리자를 null로 지정

❖ 배치관리자가 없는 컨테이너 만들기

▪

컨테이너에 삽입되는 컴포넌트의 크기와 위치를 임의로 지정하려면

•

setLayout(null)과 같이 배치관리자를 null로 지정

❖ 배치관리자가 없는 컨테이너에 컴포넌트를 삽입

▪

컴포넌트의 크기와 위치

•

setSize(width, height)와 setLocaton(x, y)으로 지정

28

(29)

단원 09 스윙 프로그래밍 ²⁹

4. 다양한 컴포넌트

(30)

기본 컴포넌트

❖ JComponent

▪

스윙을 구성하는 대부분의 클래스는 J로 시작

▪

AWT의 Container가 상위 클래스

▪

최상위 컨테이너인 JFrame, JDialog, JApplet을 제외한 모든 스윙 컴포넌트의 상 위인 기본 클래스

30

Section 4 다양한 컴포넌트 p374

(31)

클래스 JComponent에 정의된 메소드

❖ 하위 클래스에서 사용되는 공통적인 기능을 수행하는 메소드

31

Section 4 다양한 컴포넌트

(32)

Jlabel

❖ 생성자

▪

표시할   문자열을  인자로 

객체를 생성

32

(33)

JPanel

❖ 스윙의 JPanel은 상위가 JComponent인 컨테이너 클래스

▪

주로 다른 다양한 컴포넌트를 담는 컨테이너 역할을 수행

▪

메소드 add(객체)

•

다른 컴포넌트의 객체를 삽입

❖ 패널의 기본 배치관리는 FlowLayout

▪

생성자에서 다른 배치관리 객체를 지정

▪

또는 메소드 setLayout()을 사용하여 지정

33

(34)

실습예제 9-11

❖ 패널 내부에 패널 2개를 삽입하여 상위 패널을 윈도에 추가

34

package component;

import java.awt.Color;

import java.awt.GridLayout;

import javax.swing.JFrame;

import javax.swing.JPanel;

public class PanelWin extends JFrame {

private static final long serialVersionUID = 1L;

public PanelWin(String title) {

setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

setSize(300, 100);

setTitle(title);

//패널 구성의 메소드 호출 makePanel();

setVisible(true);

}

public void makePanel() {

//상위 패널에 삽입할 2개의 패널을 만들어 색상 수정 JPanel pan1 = new JPanel();

pan1.setBackground(Color.red);

JPanel pan2 = new JPanel();

pan2.setBackground(Color.yellow);

//패널의 기본 배치는 FlowLayout이며 add의 기본 정렬은 중앙 //패널의 배치관리를 가로를 읻으분하기 위해 GridLayout 설정 JPanel p = new JPanel(new GridLayout(1,2));

p.add(pan1);

p.add(pan2);

//윈도의 기본 배치는 BorderLayout이며 add는 중앙에 삽입 add(p);

}

public static void main(String[] args) {

PanelWin win = new PanelWin("패널 알아보기");

} }

(35)

다양한 버튼

❖ JButton

▪

AbstractButton의 하위 클래스

❖ JToggleButton

▪

선택(selected)과 비선택(deselected)의 2가지 상태를 제공

▪

자식 클래스로 JCheckBox와 JRadioButton을 제공

35

(36)

JCheckBox 와 JRadioButton

❖ JCheckBox

▪

체크박스는 버튼마다 독립적으로 선택과 비선택의 2가지 상태를 제공

❖ JRadioButton

▪

라디오 버튼은 지정된 그룹에서 버튼 하나만 선택되도록 하는 버튼

▪

라디오 버튼을 하나의 그룹으로 지정, javax.swing.ButtonGroup

36

(37)

토글 버튼 구성

❖ 2 개의 패널 pChcek와 pRadio

▪

각각 체크박스와 라디오 버튼을 생성하여 삽입

▪

윈도우의 배치를 GridLayout(0,1)로 지정

•

패널 pChcek와 pRadio를 삽입

37

(38)

텍스트필드 컴포넌트

❖ JTextComponent

▪

스윙의 텍스트 컴포넌트를 위한 기본 클래스(base class)

38

(39)

JTextField, JFormattedTextField

❖ JTextField

▪

사용자로부터 글자의 입력에 사용

❖ JFormattedTextField

▪

날짜, 전화번호, 숫자 등과 같이 특정한 형식의 텍스트를 입력

39

(40)

JPasswordField, JTextArea

❖ JPasswordField

▪

암호와 같이 입력되는 문자가 보이지 않도록 다른 문자가 출력되도록 하는 텍스트 필드

▪

기본으로 입력되는 문자는

^*

로 표시

•

메소드 setEchoChar(char c)를 사용하여 표시되는 문자를 변경 가능

❖ JTextArea

▪

여러 줄의 문자열을 위한 입력 및 출력에 사용

40

(41)

실습예제 9-13

41

package component.text;

import java.util.Date;

import javax.swing.JFormattedTextField;

import javax.swing.JLabel;

import javax.swing.JPasswordField;

import javax.swing.JTextArea;

import javax.swing.JTextField;

public class TextFieldWin extends JFrame {

public TextFieldWin(String title) {

setSize(400, 240);

setTitle(title);

//체크박스 구성의 메소드 호출 makeTextField();

setVisible(true);

}

public void makeTextField() { JPanel pL = new JPanel();

pL.setLayout(new GridLayout(0,1,20,5));

pL.add(new JLabel(" 이 름: "));

pL.add(new JLabel(" 암 호: "));

pL.add(new JLabel(" 생 일: "));

JPanel pR = new JPanel();

pR.setLayout(new GridLayout(0,1,20,5));

JTextField tf = new JTextField();

tf.setText("홍 길동");

pR.add(tf);

JPasswordField pwd = new JPasswordField();

pwd.setEchoChar('#');

pR.add(pwd);

JFormattedTextField date = new JFormattedTextField();

date.setValue(new Date());

pR.add(date);

JPanel pD = new JPanel();

JTextArea ta = new JTextArea(5, 30);

ta.setText("JTextComponent\n");

ta.append(" JTextFiled\n");

ta.append(" JTextArea\n");

ta.append(" JEditorPane\n");

pD.add(new JLabel(" 메 모: "));

pD.add(ta);

add(pL, "West");

add(pR, "Center");

add(pD, "South");

}

TextFieldWin win = new TextFieldWin("텍스트필드 알아보기");

} }

(42)

목록을 위한 컴포넌트

❖ JList 와 JComboBox

▪

목록을 위한 컴포넌트

▪

다. 또한 리

❖ JScrollPane

▪

리스트나 텍스트영역 등과 같이 표시될 영역이 큰 경우 스크롤을 이용

42

(43)

JList

❖ 여러 항목을 나열하여 하나 또는 여러 개를 선택할 수 있는 컨트롤

❖ 클래스 JList<String>

▪

항목의 자료형을 일반화 유형(generic)으로 사용

43

(44)

JScrollPane

❖ JScrollPane 을 사용

▪

JList에서 스크롤 바를 사용하려면

❖ 표시될 항목 수를 지정

▪

JList 객체에서 setVisibleRowCount(보이는행수)

❖ JList 객체를 인자로 JScrollPane 객체를 생성

▪

스크롤 바의 표시

•

setVerticalScrollBarPolicy(상수)를 사용

44

(45)

JComboBox

❖ 편집 가능한 필드와 버튼, 드롭다운 목록(drop-down list)을 결합

▪

addItem(항목)

▪

setEditable(boolean)

▪

setSelectedIndex(첨자)

45

(46)

실습예제 9-14

❖ 리스트와 스크롤 바가 있는 리스트, 콤보박스를 나타내는 윈도우

▪

결과

46

(47)

실습예제 9-14

47

import javax.swing.JList;

import javax.swing.JScrollPane;

import javax.swing.JComboBox;

public class ListWin extends JFrame {

public ListWin(String title) {

setSize(350, 200);

setTitle(title);

//다양한 목록 구성의 메소드 호출 makeList();

setVisible(true);

}

public void makeList() {

//JList 목록에 입력될 안드로이드 버전별 코드이름 문자열 String code[] = {"Cupcake 1.5", "Donut 1.6",

"Eclair 2.0", "Froyo 2.2", "Gingerbread 2.3", "Honeycomb 3.0", "Icecream Sandwich 4.0"};

//JList 목록에 입력되는 항목이 문자열이 이므로 JList<String>으로 선언

JList<String> lst = new JList<String>(code);

pan1.add(lst);

//JList 목록에 입력될 스윙 관련 패키지 이름 문자열 String swing[] = {"javax.accessibility",

"javax.swing", "javax.swing.border", "javax.swing.event",

"javax.swing.filechooser", "javax.swing.plaf",

"javax.swing.plaf.basic", "javax.swing.plaf.metal"};

JList<String> pkg = new JList<String>(swing);

//JList 목록을 스크롤팬을 사용하므로 보이는 항목 수를 지정

pkg.setVisibleRowCount(4);

//JList 목록 객체를 인자로 스크롤팬 생성

JScrollPane sp = new JScrollPane(pkg);

//스크롤팬에서 항목 수가 많으면 스크롤바가 생성되도록

sp.setVerticalScrollBarPolicy(JScrollPane.VERTICAL_SCROLLBA R_AS_NEEDED);

//JComboBox 목록에 입력될 갤럭시 시리즈 이름 문자열

String ph[] = {"Galaxy S", "Galaxy S2", "Galaxy Note", "Galaxy S3"};

JComboBox<String> cb = new JComboBox<String>(ph);

//JComboBox 목록에 일일이 항목을 삽입하는 방법 cb.addItem(new String("Galaxy Note2");

//JComboBox 필드를 편집 가능하도록 하는 방법 cb.setEditable(true);

//JComboBox 목록 중에서 4번째 항목을 선택하는 방법 cb.setSelectedIndex(3);

pan2.add(sp);

pan2.add(cb);

//패널의 배치관리를 가로로 이등분하기 위해 GridLayout 설정 JPanel p = new JPanel(new GridLayout(1,2));

p.add(pan1);

p.add(pan2);

//윈도의 기본 배치는 BorderLayout이며 add는 중앙에 삽입 add(p);

}

ListWin win = new ListWin("목록 선택을 위한 콘트롤");

} }

(48)

탭과 값 선택을 위한 콤포넌트

❖ JTabbedPane

▪

탭을 위한 컴포넌트

❖ JSlider

▪

구간 내의 값 선택을 위한 컴포넌트

48

(49)

JSlider(1)

❖ 눈금이 그려진 일정한 구간 내에서

▪

자유롭게 움직이는 손잡이(knob)를 이용하여 값을 선택할 수 있는 컨트롤

❖ 다양한 생성자 제공

49

(50)

Jslider(2)

❖ 슬라이더의 다양한 모양

▪

트랙(track)과 눈금(tick)의 표시 여부

▪

색상(forground), 방향(orientation)

▪

최소(minimum), 최대(maximum)

▪

초기값(value) 등

❖ 눈금

▪

주 눈금 간격(MajorTickSpacing): 값(labels)을 표시

▪

부 눈금 간격(MinorTickSpacing)

50

(51)

JTabbedPane

❖ 여러 탭(tab) 사이를 탭을 눌러 쉽게 이동할 수 있는 컨트롤

❖ 메소드

▪

add()와 addTab() : 새로운 탭을 추가

▪

insertTab() : 탭을 중간에 삽입

▪

remove(), removeTabAt(), removeAll() : 삭제

51

(52)

실습예제 9-15

❖ 탭을 세 개 만들어 각각 수평과 색상이 있는 슬라이더, 수직 슬라이더를 보이는 윈도

▪

결과

52

(53)

실습예제 9-15

53

import java.awt.Color;

import javax.swing.JLabel;

import javax.swing.JSlider;

import javax.swing.JTabbedPane;

public class SliderWin extends JFrame {

public SliderWin(String title) {

setSize(400, 200);

setTitle(title);

//패널 구성의 메소드 호출 makeSlider();

setVisible(true);

}

public void makeSlider() {

//JSlider의 객체(수평, 0에서 100까지이며 초기 설정은 평균인 50으로) 를 생성

JSlider sdr = new JSlider();

//JSlider의 객체(수평, 0에서 50까지이며 초기 설정은 10으로)를 생성 JSlider hSdr = new JSlider(0, 50, 10);

//JSlider의 눈금 그리기 설정 hSdr.setPaintTicks(true);

//JSlider의 주 눈금 간격 설정 hSdr.setMajorTickSpacing(10);

//JSlider의 주 눈금 글자 보이기 설정 hSdr.setPaintLabels(true);

JPanel p = new JPanel();

p.setLayout(new GridLayout(0, 1));

p.add(sdr); p.add(hSdr);

//JSlider의 객체(수평, 0에서 200까지이며 초기 설정은 20으로)를 생성 JSlider sdr1 = new JSlider(JSlider.HORIZONTAL, 0, 200, 20);

sdr1.setPaintTicks(true);

sdr1.setPaintTrack(true); //JSlider의 트랙 그리기 설정 sdr1.setMajorTickSpacing(50);//JSlider의 주 눈금 간격 설정 sdr1.setMinorTickSpacing(10);//JSlider의 부 눈금 간격 설정 sdr1.setPaintLabels(true);//JSlider의 주 눈금 글자 보이기 설 정

sdr1.setForeground(Color.blue);//JSlider의 눈금과 글자의 색 상 설정

//JSlider의 객체(수평, 0에서 100까지이며 초기 설정은 20으로)를 생성 JSlider vSdr = new JSlider(JSlider.VERTICAL, 0, 80, 30);

vSdr.setPaintTicks(true);

vSdr.setPaintTrack(false);

vSdr.setMajorTickSpacing(40);

vSdr.setMinorTickSpacing(20);

vSdr.setPaintLabels(true);

vSdr.setValue(30);

vSdr.setForeground(Color.red);

//JTabbedPane를 생성하여 탭패인을 생성 JTabbedPane tp = new JTabbedPane();

//"슬라이더" 이름으로 객체 p가 추가된된 탭을 생성 tp.add("슬라이더", p);

//"수직 슬라이더" 이름으로 객체 vSdr이 추가된 탭을 생성 tp.addTab("수직 슬라이더", vSdr);

//첫 번째 탭의 제목을 수정

tp.setTabComponentAt(0, new JLabel("수평 슬라이더 1"));

//두 번째 탭으로 새로운 탭을 추가하며, "색상 슬라이더"가 말 풍선으로 표시 tp.insertTab("수평 슬라이더 2", null, sdr1, "색상 슬라이더", 1);

add(tp);

}

SliderWin win = new SliderWin("슬라이더와 탭");

} }

(54)

54

(55)

[ Add your company slogan ]

Thank You !