제5장 사용자 인터페이스

(1)

제5장 사용자 인터페이스

5.1 메뉴

실습 5-1 간단한 메뉴와 단축키 만들기 5.2 툴바

실습 5-2 간단한 툴바 만들기 5.3 상태 표시줄

실습 5-3 상태 표시줄에 팬을 만들고 문자열 출력하기 5.4 다이얼로그 바

실습 5-4 사칙연산 계산기 만들기

(2)

•

^메뉴는 해당 애플리케이션이 갖고 있는 기능을 사용자에게 알려주고, 사용자의 선택에 따라 기 능을 수행할 수 있게 하는 사용자 인터페이스이 다.

메뉴 (Menu)

(3)

•

^풀 다운 메뉴

•

^{캐스캐이딩} 메뉴

•

^팝업 메뉴 또는 문맥 메뉴

메뉴의 종류

(4)

•

^사용자가 메뉴 카테고리 하나를 선택하면 선 택된 카테고리 아래로 메뉴가 뚝 떨어지면서 애플리케이션의 기능을 작동시킬 수 있는 메 뉴항목이 나타난다.

풀다운 메뉴(pull-down menu)

(5)

•

^풀다운 메뉴에서 변형된 형태로, 메뉴 항목의 오른쪽에 또 하나의 서브 메뉴가 나타나는 메 뉴이다.

캐스캐이딩 메뉴(cascading menu)

(6)

•

^{애플리케이션} 영역의 중간에서 자유롭게 튀어 나오는 메뉴

•

^대표적인 팝업 메뉴는 오른 쪽 마우스 버튼을 클릭하면 나오는 단축 메뉴이다.

팝업 메뉴(pop-up) 또는 문맥 메뉴

(7)

•

[Resource View]의 Menu에서

IDR_MAINFRAME을 더블 클릭하면 기본 메뉴가 나타난다.

메뉴 리소스

SDI 메뉴 리소스 MDI 메뉴 리소스

(8)

기본 메뉴

[파일 메뉴] [편집 메뉴] [보기 메뉴] [도움말 메뉴]

(9)

 자원에서 메뉴 불러오기

메뉴 (Menu)

리소스 뷰 항목

Menu항목의 IDR_MAINFRAME 항목을 더블 클릭

현재 프로젝트에 설정되어 있는 메뉴

(10)

•

^기본 메뉴 상단에 있는 메뉴의 항목을 더블 클 릭하면 메뉴 항목의 속성을 설정하는 [Menu Item Properties] 대화상자가 나타나면 원하 는 속성을 설정할 수 있다.

메뉴 항목의 속성

(11)

메뉴 속성 항목

구 분 설 명

ID 메뉴 항목에 대한 리소스 ID로 메뉴 항목을 식별한다.

Caption 메뉴 항목에 출력되는 문자열로 엑세스키 설정 시 해당 문자 앞에 &를 붙 인다.

Separator 메뉴 항목들을 구분하는 분리선을 설정한다.

Pop-up 서브 메뉴를 설정하고 리소스 ID 를 갖지 않는다.

Inactive 초기에 선택할 수 없는 상태가 된다.

Break

None : 분리선이 표시되지 않는다.

Column : 부 메뉴를 컬럼으로 표시한다.

Bar: 컬럼과 유사하고, 부 메뉴의 경우 컬럼 사이에 분리선을 표시한다.

Checked 메뉴의 문자열 앞에 체크 마크를 표시한다.

Grayed 메뉴의 문자열이 회색으로 출력되며 선택할 수 없다.

Help 메뉴 항목이 메뉴의 오른쪽으로 정렬된다.

Prompt 메뉴 항목 선택 시 상태바에 출력될 문자열이다.

(12)

클래스 위저드를 이용하여 메뉴 항목 선택 시 실행 되는 함수 만들기

(13)

메뉴항목에 의해 수행되는 함수

헤더

Afx_mag 해당 함수명

Ex) afx_msg void OnLine( )

소스 매크로

ON_COMMAND(ID명,함수명)

Ex) ON_COMMAND(ID_LINE, OnLine)

소스

해당 함수 {

}

Ex) CPractice5_1View::OnLine() {

}

(14)

 간단한 메뉴와 단축키 만들기

•

메뉴를 만들고 작동하게 하는 프로그램을 작 성

•

^{단축키를 설정}

•

^{메뉴 체크표시}

실습 5-1

(15)

1)

^단일문서 기반의 프로젝트를 생성한다.

