No Slide Titlecontents.kocw.net/.../2014/myongji/leechungki/12.pdf · 2016-09-09 · 15 예제프로그램3: 패널포함프레임만들기 알고리즘 1. “패널포함프레임”라는제목을갖는프레임객체를만든다

그래픽 사용자 인터페이스

이 충기

명지대학교

컴퓨터공학과

2

그래픽 사용자 인터페이스

• 그래픽 사용자 인터페이스(GUI)는 사람과컴퓨터간의 상호작용을 위한 사람-컴퓨터인터페이스(HCI)중의 하나이다.

• GUI는 사용자가 컴퓨터 화면 상에 있는객체들과 상호작용을 하는 인터페이스이다.

• 오늘날 사실상 거의 모든 컴퓨터 플랫폼에서GUI가 사용되고 있다.

3

GUI 프로그래밍

• GUI 프로그램은 실행시키면 메뉴가 있는 창이뜨고 창에는 아이콘, 단추, 제어 요소 등이있다.

• 입력은 마우스나 키보드를 통해 하고 출력은화면을 통해 본다.

• 이러한 프로그램을 작성하는 것이 GUI 프로그래밍이다.

• 자바에서 GUI 프로그래밍을 지원하기 위해모든 플랫폼에서 공통적으로 제공하는최소한의 기능만을 지원하는 GUI 도구 모음을제공한다.

4

자바의 GUI 지원 도구 모음

• GUI 응용을 지원하기 위한 클래스들은 주로java.awt 패키지와 javax.swing 패키지에 있다.

• java.awt 패키지는 추상 윈도우 도구모음(AWT)을 포함하는 최초의 자바 GUI 패키지이다.

• 스윙 패키지는 AWT의 컴포넌트들보다 더융통성이 있는 컴포넌트들을 포함한다.

• GUI 프로그램을 작성하기 위해서는 AWT 패키지와 스윙 패키지 둘 다 필요로 한다.

5

스윙

• 스윙은 플랫폼 고유의 컴포넌트와 연계되지않은 경량급의 빠른 컴포넌트들로 구성된GUI 도구 모음이다.

• 모든 새로운 스윙 컴포넌트들과 클래스들은javax.swing 패키지에 정의되어 있다.

• 스윙을 프로그램에서 사용하기 위해서는다음과 같은 import 문을 사용해야 한다:

import javax.swing.*;

6

스윙의 기본 구성 요소

• 컴포넌트: 정보를 화면에 보여 주거나사용자가 프로그램과 어떤 방식으로상호작용하게 하는 화면상의 요소이다.

예: 단추, 레이블, 텍스트 필드

• 컨테이너: 다른 컴포넌트들을 포함하는 특별한유형의 컴포넌트이다.

예: 프레임, 패널

• 화면 구성 관리자: 컨테이너 내에서 컴포넌트의위치를 결정한다.

7

컨테이너

• 다른 컴포넌트들을 포함하고 조직하는 특별한유형의 컴포넌트이다.

• 컨테이너는 중량급 혹은 경량급으로 분류될 수있다.

• 중량급 컨테이너는 운영체제에 의해 관리된다.

예: 프레임

• 반면에 경량급 컨테이너는 자바 프로그램에의해 관리된다.

예: 패널

8

프레임

• 프레임은 GUI 기반 자바 응용을보여주기 위해 사용되는컨테이너이다.

• 프레임은 제목 막대를 가진 별도의창으로 보여 진다. 화면상에서위치를 바꿀 수 있고 크기를 조절할수 있다.

예제 프로그램 1: 기본 프레임 만들기


public class BasicFrameDemo {

public static void main(String[] args) {

// 기본 프레임 객체를 만든다

JFrame frame = new JFrame( );

// 프레임을 화면에 보여지게 한다

frame.setVisible(true);

}

}

9

예제 프로그램 1: 실행 결과

10

아래와 같은 아주 작은 기본 JFrame객체가 화면의 좌측 상단 모서리에보여진다.

예제 프로그램 2: 기본 프레임 수정

기본 프레임에 다음 기능들을 추가한다:

1. 프레임의 제목을 ‘간단한 프레임’으로한다.

