연습: MFC로 리치 클라이언트 응용 프로그램 만들기

아티클
01/05/2008

다음 연습 과정에서는 MFC 기반 리치 클라이언트 응용 프로그램을 만드는 절차와 Visual Studio .NET의 다양한 기능에 대해 설명합니다.

이 연습을 진행하는 동안 다음과 같은 작업을 수행하게 됩니다.

기존 데이터베이스의 데이터를 표시하고 여러 가지 대화 상자를 사용하여 다음과 같은 기능을 표시하는 MFC 기반 솔루션을 설계합니다.
- 창 없는 ActiveX 컨트롤 호스팅
- 동적 HTML(DHTML) 대화 상자 사용
- 기존 XML Web services를 사용하여 응용 프로그램 사용자 확인

연습 과정을 완료하려면 기존 데이터베이스와 하나 이상의 검색 가능한 테이블을 제공해야 합니다.

참고

이 연습 과정에서는 예제 데이터베이스와 테이블로 pubs 데이터베이스와 authors 테이블을 사용합니다.

MFC 리치 클라이언트 응용 프로그램 만들기

MFC 응용 프로그램을 만들려면

파일 메뉴에서 새로 만들기를 클릭한 다음 프로젝트를 클릭합니다.

새 프로젝트 대화 상자가 나타납니다.
프로젝트 형식 창에서 Visual C++ 프로젝트를 클릭하고 템플릿 창에서 MFC 응용 프로그램 아이콘을 클릭합니다.
이름 상자에 MyProject를 입력합니다.
확인을 클릭하여 대화 상자를 닫고 MFC 응용 프로그램 마법사를 엽니다.

MFC 응용 프로그램 마법사를 사용하여, 데이터베이스 액세스를 지원하고 리치 크라이언트 응용 프로그램의 여러 기능을 표시하도록 프로젝트를 수정할 수 있습니다.

참고

이 연습 과정에서는 액세스되고 있는 서버가 SQL 서버이고 해당 서버에 pubs 데이터베이스가 있다고 가정합니다.

데이터베이스 지원을 구현하려면

MFC 응용 프로그램 마법사에서 데이터베이스 지원을 선택합니다.
파일을 지원하는 데이터베이스 뷰 옵션을 선택합니다.
데이터 소스 단추를 클릭합니다.
OLE DB 공급자 목록 상자에서 Microsoft OLE DB Provider for SQL Server 항목을 클릭하고 다음을 클릭합니다.
기존의 서버 이름을 입력하거나 선택합니다.
Windows NT의 통합 보안 사용을 선택합니다.
pubs 데이터베이스를 선택합니다.
확인 단추를 클릭하여 연결합니다.
데이터베이스 개체 선택 대화 상자에서 authors 테이블을 선택합니다.
확인을 선택하여 대화 상자를 닫습니다.
마침을 클릭하여 프레임워크 응용 프로그램을 만듭니다.
프로젝트를 만든 후 MyProjectSet.h 파일에서 #error 줄을 제거해야 합니다.

프레임워크 응용 프로그램이 만들어지면 주요 기능을 추가할 수 있습니다.

기존 데이터베이스에서 데이터 액세스 및 표시

이 단원에서는 간단한 폼과 컨트롤을 사용하여 authors 테이블의 데이터에 액세스하고 표시하는 방법을 보여 줍니다. 이 예제는 전체적인 과정만 설명하므로 여기에 나오는 쿼리 및 표시는 간단합니다. 쿼리 결과, 즉 테이블에 있는 모든 저자는 목록 상자에 표시됩니다.

MyProject 응용 프로그램에는 리소스 뷰의 Dialog 노드에 이미 IDD_MYPROJECT_FORM이라는 폼 개체가 들어 있습니다. 이 폼을 수정하여 authors 테이블에서 간단한 저자 목록을 표시할 수 있습니다.

폼을 수정하려면

