在VB中使用IE的 WebBrowser控件改进界面设计
2024-07-21 02:20:51
供稿：网友
在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，其内容如下：
<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则打开相应的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函数可以迅速将程序模板中的内容替换为程序运算后的结果。
，欢迎访问网页设计爱好者web开发。
