사용자 인터페이스.

Presentation on theme: "사용자 인터페이스."— Presentation transcript:

1 사용자 인터페이스

2 강의 내용 지난 시간 강의 복습 메뉴 개요 스크롤바 실습 메뉴 실습

3 복습(1/3) 마우스 관련 메시지 발생 마우스를 움직일 때 왼쪽 버튼 클릭 왼쪽 버튼 클릭 + 드래그 왼쪽 버튼 더블 클릭
WM_MOUSEMOVE WM_LBUTTONDOWN WM_LBUTTONDOWN WM_LBUTTONDOWN WM_MOUSEMOVE WM_LBUTTONUP WM_MOUSEMOVE WM_LBUTTONUP WM_MOUSEMOVE WM_MOUSEMOVE WM_LBUTTONDBLCLK WM_MOUSEMOVE WM_MOUSEMOVE WM_LBUTTONUP WM_MOUSEMOVE WM_LBUTTONUP

4 복습(2/3) 대화상자의 WM_MOUSEMOVE 이벤트에 코드 연결 -> 속성 창에서
WM_MOUSEMOVE를 클릭하면 오른쪽에 아래쪽 화살표 단추가 나타나는데 이 단추를 클릭한 다음 <추가> OnMouseMove 클릭

5 복습(3/3) 그 후 자동으로 소스 입력 화면으로 전환 // TODO: 아래에 원하는 소스 입력

6 메뉴 용어 (1/6) 최상위 메뉴 = 메뉴 바 최상위 메뉴 = 메뉴 바

7 메뉴 용어 (2/6) 메뉴 항목 명령 항목 팝업 항목 용어 의미 ① 명령 항목 명령(Command)을 수행하는 메뉴 항목.
선택하면 WM_COMMAND 메시지가 발생한다. ② 팝업 항목 하위 메뉴를 화면에 표시하는 메뉴 항목. 선택해도 WM_COMMAND 메시지가 발생하지 않는다. 명령 항목 팝업 항목

8 메뉴 용어 (3/6) 하위 메뉴 드롭다운(drop-down) 메뉴 팝업 항목을 선택했을 때 화면에 나타나는 메뉴
최상위 메뉴 항목을 클릭했을 때 펼쳐지는 메뉴 드롭다운 메뉴 = 팝업 메뉴

9 메뉴 용어 (4/6) 컨텍스트 메뉴 = 단축 메뉴 마우스 오른쪽 버튼을 누를 때 열리는 메뉴
마우스 커서의 위치 또는 현재 작업하고 있는 내용에 따라 서로 다른 메뉴 항목이 표시됨 컨텍스트 메뉴 = 단축 메뉴 = 팝업 메뉴

10 메뉴 용어 (5/6) 팝업 메뉴 시스템 메뉴 = 윈도우 메뉴
사용자가 무엇인가를 선택했을 때 메뉴가 튀어나온다(Pop Up)는 뜻으로 만든 용어 드롭다운 메뉴와 컨텍스트 메뉴가 여기에 속함 시스템 메뉴 = 윈도우 메뉴 시스템 메뉴 = 윈도우 메뉴

11 메뉴 용어 (6/6) 액세스키와 단축키 액세스키 단축키 액세스키 단축키 메뉴가 열린 상태에서 특정 항목을 키보드로 빠르게 선택
메뉴가 열리지 않은 상태에서도 키 조합으로 메뉴 항목의 기능을 곧바로 실행 액세스키 단축키

12 메뉴 클래스 MFC 클래스 CMenu CCmdUI 메뉴를 다룰 수 있는 다양한 함수 제공
CObject의 파생 클래스가 아닌 독립된 클래스 메뉴와 툴바 및 상태바에 필요한 기능 지원

13 지난 시간의 마우스 실습 프로그래밍에서부터 시작
실습 4 – 사용자 인터페이스 메뉴와 스크롤바 지난 시간의 마우스 실습 프로그래밍에서부터 시작

14 실습 4 : 사용자 인터페이스 1단계 : Visual C++ 시작

15 실습 4: 사용자 인터페이스 2단계 : 프로젝트 만들기 파일(F) > 새로 만들기(N) > 프로젝트(P)…