리소스 뷰에서 프로젝트를 확장하고 Dialog 노드를 확장한 다음 기본 폼 개체(IDD_MYPROJECT_FORM)를 두 번 클릭합니다.
List Box 컨트롤을 기본 폼으로 끌어 옵니다.
List Box 컨트롤을 마우스 오른쪽 단추로 클릭한 다음 바로 가기 메뉴에서 변수 추가를 클릭합니다.

멤버 변수 추가 마법사가 나타납니다.
변수 이름 상자에 m_DataList를 입력하고 마침을 클릭합니다.
Button 컨트롤을 기본 폼으로 끌어 옵니다. 속성 창에서 Caption 상자의 내용을 Control Host로 변경합니다.
Button 컨트롤을 기본 폼으로 끌어 옵니다. 속성 창에서 Caption 상자의 내용을 DHTML Dialog로 변경합니다.

참고

이 두 컨트롤은 나중에 연습 과정에서 응용 프로그램의 다른 기능에 액세스할 때 사용됩니다.

쿼리 결과를 표시하려면

클래스 뷰에서 프로젝트 노드를 확장하고 CMyProjectView 클래스의 OnInitialUpdate 메서드를 두 번 클릭합니다.

함수에서 기존 코드 뒤에 다음 코드를 추가합니다.

   HRESULT hr = S_OK;
   TCHAR szAuthor[80];

   CMyProjectSet &dbset = GetDocument()->m_MyProjectSet;
   [db_command(name="cmd", source_name="dbset", hresult=hr)
   {
      SELECT au_lname
      ([bindto]szAuthor)
      FROM AUTHORS
   }];

   while(cmd.MoveNext() == S_OK)
      m_DataList.InsertString(-1, szAuthor);

이 코드는 db_command 특성을 사용하여 테이블에 있는 현재 모든 저자의 성으로 문서 개체(m_MyProjectSet)의 데이터 집합을 초기화합니다.

빌드 메뉴에서 솔루션 빌드를 클릭합니다.
디버그 메뉴에서 디버깅하지 않고 시작을 클릭합니다.

쿼리 결과가 자식 뷰 폼의 목록 상자에 표시됩니다.

창 없는 ActiveX 컨트롤 만들기 및 호스팅

리치 클라이언트 응용 프로그램에서 그 다음으로 수정해야 하는 것은 간단한 창 없는 사용자 지정 컨트롤을 호스팅하는 대화 상자입니다. 일단 간단한 이벤트가 포함된 사용자 지정 ActiveX 컨트롤을 만들어야 합니다. 그러면 컨트롤이 들어 있고 컨트롤 이벤트를 처리하는 대화 상자 개체가 만들어집니다.

사용자 지정 컨트롤을 만들려면

솔루션 탐색기에서 MyProject 솔루션을 마우스 오른쪽 단추로 클릭합니다.
바로 가기 메뉴에서 추가를 클릭한 다음 새 프로젝트를 클릭합니다.

새 프로젝트 대화 상자가 나타납니다.
프로젝트 형식 창에서 Visual C++ 프로젝트를 선택하고 템플릿 창에서 ATL 프로젝트 아이콘을 클릭합니다.
새 프로젝트의 이름으로 CustomCtl을 입력하고 확인을 클릭합니다.

ATL 프로젝트 마법사가 나타납니다.
마침을 클릭하여 기본 설정대로 프로젝트를 만듭니다.
CustomCtl 프로젝트를 마우스 오른쪽 단추로 클릭합니다.
바로 가기 메뉴에서 추가를 클릭한 다음 클래스 추가를 클릭합니다.

클래스 추가 대화 상자가 나타납니다.
ATL 컨트롤 항목을 두 번 클릭합니다.

그러면 ATL 컨트롤 마법사가 표시됩니다.
ATL 컨트롤 마법사에서 약식 이름 상자에 MyCtl을 입력합니다.
옵션 페이지에서 연결 지점을 선택합니다.
마침을 클릭하여 사용자 지정 컨트롤 개체를 만듭니다.

