{"id":646,"date":"2015-05-21T15:05:11","date_gmt":"2015-05-21T09:35:11","guid":{"rendered":"http:\/\/www.e-consystems.com\/blog\/linux-android\/?p=646"},"modified":"2023-08-15T12:33:57","modified_gmt":"2023-08-15T07:03:57","slug":"qtwebkit-bridge","status":"publish","type":"post","link":"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/qtwebkit-bridge\/","title":{"rendered":"QtWebKit Bridge"},"content":{"rendered":"

Qt Hybrid Application Development:<\/strong><\/p>\n

An application that combines elements from diverse sources such as native and the web is considered to be a Hybrid Application.\u00a0 Needless to say\u00a0 developing UI in HTML\/HTML5 with CSS\/CSS3 is quite easy. The big challenge is to access the native layer from\u00a0 UI Layer.\u00a0 There are many tools in the open Source zone that helps to resolve this issue. Some of the notorious examples are phoneGap, QTWebKit Bridge.<\/p>\n

Let me explain how QTWebKit Bridge works.<\/p>\n

Quick\u00a0 Background refresh:<\/em><\/p>\n

QWebPage, QWebFrame, and QWebView are the three objects that we need to be aware of.<\/p>\n

QWebPage, and QWebFrame are of type QObject, and\u00a0 QWebView is of type Qwidget capable of displaying QWebPage.<\/p>\n

Signal and Slots:<\/em><\/p>\n

QT’s one of prominent feature is \u201cSignals and Slots\u201d.\u00a0\u00a0 Slots are generally regular methods and it has no special meaning, except its signatures are kept in the table by MOC.\u00a0 To add more, it is synchronous and blocking call that the following code of ’emit’ statement occurs only after all slots are returned. To get more spice on the behaviour of signals and slots across thread, you can visit the below URL.<\/p>\n

http:\/\/doc.qt.io\/qt-4.8\/threads-qobject.html<\/a><\/p>\n

Well, to have a bridge between native and web , we need a native object and that object should be of QObject.<\/p>\n

For Example, lets create the native object:<\/p>\n

#ifndef NATIVEHELPER_H<\/em><\/p>\n

#define NATIVEHELPER_H<\/em><\/p>\n

#include <QObject><\/em><\/p>\n

class NativeHelper : public QObject<\/em><\/p>\n

{<\/em><\/p>\n

Q_OBJECT<\/em><\/p>\n

public:<\/em><\/p>\n

\u00a0\u00a0\u00a0 explicit NativeHelper(QObject *parent = 0);<\/em><\/p>\n

\u00a0\u00a0\u00a0 Q_INVOKABLE void getFocus ();<\/em><\/p>\n

signals:<\/em><\/p>\n

\u00a0\u00a0\u00a0 updateUIFocus(int focusValue);<\/em><\/p>\n

public slots:<\/em><\/p>\n

\u00a0\u00a0\u00a0 void getFocusSlot();<\/em><\/p>\n

};<\/p>\n

1)\u00a0 Associate the QObject into UI\/JavaScript:<\/p>\n

In order to build the bridge, we need QObject that has to be bundled between JS and Native.<\/p>\n

AddToJavaScriptWindowObject is a helper function from QWebFrame that is used to bundle.<\/p>\n

For Example:<\/p>\n

\u00a0QWebFrame *myframe\u00a0 = myWebPage->mainFrame();<\/em><\/p>\n

\u00a0myframe->addToJavaScriptWindowObject(\u201cObjectNameInJS\u201d, new\u00a0 NativeHelper());<\/em><\/p>\n

2)\u00a0 Invoke Native Call from JS.<\/p>\n

The slots defined in QObject can be invoked from JS.<\/p>\n

For Example:\u00a0 In JS,<\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ObjectNameInJS.getFocusSlot()\u00a0 can be used.<\/em><\/p>\n

3) Invoking JS Callback from Native.<\/p>\n

Signals are used for this purpose.\u00a0 As we\u00a0 connect callbacks for the signals in native QT, we do in JS also.\u00a0 Look at the below code snippet.<\/p>\n

NativeHelper.UpdateUIFocus.connect (Update_UI_Focus);<\/em><\/p>\n

Where Update_UI_Focus can be defined as:<\/p>\n

function Update_UI_Focus ( int focusValue )\u00a0 -> Make sure the argument matches.<\/em><\/p>\n

{<\/em><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 alert (\u201cQt Hybrid Application Test\u201d);<\/em><\/p>\n

}<\/em><\/p>\n

QTWebKit Bridge makes job easier writing hybrid applications. In general, Embedded web applications lead to saving significant development cost and time to Market. But the flip side is, using luxury powerful features of Host platform.\u00a0 QTWebKit Bridge breaks this flip side, and comes handy while mixing both. That said, QTWebKit Bridge is definitely a boon to Embedded Web Application Development.<\/p>\n","protected":false},"excerpt":{"rendered":"

Qt Hybrid Application Development: An application that combines elements from diverse sources such as native…<\/p>\n","protected":false},"author":17,"featured_media":753,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[127],"tags":[149,207,148],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/wp-json\/wp\/v2\/posts\/646"}],"collection":[{"href":"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/wp-json\/wp\/v2\/comments?post=646"}],"version-history":[{"count":10,"href":"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/wp-json\/wp\/v2\/posts\/646\/revisions"}],"predecessor-version":[{"id":1060,"href":"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/wp-json\/wp\/v2\/posts\/646\/revisions\/1060"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/wp-json\/wp\/v2\/media\/753"}],"wp:attachment":[{"href":"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/wp-json\/wp\/v2\/media?parent=646"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/wp-json\/wp\/v2\/categories?post=646"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/wp-json\/wp\/v2\/tags?post=646"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}