控制VC++.NET中WEB对话框的HTML元素属性
2020-02-03 15:58:24
供稿：网友
vc++.net一个令人耳目一新的特性就是基于动态html的web对话框，它使得桌面程序界面和功能变得更容易实现。这里将对web对话框中html元素的css属性控制作探讨。
一、在html编辑器中设置元素的css属性
css最早出现于1996年，全称为：层叠样式表(cascading stylesheets)。由于它在字体、样式、风格等方面的突出表现使它迅速在网页制作中流行起来。它可以精确控制页面文字效果，最重要的是很多浏览器和平台都支持它，而且编码简短，页面下载快。
在vc++.net的html编辑器中，可以方便为某个html元素设置css样式，具体操作如下：
(1) 先选定某个html元素，打开其属性(properties)窗口，找到其style项，如图1所示。
(2) 单击该项右边的browse(...)按钮，弹出图2的style builder对话框，分别可以对字体(font)、背景(background)、文本(text)、定位(position)、布局(layout)、边框(edges)、列表(lists)以及其他外观属性进行设置。
使用style builder对话框的最大优点就是在于不需要知道css的语法结构就可以调整html元素的css样式。限于篇幅，这里仅对最常用的字体、背景和文本属性进行阐述。
1、字体属性
style builder对话框的font页面提供如下几个字体属性：
(1) 字样名(fong name)
字样名可以使用family和system font选项，选中family项可单击右边的browse(...)按钮来添加一个新的字体，而选中system font，则可在右侧的组合框中选择其中的某项，具体各项含义如下：
window caption : 使用窗口标题的文本字体
toolwindow caption : 使用工具窗口标题的文本字体
dialog text : 使用对话框中的文本字体
icon labels : 使用工具窗口标题的文本字体
menu text : 使用菜单文本的字体
tooltip text : 使用提示文本的字体
(2) 字体特性(font attributes)
字体特性包括颜色(color)、斜体(italics)和小型大写字母(small caps)等，其中，颜色特性最为丰富，不仅可以通过组合框选择aqua(浅绿色)、black(黑色)、blue(蓝色)、fuchsia(紫红色)、gray(灰色)、green(绿色)、lime(酸橙色)、maroon(栗色)、navy(海蓝色)、olive(橄榄色)、purple(紫色)、red(红色)、silver(银灰色)、teal(茶色)、white(白色)和yellow(黄色)中的任意一种颜色，而且可以单击右边的browse(...)按钮来添加一个新的颜色，图3就是其中的颜色对话框，它有web调色板(web palette)、已命名的颜色(named colors)、系统颜色(system colors)和自定义颜色(custom color)等页面。
(3) 大小(size)
设置html元素的字体尺寸，默认值为absolute的medium值。它有三个选项：
specific : 直接指定字体尺寸，它取决于单位和相应的数值。它的单位有：
px —— 像素(pixel)，相对单位。wondows的用户所使用的分辨率一般是96像素/英寸。
pt —— 点（point），绝对单位。
pc —— 派卡(pica)，绝对单位。相当于我国新四号铅字的尺寸。
mm、cm、in —— 毫米、厘米、英寸。
em —— 相对单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
ex —— 相对单位。相对于字符“x”的高度。此高度通常为字体尺寸的一半。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
% —— 相对单位。相对于当前对象内文本的字体尺寸的百分比。
上述单位之间的部分换算关系为：1 in = 2.54 cm = 25.4 mm = 72 pt = 6 pc 。
absolute : 根据对象字体进行大小调节，它有这样几个选项：xx-small(最小)、x-small(较小)、small(小)、medium(中)、large(大)、x-large(较大)、xx-large(最大)。
relative : 相对于父对像中字体尺寸进行相对调节。使用成比例的em单位计算。它有这样两个选项：larger(较大)、smaller(较小)。
(4) 粗细(bold)
设置html元素中的文本字体的粗细。需要说明的是，它的具体结果由用户端系统安装的字体的特定字体变量映射来决定。也就是说，用户可能看不到不同值之间的差异。
它有absolute和relative两个选项，包含有normal(正常的字体)、bold(粗体)、bolder(特粗体)和lighter(细体)等项。
(5) 其他字体效果(effects)
这主要有underline(下划线)、strikethrough(删除线)、overline(上划线)、capitalization(大小写)。其中，capitalization还有initial cap(首字符大写)、lowercase(全部小写)和uppercase(全部大写)等选项。
2、背景属性
style builder对话框的background页面可对元素进行背景颜色和背景图像的设置，如图4所示。其中，背景颜色除了可以设置其透明色(transparent)外，其他同字体的颜色属性。这里对背景图像的相关设置作阐述。
当单击image框右边browse(...)按钮从外部调入一个图像文件后，就可对其进行平铺(tiling)、滚动(scrolling)以及位置(position)进行设置。
平铺主要有在水平方向平铺(tile in horizontal direction)、在垂直方向平铺(tile in vertical direction)、在水平和垂直方向平铺(tile in both directions) 以及不平铺(do not tile)等几个选项。
滚动有scrolling background和fixed background两项，分别表示背景图像是随元素内容滚动还是固定。
位置属性分别就水平(horizontal)和垂直(vertical)方向进行left(靠左)、center(居中)、right(靠右)以及top(向上)、center(居中)、bottom(向下)布置；特别地，还可选择其custom(自定义)选项，来定义具体的背景图像的位置。
1) 对齐方式(alignment)
在水平方向(horizontal)的对齐方式表现为：left(左对齐)、centered(中间对齐)、right(右对齐)和justified(两端对齐)，而在垂直方向表现为subscript text(垂直对齐文本的下标)和supperscript text(垂直对齐文本的上标)。
若在水平对齐方式选中justified，还可有下列选项：
auto : 自动调整两端对齐
space words : 通过增加字之间的空格对齐文本。
newspaper style : 通过增加或减少字或字母之间的空格对齐文本。
distribute spacing : 处理空格很像newspaper，适用于东亚文档。
distribute all lines : 两端对齐行的方式与distribute相同，适用于表意字文档。
(2) 字距和行距
字距(letters)与行距(lines)的调整相似，都有normal(正常)和custom(自定义)两项，若选中custom，则可在右边设置具体的间距大小。
(3) 文本流(text flow)
文本流包括indentation(缩进)和text direction(文本方向)两个属性。其中，文本方向可以有left to right(从左到右)和right to left(从右到左)两个选项。
需要说明的是，以上的属性设置都有会在对话框下面的预览框看到相应的结果。
二、在程序中获取和改变元素的css属性
在web对话框类中获取和改变元素的css属性，可使用ihtmlelement接口，它提供了有关html元素的许多方法，其中get_style就是用来处理包括css在内的属性，它的原型如下：
hresult get_style( ihtmlstyle **p );
其中，p是ihtmlstyle指针变量，ihtmlstyle也是一个接口是用来提供获取和设置具体属性的方法。例如get_color和put_color是用来获取和设置元素的颜色，它们的原型如下：
hresult get_color( variant *p );
hresult put_color( variant v );
其中，variant是与绝大多数数据类型相兼容的一种类型，使用时要注意设置variant变量的具体类型。
下面的例子是当鼠标划过一段文字时，其颜色从红色变成蓝色，具体步骤如下：
(1) 选择file菜单->new菜单->project命令，创建一个基于web对话框的ex_dlg方案工程(详细过程这里略)。
(2) 切换到方案导航区的resource view窗口，展开html项，双击idr_html_ex_dlg_dialog项，这时就在文档窗口中显示相应的html模板。
(3) 删除html模板中所有缺省的元素(包括ok和cancel按钮)，双击html工具箱的linear layout panel按钮，在html页面中添加一个直线面板，在其中添加文字："当你用鼠标划过这段文字时，看看有什么变化？"。
(4) 在属性窗口中将上述添加的面板的id号改为div1，再单击style项右边的browse(...)按钮，将其文字颜色设置为红色(red)。
(5) 打开web对话框类cex_dlgdlg文件ex_dlgdlg.cpp，在文件的前面找到begin_dhtml_event_map(cex_dlgdlg)与end_dhtml_event_map()之间的程序段，然后添加下列代码：
dhtml_event_onmouseover(_t("div1"),onmouseoverdiv1)
dhtml_event_onmouseout(_t("div1"),onmouseoutdiv1)
其中事件映射宏dhtml_event_onmouseover和dhtml_event_onmouseout分别用来映射鼠标移至和移出的事件。
(6) 打开头文件ex_dlgdlg.h，添加下面的事件映射函数的声明，并且添加成员变量m_varcolor用来保存原来的颜色值：
public:
variant m_varcolor;
...
protected:
...
hresult onmouseoverdiv1(ihtmlelement *pelement);
hresult onmouseoutdiv1(ihtmlelement *pelement);
(7) 再切换到ex_dlgdlg.cpp窗口，在程序的最后添加下列代码：
hresult cex_dlgdlg::onmouseoverdiv1(ihtmlelement *pelement)
{
ihtmlstyle *phtmlstyle;
pelement->get_style(&phtmlstyle);
if (phtmlstyle)
{
variant varcolor;
varcolor.vt = vt_i4;
varcolor.lval = 0x0000ff;
phtmlstyle->get_color(&m_varcolor);
phtmlstyle->put_color(varcolor);
phtmlstyle->release();
}
return s_ok;
}
hresult cex_dlgdlg::onmouseoutdiv1(ihtmlelement *pelement)
{
ihtmlstyle *phtmlstyle;
pelement->get_style(&phtmlstyle);
if (phtmlstyle)
{
phtmlstyle->put_color(m_varcolor);
phtmlstyle->release();
}
return s_ok;
}
(8) 编译并运行，然后看看当鼠标划过那段文字后，颜色是不是会有变化？当移出时，颜色是不是以恢复到原来的红色？
至此，通过以上的方法和技巧，我们就可以对html元素属性进行设置和程序控制。要提出来的是，在visual c++.net的beta 1版中，web对话框类cdhtmldialog的getelementproperty和setelementproperty好像并能有效获取和设置html元素的属性。
