PowerPoint 프레젠테이션

Transcription

1 Graphical User Interface 배효철 1

2 목차 자바의 GUI AWT와 Swing 패키지 Swing 클래스의특징 컨테이너와컴포넌트 Swing GUI 만들기 컨테이너와배치 2

3 자바의 GUI GUI 목적 그래픽이용, 사용자에게이해하기쉬운모양으로정보제공 사용자는마우스나키보드를이용하여쉽게입력 자바 GUI 특징 강력한 GUI 컴포넌트제공 쉬운 GUI 프로그래밍 자바의 GUI 프로그래밍방법 GUI 컴포넌트와그래픽이용 AWT 패키지와 Swing 패키지에제공되는메카니즘이용 AWT - java.awt 패키지 Swing - javax.swing 패키지 3

4 AWT 와 Swing 패키지 AWT(Abstract Windowing Toolkit) 자바가처음나왔을때함께배포된 GUI 라이브러리 java.awt 패키지 native( 운영체제 ) 와응용프로그램사이의연결라이브러리 중량컴포넌트 (Heavy weight components) AWT 컴포넌트는 native(peer) 에의존적임 OS 의도움을받아야화면에출력되며동작하는컴포넌트. 운영체제에많은부담. 오히려처리속도는빠름 4

5 AWT 와 Swing 패키지 Swing( 스윙 ) AWT 기술을기반으로작성된자바라이브러리 모든 AWT 기능 + 추가된풍부하고화려한고급컴포넌트 AWT 컴포넌트에 J자가덧붙여진이름의클래스 그외 J 자로시작하는클래스 순수자바언어로구현, JDK 1.1 부터 - javax.swing 패키지 Swing 컴포넌트는 native(peer 혹은운영체제 ) 에의존하지않음 경량컴포넌트 (Light weight components) 5

6 스윙컴포넌트예시 JButton JCheckBox JRadioButton JSlider JTextField JPasswordField JSpinner JTextArea JComboBox JList 6

7 스윙컴포넌트예시 JProgressBar JToolTip JMenu JScrollPane JDialog JApplet JFrame 7

8 스윙컴포넌트예시 JTable 8 JTree JEditorPane and JTextPane

9 스윙컴포넌트예시 JToolBar JSplitPane JTabbedPane 9

10 Swing 으로만든 GUI 샘플 JButton JLabel JTextField 프레임윈도우닫기버튼 JMenu JToolBar JFrame JMenuBar JComboBox JList JLabel JScrollPane JSplitPane 10

11 GUI 라이브러리계층구조 Object Font FontMetrics Component Dimension Color Graphics AWT 클래스 Button Label TextComponent Container List Canvas Scrollbar Panel Window Checkbox Choice Applet Frame Dialog Swing 클래스 JComponent JApplet JFrame JDialog JLabel JList JComboBox JSlider JTextComponent AbstractButton JScrollBar JPanel JLayeredPane JEditorPane JTextField JTextArea JOptionPane JTabbedPane JSplitPane JSeparator JRootPane JToolBar JPasswordField JMenuItem JButton JToggleButton JMenuBar JToolTip JPopupMenu JFileChooser JMenu JCheckBox JColorChooser JTree JTable JTableHeader JCheckBoxMenuItem JRadioButton JProgressBar JSpinner JScrollPane JInternalFrame JRadioButtonMenuItem 11

12 Swing 클래스의특징 클래스이름이 J 자로시작 화려하고다양한컴포넌트로쉽게 GUI 프로그래밍 스윙컴포넌트는 2 가지유형 JComponent 는상속받는클래스 대부분의스윙컴포넌트 AWT 의 Container 를상속받는몇개의클래스 JApplet, JDialog, JFrame 등 JComponent 매우중요한추상클래스 스윙컴포넌트의공통적인속성구현 new JComponent() 인스턴스를생성할수없음 AWT 의 Component 를상속받음 12

