Qt & Webkit

4,542 views

Published on

Come interfacciare gli ambienti web con Qt

Published in: Technology, Art & Photos
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,542
On SlideShare
0
From Embeds
0
Number of Embeds
44
Actions
Shares
0
Downloads
97
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Qt & Webkit

  1. 1. 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
  2. 2. WebKitWebKit is an open sourceweb browser engine. state of the art rendering engine css/svg support super fast js engine plugin support
  3. 3. WebKit Everywhere
  4. 4. Components of WebKit CSS DOM SVG HTML Canvas WebCore Rendering JavaScriptCore Worker StorageWebKit Library Sockets
  5. 5. Different Ports WebCore GraphicsGraphicsContext Chromium Gtk Mac Qt Skia Cairo Core Graphics QtPainter Graphics Stack
  6. 6. QtWebKit A bridge between Qt and WebKitWith 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
  7. 7. 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)
  8. 8. 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
  9. 9. 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
  10. 10. 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 />
  11. 11. 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();}
  12. 12. Content via StringQWebView webView;webView.setContent(“<body>Hello World</body>”));webView.show();
  13. 13. Capture to ImageQWebPage page;…QImage image(size, QImage::Format_ARGB32_Premultiplied);image.fill(Qt::transparent);QPainter p(&image);page.mainFrame()->render(&p);p.end();image.save(fileName);
  14. 14. Qt & JavaScript eval javascript code inside the frame context  QWebFrame::evaluateJavaScript inject a QObject into the frame context
  15. 15. Exposing to the World Object Instance From Qt/C++ to Javascript Variable name Visible from JavaScript QWebFrame::addToJavaScriptWindowObject(QString, QObject *) Exported Public SlotsQWebView w;w.page()->mainFrame() Public Properties Signals
  16. 16. Exposing to the Worldclass 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);
  17. 17. Exposing to the Worldpage()->mainFrame()->addToJavaScriptWindowObject(“dialog”, new Dialog); <input type=”button” value=”Click Me!” onClick=”dialog.showMessage(‘You clicked me!’)”> Public Slot Instance of Dialog Object
  18. 18. Signal & Slot Javascript Signal Slotfoobar.modified.connect(doSomething)QObject JavaScriptInstance Function
  19. 19. Triggering Actionsclass 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>
  20. 20. Coming back to Native JavaScript Code QVariant QWebFrame::evaluateJavaScript(QString) mostly key-value pair(like JavaScript Objects) QMap
  21. 21. Coming back to Nativefunction 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();
  22. 22. 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>
  23. 23. Maps Example QtWebKitclass 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);
  24. 24. 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. 25. Questions? 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 25
  26. 26. THANKS ! Develer S.r.l. Via Mugellese 1/A 50013 Campi Bisenzio Firenze - ItalyContactsMail: info@develer.comPhone: +39-055-3984627Fax: +39 178 6003614http://www.develer.com

×