C++博客-A Pisces Programmer-文章分类-Qt/C++

QtWebkit类库与Native代码的混合开发

双鱼座的程序员 — Fri, 09 Nov 2012 02:45:00 GMT

在QT里面，我们可以很方便地调用QtWebKit类库，来实现一个浏览器的开发
基于Html的界面在开发效率，可移植性上都十分有优势，所以也被很多程序采用，只是我们平时没注意到而已

下面先说一下，如何创建一个简易的浏览器
通过VS2008+QTSDK，创建一个qt4 GUI工程:

记住，一定要选上QtWebKit和QNetwork(这个后面要用到)...

写如下一段代码，一个浏览器就做成了:
main.cpp

1#include <QtGui/QApplication>
2#include <QWebView>
3#include <QMainWindow>
4
5int main(int argc, char *argv[])
6{
7    QApplication a(argc, argv);
8    QMainWindow window;
9    QWebView view(&window);
10    view.setGeometry(0, 0, 600, 400);
11    view.setUrl(QUrl("http://www.cppblog.com/boymaster"));
12    window.show();
13    return a.exec();
14}
15

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

进入正题了，接下来介绍一下，如何实现js与C++的双向调用
这里，仅介绍开发中用到的一种调用方式，用QWebFrame的addToJavaScriptWindowObject方法
个人比较推荐这种方式，易为理解~~~

1. JS如何调用C++函数，详见代码~~~
myobject.h

1#ifndef MYOBJECT_H
2#define MYOBJECT_H
3
4#include<QObject>
5#include<QWebPage>
6#include<QWebFrame>
7
8// !! ATTENTION !! : The object do NOT need to inherit from QWidget anymore.
9class MyObject :public QObject {
10    Q_OBJECT
11private:
12    QWebPage *page;
13public:
14    MyObject(QWebPage *page) : page(page) { }
15public slots:
16    void func(QString arg) {
17        this->page->mainFrame()->evaluateJavaScript("document.body.innerHTML += '" + arg + "';");
18    }
19};
20
21#endif // MYOBJECT_H
22

main.cpp

1#include <QtGui/QApplication>
2#include <QMainWindow>
3#include <QWebView>
4#include <QWebPage>
5#include <QWebFrame>
6#include "MyObject.h"
7
8int main(int argc, char *argv[])
9{
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("");
19    content += "Click Me";
20    view.setContent(content.toAscii());
21    window.show();
22
23    return a.exec();
24}
25

这样，当点击页面上的"Click Me"，script脚本用会调用到C++中的func函数~~~

2.C++调用JS脚本
myobject.h

1class MyObject :public QObject {
2    Q_OBJECT
3
4private:
5    QWebPage *page;
6    QTimer *timer;
7
8public:
9    MyObject(QWebPage *page) : page(page) {
10        timer = new QTimer;
11        connect(timer, SIGNAL(timeout()), this, SLOT(slotTimerOut()));
12        timer->start(1000);
13    }
14
15signals:
16    void signalObjTimerOut();
17
18private slots:
19    void connectSlots() {
20        page->mainFrame()->evaluateJavaScript("DevObject.signalDevObjTimerOut.connect(f);");
21    }
22
23    void slotTimerOut() {
24        emit signalObjTimerOut();
25    }
26};
27
28#endif // MYOBJECT_H

main.cpp

1int main(int argc, char *argv[])
2{
3    QApplication a(argc, argv);
4    QMainWindow window;
5    QWebView view(&window);
6    QWebPage page;
7    view.setPage(&page);
8    view.setGeometry(0, 0, 600, 400);
9    MyObject obj(&page);
10    QObject::connect(&view, SIGNAL(loadFinished(bool)), &obj, SLOT(connectSlots()));
11    page.mainFrame()->addToJavaScriptWindowObject("qt", &obj);
12    QString content("");
13    view.setContent(content.toAscii());
14    window.show();
15    return a.exec();
16}
17

这样，页面加载后，C++的Timer每隔1秒就会调用到JS的f()函数

双鱼座的程序员 2012-11-09 10:45 发表评论

【转】利用QT进行web与本地混合应用开发

双鱼座的程序员 — Fri, 09 Nov 2012 01:30:00 GMT

Qt Features for Hybrid Web/Native Application Development。
原文参见 http://www.qtsoftware.com/forms/whitepapers/reg-whitepaper-hybrid.（限于本人英文水平，只译其大概）