2)

^메뉴 리소스를 편집한다.

•

^메뉴를 추가하고 속성을 설정한다.

•

^기존 메뉴를 수정한다.

•

^필요 없는 메뉴를 삭제한다.

3)

^단축키를^{설정한다.}

4)

^메뉴를 동작하게 만든다

•

^각 메뉴에 대한 명령 메시지 함수를 만든다.

실습 5-1프로그램 작성순서

(16)

5)

^선택된 메뉴에 체크 표시를 한다.

•

^메뉴의 선택상황을 표시하는 멤버 변수를 추 가한다.

•

^메뉴에 대해 사용자 인터페이스 갱신 메시지 핸들러 함수를 만든다.

6)

^문맥^{메뉴를 만든다.}

•

IDR_POPUP_EDIT 문맥메뉴 바를 수정한다.

7)

^{프로그램을}^{실행시킨다.}

실습 5-1 프로그램 작성순서

(17)

•

프로그램 실행 중에 사용자가 메뉴 항목을 선택 하면 WM_COMMAND 메시지 발생

•

^{특정 명령 메시지}

•

이를 처리하는 명령 메시지 핸들러 함수를 메시 지 맵에 등록

•

어떤 명령 메시지를 처리하는 핸들러 함수를 어 느 클래스에 만들 것인가는 명령 메시지 성격에 따라 프로그래머가 결정한다.

명령 메시지 함수

(18)

•

UPDATE_COMMAND_UI 메시지는 메 뉴 항목이 표시되기 전에 보내지는 메시지로 메뉴 항목을 변경하고자 할 때 사용

•

사용자 인터페이스 갱신 메시지 핸들러 함수 라 하고 함수 이름이 OnUpdate로 시작한 다.

•

메뉴 항목을 선택 못하게 그레이 메뉴로 만들 거나

•

메뉴 항목 앞에 체크 표시를 할 때 이 메시지 함수로 처리

사용자 인터페이스 갱신 메시지 함수

(19)

 툴바

•

^한 줄 또는 여러 줄의 명령버튼을 포함하는 윈도우

•

^툴바는 메뉴 명령의 시각적인 표현이기 때문에 메뉴의 동작에 대한 구현과 매우 흡사하다.

 툴바 리소스

툴바 (Toolbar)

IDR_MAINFRAME 메뉴 IDR_MAINFRAME 256 메뉴

(20)

 툴바 항목의 속성

•

^기본 툴바 상단에 있는 툴바의 항목을 더블 클 릭하면 툴바 항목의 속성을 설정하는

[Toolbar Button Properties] 대화상자가 나 타나면 원하는 속성을 설정할 수 있다.

툴바 (Toolbar)

툴바와 연결하고자 하는 메뉴의 ID

현재 툴바의 크기

메뉴에서 입력되었 던 항목이 자동으로 출력. 출력되지 않으 면 마우스로 클릭

(21)

실습 5-2

• 간단한 툴바 만들기

•

툴바를 만드는 프로그램을 작성

•

툴바를 어떻게 만들고 작동시키는지 배우게 될 것

(22)

1)

^실습 5-1 프로젝트를 연다

2)

^툴바 비트맵을 편집한다.

•

^툴바 비트맵을 추가한다.

•

^툴바 비트 맵을 이동한다.

•

^툴바 비트맵을 삭제한다.

3)

^툴바 비트맵의 속성을 설정한다.

4)

^{프로그램을} 실행시킨다.

실습 5-2프로그램 작성순서

(23)

 메인 프레임 하단부에 위치하여 특정 항목 을 선택하면 해당 항목의 도움말이 출력되 는 형태의 윈도우

 상태 표시줄은 팬이라 불리는 표시 영역들 로 나뉜다.

•

^{고정되거나} 변화할 수 있는 크기를 갖는다.

•

^제일 왼쪽의 팬은 가변 크기 팬이다

상태 표시줄(Status Bar)

(24)

①

CStatusBar의 객체를 만든다.

②

CStatusBar::Create 함수를 사용하여 상 태표시줄 윈도우를 만든다.

③

팬을 만들고, 그 크기를 지정한다.

상태 표시줄을 만드는 단계

(25)

① ^상태 표시줄의 멤버 변수 선언(MainFrm.h)

protected: // control bar embedded members

CStatusBar m_wndStatusBar;

^②

^상태 표시줄을 분할하는 지시자 설정 (MainFrm.cpp)

