控制VC++.NET中WEB對話框的HTML元素屬性
2024-07-10 12:59:21
供稿：網友
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元素的屬性。