2. 프레임의 크기는 가로와 세로를 각각200픽셀과 100픽셀로 한다.

3. 프레임의 좌측 상단 모서리가 화면 상의좌표 (50,50)에 위치하게 한다.

4. 프레임의 우측 상단에 있는 X 표시의닫기를 클릭하면 프로그램이 종료된다.

11

예제 프로그램 2: 기본 프레임 수정

// 간단한 프레임을 만든다


public class FrameDemo extends Jframe {

public FrameDemo ( ) {

setTitle("간단한 GUI 프로그램"); // 기능 1

setSize(200, 100); // 기능 2

setLocation(50, 50); // 기능 3

setDefaultCloseOperation(EXIT_ON_CLOSE); // 기능 4

}


FrameDemo myFrame = new FrameDemo( );

myFrame.setVisible(true);

}

}12


13

14

패널

• 패널은 보여 지기 위해서 또 다른컨테이너에 더해 져야 한다.

• 패널의 주요 역활은 GUI 안에 있는 다른컴포넌트들을 구성하는 것을 돕는것이다.

• 패널에 컴포넌트들을 추가하기 위해우리는 add() 메소드를 사용한다.

15

예제 프로그램 3: 패널 포함 프레임 만들기

알고리즘

1. “패널 포함 프레임”라는 제목을 갖는 프레임 객체를 만든다.

2. 프레임 객체의 오른쪽 모서리에 있는 ‘닫기’ 단추를 누르면프로그램이 종료되게 한다.

3. 패널 객체를 만든다.

4. 패널 객체의 바탕색을 초록색으로 한다.

5. 패널 객체의 크기를 가로 200 픽셀, 세로 100 픽셀로 정한다.

6. 패널 객체를 화면에 보여 주기 위해 프레임 객체의 ContentPane객체에 추가한다.

7. 프레임 객체의 크기를 패널 객체를 포함하기 위해 적절하게정한다.

8. 프레임 객체가 화면에 보여지게 한다.

16

예제 프로그램 3: 패널 포함 프레임 만들기

import java.awt.*;


public class JFrameDemo {


JFrame frame = new JFrame("패널 포함 프레임"); // 과정 1

frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); // 과정 2

JPanel panel = new JPanel(); // 과정 3

panel.setBackground(Color.green); // 과정 4

panel.setPreferredSize(new Dimension(200, 100)); // 과정 5

frame.getContentPane().add(panel); // 과정 6

frame.pack(); // 과정 7

frame.setVisible(true); // 과정 8

}

}

17


18

컴포넌트

• 스윙 컴포넌트들은 AWT 컴포넌트들의기능을 향상한 것이거나 새로이 추가된것이다.

• 스윙 컴포넌트들은 그래픽스를지원한다.

• 모든 스윙 컴포넌트는 paintComponent메소드를 가진다.

• 예: 레이블, 단추, 텍스트 필드, 체크박스

19

레이블

• 레이블(label)은 한 줄의 텍스트를 보여주는GUI 컴포넌트이다.

• 레이블은 대개 정보를 보여주거나 GUI 안에 있는 다른 컴포넌트들을 식별하기위해 사용된다.

• 레이블은 JLabel 클래스에 의해 정의된다.

• 레이블은 이미지를 보여 줄 수 있다.

20

단추

• 단추(button)는 사용자가 마우스를누르면 동작을 시작하는 컴포넌트이다.

• 단추는 JButton 클래스에 의해 정의된다.

• 단추는 눌러질 때 Action Event를발생시킨다.

21

텍스트 필드

• 텍스트 필드(text field)는 사용자가 한 줄의입력을 하는 것을 허락하는 컴포넌트이다.

• 텍스트 필드는 JTextField에 의해 정의된다.

• 커서가 텍스트 필드 안에 있을 때 Enter 키를누르면 Action Event을 발생시킨다.

22

체크박스

• 체크박스는 마우스를 사용하여 ON이나OFF 상태중의 하나를 선택하게 하 는단추이다.

• 체크박스는 JCheckBox 클래스에 의해정의된다.

• 체크박스는 상태가 바뀔 때마다 Item

Event가 발생된다.

23

라디오 단추