13 컨테이너와컴포넌트 컨테이너 다른컴포넌트를포함할수있는 GUI 컴포넌트 java.awt.container 를상속받음 다른컨테이너에포함될수있음 AWT 컨테이너 Panel, Frame, Applet, Dialog, Window Swing 컨테이너 최상위컨테이너 JPanel JFrame, JApplet, JDialog, Jwindow 다른컨테이너에속하지않고독립적으로존재가능한컨테이너 스스로화면에자신을출력하는컨테이너 JFrame, JDialog, JApplet 모든컴포넌트는컨테이너에포함되어야화면에출력가능 13

14 컨테이너와컴포넌트 컴포넌트 컨테이너에포함되어야화면에출력될수있는 GUI 객체 모든 GUI 컴포넌트의최상위클래스 java.awt.component 스윙컴포넌트의최상위클래스 javax.swing.jcomponent 14

15 컨테이너와컴포넌트의포함관계 JLabel JTextField JLabel JLabel JCheckBox JCheckBox JTextField JPanel JPanel JButton JPanel JFrame( 최상위컨테이너 ) 스윙의컨테이너와컴포넌트의포함관계 스윙 GUI 프로그램 15

16 스윙 GUI 프로그램만들기 1. 프레임만들기 2. 프레임에스윙컴포넌트붙이기 3. main() 메소드작성 스윙프로그램을작성하기위한 import 문 import java.awt.*; // 그래픽처리를위한클래스들의경로명 import java.awt.event.*; // AWT 이벤트사용을위한경로명 import javax.swing.*; // 스윙컴포넌트클래스들의경로명 import javax.swing.event.*; // 스윙이벤트를위한경로명 16

17 스윙프레임 모든스윙컴포넌트를담는최상위 GUI 컨테이너 JFrame 을상속받아구현 컴포넌트가화면에보이려면스윙프레임에부착되어야함 프레임을닫으면프레임내의모든컴포넌트가보이지않게됨 스윙프레임 (JFrame) 기본구성 프레임 스윙프로그램의기본틀 메뉴바 메뉴들이부착되는공간 컨텐트팬 GUI 컴포넌트들이부착되는공간 타이틀바를가진 Frame 메뉴바 Menu Bar JFrame Frame 17 컨텐트팬 : 화면에출력될모든컴포넌트들이부착되는공간 Content Pane

18 프레임만들기 타이틀 300 픽셀 300 픽셀 18