컨트롤이 만들어지면 Click이라는 간단한 이벤트를 추가합니다. 이 이벤트는 컨트롤 영역 안에서 마우스를 클릭할 때마다 컨트롤에 의해 실행됩니다.

Click 이벤트를 만들려면

클래스 뷰에서 CustomCtl 노드를 확장합니다.
사용자 지정 컨트롤(_IMyCtlEvents)의 이벤트 인터페이스를 마우스 오른쪽 단추로 클릭합니다.
바로 가기 메뉴에서 추가를 클릭한 다음 메서드 추가를 클릭합니다.
메서드 추가 마법사를 사용하여 다음 값을 입력합니다.
- 반환 형식: void
- 메서드 이름: Click
마침을 클릭하여 Click 이벤트를 만듭니다.
클래스 뷰에서 컨트롤 클래스(CMyCtl)를 선택합니다.
속성 창에서 메시지 단추를 클릭하고 WM_LBUTTONDOWN 메시지의 OnLButtonDown처리기를 추가합니다.
처리기 본문에 다음 코드를 추가합니다.
```
   Click();
   return 0;
```
빌드 메뉴에서 솔루션 빌드를 클릭합니다.

솔루션이 빌드되면 간단한 대화 상자에서 컨트롤을 호스팅할 수 있습니다.

컨트롤을 호스팅하려면

리소스 뷰에서 MyProject 솔루션을 마우스 오른쪽 단추로 클릭합니다.
바로 가기 메뉴에서 추가를 클릭한 다음 리소스 추가를 클릭합니다.
Dialog 항목을 클릭하고 New를 클릭합니다.
IDD_DIALOG1 대화 상자를 마우스 오른쪽 단추로 클릭한 다음 바로 가기 메뉴에서 클래스 추가를 클릭합니다.

MFC 클래스 마법사가 나타납니다.
MFC 클래스 마법사에서 다음 값을 입력합니다.
- 클래스 이름: CMyCtlDlg
- 기본 클래스: CDialog
마침을 클릭합니다.
IDD_DIALOG1 대화 상자를 마우스 오른쪽 단추로 클릭한 다음 바로 가기 메뉴에서 ActiveX 컨트롤 삽입을 선택합니다.
ActiveX 컨트롤 삽입 대화 상자에서 CMyCtl 개체를 선택하고 확인을 클릭하여 컨트롤을 추가합니다.
대화 상자 템플릿에서 ActiveX 컨트롤을 선택합니다.
속성 창에서 컨트롤 이벤트 단추를 클릭하고 Click 이벤트에 대한 ClickMyctl1 처리기를 추가합니다.
이벤트 처리기의 본문에 다음 코드를 추가합니다.
```
   AfxMessageBox("Click event fired");
```

최종 단계에서 대화 상자를 리치 클라이언트 응용 프로그램에 연결합니다. 연결은 기존 데이터베이스에서 데이터 액세스 및 표시 항목에서 만든 Control Host 단추의 처리기에 있는 코드를 통해 이루어집니다.

Control Host 대화 상자를 표시하려면

리소스 뷰에서 MyProject 솔루션에 대한 리소스 파일의 Dialog 노드에 있는 IDD_MYPROJECT_FORM을 두 번 클릭하여 기본 폼을 표시합니다.
앞에서 추가한 Control Host 단추를 두 번 클릭합니다.
처리기 함수에 다음 코드를 추가합니다.
```
   CMyCtlDlg dlg;
   dlg.DoModal( );
```
현재 소스 파일의 마지막 #include 문 뒤에 다음 코드를 추가합니다.
```
#include "MyCtlDlg.h"
```
이 코드는 컨트롤 호스트 대화 상자를 구현하는 클래스의 .h 파일을 포함시킵니다.
빌드 메뉴에서 솔루션 빌드를 클릭합니다.
디버그 메뉴에서 디버깅하지 않고 시작을 클릭합니다.

Control Host 단추를 누르면 Control Host 대화 상자를 호출할 수 있으며 컨트롤 내에서 마우스 왼쪽 단추를 클릭하면 사용자 지정 Click 이벤트를 발생시킬 수 있습니다.

