Qt webKit可以做什么(四)——实现本地QObject和JavaScript交互

上一篇我们了解了如何在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，那么将可以实现广泛开发者梦寐已久的跨平台功能。