在Visual C++以前的版本中，想要改变对话框的背景色和背景图案或是改变对话框中控件的颜色和字体，总叫人颇感不方便。现在好了，最新的Visual C++.NET支持WEB对话框，它提供两个MFC类：CDHtmlDialog和CMultiPageDHtmlDialog用来创建基于动态HTML页面的对话框，不仅可以方便地进行背景、字体等外观属性的设置，而且还支持像向导对话框那样的多页面WEB对话框。尤为重要的是，Visual C++.NET的WEB对话框和普通对话框那样支持控件的数据交换，使得处理WEB中的数据更为方便。这里，我们就来详细介绍WEB对话框的使用。
一、一般创建方法
WEB对话框既可以在MFC的单文档和多文档中进行创建，也直接创建成基于WEB对话框的应用程序。
1、创建基于WEB对话框的应用程序
具体步骤如下：
(1) 选择File菜单-＞New菜单-＞Project命令，或者在Web浏览窗口中点击Create New Project，就会显示出New Project对话框。
(2) 展开左侧Project Types(工程类型)的Visual C++ Projects结点，选择其中的Win32 Projects，在右侧Templates(模板)列表中选中MFC Application。
(3) 在下面的Name框中键入MFC应用程序名称Ex_Dlg。单击OK按钮，弹出MFC Application Wizard对话框，单击左侧Application Type后，就会弹出图1的对话框。
(4) 选中Dialog based项，然后单击左侧的Advanced features，弹出图2的对话框。
(5) 选中Derive the dialog class from CDHtmlDialog项，然后单击Generated Classes，在弹出的对话框中单击Finish按钮。这样一个名为Ex_Dlg的基于WEB对话框的应用程序方案就创建好了。
(6) 打开Build菜单，选择Build或按快捷键Ctrl+Shift+B，系统开始对Ex_Hello进行编译、连接，同时在输出窗口中在线地显示出编译的内容。
(7) 在Debug菜单中选取Start Without Debugging命令或按快捷键Ctrl+F5，就可以运行刚刚生成的Ex_Hello.exe，其结果如3图所示。
2、在SDI/MDI中创建WEB对话框
假设已经创建一个名为Ex_SDI单文档应用程序方案，则具体的步骤如下：
(1) 选择Project-＞Add Class菜单命令，弹出如图4的对话框，在Categories中选中MFC，再在Templates中选中MFC Class，单击Open按钮。
(2) 出现如图5所示的对话框，在Class name框中键入要添加的类名CMyDlg，在Base class中选择其基类为CDHtmlDialog，然后按Enter键，系统就会为方案Ex_SDI添加一个用户WEB对话框类。
(3) 将方案导航区切换到Class View页面，展开Classes，选中CEx_SDIView，在对应的Properties窗口中点击Message按钮，然后选中WM_LBUTTONDOWN，在右边的下拉框中选择OnLButtonDown项，这样就为CEx_SDIView添加一个WM_LBUTTONDOWN的消息映射函数。
(4) 在Class View页面中，展开CEx_SDIView的Functions项，然后双击刚才添加的OnLButtonDown函数在相应的文档窗口中出现它的函数代码框架，添加下列代码：
void CEx_SDIView::OnLButtonDown(UINT nFlags, CPoint point)
{
CMyDlg dlg;
dlg.DoModal();
CView::OnLButtonDown(nFlags, point);
}
(5) 在Ex_SDIView.cpp的最前面添加下列语句：
#include "MyDlg.h"
(6) 编译并运行。在Ex_SDI单文档应用程序的客户区内，单击鼠标左键，就会出现如图3一样的对话框。
二、使用WEB对话框编辑器
用户的CDHtmlDialog包含两个资源，一个是对话框模板资源，一个是HTML资源，CDHtmlDialog负责将该HTML装载到相应的对话框模板中。例如，第一个例子中，CEx_DlgDlg类相应的对话框模板资源ID号是IDD_EX_DLG_DIALOG，而HTML资源ID号为IDR_HTML_EX_DLG_DIALOG。
用户可以用编辑器在对话框模板中添加元素或在HTML中增加元素，这里将重点介绍后一种的使用方法。需要说明的是：
(1) 对话框模板和HTML使用两套编辑系统，其中HTML编辑器包含工具箱、设计窗口和HTML源文件窗口，而对话框模板编辑器与以前的版本基本相同。
(2) 工具箱中有一个Clipboard Ring项，是用来保存剪切板上的内容，这样的好处是可以反复使用Clipboard Ring中的内容。
(3) 对话框模板的元素的叠放次序总是处于HTML元素之前。
1、工具箱简介
现在先来看看HTML工具箱，如图6所示。各工具按钮的含义如下：
Pointer——指针，当选中后，用户可对页面中的元素进行选取、拖放以及改变大小等。
Span——在HTML源文件中插入＜SPAN＞Span＜/SPAN＞标记，用来通过定义文本的铺展范围来组织文档。
Button——在页面中添加一个按钮，且在HTML源文件中插入＜INPUT id=Button1 type=button value=Button＞标记。
Reset Button——在页面中添加一个复位按钮，且在HTML源文件中插入＜INPUT id=Reset1 type=reset value=Reset＞标记。
Submit Button——在页面中添加一个提交按钮，且在HTML源文件中插入＜INPUT id=Submit1 type=submit value=Submit＞标记。
Text Filed——在页面中添加一个单行文本字段，且在HTML源文件中插入＜INPUT id=Text1 type=text＞标记。
Text Area——在页面中添加一个多行文本字段，且在HTML源文件中插入＜TEXTAREA id=Textarea1 rows=2 cols=20＞＜/TEXTAREA＞标记。
File Filed——在页面中添加一个文件字段，且在HTML源文件中插入＜INPUT id=File1 type=file＞标记。
Password Filed——在页面中添加一个口令字段，且在HTML源文件中插入＜INPUT id=Password1 type=password＞标记。
Checkbox——在页面中添加一个复选框，且在HTML源文件中插入＜INPUT id=Checkbox1 type=Checkbox CHECKED＞标记。
Radio Button——在页面中添加一个单选按钮，且在HTML源文件中插入＜INPUT id=Radio1 type=radio＞标记。
Table——在页面中添加一个表，且在HTML源文件中插入＜TABLE cellSpacing =1 width="75%" border=1＞
＜TR＞＜TD＞＜/TD＞＜TR＞＜/TABLE＞标记。
Linear Layout Panel——在页面中添加一个直线面板，用来依次从左到右，自上而下安排其中的元素，并在HTML源文件中插入＜DIV style="WIDTH: 100px; HEIGHT: 100px" ms_positioning="LinearLayout"＞＜/DIV＞标记。
Grid Layout Panel——在页面中添加一个栅格面板，用来按指定位置安排其中的元素，并在HTML源文件中插入＜DIV ms_positioning="GridLayout"＞
＜TABLE height=100 cellSpacing=0 cellPadding=0 width=100 border=0 ms_2d_layout="TRUE"＞
＜TR vAlign=top＞
＜TD width=100 height=100＞＜/TD＞＜/TR＞＜/TABLE＞＜/DIV＞标记。
Image——在页面中添加一个图像元素，且在HTML源文件中插入＜IMG alt="" src =""＞标记。
Listbox——在页面中添加一个列表框，且在HTML源文件中插入＜SELECT size=2 ID=Select＞＜OPTION＞＜/OPTION＞＜/SELECT＞标记。
Dropdown——在页面中添加一个下拉列表框，且在HTML源文件中插入＜SELECT ID=Select1＞ ＜OPTION＞＜/OPTION＞＜/SELECT＞标记。
Horizontal Rule——在页面中添加一个水平尺，且在HTML源文件中插入＜HR width=100 size=1＞标记。
需要说明的是，上述插入的标记中的相关内容还可在其属性窗口中进行设置。
2、在页面中添加元素
在页面中添加某个元素的最简单的方法是双击工具箱的对应按钮。需要说明的是，在页面Linear Layout方式下，添加元素前最好先确定元素添加的位置，具体的方法是将鼠标指针移动到要添加的位置处，然后单击鼠标左键。
其次，可以用鼠标左键点中工具箱中的某个元素按钮，并按住鼠标键不放，然后移动鼠标到页面中释放鼠标键，新添加的元素就出现在页面中，它的位置取决于是Linear Layout还是Grid Layout方式。
另外，在Grid Layout方式的页面中，还可有另一种添加方法，那就是：用鼠标左键点中工具箱中的某个元素按钮，此时的鼠标箭头在页面内变成"+"字形状；在页面指定位置处单击鼠标左键不放，拖动鼠标至满意位置，释放鼠标。
3、使用Grid Layout
使页面处于Grid Layout方式的最大好处就是可以自由地拖动其中的元素，若选中Tool-＞Snap to Grid菜单项，则拖动的位置是最近的那个栅格点。
想要设置Grid Layout方式可有下列两种方法：
(1) 直接双击工具箱的Grid Layout Panel，元素就可在该面板中进行拖动；
(2) 将属性窗口区切换到DOCUMENT Properties页面，然后将pageLayout的属性选定为GridLayout即可，如图7所示。
4、元素在页面中的布局
HTML编辑器也提供与对话框编辑器相类似的布局工具，使得用户方便地调整页面中的元素，图8就是HTML编辑器的布局工具。
当然，只有选中多个元素时，布局工具中的工具按钮才会被激活。对于多个元素的选取，有两种方法：
(1) 先在对话框内按住鼠标左键不放，拖出一个大的虚框，然后释放鼠标，则被该虚框所包围的元素都将被选取。
(2) 先按住Shift键不放，然后用鼠标选取元素，直到所需要的多个元素选取之后释放Shift键。
需要注意的是：
(1) 一旦单个元素被选取后，其四周由选择框包围着，选择框上还有几个(通常是八个)白色实心小方块，拖动它可改变元素的大小。
(2) 多个元素被选取后，其中只有一个元素的选择框有几个白色实心小方块，这个元素称为主要元素，而其他元素的选择框的小方块是黑色的。
(3) 使用布局工具命令时，都是以"主要元素"为基准的。例如用户选取多个元素后，使用"Make Same Size"命令只改变其它元素的大小，并与"主要元素"的尺寸一致。因此，在多个元素的布置过程中，常需要重新设置"主要元素"。设置的方法是按住Ctrl键，然后用鼠标单击两次所要指定的元素即可。
三、WEB对话框编程
WEB对话框给了我们一个新的设置WEB应用程序的设计理念，它使得我们可以利用动态HTML的性能去优化和丰富我们的桌面程序。这里就WEB对话框中关于HTML元素的事件映射和数据交换(DDX机制)作阐述，这也是WEB对话框编程的核心内容。
1、HTML元素的事件映射
对于熟悉VC++6.0的用户来说，使用功能强大的ClassWizard可以对某个类添加某个对象(窗口、控件)的消息映射函数，而对于控件来说，可以映射其不同的通知消息，并且这个映射的过程一般是自动完成的。
与控件相类似，HTML元素的事件映射也可添加在WEB对话框类中，只不过需要手动进行。例如，下面就是为WEB对话框(设类为CMyDlg)中的一个按钮元素＜input id=Button1 type=button value=Button＞添加onClick(单击)的事件处理过程：
(1) 打开WEB对话框类CMyDlg文件MyDlg.cpp，在文件的前面找到BEGIN_DHTML_EVENT_MAP(CMyDlg)与END_DHTML_EVENT_MAP()之间的程序段，然后添加下列代码：
DHTML_EVENT_ONCLICK(_T("Button1"),OnButton1)
DHTML_EVENT_ONCLICK是一个事件处理宏，第一个参数是用来指定WEB对话框中HTML元素的ID名称，第二个参数是映射该事件的函数名称，注意上句代码后面没有";"号。
(2) 打开头文件MyDlg.h，在图10的位置处添加下列代码：
HRESULT OnButton1(IHTMLElement *pElement);
实际上，IHTMLElement是HTML元素的通用接口，用来调用其方法来获取和设置相关属性。所有元素的事件的映射函数都具有与上述函数相类似的格式。
(3) 再切换到MyDlg.cpp窗口，在程序的最后添加下列代码：
HRESULT CMyDlg::OnButton1(IHTMLElement* /*pElement*/)
{
MessageBox("你好！");
return S_OK; // return TRUE unless you set the focus to a control
}
(4) 这样就可以运行了，当用户单击Button时，就弹出一个"你好！"对话框。
除了DHTML_EVENT_ONCLICK，Visual C++.NET还提供了超过三十个这样的事件映射宏，在VC++.NET的MSDN中键入DHTML_EVENT关键词就可以查到，这里不再重复。
2、数据交换(DDX)
DDX/DDV机制曾为程序员带来了许多方便，它将某个变量和某个控件相关联起来，通过UpdateData使变量的值传送到控件中(参数为FALSE)或将控件中的值保存到变量中(参数为TRUE)。
同样在WEB对话框中仍然可以使用DDX技术。例如，下面就是为WEB对话框CMyDlg添加一个单行文本元素＜input id=Text1 type=text value=Text1＞，然后用m_strEdit的CString变量将其关联起来：
(1) 打开MyDlg.h文件，在类中添加一个成员变量：
CString m_strEdit;
(2) 打开MyDlg.cpp文件，然后添加下面的代码：
DDX_DHtml_ElementText(pDX,_T("Text1"),DISPID_A_VALUE ,m_strEdit);
这样就将m_strEdit和该元素的值关联起来了。
(3) 在CMyDlg::OnInitDialog中添加下列代码：
BOOL CMyDlg::OnInitDialog()
{
CDHtmlDialog::OnInitDialog();
m_strEdit="Hello";
UpdateData(FALSE);
return TRUE; // return TRUE unless you set the focus to a control
} (4) 将CMyDlg::OnButton1的代码改成：
HRESULT CMyDlg::OnButton1(IHTMLElement* /*pElement*/)
{
UpdateData(TRUE);
MessageBox(m_strEdit);
return S_OK; // return TRUE unless you set the focus to a control
}
(5) 运行后就会看到：开始时，单行文本字段中显示的是"hello"，当用户键入其他字符后，再单击Button按钮，就会弹出一个对话框，显示出m_strEdit内容。
实际上，CDHtmlDialog还提供DDX_DHtml_CheckBox(用于复选框)、DDX_DHtml_ElementText(设置或获取元素的任意属性)、DDX_DHtml_Radio(用于单选框)、DDX_DHtml_SelectIndex(设置或获取列表框当前项的索引值)、DDX_DHtml_SelectString(设置或获取列表框当前选项的文本)、 DDX_DHtml_SelectValue(设置或获取列表框当前选项的值)等。
至此，对如何使用WEB对话框就有一个较为全面的了解。当然，这里还没有对CMultiPageDHtmlDialog以及HTML元素的深入编程和CSS样式的设置还没有讨论，期待下一次与大家见面。
