白皮书
Qt 集成 WebKit
渲染、使用和扩展网络技术
概要
开源 WebKit 浏览器引擎与 Qt 4.5 应用程序和 UI 框架的集成模糊了本地应用程序与网络内容之间的界
限。有了此类混合模式的服务，就可以高效地构建和发布很难或无法仅通过网络 API 或本地开发环境单
独开发的功能。由于融合了网络技术的简易性和 Qt 应用程序框架的强大功能，设计人员和编码人员可
专注于自己最擅长的部分。本白皮书列举了一个简单的设计示例：可访问 Twitter 服务的跨平台应用程
序。该示例通过三个阶段，详细说明了如何使用集成了 WebKit 的 Qt 4.5，开发出渲染、集成和扩展网
络服务的本地应用程序。
白皮书
目录
奠定基础 .........................................................................................................................................3
渲染所有组成部分 ......................................................................................................................... 4
2.1 获得网络应用程序的性能优势 ............................................................................................... 6
3. 集成应用程序和网络服务 ............................................................................................................. 7
3.1 自动验证 ................................................................................................................................... 7
3.2 利用网络服务 ........................................................................................................................... 7
4. 扩展性能 ......................................................................................................................................... 8
4.1 编写通过 OBJECT 标签的访问插件 .................................................................................... 9
4.2 通过 JavaScript 使用本地功能 .............................................................................................. 9
4.3 融为一体 .................................................................................................................................. 10
5. 双向扩展 ........................................................................................................................................ 11
6. 培养创意思维 ................................................................................................................................ 12
7. 开始入门 ........................................................................................................................................ 12
1.
2.
© 2009 诺基亚公司和/或其附属公司。-Qt 集成 WebKit：渲染、使用和扩展网络技术。– 2
白皮书
1. 奠定基础
开源 WebKit 浏览器引擎与 Qt 4.5 应用程序框架的集成模糊了应用程序与网络内
容的差别。它可以访问所有网络服务、访问所有可在本地编程环境获得的性能和
控件，并可通过最大化网络服务范围的跨平台框架进行构建。有了此类混合模式
的服务，就可以高效地构建和发布很难或无法仅通过网络 API 或本地开发环境开
发的功能。在开始讨论集成的优势之前，很有必要了解要集成的所有组成部分。
Qt 是跨平台的应用程序框架。Qt 1.0 于 1994 年发布，在此之后 Qt 逐渐发展成
为开发高性能应用程序的标准框架，这些应用程序只需使用单一的源代码就可跨
Microsoft Windows、Mac OS X、Linux、所有主要 Unix 系统、以及嵌入式 Linux
和 Windows CE 移植。已有来自不同行业的 5,000 多家公司在使用 Qt，使用它的
开源开发人员大约有 250,000 人。一些最知名的应用程序是使用 Qt 框架构建，例
如 Adobe 使用 Qt 构建其 Photoshop Elements 软件，Google 使用 Qt 构建
Google Earth，Skype 使用 Qt 构建其 Linux 客户端。
WebKit 是开源网络浏览器引擎。它完全符合标准，支持与当前网络内容兼容所
需的所有功能。它完全支持 HTML 4.01、XHTML 1.1、XML、CSS 2.1、
JavaScript 1.5、大部分 SVG 1.2、部分 CSS 3、HTML editing、HTML canvas、
AJAX、XSLT 和 XPath 1.0。
WebKit 是以 LGPL (和部分 BSD) 方式授权的，此类授权适合将 WebKit 集成到
商业框架中。WebKit 开发是采用开源形式的，对诺基亚和 Qt Development
Frameworks 项目的未来发展方向有很大影响，也促使我们为 webkit 开发所需的
功能不断努力。
WebKit 项目是 KDE's KHTML 浏览器引擎的一个分支。诺基亚和 Qt Development
Frameworks 雇用了大量从事过 KHTML 工作的关键开发人员, 其中包括 Qt
Development Frameworks 的研发主管 Lars Knoll，他从 1998 年至 2003 年期间一
直主管 KHTML 项目并对其进行维护。因此，我们对其源代码有非常深入的了解。
许多主要公司已采用 WebKit 作为其浏览器解决方案的首选基础。WebKit 是
Apple 的 Safari 浏览器、Google Chrome 和上百万手机用户使用的S60 浏览器的引
擎。
Qt 应用程序框架和 WebKit 浏览器引擎的集成为开发团队提供了两者的精华所
在。因此，设计人员可使用熟悉的网络流程，而编码人员则可专心编写应用程序功
能。这样的集成通过在本地应用程序中渲染网络内容，提供了本地和网络混合的用
户体验。这样，本地应用程序就可通过编程与网络服务进行互动，例如自动认证过
程。开发人员还可通过网络服务扩展本地应用程序的功能，以及使用一些本地环境
中特有的功能来扩展网络服务。
• 有关更多信息，可通过 http://bit.ly/RJltf 在线获得
• 有关 Qt 和 WebKit 操作的视频，请查看 http://bit.ly/Bt6Co
• 请从以下网址下载 Qt 4.5 (LGPL 授权和商业评估版) 的完整源代码
http://bit.ly/17Ca8j
© 2009 诺基亚公司和/或其附属公司。-Qt 集成 WebKit：渲染、使用和扩展网络技术。– 3
白皮书
2. 渲染所有组成部分
为了详细说明使用此框架可实现哪些功能，我们会逐步开发一个集成本地功能和网
络技术的示例应用程序。我们先从基本功能开始：在本地应用程序内部渲染网页。
我们会逐步添加功能，其中包括用户自动登录服务、从服务器提取信息以及通过非
默认服务提供商提供的方式为用户提供信息。最后，我们会演示如何合并多种服务
和本地功能，例如从网络服务提取地址并使用其他服务在地图上标记这些位置。
最终的结果可能未必与您要开发的下一个项目相符，但却足以详细说明 QtWebKit
可支持的多种可能。
我们首先从渲染 Twitter 服务的主页开始。以下是 Twitter 主页的主要部分：
图 1：Qt 4.5 的 WebKit 引擎可处理除基础 HTML 外的更多内容。它可以处理 JavaScript、CSS
和所有其他当前成熟的网络服务所需的技术
要在用 Qt 4.5 开发的应用程序中渲染 (显示) 此网页，只需三行代码：
QWebView w;
w.load(QUrl(“http://twitter.com/”));
w.show( );
© 2009 诺基亚公司和/或其附属公司。-Qt 集成 WebKit：渲染、使用和扩展网络技术。– 4
白皮书
第一行实例化用于显示网页并与其互动的 QWebView 类。该类提供了常用的功
能，如加载特定的 URL、设置、历史记录和网页对象。它还提供包括后退、向前
和重新加载在内的基本浏览功能。QWebView 是 GUI 组件，因此可在 GUI 中单
独使用。
后两行代码指示 QWebView 加载 URL 并显示，这样就得到一个可与网站互动的
基本窗口。
完全再现网络互动需要不仅仅是显示静态文本和图形。例如，Twitter 网页包括
使用 WebKit 引擎处理的内嵌 CSS 语句：
WebKit 还可处理 JavaScript，例如处理用户在 “加入对话” 的对话框上单击操
作的此类简短脚本。
与 Qt 4.5 集成的 WebKit 引擎支持与当前网络内容兼容所需的所有功能。它
完全支持 HTML 4.01、XHTML 1.1、XML、CSS 2.1、JavaScript 1.5、大多数
SVG 1.2 特性、部分 CSS 3 特性、HTML editing、HTML canvas、AJAX、
XSLT 和 XPath 1.0。
并非所有浏览器引擎都具有符合嵌入 WebKit 标准的兼容性。可通过简单的方式对
浏览器引擎进行全面测试。只需将浏览器链接至 http://acid3.acidtests.org/，观看动
画，然后查看基于基准图像的最终结果。动画应流畅，并且测试数值应达到
100/100。在所见画面之后，有大量的 JavaScript 代码在对浏览器进行 100 项与你
所见的 100 个动画步骤相关的子测试。整套测试检验了 ECMAScript、DOM Level
2、可扩展矢量图形 (Scalable Vector Graphics, SVG)、XML 和 data：URIs。它测试
了 HTML 表格和表单在由脚本和 DOM2 HTML 控制时的表现。
还有更直接的方法查看 Qt 4.5 与 WebKit 集成在渲染您的网络内容时的效果。
下载免费的 Qt SDK，创建一个简单的网络应用程序，然后将集成的浏览器链接
至您要渲染的 URL
© 2009 诺基亚公司和/或其附属公司。-Qt 集成 WebKit：渲染、使用和扩展网络技术。– 5
白皮书
图 2：Qt SDK 包括了 Qt Creator，它是可用来在开发环境中直接预览实时网络集成情况的
IDE。
2.1 获得网络应用程序的性能优势
我们使用浏览器时，通常情况下，渲染的内容放置在某处的服务器上。如果使用
Qt 和 WebKit 浏览器引擎，我们就会有更多的灵活性。您可以增加本地缓存来提
高响应时间，甚至还可以在您的应用程序中动态创建网络视图。
要提高响应时间，您可以增加缓存系统。QDesktopServices::storageLocation 中全
新的 CacheLocation 枚举函数可处理在跨平台情况下，指定存储位置的复杂情
况。包含的 QNetworkDiskCache 非常简单，并且完全可满足大多数应用程序的需
求。但是，如果作业调用了用于小型设备的高度优化缓存，或者您需要利用其它
缓存系统，则可使用 QabstractNetworkCache 接口，这样您就可以自己实现并使
用定制的缓存系统。
您只需以下四行代码就可增加本地缓存来提高响应时间：
QNetworkDiskCache *diskCache = new QNetworkDiskCache(this);
QString location =
QDesktopServices::storageLocation(QDesktopServices::CacheLocation
);
diskCache->setCacheDirectory(location);
networkAccessManager->setCache(diskCache);
您甚至可以让程序自动生成用于报表、存档和帮助功能的内容。基本想法就
是对 Twitter 示例简单扩展：
© 2009 诺基亚公司和/或其附属公司。-Qt 集成 WebKit：渲染、使用和扩展网络技术。– 6
白皮书
QWebView w;
w.setHtml(“Hello World!
”);
w.show( );
3. 集成应用程序和网络服务
部分网站提供的不仅有内容，还有多种服务。网络服务的内容从货币汇率信息到企
业应用程序接入外部网络的连接，多种多样。借助 Qt WebKit 集成，您可在应用
程序中使用这些网络服务。让我们返回 Twitter 示例，实现自动化用户验证，然后
考虑一下专为开发人员设计的网络服务。
3.1 自动化验证
以下三行代码就可创建 Twitter 的认证请求：
QNetworkRequest request(“http://twitter.com”);
req.setRawHeader("Authorization", basicBase64);
QNetworkReply *reply = manager->get(request);
Qt 中的网络 API 支持异步网络操作，包括网络服务的认证请求。以上代码创建
了头字段 Authorization，包含了采用 base64 位编码的用户名和密码。然后，使
用实例化的Net Manager，通过调用 get( ) 提交请求，接着请求被发送至网站。
其他网站要求提交表单或上载数据。使用 QtWebKit 可采用与上述登录情景类似
的方式，您可设置不同的头信息值，然后通过 post( ) 或 put( ) 提交至网站。
以下方法采用了从服务器接收回复的句柄。该句柄会检查结果数据，验证是否已成
功登陆。此方法还适合与网络服务进行进一步互动，例如获取 XML 形式好友列
表。
void requestFinished(QNetworkReply *r)
{
if(authenticationSuccessful(r))
webView->load(homeURL);
}
3.2 利用网络服务
此方法可扩展至通过 URL 或 JavaScript API 方式获得的网络服务，甚至是普通
用户和标准浏览器无法访问的特定服务。以 Google Maps 为例，它提供了输入
街道地址可得到该地经度和纬度坐标的服务。这种处理方法称为地理编码，是在
© 2009 诺基亚公司和/或其附属公司。-Qt 集成 WebKit：渲染、使用和扩展网络技术。– 7
白皮书
地图上确定个人位置的初步尝试。(大多数核心地图服务要求输入坐标，而不是地
址。)
该代码使用了 Google 服务，该服务可接受地址、并返回 XML 格式的坐标以及要
求输入可使用 API 的密钥。我们稍后会使用它为我们在 Twitter 上的朋友在地图
上一一定位。
void geoCode( )
{
QString requestStr =
“http://maps.google.com/maps/geo ?q=“
+address+ ”&output=xml&key=GOOGLE_MAPS_KEY"
QNetworkRequest req(requestStr);
manager->get(req);
}
在访问通过 URL 或 JavaScript API 实现的网络服务时，都可以采用此方法。
部分示例包括：
• 可通过 http://www.salesforce.com/ 获得的商业服务，包括 Sales Force Automation
(销售人员自动化) 和 Customer Relationship Management (客户关系管理)。
• http://www.timeanddate.com/worldclock/ 的 Time Zone translation (时区转换)
• 包括 http://www.ups.com 在内的大多数运输公司采用的 Package Tracking (包
裹跟踪)
4. 扩展性能
HTML、CSS 和 JavaScript 这三款网络利器简便易用，但各有不足之处。借助
Qt WebKit 集成，您可以通过构建定制浏览器扩展您应用程序的功能，实现那些
普通的 HTML 开发人员所未想过的功能。
我们再次返回 Twitter 示例，这次设计可实现以下功能的跨平台网页：
1.
用户自动登录至已知的 Twitter 帐户。
2.
将用户的好友列表加载至互动控件。
设计标准 (1) 很简单，就是使用标准的 HTTP。我们在前面的章节已开发了该示
例。
设计标准 (2) 比较有挑战性，是使用网络技术。Qt WebKit 集成可解决此难题，
方法是可将本地功能暴露在网络环境中。
我们先看一下结果，然后再讨论过程。以下是一个网络视图，包含了嵌入用户好
友列表的 UI Widget，以及自动显示选定 Tweet 的内容和作者的显示字段：
© 2009 诺基亚公司和/或其附属公司。-Qt 集成 WebKit：渲染、使用和扩展网络技术。– 8
白皮书
图 3：C++ 开发人员构建了可浏览用户好友列表的 UI Widget，然后网络开发人员将该 Widget
使用