윈도 프로그래밍.

Presentation on theme: "윈도 프로그래밍."— Presentation transcript:

1 윈도 프로그래밍

2 Section02 기본 위젯 활용 기본 윈도창의 구성
위젯(Widget) : 윈도창에 나올 수 있는 문자, 버튼, 체크박스, 라디오버튼 등을 의미 Tip • tkinter 는 TK Interface의 약어. Tk는 Tcl/Tk라는 전통적인 GUI 인터페이스 윈도, 리눅스, 맥 등에서 모두 동일한 코드로 사용 가능 1행 : tkinter는 파이썬에서 GUI 관련 모듈 제공해 주는 표준 윈도 라이브러리 3행 : Tk()는 기본이 되 는 윈도를 반환, 이를 루트 윈도 또는 베이스 윈도라고 함. 3행 실행하면 윈도창 화면에 출력 3행에서 베이스 윈도를 window 변수에 넣고 7행 에서 window.mainloop() 함수 실행

3 Section02 기본 위젯 활용 윈도창 조절 4행 : 윈도창에 제목 표시
5행 : 윈도창의 초기 크기를 400×100으로 지정 6행 : 가로와 세로의 크기가 변경되지 않도록 지정

4 Section02 기본 위젯 활용 레이블 레이블(Label) : 문자를 표현할 수 있는 위젯
8행 : pack() 함수로 해당 레이블을 화면에 표시 Font : 글꼴 과 크기 지정 Fg : foreground의 약어로 글자색을 지정 Bg : background의 약어로 배경색을 지정 width와 height : 위젯의 폭과 높이를 지정 Anchor : 위젯이 어느 위치에 자리 잡을지 결정

5 Section02 기본 위젯 활용 레이블에 글자 대신 이미지 넣기
PhotoImage()는 GIF 파일만 지원, JPEG나 BMP 등은 지원하지 않음 4행 : PhotoImage()에서 이미지 파일을 준비 5행 : Label()의 옵션 image에서 속성을 지정

6 Section02 기본 위젯 활용 버튼 버튼(Button) : 마우스로 클릭하면 눌리는 효과와 함께 지정한 작업 실행
예: 버튼을 누르면 파이썬 IDLE이 종료되는 코드 4행 : command 옵션에 quit 명령

7 Section02 기본 위젯 활용 예: 이미지 버튼을 누르면 간단한 메시지창이 나오는 코드
2행 : messagebox 모듈 사용 임포트 5~6행 : myFunc() 함수 정의, 이 함수는messagebox.showinfo(제목, 내용) 형식으로 화면에 메시지 상자 출력 11~12행 : 이미지 준비하고 버튼에 글자 대신 이미지 표현

8 Section02 기본 위젯 활용 체크버튼 체크버튼(Checkbutton) : 켜고 끄는 데 사용하는 위젯
예 : 체크버튼을 켜거나 끄면 메시지창이 열리게 하는 코드 6~10행 : myFunc() 함수는 chk.get() 함수, 체크버튼에 설정된 값을 가져와서 메시지 출력 13행 : chk 변수를 준비, IntVar() 함수 사용 14행 : Checkbutton()의 옵션 중 variable에 chk 변수 사용

9 Section02 기본 위젯 활용 라디오버튼 라디오버튼(Radiobutton) : 여러 개 중에서 하나를 선택하는 데 사용하는 위젯 5~11행 : myFunc() 함수는 var 변수값으로 맨 아래쪽 레이블의 텍스트를 변경 14행 : 정수형 변수 var를 준비 15~17행 : 라디오버튼을 3개 준비

10 Section02 기본 위젯 활용

11 Section03 위젯의 배치와 크기 조절 수평 정렬
수평으로 정렬하는 방법 : pack() 함수의 옵션 중 side=LEFT, RIGHT 8~10행 : side=LEFT 옵션은 왼쪽부터 채우라는 의미

12 Section03 위젯의 배치와 크기 조절 리스트와 for 문 활용 4행 : 비어 있는 리스트를 3개 준비
6~7행 : 3회 반복하면서 버튼 생성 9~10행 : 준비한 버튼 리스트를 화면에 출력

13 Section03 위젯의 배치와 크기 조절 수직 정렬
pack() 함수의 옵션 중 수직으로 정렬하는 방법 : side=TOP, BOTTOM Code10-10.py 의 10행을 다음과 같이 변경하고 실행

14 Section03 위젯의 배치와 크기 조절 폭 조정
pack() 함수의 옵션 중에서 윈도창 폭에 맞추는 방법 : fill=X이다. Code10-10.py의 10행을 다음과 같이 변경하고 실행

