qt & webkit

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

WebKit Everywhere

Components of WebKit

WebCoreDOM

CSSSVG

HTML

Rendering

WebKit Library

JavaScriptCore

Sockets

StorageWorker

Canvas

Different Ports

GraphicsContext

MacChromium

QtGtk

Core GraphicsSkia

QtPainterCairo

GraphicsStack

WebCore Graphics

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

QWebFrame::addToJavaScriptWindowObject(QString, QObject *)

Public SlotsPublic Properties

Signals

Variable nameVisible from JavaScript

QWebView w;w.page()->mainFrame()

Object InstanceFrom Qt/C++ to Javascript

Exported


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

class Dialog : public QDialog { Q_OBJECT

public: Dialog (QObject *parent = 0);

public slots: void showMessage (const QString& message);};

Public SlotsPublic Properties

Signals


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

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

Instance ofDialog Object

Public Slot

Signal & Slot

foobar.modified.connect(doSomething)

QObject Instance

Signal

JavaScriptFunction

Slot

Javascript

Triggering Actions

<script>stopWatch.tick.connect(function(t) { document.getElementById(‘tick’).innerText = t;});</script>

class StopWatch : public QObject { Q_OBJECT

public: StopWatch (QObject *parent = 0);

signals: void tick (int t);

private slots: void update();

private: int m_tick;};

StopWatch::StopWatch (QObject *parent) : QObject(parent), m_tick(0){ QTimer *timer = new QTimer(this); timer->setInterval(1000); connect(timer, SIGNAL(timeout()), this, SLOT(update())); timer->start();}

void StopWatch::update() { emit tick(m_tick++);}

page->mainFrame()->addToJavaScriptWindowObject(“stopWatch”, new StopWatch);

Coming back to Native

QVariant QWebFrame::evaluateJavaScript(QString)

mostly key-value pair (like JavaScript Objects)

QMap

JavaScript Code

Coming back to Nativefunction getJsFuncMapValue() { return { 'test-list': [10, 20, 30], 'test-string': "Hello", 'test-int': 20 }}

function getJsFuncListValue() { return [40, 50, 60];}

function getJsFuncIntValue(a) { return 80 + a;}

QVariant res;

res = frame->evaluateJavaScript("getJsFuncMapValue()");QMap<QString, QVariant> resMap = res.toMap();QList<QVariant> resList = resMap[“test-list”].toList();QString resString = resMap[“test-string”].toString();int resInt = resMap[“test-int”].toInt();

res = frame->evaluateJavaScript("getJsFuncListValue()");QList<QVariant> resList = res.toList();

res = frame->evaluateJavaScript(“getJsFuncIntValue(2)”);int resInt = res.toInt();

Maps Example

<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>

Javascript

Maps ExampleQtWebKit

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.



25

Questions?



Hybrid development using Qt WebKit

THANKS !THANKS !

Contacts

Mail: [email protected]

Phone: +39-055-3984627

Fax: +39 178 6003614

http://www.develer.com

Develer S.r.l.Via Mugellese 1/A

50013 Campi BisenzioFirenze - Italy

mailto:[email protected]

http://www.develer.com/

qt & webkit

Technology