Hybrid Qt WebKit Development

Hybrid development
using Qt WebKit
http://src.develer.com/gitweb/pub/users/th30z/qtday/.git

git clone git://src.develer.com/users/th30z/qtday/.git

WebKit

WebKit is an open source
web browser engine.
 state of the art rendering
engine
 css/svg support
 super fast js engine
 plugin support

Components of WebKit

CSS
DOM SVG
HTML Canvas
WebCore
Rendering
JavaScriptCore
Worker Storage
WebKit Library Sockets

Different Ports
WebCore Graphics

Graphics
Context
Chromium Gtk
Mac Qt

Skia Cairo
Core Graphics QtPainter

Graphics
Stack

QtWebKit
A bridge between Qt and WebKit
With QtWebKit you can:
● (easily!) embed a fully
functional, standard
compliant, web browser
inside your application
● inspect/extract the
content
● manipulate the web page
● integrate your application
with web services

QtWebKit (main) modules
 QWebView
 a QWidget (your browser window/tab)
 QWebPage
 a browsing session: settings + history + plugin +
network + user interaction + document
 QWebFrame
 the document, one QWebFrame per html page or
svg document.
 can have additional child frame (one per
<frame>)
 magic happens here (qt ↔ page interaction)

QWebView
 QWebView is your “browser”
 QWebView is a QWidget
 QWebView exposes high-level signals/slots
 load() / reload() / stop()
 back() / forward()
 linkClicked() / loadProgress() /
statusBarMessage()
 QWebView signals/slots are an excerpt of QWebPage +
QWebFrame

QWebPage
 QWebPage is not a QWidget
 but a QApplication is still required
 QWebPage is the browsing ecosystem
 history + settings + plugins + network +
document
 Interact with the document via the PageAction

QWebFrame
 QWebFrame is not a QWidget
 QWebFrame is a frame inside a web page
 each QWebPage object has at least one frame
 plus one QWebFrame for every <frame />

Using QWebView
#include <QtGui/QApplication>
#include <QWebView>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    QWebView w;
    w.load(QUrl("http://www.google.com/"));
    w.show();
    return a.exec();
}

Content via String

QWebView webView;
webView.setContent(“<body>Hello World</body>”));
webView.show();

Capture to Image
QWebPage page;
…

QImage image(size, QImage::Format_ARGB32_Premultiplied);
image.fill(Qt::transparent);

QPainter p(&image);
page.mainFrame()->render(&p);
p.end();

image.save(fileName);

Qt & JavaScript

 eval javascript code inside the frame context
 QWebFrame::evaluateJavaScript
 inject a QObject into the frame context

Exposing to the World
Object Instance
From Qt/C++ to Javascript
Variable name
Visible from JavaScript

QWebFrame::addToJavaScriptWindowObject(QString, QObject *)

Exported

Public Slots
QWebView w;
w.page()->mainFrame() Public Properties
Signals

class Dialog : public QDialog {
Q_OBJECT Public Slots
public:
Public Properties
Dialog (QObject *parent = 0); Signals
public slots:
void showMessage (const QString& message);
};

QWebView webView;
QWebFrame *frame = webView.page()->mainFrame();
frame->addToJavaScriptWindowObject(“dialog”, new Dialog);


page()->mainFrame()->addToJavaScriptWindowObject(“dialog”, new Dialog);

<input type=”button” value=”Click Me!”
onClick=”dialog.showMessage(‘You clicked me!’)”>

Public Slot
Instance of
Dialog Object

Signal & Slot
Javascript

Signal Slot
foobar.modified.connect(doSomething)

QObject JavaScript
Instance Function

Triggering Actions
class StopWatch : public QObject {
Q_OBJECT StopWatch::StopWatch (QObject *parent)
: QObject(parent), m_tick(0)
public: {
StopWatch (QObject *parent = 0); QTimer *timer = new QTimer(this);
timer->setInterval(1000);
signals: connect(timer, SIGNAL(timeout()),
void tick (int t); this, SLOT(update()));
timer->start();
private slots: }
void update();
void StopWatch::update() {
private: emit tick(m_tick++);
int m_tick; }
};

page->mainFrame()->addToJavaScriptWindowObject(“stopWatch”, new StopWatch);
<script>
stopWatch.tick.connect(function(t) {
document.getElementById(‘tick’).innerText = t;
});
</script>

Coming back to Native

JavaScript Code

QVariant QWebFrame::evaluateJavaScript(QString)

mostly key-value pair
(like JavaScript Objects)
QMap

Coming back to Native
function getJsFuncMapValue() { QVariant res;
return {
'test-list': [10, 20, 30], res = frame->evaluateJavaScript("getJsFuncMapValue()");
'test-string': "Hello", QMap<QString, QVariant> resMap = res.toMap();
'test-int': 20 QList<QVariant> resList = resMap[“test-list”].toList();
} QString resString = resMap[“test-string”].toString();
} int resInt = resMap[“test-int”].toInt();

function getJsFuncListValue() {
return [40, 50, 60]; res = frame->evaluateJavaScript("getJsFuncListValue()");
} QList<QVariant> resList = res.toList();

function getJsFuncIntValue(a) {
return 80 + a; res = frame->evaluateJavaScript(“getJsFuncIntValue(2)”);
} int resInt = res.toInt();

Maps Example
Javascript

<script type="text/javascript">
var map = null;
window.onload = function() {
map = new ovi.mapsapi.map.Display(
document.getElementById("map"), {
'zoomLevel': 12,
'center': [43.779571,11.23726]
}
);
}
</script>

Maps Example
QtWebKit
class MapView : public QWebView {
...
MapView(QWidget *parent = 0) : QWebView(parent) {
load(QUrl("maps.html"));
}

void moveTo (float lon, float lat) {
QString js = QString("map.setCenter([%1, %2], true)").arg(lon).arg(lat);
page()->mainFrame()->evaluateJavaScript(js);
}

void setZoomLevel (int level) {
QString js = QString("map.setZoomLevel(%1, true)").arg(level);
page()->mainFrame()->evaluateJavaScript(js);
}
…
};
MapView mapView;
mapView.moveTo(57.772232, 94.833984);
mapView.setType(MapView::Satellite);
mapView.setZoomLevel(6);

Hybrid Applications Qt + WebKit
 You can inject a QObject
 Call Public Slots
 Set/Get Public Properties
 Connect a signal to a javascript function
 Or you can extract from the frame context a function
and call it from the C++ side.



Questions?
Hybrid development
using Qt WebKit



25

THANKS !
Develer S.r.l.
Via Mugellese 1/A
50013 Campi Bisenzio
Firenze - Italy

Contacts
Mail: info@develer.com
Phone: +39-055-3984627
Fax: +39 178 6003614
http://www.develer.com

Hybrid Qt WebKit Development

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Viewers also liked

Viewers also liked (7)

Similar to Hybrid Qt WebKit Development

Similar to Hybrid Qt WebKit Development (20)

More from QT-day

More from QT-day (12)

Recently uploaded

Recently uploaded (20)

Hybrid Qt WebKit Development