Introduction to QtWebKit
•
3 likes•2,929 views
QtWebKit is a web browser engine that can be used to embed web content in applications. It is based on the WebKit open source project, which powers browsers like Safari and Chrome. QtWebKit provides APIs to display web pages, run JavaScript, and integrate web content with native applications. It supports features like SVG, CSS3 animations, and device access. QtWebKit is widely used due to its cross-platform support, extensive test suite, and active open source community.
![Headless WebKit
if (phantom.state.length === 0) {
phantom.state = 'pizza';
phantom.open('http://www.google.com/m/local?site=local&q=pizza+in+new+york');
} else {
var list = document.querySelectorAll('div.bf');
for (var i in list) {
console.log(list[i].innerText);
}
phantom.exit();
}
http://phantomjs.org
46](https://image.slidesharecdn.com/intro-qtwebkit-110406174519-phpapp02/85/Introduction-to-QtWebKit-46-320.jpg)
Introduction to QtWebKit
- 1. Introduction to QtWebKit ARIYA HIDAYAT ENGINEERING DIRECTOR, SENCHA 1
- 2. whoami 2
- 3. Overview 3
- 5. History ~2000 commits/month 90000 80000 70000 60000 Revisions 50000 40000 30000 20000 10000 0 0 1 2 3 4 5 6 7 8 9 10 Years 5
- 6. Extensive Tests tests ≈ 20,000 tests 904 MB the rest 229 MB 6
- 7. Workflow quality control 1 Every commit needs to be reviewed 2 Broken commit must be reverted zero-regression policy 7
- 8. Level of Involvement Contributor after 10-20 patches after 80 patches Committer ≈ 130 Reviewer checks in reviewed patches ≈ 80 accept or reject patches 8
- 9. WebKit Reviewers Apple 39 Google 19 Misc 12 1 RIM Nokia 6 6 9
- 10. Components of WebKit DOM CSS WebCore SVG HTML rendering JavaScriptCore WebKit Library 10
- 11. Platform Abstractions Network Unicode Clipboard Graphics Theme Events Thread Geolocation Timer 11
- 12. WebCore Di erent “Ports” graphics GraphicsContext Mac Chromium Qt Gtk Skia Cairo CoreGraphics QPainter graphics stack 12
- 13. Get + Compile 13
- 14. Using git git clone git://git.webkit.org/WebKit.git cd WebKit ≈ 1.2 GB .git 14
- 15. Build Tools/Scripts/build-webkit --qt --debug for “Debug” mode 15
- 17. Use 17
- 18. Using WebView QWebView webView; webView.show(); webView.setUrl(QUrl("http://campkde.org")); 18
- 19. 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); http://labs.qt.nokia.com/2009/01/15/capturing-web-pages/ 19
- 22. Hybrid: Native + Web 22
- 23. Exposing to the Web world QWebFrame::addToJavaScriptWindowObject(QString, QObject*) Public functions Object properties Child objects 23
- 24. Signal and Slot signal foobar.modified.connect(refresh); QObject instance JavaScript function foobar.modified.connect(obj, refresh); any object 24
- 25. Coming back to the Native QVariant QWebFrame::evaluateJavaScript(QString) mostly key-value pair (like JavaScript objects) 25
- 26. Other Bridging Solutions Custom network protocol QNetworkAccessManager http://labs.qt.nokia.com/2010/11/16/some-webkit-hybrid-stu / 26
- 27. Deployment O ine Packaging Cache Manifest QtWebKit boilerplate Local Storage 27
- 28. Technologies 28
- 29. Key Technologies 29
- 30. JavaScript 30
- 31. Libraries and Frameworks 31
- 32. Vector Graphics http://raphaeljs.com/polar-clock.html 32
- 34. Diagrams & Visualization JavaScript InfoVis Toolkit http://thejit.org/ 34
- 36. Accelerated Composition GPU FTW 36
- 37. Sencha Animator 37
- 38. Device Access http://ariya.github.com/js/marblebox/ 38
- 39. WebGL for 3-D http://webglsamples.googlecode.com/hg/aquarium/aquarium.html 39
- 40. PhiloGL: WebGL Framework http://senchalabs.github.com/philogl/ 40
- 41. Tools 41
- 42. Web Inspector 42
- 43. Network Log 28: GET http://www.google.com/m/gp 292: Response 200 application/xhtml+xml; charset=UTF-8 0 bytes http://www.google.com/m/gp 311: GET data:image/gif;base64,R0lGODlhiA... 312: GET data:image/gif;base64,R0lGODlhJA... 312: GET data:image/gif;base64,R0lGODlhGA... 312: Response 0 image/gif 3611 bytes data:image/gif;base64,R0lGODlhiA... 312: Finish fail data:image/gif;base64,R0lGODlhiA... 312: Response 0 image/gif 284 bytes data:image/gif;base64,R0lGODlhJA... 312: Finish fail data:image/gif;base64,R0lGODlhJA... 312: Response 0 image/gif 178 bytes data:image/gif;base64,R0lGODlhGA... 312: Finish fail data:image/gif;base64,R0lGODlhGA... 317: Response 200 application/xhtml+xml; charset=UTF-8 0 bytes http://www.google.com/m/gp 324: Finish fail http://www.google.com/m/gp 328: GET http://www.google.com/m/gn/user?... 329: Finish success http://www.google.com/m/gn/user?... 43
- 44. Typical Scenario This is awesome! n t to ru forge ests the t REGRESSION 44
- 45. Test Framework specrunner SpecRunner.html 5 specs, 0 failures in 0.013s specrunner SpecRunner.html FAIL: 5 specs, 1 failure in 0.014s Selenium, Watir, Squish Web, JSUnit, Jasmine, QUnit, ... 45
- 46. Headless WebKit if (phantom.state.length === 0) { phantom.state = 'pizza'; phantom.open('http://www.google.com/m/local?site=local&q=pizza+in+new+york'); } else { var list = document.querySelectorAll('div.bf'); for (var i in list) { console.log(list[i].innerText); } phantom.exit(); } http://phantomjs.org 46
- 47. UI Designer 47
- 48. IDE: AKShell 48
- 49. IDE: Cloud9 49
- 50. Recorder and Replayer 50
- 51. Conclusion 51
- 52. Today Web technologies are moving really fast Various frameworks and libraries boost the productivity Hybrid approach helps the migration Tools need to catch-up 52
- 53. Future More bindings to the native world Platinum-grade productivity tools Ubiquitous mesh and cloud solutions 53
- 54. THANK YOU! ariya @ kde.org ariya.blogspot.com ariyahidayat 54