• 라디오 단추는 한번에 한 단추만 선택될 수 있는 단추들의그룹이다.

• 한 그룹에서 한 라디오 단추가 선택될 때 현재 ON 상태에있는 라디오 단추는 OFF 상태로 바뀐다.

• 함께 동작할 라디오 단추들의 그룹을 정의하기 위해 각라디오 단추는 ButtonGroup 객체에 더해진다.

• 라디오 단추는 JRadioButton 클래스에 의해 정의된다.

• 라디오 단추는 Action 사건을 일으킨다.

콤보박스

• 콤보박스는 사용자가 ‘아래로 내리기(drop down)’메뉴로부터 여러 선택 항목들 중의 하나를선택하게 한다.

• 사용자가 마우스를 사용하여 콤보박스를 누를 때선택 항목들의 목록이 보여진다.

• 사용자가 이 항목들 중 하나를 선택하면 그 항목이보여진다. 콤보박스는 JComboBox클래스에 의해정의된다.

24

화면 구성 관리자

• 화면 구성 관리자는 컴포넌트들이컨테이너 안에 어떻게 배치되는지를정하는 객체이다.

• 모든 컨테이너는 기본 화면 구성관리자를 가진다.

• 그러나 우리는 화면 구성 관리자를명확히 지정할 수 있다.

25

자바의 화면 구성관리자

26

AWT에서 정의

스윙에서 정의

Flow Layout

Border Layout

Card Layout

Grid Layout

GridBag Layout

Box Layout

Overlay Layout

화면 구성관리자

• 각 화면 구성 관리자는 컴포넌트들을어떻게 배치할 지를 정하는 자신만의특별한 규칙들을 가지고 있다.

• 일부 화면 구성 관리자는 한 컴포넌트의선호하는 크기 혹은 정렬에 주의를기울인다. 반면에 다른 관리자들은 그렇지않다.

• 화면 구성 관리자는 컴포넌트들이컨테이너에 더해질 때와 컨테이너의크기가 변경될 때 화면 구성을 조정하려고시도한다.

27

화면 구성관리자

• 한 컨테이너의 화면 구성 관리자를변경하기 위해 setLayout 메소드를사용한다.

• 다음은 패널의 화면 구성 관리자를BorderLayout로 정하는 코드이다:

JPanel panel = new JPanel();

panel.setLayout(new BorderLayout());

28

Flow Layout 관리자

• Flow Layout 관리자는 한 줄에 가능한많은 컴포넌트들을 배치한다. 한 줄이다 채워지면 다음 줄로 자동적으로넘어간다.

• 이 관리자는 컴포넌트들을 각 줄에가운데 정렬로 배치하게 기본설정되어 있다. 그러나 왼쪽 정렬이나오른쪽 정렬로 바꿀 수 있다.

29

예제 프로그램 4: Flow Layout

30

import java.awt.*;


public class FlowLayoutDemo {


JFrame fr = new JFrame("Flow 화면 구성 관리자");

Container cont = fr.getContentPane();

// Content Pane의 화면 구성 관리자로 FlowLayout를 선택한다cont.setLayout(new FlowLayout());

// 컴포넌트들을 순서대로 Content Pane에 추가한다cont.add(new JButton("White")); cont.add(new JButton("Green"));

cont.add(new JButton("Red")); cont.add(new JButton("Yellow"));

cont.add(new JButton("Black"));

// 프레임의 크기를 적절하게 정한 후 보이게 한다fr.pack();

fr.setVisible(true);

} }


31

주: 창의 폭을 줄이면 5 개의 단추가 한 줄에 다 들어가지않으므로 다음과 같이 두 행에 걸쳐 보여 진다.

BorderLayout 관리자

• BorderLayout 관리자는 다음과 같이 화면을North, South, East, West 및 Center 등의 다섯개의 독립적인 영역으로 나눈다.

32

North

South

Center EastWest

BorderLayout 관리자

• 각 영역은 하나의 컴포넌트만을 보여 줄 수있다.

• 각 영역은 포함하는 컴포넌트를 수용하기위해서 필요한 만큼 확장된다.

