객체지향프로그래밍 그래픽사용자인터페이스 손시운 ssw5176@kangwon.ac.kr
그래픽사용자인터페이스 그래픽사용자인터페이스 (Graphical User Interface, 간단히 GUI) 는컴포넌 트들로구성된다. 2
자바에서 GUI 의종류 GUI AWT(Abstract Windows Toolkit) AWT 는운영체제가제공하는자원을이용하여서컴포넌트를생성 SWING 컴포넌트가자바로작성되어있기때문에어떤플랫폼에서도일관된화면을보여줄수있다. 3
AWT 와스윙 4
AWT 와 SWING 의비교 AWT SWING 5
AWT 와스윙 컴포넌트 AWT 버전 스윙버전 버튼 Button JButton 레이블 Label JLabel 리스트 List JList... 패스워드필드 없음 JPasswordField 슬라이더 없음 JSlider 6
스윙 7
스윙클래스계층구조 8
스윙의특징 스윙 GUI 컴포넌트 형식화된텍스트입력이나패스워드필드동작과같은복잡한기능들이제공된다. 자바 2D API 그림이나이미지, 애니메이션기능을제공한다. 교체가능한룩앤필 (Look-and-Feel) 지원 데이터전송 자르기, 복사, 붙이기, 드래그앤드롭등의데이터전송기능제공 되돌리기 (undo) 와되풀이 (redo) 기능을손쉽게제공 9
스윙패키지 10
중간점검문제 그래픽사용자인터페이스를구성하는요소들을무엇이라고하는가? AWT와스윙의차이점은무엇인가? 되돌리기, 복사및붙여넣기등도스윙에서제공되는가? 11
컨테이너와컴포넌트 기본컴포넌트 JButton, JLabel, JCheckbox, JChoice, JList, JMenu, JTextField, JScrollbar, JTextArea, JCanvas 등이여기에속한다. 컨테이너컴포넌트 다른컴포넌트를안에포함할수있는컴포넌트로서 JFrame, JDialog, JApplet, JPanel, JScrollPane 등이여기에속한다. 12
컨테이너의종류 최상위컨테이너 : 절대다른컨테이너안에포함될수없는컨테이너를의미 한다. 프레임 (JFrame), 다이알로그 (JDialog), 애플릿 (JApplet) 등이여기에해 당된다. 일반컨테이너 : 다른컨테이너안에포함될수있는컨테이너로패널 (JPanel), 스크롤페인 (JScrollPane) 등을의미한다. 13
GUI 작성절차 14
프레임생성 #1 import javax.swing.*; public class FrameTest { public static void main(string[] args) { JFrame f = new JFrame("Frame Test"); JFrame 의객체생성 f.setsize(300, 200); f.setdefaultcloseoperation(jframe.exit_on_close); f.setvisible(true); 15
프레임생성 #2 import javax.swing.*; public class MyFrame extends JFrame { Jframe 을상속하여 MyFrame 을정의 public MyFrame() { setsize(300, 200); setdefaultcloseoperation(jframe.exit_on_close); settitle("myframe"); setvisible(true); public class MyFrameTest { public static void main(string[] args) { MyFrame f = new MyFrame(); MyFrame 의객체생성 16
프레임생성 #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 안으로이동 17
컴포넌트생성과추가 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(); 18
JFrame 클래스 컨테이너는컴포넌트들을트리 (tree) 형태로저장한다. 최상위컨테이너는이트리의루트노드가된다. 최상위컨테이너는내부에콘텐트페인 (content pane) 을가지고있다. 여기에화면에보이는컴포넌트를저장한다. 최상위컨테이너에는메뉴바를추가할수있다. 19
프레임의속성변경하기 프레임의속성을변경시키는방법을생각하여보자. 조상클래스들의메소드도사용할수있다! 20
조상클래스 Component 컴포넌트클래스는화면에표시되어서사용자와상호작용하는시각적인객체를나타낸다. Container 내부에다른컴포넌트를추가할수있는기능을제공한다. 예를들어서이클래스의 add() 를사용하면컨테이너안에컴포넌트를추가할수있다. Window 경계선, 타이틀바, 버튼을가지고있는윈도우를정의한다. Frame 자바 GUI 애플리케이션의기초가된다. JFrame Frame 클래스를스윙의출시에맞추어변경한것이다. 21
중요한메소드 setlocation(x, y), setbounds(x, y, width, height), setsize(width, height) 프레임의위치와크기를설정한다. seticonimage(iconimage) 윈도우시스템에타이틀바, 태스크스위처에표시할아이콘을알려준다. settitle() 타이틀바의제목을변경한다. setresizable(boolean) 사용자가크기를조절할수있는지를설정한다. 22
예제 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); 23
실행결과 24
기초컴포넌트 패널 (panel) 레이블 (label) 버튼 (button) 텍스트필드 (text field) 25
패널 패널 (panel) 은컴포넌트들을포함하고있도록설계된컨테이너중의하나이 다 26
패널의용도 예를들어서다음과같이화면을 2 개로나누어서표시하고자할때패널을 사용할수있다. 27
레이블 레이블 (Label) 은편집이불가능한텍스트를표시. ( 예 ) JLabel label = new JLabel( 안녕하세요? ); 28
텍스트필드 텍스트필드 (text field) 는입력이가능한한줄의텍스트필드를만드는데 사용 29
텍스트필드의종류 JTextField - 기본적인텍스트필드 JFormattedTextField - 사용자가입력할수있는문자를제한한다. JPasswordField - 사용자가입력하는내용이보이지않는다. JComboBox - 사용자가직접입력할수도있지만항목중에서선택할수있다. JSpinner - 텍스트필드와버튼이조합된것으로사용자는이전버튼과다음버튼을이용하여선택할수있다. 30
버튼 버튼은사용자가클릭했을경우, 이벤트를발생하여원하는동작을하게하 는데이용된다 31
버튼의종류 JButton - 가장일반적인버튼이다. JCheckBox - 체크박스버튼 JRadioButton - 라디오버튼으로그룹중의하나의버튼만체크할수있다. 32
LAB: 온도변환기 이제까지학습한내용을바탕으로화씨온도를섭씨온도로변환해주는애 플리케이션을작성하여보자. 33
SOLUTION // 소스를입력하고 Ctrl+Shift+O를눌러서필요한파일을포함한다. public class Mylab { public static void main(string[] args) { JFrame f = new JFrame(); JPanel panel = new JPanel(); f.add(panel); JLabel label1 = new JLabel(" 화씨온도 "); JLabel label2 = new JLabel(" 섭씨온도 "); JTextField field1 = new JTextField(15); JTextField field2 = new JTextField(15); JButton button = new JButton(" 변환 "); 34
SOLUTION panel.add(label1); panel.add(field1); panel.add(label2); panel.add(field2); panel.add(button); f.setsize(300, 150); f.setdefaultcloseoperation(jframe.exit_on_close); f.settitle(" 온도변환기 "); f.setvisible(true); 35
중간점검문제 프레임에하나의버튼과하나의레이블을가지고있는 GUI를작성하는절차를설명하라. 패널에버튼 3개를추가하는경우와프레임에버튼 3개를추가하는경우를비교하여보자. 어떻게외관이달라지는가? 36
LAB: 피자주문화면제작 패널안에다른패널이포함될수있다. 이것을이용하여서다음그림처럼 프로그램의화면을디자인하라. 37
실행결과 38
SOURCE // 소스만입력하고 Ctrl+Shift+O 를누른다. public class MyFrame extends JFrame { public MyFrame() { setsize(600, 150); setdefaultcloseoperation(jframe.exit_on_close); settitle("myframe"); JPanel panel = new JPanel(); JPanel panela = new JPanel(); JPanel panelb = new JPanel(); JLabel label1 = new JLabel(" 자바피자에오신것을환영합니다. 피자의종류를선택하시오."); panela.add(label1); 39
SOURCE JButton button1 = new JButton(" 콤보피자 "); JButton button2 = new JButton(" 포테이토피자 "); JButton button3 = new JButton(" 불고기피자 "); panelb.add(button1); panelb.add(button2); panelb.add(button3); JLabel label2 = new JLabel(" 개수 "); JTextField field1 = new JTextField(10); panelb.add(label2); panelb.add(field1); panel.add(panela); panel.add(panelb); add(panel); setvisible(true); 40
SOURCE public class MyFrameTest { public static void main(string[] args) { MyFrame f = new MyFrame(); 41
도전문제 패널의배경색은 panel.setbackground(color.blue); 와같은문장으로변경이 가능하다. 3 장의패널색상을다르게하여서각각의패널이어디에위치하는 지를조사하여보자. 42
배치관리자 (layout manager) 컨테이너안의각컴포넌트의위치와크기를결정하는작업 [43/70] 43
상당히다르게보인다. 배치관리자에따라서같은애플리케이션도상당히다르게보인다. 44
배치관리자의종류 FlowLayout GridBagLayout GridLayout 45
배치관리자의종류 BorderLayout BoxLayout CardLayout 46
배치관리자의설정 생성자를이용하는방법 JPanel panel = new JPanel(new BorderLayout()); setlayout() 메소드이용 panel.setlayout(new FlowLayout()); 47
크기와정렬힌트 프로그래머가컴포넌트의크기와힌트를배치관리자에게주고싶은경우에 는 setminimumsize(), setpreferredsize(), setmaximumsize() 메소드를사용 ( 예 ) button.setmaximumsize(new Dimension(300, 200)); 대크기힌트 button.setalignmentx(jcomponent.center_alignment); 힌트 // 최 // 중앙정렬 48
배치방향설정 컴포넌트의메소드인 setcomponentorientation() 을사용하던지 applycomponentorientation() 을사용 ( 예 ) panel.applycomponentorientation( ComponentOrientation.RIGHT_TO_LEF T); 49
FlowLayout 컴포넌트들을왼쪽에서오른쪽으로버튼을배치한다. 패널과애플릿의디폴트배치관리자이다. 50
FlowLayout 클래스 생성자 FlowLayout() 설명 새로운 FlowLayout 객체를생성한다. 기본설정은중앙 (center) 배치이며간격 은세로, 가로각각 5 픽셀이다. 지정된정렬방식을가진새로운 FlowLayout 객체를생성한다. 기본설정은중 앙 (center) 배치이며간격은세로, 가로각각 5 픽셀이다. FlowLayout(int align) 정렬매개변수는다음중하나이다. FlowLayout.LEADING, FlowLayout.CENTER, FlowLayout.TRAILING. FlowLayout (int align, int hgap, int vgap) 지정된정렬방식과수평간격 hgap 과수직간격 vgap 을가진새로운 FlowLayout 객체를생성한다. 51
FlowLayout 예제 import java.awt.*; import javax.swing.*; class MyFrame extends JFrame { public MyFrame() { settitle("flowlayouttest"); setdefaultcloseoperation(jframe.exit_on_close); JPanel panel; // 패널을생성하고배치관리자를 FlowLayout 으로설정 panel = new JPanel(); panel.setlayout(new FlowLayout(FlowLayout.CENTER)); // 패널에버튼을생성하여추가 panel.add(new JButton("Button1")); panel.add(new JButton("Button2")); panel.add(new JButton("Button3")); panel.add(new JButton("B4")); panel.add(new JButton("Long Button5")); add(panel); pack(); setvisible(true); 52
BorderLayout BorderLayout 은 5 개의영역으로구분하고각각의영역에컴포넌트를배치 PAGE_START ( 또는 NORTH) PAGE_END ( 또는 SOUTH) LINE_START ( 또는 WEST) LINE_END ( 또는 EAST) CENTER 53
BorderLayout 클래스 생성자또는메소드 설명 BorderLayout(int hgap, int vgap) 컴포넌트사이의수평간격 hgap 과수직간격 vgap 을을가지는 BorderLayout 객체생성 sethgap(int) 컴포넌트사이의수평간격설정 ( 단위는픽셀 ) setvgap(int) 컴포넌트사이의수직간격설정 54
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); 55
GridLayout GridLayout 은컴포넌트들을격자모양으로배치한다. 56
GridLayout 클래스 생성자 설명 rows 행과 cols 열을가지는 GridLayout 객체를생성 GridLayout(int rows, int cols) 한다. 만약 rows 나 cols 가 0 이면필요한만큼의행이나 열이만들어진다. rows 행과 cols 열을가지는 GridLayout 객체를생성 GridLayout(int rows, int cols, int hgap, int vgap) 한다. hgap 과 vgap 은컴포넌트사이의수평간격과 수직간격으로단위는픽셀이다. 57
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); 58
어떤배치관리자를선택할것인가? 컴포넌트를가능한크게나타내고싶은경우 GridLayout 이나 BorderLayout 을사용 몇개의컴포넌트를자연스러운크기로한줄로나타내고싶은경우 FlowLayout 을사용하던지 BoxLayout 을사용한다. 몇개의컴포넌트를행과열로동일한크기로나타내고싶은경우 GridLayout 을사용하여야한다. 몇개의컴포넌트를행과열로나타내는데각컴포넌트의크기가다르거나 간격, 정렬방식을다르게내고싶은경우 BoxLayout 을사용하면된다. 59
절대위치로배치하기 배치관리자를 null 로설정한다. setlayout(null); add() 메소드를사용하여컴포넌트를컨테이너에추가한다. Button b = Button("Absolute Position Button"); add(b); setbounds() 메소드를사용하여절대위치와크기를지정한다. b.setbounds(x, y, w, h); 컴포넌트의 repaint() 메소드를호출한다. b.repaint(); 60
절대위치예제 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); 61
절대위치예제 b1.setbounds(20, 5, 95, 30); b2.setbounds(55, 45, 105, 70); b3.setbounds(180, 15, 105, 90); add(p); setvisible(true); public class AbsoluteTest { public static void main(string args[]) { MyFrame f=new MyFrame(); 62
LAB: 계산기예제 간단한계산기를작성하여보자. 계산기능은나중에추가하기로하자. 여기 서는다음과같은외관만구현하면된다.GridLayout 을사용하여보자. 63
SOLUTION // 소스만입력하고 Ctrl+Shift+O 를누른다. public class Calculator extends JFrame { private JPanel panel; private JTextField tfield; private JButton[] buttons; private String[] labels = { "Backspace", "", "", "CE", "C", "7", "8", "9", "/", "sqrt", "4", "5", "6", "x", "%", "1", "2", "3", "-", "1/x", "0", "+/-", ".", "+", "=", ; 64
SOLUTION public Calculator() { tfield = new JTextField(35); panel = new JPanel(); tfield.settext("0."); tfield.setenabled(false); panel.setlayout(new GridLayout(0, 5, 3, 3)); buttons = new JButton[25]; int index = 0; for (int rows = 0; rows < 5; rows++) { for (int cols = 0; cols < 5; cols++) { buttons[index] = new JButton(labels[index]); if( cols >= 3 ) buttons[index].setforeground(color.red); else buttons[index].setforeground(color.blue); buttons[index].setbackground(color.yellow); panel.add(buttons[index]); index++; 65
SOLUTION add(tfield, BorderLayout.NORTH); add(panel, BorderLayout.CENTER); setvisible(true); pack(); public static void main(string args[]) { Calculator s = new Calculator(); 66
LAB: 계산기예제 실행결과를참조하여서다음코드의빈칸을채우고실행하여보라. 67
SOLUTION import java.awt.flowlayout; import javax.swing.*; public class MyFrame extends JFrame { JPanel p1; public MyFrame() { setsize(300, 200); settitle("my Frame"); p1 = new JPanel(); p1.setlayout(new FlowLayout()); for (int i = 0; i < 10; i++) p1.add(new JButton("Button" + i)); add(p1); setvisible(true); // 프레임을화면에표시한다. 68
SOLUTION public class MyFrameTest { public static void main(string args[]) { MyFrame f = new MyFrame(); 69
LAB 다음과같이난수를발생하여서레이블을불규칙하게배치하여보자. 70
SOLUTION public class MyFrame extends JFrame { JPanel p = new JPanel(); JLabel[] labels = new JLabel[30]; public MyFrame() { p.setlayout(null); p.setbackground(color.yellow); for (int i = 0; i < 30; i++) { labels[i] = new JLabel("" + i); int x = (int) (500 * Math.random()); int y = (int) (200 * Math.random()); labels[i].setforeground(color.magenta); labels[i].setlocation(x, y); labels[i].setsize(20, 20); p.add(labels[i]); setsize(500, 300); add(p); setvisible(true); // 프레임을화면에표시한다. 71
SOLUTION public class MyFrameTest { public static void main(string args[]) { MyFrame f = new MyFrame(); 72