그래픽 프로그래밍 (GUI - Graphic User Interface)

Presentation on theme: "그래픽 프로그래밍 (GUI - Graphic User Interface)"— Presentation transcript:

1 그래픽 프로그래밍 (GUI - Graphic User Interface)
강원대학교

2 핵심 요소 Component: 부품 Layout: component들을 배치하는 작업
Button, menu, slider 등 Layout: component들을 배치하는 작업 Layout manager를 이용함 Event 처리: 사용자 입력에 반응하도록 함 Button 클릭, menu 선택 등 강원대학교

3 부품 Components 강원대학교

4 AWT and Swing AWT Swing java.awt.* javax.swing.* Heavy-weight Componet
운영체제의 도움을 받아 컴포넌트를 그리므로 운영체제에 따라 다른 모양과 배치가 나타난다. Swing javax.swing.* Light-weight Componet 자바에서 스스로 컴포넌트를 그리므로 운영체제에 종속되지 않고 풍부한 기능을 제공한다. 강원대학교

5 AWT and Swing Button JButton Frame JFrame Color JColorChooser 강원대학교

6 Swing Components Visual Guide to Swing Components 강원대학교

7 Swing Components Visual Guide to Swing Components 강원대학교

8 Swing Components Visual Guide to Swing Components 강원대학교

9 Swing Components Visual Guide to Swing Components 강원대학교

