这一篇我们来看看如何在Qt WebKit 中使用web开发的工具去开发包含web内容的本地。注：本系列文章重在分享一下开发过程，至于webkit如何去解释HTML的DOM tree 以及如何去rendering HTML 和JavaScript 可以参考 http://webkit.org/。 在分享开发过程之前，首先还是看一下这个web应用的架构。1. 开发环境：
Based on QtWebKit browser engine Developed with HTML, CSS and JavaScript Used by Qt Creator for Windows other IDEs, such as Visual Studio or Eclipse, as well.2. 新建项目：
Start the Qt Creator IDE. Select File > New File or Project... > Projects > Qt4 Gui Application. Give the project a name and set its location. Check the QtWebKit module and click Next. click Finish.3. 修改代码： 此时在creator左边edit栏目里会看到project的源代码。打开头文件widgetwindow.h，做如下修改：
#ifndef WIDGETWINDOW_H #define WIDGETWINDOW_H #include <QtCore/QPointer> #include <QtGui/QMainWindow> class QWebView; class WidgetWindow : public QMainWindow { Q_OBJECT public: WidgetWindow(QWidget *parent = 0); ~WidgetWindow(); private: void setupUI(); //声明用来显示web应用的函数 QWebView* createWebView(); private: QPointer<QWebView> webView; }; #endif // WIDGETWINDOW_H4. 显示web内容
在Qt project中创建web应用所需要的HTML, CSS和JavaScript文件，且假设其分别在html/, style/, 和 scripe/文件夹里。文件夹视图如下：如果想了解更多关于web开发，请点此进入：http://zh.html.net/tutorials/html/ html/ (HTML files) style/ (CSS files) script/ (JavaScript files) Create the resource file。 Qt中是通过qrc文件来实现对web内容文件的链接的。一下是qrc文件 helloqtwebkit.qrc的内容。 <?xml version="1.0" encoding="utf-8"?> <RCC version="1.0"> <qresource> <!-- HTML files --> <file>html/index.html</file> <!-- CSS files --> <file>style/general.css</file> <!-- JavaScript files --> <file>script/basic.js</file> </RCC> 打开HTML文件，将HTML文件代码粘贴如下： 这是一个很简单的helloDemo。 <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> /* add ‘qrc:/’ in the front of css/js files address */ <link rel="StyleSheet" href="qrc:/style/general.css" type="text/css" /> <script type="text/javascript" src="qrc:/script/basic.js" charset="utf-8"></script> <title>Hello Qt WebKit</title> </head> <body onLoad="javascript:init();"> <input type=submit value="Hello Qt WebKit! " <div id="output"> </div> </body>5. 函数实现。 打开函数文件 widgetwindow.cpp， 实现之前声明的createwebview函数。
/* display the web application by rendering html file */ QWebView* WidgetWindow::createWebView() { QWebView* view = new QWebView(this); /* load the html file location to Qurl */ view->load(QUrl("qrc:/html/index.html")); return view; }6. 至此，工作全部完成。build the application. 将会出现期待已久的JavaScript的hello按钮。
这一篇主要讲解了如何使用HTML CSS 和JavaScript在Qt webkit引擎上开发web应用。本篇的源代码可以在此下载： 1QtWebHello.zip http://software.intel.com/file/28104下一篇我们将了解如何将Qt本地的Object 和JavaScript进行交互。这对web开发非常有用。