15 Section03 위젯의 배치와 크기 조절 위젯 사이의 여백 조절
pack() 함수의 옵션 중에서 위젯 사이에 여백 주는 방법 : padx=픽셀값 또는 pady=픽셀값 Code10-10.py의 10행을 다음과 같이 변경하고 실행

16 Section03 위젯의 배치와 크기 조절 위젯 내부의 여백 조절
pack() 함수의 옵션 중에서 위젯 내부에 여백 주는 방법 : ipadx=픽셀값 또는 ipady=픽셀값 Code10-10.py의 10행을 다음과 같이 변경하고 실행

17 Section03 위젯의 배치와 크기 조절 위젯 내부의 여백 조절
pack() 함수의 옵션 중에서 위젯 내부에 여백 주는 방법 : ipadx=픽셀값 또는 ipady=픽셀값 Code10-10.py의 10행을 다음과 같이 변경하고 실행 위젯 내부와 외부에 모두 여백

18 Section03 위젯의 배치와 크기 조절 고정 위치에 배치
위젯을 고정 위치에 배치하려면 pack() 대신 place() 함수 사용 그림 9개를 2차원으로 배치하는 코드 4행 : 버튼을 저장할 9개짜리 리스트 준비 5행 : 이미지 파일명 9개를 리스트로 준비 6행 : PhotoImage()로 생성할 9개짜리 리스트 8행 : xPos, yPos는 그림을 출력할 X, Y 좌표로 사용 9행 : num 은 그림의 순차 번호로 사용 15~17행 : 9번 반복하면서 버튼을 생성

19 Section03 위젯의 배치와 크기 조절 19~25행 : 3×3=9번 반복

20 Section03 위젯의 배치와 크기 조절 [프로그램 1]의 완성
<이전> 버튼이나 <다음> 버튼을 누르면 사진들을 표시하는 사진 앨범 프로그램 5행 : fnameList 변수에 사진 9장의 파일명을 저장 6행 : photoList에는 PhotoImage() 함수로 생성할 변수 9개 준비 7행 : num은 현재 사진의 번호 10~17행 : <다음> 버튼을 누르면 실행되는 함수 11행 : global num은 num 전역 변수를 함수 안에서 사용 의미 12행 : 사진 번호를 하나 증가 13~14행 : 사진 번호가 최대 8, 8 넘으면 0번 사진 표시

21 Section03 위젯의 배치와 크기 조절 15~17행 : 변경된 사진 번호에 해당하는 이미지 파일로 pLabel 변경
19~26행 : <이전> 버튼을 누르면 처리되는 함수

22 Section03 위젯의 배치와 크기 조절 33~34행 : 버튼 누르면 이 함수와 연결
36~37행 : 프로그램 실행 후 첫 번째 사진 표시 39~41행 : 버튼 및 이미지 위치 place(x=좌표, y=좌표)로 지정

23 Section04 키보드와 마우스 이벤트 처리 마우스 이벤트 기본 처리

24 Section04 키보드와 마우스 이벤트 처리 마우스 이벤트가 처리 형식

25 Section04 키보드와 마우스 이벤트 처리 마우스 왼쪽 버튼을 클릭했을 때 처리하는 방법
5~6행 : 마우스 이벤트가 발생할 때 작동할 함수 정의 11행 : window.bind() 함수에는 마우스 왼쪽 버튼 클릭 할 때 발생하는 이벤트인 <Button-1> 설정하고 5행의 clickLeft 함수명을 지정

26 Section04 키보드와 마우스 이벤트 처리 지정된 위젯을 클릭했을 때 다른 함수 호출

27 Section04 키보드와 마우스 이벤트 처리 Code10-14.py는 이미지 클릭할 때만 이벤트 처리(15행에서 window.bind()가 아닌 label1.bind()를 사용했기 때문) 또 <Button> 이벤트를 사용했기 때문에 어떤 마우스 버튼 눌러도 메시지창 표시

28 Section04 키보드와 마우스 이벤트 처리 지정된 위젯을 클릭했을 때 다른 함수 호출

29 Section04 키보드와 마우스 이벤트 처리 event 매개변수를 활용한 마우스 이벤트 처리
마우스를 클릭할 때마다 어떤 마우스가 클릭되었는지 보여 주고 클릭한 좌표 출력 4~12행 : 마우스 클릭할 때 실행될 이벤트 함수 선언 20행 : 마우스 클릭하면 함수 호출 6~9행 : event.num값은 마우스 왼쪽 버튼 클릭했을 때 1값 가지고, 마우스 오른쪽 버튼 클릭했을 때 2 값 가짐 11행 : event.x와 event.y는 클릭한 위치의 좌표를 가짐 12행 : 18행에서 화면에 표시한 레이블의 글자 변경

