Web Browser Express 概述

busfly 2007-01-09

展开全文

Web Browser Express 概述

发布日期： 8/26/2004 | 更新日期： 8/26/2004

John Kennedy

Microsoft Corporation

摘要：建立您自己的、支持选项卡的 Web 浏览器，以及连接到搜索引擎的集成链接。

下载 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 Page
TabPage 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 浏览器中。