어서와 Java는 처음이지! 제8장 그래픽 사용자 인터페이스.

Presentation on theme: "어서와 Java는 처음이지! 제8장 그래픽 사용자 인터페이스."— Presentation transcript:

1 어서와 Java는 처음이지! 제8장 그래픽 사용자 인터페이스

2 그래픽 사용자 인터페이스 그래픽 사용자 인터페이스(Graphical User Interface, 간단히 GUI)는 컴포넌트들로 구성된다.

3 자바에서 GUI의 종류 AWT는 운영 체제가 제공하는 자원을 이용하여서 컴포넌트를 생성
AWT(Abatract Windows Toolkit) GUI 컴포넌트가 자바로 작성되어 있기 때문에 어떤 플랫폼에서도 일관된 화면을 보여줄 수 있다. SWING

4 AWT와 스윙

5 AWT와 SWING의 비교 AWT SWING

6 AWT와 스윙 컴포넌트 AWT 버전 스윙 버전 버튼 Button JButton 레이블 Label JLabel 리스트 List
JList ... 패스워드필드 없음 JPasswordField 슬라이더 JSlider

7 스윙

8 스윙 클래스 계층구조

9 스윙의 특징 스윙 GUI 컴포넌트 자바 2D API 데이터 전송
형식화된 텍스트 입력이나 패스워드 필드 동작과 같은 복잡한 기능들이 제공된다. 자바 2D API 그림이나 이미지, 애니메이션 기능을 제공한다. 교체가능한 룩앤필(Look-and-Feel) 지원 데이터 전송 자르기, 복사, 붙이기, 드래그앤 드롭 등의 데이터 전송 기능 제공 되돌리기(undo)와 되풀이(redo) 기능을 손쉽게 제공

10 스윙 패키지

11 중간 점검 문제 1. 그래픽 사용자 인터페이스를 구성하는 요소들을 무엇이라고 하는가? 2. AWT와 스윙의 차이점은 무엇인가?
3. 되돌리기, 복사 및 붙여넣기 등도 스윙에서 제공되는가?

12 컨테이너와 컴포넌트 기본 컴포넌트 컨테이너 컴포넌트
JButton, JLabel, JCheckbox, JChoice, JList, JMenu, JTextField, JScrollbar, JTextArea, JCanvas 등이 여기에 속한다. 컨테이너 컴포넌트 다른 컴포넌트를 안에 포함할 수 있는 컴포넌트로서 JFrame, JDialog, JApplet, JPanel, JScrollPane 등이 여기에 속한다.

13 컨테이너의 종류 최상위 컨테이너: 절대 다른 컨테이너 안에 포함될 수 없는 컨테이너를 의미한다. 프레임(JFrame), 다이알로그(JDialog), 애플릿(JApplet) 등이 여기에 해당된다. 일반 컨테이너: 다른 컨테이너 안에 포함될 수 있는 컨테이너로 패널(JPanel), 스크롤 페인(JScrollPane) 등을 의미한다.

14 GUI 작성 절차

15 프레임 생성 #1 import javax.swing.*; public class FrameTest {
public static void main(String[] args) { JFrame f = new JFrame("Frame Test"); f.setSize(300, 200); f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); f.setVisible(true); } JFrame의 객체 생성

16 Jframe을 상속하여서 MyFrame을 정의
프레임 생성 #2 import javax.swing.*; public class MyFrame extends JFrame { public MyFrame() { setSize(300, 200); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setTitle("MyFrame"); setVisible(true); } Jframe을 상속하여서 MyFrame을 정의 public class MyFrameTest { public static void main(String[] args) { MyFrame f = new MyFrame(); } MyFrame의 객체 생성

17 Jframe을 상속하여서 MyFrame을 정의
프레임 생성 #3 Jframe을 상속하여서 MyFrame을 정의 import javax.swing.*; public class MyFrame extends JFrame { public MyFrame() { setSize(300, 200); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setTitle("MyFrame"); setVisible(true); } public static void main(String[] args) { MyFrame f = new MyFrame(); main()이 MyFrame 안으로 이동