30 Section04 키보드와 마우스 이벤트 처리

31 Section04 키보드와 마우스 이벤트 처리 키보드 이벤트 기본 처리 키보드 이벤트는 위젯에서 키보드가 눌리면 발생
5~6행 : 키보드가 눌릴 때 작동하는 함수 선언 event.keycode에는 눌려진 키의 숫자 값 들어 있으므로 chr() 함수를 사용하면 문자로 변환 . 11행 : <Key> 이벤트를 윈도창에 사용

32 Section04 키보드와 마우스 이벤트 처리 키보드 이벤트
Enter 를 처리하려면 Code10-16.py에서는 11행의 <Key> 대신 <Return>을 사용 대·소문자 등도 구분해서 처리 가능 소문자 r 은 11행의 <Key> 대신에 r을 사용해 처리 일반 키를 누를 때 주의할 점은 SpaceBar 는 <Space>로, < 는 <less>로 사용

33 Section05 메뉴와 대화상자 메뉴의 생성 메뉴의 구성 개념과 형식

34 Section05 메뉴와 대화상자 [파일] 메뉴 아래에 [열기]와 [종료] 하위 메뉴가 있는 코드
5행 : Menu(부모윈도)로 mainMenu 변수 생성 mainMenu : [그림 10-1]의 ‘메뉴 자체’를 나타내는 변수 6행 : 생성한 메뉴 자체를 윈도창의 메뉴로 지정 8~9행 : 상위 메뉴인 [파일] 생성, 메뉴 자체에 부착 [파일] 메뉴는 선택하고 끝나는 것이 아니라, 그 아래에 다른 메뉴가 확장되어야 하므로 add_cascade() 함수 사용 10행 : [파일] 메뉴의 하위에 [열기] 메뉴 준비 [열기] 메뉴 : 선택할 때 어떤 작동을 해야 하므로, add_command() 함수 사용 11행 : 메뉴 사이에 구분선 넣음 12행 : 같은 방식으로 하위 메뉴 생성

35 Section05 메뉴와 대화상자 메뉴를 선택 하면 작동할 수 있도록 코드 추가
5~6행 : [열기] 메뉴 선택하면 간단한 메시지창 열림 8~10행 : [종료] 메뉴를 선택하면 프로그램이 종료

36 Section05 메뉴와 대화상자 20행 : [열기] 메뉴 선택하면 무언가 작동해야 하므로
add_command() 함수 사용, 선택할 때 실행될 함수명을 command값으로 사용, 즉 [파일] 메뉴 선택하면 하위 메뉴가 확장, [열기] 메뉴를 선택하면 5행의 func_open() 함수가 실행 22행 : 20행과 같은 방식으로 하위 메뉴를 생성한다.

37 Section05 메뉴와 대화상자 대화상자의 생성과 사용
tkinter.simpledialog 모듈을 임포트한 후 askinteger() 및 askstring() 등을 사용 2행 : tkinter.simpledialog 모듈 임포트 8~9행 : 레이블을 하나 준비 11행 : askinteger(“제목”, “내용”, 옵션) 함수로 정수 입력 13행 : 입력받은 숫자를 문자열로 변경해서 레이블에 씀

38 Section05 메뉴와 대화상자 그림 파일인 GIF 파일을 선택하는 코드
Code10-20.py는 Code10-19.py의 2행과 11행만 변경 2행 : tkinter. filedialog 모듈 임포트 11행 : askopenfilename() 함수 사용 13행 : filename을 출력

39 Section05 메뉴와 대화상자

40 Section05 메뉴와 대화상자 Code10-20.py의 11~13행 변경하고 실행
11행 : asksaveasfile() 함수의 매개변수 중 mode=“w”는 쓰기 모드라는 의미, defaultextension=“.jpg”는 특별히 확 장명을 지정하지 않으면 확장명을 jpg로 붙인다는 의미이 12행 : saveFp는 자체를 text에 대입시켜서 출력 13행 : 파일 닫음

41 Section05 메뉴와 대화상자 [프로그램 2]의 완성 메뉴 처리와 파일 처리가 핵심
5~9행 : [파일 열기] 메뉴를 선택하면 실행되는 함수 askopenfilename() 함수로 파일 선택 후 선택한 파일명을 7행에서 PhotoImage() 함수로 처리 8~9행 : 레이블에 이미지 표시

42 Section05 메뉴와 대화상자 20~22행 : 선택한 GIF 윈도창에 출력하려고 레이블 준비
20행 : PhotoImage()에 별도의 매개변수 없이 빈 그림만 준비 24~30행 : 준비하는 메뉴는 앞에서 실습한 내용과 동일

43 Section05 메뉴와 대화상자

44