Qt提供了本地 C++对象与JavaScript的无缝集成，是进行本地与web混合应用开发的理想平台。

(一）Qt Webkit 集成
　　利用Qt的Webkit 集成与QtNetwork模块，你完全可以进行本地桌面与web混合应用开发，你可以自由地混合JavaScript，样式表，Web内容和Qt组件。 Webkit是一个非常成熟的web浏览引擎。Qt中集成了这个大名鼎鼎的引擎，通过ＱtWebkit，你可以在Ｃ++ 中执行JavaScript，或者在网页中集成Ｃ++对象，并且通过JavaScript和这些对象进行交互。
　　一个现代的ＨＴＭＬ渲染引擎只是混合开发的一半，另一半就是本地应用和渲染对象的交互。ＱＴ的Webkit 集成提供了这种解决方案：
　　１.使用object标签嵌入Qt Widgets组件。这可以让使用Ｃ++代码的Qt组件包含在网页中，作为网页的部分外观。
　　２.在JavaScript中访问Ｃ++对象。你可以在JavaScript环境中插入Ｃ++对象，让网页脚本直接访问你的数据结构。
　　３.在Qt中执行JavaScript。你可以在Ｃ++调用网页环境中的JavaScript函数，触发网页事件。
　　４.共享客户端存储。在JavaScript和Ｃ++中你都具有访问数据库的能力，这样当下线时也能共享大量数据。

(二）与嵌入的Qt对象交互
　　使用 QWebView 组件，有两种方法可以在网页中嵌入C++对象。你可以在网页的JavaScript中添加C++对象，或者也可以创建一个插件，然后在网页中使用object标签嵌入。
　　
　　第二种方法更容易入手。当在网页中放入 Widget组件时，它的所有public slots就像普通函数一样被网页中的JavaScript函数访问。
要在网页中添加一个Widget，首先要告诉你的QWebPage对象,该Widget可用,这个通过子类化QWebPlugFactory完成,你需要重新实现两个方法：plugs和create。plugs方法通知网页该Widget可用，create方法根据请求创建widget。
　　在HTML网页中，widgets使用object标签创建。比如，下面这个标签试图创建一个 application/x-qt-colorlabel　组件。

　　要利用这种创建，必须要允许使用插件并且要告诉QWebpage插件的工厂类。在下面的代码中，ColorLabelFactory将会根据application/x-qt-colorlabel的请求创建相应实例。

QWebSettings::globalSettings()->setAttribute(QWebSettings::PluginsEnabled, true);
webView->page()->setPluginFactory(new　ColorLabelFactory(this));

　　ColorLabel有一个公开的slot: chagneColor(),这个对于网页中的JavaScript自动可用。在网页中插入一个指向该元素的链接，可以以一种简单的方式激活C++函数。

Change color!

　
　
　　要反方向推进事件，必须要使你的对象在JavaScript文档上下文中可用。要对QWebPage的每一个QWebFrame，调用addToJavaScriptWindowObject方法。这个方法允许你根据名字把一个对象添加到JavaScipt上下文中。

webView->page()->mainFrame()->addToJavaScriptWindowObject( "eventSource", new eventSource( this ) );

　　要连接刚添加对象eventSource的信号，要加上一段JavaScript代码，使用evaluateJavaScript方法完成。下面的代码将把eventSource对象的signalName信号连接到一个JavaScript函数destFunction。

webView->page()->mainFrame()->evaluateJavaScript( "eventSource.signalName.connect(destFunction);" );

　　如果你把一个对象添加到一个以标准浏览器查看的JavaScript页面中，有一个信号需要知道。每一次JavaScript 内容被清除，Frame都会释放 javaScriptWindowObjectCleared 信号。为了使你的Qt对象一直可用，你需要连接这个信号，并且在这里调用 addToJavaScriptWindowObject函数。

（二）使用客户端存储共享数据

随着HTML5，WEB标准日益靠近于桌面，同样，桌面也开始集成WEB。这方面一个最大的变化就是客户端存储。这在客户机上给了每一方（比如每一个页面）一个能利用SQL的数据库引擎，可以缓存本地数据，减少流量，使页面能脱机使用。还可以用来存储大量的结构化的，可搜索的数据。

客户端存储可以在JavaScript中使用，从JavaScript代码中搜索数据库，然后从搜索结果中生成页面。这要使用 openDatabase和transaction函数。

假设现在有个数据库, 代码如下所示：

db = openDatabase("TestDb ", "1.0", "Client side storage test", 200000);
db.transaction(function(tx) {
      tx.executeSql("SELECT id, text FROM Texts", [], function(tx, result) {
          for (var i = 0; i < result.rows.length; ++i) {
              var row = result.rows.item(i);
               processText( row['id'], row['text'] );
         }
    }, function(tx, error) {
         alert('Failed to retrieve texts from the database - ' + error.message);
         return;
    });
});

     使用QtWebkit，你可以使用QtSql模块访问同一个数据库。这在混合开发中是一个非常有用的特征。比如，你的应用中的web页面在和本地部分共享数据时，可以用同样的机制来保存数据。
     为了避免安全问题，客户端的数据库只能由具有正确权限的一方在JavaScript中访问。本地的C++代码也可以通过静态的QWebSecurityOrigin::allOrigins 方法，或者通过QWebFrame::securityOrigin 来访问所有安全对象。

       通过databases方法，可以访问一个QWebDatabaew方法列表，每一个web数据库对象有一个filename属性，可以用来在本地代码中访问数据库。

QWebDatabase webdb = mySecurityOrigin.databases()[index];
QSqlDatabase sqldb = QSqlDatabase::addDatabase("QSQLITE", "webconnection");
sqldb.setDatabaseName(webdb.fileName());
if (sqldb.open()) {
QStringList tables = sqldb.tables();

}

在WEB和本地应用连接事件的能力，再加上共享数据的机制，更易于模糊WEB和桌面之间的界限。

（三）WEB转换

很多通过WEB得到的数据并不适合直接显示。比如网络新闻, 地理数据，以及其它特定数据格式的应用。QT的网络模块可以以一种很简单的方式下载这样的数据，然后解析数据，把它转换成能被自己的代码处理的合适的格式。也可以通过QtXmlPatterns模块处理，当输出格式是XML或者想在XHMTL网页中显示时，这样更加方便。

      我们通过一个小例子来大致了解一下这个有意思的部分。我们下载一个新闻源，用XSLT把它从XML转换成XHTML，然后通过QWebPage把它显示出来。（图略）
      QNetworkAccessManager 类让你很容易处理客户端和WEB服务器之间的交互。它帮你处理诸如代理，保存设置，COOKIE以及SSL会话这些细节。总之，它不但让你在象上传下载这些常见情况更加容易，还可以帮你处理登录，认证这些复杂会话。
    为了下载我们例子中的新闻源，我们所有要做的就是创建一个QNetworkAccessManager 然后调用它的get方法。结果通过 finished(QNetworkReply*) 信号返回。

{

QNetworkAccessManager *manager = new QNetworkAccessManager( this );
connect( manager, SIGNAL(finished(QNetworkReply*)), this, SLOT(handleReply(QNetworkReply*)) );
connect( manager, SIGNAL(finished(QNetworkReply*)), m_progressBar, SLOT(hide()) );
QNetworkReply *reply = manager->get( QNetworkRequest( QUrl( feedUrl ) ) );
connect( reply, SIGNAL(downloadProgress(qint64, qint64)), this, SLOT(updateProgress(qint64,qint64)) );
}

双鱼座的程序员 2012-11-09 09:30 发表评论

Qt上截取中英文混合字符串的指定长度内容

双鱼座的程序员 — Mon, 29 Oct 2012 07:39:00 GMT

如两个字符串：
QString str("中华人民共和国123中华人民共和国");
QString s = getString(str, 20);
要截取后，输出：
s = "中华人民共和国123中...";
即要把中英文混合的字符串，在截取长度要一致，而且不能出现中文被从中间截断的情况
下面直接贴代码：

static QString getString(QString s, int l)
{
    QString temp = s;
    QRegExp rx("[\u4e00-\u9fa5]");
    if (temp.replace(rx, "zz").length() <= l) {
        return s;
    }

    for (int i=s.length(); i>=0; i--) {
        temp = s.mid(0,i);
        if (temp.replace(rx, "zz").length() <= l) {
            return s.mid(0,i) + "";
        }
    }
    return QString("");
}

双鱼座的程序员 2012-10-29 15:39 发表评论