HTML 다이얼로그 (CDHtmlDialog) 사용하기

Microsoft Visual Studio .NET의 C++.NET 에는 새로운 형태의 대화상자를 제공한다. HTML 다이얼로그가 그것인데, 닷넷의 주력 언어가 C#인 탓인지, 사용하기가 어려워서인지 많이 사용되고 있지는 않는 것 같다.

* 본문의 저작권은 www.eugenefox.com 에 있습니다.
* 예제 소스 파일 등은 www.eugenefox.com 통해 받으셔야 합니다

HTML 다이얼로그를 잠시 사용해본 바에 의하면 HTML을 다루는 부분에 있어서 개발환경에서 약간 떨어져 있어 사용하기 불편하다는 점과 HTML 구조를 제어하기 위해서 COM을 다룰 줄 알아야 하는 어려움 등이 있는 것 같다. 하지만 잘 사용한다면 기존 다이얼로그에 비해 보다 멋있는 프로그램이 될 수 있지 않을까 싶다.


1. 프로젝트 시작하기

HTML Dialog 를 사용하기 위해서는 MFC 응용프로그램을 선택하여 프로젝트를 만든다. 옵션은 '대화 상자 기반 -> HTML 대화 상자 사용'를 선택하면 된다. CDHtmlDialog는 CDialog에 기반하기 때문에 기본적으로 기존의 방식과 같다. 다른 점이라면 다이얼로그 위에 HTML이 보여진다는 것이다. 폼을 디자인 하기 위해서는 이 다이얼로그에 컨트롤을 올려놓는게 아니고 HTML 리소스를 수정해야 한다는 것을 명심해야한다.


2. 폼 디자인 하기


당연한 얘기지만 폼 디자인을 하기 위해서는 HTML을 알아야 한다. 닷넷에서 제공되는 간단한 편집기를 이용해도 되지만 많이 불편하므로 드림위버나 나모웹 에디터를 사용하는 것이 편할 듯 싶다. 대신에 가능하면 HTML코드는 간단하게 만들어 주는 것이 프로그래밍 할 때에도 많은 도움이 될 것이다. HTML에는 javascript와 css를 모두 포함 가능하다. 동적인 표현을 위해 간단하게 javascript로 기능 구현을 해도 될 것이고 고정된 기능이라면 프로그램 자체에서 제어할 수 있게 해 줄 수도 있다. 그러면 나중에 디자인을 변경하더라도 한결 편할지도 모른다. 코딩시 한가지 주의할 점은 프로그램에서 제어가 필요한 element 들은 id값을 지정해 주어야 한다는 것이다. 그래야 버튼 클릭에 대한 처리를 할 수 있고, 입력값을 읽을 수 있다.


3. Text Element와 데이터 바인딩 하기


위와 같이 텍스트를 입력받는 태그가 있다. 어떤 방법으로 여기에 입력된 값을 읽을 수 있을까? 고전적으로 생각한다면 DOM에 따라 document를 참조하고 다시 해당 form을 참조한 뒤에 여기에 속한 자식 element 들의 name으로 쿼리하여 얻어 오는 방법이다. 하지만 javascript나 vb에서는 간단할지 몰라도 vc++에서는 매우 까다로운 방법이다. 그래서 ID를 이용하면 간단하게 곧바로 참조가 가능하다. 여기에 DDX를 쓰면 보다 손 쉬울 것이다. 그런데 일반 다이얼로그에서는 쉽게 추가가 되는데 HTML 다이얼로그에서는 그렇지가 않아서 수동으로 추가해 주어야 한다.



그리고 값을 읽어 올 때는 UpdateData() 를 호출하고 m_strName 을 사용하면 되고, 값을 변경하려고 하면 변수에 값을 변경시키고 UpdateData(FALSE) 를 호출해주는 것으로 끝이다. 어렵게 GetElementInterface 를 호출해서 다시 get_value 를 호출 하는 등 복잡하게 할 필요가 없어진다.


4. 이벤트 처리하기

일반 윈도우 프로그래밍과 같이 HTML에서도 이벤트에 의한 처리를 한다. 버튼을 누르면 ONCLICK 이벤트가 발생하게 된다. 이를 확인하고 처리하는 루틴을 만들어 주어야 한다. 이 함수의 형식은 다음 5절에서 설명될 것이고 매크로 부터 추가하겠다. 매크로의 뒤에는 세미콜론(;) 이 없다.


위의 매크로는 'ButtonOK'라는 ID를 가진 엘리먼트에서 onclick 이벤트가 발생하면, OnButtonOK 라는 함수를 실행하라는 뜻이다. 이벤트의 종류에는 DBLCLICK, MOUSEDOWN, MOUSEUP 등 여러가지 종류가 있으며 MSDN Library에서 확인 가능하다.


5. 이벤트 처리루틴 작성하기


이벤트 처리함수는 위의 형식을 따라야 한다. 여기서 pElement 에는 이벤트를 발생시킨 element의 인터페이스를 뜻한다. 즉 버튼을 클릭했다면 버튼 element인 것이다. 이것은 사용될 수도 있고 사용 안할 수도 있다. 클릭한것이 이미지라면 IHTMLImgElement 를 QueryInterface하여 얻어서 필요한 값을 읽을 수 있고, Button 이라면 IHTMLButtonElement를 얻을 수 있다. 리턴은 보통 S_OK 를 리턴해주면 된다.

예제 프로그램은 값을 입력받아서 출력하는 것을 만드는 것으로 아직 pElement 값을 사용하지는 않고 간단하게 다음만 입력해 주면 될 것이다.




6. 실행하기


다 완성됐으면, 실행을 해 본다. 그리고 텍스트 필드에 이름을 입력하고 확인을 누르면 메시지창이 뜰 것이다.

다음에는 좀 더 기술적인 부분으로 넘어가 볼까 한다. 다음의 파일은 예제 파일이다.