DHTML 대화 상자 구현

리치 클라이언트 응용 프로그램의 또 다른 특징은 대화 상자가 전형적인 대화 상자 리소스 대신 HTML을 사용자 인터페이스로 사용한다는 점입니다. 이 연습 과정의 목적에 맞춰, 간단한 비트맵을 표시하는 이미지 컨트롤이 들어 있는 간단한 DHTML 대화 상자를 구현해 봅니다.

DHTML 대화 상자를 구현하려면

리소스 뷰에서 MyProject 프로젝트를 마우스 오른쪽 단추로 클릭합니다.
바로 가기 메뉴에서 추가를 클릭한 다음 리소스 추가를 클릭합니다.
Dialog 항목을 클릭하고 새로 만들기를 클릭하여 새 대화 상자를 만듭니다.
대화 상자 템플릿에서 확인 및 취소 단추를 제거합니다. 이러한 단추는 다음에 나오는 단계에서 HTML로 구현됩니다.
IDD_DIALOG2 대화 상자 폼을 마우스 오른쪽 단추로 클릭한 다음 클래스 추가를 선택합니다.
다음 값을 입력합니다.
- 클래스 이름: CMyDhtmlDlg
- 기본 클래스: CDHtmlDialog
마침을 클릭합니다.
리소스 뷰의 HTML 노드에서 IDR_HTML_MYDHTMLDLG 항목을 두 번 클릭하고 디자인 창에서 HTML 탭을 클릭하여 연결된 HTML 파일을 편집합니다.
기존 텍스트(예: TODO: ?©u169 ©±âa¿¡ ÄAÁAÆ®?ÑÀA»u187 ??èÄA?ÇÕO?Ï?Ù.)를 This is the text content of my DHTML dialog box로 바꿉니다.

앞에서 구현한 Control Host 대화 상자와 마찬가지로 이 대화 상자는 사용자가 응용 프로그램의 기본 폼에서 단추(DHTML Dialog)를 누를 때 표시됩니다.

DHTML 대화 상자를 표시하려면

리소스 뷰에서 MyProject 솔루션에 대한 리소스 파일의 Dialog 노드에 있는 IDD_MYPROJECT_FORM을 두 번 클릭하여 기본 폼을 표시합니다.
앞에서 추가한 DHTML Dialog 단추를 두 번 클릭합니다.
처리기 함수에 다음 코드를 추가합니다.
```
   CMyDhtmlDlg dlg;
   dlg.DoModal( );
```
현재 소스 파일의 마지막 #include 문 뒤에 다음 코드를 추가합니다.
```
#include "MyDhtmlDlg.h"
```
이 코드는 DHTML 대화 상자를 구현하는 클래스의 .h 파일을 포함시킵니다.
빌드 메뉴에서 솔루션 빌드를 클릭합니다.
디버그 메뉴에서 디버깅하지 않고 시작을 클릭합니다.

대화 상자가 나타나면 DHTML Dialog 단추를 눌러 DHTML 대화 상자를 엽니다.

DHTML 대화 상자에 대한 자세한 내용과 예제는 CDHtmlDialog 클래스 및 DHtmlExplore 샘플을 참조하십시오.

기존 XML Web services 만들기 및 사용

때로는 리치 클라이언트 응용 프로그램이 기존 데이터베이스에 리치 프런트 엔드를 제공함으로써 외부 XML Web services와 상호 작용합니다. 그러면 사용자가 익숙한 방법 또는 그래픽 방식으로 데이터와 상호 작용할 수 있습니다.

이 단계에서는 Microsoft IIS(인터넷 정보 서비스)를 사용하는 웹 서버에서 실행되도록 설계된 간단한 XML Web services를 만들어 봅니다.

XML Web services를 만들려면

파일 메뉴에서 새로 만들기를 클릭한 다음 프로젝트를 클릭합니다.

