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.comhttp://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，那么将可以实现广泛开发者梦寐已久的跨平台功能。