在VB中使用IE的 WebBrowser控件改進界面設(shè)計
2024-07-21 02:20:51
供稿：網(wǎng)友
在vb中使用ie的 webbrowser控件
改進界面設(shè)計
在程序設(shè)計中，如何設(shè)計出美觀、實用，有個性的界面是每個程序設(shè)計者在界面設(shè)計中追求的目標。隨著windows xp的推出，各種與眾不同的華麗界面越來越被程序設(shè)計者和軟件使用者所認同。
利用windows中的webbrowser控件，可以把華麗的網(wǎng)頁設(shè)計技術(shù)應(yīng)用到界面設(shè)計中去，例如微軟著名的msn瀏覽器的許多界面其實就是一個web頁，windows xp中的幫助中心、microsoft encarta（微軟百科全書）等許多軟件中的一些界面也是利用webbrowser控件顯示的web頁。
利用webbrowser控件顯示一個網(wǎng)頁，制作一個簡單的瀏覽器已經(jīng)有很多文章介紹，實現(xiàn)也不復(fù)雜，但如何實現(xiàn)程序與web頁的交互則是將其應(yīng)用到界面設(shè)計中的關(guān)鍵。
activex控件和webbrowser控件的使用
用 visual basic 創(chuàng)建一個應(yīng)用程序的第一步是創(chuàng)建界面。而控件則是創(chuàng)建界面的基本模塊，是包括在窗體對象內(nèi)的對象。每種類型的控件都有自己的屬性、方法和事件，屬性一般控制控件的外觀、大小等性質(zhì)，方法則是控件的能力或者功能，事件則代表與用戶的交互，例如鼠標的移動點擊、鍵盤的輸入等都會觸發(fā)相應(yīng)的事件。
webbrowser控件是隨ie 3.0以上版本提供的一個可編程的activex控件，利用webbrowser控件可以顯示、控制、分析web頁，除了ie，chm格式的幫助的瀏覽，還廣泛應(yīng)用在以ie為核心的許多瀏覽器和其他程序中。
webbrowser控件在vb中的使用很簡單。啟動vb，創(chuàng)建一個標準exe工程，選擇工程——部件，打開部件對話框，從中找到microsoft internet controls，選中后單擊應(yīng)用，然后關(guān)閉對話框（下圖），可以看到webbrowser控件已經(jīng)添加到工具欄。
將webbrowser控件拖至窗體，調(diào)整到相應(yīng)大小，打開代碼窗口，在form_load過程中鍵入如下代碼：
private sub form_load()
webbrowser1.navigate "http://www.sohu.com"
end sub
運行程序，可以看到搜狐的主頁顯示在了相應(yīng)的對話框中了。如果是本地的web頁只需將http://www.sohu.com替換為本地文件的全路徑（目錄+文件名）就可以了。
控制webbrowser控件
利用webbrowser控件的goback（后退）、goforward（前進）、gohome（主頁）、navigate（定位）、refresh（刷新）、stop（停止）等方法，可以實現(xiàn)瀏覽器的常規(guī)操作。例如實現(xiàn)地址欄的操作，可以先向窗體添加一個文本框和按鈕，并向按鈕的click事件相應(yīng)過程中添加如下代碼：
private sub command1_click()
webbrowser1.navigate text1.text
end sub
這樣，向文本框輸入地址，單擊按鈕，即可訪問不同的站點。webbrowser控件得其他操作方法類似，讀者可以參考msdn的有關(guān)介紹。
實現(xiàn)web頁與程序的交互
要實現(xiàn)web頁與程序的交互，其關(guān)鍵在于改寫webbrowser控件的beforenavigate2事件，截獲需要與程序交互的動作，然后進行相應(yīng)的操作。例如，我們在程序目錄下新建一個簡單的web頁test.htm，其內(nèi)容如下：
<html>
<head>
<title> test </title>
</head>
<body>
<a href="test1.htm">test1</a><br>
<a href="test1.htm">test2</a>
</body>
</html>
在form_load過程中鍵入如下代碼：
private sub form_load()
webbrowser1.navigate app.path & "/test.htm"
end sub
運行程序，點擊test1或者test2則打開相應(yīng)的test1.htm（如果test1.htm存在），或者顯示文件找不到錯誤。那么如何截獲用戶點擊test1這個超鏈接呢，我們在beforenavigate2這個事件中鍵入以下代碼：
if right(url, 9) = "test1.htm" then
msgbox "test1 clicked"
cancel = true '使webbrowser控件停止相應(yīng)此事件
elseif right(url, 9) = "test2.htm" then
msgbox "test2 clicked"
cancel = true
end if
運行程序，可以看到程序已經(jīng)截獲了用戶點擊相應(yīng)超鏈接的事件（注意：right函數(shù)的使用是為了只提取url的最后部分，因為url還包括網(wǎng)絡(luò)協(xié)議和目錄等信息）。這樣，我們就可以在程序界面中使用web頁來實現(xiàn)用戶界面，并通過截獲相應(yīng)的點擊事件，通過判斷相應(yīng)的url，得知用戶的操作，從而使程序進行不同的操作。
換膚（skin）的實現(xiàn)
利用以上的程序設(shè)計思路，我們來實現(xiàn)程序的換膚。因為程序的動作的處理集中在對webbrowser控件beforenavigate2這個事件的處理上，只與url的值有關(guān)，與web頁的具體內(nèi)容和設(shè)計沒有關(guān)系，因此不但可以分離界面和程序的設(shè)計，而且可以輕松的實現(xiàn)諸如換膚此類操作。
具體實現(xiàn)辦法可以簡單敘述為以下幾步：
1. 制作幾個不同的web頁，但要保證相應(yīng)的超鏈接（url）一致；
2. 在程序中設(shè)計一個換膚的操作，切換當前webbrowser所顯示的web頁；
3. 在beforenavigate2中處理所有的動作。
以下即為筆者設(shè)計的一個簡單示例的運行畫面。如果將窗體設(shè)置為無標題欄，無邊框，效果就會更佳。
全部程序的代碼如下，實現(xiàn)非常簡單。
option explicit
private sub form_load()
webbrowser1.navigate app.path & "/1.htm"
end sub
private sub option1_click()
webbrowser1.navigate app.path & "/1.htm"
end sub
private sub option2_click()
webbrowser1.navigate app.path & "/2.htm"
end sub
private sub webbrowser1_beforenavigate2(byval pdisp as object, url as variant, flags as variant, targetframename as variant, postdata as variant, headers as variant, cancel as boolean)
if right(url, 3) = "111" then
msgbox "111 clicked!"
cancel = true
elseif right(url, 3) = "222" then
msgbox "222 clicked!"
cancel = true
end if
end sub
結(jié)束語
在vb中實現(xiàn)與眾不同、具有個性界面的程序的辦法一般是使用各類界面控件，或者通過調(diào)用winapi來實現(xiàn)，但一般來說很多漂亮的控件都是需要付費購買的，而通過編程實現(xiàn)都比較復(fù)雜，且程序的修改、維護也相應(yīng)會很復(fù)雜。
利用webbrowser控件可以將界面設(shè)計和程序設(shè)計分離，對于交互較簡單的程序，只需簡單編程即可實現(xiàn)一些其他方法較難實現(xiàn)的功能，例如圖片按鈕、不規(guī)則按鈕、動畫圖標等利用web頁可以輕松實現(xiàn)的功能以及換膚等一般程序設(shè)計較難實現(xiàn)的功能。利用本文提供的方法進行界面設(shè)計可以廣泛應(yīng)用在各類多媒體程序的界面設(shè)計，以及程序中類似office xp和windows xp的任務(wù)窗格的設(shè)計。
對于要進行輸入輸出等相對復(fù)雜任務(wù)的交互，可以通過下面幾個方法思路來實現(xiàn)：
1．將復(fù)雜的操作和交互集中起來，直接利用其他方法實現(xiàn)而不利用web頁來實現(xiàn)。
2．程序的輸入：在web頁的form設(shè)計中，將提交操作的method設(shè)置為get，則用戶輸入內(nèi)容會出現(xiàn)在url中，可以通過解析url獲取用戶輸入，并進行相應(yīng)動作。
3．程序的輸出：通過對顯示的web頁的改寫實現(xiàn)。設(shè)計一個模板，讀入此文件，應(yīng)用replace函數(shù)可以迅速將程序模板中的內(nèi)容替換為程序運算后的結(jié)果。
，歡迎訪問網(wǎng)頁設(shè)計愛好者web開發(fā)。