16 실습 4: 사용자 인터페이스 2단계 : 프로젝트 만들기
새 프로젝트 창에서 1. “프로젝트 형식(P)”에서 MFC 선택 2. “Visual Studio에 설치되어 있는 템플릿”에서 MFC 응용 프로그램 선택 3. “위치(L):”에서 가장 오른쪽 찾아보기(B)… 클릭해서 작업할 디렉터리 찾기 4. “이름(N)”에서 프로젝트 이름 입력 : “UserInterface_(자신의 이름)” 확인 단추 클릭

17 실습 4: 사용자 인터페이스 3단계 : 응용 프로그램 마법사 응용 프로그램 마법사 창 오른쪽에서 응용 프로그램 종류 선택

18 실습 4: 사용자 인터페이스 3단계 : 응용 프로그램 마법사
응용 프로그램 종류:에서 다중 문서(M)을 대화상자기반(D)로 변경 아래에서 다음> 단추 클릭

19 실습 4: 사용자 인터페이스 3단계 : 응용 프로그램 마법사 주 프레임 스타일:에서 최소화 상자와 최대화 상자 선택
아래에서 다음> 단추 클릭

20 실습 4: 사용자 인터페이스 3단계 : 응용 프로그램 마법사 이 상태 그래도 아래에서 다음> 단추 클릭

21 실습 4: 사용자 인터페이스 3단계 : 응용 프로그램 마법사 생성된 클래스에서 **App와 **Dlg 두 개 확인
아래에서 마침 단추 클릭

22 실습 4 : 사용자 인터페이스 4단계 : 완료. 다시 Visual Studio로 돌아온 화면

23 시각 요소 설계 리소스 뷰 선택 OR

24 시각 요소 설계 도구 상자 표시 및 고정하기

25 시각 요소 설계 다음과 같이 대화상자를 구성하고 속성을 변경 개체 속성 변경할 값 대화상자 Caption 자신의 이름
다음과 같이 대화상자를 구성하고 속성을 변경 개체 속성 변경할 값 대화상자 Caption 자신의 이름 Group Box ID Caption IDC_STATIC 사용자 인터페이스 Static Text ID IDC_STATIC2 선 두께 Edit Control IDC_EDIT_PENSIZE Horizontal Scroll Bar ID_SCROLLBAR_PENSIZE

26 그림 그릴 배경 색상 변경 배경을 원하는 색으로 변경하기 위해 솔루션 탐색기에서 UserInterface(XXX)Dlg.cpp로 이동한 다음 OnPaint 함수를 찾아서 아래처럼 입력 CTRL+F5로 배경색 확인 참고 브러시(brush)는 배경 펜(pen)은 실제 그림 그리는 방식 WHITE_BRUSH : 흰색 배경 BLACK_BRUSH : 검은색 배경 DKGRAY_BRUSH : 어두운 회색 배경 GRAY_BRUSH : 회색 배경 LTGRAY_BRUSH : 밝은 회색 배경   

27 대화상자의 WM_MOUSEMOVE 이벤트에 코드 연결
WM_MOUSEMOVE를 클릭하면 오른쪽에 아래쪽 화살표 단추가 나타나는데 이 단추를 클릭한 다음 <추가> OnMouseMove 클릭

28 코드 개선 1 솔루션 탐색기에서 MouseANDKeyboard(이름)Dlg.h 클릭 소스에서 class CMouseANDKeyboard(이름)Dlg : public CDialog 선언부를 찾아서 선 위치를 기억할 변수 입력 int m_PrevX; int m_PrevY; 이 때 이 멤버 변수가 public: 이후에 입력되어야 한다는 점에 주의!

29 코드 개선 1 이제 솔루션 탐색기에서 MouseANDKeyboard(이름)Dlg.cpp 클릭
이전에 소스를 입력한 void CMouseANDKeyboardDlg::OnMouseMove(UINT nFlags, CPoint point) 함수 찾기 이제 점을 찍는 것이 아니라 선을 그려야 하기 때문에 SetPixel 함수를 comment 처리 그 후 선을 그리기 위한 코드 입력 이 때 방금 전 *.h 파일의 클래스 정의 에서 추가한 m_PrevX와 m_PrevY는 직전의 마우스 위치를 기억하는 역할 수행 dc.MoveTo(x,y)는 선을 그릴 시작 위치를 지정 dc.LineTo(x,y)는 선의 끝 위치를 지정 CTRL + F5 !!

