Web Browser Express 概述

本頁(yè)內(nèi)容

簡(jiǎn)介

Web 瀏覽器的一個(gè)功能是在同一瀏覽器窗口內(nèi)打開不同選項(xiàng)卡或子頁(yè)，這個(gè)功能正在變得更加普及,。當(dāng)瀏覽多個(gè)站點(diǎn)時(shí),，使用選項(xiàng)卡來(lái)分開多個(gè)頁(yè)會(huì)保持桌面的整齊。有若干種第三方 Web 瀏覽器在 Windows 和其他平臺(tái)上提供這一功能,，如果您跟我一樣,，您將發(fā)現(xiàn)這是一種讓人上癮的瀏覽方法。很多瀏覽器,，無(wú)論是默認(rèn)設(shè)置還是通過插件,，也提供一種快速方法，無(wú)須直接使用搜索引擎就可以執(zhí)行 Web 搜索,。能夠編寫自己的瀏覽器,，并使其能夠完成所有這些工作，還能把它微調(diào)并調(diào)整到完全適合您的需要,，那不是很棒嗎,？

圖 1：用 Visual C# Express 設(shè)計(jì)并實(shí)現(xiàn)自己的 Web 瀏覽器

將這些對(duì)功能的渴望變?yōu)橐环N全新的產(chǎn)品看起來(lái)好像需要大量的工作,。畢竟，開發(fā) Internet Explorer 用了多少時(shí)間,？（答：很長(zhǎng)時(shí)間,。）我如何能夠只用一晚上的時(shí)間，單槍匹馬,，就能復(fù)制出 Internet Explorer 的強(qiáng)大 HTML 呈現(xiàn)功能并添加我自己的新功能列表,？那是因?yàn)槲沂褂?Visual C# Express。

利用他人成果的好處

在一個(gè)晚上編寫 Web 瀏覽器的秘密在于使用其他人的成果,。在本例中,，秘密是使用了 C# Express WebBrowser 控件。如果您安裝了 C# Express 并且打開了幫助,，您可能已經(jīng)看到了一個(gè)叫做¡°如何：用 C# Express創(chuàng)建 Windows 應(yīng)用程序¡±的主題,。這一簡(jiǎn)短的項(xiàng)目將指導(dǎo)您完成創(chuàng)建 Windows 窗體應(yīng)用程序所涉及的各個(gè)步驟。如果您還沒有看完,，而且您對(duì) C# 不熟悉,，我建議您閱讀它。

關(guān)鍵之處是,，通過使用與 C# Express 配套的控件,，創(chuàng)建多個(gè)應(yīng)用程序（包括完整的 Web 瀏覽器）都是很容易的。一旦 WebBrowser 控件確實(shí)已在 Windows 窗體上了,，您只需告訴它哪些 URL 是要獲取并顯示的,，以及是否需要返回、向前,、刷新或停止,。連接到 Internet、獲取數(shù)據(jù),、格式化 HTML,、顯示圖形等所有困難的工作都由該控件處理。

這個(gè)項(xiàng)目與幫助項(xiàng)目相近,，除了一點(diǎn),，該項(xiàng)目創(chuàng)建多個(gè) WebBrowser 控件并將其添加到 TabControl 中的網(wǎng)頁(yè)上，而不是只添加一個(gè) WebBrowser 控件到 Windows 窗體上,。是的,，我甚至無(wú)須編寫代碼來(lái)創(chuàng)建 TabControl。這是從工具箱到 Windows 窗體拖放的另一個(gè)示例,。

那么,，雖然我知道這看似一個(gè)巨大而復(fù)雜的應(yīng)用程序,，仿佛需要數(shù)月的工作來(lái)完成,，但事實(shí)上我只是連結(jié)了現(xiàn)有控件間的點(diǎn),，就在一個(gè)晚上完成了所有工作。這就是我的編程方式,！

設(shè)計(jì) Web 瀏覽器

圖 2：從工具箱拖動(dòng)控件是編寫這一應(yīng)用程序的關(guān)鍵

以下描述了我如何著手創(chuàng)建 Web Browser Express 項(xiàng)目,。在從 C# Express 新項(xiàng)目對(duì)話框創(chuàng)建一個(gè)Windows 應(yīng)用程序之后，我將下列控件拖到 Windows 窗體：

工作原理

當(dāng)該程序啟動(dòng)后,，它所做的第一件事是調(diào)用 Create_a_new_tab()。此方法創(chuàng)建一個(gè)新選項(xiàng)卡頁(yè),，將其添加到 TabControl,，然后在其上創(chuàng)建一個(gè) WebBrowser 控件。WebBrowser URL 被設(shè)定為“主頁(yè)”,，無(wú)論它在您的系統(tǒng)上可能是什么,。下面是創(chuàng)建新選項(xiàng)卡的代碼：

// Create a new Tab Page
TabPage newpage = new TabPage("Loading...");
tabControl1.TabPages.Add(newpage);

這是創(chuàng)建新 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 的父級(jí)是 Tab 頁(yè)。它還用設(shè)置為 Fill 的 Dock 來(lái)確定它也保持在窗口的實(shí)際大小,。我們還添加了一個(gè)事件處理程序：控件通過將消息發(fā)送到您的程序來(lái)工作,。您可以選擇您所聆聽的消息，以及通過將事件處理程序鏈接到消息所調(diào)用的方法,。在本例中,，該消息告訴我們 WebControl 已經(jīng)完成了站點(diǎn)的加載和顯示，當(dāng)完成任務(wù)時(shí),，它將調(diào)用名為 webpage_DocumentComplete() 的方法,。這允許我們定義當(dāng)網(wǎng)頁(yè)加載完畢時(shí)執(zhí)行的代碼。例如,，停止動(dòng)畫,。

