一、QT webkit简介
1.Qt
Qt(发音同 cute)是一个跨平台的C++应用程式开发框架,有时又被称为C++部件工具箱。Qt被用在KDE桌面环境、Opera、Google Earth、Skype、Adobe Photoshop Album和VirtualBox的开发中。它是挪威Qt Software 的产品,2008年6月17日被芬兰的诺基亚(Nokia)公司收购,以增强该公司在跨平台软件研发方面的实力。
2.Webkit
WebKit是Mac OS X v10.3及以上版本所包含的软件框架(对v10.2.7及以上版本也可通过软件更新获取)。同时,WebKit也是Mac OS X的Safari网页浏览器的基础。WebKit是一个开源项目,主要由KDE的KHTML修改而来并且包含了一些来自苹果公司的一些组件。
传统上,WebKit包含一个网页引擎WebCore和一个脚本引擎JavaScriptCore,它们分别对应的是KDE的KHTML和KJS。不过,随着JavaScript引擎的独立性越来越强,现在WebKit和WebCore已经基本上混用不分(例如Google Chrome和Maxthon 3采用V8引擎,却仍然宣称自己是WebKit内核)。
3.Qt webkit
简单的说,Qt webkit就是Qt对Apple公司webkit的支持而开发的库,主要包括以下几个类
Access to HTML 5 databases created with JavaScript |
|
Represents a frame in a web page |
|
Represents the history of a QWebPage |
|
Interface to implement link history |
|
Represents one item in the history of a QWebPage |
|
Information about the web page content after a hit test |
|
Object to view and edit web documents |
|
Creates plugins to be embedded into web pages |
|
Defines a security boundary for web sites |
|
Object to store the settings used by QWebPage and QWebFrame |
|
Widget that is used to view and edit web documents |
二、QWebView Class介绍
QWebView类是Qt webkit模块中最常用到的类之一。它用来创建一个可以view以及edit文档的widget。也就是说,我们可以通过QWebView来查看和编辑网页(编辑网页视具体情况实现)。同时,QWebView可以包含QWebPage和QWebFrame的对象,它们三者的关系可以表示为:
QWebPage和QWebFrame将会在后面介绍。
三、QWebPage Class介绍
QWebPage类和QWebView类一样,都用于查看和编辑网页,不同的是,从两者的包含关系上我们可以知道,QWebView可以用于打开多个网页,而里面具体的网页对象就是QWebPage。QWebPage通过mainframe()方法可以得到More QWebView-like functions,如load(), setUrl() 和 setHtml()。
四、QWebFrame Class介绍
QWebFrame可以算是QWebPage的元对象了,每一个QWebPage至少有一个QWebFrame,它被称作QWebPage的mainframe,通过QWebPage:: mainframe()方法得到。换言之,QWebFrame依附QWebPage存在。通过调用QWebFrame的page()方法返回它所在的QWebPage对象。而zoomFactor()方法则实现了网页内容的缩放。
五、QWebDataBase Class介绍
QWebDataBase提供了对基于JavaScript创建的HTML 5数据库。新一代的HTML 5标准也提供对基于javaScript SQL数据库访问的支持。QWebDataBase就是这些数据库的C++接口。关于HTML 5的详情,可以参见HTML 5 Draft Standard.
六、QWebHistory Class介绍
顾名思义,QWebHistory用来表示QWebPage的历史记录。通过创建相应的Items实现前进、后退等操作。与之相关的类为QWebHistoryItem和QWebHistoryInterface.
七、QWebHistoryInterface Class介绍
QWebHistory用来表示QWebPage的历史记录,不过历史记录却是通过QWebHistoryInterface记录下来的。当调用addHistoryEntry(const QString & url)方法后,访问的网页地址就被记录到visited pages里了。
八、QWebHistoryItem Class介绍
QWebHistoryItem类用于创建QWebHistory的Items. 加上QWebHistoryInterface类,实现了浏览器的历史记录功能。
九、QWebHitTestResult class介绍
首先要明白HitTest的含义。HitTest通常被称为碰撞测试或相交测试,用于测试两个物体或目标(对象)间是否重叠和相交。可以用来判断网页内容是否用选中、是否能编辑、是否有超链接等等。
十、QWebPluginFactory Class介绍
QWebPluginFactory是QWebPage的插件工厂,用于创建嵌入web pages的插件。QWebPluginFactory使用的前提是在QWebSettings中Plugins被设定为enabled。
插件可以用于实现对多媒体类型(MIME)数据的应用。比如在网页中显示pdf文档或flash动画。不过,现阶段Qt WebKit还不支持对flash的应用,如果想要在Qt WebKit中使用flash,可以参考使用一些开源的flash库,比如gnash。想更进一步了解MIME和gnash,请点击MIME数据类型和gnash应用。
十一、QWebSecurityOrigin class介绍
QWebSecurityOrigin用于定义网站的安全边界(Security boundary),它包含了一个网站host name, scheme, 和port number,用于阻止非法权限对网站数据的访问。
十二、QWebSettings Class介绍
用于储存QWebPage和QWebFrame的设置。每一个QWebPage都有它的QWebSettings对象,用于对网页设置信息的存储。如果一个setting没有被配置,那么它将通过QWebSettings::globalSettings()寻找一个global settings.网页的属性通过枚举类型enum QWebSettings::WebAttribute定义.
一.首先,让我们展示一幅QWebView的网页效果图:
想要实现上面的效果很简单,你只需要完成三个步骤
1.建立一个QWebView对象,QWebView *view = new QWebView(parent);其中parent为父类.如果想要QWebView为top window,可以设置parent = 0
2.调用load或setUrl方法设置要显示的网页.注意网页的格式以http://开头
3.调用show方法显示QWebView
完整的代码为:
QWebView *view = new QWebView(parent); //步骤1
view->load(QUrl("http://qtsoftware.com/")); //步骤2
view->show(); //步骤3
二.QWebView除了用load方法设定网页路径外,也可以使用setHtml方法加载html格式的网页,这里我们以加载google地图插件为例.最后的效果图为:
1.第一步,我们通过google地图获取插件的代码。进入google地图页面,点击链接,获取代码
2.获取到得代码为:
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
src="http://ditu.google.cn/maps?hl=zh-CN&q=%E5%9C%B0%E5%9B%BE&ie=UTF8&
brcurrent=3,0x31508e64e5c642c1:0x951daa7c349f366f,0%3B5,0,0&ll=38.005263,115.357367&
spn=15.390188,22.535491&output=embed"></iframe>
<br /><small><a href="http://ditu.google.cn/maps?hl=zh-CN&q=%E5%9C%B0%E5%9B%BE&
ie=UTF8&brcurrent=3,0x31508e64e5c642c1:0x951daa7c349f366f,0%3B5,0,0&
ll=38.005263,115.357367&spn=15.390188,22.535491&source=embed" style="color:#0000FF;text-align:left">查看大图</a>
</small>
我们可以删去br、small和a标记,最后在代码前后添加<html></html>标记
将文件保存为*.html(注:删除的部分为屏蔽google地图的右键效果,可以保留)
3.调用QWebView的setHtml方法设定上述文件的路径,然后用show方法显示google地图
================================================================================================
关于QWebView的信号与槽,下面列出:
Public Slots
- void back ()
- void forward ()
- void print ( QPrinter * printer ) const
- void reload ()
- void stop ()
- 19 public slots inherited from QWidget
- 1 public slot inherited from QObject
- void iconChanged ()
- void linkClicked ( const QUrl & url )
- void loadFinished ( bool ok )
- void loadProgress ( int progress )
- void loadStarted ()
- void selectionChanged ()
- void statusBarMessage ( const QString & text )
- void titleChanged ( const QString & title )
- void urlChanged ( const QUrl & url )
- 1 signal inherited from QWidget
- 1 signal inherited from QObject
Signals
1.loadStarted、loadFinished和loadProgress信号介绍
loadStarted信号当有新的web page请求时发出。而我们关注更多的是loadProgress信号。loadProgress信号在load web page的一个元素成功时发出。这里的元素指代image、text、script对象。loadProgress的value表明了网页load的进度,范围从0-100。我们可以看出,QWebView封装了获得load进度值的计算方法。我们可以连接信号,对进度条赋值
connect(webView, SIGNAL(loadProgress(int)), SLOT(setProgress(int)));
其中setProgress方法需要自己定义。
loadFinished信号在web page load完成后发送。
2.iconChanged、selectionChanged、titleChanged和urlChanged信号介绍
当web page显示网页的icon、selected text、title或url改变时发送
3.back、forward、reload、print、stop槽介绍
back、forward对应QWebPage的后退与前进操作,相当于webView->page()->triggerPageAction(QWebPage::Back);和
webView->page()->triggerPageAction(QWebPage::Forward);
其中QWebView通过调用page方法返回current page. QWebPage::Back和QWebPage::Forward在QWebPage::WebAction中定义
Reload与stop槽为重载与停止load web page
Print槽用于将main frame通过QPrinter paints出来。这里可以更进一步了解QWebView、QWebPage与QWebFrame三者的层次结构
4.linkClicked与statusBarMessage信号
首先,linkClicked信号能够发送的前提是对应的QWebPage::linkDelegationPolicy被设定为允许链接
而statusBarMessage信号发生在status text改变时
========================================
本篇为QWebView应用的扩展,除了之前的QWebView相关知识,还涉及到QPainter及QPaintEvent的应用。本篇实现的效果为google map的夜视(night-mode)功能,如下图
实现night-mode的原理涉及到反色等知识,不过编写起来却十分简单。你可以尝试打开“画图”等图片编辑工具,然后选中反色,得到的效果即我们现在要完成的。
在QWebView的反色处理上,我们通过重写paintEvent函数实现:
1.首先调用QWebView的paintEvent方法将我们需要显示的图片(内容)paint好
2.QPaint提供了反色的接口setCompositionMode。它是一系列图像构成的接口,我们选择QPainter::CompositionMode_Difference实现整个画面的反色效果
3.设置好反色效果后,调用fillRect方法填充所需变化的区域。
完整的代码为(paintEvent,省略其他变量定义)
void webViewClass::paintEvent(QPaintEvent *event)
{
QWebView::paintEvent(event);
if(isNightMode)
{
QPainter p(this);
//p.setBackgroundMode(Qt::OpaqueMode);
p.setCompositionMode(QPainter::CompositionMode_Difference);
p.fillRect(event->rect(), Qt::white);
}
}
其中在fillRect中,因为CompositionMode_Difference模式指的是一种异或(xor)运算,因为white的颜色是全1,所以和原有图像的运算结果刚好是按位取反的功能,做到了反色效果。