30 코드 개선 2 리소스 뷰 > 속성 창에서 메시지 단추(왼쪽에서 4번째)를 클릭하고 스크롤 해서 WM_LBUTTONDOWN 이벤트 메시지 더블 클릭 WM_LBUTTONDOWN 메시지는 마우스 왼쪽 단추를 누르는 순간마다 생성되는 이벤트 (WM_LBUTTONUP은 손을 떼는 순간) 이 때 오른쪽에 나타나는 아래 쪽 화살표를 클릭해서 OnLButtonDown 함수 추가

31 코드 개선 2 다음 처럼 소스 코드 추가 이 코드의 의미: 마우스 왼쪽 단추를 누를 때 마다 m_PrevX와 m_PrevY를 현재 마우스 커서 위치값으로 재설정(즉, 과거의 값을 무시하고 새 값을 입력) 이렇게 하지 않았던 경우와 비교 : m_PrevX와 m_PrevY에 지난 번 마우스 커서 위치가 그대로 남아 있었기 때문에 항상 한 붓 그리기로 이어지게 됨

32 선 속성 변경 펜 클래스(CPen)를 추가한 다음 속성을 변경해서 선 색상과 두께, 유형을 변경할 수 있음
OnMouseMove 함수에 다음 라인 추가

33 선 속성 변경 참고 : CPen 클래스의 여러 특성 CPen Pen( 선 유형, int 선 굵기, RGB(R, G, B) );
선 유형 PS_SOLID : 실선 PS_DASH : 굵은 점선 PS_DOT : 세밀한 점선 PS_DASHDOT : PS_DASH + PS_DOT + PS_DASH + PS_DOT … PS_DASHDOTDOT : PS_DASH + PS_DOT + PS_DOT + PS_DASH +… PS_NULL : 선 그리지 않음 PS_INSIDEFRAME : 선을 그릴 때는 PS_SOLID와 차이가 없지만 이 펜을 이용해서 도형을 그릴 때는 외곽선의 안쪽과 바깥쪽이 달라짐 선 굵기 : 1 부터 R : 0~255 G : 0~255 B : 0~255

34 스크롤바로 선 두께 변경하기 선 두께를 기억할 멤버 변수 추가하기
직접 솔루션 탐색기를 이용해서 헤더 파일(*.h)의 클래스 정의 부분에서 멤버 변수를 추가할 수도 있고 클래스 뷰에서 해당 클래스(여기에서는 CUserInterface(XXX)Dlg )를 마우스 오른쪽 단추 클릭 > 추가 > 변수 추가… 그 후 선 두께를 조정하기 위한 int 형 변수 m_iPenSize 추가

35 스크롤바로 선 두께 변경하기 스크롤바와 변수 (컨트롤 변수) 연결하기
그 후 컨트롤 변수 선택 상자를 클릭하고 아래처럼 변수 이름 설정 이 변수는 실제로 스크롤바 클래스의 인스턴스가 되며 UserInterface 대화상자 클래스 내 멤버 변수가 됨

36 스크롤바로 선 두께 변경하기 Edit Control에 선 두께를 표시하기 위한 변수(int 형) 추가하기
멤버 변수 추가 마법사에서 이 변수는 클래스가 아니라 int 형 변수이기 때문에 컨트롤 변수 선택 상자를 반드시 선택 해제 하고 변수 형식으로 int, 변수 이름으로 m_iEditSize 입력

37 스크롤바로 선 두께 변경하기 지금까지 추가한 멤버 변수 확인 (솔루션 탐색기, UserInterface(XXX)Dlg.h 파일 내)

38 스크롤바로 선 두께 변경하기 OnInitDialog() 함수는 대화상자가 처음 뜰 때 가장 먼저 실행되는 함수
지금까지 추가한 멤버 변수 초기화 초기화는 OnInitDialog() 함수에서 수행 OnInitDialog() 함수는 대화상자가 처음 뜰 때 가장 먼저 실행되는 함수 UpdateData(FALSE); 변수(소스 코드) -> 컨트롤(화면에 표시) UpdateData(TRUE); 변수 (소스 코드) <- 컨트롤 (화면에 표시)