Create_a_new_tab() 方法中的最后一行啟用計(jì)時(shí)器：

timer1.Enabled = true;

計(jì)時(shí)器輕松地將小段消息發(fā)送到 timer1_tick()，它改變?cè)?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;
}
}

您可以看到,，計(jì)時(shí)器每次激發(fā)時(shí)，在 PictureBox 中就會(huì)顯示一個(gè)不同的圖像,。使用您將一個(gè)圖像分配到按鈕或 PictureBox 控件時(shí)顯示的對(duì)話框,，從磁盤加載圖像。

程序的其余部分由事件驅(qū)動(dòng) — 當(dāng)用戶單擊按鈕或者輸入一個(gè) Web 地址或搜索字符串時(shí)調(diào)用特定方法,。

例如,，Web 導(dǎo)航按鈕都調(diào)用當(dāng)前 WebBrowser 控件。例如,，如果您單擊 Back 按鈕,，會(huì)調(diào)用以下方法：

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();
}

當(dāng)在 Address 組合框中輸入一個(gè) URL 時(shí)，我們使用 Web 控件的 navigate 方法來(lái)獲取并顯示該頁(yè),。下面的代碼使用了當(dāng)前顯示在組合框中的文本并將其傳遞到 navigate 方法：

WebBrowser thiswebpage = GetCurrentWebBrowser();
thiswebpage.Navigate(comboBoxurl.Text);
timer1.Enabled = true;

有意思的幾點(diǎn)

在編寫這個(gè)項(xiàng)目時(shí),，我想到了幾個(gè)小竅門。不過,，可能它們實(shí)際上并不能說(shuō)是竅門,，而是一些技術(shù),，當(dāng)您編寫自己的代碼時(shí)可能發(fā)現(xiàn)它們是有用的。

使文本和組合框響應(yīng) Return 鍵,。

Address ComboBoxes 和 Search TextBox 允許用戶輸入文本，然后在單擊 Go 按鈕時(shí)使用這個(gè)文本,。使用 Text 屬性從控件提取文本是很容易的,。不過，如果按鍵盤上的“return”鍵就可以執(zhí)行與單擊一個(gè)按鈕同樣的操作,，這樣也很好,。我通過從兩個(gè)文本框檢查 KeyUp 消息來(lái)使其奏效。當(dāng) KeyUp 消息到達(dá)時(shí),，我檢查它是否是 Return 鍵,。如果它是，就觸發(fā)了與單擊按鈕相同的操作,。

ComboBox 而非TextBox

Web Browser Express 的第一個(gè)版本將一個(gè) TextBox用于地址 URL 和 Search 框,。這很奏效，但是在實(shí)踐中每次都要手工輸入 URL 十分麻煩,。我刪除了 ComboBox 并添加了一個(gè) TextBox,，用一些 URL 填充這一組合框來(lái)使用戶開始。您可以從 ComboBox 屬性資源管理器添加您自己的 URL,。

集成搜索

所有流行的 Web 瀏覽器都有一個(gè)可以輸入搜索詞匯的文本框,，結(jié)果會(huì)返回到 Web 頁(yè)中，而不需要首先瀏覽到搜索引擎,。由于 MSN 搜索目前有了更新,，這看起來(lái)是將此功能內(nèi)置到我自己的 Web 瀏覽器中的最佳理由。

這非常簡(jiǎn)單,。只需查看 Internet Explorer 中 MSN 搜索上的歷史記錄,，看一下搜索字符串需要使用的格式。然后 Search 方法將搜索文本追加到 URL 并定位到該鏈接,，結(jié)果作為一個(gè)標(biāo)準(zhǔn) Web 頁(yè)返回,。

動(dòng)畫

從圖形化 Web 瀏覽器的早期以來(lái)，從 Web 請(qǐng)求內(nèi)容就是有跡可尋的,，這樣用戶就不會(huì)以為它們的計(jì)算機(jī)出了問題,，或者以為所有東西都被鎖定了?？偟膩?lái)說(shuō),，讓用戶知道有些事在發(fā)生并且他們需要有耐心總是個(gè)好主意。

這是要實(shí)現(xiàn)的項(xiàng)目中我最喜歡的部分之一,，如果您在藝術(shù)上有幾分天賦,，那么在創(chuàng)建能夠想象到的最酷的徽標(biāo)時(shí),，您可以得到不少樂趣。在本例中,，我在一個(gè)動(dòng)畫程序中創(chuàng)建了一系列大約 12 個(gè)幀,，并將其作為 BMP 圖像導(dǎo)出，加載到 C# Express 中,。

圖 3：添加圖形十分簡(jiǎn)單,。為一個(gè)按鈕或 PictureBox 選擇圖像屬性，您可以直接從磁盤導(dǎo)入圖像,。在開始前確定圖像的大小正確,。

擴(kuò)展建議

如果您已經(jīng)嘗試過了 Web Browser Express，并且希望添加自己的功能,，那么我這篇文章就做得不錯(cuò),。為了讓您保持忙碌，下面還有幾個(gè)主意,，讓您可以相對(duì)較快地取得進(jìn)步,。

小結(jié)

用 C# Express 創(chuàng)建應(yīng)用程序的秘密在于：知道哪些控件是可用的,，以及用這些控件可以做什么,。在本例中，只用了幾個(gè)控件就構(gòu)造了一個(gè)全功能的 Web 瀏覽器,。祝您自己編程時(shí)好運(yùn),。

John Kennedy 是 C# 用戶教育團(tuán)隊(duì)的程序員/作者。您可以通過閱讀他的網(wǎng)絡(luò)日記，在聯(lián)機(jī)幫助編寫中了解他的成就,，網(wǎng)絡(luò)日記網(wǎng)址為：http://blogs./johnkenn