qt & webkit
Post on 03-Sep-2014
3.873 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
Exposing to the World
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
Exposing to the World
<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.
http://src.develer.com/gitweb/pub/users/th30z/qtday/.git
git clone git://src.develer.com/users/th30z/qtday/.git
25
Questions?
http://src.develer.com/gitweb/pub/users/th30z/qtday/.git
git clone git://src.develer.com/users/th30z/qtday/.git
Hybrid development using Qt WebKit
THANKS !THANKS !
Contacts
Mail: info@develer.com
Phone: +39-055-3984627
Fax: +39 178 6003614
http://www.develer.com
Develer S.r.l.Via Mugellese 1/A
50013 Campi BisenzioFirenze - Italy
top related