39 스크롤바로 선 두께 변경하기 스크롤 이벤트 처리를 위한 이벤트 핸들러 만들기
사용자가 스크롤바를 조작하면 수평 방향 스크롤바인 경우 WM_HSCROLL 메시지가 발생하고 수직 방향 스크롤바인 경우 WM_VSCROLL 메시지 발생 현재 만든 스크롤바는 수평 방향(Horizontal)이기 때문에 WM_HSCROLL 메시지 발생 리소스 뷰에서 메인 대화상자를 선택한 상태에서 속성 창의 왼쪽에서 4번째 있는 메시지 단추를 클릭한 다음 WM_HSCROLL을 찾은 다음 오른쪽 아래 방향 화살표를 클릭해서 OnHScroll 함수 생성 그 후 오른쪽 코드 입력 CTRL+F5!

40 스크롤바로 선 두께 변경하기 스크롤 이벤트 처리를 위한 이벤트 핸들러 만들기
사용자가 스크롤바를 조작하면 수평 방향 스크롤바인 경우 WM_HSCROLL 메시지가 발생하고 수직 방향 스크롤바인 경우 WM_VSCROLL 메시지 발생 현재 만든 스크롤바는 수평 방향(Horizontal)이기 때문에 WM_HSCROLL 메시지 발생 리소스 뷰에서 메인 대화상자를 선택한 상태에서 속성 창의 왼쪽에서 4번째 있는 메시지 단추를 클릭한 다음 WM_HSCROLL을 찾은 다음 오른쪽 아래 방향 화살표를 클릭해서 OnHScroll 함수 생성 그 후 오른쪽 코드 입력 CTRL+F5!

41 스크롤바로 선 두께 변경하기 펜 크기 반영을 위해 OnMouseMove를 다음 처럼 수정 CTRL+F5!
그 후 스크롤바를 변경하면서 두께 변경 확인

42 스크롤바로 선 두께 변경하기 소스 코드 설명 스크롤바는 클릭하는 위치에 따라 nSBCode의 값이 다양하게 반환됨
이때는 클릭이 아니라 끌어서 이동

43 메뉴 추가 이제 메뉴를 추가해서 1) 선 색을 검은색/빨간색/파란색/녹색 중 하나로 선택 2) 메뉴에서 선 두께를 가늘게/중간/굵게 (m_iPenSize가 각각 1, 10, 20)로 설정 3) 창 닫기 실행 리소스 뷰에서 제일 상단에 있는 UserInterface(XXX)를 마우스 오른쪽 단추로 클릭한 후 추가 > 리소스 선택 그 후 리소스 추가 창에서 Menu 선택 후 새로 만들기 클릭 새로 만든 메뉴가 선택된 상태에서 속성 창에서 ID를 IDR_MENU로 변경

44 메뉴 디자인 리소스 뷰에서 IDR_MENU를 선택한 다음 여기에 입력 을 선택한 다음 ENTER 키 누름
이 때 나타나는 빈 칸에 메뉴라고 입력 같은 방법으로 계속 아래쪽으로 색 변경, Separator, 선 굵기 변경 입력 Separator를 다시 클릭 한 다음 속성 창에서 Separator 항목을 True로 변경 (이 때 메뉴에서 이 항목이 구분선으로 표시됨) 그 후 색 변경을 다시 클릭한 다음 오른쪽 한 칸 이동 후 아래쪽으로 검은색(&B), 빨간색(&R), 녹색(&G), 파란색(&B) 입력 그 다음 선 굵기 변경을 클릭한 다음 동일한 방식으로 그림처럼 입력 그 후 제일 위 메뉴 오른쪽의 빈 칸을 클릭해서 마지막 그림처럼 입력

45 메뉴 ID 지정 메뉴 항목 ID 검은색 ID_COLOR_BLACK 빨간색 ID_COLOR_RED 녹색
이렇게 디자인한 메뉴에서 가장 마지막 단계의 메뉴 항목 (예. 검은색(B), 끝내기, 중간(M) 등)에 ID와 이벤트 처리기 등을 연결. 각 마지막 단계 메뉴 항목을 선택한 다음 속성 창에서 ID를 다음과 같이 수정함 메뉴 항목 ID 검은색 ID_COLOR_BLACK 빨간색 ID_COLOR_RED 녹색 ID_COLOR_GREEN 파란색 ID_COLOR_BLUE 가늘게 ID_THIN 중간 ID_MIDDLE 굵게 ID_THICK 끝내기 ID_EXIT

46 색상 설정을 위한 변수 추가 색상 지정을 위한 멤버 변수 추가하기
직접 솔루션 탐색기를 이용해서 헤더 파일(*.h)의 클래스 정의 부분에서 멤버 변수를 추가할 수도 있고 클래스 뷰에서 해당 클래스(여기에서는 CUserInterface(XXX)Dlg )를 마우스 오른쪽 단추 클릭 > 추가 > 변수 추가… 그 후 색을 조정하기 위한 int 형 변수 3개 (m_iR, m_iG, m_iB) 추가