• 한 영역에 어떠한 컴포넌트도 포함되지않는다면 그 영역은 전체 구성에서 어떠한공간도 차지하지 않는다. 대신에 Center 영역이 그 영역으로 확장된다.

33

예제 프로그램 5: BorderLayout

import java.awt.*; import javax.swing.*;

public class BorderLayoutDemo {


JFrame fr = new JFrame("Border 화면 구성 관리자");


// Content Pane의 화면 구성 관리자로 BorderLayout를 선택한다

cont.setLayout(new BorderLayout());

// 컴포넌트들을 Content Pane의 적절한 위치에 추가한다

cont.add(new JButton("White"), BorderLayout.SOUTH);

cont.add(new JButton("Green"), BorderLayout.WEST);

cont.add(new JButton("Red"), BorderLayout.CENTER);

cont.add(new JButton("Yellow"), BorderLayout.EAST);

cont.add(new JButton("Black"), BorderLayout.NORTH);

// 프레임의 크기를 적절하게 정한 후 보이게 한다

fr.pack();

fr.setVisible(true); } }

34


35

Grid Layout 관리자

• 이 관리자는 화면을 여러 행과 여러 열의 격자형영역들로 나눈다.

• 예를 들면, 화면을 4 행과 3 열로 나누기 위해서다음과 같이 한다:

setLayout(new GridLayout(4, 3));

• 각 영역은 한 컴포넌트만을 포함한다.

• 컴포넌트들이 컨테이너에 행 별로 추가한다. 같은행 내에서는 열 별로 추가한다.

36

예제 프로그램 6: Grid Layout

import java.awt.*; import javax.swing.*;

public class GridLayoutDemo {


JFrame fr = new JFrame("Grid 화면 구성 관리자");


// Content Pane의 화면 구성 관리자로 GridLayout를 선택한다

cont.setLayout(new GridLayout(2, 3));

// 컴포넌트들은 추가하는 순서대로 위치가 정해진다

cont.add(new JButton("White")); cont.add(new JButton("Green"));

cont.add(new JButton("Red")); cont.add(new JButton("Yellow"));

cont.add(new JButton("Black"));

// 프레임의 크기를 적절하게 정한 후 보이게 한다

fr.pack();

fr.setVisible(true);

} }37


38

카드 화면 구성 관리자

• CardLayout 관리자는 인터페이스를한 번에 한 장씩 나타내는 일련의카드처럼 다룰 수 있다.

• 예를 들면, CardLayout 관리자를사용하는 세 개의 패널이 있는프레임을 고려하라. 이 프레임의 현패널을 마우스로 누르면 그 다음패널로 넘어간다.

39

Box 화면 구성 관리자

• Box 화면 구성 관리자는 컴포넌트들을 한행에 수평적으로 배치하거나 혹은 한 열에수직적으로 배치한다.

• 컨테이너에 컴포넌트들을 추가할 때추가하는 순서대로 왼쪽에서 오른쪽으로혹은 위에서 아래로 위치가 정해진다.

• 다른 화면 구성 관리자와 결합하여 아주복잡한 화면 구성을 할 수 있다.

40

화면 구성 예제

우리는 다음과 같은 화면 구성을 갖는 프레임을만들고자 한다 .

41

Label One

Label Two

Label Three

Label Four

Button Two Button Three

TextArea1

Button One


일반적으로 화면을 구성하기 위해서해야 할 일은 다음과 같다:

1. 종이 위에 화면 구성도를 그린다.

2. 화면의 컴포넌트들을 나타내는객체 변수들을 선언한다.

3. 컨테이너들을 중첩되게 사용하여컴포넌트들을 적절히 배치한다.

42


43

Label One

Label Two

Label Three

Label Four


TextArea1

Button One

(점선은 화면 위에 실제로 보이지 않고 스케치를 위해 유용하여사용한 것이다 )

첫 번째 단계: 종이 위에 화면 구성도를 그린다


두 번째 단계: 여러 컴포넌트들의 객체 변수들을선언한다

JTextArea textArea1 = new JTextArea();

JLabel label1 = new JLabel("Label One");

JLabel label2 = new JLabel("Label Two");

JLabel label3 = new JLabel("Label Three");

JLabel label4 = new JLabel("Label Four");

