文章的介绍
本文将为大家介绍如何在一个用MFC编写的程序中创建web风格的图形用户界面。这里我所讲述的“application with Web-style GUI”,意思是说用户界面的全部或者一部分是html格式组成的。下面这副图为我们展示了一个web风格的会话窗口。
当我尝试在程序中使用这种web类型的用户界面时,我面临以下两个问题:
1、如何处理web界面的事件和消息(即截获dhtml界面上的事件并由后台程序进行处理)
2、如何让后台程序与web界面的元素进行交互(即让后台程序能够对dhtml进行修改与刷新)
为了解决这两个棘手的问题,MSDN给我们的建议是使用dhtml com组件。但是我认为这不是个好的主意。尤其对于简单的mfc用户界面模式,这种模式下事件被映射到控件类进行处理。
所以我写下这篇文章,为大家解释如何能够更快捷的创建web风格的用户界面并使得这个界面能和程序后台一起工作。概括起来就是:
◎用OnBeforeNavigate2()接收web界面的事件。
◎通过在html的代码中加入相应的脚本函数来实现界面与后台程序的交互。
在这篇文章中我还将为大家介绍三个类:CHtmlDialog, CHtmlScript
, CHtmlCtrl,以及如何用它们创建web风格的用户界面。
用CHtmlView类显示html格式
我们需要将程序界面中的html代码做一些改动,让他们看起来和IE中看到的略有不同。
在MFC程序中显示html格式是很容易的事情。只需要我们调用CHtmlView类就可以完成这项工作。首先我们要创建一个新的“MFC AppWizard(exe)”工程,选择单文档结构视图并打开多文档Document View结构支持。然后在CLass Wizard中创建并将ChtmlView类设定为基类。最后,把html格式的页面加入到系统资源中。
为了使我们的web界面看起来更象是一个程序的界面而不是IE的窗口,对html页面的代码必须做一些必要的修改。
♦ 将html背景的颜色设定成标准的windows应用程序背景的颜色。
♦ 将html页面的右键菜单禁止,除非是用于editbox框中的右键菜单。
♦ 禁止html页面中的文字被鼠标框中,同样,editbox框中的文字例外。
♦ 禁止鼠标指针划过静态文字的时候改变形态,在IE中,鼠标指针划过静态文字的时候会变成“工”字形,在editbox框中也是如此。而在windows应用程序中这种现象应该避免。
下面的这段代码实现了上述的四项需要:
<SCRIPT LANGUAGE="JScript">
// Forbid user’s mouse selecting for the content
// (allow text selection in EditBox only)
function onSelect1(){
if ( window.event.srcElement.tagName !="INPUT" ) {
window.event.returnValue = false;
window.event.cancelBubble = true;
}
}
// Forbid IE context menu
// (allow in EditBox only)
// (if the real context menu must be shown - Advanceв Hosting
// Interfaces must be used)
function onContextMenu(){
if ( window.event.srcElement.tagName !="INPUT" ) {
window.event.returnValue = false;
window.event.cancelBubble = true;
return false;
}
}
// Install Context Menu and Mark handlers on HTML loading.
//
function onLoad()
{
// forbid cursor change (except "INPUT"
// entry box and "A" hyperlink) for HTML text.
var Objs = document.all;
for (i=0; i< Objs.length; i++)
// "INPUT" entry box and "A" hyperlink
if (Objs(i).tagName!="INPUT" && Objs(i).tagName!="A")
Objs(i).style.cursor = "default";
// event handler – content selection
document.onselectstart = onSelect1;
// event handler – context menu
document.oncontextmenu = onContextMenu;
}
</SCRIPT>
<BODY οnlοad="onLoad();"
leftmargin=0 topmargin=0 rightmargin=0 bottommargin=0
style = "background-color: buttonface;" >
// the HTML background color will be as in Windows Applications
…
用上述的方法,我们已经可以用html来实现我们的程序界面了。而菜单、工具条以及静态线都保留了下来,毕竟我们并不是要强制放弃所有的传统控件的使用。这种方式下,我们获得了更大的弹性。