10 import javax.swing.JFrame; public class ImageViewer1 {
public static void main(String[] args) { JFrame frame = new JFrame("ImageViewer"); frame.setSize(300, 200); frame.setVisible(true); } 강원대학교

11 Frame 구성 요소 Window controls Title Menu bar Content pane 강원대학교

12 import javax.swing.JFrame; public class ImageViewer2 { // 구성자
public ImageViewer2() { JFrame frame = new JFrame("ImageViewer"); frame.setSize(300, 200); frame.setVisible(true); } public static void main(String[] args) { new ImageViewer2(); 강원대학교

13 import javax.swing.JFrame;
public class ImageViewer3 extends JFrame { // ImageViewer3는 JFrame의 일종임 // 구성자 public ImageViewer3(String title) { super(title); setSize(300, 200); // this.setSize(300, 200) setVisible(true); // this.setVisible(true); } public static void main(String[] args) { new ImageViewer3("ImageViewer"); 강원대학교

14 import javax.swing.JFrame; public class ImageViewer4 {
private JFrame frame; // 인스턴스 필드 public ImageViewer4(){ // 구성자 makeFrame(); } private void makeFrame(){ frame = new JFrame("ImageViewer"); frame.setSize(300, 200); frame.setVisible(true); // 이후 슬라이드에서는 main 메소드를 생략할 것임... public static void main(String[] args) { new ImageViewer5(); 강원대학교

15 import java.awt.Container; import javax.swing.JFrame;
import javax.swing.JLabel; public class ImageViewer5 { private JFrame frame; public ImageViewer5(){ makeFrame(); } private void makeFrame(){ frame = new JFrame("ImageViewer"); frame.setSize(300, 200); Container contentPane = frame.getContentPane(); JLabel label = new JLabel("label - text image를..."); contentPane.add(label); frame.setVisible(true); 강원대학교

16 import java.awt.Container; import javax.swing.JFrame;
import javax.swing.JLabel; public class ImageViewer5 { private JFrame frame; public ImageViewer5(){ makeFrame(); } private void makeFrame(){ frame = new JFrame("ImageViewer"); frame.setSize(300, 200); JLabel label = new JLabel("label - text image를..."); frame.add(label); // 프레임에 넣으면 content pane에 들어간다. frame.setVisible(true); 강원대학교

17 import java.awt.Color; import java.awt.Container;
import javax.swing.JFrame; import javax.swing.JLabel; import javax.swing.border.LineBorder; public class ImageViewer6 { private JFrame frame; public ImageViewer6(){ makeFrame(); } private void makeFrame(){ frame = new JFrame("ImageViewer"); frame.setSize(300, 200); Container contentPane = frame.getContentPane(); JLabel label = new JLabel("label - text image를 ..."); label.setBorder(new LineBorder(Color.RED, 5)); // 라벨에 테두리 추가 contentPane.add(label); frame.setVisible(true); 테두리 굵기 프레임을 꽉 채우도록 라벨의 크기가 조절됨 강원대학교

18 import java.awt.Color; import java.awt.Container;
import javax.swing.JFrame; import javax.swing.JLabel; import javax.swing.border.LineBorder; public class ImageViewer6 { private JFrame frame; public ImageViewer6(){ makeFrame(); } private void makeFrame(){ frame = new JFrame("ImageViewer"); // frame.setSize(300, 200); // 주석처리! Container contentPane = frame.getContentPane(); JLabel label = new JLabel("label - text image를 ..."); label.setBorder(new LineBorder(Color.RED, 5)); contentPane.add(label); frame.pack(); // 라벨 크기에 맞춰 프레임을 조여줌 frame.setVisible(true); 강원대학교

19 import java.awt.Color; import java.awt.Container;
import javax.swing.JFrame; import javax.swing.JLabel; import javax.swing.border.LineBorder; public class ImageViewer8 { private JFrame frame; public ImageViewer8(){ makeFrame(); } private void makeFrame(){ frame = new JFrame("ImageViewer"); frame.setSize(300, 200); Container contentPane = frame.getContentPane(); JLabel label1 = new JLabel("label - text image를 보여줄 때 사용"); label1.setBorder(new LineBorder(Color.RED, 5)); JLabel label2 = new JLabel("두 번째 라벨"); contentPane.add(label1); contentPane.add(label2); frame.setVisible(true); 두 번째 라벨이 첫 번째 라벨 이에 있어 첫 번째 라벨이 보이지 않음 강원대학교

20 Adding menus 강원대학교

21 private void makeMenuBar(JFrame frame) {
JMenuBar menubar = new JMenuBar(); frame.setJMenuBar(menubar); // create the File menu JMenu fileMenu = new JMenu("File"); menubar.add(fileMenu); JMenuItem openItem = new JMenuItem("Open"); fileMenu.add(openItem); JMenuItem quitItem = new JMenuItem("Quit"); fileMenu.add(quitItem); } 강원대학교

22 Event 처리 Event Handling
강원대학교

23 이벤트 (Events) 이벤트 발생 버튼을 클릭할 때 텍스트필드에 문자를 타이핑할 때 콤보박스에서 아이템을 선택할 때
타이머가 타임아웃될 때, 등등... 버튼, 텍스트필드 등 GUI 콤포넌트들이 이벤트를 만들어 줌 (이 컴포넌트들이 event source임) 이벤트는 객체임 (java.awt.Event) 강원대학교

24 이벤트 (Events) 프로그래머는 많은 이벤트 중 관심 있는 이벤트에 대해서만 필요한 반응을 보이도록 프로그램 작성
특정 GUI 콤포넌트에서 발생하는 특정 이벤트에 대해 어떤 반응을 보이도록 하려면 적절한 이벤트 리스너(listener)를 만들어 이를 해당 콤포넌트에 등록해 줌 이벤트 리스너 = 이벤트 처리기 이벤트가 발생했을 때 어떤 동작을 할지를 정해줌 강원대학교

25 이벤트 소스와 이벤트 리스너 Event listener: Event source: 이벤트가 발생될 때 그 사실을 통보받는 객체
이벤트가 발생되었을 때 해야 할 작업이 이곳에 정의되어 있음 Event source: 어떤 컴포넌트에서 이벤트가 발생되면 그 컴포넌트에 등록된 모든 이벤트 리스너들에게 이벤트 발생 사실이 통보됨 컴포넌트에 이벤트 리스너를 등록해 주지 않으면 그 컴포넌트에서 이벤트가 발생하더라도 아무런 반응이 없음 Event Object Event Source Event Listener 강원대학교

26 이벤트 소스와 이벤트 리스너 이벤트가 여러 리스너에게 전달될 수 있다. 한 리스너가 여러 소스로부터 이벤트를 받을 수 있다.
강원대학교

27 강원대학교

28 EventListener의 예: ActionListener
버튼을 클릭하면 action event 발생 (버튼: 이벤트 소스) 이에 대해 반응을 보이게 하려면 ActionListener 객체를 버튼에 등록해 줌 (이 ActionListener 객체가 이벤트 처리기임) ActionListener 객체 = ActionListener 인터페이스를 구현한 객체 버튼 클릭에 따라 Action 이벤트가 발생하면 ActionListener의 actionPerformed 메소드가 실행됨 public interface ActionListener { void actionPerformed(ActionEvent event); } 강원대학교

29 actionPerformed(ActionEvent event);
콜백 (Callback) ActionListener 등록 actionPerformed(ActionEvent event); Button 호출 Callback Event 강원대학교

30 Output ActionListener 버튼을 클릭하면 Action 이벤트가 발생함!
버튼에 ActionEvent가 발생했을 때 ActionListener의 actionPerformed 메소드가 실행됨. 이 때 버튼에서 발생한 ActionEvent 객체가 인자로 전달됨. 강원대학교

31 버튼에 ActionListener를 등록
public class ButtonViewer { public static void main(String[] args) JFrame frame = new JFrame(); JButton button = new JButton("Click me!"); frame.add(button); button.addActionListener(new ClickListener()); frame.pack(); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setVisible(true); } 이벤트 처리기 (버튼에서 발생하는 Action 이벤트를 처리함) 요것이 ActonListener임 강원대학교

32 ActionListener(이벤트 처리기) 구현
import java.awt.event.ActionEvent; import java.awt.event.ActionListener; public class ClickListener implements ActionListener { public void actionPerformed(ActionEvent event) System.out.println("I was clicked."); } ClickListener 객체는 ActionListener 인터페이스를 구현하고 있음 (ClickListener 객체는 ActionListener임) ClickListener 객체를 이벤트 리스너로서 버튼에 등록해 주면 버튼 클릭 때마 다 ClickListenr의 actionPerformed 메소드가 실행됨 강원대학교

33 public class ButtonViewer{ public static void main(String[] args){ JFrame frame = new JFrame(); JButton button = new JButton("Click me!"); frame.add(button); class ClickListener implements ActionListener{ public void actionPerformed(ActionEvent event){ System.out.println("I was clicked."); } ActionListener listener = new ClickListener(); // 클래스 이용 button.addActionListener(listener); frame.pack(); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setVisible(true); 이렇게 하는 것도 가능! 클래스 선언 local inner class 강원대학교

34 예 2 ActionListener 강원대학교

35 local inner class JPanel에 부품들을 넣으면 부품들이 포개지지 않고 옆으로 늘어선다.
public class ButtonViewer{ public static void main(String[] args){ JFrame frame = new JFrame(); JPanel panel = new JPanel(); JButton button = new JButton("Click me!"); final JTextField textField = new JTextField(20); panel.add(button); panel.add(textField); frame.add(panel); class ClickListener implements ActionListener{ public void actionPerformed(ActionEvent event){ textField.setText("I was clicked."); } ActionListener listener = new ClickListener(); button.addActionListener(listener); frame.pack(); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setVisible(true); local inner class JPanel에 부품들을 넣으면 부품들이 포개지지 않고 옆으로 늘어선다. 강원대학교

36 그 local class를 포함하고 있는 메소드의 지역변수를 사용하려면 그 지역변수가 final로 선언되어 있어야 한다.
public class ButtonViewer{ public static void main(String[] args){ JFrame frame = new JFrame(); JPanel panel = new JPanel(); JButton button = new JButton("Click me!"); final JTextField textField = new JTextField(20); panel.add(button); panel.add(textField); frame.add(panel); class ClickListener implements ActionListener{ public void actionPerformed(ActionEvent event){ textField.setText("I was clicked."); } ... Local inner class 내에서 그 local class를 포함하고 있는 메소드의 지역변수를 사용하려면 그 지역변수가 final로 선언되어 있어야 한다. 강원대학교

37 local inner class를 사용하지 않는 경우
public class ButtonViewer{ public static void main(String[] args){ JFrame frame = new JFrame(); JPanel panel = new JPanel(); JButton button = new JButton("Click me!"); final JTextField textField = new JTextField(20); panel.add(button); panel.add(textField); frame.add(panel); ActionListener listener = new ClickListener(textField); button.addActionListener(listener); frame.pack(); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setVisible(true); } local inner class를 사용하지 않는 경우 강원대학교

38 ClickListener가 text field를 기억하고 있어야 한다.
public class ClickListener implements ActionListener{ ClickListener(JTextField tf){ textField = tf; } public void actionPerformed(ActionEvent event){ textField.setText("I was clicked."); JTextField textField; ClickListener가 text field를 기억하고 있어야 한다. 강원대학교

39 public class ButtonViewer{ public static void main(String[] args){ JFrame frame = new JFrame(); JPanel panel = new JPanel(); JButton button = new JButton("Click me!"); final JTextField textField = new JTextField(20); panel.add(button); panel.add(textField); frame.add(panel); ActionListener listener = new ActionListener() { public void actionPerformed(ActionEvent event){ textField.setText("I was clicked."); } }; button.addActionListener(listener); frame.pack(); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setVisible(true); 이렇게 하는 것도 가능! Anonymous inner class ActionListener 인터페이스를 구현하는 클래스를 선언하면서 동시에 객체 구성 클래스 이름 없음 강원대학교

40 Anonymous inner class ActionListener 인터페이스를 구현하는 클래스라는 선언
요것이 인터페이스 이름일 때 ActionListener listener = new ActionListener() { public void actionPerformed(ActionEvent event){ textField.setText("I was clicked."); } }; 파란색 부분이 메소드 몸체 (body) 강원대학교

41 Anonymous inner class MouseAdaptor 클래스를 확장하여 구현하는 클래스라는 선언 (서브클래스)
요것이 클래스 이름일 때 ActionListener listener = new MouseAdaptor() { public void mouseClicked(MouseEvent event){ textField.setText("I was clicked."); } }; 강원대학교

42 예 3 버튼을 클릭할 때마다 이자가 더해지고 잔액이 화면에 표시됨 강원대학교

43 리스너 구현 class AddInterestListener implements ActionListener { public void actionPerformed(ActionEvent event) { double interest = account.getBalance() * INTEREST_RATE / 100; account.deposit(interest); label.setText("balance=" + account.getBalance()); } } 강원대학교

44 File InvestmentViewer1.java
01: import java.awt.event.ActionEvent; 02: import java.awt.event.ActionListener; 03: import javax.swing.JButton; 04: import javax.swing.JFrame; 05: import javax.swing.JLabel; 06: import javax.swing.JPanel; 07: import javax.swing.JTextField; 08: 09: /** 10: This program displays the growth of an investment. 11: */ 12: public class InvestmentViewer1 13: { 14: public static void main(String[] args) 15: { 16: JFrame frame = new JFrame(); 17: 강원대학교

45 File InvestmentViewer1.java
18: // The button to trigger the calculation 19: JButton button = new JButton("Add Interest"); 20: 21: // The application adds interest to this bank account 22: final BankAccount account = new BankAccount(INITIAL_BALANCE); 23: 24: // The label for displaying the results 25: final JLabel label = new JLabel( 26: "balance=" + account.getBalance()); 27: 28: // The panel that holds the user interface components 29: JPanel panel = new JPanel(); 30: panel.add(button); 31: panel.add(label); : frame.add(panel); 33: 강원대학교

46 File InvestmentViewer1.java
34: class AddInterestListener implements ActionListener 35: { 36: public void actionPerformed(ActionEvent event) 37: { 38: double interest = account.getBalance() 39: * INTEREST_RATE / 100; 40: account.deposit(interest); 41: label.setText( 42: "balance=" + account.getBalance()); 43: } 44: } // inner class 이므로 account, label 사용 가능! 45: 46: ActionListener listener = new AddInterestListener(); 47: button.addActionListener(listener); 48: 49: frame.setSize(FRAME_WIDTH, FRAME_HEIGHT); 50: frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); 51: frame.setVisible(true); 52: } 강원대학교

47 File InvestmentViewer1.java
53: 54: private static final double INTEREST_RATE = 10; 55: private static final double INITIAL_BALANCE = 1000; 56: 57: private static final int FRAME_WIDTH = 400; 58: private static final int FRAME_HEIGHT = 100; 59: } 강원대학교

48 AddInterestListener 객체 actionPerformed() 메소드
등록 callback AddInterestListener 객체 actionPerformed() 메소드 재계산 및 디스플레이 강원대학교

49 예 4 JTextField 강원대학교

50 Processing Text Input class AddInterestListener implements ActionListener { public void actionPerformed(ActionEvent event) { double rate = Double.parseDouble(rateField.getText()); } } 강원대학교

51 File InvestmentViewer2.java
01: import java.awt.event.ActionEvent; 02: import java.awt.event.ActionListener; 03: import javax.swing.JButton; 04: import javax.swing.JFrame; 05: import javax.swing.JLabel; 06: import javax.swing.JPanel; 07: import javax.swing.JTextField; 08: 09: /** 10: This program displays the growth of an investment. 11: */ 12: public class InvestmentViewer2 13: { 14: public static void main(String[] args) 15: { 16: JFrame frame = new JFrame(); 17: 강원대학교

52 File InvestmentViewer2.java
18: // The label and text field for entering the //interest rate 19: JLabel rateLabel = new JLabel("Interest Rate: "); 20: 21: final int FIELD_WIDTH = 10; 22: final JTextField rateField = new JTextField(FIELD_WIDTH); 23: rateField.setText("" + DEFAULT_RATE); 24: 25: // The button to trigger the calculation 26: JButton button = new JButton("Add Interest"); 27: 28: // The application adds interest to this bank account 29: final BankAccount account = new BankAccount(INITIAL_BALANCE); 30: 31: // The label for displaying the results 32: final JLabel resultLabel = new JLabel( 33: "balance=" + account.getBalance()); 34: 강원대학교

53 File InvestmentViewer2.java
35: // The panel that holds the user interface components 36: JPanel panel = new JPanel(); 37: panel.add(rateLabel); 38: panel.add(rateField); 39: panel.add(button); 40: panel.add(resultLabel); 41: frame.add(panel); 42: 43: class AddInterestListener implements ActionListener 44: { 45: public void actionPerformed(ActionEvent event) 46: { 47: double rate = Double.parseDouble( 48: rateField.getText()); 49: double interest = account.getBalance() 50: * rate / 100; 51: account.deposit(interest); 강원대학교

54 File InvestmentViewer2.java
52: resultLabel.setText( 53: "balance=" + account.getBalance()); 54: } 55: } 56: 57: ActionListener listener = new AddInterestListener(); 58: button.addActionListener(listener); 59: 60: frame.setSize(FRAME_WIDTH, FRAME_HEIGHT); 61: frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); 62: frame.setVisible(true); 63: } 64: 65: private static final double DEFAULT_RATE = 10; 66: private static final double INITIAL_BALANCE = 1000; 67: 68: private static final int FRAME_WIDTH = 500; 69: private static final int FRAME_HEIGHT = 200; 70: } 강원대학교

55 Layout 자리배치 강원대학교

56 Component and Container
다른 컴포넌트를 담을 수 있는 그릇이 컨테이너이다. 컨테이너는 컴포넌트의 일종이다. 강원대학교

57 Layout manager 한정된 공간에 컴포넌트들을 적절히 배치해 준다. FlowLayout BorderLayout
GridLayout BoxLayout GridBagLayout. 강원대학교

58 FlowLayout 강원대학교

59 BorderLayout 강원대학교

60 GridLayout 강원대학교

61 BoxLayout Note: no component resizing. 강원대학교

62 Layout manager Container들은 나름대로의 기본 layout manager를 가지고 있다.
JFrame: BorderLayout JPanel: FlowLayout Layout manager를 임의로 설정할 수 있다. JPanel panel = new Jpanel(); panel.setLayout(new BorderLayout()); panel.add(component, BorderLayout.NORTH); 강원대학교

63 컨테이너 안에 컨테이너를 넣는다. 강원대학교

64 Dialogs (대화창) Modal dialogs block all other interaction.
Forces a response from the user. Non-modal dialogs allow other interaction. This is sometimes desirable. May be difficult to avoid inconsistencies. 강원대학교

65 JOptionPane standard dialogs
Message dialog Message text plus an OK button. Confirm dialog Yes, No, Cancel options. Input dialog Message text and an input field. Variations are possible. 강원대학교

66 A message dialog private void showAbout() {
JOptionPane.showMessageDialog(frame, "ImageViewer\n" + VERSION, "About ImageViewer", JOptionPane.INFORMATION_MESSAGE); } 강원대학교

67 끝 강원대학교