18 컴포넌트 생성과 추가 import javax.swing.*; import java.awt.FlowLayout;
public class MyFrame extends JFrame { public MyFrame() { setSize(300, 200); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setTitle("MyFrame"); setLayout(new FlowLayout()); JButton button = new JButton("버튼"); this.add(button); setVisible(true); } 배치 관리자 설정! 컴포넌트 생성 및 추가 public class MyFrameTest { public static void main(String[] args) { MyFrame f = new MyFrame(); }

19 JFrame 클래스 컨테이너는 컴포넌트들을 트리(tree) 형태로 저장한다. 최상위 컨테이너는 이 트리의 루트 노드가 된다.
최상위 컨테이너는 내부에 콘텐트 페인(content pane)을 가지고 있다. 여기에 화면에 보이는 컴포넌트를 저장한다. 최상위 컨테이너에는 메뉴바를 추가할 수 있다.

20 프레임의 속성 변경하기 프레임의 속성을 변경시키는 방법을 생각하여 보자. 조상 클래스들의 메소드도 사용할 수 있다!

21 조상 클래스 Component Container Window Frame JFrame
컴포넌트 클래스는 화면에 표시되어서 사용자와 상호 작용하는 시각적인 객체를 나타낸다. Container 내부에 다른 컴포넌트를 추가할 수 있는 기능을 제공한다. 예를 들어서 이 클래스의 add()를 사용하면 컨테이너 안에 컴포넌트를 추가할 수 있다. Window 경계선, 타이틀 바, 버튼을 가지고 있는 윈도우를 정의한다. Frame 자바 GUI 애플리케이션의 기초가 된다. JFrame Frame 클래스를 스윙의 출시에 맞추어 변경한 것이다.

22 중요한 메소드 setLocation(x, y) , setBounds(x, y, width, height), setSize(width, height) 프레임의 위치와 크기를 설정한다. setIconImage(IconImage) 윈도우 시스템에 타이틀 바, 태스크 스위처에 표시할 아이콘을 알려준다. setTitle() 타이틀 바의 제목을 변경한다. setResizable(boolean) 사용자가 크기를 조절할 수 있는지를 설정한다.

23 예제 public class MyFrame extends JFrame { public MyFrame() {
Toolkit kit = Toolkit.getDefaultToolkit(); Dimension screenSize = kit.getScreenSize(); setSize(300, 200); setLocation(screenSize.width / 2, screenSize.height / 2); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setTitle("MyFrame"); Image img = kit.getImage("icon.gif"); setIconImage(img); setLayout(new FlowLayout()); JButton button = new JButton("버튼"); this.add(button); setVisible(true); }

24 실행 결과

25 기초 컴포넌트 패널(panel) 레이블(label) 버튼(button) 텍스트 필드(text field)

26 패널 패널(panel)은 컴포넌트들을 포함하고 있도록 설계된 컨테이너 중의 하나이다

27 패널의 용도 예를 들어서 다음과 같이 화면을 2개로 나누어서 표시하고자 할 때 패널을 사용할 수있다.

28 레이블 레이블(Label)은 편집이 불가능한 텍스트를 표시.
(예) JLabel label = new JLabel(“안녕하세요?”);

29 텍스트 필드 텍스트 필드(text field)는 입력이 가능한 한 줄의 텍스트 필드를 만드는 데 사용

30 버튼 버튼은 사용자가 클릭했을 경우, 이벤트를 발생하여 원하는 동작을 하게 하는데 이용된다

31 버튼의 종류 JButton - 가장 일반적인 버튼이다. JCheckBox - 체크박스 버튼
JRadioButton - 라디오 버튼으로 그룹 중의 하나의 버튼만 체크할 수 있다.

32 배치 관리자(layout manager)
컨테이너 안의 각 컴포넌트의 위치와 크기를 결정하는 작업 [32/70]

33 상당히 다르게 보인다. 배치 관리자에 따라서 같은 애플리케이션도 상당히 다르게 보인다.

34 배치 관리자의 종류 FlowLayout GridLayout

35 배치 관리자의 종류 BorderLayout BoxLayout

36 FlowLayout 컴포넌트들을 왼쪽에서 오른쪽으로 버튼을 배치한다. 패널과 애플릿의 디폴트 배치 관리자이다.

37 BorderLayout BorderLayout은 5개의 영역으로 구분하고 각각의 영역에 컴포넌트를 배치
PAGE_START (또는 NORTH) PAGE_END (또는 SOUTH) LINE_START (또는 WEST) LINE_END (또는 EAST) CENTER

38 BorderLayout 클래스 생성자 또는 메소드 설명 BorderLayout(int hgap, int vgap)
컴포넌트 사이의 수평 간격 hgap과 수직 간격 vgap을 을 가지는 BorderLayout 객체 생성 setHgap(int) 컴포넌트 사이의 수평 간격 설정(단위는 픽셀) setVgap(int) 컴포넌트 사이의 수직 간격 설정

39 BorderLayout 예제 import java.awt.*; import javax.swing.*;
class MyFrame extends JFrame { public MyFrame() { setTitle("BorderLayoutTest"); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); // 프레임은 디폴트로 BorderLayout 이므로 사실은 불필요 setLayout(new BorderLayout()); // 버튼을 추가한다. add(new JButton("Center"), BorderLayout.CENTER); add(new JButton("Line Start"), BorderLayout.LINE_START); add(new JButton("Line End"), BorderLayout.LINE_END); add(new JButton("Page Start"), BorderLayout.PAGE_START); add(new JButton("Page End"), BorderLayout.PAGE_END); pack(); setVisible(true); }

40 GridLayout GridLayout은 컴포넌트들을 격자 모양으로 배치한다.

41 GridLayout 클래스 생성자 설명 GridLayout(int rows, int cols)
rows 행과 cols 열을 가지는 GridLayout 객체를 생성한다. 만약 rows나 cols가 0이면 필요한 만큼의 행이나 열이 만들어진다. GridLayout(int rows, int cols, int hgap, int vgap) rows 행과 cols 열을 가지는 GridLayout 객체를 생성한다. hgap과 vgap은 컴포넌트 사이의 수평 간격과 수직 간격으로 단위는 픽셀이다.

42 GridLayout 예제 import java.awt.*; import javax.swing.*;
class MyFrame extends JFrame { public MyFrame() { setTitle("GridLayoutTest"); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setLayout(new GridLayout(0, 3)); // 3개의 열과 필요한 만큼의 행 add(new JButton("Button1")); add(new JButton("Button2")); add(new JButton("Button3")); add(new JButton("B4")); add(new JButton("Long Button5")); pack(); setVisible(true); }

43 절대 위치 예제 import java.awt.*; import java.awt.event.*;
import javax.swing.*; class MyFrame extends JFrame { JButton b1; private JButton b2, b3; public MyFrame() { setTitle("Absolute Position Test"); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setSize(300, 200); JPanel p = new JPanel(); p.setLayout(null); b1 = new JButton("Button #1"); p.add(b1); b2 = new JButton("Button #2"); p.add(b2); b3 = new JButton("Button #3"); p.add(b3);

44 절대 위치 예제 b1.setBounds(20, 5, 95, 30); b2.setBounds(55, 45, 105, 70);
add(p); setVisible(true); } public class AbsoluteTest { public static void main(String args[]) { MyFrame f=new MyFrame();

45 Q & A