在VB中使用IE的 WebBrowser控件改进界面设计

** 在 ** ** VB ** ** 中使用 ** ** IE ** ** 的 ** ** WebBrowser ** ** 控件 ** ** **

** 改进界面设计 ** ** **

在程序设计中,如何设计出美观、实用,有个性的界面是每个程序设计者在界面设计中追求的目标。随着 Windows XP 的推出,各种与众不同的华丽界面越来越被程序设计者和软件使用者所认同。

利用 Windows 中的 WebBrowser 控件,可以把华丽的网页设计技术应用到界面设计中去,例如微软著名的 MSN 浏览器的许多界面其实就是一个 Web 页, Windows XP 中的帮助中心、 Microsoft Encarta (微软百科全书)等许多软件中的一些界面也是利用 WebBrowser 控件显示的 Web 页。

利用 WebBrowser 控件显示一个网页,制作一个简单的浏览器已经有很多文章介绍,实现也不复杂,但如何实现程序与 Web 页的交互则是将其应用到界面设计中的关键。

** ActiveX ** ** 控件和 ** ** WebBrowser ** ** 控件的使用 ** ** **

用 Visual Basic 创建一个应用程序的第一步是创建界面。而控件则是创建界面的基本模块,是包括在窗体对象内的对象。每种类型的控件都有自己的属性、方法和事件,属性一般控制控件的外观、大小等性质,方法则是控件的能力或者功能,事件则代表与用户的交互,例如鼠标的移动点击、键盘的输入等都会触发相应的事件。

WebBrowser 控件是随 IE 3.0 以上版本提供的一个可编程的 ActiveX 控件,利用 WebBrowser 控件可以显示、控制、分析 Web 页,除了 IE , chm 格式的帮助的浏览,还广泛应用在以 IE 为核心的许多浏览器和其他程序中。

WebBrowser 控件在 VB 中的使用很简单。启动 VB ,创建一个标准 EXE 工程,选择工程——部件,打开部件对话框,从中找到 Microsoft Internet Controls ,选中后单击应用,然后关闭对话框(下图),可以看到 WebBrowser 控件已经添加到工具栏。

将 WebBrowser 控件拖至窗体,调整到相应大小,打开代码窗口,在 Form_Load 过程中键入如下代码:

Private Sub Form_Load()

WebBrowser1.Navigate "http://www.sohu.com"

End Sub

运行程序,可以看到搜狐的主页显示在了相应的对话框中了。如果是本地的 Web 页只需将 http://www.sohu.com 替换为本地文件的全路径(目录 + 文件名)就可以了。

** 控制 ** ** WebBrowser ** ** 控件 ** ** **

利用 WebBrowser 控件的 GoBack (后退)、 GoForward (前进)、 GoHome (主页)、 Navigate (定位)、 Refresh (刷新)、 Stop (停止)等方法,可以实现浏览器的常规操作。例如实现地址栏的操作,可以先向窗体添加一个文本框和按钮,并向按钮的 Click 事件相应过程中添加如下代码:

Private Sub Command1_Click()

WebBrowser1.Navigate Text1.Text

End Sub

这样,向文本框输入地址,单击按钮,即可访问不同的站点。 WebBrowser 控件得其他操作方法类似,读者可以参考 MSDN 的有关介绍。

** 实现 ** ** Web ** ** 页与程序的交互 ** ** **

要实现 Web 页与程序的交互,其关键在于改写 WebBrowser 控件的 BeforeNavigate2 事件,截获需要与程序交互的动作,然后进行相应的操作。例如,我们在程序目录下新建一个简单的 Web 页 test.htm ,其内容如下:

1<html>
2<head>
3<title> Test </title>
4</head>
5<body>
6<a href="test1.htm">test1</a><br/>
7<a href="test1.htm">test2</a>
8</body>
9</html>

在 Form_Load 过程中键入如下代码:

Private Sub Form_Load()

WebBrowser1.Navigate App.Path & "\test.htm"

End Sub

运行程序,点击 test1 或者 test2 则打开相应的 test1.htm (如果 test1.htm 存在),或者显示文件找不到错误。那么如何截获用户点击 test1 这个超链接呢,我们在 BeforeNavigate2 这个事件中键入以下代码:

If Right(URL, 9) = "test1.htm" Then

MsgBox "test1 clicked"

Cancel = True ' 使 WebBrowser 控件停止相应此事件

ElseIf Right(URL, 9) = "test2.htm" Then

MsgBox "test2 clicked"

Cancel = True

End If

运行程序,可以看到程序已经截获了用户点击相应超链接的事件(注意: right 函数的使用是为了只提取 url 的最后部分,因为 url 还包括网络协议和目录等信息)。这样,我们就可以在程序界面中使用 Web 页来实现用户界面,并通过截获相应的点击事件,通过判断相应的 url ,得知用户的操作,从而使程序进行不同的操作。

** 换肤( ** ** Skin ** ** )的实现 ** ** **

利用以上的程序设计思路,我们来实现程序的换肤。因为程序的动作的处理集中在对 WebBrowser 控件 BeforeNavigate2 这个事件的处理上,只与 url 的值有关,与 Web 页的具体内容和设计没有关系,因此不但可以分离界面和程序的设计,而且可以轻松的实现诸如换肤此类操作。

具体实现办法可以简单叙述为以下几步:

1. 制作几个不同的 Web 页,但要保证相应的超链接( url )一致;

2. 在程序中设计一个换肤的操作,切换当前 WebBrowser 所显示的 Web 页;

3. 在 BeforeNavigate2 中处理所有的动作。

以下即为笔者设计的一个简单示例的运行画面。如果将窗体设置为无标题栏,无边框,效果就会更佳。

全部程序的代码如下,实现非常简单。

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


** 结束语 ** ** **

在 VB 中实现与众不同、具有个性界面的程序的办法一般是使用各类界面控件,或者通过调用 WinAPI 来实现,但一般来说很多漂亮的控件都是需要付费购买的,而通过编程实现都比较复杂,且程序的修改、维护也相应会很复杂。

利用 WebBrowser 控件可以将界面设计和程序设计分离,对于交互较简单的程序,只需简单编程即可实现一些其他方法较难实现的功能,例如图片按钮、不规则按钮、动画图标等利用 Web 页可以轻松实现的功能以及换肤等一般程序设计较难实现的功能。利用本文提供的方法进行界面设计可以广泛应用在各类多媒体程序的界面设计,以及程序中类似 Office XP 和 Windows XP 的任务窗格的设计。

对于要进行输入输出等相对复杂任务的交互,可以通过下面几个方法思路来实现:

1 .将复杂的操作和交互集中起来,直接利用其他方法实现而不利用 Web 页来实现。

2 .程序的输入:在 Web 页的 form 设计中,将提交操作的 method 设置为 get ,则用户输入内容会出现在 url 中,可以通过解析 url 获取用户输入,并进行相应动作。

3 .程序的输出:通过对显示的 Web 页的改写实现。设计一个模板,读入此文件,应用 Replace 函数可以迅速将程序模板中的内容替换为程序运算后的结果。

Published At
Categories with Web编程
Tagged with
comments powered by Disqus