JButton button1 = new JButton("Button One");

JButton button2 = new JButton("Button Two");

JButton button3 = new JButton("Button Three");

44


세 번째 단계: 중첩된 컨테이너들을 사용하여 컴포넌트들을배치한다

• 전체 디자인을 위해 하나 이상의 화면구성 관리자들을사용하는 것을 고려한다. 이 예제에서는 화면이 크게 네부분으로 나누어지므로 GridLayout 관리자를 사용하는것으로 충분하다.

• 프레임 자체도 컨테이너이다. 그 사실을 염두에 두고 화면공간을 적절하게 나눈다.

• 이 디자인의 경우는 주된 컨테이너가 4 구역으로나누어진다. 각 구역은 같은 크기이다.

• 따라서 GridLayout 관리자를 사용하고 2행 2열의 GridLayout

객체를 다음과 같이 만든다 :

setLayout(new GridLayout(2,2))

45


GridLayout의 첫 번째 구역은 TextArea 컴포넌트만을포함한다. textArea1이라는 객체 변수를 첫 번째 구역에할당하기 위해 다음과 같이 한다 :

46

add (textArea1);

Label One

Label Two

Label Three

Label Four


TextArea1

Button One


47

GridLayout의 두 번째 구역은 두 개의 레이블을 포함한다. 우리는새로운 패널을 만들고 그 패널을 둘로 나누고 각각에 한 레이블을

포함시킨다

// 새 패널을 만든다JPanel panel1 = new JPanel();

// panel1을 GridLayout의// 다음 위치에 추가 한다add(panel1);

// panel1을 2행 1열의 Grid로// 나눈다panel1.setLayout(new GridLayout(2,1));

// 두 레이블들을 panel1에 추가 한다panel1.add(label1); // 패널의 첫 번째 행에 추가panel1.add(label2); // 패널의 두 번째 행에 추가

Label One

Label Two

Label Three

Label Four


TextArea1

Button One


48

GridLayout의 세 번째 구역은 아무것도 포함하지 않는다.

빈 패널을 그 공간에 포함시킨다.

add (new JPanel());

Label One

Label Two

Label Three

Label Four


TextArea1

Button One


49

GridLayout의 네 번째 구역은 여러 컴포넌트들을 포함한다. 한 공간마다단지 하나의 컴포넌트만이 포함되기 때문에 우리는 그 공간을 한 패널로

선언하고 그 패널을 다시 GridLayout를 이용하여 4행 1열로 나눈다

// 두 번째 패널을 만든다JPanel panel2 = new JPanel();

// panel2를 다음 위치에 추가 한다add(panel2);

// panel2를 4행 1열의 Grid로// 나눈다panel2.setLayout(new GridLayout(4,1));

// 컴포넌트들을 네 행에 순서대로// 추가 한다panel2.add(label3);

panel2.add(button1);

panel2.add(label4);

Label One

Label Two

Label Three

Label Four


TextArea1

Button One


50

그러나 panel2의 4 번째 행은 두 개의 컴포넌트가 들어가야 한다.

따라서 두 개의 단추를 포함시키는 패널인 panel3를 만들고

그 패널을 panel2에 포함시킨다. 그리고 panel3를 1행 2열의 Grid로 나눈다

// 새 패널인 panel3을 만든다JPanel panel3 = new JPanel();

// panel3를 panel2에 추가한다panel2.add(panel3);

// panel3를 1행 2열의 Grid로 나눈다panel3.setLayout(new GridLayout(1,2));

// 단추들을 panel3에 추가 한다panel3.add(button2);

panel3.add(button3);

Label One

Label Two

Label Three

Label Four


TextArea1

Button One


51

Label One

Label Two

Label Three

Label Four


TextArea1

Button One

결과 화면:

52

요약

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

• 스윙

• 컨테이너

• 컴포넌트

• 화면 구성 관리자

• 화면 구성 예제

Documents

No Slide Titlecontents.kocw.net/.../2014/myongji/leechungki/12.pdf · 2016-09-09 · 15 예제프로그램3: 패널포함프레임만들기 알고리즘 1. “패널포함프레임”라는제목을갖는프레임객체를만든다