Qt WebKit可以做什麼

Qt WebKit可以做什麼2010-07-13 23:14

歡迎看看我的另一個小窩,可能會有意外的驚喜哦^_^ www.devres.info From：http://software.intel.com/zh-cn/blogs/2010/06/08/qt-webkit-qt-webkit/ Author：Dawei Cheng程大偉（Intel）這個命題不太好回答，因為Qt的庫一直在更新，KDE中webkit的項目也在有新版本release出來。就據我瞭解的和大家分享一下，互連有無。要看Qtwebkit能幹嘛，那就先瞭解一下曆史了（Joewan註：我做什麼事情，也喜歡首先瞭解它的曆史），WebKit 是一個開源的瀏覽器引擎，與之相應的引擎有Gecko（Mozilla Firefox等使用的排版引擎）和Trident（也稱為MSHTML，IE使用的排版引擎）。同時WebKit也是蘋果Mac OS X系統引擎架構版本的名稱，主要用於Safari，Dashboard，Mail 和其他一些Mac OS X程式。WebKit所包含的WebCore排版引擎和JSCore引擎來自於KDE的 KHTML和 KJS，當年蘋果比較了Gecko和KHTML後，仍然選擇了後者，就因為它擁有清晰的源碼結構、極快的渲染速度。以上這段摘自百科，目前Webkit項目由http://webkit.org/組織開發。詳情瀏覽網站吧！看一下webkit架構：QtWebkit就是webkit porting到Qt的平台上。看一下Qt Webkit的架構先：這兩張圖可以看出Qt webkit和webkit 的區別：1、Text Handling、Painting、Networking採用的Qt的核心2、更加容易使用Qt的API那麼Qt的整合webkit能夠帶來哪些優勢呢：1、快速建立包含即時網路內容和服務的應用程式2、在一個應用程式中整合網路和本地內容3、可以在不同平台上運行開發的web應用。那麼下面看看web開發的應用程式是什麼樣的架構，以及如何去開發。在下面三層使用的是C++的code去開發，在application層，Qt就可以支援最常用的網頁設計三劍客（HTML，CSS，Javascript）去開發，這樣將可以使數量眾多的網頁開發人員開發Qt應用成為可能。 OK，開篇先寫到此，下面幾節當中將詳細介紹如何使用網頁設計三劍客去開發Qt應用程式 From：http://software.intel.com/zh-cn/blogs/2010/06/08/qt-webkitamp/ Author：Dawei Cheng程大偉（Intel）在第二篇我們實現一個非常簡單的例子。使用Qt WebKit顯示網頁。註：這個demo網上有很多，包括nokia Qt 的doc 和example官方文檔裡也有相關例子。但是有不全面的地方，在編譯運行時甚至會顯示不出網頁，這是因為幾個小地方沒有注意到，可能有的博主自己並沒有實際去編譯。鑒於這個demo很簡單，就全部原始碼貼上。1.建立main.cpp#include <QtGui>#include <QtWebKit>int main(int argc, char *argv[]){QApplication a(argc, argv);//設定網路代理程式：使用系統代理程式 QNetworkProxyFactory::setUseSystemConfiguration(true);//顯示網頁QWebView view;view.load(QUrl("http://qt.nokia.com"));view.show();return a.exec();}2.建立 web.pro 檔案顯示網頁只需要區區這幾行原始碼即可，但是在.pro檔案中，需要做如下更改//此處不僅需要webkit模組，還需要network模組。因為Webkit依賴於network QT += webkit/networkHEADERS =SOURCES = main.cppRESOURCES =3.編譯運行$qmake -project | $qmake | $make | $./web運行結果如下：要提高回應時間，我們可以增加緩衝系統。QDesktopServices::storageLocation中的CacheLocation枚舉函數可處理在跨平台情況下，指定儲存位置的情況。使用QabstractNetworkCache介面，可以自己實現並使用定製的緩衝系統。以下四行代碼就可增加本機快取來提高回應時間：QNetworkDiskCache *diskCache = new QNetworkDiskCache(this);QString location =QDesktopServices::storageLocation(QDesktopServices::CacheLocation);diskCache->setCacheDirectory(location);networkAccessManager->setCache(diskCache);部分網站提供的不僅有內容，還有多種服務。網路服務的內容從貨幣匯率資訊到公司專屬應用程式程式接入外部網路的串連，多種多樣。藉助Qt WebKit整合，可在應用程式中使用這些網路服務。例如Twitter認證請求的代碼：QNetworkRequest request(“http://twitter.com”);req.setRawHeader("Authorization", basicBase64);QNetworkReply *reply = manager->get(request);Qt webkit中如何顯示網頁和使用網路服務介紹到此。 第三篇將介紹在Qt webkit中如何去使用web擴充功能，即HTML/CSS/JS工具去設計application。 From：http://software.intel.com/zh-cn/blogs/2010/06/09/qt-webkitweb/ Author：Dawei Cheng程大偉（Intel）這一篇我們來看看如何在Qt WebKit 中使用web開發工具去開發包含web內容的本地應用程式。註：本系列文章重在分享一下開發過程，至於webkit如何去解釋HTML的DOM tree以及如何去rendering HTML 和JavaScript可以參考http://webkit.org/。 在分享開發過程之前，首先還是看一下這個web應用的架構：1. 開發環境：（1）Based on QtWebKit browser engine（2）Developed with HTML, CSS and JavaScript（3）Used by Qt Creator for Windowsother IDEs, such as Visual Studio or Eclipse, as well.2. 建立項目：（1）Start the Qt Creator IDE.（2）Select File > New File or Project... > Projects > Qt4 Gui Application.（3）Give the project a name and set its location.（4）Check the QtWebKit module and click Next, and then 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_OBJECTpublic: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/, 和 script/檔案夾裡。資料夾檢視如下：如果想瞭解更多關於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"/><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函數。QWebView* WidgetWindow::createWebView(){QWebView* view = new QWebView(this);view->load(QUrl("qrc:/html/index.html"));return view;}6. 至此，工作全部完成。build the application，將會出現期待已久的JavaScript的hello按鈕：這一篇主要講解了如何使用HTML，CSS和JavaScript在Qt webkit引擎上開發web應用。本篇的原始碼可以在此下載：http://software.intel.com/file/28104 下一篇我們將瞭解如何將Qt本地的Object 和JavaScript進行互動。這對web開發非常有用 上一篇我們瞭解了如何在webkit中建立含有web內容的本地應用。這一篇我們將實現JavaScript和本地的QObject的互動。在閱讀本篇之前需要對Qt的訊號和槽機制和JavaScript有簡單的瞭解。Qt本機物件和JavaScript互動分為三個步驟：（1）將本地QObject暴露給webkit和JavaScript（2）將本地QObject的訊號和JavaScript的槽串連起來（3）通過JavaScript調用本地QObject的槽第1步和第2步結合起來實現本地QObject的訊號和JavaScript的槽串連 第1步和第3步結合起來實現 通過JavaScript調用本地QObject的槽下面我們就分別看一下第1、2、3步分別如何?的。1、將本地QObject暴露給Webkit。主要分為以下幾個步驟。（1）建立一個QObject，命名為simpleQObject，包含訊號和槽。其標頭檔如下：#include <QtCore/QObject>#include <QtCore/QMap>#include <QtCore/QString>#include <QtCore/QVariant>class SampleQObject : public QObject{Q_OBJECTpublic:SampleQObject(QObject *parent = 0);signals:void signal(QMap<QString, QVariant> object);public slots://QObject 的槽，用來返回字串QMap<QString, QVariant> slotThatReturns(const QMap<QString, QVariant>& object);void slotThatEmitsSignal(); //QObject的槽，用來發射訊號，並且記錄發射次數private:int m_signalEmited;QMap<QString, QVariant> m_returnObject;QMap<QString, QVariant> m_emitSignal;};（2）建立實現函數。mainwindow.h 和 mainwindow.cpp。 mainwindow.h代碼如下#include <QMainWindow>#include "sampleqobject.h“class MainWindow : public QMainWindow {Q_OBJECTpublic:MainWindow(QWidget *parent = 0);~MainWindow();private slots:void addJavaScriptObject();protected:void changeEvent(QEvent *e);private:Ui::MainWindow *ui;SampleQObject* m_sampleQObject;};（3）mainwindow.cpp關鍵代碼如下：//當網頁被載入或者重新整理時，將暴露給webkit的QObject和webkit JavaScript串連connect(ui->webView->page()->mainFrame(),SIGNAL(javaScriptWindowObjectCleared()), this, SLOT(addJavaScriptObject()));void MainWindow::addJavaScriptObject(){//addJavaScriptObject函數的實現：將simpleQObject和webkit JavaScript串連this->ui->webView->page()->mainFrame()->addToJavaScriptWindowObject("sampleQObject“, this->m_sampleQObject);}2. 將本地QObject的訊號和JavaScript的槽串連起來：（1）如何發射QObject訊號。signals:void signal(QMap<QString, QVariant> object);public slots:void slotThatEmitsSignal();void SampleQObject::slotThatEmitsSignal(){qDebug() << "SampleQObject::slotThatEmitsSignal";this->m_signalEmited++;this->m_emitSignal.clear();this->m_emitSignal["signalsEmited"] = QVariant(this->m_signalEmited);this->m_emitSignal["sender"] = QVariant("SampleQObject::slotThatEmitsSignal");qDebug() << "SampleQObject::slotThatEmitsSignal" << this->m_emitSignal;emit signal(this->m_emitSignal);}（2）JavaScript槽的實現$(document).ready(function() {try {sampleQObject.signal.connect(slot);sampleQObject.slotThatEmitsSignal();}catch(e) {alert(e);}});function slot(object) {var objectString = object.sender +" has emited signal " +object.signalsEmited +" times.";alert(objectString);}（3）Run the app。當點擊重新整理時，彈出新的對話方塊：3. 通過JavaScript調用本地QObject的槽（1）JavaScript訊號發射try {var object = {intValue: 1};var returnedObject = sampleQObject.slotThatReturns(object);alert(returnedObject.stringValue);}（2）QObject 槽函數QMap<QString, QVariant> SampleQObject::slotThatReturns(const QMap<QString, QVariant>& object){qDebug() << "SampleQObject::slotThatReturns";this->m_returnObject.clear();this->m_returnObject.unite(object); QString addedBonus = QString::number(object["intValue"].toInt(),10).append(" added bonus.");this->m_returnObject["stringValue"] = QVariant(addedBonus);qDebug() << "SampleQObject::slotThatReturns" << this->m_returnObject;return this->m_returnObject; // 返回m_returnObject包含有字串 1 added bonus}（3）Run the app本例子代碼：http://software.intel.com/file/28111 http://software.intel.com/file/28112 註：本例子中部分代碼來自wiki.forum.nokia.com下一篇我們將探索一下如何將S60下的web runtime widget porting至Qt的webkit上來，如今的WRT widget只能依賴於S60的os，如果