그래픽사용자인터페이스 이충기 명지대학교컴퓨터공학과
그래픽사용자인터페이스 그래픽사용자인터페이스 (GUI) 는사람과컴퓨터간의상호작용을위한사람 - 컴퓨터인터페이스 (HCI) 중의하나이다. GUI 는사용자가컴퓨터화면상에있는객체들과상호작용을하는인터페이스이다. 오늘날사실상거의모든컴퓨터플랫폼에서 GUI 가사용되고있다. 2
GUI 프로그래밍 GUI 프로그램은실행시키면메뉴가있는창이뜨고창에는아이콘, 단추, 제어요소등이있다. 입력은마우스나키보드를통해하고출력은화면을통해본다. 이러한프로그램을작성하는것이 GUI 프로그래밍이다. 자바에서 GUI 프로그래밍을지원하기위해모든플랫폼에서공통적으로제공하는최소한의기능만을지원하는 GUI 도구모음을제공한다. 3
자바의 GUI 지원도구모음 GUI 응용을지원하기위한클래스들은주로 java.awt 패키지와 javax.swing 패키지에있다. java.awt 패키지는추상윈도우도구모음 (AWT) 을포함하는최초의자바 GUI 패키지이다. 스윙패키지는 AWT 의컴포넌트들보다더융통성이있는컴포넌트들을포함한다. GUI 프로그램을작성하기위해서는 AWT 패키지와스윙패키지둘다필요로한다. 4
스윙 스윙은플랫폼고유의컴포넌트와연계되지않은경량급의빠른컴포넌트들로구성된 GUI 도구모음이다. 모든새로운스윙컴포넌트들과클래스들은 javax.swing 패키지에정의되어있다. 스윙을프로그램에서사용하기위해서는다음과같은 import 문을사용해야한다 : import javax.swing.*; 5
스윙의기본구성요소 컴포넌트 : 정보를화면에보여주거나사용자가프로그램과어떤방식으로상호작용하게하는화면상의요소이다. 예 : 단추, 레이블, 텍스트필드 컨테이너 : 다른컴포넌트들을포함하는특별한유형의컴포넌트이다. 예 : 프레임, 패널 화면구성관리자 : 컨테이너내에서컴포넌트의위치를결정한다. 6
컨테이너 다른컴포넌트들을포함하고조직하는특별한유형의컴포넌트이다. 컨테이너는중량급혹은경량급으로분류될수있다. 중량급컨테이너는운영체제에의해관리된다. 예 : 프레임 반면에경량급컨테이너는자바프로그램에의해관리된다. 예 : 패널 7
프레임 프레임은 GUI 기반자바응용을보여주기위해사용되는컨테이너이다. 프레임은제목막대를가진별도의창으로보여진다. 화면상에서위치를바꿀수있고크기를조절할수있다. 8
예제프로그램 1: 기본프레임만들기 import javax.swing.*; public class BasicFrameDemo { public static void main(string[] args) { // 기본프레임객체를만든다 JFrame frame = new JFrame( ); // 프레임을화면에보여지게한다 frame.setvisible(true); } } 9
예제프로그램 1: 실행결과 아래와같은아주작은기본 JFrame 객체가화면의좌측상단모서리에보여진다. 10
예제프로그램 2: 기본프레임수정 기본프레임에다음기능들을추가한다 : 1. 프레임의제목을 간단한프레임 으로한다. 2. 프레임의크기는가로와세로를각각 200 픽셀과 100 픽셀로한다. 3. 프레임의좌측상단모서리가화면상의좌표 (50,50) 에위치하게한다. 4. 프레임의우측상단에있는 X 표시의닫기를클릭하면프로그램이종료된다. 11
예제프로그램 2: 기본프레임수정 // 간단한프레임을만든다 import javax.swing.*; public class FrameDemo extends Jframe { public FrameDemo ( ) { } settitle(" 간단한 GUI 프로그램 "); // 기능 1 setsize(200, 100); // 기능 2 setlocation(50, 50); // 기능 3 setdefaultcloseoperation(exit_on_close); // 기능 4 } public static void main(string[] args) { FrameDemo myframe = new FrameDemo( ); myframe.setvisible(true); } 12
예제프로그램 2: 실행결과 13
패널 패널은보여지기위해서또다른컨테이너에더해져야한다. 패널의주요역활은 GUI 안에있는다른컴포넌트들을구성하는것을돕는것이다. 패널에컴포넌트들을추가하기위해우리는 add() 메소드를사용한다. 14
예제프로그램 3: 패널포함프레임만들기 알고리즘 1. 패널포함프레임 라는제목을갖는프레임객체를만든다. 2. 프레임객체의오른쪽모서리에있는 닫기 단추를누르면프로그램이종료되게한다. 3. 패널객체를만든다. 4. 패널객체의바탕색을초록색으로한다. 5. 패널객체의크기를가로 200 픽셀, 세로 100 픽셀로정한다. 6. 패널객체를화면에보여주기위해프레임객체의 ContentPane 객체에추가한다. 7. 프레임객체의크기를패널객체를포함하기위해적절하게정한다. 8. 프레임객체가화면에보여지게한다. 15
예제프로그램 3: 패널포함프레임만들기 import java.awt.*; import javax.swing.*; public class JFrameDemo { public static void main(string[] args) { 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 } 16
예제프로그램 3: 실행결과 17
컴포넌트 스윙컴포넌트들은 AWT 컴포넌트들의기능을향상한것이거나새로이추가된것이다. 스윙컴포넌트들은그래픽스를지원한다. 모든스윙컴포넌트는 paintcomponent 메소드를가진다. 예 : 레이블, 단추, 텍스트필드, 체크박스 18
레이블 레이블 (label) 은한줄의텍스트를보여주는 GUI 컴포넌트이다. 레이블은대개정보를보여주거나 GUI 안에있는다른컴포넌트들을식별하기위해사용된다. 레이블은 JLabel 클래스에의해정의된다. 레이블은이미지를보여줄수있다. 19
단추 단추 (button) 는사용자가마우스를누르면동작을시작하는컴포넌트이다. 단추는 JButton 클래스에의해정의된다. 단추는눌러질때 Action Event 를발생시킨다. 20
텍스트필드 텍스트필드 (text field) 는사용자가한줄의입력을하는것을허락하는컴포넌트이다. 텍스트필드는 JTextField 에의해정의된다. 커서가텍스트필드안에있을때 Enter 키를누르면 Action Event 을발생시킨다. 21
체크박스 체크박스는마우스를사용하여 ON 이나 OFF 상태중의하나를선택하게하는단추이다. 체크박스는 JCheckBox 클래스에의해정의된다. 체크박스는상태가바뀔때마다 Item Event 가발생된다. 22
라디오단추 라디오단추는한번에한단추만선택될수있는단추들의그룹이다. 한그룹에서한라디오단추가선택될때현재 ON 상태에있는라디오단추는 OFF 상태로바뀐다. 함께동작할라디오단추들의그룹을정의하기위해각라디오단추는 ButtonGroup 객체에더해진다. 라디오단추는 JRadioButton 클래스에의해정의된다. 라디오단추는 Action 사건을일으킨다. 23
콤보박스 콤보박스는사용자가 아래로내리기 (drop down) 메뉴로부터여러선택항목들중의하나를선택하게한다. 사용자가마우스를사용하여콤보박스를누를때선택항목들의목록이보여진다. 사용자가이항목들중하나를선택하면그항목이보여진다. 콤보박스는 JComboBox 클래스에의해정의된다. 24
화면구성관리자 화면구성관리자는컴포넌트들이컨테이너안에어떻게배치되는지를정하는객체이다. 모든컨테이너는기본화면구성관리자를가진다. 그러나우리는화면구성관리자를명확히지정할수있다. 25
자바의화면구성관리자 Flow Layout Border Layout Card Layout Grid Layout GridBag Layout AWT 에서정의 Box Layout Overlay Layout 스윙에서정의 26
화면구성관리자 각화면구성관리자는컴포넌트들을어떻게배치할지를정하는자신만의특별한규칙들을가지고있다. 일부화면구성관리자는한컴포넌트의선호하는크기혹은정렬에주의를기울인다. 반면에다른관리자들은그렇지않다. 화면구성관리자는컴포넌트들이컨테이너에더해질때와컨테이너의크기가변경될때화면구성을조정하려고시도한다. 27
화면구성관리자 한컨테이너의화면구성관리자를변경하기위해 setlayout 메소드를사용한다. 다음은패널의화면구성관리자를 BorderLayout 로정하는코드이다 : JPanel panel = new JPanel(); panel.setlayout(new BorderLayout()); 28
Flow Layout 관리자 Flow Layout 관리자는한줄에가능한많은컴포넌트들을배치한다. 한줄이다채워지면다음줄로자동적으로넘어간다. 이관리자는컴포넌트들을각줄에가운데정렬로배치하게기본설정되어있다. 그러나왼쪽정렬이나오른쪽정렬로바꿀수있다. 29
예제프로그램 4: Flow Layout import java.awt.*; import javax.swing.*; public class FlowLayoutDemo { public static void main(string[] args) { 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); } } 30
예제프로그램 4: 실행결과 주 : 창의폭을줄이면 5 개의단추가한줄에다들어가지않으므로다음과같이두행에걸쳐보여진다. 31
BorderLayout 관리자 BorderLayout 관리자는다음과같이화면을 North, South, East, West 및 Center 등의다섯개의독립적인영역으로나눈다. North West Center East South 32
BorderLayout 관리자 각영역은하나의컴포넌트만을보여줄수있다. 각영역은포함하는컴포넌트를수용하기위해서필요한만큼확장된다. 한영역에어떠한컴포넌트도포함되지않는다면그영역은전체구성에서어떠한공간도차지하지않는다. 대신에 Center 영역이그영역으로확장된다. 33
예제프로그램 5: BorderLayout import java.awt.*; import javax.swing.*; public class BorderLayoutDemo { public static void main(string[] args) { JFrame fr = new JFrame("Border 화면구성관리자 "); Container cont = fr.getcontentpane(); // 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
예제프로그램 5: 실행결과 35
Grid Layout 관리자 이관리자는화면을여러행과여러열의격자형영역들로나눈다. 예를들면, 화면을 4 행과 3 열로나누기위해서다음과같이한다 : setlayout(new GridLayout(4, 3)); 각영역은한컴포넌트만을포함한다. 컴포넌트들이컨테이너에행별로추가한다. 같은행내에서는열별로추가한다. 36
예제프로그램 6: Grid Layout import java.awt.*; public class GridLayoutDemo { import javax.swing.*; public static void main(string[] args) { } } JFrame fr = new JFrame("Grid 화면구성관리자 "); Container cont = fr.getcontentpane(); // 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
예제프로그램 6: 실행결과 38
카드화면구성관리자 CardLayout 관리자는인터페이스를한번에한장씩나타내는일련의카드처럼다룰수있다. 예를들면, CardLayout 관리자를사용하는세개의패널이있는프레임을고려하라. 이프레임의현패널을마우스로누르면그다음패널로넘어간다. 39
Box 화면구성관리자 Box 화면구성관리자는컴포넌트들을한행에수평적으로배치하거나혹은한열에수직적으로배치한다. 컨테이너에컴포넌트들을추가할때추가하는순서대로왼쪽에서오른쪽으로혹은위에서아래로위치가정해진다. 다른화면구성관리자와결합하여아주복잡한화면구성을할수있다. 40
화면구성예제 우리는다음과같은화면구성을갖는프레임을만들고자한다. TextArea1 Label One Label Two Label Three Button One Label Four Button Two Button Three 41
화면구성예제 일반적으로화면을구성하기위해서해야할일은다음과같다 : 1. 종이위에화면구성도를그린다. 2. 화면의컴포넌트들을나타내는객체변수들을선언한다. 3. 컨테이너들을중첩되게사용하여컴포넌트들을적절히배치한다. 42
화면구성예제 첫번째단계 : 종이위에화면구성도를그린다 TextArea1 Label One Label Two Label Three Button One Label Four Button Two Button Three ( 점선은화면위에실제로보이지않고스케치를위해유용하여사용한것이다 ) 43
화면구성예제 두번째단계 : 여러컴포넌트들의객체변수들을선언한다 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 이라는객체변수를첫번째구역에할당하기위해다음과같이한다 : TextArea1 Label One Label Two add (textarea1); Label Three Button One Label Four Button Two Button Three 46
화면구성예제 GridLayout 의두번째구역은두개의레이블을포함한다. 우리는새로운패널을만들고그패널을둘로나누고각각에한레이블을 포함시킨다 // 새패널을만든다 JPanel panel1 = new JPanel(); // panel1 을 GridLayout 의 // 다음위치에추가한다 add(panel1); // panel1 을 2 행 1 열의 Grid 로 // 나눈다 panel1.setlayout(new GridLayout(2,1)); TextArea1 // 두레이블들을 panel1에추가한다 panel1.add(label1); // 패널의첫번째행에추가 panel1.add(label2); // 패널의두번째행에추가 Button Two Label One Label Two Label Three Button One Label Four Button Three 47
화면구성예제 GridLayout 의세번째구역은아무것도포함하지않는다. 빈패널을그공간에포함시킨다. add (new JPanel()); TextArea1 Label One Label Two Label Three Button One Label Four Button Two Button Three 48
화면구성예제 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); TextArea1 Label One Label Two Label Three Button One Label Four Button Two Button Three 49
화면구성예제 그러나 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)); TextArea1 Label One Label Two Label Three Button One Label Four // 단추들을 panel3 에추가한다 panel3.add(button2); panel3.add(button3); Button Two Button Three 50
화면구성예제 결과화면 : TextArea1 Label One Label Two Label Three Button One Label Four Button Two Button Three 51
요약 그래픽사용자인터페이스개요 스윙 컨테이너 컴포넌트 화면구성관리자 화면구성예제 52