19 프레임만들기 두가지방법 main() 메소드에서 JFrame 객체를생성 확장성, 융통성결여 import javax.swing.*; JFrame 을상속받은프레임클래스이용 main() 은단순히프레임객체를생성하는역할 import javax.swing.*; public class MyApp { public static void main(string [] args) { JFrame f = new JFrame(); f.settitle(" 첫번째프레임 "); f.setsize(300,300); f.setvisible(true); 방법 1. main() 메소드에서 JFrame 객체생성 추천 public class MyFrame extends JFrame { MyFrame() { settitle(" 첫번째프레임 "); setsize(300,300); setvisible(true); public static void main(string [] args) { MyFrame mf = new MyFrame(); 방법 2. JFrame 을상속받은프레임클래스이용 19

20 main() 의위치 추천 import javax.swing.*; public class MyFrame extends JFrame { MyFrame() { settitle(" 첫번째프레임 "); setsize(300,300); setvisible(true); public static void main(string [] args) { MyFrame mf=new MyFrame(); main() 을프레임클래스내의멤버로작성 import javax.swing.*; class MyFrame extends JFrame { MyFrame() { settitle(" 첫번째프레임 "); setsize(300,300); setvisible(true); public class MyApp { public static void main(string [] args) { MyFrame mf = new MyFrame(); main() 을가진다른클래스 MyApp 작성 20

21 프레임에컴포넌트붙이기 타이틀 타이틀바에부착 // JFrame 의생성자이용 JFrame frame = new JFrame(" 타이틀문자열 "); // JFrame 의 settitle() 메소드호출 frame.settitle(" 타이틀문자열 "); JFrame frame = new JFrame(); 컨텐트팬알아내기 Container contentpane = frame.getcontentpane(); 스윙컴포넌트 컨텐트팬에부착 컨텐트팬에컴포넌트달기 JFrame frame = new JFrame(); JButton b = new JButton("Click"); Container c = frame.getcontentpane(); c.add(b); 컨텐트팬변경 JPanel p = new JPanel(); frame.setcontentpane(p); 21

22 TIP!! Tip. 컨텐트팬에대한 JDK1.5 이후의변경사항 JDK 1.5 이전 프레임의컨텐트팬을알아내어반드시컨텐트팬에컴포넌트부착 JFrame frame = new JFrame(); JButton b = new JButton("Click"); Container c = frame.getcontentpane(); c.add(b); // 버튼 b 를컨텐트팬에부착 JDK 1.5 이후 프레임에컴포넌트를부착하면프레임이대신컨텐트팬에부착 JFrame frame = new JFrame(); JButton b = new JButton("Click"); frame.add(b); // 컨텐트팬에대신버튼 b 부착 JDK 1.5 이전처럼명료하게컨텐트팬에컴포넌트를부착하는것이바람직함 컨텐트팬에접근하고다루는경우가많기때문 22

23 예제 1 import javax.swing.*; import java.awt.*; public class ContentPaneEx extends JFrame { ContentPaneEx() { settitle("contentpane 과 JFrame"); setdefaultcloseoperation(jframe.exit_on_close); Container contentpane = getcontentpane(); contentpane.setbackground(color.orange); contentpane.setlayout(new FlowLayout()); contentpane.add(new JButton("OK")); contentpane.add(new JButton("Cancel")); contentpane.add(new JButton("Ignore")); setsize(350, 150); setvisible(true); public static void main(string[] args) { ContentPaneEX cp = new ContentPaneEx(); 23

24 스윙응용프로그램의종료 응용프로그램내에서스스로종료 System.exit(0); 언제어디서나무조건종료 프레임종료버튼 (X) 이클릭되면어떤일이일어나는가? 프레임을종료하여프레임윈도우가닫힘 프레임이화면에서보이지않게되고응용프로그램이사라짐 프레임이보이지않게되지만응용프로그램이종료한것아님 키보드나마우스입력을받지못함 다시 setvisible(true) 를호출하면보이게되고이전처럼작동함 프레임종료버튼이클릭될때프레임을닫고응용프로그램이종료하도록하는방법 frame.setdefaultcloseoperation(jframe.exit_on_close); 24

25 스윙응용프로그램의종료 스윙프로그램이실행되는동안생성되는스레드 메인스레드 main() 을실행하는스레드 자바응용프로그램의실행을시작한스레드 이벤트처리스레드 스윙응용프로그램이실행될때자동으로실행되는스레드 이벤트처리스레드의역할 프레임과버튼등 GUI 화면그리기 키나마우스입력을받아이벤트를처리할코드호출 자바응용프로그램의종료조건 실행중인사용자스레드가하나도없을때종료 스윙프로그램 main() 종료뒤프레임이살아있는이유 메인스레드가종료되어도이벤트처리스레드가살아있어프레임화면을그리고마우스나키입력을받기때문 25

26 컨테이너와배치개념 컨테이너 (Container) 1. 컨테이너마다하나의배치관리자가존재하며, 삽입되는모든컴포넌트의위치와크기를결정하고적절히배치한다. 이쪽으로가세요. 2. 컨테이너의크기가변하면내부컴포넌트들의위치와크기를모두재조절하고재배치한다. 배치관리자 (Layout Manager) 컴포넌트 (Component) 26

27 배치관리자대표유형 4 가지 java.awt 패키지에구현되어있음 FlowLayout BorderLayout 이쪽으로가세요. 이쪽으로가세요. GridLayout CardLayout 이쪽으로가세요. 이쪽으로가세요. 27

28 컨테이너와배치관리자 컨테이너의디폴트배치관리자 컨테이너는생성시디폴트배치관리자설정 컨테이너에새로운배치관리자설정 Container.setLayout(LayoutManager lm) lm 을새로운배치관리자로설정 // JPanel 패널에 BorderLayout 배치관리자를설정하는예 JPanel p = new JPanel(); p.setlayout(new BorderLayout()); JFrame frame = new JFrame(); Container c = frame.getconentpane(); // 프레임의컨텐트팬 c.setlayout(new FlowLayout()); // 컨텐트팬에 FlowLayout 설정 혹은 frame.setlayout(new FlowLayout()); // JDK 1.5 이후버전에서 28

29 FlowLayout 배치방법 컨테이너공간내에왼쪽에서오른쪽으로배치 다시위에서아래로순서대로컴포넌트를배치한다. container.setlayout(new FlowLayout()); container.add(new JButton("add")); container.add(new JButton("sub")); container.add(new JButton("mul")); container.add(new JButton("div")); container.add(new JButton("Calculate")); 29

30 FlowLayout 컨테이너의크기가변하면배치관리자에의해재배치됨 프레임의크기를바꾸면배치도변한다. 30

31 FlowLayout - 생성자와속성 생성자 FlowLayout() FlowLayout(int align) FlowLayout(int align, int hgap, int vgap) align : 컴포넌트의정렬 (5 가지중많이사용되는 3 가지 ) FlowLayout.LEFT, FlowLayout.RIGHT, FlowLayout.CENTER( 디폴트 ) hgap : 좌우두컴포넌트사이의수평간격, 픽셀단위 ( 디폴트 : 5) vgap : 상하두컴포넌트사이의수직간격, 픽셀단위 ( 디폴트 : 5) vgap hgap 31 FlowLayout.LEFT 로정렬됨

32 예제 2 import javax.swing.*; import java.awt.*; public class FlowLayoutEx extends JFrame { FlowLayoutEx() { settitle("flowlayout Sample"); setdefaultcloseoperation(jframe.exit_on_close); Container c = getcontentpane(); vgap, 40 픽셀 c.setlayout(new FlowLayout(FlowLayout.LEFT, 30, 40)); c.add(new JButton("add")); c.add(new JButton("sub")); c.add(new JButton("mul")); c.add(new JButton("div")); c.add(new JButton("Calculate")); hgap, 30 픽셀 FlowLayout.LEFT 로정렬됨 setsize(300, 250); setvisible(true); public static void main(string[] args) { new FlowLayoutEx(); 32

33 BorderLayout 배치방법 컨테이너공간을 5 구역으로분할, 배치 East, West, South, North, Center 배치방법 add(component comp, int index) comp 를 index 의공간에배치 컨테이너의크기가변하면재배치 BorderLayout.NORTH BorderLayout.EAST container.setlayout(new BorderLayout()); container.add(new JButton("div"), BorderLayout.WEST); container.add(new JButton("Calculate"), BorderLayout.CENTER); BorderLayout.WEST BorderLayout.SOUTH BorderLayout.CENTER 33

34 BorderLayout 생성자와속성 생성자 BorderLayout() BorderLayout(int hgap, int vgap) hgap : 좌우두컴포넌트사이의수평간격, 픽셀단위 ( 디폴트 : 0) vgap : 상하두컴포넌트사이의수직간격, 픽셀단위 ( 디폴트 : 0) 34

35 BorderLayout 의사용예 CENTER에컴포넌트가삽입될때 CENTER와 NORTH에컴포넌트가삽입될때 CENTER, NORTH, SOUTH에 컴포넌트가삽입될때 new BorderLayout(30,20); 으로배치관리자를생성하였을때 vgap, 20 픽셀 hgap, 30 픽셀 35

36 예제 3 import javax.swing.*; import java.awt.*; public class BorderLayoutEx extends JFrame { BorderLayoutEx() { settitle("borderlayout Sample"); setdefaultcloseoperation(jframe.exit_on_close); Container c = getcontentpane(); c.setlayout(new BorderLayout()); c.add(new JButton("add"), BorderLayout.NORTH); c.add(new JButton("sub"), BorderLayout.SOUTH); c.add(new JButton("mul"), BorderLayout.EAST); c.add(new JButton("div"), BorderLayout.WEST); c.add(new JButton("Calculate"), BorderLayout.CENTER); setsize(300, 200); setvisible(true); public static void main(string[] args) { new BorderLayoutEx(); 36

37 GridLayout 배치방법 컨테이너공간을동일한사각형격자 ( 그리드 ) 로분할하고각셀에하나의컴포넌트배치 격자구성은생성자에행수와열수지정 셀에왼쪽에서오른쪽으로, 다시위에서아래로순서대로배치 container.setlayout(new GridLayout(4,3,5,5)); // 4 3 분할로컴포넌트배치 container.add(new JButton("1")); // 상단왼쪽첫번째셀에버튼배치 container.add(new JButton("2")); // 그옆셀에버튼배치 4x3 그리드레이아웃설정 총 11 개의버튼이순서대로 add 됨 수직간격 vgap : 5 픽셀 수평간격 hgap : 5 픽셀 컨테이너의크기가변하면재배치 크기재조정 37

38 GridLayout 생성자와속성 생성자 GridLayout() GridLayout(int rows, int cols) GridLayout(int rows, int cols, int hgap, int vgap) rows : 격자의행수 ( 디폴트 : 1) cols : 격자의열수 ( 디폴트 : 1) hgap : 좌우두컴포넌트사이의수평간격, 픽셀단위 ( 디폴트 : 0) vgap : 상하두컴포넌트사이의수직간격, 픽셀단위 ( 디폴트 : 0) rows x cols 만큼의셀을가진격자로컨테이너공간을분할, 배치 38

39 예제 4 import javax.swing.*; import java.awt.*; public class GridLayoutEx extends JFrame { GridLayoutEx() { settitle("gridlayout Sample"); setdefaultcloseoperation(jframe.exit_on_close); Container c = getcontentpane(); GridLayout grid = new GridLayout(4, 2); grid.setvgap(5); c.setlayout(grid); c.add(new JLabel(" 이름 ")); c.add(new JTextField("")); c.add(new JLabel(" 학번 ")); c.add(new JTextField("")); c.add(new JLabel(" 학과 ")); c.add(new JTextField("")); c.add(new JLabel(" 과목 ")); c.add(new JTextField("")); 두행사이의수직간격 vgap 이 5 픽셀로설정됨 setsize(300, 200); setvisible(true); public static void main(string[] args) { new GridLayoutEx(); 39

40 배치관리자없는컨테이너 배치관리자가없는컨테이너개념 응용프로그램에서컴포넌트의절대크기와절대위치결정 용도 컴포넌트의크기나위치를개발자임의로결정하고자하는경우 게임프로그램과같이시간이나마우스 / 키보드의입력에따라컴포넌트들의위치와크기가수시로변하는경우 여러컴포넌트들이서로겹쳐출력하고자하는경우 컨테이너의배치관리자제거방법 container.setlayout(null); // JPanel 의배치관리자를삭제하는예 JPanel p = new JPanel(); p.setlayout(null); 40

41 배치관리자없는컨테이너 컴포넌트의크기와위치설정 프로그램내에서이루어져야함 컴포넌트들이서로겹치게할수있음 다음메소드이용 컴포넌트크기설정 : component.setsize(int width, int height); 컴포넌트위치설정 : component.setlocation(int x, int y); 컴포넌트위치와크기동시설정 : component.setbounds(int x, int y, int width, int height); 41

42 예제 5 import javax.swing.*; import java.awt.*; public class NullContainerEx extends JFrame { NullContainerEx() { settitle("null Container Sample"); setdefaultcloseoperation(jframe.exit_on_close); Container c = getcontentpane(); c.setlayout(null); JLabel la = new JLabel("Hello, Press Buttons!"); la.setlocation(130, 50); la.setsize(200, 20); c.add(la); for(int i=1; i<=9; i++) { JButton b = new JButton(Integer.toString(i)); b.setlocation(i*15, i*15); b.setsize(50, 20); c.add(b); setsize(300, 200); setvisible(true); 원하는위치에원하는크기로컴포넌트를마음대로배치할수있다. public static void main(string[] args) { new NullContainerEx(); 42