如何利用 QT 进行 web 与本地混合应用开发

移动开发
Webkit是一个非常成熟的web浏览引擎。Qt中集成了这个大名鼎鼎的引擎,通过QtWebkit,你可以在C++ 中执行JavaScript,或者在网页中集成C++对象,并且通过JavaScript和这些对象进行交互。

如何利用 QT 进行 web 与本地混合应用开发是本文要讲述的内容,Qt提供了本地 C++对象与JavaScript的无缝集成,是进行本地与web混合应用开发的理想平台。

一、Qt Webkit 集成

利用QtWebkit 集成与QtNetwork模块,你完全可以进行本地桌面与web混合应用开发,你可以自由地混合JavaScript,样式表,Web内容和Qt组件。 Webkit是一个非常成熟的web浏览引擎。Qt中集成了这个大名鼎鼎的引擎,通过QtWebkit,你可以在C++ 中执行JavaScript,或者在网页中集成C++对象,并且通过JavaScript和这些对象进行交互。

一个现代的HTML渲染引擎只 是混合开发的一半,另一半就是本地应用和渲染对象的交互。QTWebkit 集成提供了这种解决方案:

1.使用object标签嵌入Qt Widgets组件。这可以让使用C++代码的Qt组件包含在网页中,作为网页的部分外观。

2.在JavaScript中访问C++对象。你 可以在JavaScript环境中插入C++对象,让网页脚本直接访问你的数据结构。

3.在Qt中执行JavaScript。你可以在C++ 调用网页环境中的JavaScript函数,触发网页事件。

4.共享客户端存储。在JavaScript和C++中你都具有访问数据库的能 力,这样当下线时也能共享大量数据。

二、与嵌入的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 组件。

  1. <object type="application/x-qt-colorlabel" width="50px" height="20px" id="label" />  

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

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

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

  1. <a href='javascript:document.getElementById("label").changeColor();'>Change color!</a>   

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

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

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

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

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

#p#

三、使用客户端存储共享数据

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

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

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

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

使用QtWebkit,你可以使用QtSql模块访问同一个数据库。这在混合开发中是一个非常有用的特征。比如,你的应用中的web页面在和本地部分共享 数据时,可以用同样的机制来保存数据。

为了避免安全问题,客户端的数据库只能由具有正确权限的一方在JavaScript中访问。本地的C++代码也可以通过静态的QWebSecurityOrigin::allOrigins 方法,或者通过QWebFrame::securityOrigin 来访问所有安全对象。
  
通过databases方法,可以访问一个 QWebDatabaew方法列表,每一个web数据库对象有一个filename属性,可以用来在本地代码中访问数据库。

  1. QWebDatabase webdb = mySecurityOrigin.databases()[index];  
  2. QSqlDatabase sqldb = QSqlDatabase::addDatabase("QSQLITE", "webconnection");  
  3. sqldb.setDatabaseName(webdb.fileName());  
  4. if (sqldb.open()) {  
  5.     QStringList tables = sqldb.tables();  
  6. }  

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

四、WEB转换

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

我们通过一个小例子来大致了解一下这个有意思的部分。我们下载一个新闻源,用XSLT把它从XML转换成XHTML,然后通过QWebPage把它显示出 来。(图略)

QNetworkAccessManager 类让你很容易处理客户端和WEB服务器之间的交互。它帮你处理诸如代理,保存设置,COOKIE以及SSL会话这些细节。总之,它不但让你在象上传下载这 些常见情况更加容易,还可以帮你处理登录,认证这些复杂会话。
     
为了下载我们例子中的新闻源,我们所有要做的就是创建一个QNetworkAccessManager 然后调用它的get方法。结果通过 finished(QNetworkReply*) 信号返回。

  1. {  
  2. QNetworkAccessManager *manager = new QNetworkAccessManager( this );  
  3. connect( manager, SIGNAL(finished(QNetworkReply*)), this, SLOT(handleReply(QNetworkReply*)) );  
  4. connect( manager, SIGNAL(finished(QNetworkReply*)), m_progressBar, SLOT(hide()) );  
  5. QNetworkReply *reply = manager->get( QNetworkRequest( QUrl( feedUrl ) ) );  
  6. connect( reply, SIGNAL(downloadProgress(qint64, qint64)), this, SLOT(updateProgress(qint64,qint64)) );  
  7. }  

原文参见 http://www.qtsoftware.com/forms/whitepapers/reg-whitepaper-hybrid. (限于英文水平,只译其大概)

小结::关于如何利用 QT 进行 web 与本地混合应用开发的内容介绍完了,希望本文对你有所帮助!

责任编辑:zhaolei 来源: 网络转载
相关推荐

2010-09-15 12:15:23

NessusWEB应用安全扫描

2015-12-31 10:14:54

React.js开发Web应用

2013-01-15 10:20:56

Ubuntu Phon

2011-06-13 14:29:40

Qt Designer

2011-02-25 15:49:09

NecessitasQtAndroid

2014-04-09 14:02:21

混合云应用混合云

2013-09-13 12:58:07

原生应用Web应用混合应用

2010-11-17 12:59:52

2013-09-13 13:16:05

2013-08-29 09:53:04

HTML5MongoDB位置感知

2015-11-27 09:18:11

AngularJSWeb应用

2011-02-21 09:10:42

WebHTML 5JavaScript

2014-12-25 16:07:32

DHH混合移动应用Hybrid App

2011-03-25 11:06:46

2009-06-15 15:43:54

Stripes实现Ja

2018-05-04 15:27:22

Spring Boo Web开发

2012-05-14 17:10:50

iOS

2012-05-13 13:15:54

IOS

2009-06-23 16:52:16

JSFHibernateWeb应用

2009-07-27 09:23:24

点赞
收藏

51CTO技术栈公众号