Web Browser Express 概述
2024-07-21 02:16:10
供稿：網友
下載 webbrowserexpress.msi 示例文件簡介
web 瀏覽器的一個功能是在同一瀏覽器窗口內打開不同選項卡或子頁，這個功能正在變得更加普及。當瀏覽多個站點時，使用選項卡來分開多個頁會保持桌面的整齊。有若干種第三方 web 瀏覽器在 windows 和其他平臺上提供這一功能，如果您跟我一樣，您將發現這是一種讓人上癮的瀏覽方法。很多瀏覽器，無論是默認設置還是通過插件，也提供一種快速方法，無須直接使用搜索引擎就可以執行 web 搜索。能夠編寫自己的瀏覽器，并使其能夠完成所有這些工作，還能把它微調并調整到完全適合您的需要，那不是很棒嗎？
圖 1：用 visual c# express 設計并實現自己的 web 瀏覽器
將這些對功能的渴望變為一種全新的產品看起來好像需要大量的工作。畢竟，開發 internet explorer 用了多少時間？（答：很長時間。）我如何能夠只用一晚上的時間，單槍匹馬，就能復制出 internet explorer 的強大 html 呈現功能并添加我自己的新功能列表？那是因為我使用 visual c# express。
利用他人成果的好處
在一個晚上編寫 web 瀏覽器的秘密在于使用其他人的成果。在本例中，秘密是使用了 c# express webbrowser 控件。如果您安裝了 c# express 并且打開了幫助，您可能已經看到了一個叫做¡°如何：用 c# express創建 windows 應用程序¡±的主題。這一簡短的項目將指導您完成創建 windows 窗體應用程序所涉及的各個步驟。如果您還沒有看完，而且您對 c# 不熟悉，我建議您閱讀它。
關鍵之處是，通過使用與 c# express 配套的控件，創建多個應用程序（包括完整的 web 瀏覽器）都是很容易的。一旦 webbrowser 控件確實已在 windows 窗體上了，您只需告訴它哪些 url 是要獲取并顯示的，以及是否需要返回、向前、刷新或停止。連接到 internet、獲取數據、格式化 html、顯示圖形等所有困難的工作都由該控件處理。
這個項目與幫助項目相近，除了一點，該項目創建多個 webbrowser 控件并將其添加到 tabcontrol 中的網頁上，而不是只添加一個 webbrowser 控件到 windows 窗體上。是的，我甚至無須編寫代碼來創建 tabcontrol。這是從工具箱到 windows 窗體拖放的另一個示例。
那么，雖然我知道這看似一個巨大而復雜的應用程序，仿佛需要數月的工作來完成，但事實上我只是連結了現有控件間的點，就在一個晚上完成了所有工作。這就是我的編程方式！
設計 web 瀏覽器
圖 2：從工具箱拖動控件是編寫這一應用程序的關鍵
以下描述了我如何著手創建 web browser express 項目。在從 c# express 新項目對話框創建一個windows 應用程序之后，我將下列控件拖到 windows 窗體：
1.
tabcontrol：這個控件存儲所有子頁，每個子頁能控制一個 webbrowser 控件。一旦它已經創建，向其添加其他頁就會很容易。為了確定它填充了整個 windows 窗體，dock 屬性被設定為 fill。這使得該控件保持與 windows 窗體同樣大小，即便是調整大小之后。
2.
menustrip：盡管這個應用程序中沒有菜單，還是存在 menustrip 來提供一個屏幕頂端的區域，按鈕和文本框可以添加到這個區域。另外，如果您決定添加一些菜單選項，您可以在這里添加。我將 menustrip 拖出以使其變得稍大。
3.
buttons：需要有一些用于 web 瀏覽的簡單控件。按鈕被拖動到 menustrip 中，并調整大小，有一個圖像應用于這些按鈕。我惟一需要做的一件事就是重新繪制圖像背景，使其為淺藍色，以便看起來像 menustrip。
4.
textboxes 和 comboboxes ：除了按鈕，我還需要一個用于 url 和搜索字符串的文本框。實際上，url 是一個 comboboxes，允許用戶輸入一個 web 地址，并從一個下拉列表中選擇項目。這個列表是在設計器中填充的，但如果您希望的話可以以編程方式添加新項。
5.
picturebox：最右邊的 picturebox 控件是為了裝飾用的。web 瀏覽器在下載內容時會顯示一些動畫。
6.
timer：timer 對象用于一秒鐘數次發出一個消息。這個消息被一個叫做 timer1_tick() 的方法捕獲，并用于更改在 picturebox 中顯示的圖像。結果是動畫。這并不算是第一流的解決方案，但是它奏效。
工作原理
當該程序啟動后，它所做的第一件事是調用 create_a_new_tab()。此方法創建一個新選項卡頁，將其添加到 tabcontrol，然后在其上創建一個 webbrowser 控件。webbrowser url 被設定為“主頁”，無論它在您的系統上可能是什么。下面是創建新選項卡的代碼：
// create a new tab pagetabpage newpage = new tabpage("loading...");tabcontrol1.tabpages.add(newpage);
這是創建新 webbrowser 控件的代碼：
// create a new webbrowser control.webbrowser webpage = new webbrowser(); webpage.parent = newpage;webpage.dock = dockstyle.fill;webpage.documentcompleted += new webbrowserdocumentcompletedeventhandler(webpage_documentcompleted);webpage.gohome();
此代碼確定 webbrowser 的父級是 tab 頁。它還用設置為 fill 的 dock 來確定它也保持在窗口的實際大小。我們還添加了一個事件處理程序：控件通過將消息發送到您的程序來工作。您可以選擇您所聆聽的消息，以及通過將事件處理程序鏈接到消息所調用的方法。在本例中，該消息告訴我們 webcontrol 已經完成了站點的加載和顯示，當完成任務時，它將調用名為 webpage_documentcomplete() 的方法。這允許我們定義當網頁加載完畢時執行的代碼。例如，停止動畫。
create_a_new_tab() 方法中的最后一行啟用計時器：
timer1.enabled = true;
計時器輕松地將小段消息發送到 timer1_tick()，它改變在 picturebox 控件中顯示的圖像，如下所示：
private void timer1_tick(object sender, eventargs e) { // this method is called by the timer, and we use it to update the // image displayed by the picturebox control to create a simple // animation. image_animation++; if (image_animation > 10) image_animation = 0; switch (image_animation) { case 0: picturebox_busy.image = wbe.properties.resources.anim0; break; case 1: picturebox_busy.image = wbe.properties.resources.anim1; break; case 2: picturebox_busy.image = wbe.properties.resources.anim2; break;... case 7: picturebox_busy.image = wbe.properties.resources.anim7; break; case 8: picturebox_busy.image = wbe.properties.resources.anim8; break; case 9: picturebox_busy.image = wbe.properties.resources.anim9; break; } }
您可以看到，計時器每次激發時，在 picturebox 中就會顯示一個不同的圖像。使用您將一個圖像分配到按鈕或 picturebox 控件時顯示的對話框，從磁盤加載圖像。
程序的其余部分由事件驅動 — 當用戶單擊按鈕或者輸入一個 web 地址或搜索字符串時調用特定方法。
例如，web 導航按鈕都調用當前 webbrowser 控件。例如，如果您單擊 back 按鈕，會調用以下方法：
private void button_back_click(object sender, eventargs e) { // go back - if the web control can go back, do it. webbrowser thiswebpage = getcurrentwebbrowser(); if (thiswebpage.cangoback) thiswebpage.goback(); }
當在 address 組合框中輸入一個 url 時，我們使用 web 控件的 navigate 方法來獲取并顯示該頁。下面的代碼使用了當前顯示在組合框中的文本并將其傳遞到 navigate 方法：
webbrowser thiswebpage = getcurrentwebbrowser(); thiswebpage.navigate(comboboxurl.text);timer1.enabled = true;
有意思的幾點
在編寫這個項目時，我想到了幾個小竅門。不過，可能它們實際上并不能說是竅門，而是一些技術，當您編寫自己的代碼時可能發現它們是有用的。
使文本和組合框響應 return 鍵。
address comboboxes 和 search textbox 允許用戶輸入文本，然后在單擊 go 按鈕時使用這個文本。使用 text 屬性從控件提取文本是很容易的。不過，如果按鍵盤上的“return”鍵就可以執行與單擊一個按鈕同樣的操作，這樣也很好。我通過從兩個文本框檢查 keyup 消息來使其奏效。當 keyup 消息到達時，我檢查它是否是 return 鍵。如果它是，就觸發了與單擊按鈕相同的操作。
combobox 而非textbox
web browser express 的第一個版本將一個 textbox用于地址 url 和 search 框。這很奏效，但是在實踐中每次都要手工輸入 url 十分麻煩。我刪除了 combobox 并添加了一個 textbox，用一些 url 填充這一組合框來使用戶開始。您可以從 combobox 屬性資源管理器添加您自己的 url。
集成搜索
所有流行的 web 瀏覽器都有一個可以輸入搜索詞匯的文本框，結果會返回到 web 頁中，而不需要首先瀏覽到搜索引擎。由于 msn 搜索目前有了更新，這看起來是將此功能內置到我自己的 web 瀏覽器中的最佳理由。
這非常簡單。只需查看 internet explorer 中 msn 搜索上的歷史記錄，看一下搜索字符串需要使用的格式。然后 search 方法將搜索文本追加到 url 并定位到該鏈接，結果作為一個標準 web 頁返回。
動畫
從圖形化 web 瀏覽器的早期以來，從 web 請求內容就是有跡可尋的，這樣用戶就不會以為它們的計算機出了問題，或者以為所有東西都被鎖定了。總的來說，讓用戶知道有些事在發生并且他們需要有耐心總是個好主意。
這是要實現的項目中我最喜歡的部分之一，如果您在藝術上有幾分天賦，那么在創建能夠想象到的最酷的徽標時，您可以得到不少樂趣。在本例中，我在一個動畫程序中創建了一系列大約 12 個幀，并將其作為 bmp 圖像導出，加載到 c# express 中。
圖 3：添加圖形十分簡單。為一個按鈕或 picturebox 選擇圖像屬性，您可以直接從磁盤導入圖像。在開始前確定圖像的大小正確。
擴展建議
如果您已經嘗試過了 web browser express，并且希望添加自己的功能，那么我這篇文章就做得不錯。為了讓您保持忙碌，下面還有幾個主意，讓您可以相對較快地取得進步。
•
歷史記錄：保留所有曾訪問過的 web 站點的記錄，這樣再訪問它們時會比較容易。
•
自動完成：檢查 return 鍵的方法也能夠檢查以前輸入過的 url，并自動將其完成。與 internet explorer 相比，您可以更改這一自動完成的方式，比如可以只有在按 tab 鍵時才自動完成。
•
收藏：combobox 由 6 個 web 站點填充，您可以從 properties 資源管理器很容易地更改這些站點。然而，將一個新按鈕添加到 menustrip 取得當前正在顯示的 web 站點并將其添加到 combobox 列表怎么樣呢？用這種方法用戶可以構建起其收藏站點的列表。當程序退出并重新啟動時，您需要一些方法來保存并重新加載這個列表。
•
集成的 rss 閱讀器：保持比競爭對手領先一步，盡量將 rss 閱讀器內置到您的 web 瀏覽器中。
小結
用 c# express 創建應用程序的秘密在于：知道哪些控件是可用的，以及用這些控件可以做什么。在本例中，只用了幾個控件就構造了一個全功能的 web 瀏覽器。祝您自己編程時好運。
john kennedy 是 c# 用戶教育團隊的程序員/作者。您可以通過閱讀他的網絡日記，在聯機幫助編寫中了解他的成就，網絡日記網址為：http://blogs.msdn.com/johnkenn