static UINT indicators[ ] =

{

ID_SEPARATOR, // status line indicator ID_INDICATOR_CAPS,

ID_INDICATOR_NUM, ID_INDICATOR_SCRL,

} ;

AppWizard에서 생성된 상태 표시줄 코드

(26)

③ 윈도우 생성시 상태 표시줄을 생성하는 부분 (MainFrm.cpp에 구현)

int CMainFrame::OnCreate(LPCREATESTRUCT lpCreateStruct) {

if (CFrameWnd::OnCreate(lpCreateStruct) == -1) return -1;

if (!m_wndStatusBar.Create(this) || !m_wndStatusBar.SetIndicators(indicators,

sizeof(indicators)/sizeof(UINT))) {

TRACE0("Failed to create status bar");

return -1; // fail to create }

return 0;

}

AppWizard에서 생성된 상태 표시줄 코드

(27)

실습 5-3

• 상태 표시줄에 팬을 만들고 문자열을 출력하기

•

이번 실습은 상태 표시줄의 가변크기 팬에 그리 기 모드를 출력하고 팬을 새로 만들어 마우스 좌 표를 출력하는 프로그램을 작성

(28)

1)

^실습 5-2 프로젝트를 연다

2)

^팬에 설정할 ID를 만든다.

•

Resource symbols 대화상자에서 만든다.

3)

^새로 만든 팬의 초기 문자열과 크기를 정한다.

•

String table에서 초기 문자열과 크기를 설정 한다.

4)

^상태 표시줄에 팬을 추가한다.

5)

^상태 표시줄에 그리기 모드와 마우스 좌표를 출력한다.

6)

실습 5-3프로그램 작성 순서

(29)

 도킹 팬 윈도우

•

Visual Studio 2008 SP1 Feature Pack부터 적 용된 인터페이스 기술.

•

^도킹 팬 윈도우의 일반적인 특징은 툴 바 또는 다이얼로그 바와 같이 프레임 윈도우의 어떤 부분이라도 자유롭게 도킹할 수 있다.

•

^탭(Tab) 윈도우를 이용한 중첩이 가능하다는 점과 분할 윈도우를 이용한 영역배치를 할 수 있다.

도킹 팬(Docking Pane) 윈도우

(30)

 도킹 팬 윈도우(계속)

•

^캡션(Caption), 자동 숨기기(Auto hide), 컨텍 스트 메뉴(Context menu) 등 유용한 기능을 가 지고 있다.

•

대화상자에 포함되는 모든 컨트롤들을 처리할 수 있다. 컨트롤이 보내는 메시지도 처리 가능 하다.

•

^도킹 팬 윈도우를 가장 잘 활용하고 있는 예시 가 바로 우리가 사용하고 있는 Visual Studio이 다.

도킹 팬(Docking Pane) 윈도우

(31)

•

^도킹 팬 윈도우에 있는 키패드를 이용하여 정수 를 입력하고 버튼을 누르면 사칙연산을 수행하 는 간단한 계산기를 만드는 프로젝트이다.

•

^도킹 팬 윈도우에 대한 내용을 익힐 수 있다.

실습 5-4사칙 연산 계산기 만들기

(32)

실습 5-4

• 실행 화면

(33)

1)

^단일 문서 기반의 프로젝트를 생성한다.

2)

^{대화상자의} 리소스를 편집한다.

•

^{대화상자를} 만들고 속성을 설정한다.

•

^{대화상자에} 컨트롤을 배치하고 속성을 설정한 다.

3)

^도킹 팬 클래스를 생성한다.

4)

^도킹 팬 클래스에 메시지 핸들러 함수를 추가 한다.

5)

^계산기 도킹 팬을 생성한다.

실습 5-4프로그램 작성 순서

(34)

6)

^키패트를 눌렀을 때의 메시지 핸들러 함수를 만든다.

7)

^윈도우에 계산결과를 출력한다.

•

OnDraw()함수에서 결과를 출력한다.

8)

실습 5-4 프로그램 작성 순서

(35)

연습문제 5-1

• 뷰(View)영역에서 메뉴와 툴바를 통하여 모달 대화 상자를 출력하고 대화상자는 원하는 시계 형태로 세 팅할 수 있는 컨트롤로 구성되어 있어야 한다.

• 대화상자에서 [확인] 버튼을 누르면 뷰(View) 영역 에 대화상자의 내용이 출력되어야 한다.

(36)

연습문제 5-1

실행결과