【Qt】Web与本地应用的混合开发

Amplify’d from pnuts.cc

【Qt】Web与本地应用的混合开发

–Excerpt–

本文介绍了在Qt中如何开发Web本地混合应用,以及如何让js与c++双向调用。附带几个简单实例。

接触Qt也就两个星期多吧,所以文章中难免有幼稚和错误的地方,请各位不吝赐教。


个人认为标记语言描述的界面是界面开发的一个发展趋势。WPF、Java FX,当然也少不了Html。

基于Html的界面在开发效率,可移植性上都十分有优势,所以也被很多程序采用,只是我们平时没注意到而已。比如:

image

Flower & World, Life & Paradise.

13Apr/108

【Qt】Web与本地应用的混合开发



–Excerpt–
本文介绍了在Qt中如何开发Web本地混合应用,以及如何让js与c++双向调用。附带几个简单实例。


接触Qt也就两个星期多吧,所以文章中难免有幼稚和错误的地方,请各位不吝赐教。





个人认为标记语言描述的界面是界面开发的一个发展趋势。WPF、Java FX,当然也少不了Html。


基于Html的界面在开发效率,可移植性上都十分有优势,所以也被很多程序采用,只是我们平时没注意到而已。比如:


image

Chrome的网页调试工具本身就是一个网页,不信你可以右键点击,选查看源代码。

其它的还有像ServU和VMware Server等,懒的截图了。

下面进入正题,用QT做Web与本地应用的混合开发

因为QT中集成了Webkit,拿来做这种还是一件相当happy的事(什么?为什么要用Webkit?你想自己写一个浏览器引擎不成?)

image

新建一个Qt Gui项目,记得选上QtWebKit和QNetwork(这个后面要用到)。

写如下一段代码,一个浏览器就做成了:

01 #include <QtGui/QApplication>
02 #include <QWebView>
03 #include <QMainWindow>
04
05 int main(int argc, char *argv[])
06 {
07 QApplication a(argc, argv);
08 QMainWindow window;
09 QWebView view(&window);
10 view.setGeometry(0, 0, 600, 400);
11 view.setUrl(QUrl("http://pnuts.cc"));
12 window.show();
13 return a.exec();
14 }

如图:

Flower & World, Life & Paradise.





13Apr/108


【Qt】Web与本地应用的混合开发



–Excerpt–
本文介绍了在Qt中如何开发Web本地混合应用,以及如何让js与c++双向调用。附带几个简单实例。


接触Qt也就两个星期多吧,所以文章中难免有幼稚和错误的地方,请各位不吝赐教。





个人认为标记语言描述的界面是界面开发的一个发展趋势。WPF、Java FX,当然也少不了Html。


基于Html的界面在开发效率,可移植性上都十分有优势,所以也被很多程序采用,只是我们平时没注意到而已。比如:


image


Chrome的网页调试工具本身就是一个网页,不信你可以右键点击,选查看源代码。


其它的还有像ServU和VMware Server等,懒的截图了。


下面进入正题,用QT做Web与本地应用的混合开发


因为QT中集成了Webkit,拿来做这种还是一件相当happy的事(什么?为什么要用Webkit?你想自己写一个浏览器引擎不成?)


image


新建一个Qt Gui项目,记得选上QtWebKit和QNetwork(这个后面要用到)。


写如下一段代码,一个浏览器就做成了:


01 #include <QtGui/QApplication>
02 #include <QWebView>
03 #include <QMainWindow>
04
05 int main(int argc, char *argv[])
06 {
07 QApplication a(argc, argv);
08 QMainWindow window;
09 QWebView view(&window);
10 view.setGeometry(0, 0, 600, 400);
11 view.setUrl(QUrl("http://pnuts.cc"));
12 window.show();
13 return a.exec();
14 }


如图:

image

QWebView有两种方法可以用来设定要显示的内容,一个是setUrl方法,一个是setContent方法。 这个很简单,试一下就会,不多说了。

不过对这两种方法会有两种不同的开发方式:

setContent的话,需要手动将网页代码生成出来放到QWebView中,网页中的元素(如:图片,样式,脚本)就只能采用“file:///”的方式了。