새 프로젝트 대화 상자가 나타납니다.
프로젝트 형식 창에서 Visual Basic 프로젝트 또는 Visual C# 프로젝트를 클릭하고, 템플릿 창에서 ASP.NET 웹 서비스 아이콘을 클릭합니다.
위치 상자에 https://localhost/MyService를 입력합니다.
확인을 클릭하여 대화 상자를 닫고 솔루션을 만듭니다.

XML Web services는 공통적으로 응용 프로그램의 각 사용자의 유효성 검사를 수행합니다. 솔루션을 만든 후에는 간단한 유효성 검사 메서드를 구현할 수 있습니다. 이 유효성 검사 루틴은 매우 간단하기 때문에 개념을 확실하게 설명할 수 있습니다.

솔루션이 만들어지면 유효성 검사 메서드를 Service1.asmx 소스 파일에 추가합니다. 이것을 수행하려면 Service1.asmx.cs 디자인 화면을 마우스 오른쪽 단추로 클릭한 다음 코드 보기를 선택합니다. 파일의 끝에서 HelloWorld 웹 메서드를 다음 코드로 바꿉니다.

' Visual Basic
<WebMethod()> Function Validate(ByVal s1 As String, ByVal s2 As String) As Boolean
   Return s1 = s2
End Function

// C#
[WebMethod]
   public bool Validate(string s1, string s2)
   {
    return s1 == s2;
   }

소스 파일을 수정한 후에는 솔루션을 빌드합니다.

XML Web services가 만들어지면 웹 참조 추가 대화 상자를 사용하여 웹 참조를 추가하고 구성할 수 있습니다.

클라이언트 응용 프로그램에 웹 참조를 추가하려면

MyProject 솔루션을 엽니다.
솔루션 탐색기에서 MyProject 프로젝트를 마우스 오른쪽 단추로 클릭한 다음 웹 참조 추가를 선택합니다.

웹 참조 추가 대화 상자가 나타납니다.
찾아보기에서 로컬 컴퓨터의 웹 서비스를 선택합니다. 로컬 컴퓨터에 있는 XML Web services 목록이 표시되면 방금 만든 서비스(Service1)를 선택합니다. 웹 서비스가 있으면 왼쪽 창에 서비스 설명이 나타나고 참조 추가 단추가 활성화됩니다. 웹 서비스의 .asmx 파일에 대한 URL 파일도 URL 상자에 다음과 같이 나타납니다.
```
https://localhost/MyService/Service1.asmx
```
참조 추가 단추를 클릭합니다.

웹 참조가 추가되면 응용 프로그램과 XML Web services 간의 상호 작용을 보여 주는 유효성 검사 대화 상자를 추가합니다.

유효성 검사 대화 상자를 추가하려면

리소스 뷰에서 MyProject 프로젝트를 마우스 오른쪽 단추로 클릭합니다.
바로 가기 메뉴에서 추가를 클릭한 다음 리소스 추가를 클릭합니다.
Dialog 항목을 두 번 클릭합니다.
IDD_DIALOG3 대화 상자 폼을 두 번 클릭합니다.

MFC 클래스 마법사가 나타납니다.
다음 값을 입력합니다.
- 클래스 이름: CMyValidateDlg
- 기본 클래스: CDialog
마침을 클릭합니다.

대화 상자가 만들어졌으므로 이제 컨트롤을 추가하여 사용자에게 유효성 검사 서비스를 제공합니다.

사용자의 유효성 검사를 수행하려면

Edit control 컨트롤 두 개를 IDD_DIALOG3 대화 상자 폼에 끌어 옵니다.
첫 번째 Edit control을 마우스 오른쪽 단추로 클릭합니다.
바로 가기 메뉴에서 변수 추가를 선택합니다.
변수 이름 상자에 m_Name을 입력합니다.
범주 드롭다운 메뉴에서 Value를 선택합니다.
마침을 클릭합니다.
두 번째 Edit control 컨트롤을 마우스 오른쪽 단추로 클릭합니다.
Value 범주의 m_Password라는 다른 변수를 추가합니다.
대화 상자 폼에서 확인 단추를 두 번 클릭합니다.