47 색상 설정을 위한 변수 추가 초기화 (검은색) 및 코드 수정

48 메뉴 항목 이벤트 처리기 추가 이제 해야 할 일은 사용자가 메뉴 항목을 클릭했을 때 처리해야 할 일을 지정할 단계
제일 먼저 끝내기(X) 항목 처리부터 시작 리소스 뷰에서 끝내기(X)를 마우스 오른쪽 단추로 클릭한 다음 이벤트 처리기 추가 선택 이벤트 처리기 마법사에서 메시지 형식으로 COMMAND, 클래스 목록에서 반드시 CUserInterface(XXX)Dlg 선택!!! 소스 코드 입력

49 메뉴 항목 이벤트 처리기 추가 동일한 방식으로 색 변경 아래의 하위 항목들의 이벤트 처리기 추가
주의!! 이벤트 처리기 마법사에서 메시지 형식으로 COMMAND, 클래스 목록에서 반드시 CUserInterface(XXX)Dlg 선택!!! 소스 코드 입력

50 메뉴 항목 이벤트 처리기 추가 동일한 방식으로 선 굵기 변경 아래의 하위 항목들의 이벤트 처리기 추가
주의!! 이벤트 처리기 마법사에서 메시지 형식으로 COMMAND, 클래스 목록에서 반드시 CUserInterface(XXX)Dlg 선택!!! 소스 코드 입력

51 메뉴를 대화상자에 연결 직전까지 코딩을 마친 후 CTRL+F5를 눌러도 대화상자에 메뉴가 나타나지 않음
아직 메뉴를 대화상자 클래스에 연결하지 않았기 때문 앞서 만든 메뉴를 대화상자에 연결하려면 리소스 뷰로 이동한 다음 대화상자를 선택한 상태에서 속성 > 메뉴 > IDR_MENU 선택 CTRL+F5!!

52 최종 결과

53 결과 제출 Zip 압축 > Debug 또는 Release 폴더 삭제 후 제출

54 과제 1 (필수 기본 과제) A. 스핀 컨트롤로 색상 조절 오늘 실습한 파일에 추가해서 스핀 컨트롤 3개와 Edit Control 3개를 추가하고 각각 R, G, B 값을 조정함으로써 선의 색을 변경할 수 있도록 제작 각 스핀 컨트롤의 범위는 0~255 사이 정수. Edit Control에서 현재 값 표시 스핀 컨트롤 참고 자료 : 비주얼 C++ MFC 쉽게 따라하기 Page 119~ B. 메뉴에 선 유형 변경 항목을 추가한 다음 선 유형 변경 메뉴 다음에 선 유형 변경을 추가하고 그 아래에 실선/세밀한 점선/굵은 점선/DashDot/DashDotDot을 추가해서 선 유형 변경 (이 PPT 33 페이지 참고)

55 과제 1 (필수 기본 과제) C. 지우개 추가 – 지우개는 두 가지 방식으로 작동 가능해야 함
C1. 메뉴 이용 메뉴 > 색 변경 항목에서 이미 제작한 색상 항목들 아래 구분자(Separator)를 넣고 그 다음 지우개 항목 추가 지우개를 선택하면 선 그리기 모드 대신 지우개 모드로 전환되어 마우스 왼쪽 단추를 클릭한 상태로 화면 상을 이동하면 그전에 그려졌던 선들이 지워지도록 프로그래밍 C2. 마우스 오른쪽 단추 이용 마우스 오른쪽 단추를 클릭한 상태로 이동하면 지우개로 지워지도록 프로그래밍 (힌트: 배경색이 처음에 흰색 RGB(255,255,255)으로 설정됨)

56 과제 1 (선택 과제) O. 스핀 컨트롤 조작 시 직접 색상을 변경할 수 있도록 프로그래밍 기본 과제에 더해서 RGB 스핀 컨트롤을 변경할 때 선 색을 쉽게 알 수 있도록 아래 쪽에 컬러 사각형을 그려서 표현 참고 자료 : 비주얼 C++ MFC 쉽게 따라하기 Page 99~

57 제출일 10월 15일 (목) 수업 시간 전까지