setUrl的话,更用技术含量一点,可能需要自己做一个简单的Http服务器,(不考虑效率优化的话也没那么难),然后监听本地端口,掉用QWebView的setUrl(QUrl(http://127.0.0.1:XXXX))就可以了。

我用了一种更省事的方法:直接把要显示的html放到apache上去了。这样连php也可以用了,哈哈哈哈~(咦,砖头?)

显示出来并不难,最主要的是如何同界面双向交互,又不是asp,总不能没点按钮就刷一次页面吧。

最容量想到的是传统Web开发的中常用的Ajax,不过就有两个缺点:

一个是要监听本地端口,第二个更致命,Ajax不是双向的,Server向Client发消息就不行了。

下面说一种更好的方法,实现js与C++的双向调用

js调用c++方法

首先要将一个C++的对象“送”到js中,js拿到这个对象以后就可以像其它对象一样,自由的调用它的方法了。

这一步有两种实现方式:

1. 在网页中插入控件

JS端: 在网页中插入下面一段代码:

1 <object type="application/x-qt-plugin" id="qt"></object>

之后就可以通过document.getElementById(‘qt’);获取这个对象,并调用方法了。

C++端:

首先要自定义一个类继承自QWebPage,在构造函数中加入如下一句话开起plugin的支持。

settings()->setAttribute(QWebSettings::PluginsEnabled, true);

然后重载QWebPage中的如下方法(protected的)

1 virtual QObject *createPlugin(const QString &classid, const QUrl &url, const QStringList &paramNames, const QStringList &paramValues);

方法的返回值就是要传递绐js的对象。

注意:返回值要是一个QWidget *类型的,所以可能还要自己自己写一个Widget,写好后,返回的QWidget中的所有public slots在js中都是可见的方法。

例子如下,有点长,不过很简单:

MyWidget.h

01 #ifndef MYWIDGET_H
02 #define MYWIDGET_H
03
04 #include<QWidget>
05 #include<QWebPage>
06 #include<QWebFrame>
07
08 class MyWidget :public QWidget {
09 Q_OBJECT
10 private:
11 QWebPage *page;
12 public:
13 MyWidget(QWebPage *page) : page(page) { }
14 public slots:
15 void func(QString arg) {
16 this->page->mainFrame()->evaluateJavaScript("document.body.innerHTML += '" + arg + "';");
17 }
18 };
19
20 #endif // MYWIDGET_H

MyPage.h

01 #ifndef MYPAGE_H
02 #define MYPAGE_H
03
04 #include<QWebPage>
05 #include<QWebFrame>
06 #include"MyWidget.h"
07
08 class MyPage : public QWebPage {
09 Q_OBJECT
10 public:
11 MyPage(QObject *parent = 0) : QWebPage(parent) {
12 settings()->setAttribute(QWebSettings::PluginsEnabled, true);
13 }
14 protected:
15 QObject *createPlugin(const QString &classid, const QUrl &url, const QStringList &paramNames, const QStringList &paramValues){
16 return new MyWidget(this);
17 }
18 };
19
20 #endif // MYPAGE_H

main.cpp

01 #include <QtGui/QApplication>
02 #include <QMainWindow>
03 #include <QWebView>
04 #include <QWebPage>
05 #include <QWebFrame>
06 #include "MyPage.h"
07
08 int main(int argc, char *argv[])
09 {
10 QApplication a(argc, argv);
11 QMainWindow window;
12 QWebView view(&window);
13 MyPage page;
14 view.setPage(&page);
15 view.setGeometry(0, 0, 600, 400);
16 // Object
17 QString content("<object type='application/x-qt-plugin' height='1' width='1' id='qt'></object>");
18 // JS Function f() : Invoke the 'func' function
19 content += "<script>document.getElementById('qt').func('http://pnuts.cc');</script>";
20 view.setContent(content.toAscii());
21 window.show();
22 return a.exec();
23 }

运行结果如下:

image

2. 用QWebFrame的addToJavaScriptWindowObject方法

相比上一个方法,个人推荐这种方法。因为上一个在Linux下遇到过很诡异的问题。

例子是最好的说明方式,于是再绐出一下例子:

注意:addToJavaScriptWindowObject的第一个参数是对象在js中的变量名,第二个参数的QObject不要求是QWidget。

MyObject.h

01 #ifndef MYOBJECT_H
02 #define MYOBJECT_H
03
04 #include<QObject>
05 #include<QWebPage>
06 #include<QWebFrame>
07
08 // !! ATTENTION !! : The object do NOT need to inherit from QWidget anymore.
09 class MyObject :public QObject {
10 Q_OBJECT
11 private:
12 QWebPage *page;
13 public:
14 MyObject(QWebPage *page) : page(page) { }
15 public slots:
16 void func(QString arg) {
17 this->page->mainFrame()->evaluateJavaScript("document.body.innerHTML += '" + arg + "';");
18 }
19 };
20
21 #endif // MYOBJECT_H

main.cpp

01 #include <QtGui/QApplication>
02 #include <QMainWindow>
03 #include <QWebView>
04 #include <QWebPage>
05 #include <QWebFrame>
06 #include "MyObject.h"
07
08 int main(int argc, char *argv[])
09 {
10 QApplication a(argc, argv);
11 QMainWindow window;
12 QWebView view(&window);
13 QWebPage page;
14 view.setPage(&page);
15 view.setGeometry(0, 0, 600, 400);
16 MyObject obj(&page);
17 page.mainFrame()->addToJavaScriptWindowObject("qt", &obj);
18 QString content("<script>function f() { qt.func('http://pnuts.cc'); }</script>");
19 content += "<a href="#" clicktoshowdialog="dialogJsLink">Click Me</a>";
20 view.setContent(content.toAscii());
21 window.show();
22
23 return a.exec();
24 }

至于为什么要用个链接点一下再显示而不是直接执行,自己去想,想不清再来问。

image

C++调用js代码

依旧是两种方法。

1. evaluateJavaScript

这个超简单了,上面的例子中就用到了。不多说了。

2. connect

这个更符合Qt的风格一点。首先用上一部分介绍的两种方法中的任意一种将一个C++对象“送”到js中去。然后调用这个对象的connect方法,将自己的signals和js方法进行bind。

再放个例子吧,不过例子中竟然用evaluateJavaScript来bind。。呵呵。。。

当QWebView加载好后,绑定MyObject的Miku Signal到js本地方法f,再触发Miku Signal。

MyObject.h

01 #ifndef MYOBJECT_H
02 #define MYOBJECT_H
03
04 #include<QObject>
05 #include<QWebPage>
06 #include<QWebFrame>
07
08 class MyObject :public QObject {
09 Q_OBJECT
10 private:
11 QWebPage *page;
12 public:
13 MyObject(QWebPage *page) : page(page) { }
14 signals:
15 void Miku();
16 public slots:
17 void viewLoad() {
18 this->page->mainFrame()->evaluateJavaScript("qt.Miku.connect(f);");
19 this->Miku();
20 }
21 };
22
23 #endif // MYOBJECT_H

main.cpp

01 #include <QtGui/QApplication>
02 #include <QMainWindow>
03 #include <QWebView>
04 #include <QWebPage>
05 #include <QWebFrame>
06 #include "MyObject.h"
07
08 int main(int argc, char *argv[])
09 {
10 QApplication a(argc, argv);
11 QMainWindow window;
12 QWebView view(&window);
13 QWebPage page;
14 view.setPage(&page);
15 view.setGeometry(0, 0, 600, 400);
16 MyObject obj(&page);
17 QObject::connect(&view, SIGNAL(loadFinished(bool)), &obj, SLOT(viewLoad()));
18 page.mainFrame()->addToJavaScriptWindowObject("qt", &obj);
19 QString content("<script>function f() { document.body.innerHTML += 'http://pnuts.cc'; }</script>");
20 view.setContent(content.toAscii());
21 window.show();
22 return a.exec();
23 }

接触Qt也就两个星期多吧,所以文章中难免有幼稚和错误的地方,请各位不吝赐教。

最后放几个自己Linux作业(本来也是因为linux作业才接触的Qt)的截图吧:

只追求意识流,不追求功能和用户体验。后面的阴影是滑动的,图片就看不出来了。

image

(登陆窗口)

image

(聊天窗口1)

image

(聊天窗口2)

image image

(隐藏版的HX主题和鲜花主题)

Read more at pnuts.cc

free hit counters

无觅相关文章插件,快速提升流量