使用Visual C＋＋.NET的WEB对话框

二、使用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键，然后用鼠标单击两次所要指定的元素即可。