이장의내용 여러가지 GUI 구성요소를이해한다. 다양한배치관리자를이해하고익힌다. 컴포넌트, 이벤트및리스너에대해서정리한다. 애니메이션프로그램작성법을익힌다. 2

Transcription

1 Part 09 그래픽사용자인터페이스 Kwagma Ma (htt://comiler.sagji.ac.kr, SagJi Uiversity Srig

2 이장의내용 여러가지 GUI 구성요소를이해한다. 다양한배치관리자를이해하고익힌다. 컴포넌트, 이벤트및리스너에대해서정리한다. 애니메이션프로그램작성법을익힌다. 2

3 9.1 컴포넌트와컨테이너 3

4 GUI 컴포넌트 GUI 컴포넌트 (comoet) GUI 프로그램에서사용하는화면요소 (scree elemet) 예 레이블 (label), 버튼 (butto), 텍스트필드 (text field), 텍스트영역 (text area), 스크롤바 (scroll bar), 메뉴 (meu) 등 java.awt Abstract Widowig Toolkit (AWT) 으로원조 Java GUI 패키지 javax.swig 다양한컴포넌트가추가된 GUI 패키지 4

5 GUI 컨테이너 다른컴포넌트들을포함하고조직하는데사용 컨테이너자체가하나의특수한컴포넌트이다. 컨테이너와컴포넌트사이의관계 예 윈도우즈의폴더와파일과비슷함 프레임 (frame), 패널 (ael), 애플릿 (alet), 대화상자 (dialog box) 등 JFrame 의상속관계 java.lag.object java.awt.comoet java.awt.cotaier java.awt.widow java.awt.frame javax.swig.frame 5

6 GUI 컨테이너 패널 (ael) 다른컴포넌트들을포함하고조직할수있는컨테이너로스스로디스플레이될수없다 디스플레이하려면콘텐트페인같은컨테이너에추가 (add) 되어야한다. 패널의종류 java.awt 에서제공하는 Pael 과 javax.swig 에서제공하는 JPael 이있다. java.lag.object java.awt.comoet java.awt.cotaier java.awt.pael 6

7 Swig GUI 컴포넌트 Swig GUI 컴포넌트들은 JComoet 클래스로부터유도된다. JComoet 는일종의 Cotaier 이다. Cotaier 와 JComoet 클래스의계층구조는다음과같다. java.lag.object java.awt.comoet java.awt.cotaier javax.swig.jcomoet 예 : JPael java.lag.object java.awt.comoet java.awt.cotaier javax.swig.jcomoet javax.swig.jpael 7

8 애플릿 Alet 혹은 JAlet Pael 로부터유도된일종의패널이다. 애플릿생성, 실행등에관한모든세부사항들이정의되어있다. java.lag.object java.awt.comoet java.awt.cotaier java.awt.pael java.alet.alet javax.swig.jalet 8

9 애플릿 애플릿작성 ait 메소드를정의하는것도사실은 Comoet 에서정의되고 Alet 클래스를통해상속된것을재정의하는것이다. AletClass exteds Alet { // 애플릿이해야할일을작성 } AletClass exteds JAlet { // 애플릿이해야할일을작성 } 9

10 9.2 배치관리자 10

11 사용자인터페이스 소프트웨어설계의목적 사용자의문제해결을돕는것이라고할수있다. 사용자인터페이스설계 사용자를잘파악해야한다. 사용자가진정요구하는것 사용자의일반적행동 컴퓨터처리및문제에관련된전문지식정도 사용자의실수를예방하도록설계해야한다. 사용자의능력을최대로발휘할수있도록설계해야한다. 일관성있게설계해야한다. 11

12 배치관리자 배치관리자 (layout maager) 컨테이너내에서컴포넌트들의배치를제어혹은관리하는객체 일관성있는사용자인터페이스를설계하는데있어서매우중요하다. Java 표준라이브러리가제공하는배치관리자들 12

13 배치관리자변경 각컨테이너는초기설정된배치관리자를갖고있고 필요하면명시적으로다른것으로대치할수있다. 배치관리자변경은컨테이너의 setlayout 메쏘드를사용해야한다 예 JPael ael = ew JPael(); ael.setlayout(ew BorderLayout()); 13

14 흐름배치 흐름배치 (flow layout) 컴포넌트들을한행 (row) 에배치하고그행이다하면다음행에배치한다 컴포넌트들은컨테이너에더해진순서대로보여준다. 컴포넌트는윈도우내에서중앙정렬로초기화되어있다. 필요하면좌측정렬이나우측정렬도가능하다. Key Poit 흐름배치 (flow layout) 는컴포넌트들을한행에배치하고그행이다하면다음행에배치한다. 14

15 15

16 영역배치 영역배치 (border layout) Key Poit 영역배치 (border layout) 는컴포넌트들을필요에따라컨테이너내의 5 개의영역 ( 동, 서, 남, 북, 중앙 ) 에지정하여배치할수있다. 16

17 창병모, 우균 17

18 격자배치 격자배치 (grid layout) 컨테이너의컴포넌트들을행과열의직사각형격자에배치한다. 하나의컴포넌트는격자의힌칸 (cell) 에놓여지며, 모든칸들은동일한크기를갖는다 Key Poit 격자배치 (grid layout) 는컨테이너의컴포넌트들을행과열의직사각형격자에배치한다. 18

19 19

20 상자배치 상자배치 (box layout) 컴포넌트들을하나의행또는하나의열에수평또는수직으로배치 컴포넌트들은컨테이너에추가될때마다위에서아래로혹은왼쪽에서오른쪽으로순서대로배치된다. Key Poit 상자배치 (box layout) 는컨테이너의컴포넌트들을하나의행또는하나의열에수평또는수직으로배치한다. 20

21 창병모, 우균 21

22 절대위치 절대위치 (absolute ositioig) 배치관리자를사용하지않고절대위치를이용하여배치 setbouds 메소드를이용하여컴포넌트의크기와위치결정 setbouds(it x, it y, it width, it height) 코드예 Cotaier c = getcotetpae(); c.setlayout(ull); JButto okbutto = ew JButto(); okbutto.setbouds(50, 50, 60, 30); c.add(okbutto); 22

23 9.3 컴포넌트, 이벤트, 리스너 23

24 GUI 컴포넌트로부터발생가능이벤트 컴포넌트 사용자의동작 발생이벤트 JButto 버튼누름 ActioEvet JTextField 텍스트필드에리턴키누름 ActioEvet JCheckBox 체크박스선택 ItemEvet, ActioEvet JRadioButto 라디오버튼선택 ItemEvet, ActioEvet JComboBox 새로운항목선택 ItemEvet, ActioEvet JList 항목선택 ListSelectioEvet JMeuItem 메뉴항목선택 ActioEvet JScrollbar 스크롤바이동 AdjustmetEvet Widow 원도우열거나닫음, 윈도우아이콘화, 아이콘화된윈도우활성화 WidowEvet Cotaier 컨테이너에컴포넌트추가혹은삭제 CotaierEvet Comoet 컴포넌트움직임, 크기조정, 다른윈도우앞으로혹은뒤로마우스의포커스키의누름혹은놓음 ComoetEvet FocusEvet KeyEvet 마우스클릭, 컴포넌트안 ( 밖 ) 으로이동 마우스누름 ( 놓음 ), 마우스이동, 마우스드래그 MouseEvet 24

25 리스너정의 각이벤트의리스너정의 리스너인터페이스구현이벤트발생시자동으로수행되는메소드 예 : ActioEvet 를처리하기위한리스너작성 ActioListeer 인터페이스에선언된 actioperformed 메소드를구현 예 : MouseEvet 를처리하기위한리스너작성 MouseListeer 인터페이스에선언된다음의해당메소드들을구현 mouseclicked(mouseevet e) mouseetered(mouseevet e) mouseexited(mouseevet e) mousepressed(mouseevet e) mousereleased(mouseevet e) 25

26 이벤트클래스리스너인터페이스메소드 ActioEvet ActioListeer actioperformed(actioevet e) AdjustmetEvet AdjustmetListeer adjustmetvaluechaged(adjustemtevet e) ComoetEvet CotaierEvet ComoetListeer CotaierListeer comoethidde(comoetevet e) comoetmoved(comoetevet e) comoetresized(comoetevet e) comoetshow(comoetevet e) comoetadded(cotaierevet e) comoetremoved(cotaierevet e) FocusEvet FocusListeer focusgaied(focusevet e) focuslost(focusevet e) ItemEvet ItemListeer itemstatechaged(itemevet e) keyevet keylisteer keypressed(keyevet e) keyreleased(keyevet e) keytyed(keyevet e) ListSelectioEvet ListSelectioListeer valuechaged(listselectioevet e) MouseEvet MouseEvet MouseListeer MouseMotioListeer mouseclicked(mouseevet e) mouseetered(mouseevet e) mouseexited(mouseevet e) mousepressed(mouseevet e) mousereleased(mouseevet e) mousedragged(mouseevet e) mousemoved(mouseevet e) WidowEvet WidowListeer widowactivated(widowevet e) widowclosed(widowevet e) widowoeed(widowevet e) 26

27 선택을위한컴포넌트 선택을위해사용되는컴포넌트 체크박스 (check box), 라디오버튼 (radio butto), 콤보박스 (combo box) 이들컴포넌트는아이템을선택하거나선택을해제할때마다 ItemEvet 와 ActioEvet 가발생한다. 27

28 체크박스 : 전공선택예제 체크박스 선택을체크할수있으며여러개를체크도가능 전공체크예제 MajorPael 4개의전공을표시하기위한 4개의체크박스를생성스트링배열 majortext에전공이름저장 4개의체크박스 (JCheckBox) 객체생성및 MajorPael에추가 checkbox[i] = ew JCheckBox(majorText[i]); add(checkbox[i]); 각체크박스마다액션리스너 MajorListeer 객체등록 checkbox[i].addactiolisteer(listeer); 28

29 체크박스 : 전공선택예제 실행 전공체크박스선택 / 해제 à ActioEvet 발생 à 액션리스너의 actioperformed 메소드자동수행 à 현재선택된전공들을텍스트필드에표시. 29

30 30

31 31

32 32

33 라디오버튼 : 학년선택예제 라디오버튼 선택을표시하는데사용되며같은그룹의라디오버튼중하나만선택가능. 학년선택예제 YearPael 클래스 스트링배열 yeartext 에 4 개학년이름저장 JRadioButto 을이용하여학년을나타내는라디오버튼을 4 개생성 radiobutto[i] = ew JRadioButto(yearText[i]); 이들을 ButtoGrou 객체인 buttos 에추가 buttos.add(radiobutto[i]); 이제생성된라디오버튼을 YearPael 에추가 add(radiobutto[i]); 각라디오버튼마다 ItemEvet 리스너인 YearListeer 객체를등록 radiobutto[i].additemlisteer(listeer); 33

34 라디오버튼 : 학년선택예제 실행 라디오버튼선택 à ItemEvet 발생 à 등록된 YearListeer의itemStateChaged 메소드자동수행 à 선택된학년텍스트필드에표시 34

35 35

36 36

37 37

38 콤보박스 : 학년선택예제 콤보박스 선택을표시하는데사용되며아이템중하나를선택할수있다. 학년을선택하는예제 ComboPael 클래스 스트링배열 comboboxitem에 4개의학년이름을저장학년을선택하는콤보박스를생성하고이를 ComboPael에추가 combobox = ew JComboBox(comboBoxItem); add(combobox); 아이템리스너 ComboListeer 객체를생성한후콤보박스에등록 ComboListeer listeer = ew ComboListeer( ); combobox.additemlisteer(listeer); 38

39 콤보박스 : 학년선택예제 실행 콤보박스에서아이템선택à ItemEvet가발생 à 등록된 ComboListeer의 itemstatechaged 메소드자동수행 à 선택된학년을텍스트필드에표시 39

40 40

41 41

42 42

43 마우스이벤트예제 예제프로그램 Positio 마우스버튼이클릭되면원점으로부터클릭된지점까지선과좌표표시 Positio 클래스와패널을정의하는 PositioPael 클래스로구성 Positio 클래스 mai 메소드 프레임을생성하고 PositioPael 를생성하여프레임에추가한후에보여준다 PositioPael 의생성자 이패널의리스너를 PositioListeer 로등록하고크기와색상을설정 43

44 마우스이벤트 PositioListeer PositioPael 내의내부클래스 마우스버튼이클릭되면마우스이벤트로부터클릭된점 (Poit) 을가져온후 reait 메소드를호출한다. curret = evet.getpoit(); reait(); // aitcomoet 호출 aitcomoet 메소드 원점에서클릭된지점까지선을그리고좌표값을보여준다. age.drawlie (curret.x, curret.y, 0, 0); age.drawstrig("("+curret.x+","+curret.y+")", curret.x, curret.y); 44

45 45

46 46

47 47

48 48

49 이벤트어댑터클래스 리스너를작성하는또하나의방법 이벤트어댑터클래스 (Evet Adater Class) 를상속해서구현리스너작성시관련된메소드만재정의하면된다 이벤트어댑터클래스 각리스너인터페이스에상응하는이벤트어댑터클래스가존재 OOOListeer à OOOAdater MouseListeer 인터페이스 à MouseAdater 클래스인터페이스에서정의된메소드들을모두빈메소드로구현하고있다 49

50 이벤트어댑터클래스 예 : PositioListeer MouseListeer 를구현하여작성한리스너는 mouseclicked() 외에사용되지않는 4 개의메소드도빈메소드로구현하고있다. MouseAdater 클래스를확장하여구현 rivate class PositioListeer exteds MouseAdater { } /** * 마우스클릭으로선택된점을저장하고다시그리도록한다. */ ublic void mouseclicked (MouseEvet evet) { } curret = evet.getpoit(); reait(); 50

51 Timer 생성자및메소드 Timer (it delay, ActioListeer listeer) void addactiolisteer (ActioListeer listeer) 설명 delay에의해지정된일정한간격으로액션이벤트를발생시키는타이머를생성한다. 이타이머에액션리스너를더한다. boolea isruig() 만약타이머가실행중이면 true 를반환한다. void setdelay(it delay) 타이머의간격을설정한다. void start() 타이머를시작시켜정해진간격에따라액션 이벤트를발생시키도록한다. void sto() 타이머를정지시킨다. 51

52 디지털시계 타이머생성 1000 밀리초 (milisecod) 즉 1 초간격으로액션이벤트를발생시키는타이머를생성 이타이머는액션이벤트가발생될때마다이벤트리스너인 ClockListeer 가자동으로수행되도록하였다. Timer t = ew Timer(1000, ew ClockListeer()); t.start(); ClockListeer 타이머로부터액션이벤트가발생되어수행될때마다 Caledar 로부터새로운시간을가져와서이를텍스트필드에보여준다. Caledar time = Caledar.getIstace(); timefield.settext("" + (hour < 10? "0"+hour : hour) + ":" + (mi < 10? "0"+mi : mi) + ":" + (sec < 10? "0"+sec : sec)); 52

53 53

54 54

55 55

56 신호등애니메이션 애니메이션효과 타이머를이용하여일정시간간격으로액션이벤트를발생시키고그때마다 aitcomoet 메소드를재호출한다. 이를위해타이머의이벤트리스너내에서 reait() 를호출하면된다. 교통신호등애니메이션 LightChagePael: 빨강, 녹색, 노랑색점멸여부저장위한세개의부울변수 aitcomoet 메소드 : 이변수의값에따라해당색의신호등을보여준다. ClockListeer : 타이머를위한이벤트리스너로 actioperformed 메소드는호출될때마다신호등색을변경하고 reait() 를통해 aitcomoet 메소드를재호출 56

57 신호등애니메이션 프로그램의실행과정 패널이생성되면타이머가시작 à 정해진시간간격으로액션이벤트발생 à ClockListeer 내의 actioperformed 메소드호출 à reait() 를통해다른색의신호등을보여준다. 57

58 58

59 59

60 60

61 61

62 Key Poit 62

63 Key Poit 흐름배치 (flow layout) 는컴포넌트들을한행에배치하고그행이다하면다음행에배치한다. 영역배치 (border layout) 는컴포넌트들을필요에따라컨테이너내의 5 개의영역 ( 동, 서, 남, 북, 중앙 ) 에지정하여배치할수있다. 격자배치 (grid layout) 는컨테이너의컴포넌트들을행과열의직사각형격자에배치한다. 상자배치 (box layout) 는컨테이너의컴포넌트들을하나의행또는하나의열에수평또는수직으로배치한다. 63

64 프로그래밍실습 64

65 프로그래밍실습 1 1. 체질량지수 GUI 체질량지수 (BMI: body mass idex) 를계산하여이에따라비만여부를판별하는 GUI 프로그램을작성하라. 체질량지수는다음공식에의해계산한다. BMI( 몸무게, 키 ) = 몸무게 / 키 2 위공식에의해계산된 BMI 에따라비만여부를판정한다. BMI 15.0미만 15.0이상 18.5미만 18.5이상 23.0미만 23.0이상 27.5이하 27.5초과 40.0이하 40.0초과 판정병적인저체중저체중정상과체중비만병적인비만 65

66 프로그래밍실습 2 2. 디지털시계 디지털시계프로그램을오전, 오후를구분하도록수정하시오. 오전이면 AM 오후이면 PM 으로표시하고대신에시간은 00:00:00 부터 12:59:59 까지표시하도록한다. 예를들어 13:12:05 는 PM 1:12:05 로표시한다. 66