者: Dawei Cheng 程大偉 (Intel) (10 篇文章) 日期: 六月 9, 2010 在 12:21 下午
上一篇我們瞭解了如何在webkit中建立含有web內容的本地應用。這一篇我們將實現JavaScript和本地的QObject的互動。在閱讀本篇之前需要對Qt的訊號和槽機制和JavaScript有簡單的瞭解。
Qt本機物件和JavaScript互動分為三個步驟
-
- 將本地QObject暴露給webkit和JavaScript
- 將本地QObject的訊號和JavaScript的槽串連起來
- 通過JavaScript調用本地QObject的槽
也就是第1步和第2步結合起來實現 本地QObject的訊號和JavaScript的槽串連
第1步和第3步結合起來實現 通過JavaScript調用本地QObject的槽
下面我們就分別看一下第1、2、3步分別如何?的。
1、將本地QObject暴露給Webkit。主要分為以下幾個步驟。
-
- 建立一個QObject, 命名為simpleQObject,包含訊號和槽。其標頭檔如下:
-
-
- #include <QtCore/QObject>
- #include <QtCore/QMap>
- #include <QtCore/QString>
- #include <QtCore/QVariant>
- class SampleQObject : public QObject
- {
- Q_OBJECT
- public:
- SampleQObject(QObject *parent = 0);
- signals: /* 聲明QObject signals */
- void signal(QMap<QString, QVariant> object);
- public slots: /*聲明 QObject slots */
- QMap<QString, QVariant> slotThatReturns(const QMap<QString,
- QVariant>& object); //QObject 的槽,用來返回字串
- void slotThatEmitsSignal(); //QObject的槽,用來發射訊號,並且記錄發射次數
- private:
- int m_signalEmited;
- QMap<QString, QVariant> m_returnObject;
- QMap<QString, QVariant> m_emitSignal;
- };
- 建立實現函數。mainwindow.h 和 mainwindow.cpp。 mainwindow.h代碼如下
-
-
- #include <QMainWindow>
- #include "sampleqobject.h“
- class MainWindow : public QMainWindow {
- Q_OBJECT
- public:
- MainWindow(QWidget *parent = 0);
- ~MainWindow();
- private slots:
- /*聲明 將 QObject 暴露給 Qt WebKit 的函數*/
- void addJavaScriptObject();
- protected:
- void changeEvent(QEvent *e);
- private:
- Ui::MainWindow *ui;
- SampleQObject* m_sampleQObject;
- };
- 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的槽串連起來
-
- 如何發射QObject訊號。
-
-
- signals:
- void signal(QMap<QString, QVariant> object);
- public slots:
- void slotThatEmitsSignal();
- /* this slot is designed to emit signals and count emit times*/
- void SampleQObject::slotThatEmitsSignal()
- {
- qDebug() << "SampleQObject::slotThatEmitsSignal";
- this->m_signalEmited++; /* count emit times */
- 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);
- }
- JavaScript槽的實現
-
-
- $(document).ready(function() {
- try {
- /* 將sampleQObjects的signal 和 JavaScript slot 串連起來*/
- sampleQObject.signal.connect(slot);
- /* 當simpleQObject發射訊號時調用JavaScript的槽 */
- sampleQObject.slotThatEmitsSignal();
- }
- catch(e) {
- alert(e);
- }
- });
- /* slot函數將會輸出 SimpleQObject has emited signal ? times */
- function slot(object) {
- var objectString = object.sender +
- " has emited signal " +
- object.signalsEmited +
- " times.";
- alert(objectString);
- }
- Run the app。
當點擊重新整理時,彈出新的對話方塊:
3. 通過JavaScript調用本地QObject的槽
-
- JavaScript訊號發射
-
-
- try {
- var object = {intValue: 1};
- /* 聲明一個JavaScript object並用simpleQObject的槽的傳回值賦值它*/
- var returnedObject = sampleQObject.slotThatReturns(object);
- /* 輸出 "1 added bonus"*/
- alert(returnedObject.stringValue);
- }
- 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
- }
- Run the app
本例子代碼: http://software.intel.com/file/28111
http://software.intel.com/file/28112
註:本例子中部分代碼來自wiki.forum.nokia.com
http://wiki.forum.nokia.com/index.php/Exposing_QObjects_to_Qt_Webkit
下一篇我們將探索一下如何將S60下的web runtime widget porting至Qt的webkit上來,如今的WRT widget只能依賴於S60的os,如果porting只QT的webkit,那麼將可以實現廣泛開發人員夢寐已久的跨平台功能。
分類:
其他,
移動技術,
英特爾 軟體網路 2.0
標籤:Qt,
qtwebkit,
webkit,
web開發