처리기 함수에 다음 코드를 추가합니다.

   Service1::CService1 *s = new Service1::CService1();

   UpdateData(TRUE);
   bool result = false;
   s->Validate(CComBSTR(m_Name), CComBSTR(m_Password), &result);
   if (result)
      CDialog::OnOK();

현재 소스 파일의 마지막 #include 문 뒤에 다음 코드를 추가합니다.
```
#include "WebService.h"
```
이 코드는 유효성 검사 대화 상자에서 사용하는 웹 서비스의 .h 파일을 포함시킵니다.

좀 더 효율적인 유효성 검사 루틴을 위해서는 사용자 인터페이스 개체 중에서 유효성 검사 대화 상자가 가장 먼저 나타나야 합니다. 사용자가 올바른 이름과 암호를 입력하면 리치 클라이언트 응용 프로그램이 표시됩니다. 잘못된 이름과 암호가 입력되면 현재 사용자가 리치 클라이언트 응용 프로그램에 액세스할 수 없게 됩니다.

이 동작을 구현하려면 기본 응용 프로그램 클래스의 InitInstance 함수를 수정하여 이 대화 상자를 먼저 호출합니다. 대화 상자가 올바르게 종료된 경우에만 응용 프로그램이 계속됩니다.

유효성 검사 대화 상자를 처음에 표시하려면

클래스 뷰에서 CMyProjectApp 노드를 확장합니다.
InitInstance 함수를 두 번 클릭하여 함수 본문을 편집합니다.

pMainFrame 개체의 ShowWindow 함수에 대한 호출 앞에 다음 코드를 추가합니다.

   // Display the validation dialog box first
   CMyValidateDlg dlg;
   if (dlg.DoModal() != IDOK)
      return FALSE;

현재 소스 파일의 마지막 #include 문 뒤에 다음 코드를 추가합니다.
```
#include "MyValidateDlg.h"
```
이 코드는 유효성 검사 대화 상자의 .h 파일을 포함시킵니다.
솔루션을 빌드합니다. 빌드 메뉴에서 솔루션 빌드를 클릭합니다.
디버그 메뉴에서 디버깅하지 않고 시작을 클릭합니다. 확인 대화 상자에서 이름 및 암호 입력란에 동일한 텍스트를 입력한 다음 확인을 클릭합니다. 리치 클라이언트 응용 프로그램이 실행되면서 기본 대화 상자가 표시됩니다.

설치 프로젝트 만들기

Visual C++ 응용 프로그램의 마지막 개발 단계는 설치 프로젝트를 만드는 것입니다.

설치 프로젝트를 만들려면

솔루션 탐색기에서 MyProject 솔루션을 마우스 오른쪽 단추로 클릭합니다.
바로 가기 메뉴에서 추가를 클릭한 다음 새 프로젝트를 클릭합니다.

새 프로젝트 대화 상자가 나타납니다.
프로젝트 형식 창에서 설치 및 배포 프로젝트를 선택하고 템플릿 창에서 설치 마법사 아이콘을 클릭합니다.
설치 프로젝트의 이름으로 MySetup을 입력하고 확인을 클릭합니다.

설치 마법사가 나타납니다.
다음을 두 번 클릭합니다.
다음 출력 그룹을 선택합니다.
- Primary Output from MyProject
- Primary Output from CustomCtl
다음을 두 번 클릭합니다.
마침을 클릭합니다.
빌드 메뉴에서 MySetup 빌드를 클릭합니다.

최종 파일(MySetup)은 리치 클라이언트 응용 프로그램 설치를 위해 대상 컴퓨터에 복사될 수 있습니다. 배포 프로젝트와 설치 마법사에 대한 자세한 내용은 응용 프로그램 배포, 배포 프로젝트 및 배포 연습을 참조하십시오.

참고 항목

개념

리치 클라이언트 응용 프로그램 연습

Visual Studio 연습