developments in the qt webkit integration
DESCRIPTION
The Qt WebKit Integration provides a powerful framework to seamlessly integrate web technologies into future Maemo applications, where web content can interact with Qt components. This presentation introduces the QtWebKit APIs, the underlying engine and new features coming in future releases.Presentation by Kenneth Christiansen held during the Maemo Summit 2009 in AmsterdamTRANSCRIPT
![Page 1: Developments in the Qt WebKit Integration](https://reader034.vdocument.in/reader034/viewer/2022042607/555145ceb4c905c6268b4d47/html5/thumbnails/1.jpg)
Developments in the Qt WebKit IntegrationIntroducing even closer integration with Qt
![Page 2: Developments in the Qt WebKit Integration](https://reader034.vdocument.in/reader034/viewer/2022042607/555145ceb4c905c6268b4d47/html5/thumbnails/2.jpg)
A few words about me
Kenneth Rohde Christiansen
Working at the Nokia Technology Institute, INdT in Brazil
Involved with WebKit for about a year
Part of the Qt WebKit team
2
![Page 3: Developments in the Qt WebKit Integration](https://reader034.vdocument.in/reader034/viewer/2022042607/555145ceb4c905c6268b4d47/html5/thumbnails/3.jpg)
What is Qt WebKit?
To answer that we need to look at WebKit itself
3
![Page 4: Developments in the Qt WebKit Integration](https://reader034.vdocument.in/reader034/viewer/2022042607/555145ceb4c905c6268b4d47/html5/thumbnails/4.jpg)
Agenda
A heads-up introduction to WebKit
A look at the new goodies in Qt 4.6
4
![Page 5: Developments in the Qt WebKit Integration](https://reader034.vdocument.in/reader034/viewer/2022042607/555145ceb4c905c6268b4d47/html5/thumbnails/5.jpg)
5
A heads-up intro to WebKit
![Page 6: Developments in the Qt WebKit Integration](https://reader034.vdocument.in/reader034/viewer/2022042607/555145ceb4c905c6268b4d47/html5/thumbnails/6.jpg)
What is WebKit
WebKit is a contents rendering/editing engine
It is not a browser;
though you could make one using it
6
![Page 7: Developments in the Qt WebKit Integration](https://reader034.vdocument.in/reader034/viewer/2022042607/555145ceb4c905c6268b4d47/html5/thumbnails/7.jpg)
Industry Acceptance
Apple
7
Adobe
Nokia
Sony-Ericsson
Apple
Palm
RIM
![Page 8: Developments in the Qt WebKit Integration](https://reader034.vdocument.in/reader034/viewer/2022042607/555145ceb4c905c6268b4d47/html5/thumbnails/8.jpg)
Acceptance by Contents Providers
Powers most mobile pages:
Android, iPhone, Nokia S60
The engine behind:
Google Chrome, Apple Safari
8
![Page 9: Developments in the Qt WebKit Integration](https://reader034.vdocument.in/reader034/viewer/2022042607/555145ceb4c905c6268b4d47/html5/thumbnails/9.jpg)
Highly Standard Compliant
It is highly standard compliant
And it is being developed in the open
9
![Page 10: Developments in the Qt WebKit Integration](https://reader034.vdocument.in/reader034/viewer/2022042607/555145ceb4c905c6268b4d47/html5/thumbnails/10.jpg)
There exists many variations
Qt based, GTK+ based, Google Chrome, Android...
Most developed in WebKit trunk
10
![Page 11: Developments in the Qt WebKit Integration](https://reader034.vdocument.in/reader034/viewer/2022042607/555145ceb4c905c6268b4d47/html5/thumbnails/11.jpg)
Down in the details
The “engines” that powers WebKit are:
– WebCore– JavaScriptCore (optional)
11
![Page 12: Developments in the Qt WebKit Integration](https://reader034.vdocument.in/reader034/viewer/2022042607/555145ceb4c905c6268b4d47/html5/thumbnails/12.jpg)
Building blocks
WebCore serves at a number of building blocks
12
Network access
Text handling
Painting/rendering
LayoutingParsing
etc...
![Page 13: Developments in the Qt WebKit Integration](https://reader034.vdocument.in/reader034/viewer/2022042607/555145ceb4c905c6268b4d47/html5/thumbnails/13.jpg)
Bringing the blocks together
Qt WebKit provides an implementation of WebCore using Qt
constructs:
• QNetworkAccessManager for all network access• QPainter based painting• Phonon-based playback of HTML5 Audio/Video
13
![Page 14: Developments in the Qt WebKit Integration](https://reader034.vdocument.in/reader034/viewer/2022042607/555145ceb4c905c6268b4d47/html5/thumbnails/14.jpg)
Wait, there is more...
Qt WebKit also provides a very powerful and intuitive Qt-ish
API
All build on top of JavaScriptCore and WebCore
14
![Page 15: Developments in the Qt WebKit Integration](https://reader034.vdocument.in/reader034/viewer/2022042607/555145ceb4c905c6268b4d47/html5/thumbnails/15.jpg)
Wait, there is more...
The API is not merely a Qt-ish version of Apple's API, but an API
designed from the ground up, using Qt principles.
That said, it provides many things that other WebKit variations don't
15
![Page 16: Developments in the Qt WebKit Integration](https://reader034.vdocument.in/reader034/viewer/2022042607/555145ceb4c905c6268b4d47/html5/thumbnails/16.jpg)
Reasons for choosing WebKit
Why choose WebKit for Qt's web contents needs?
16
We didn't want a browser, but components for integrating web
technologies, where we and our customers see fit
![Page 17: Developments in the Qt WebKit Integration](https://reader034.vdocument.in/reader034/viewer/2022042607/555145ceb4c905c6268b4d47/html5/thumbnails/17.jpg)
Introducing WebKit in Qt 4.6
17
![Page 18: Developments in the Qt WebKit Integration](https://reader034.vdocument.in/reader034/viewer/2022042607/555145ceb4c905c6268b4d47/html5/thumbnails/18.jpg)
Lots a new stuff...
Qt 4.6 comes packed with a new version of WebKit
And brings many of the new HTML5 features found in Apple Safari 4 and Google Chome
18
![Page 19: Developments in the Qt WebKit Integration](https://reader034.vdocument.in/reader034/viewer/2022042607/555145ceb4c905c6268b4d47/html5/thumbnails/19.jpg)
Web Workers
Thread like support for Web Applications
“API for running scripts in the background, independently of
any user interface scripts”
Long-lived, high start-up cost, high per-instance memory cost.
19
![Page 20: Developments in the Qt WebKit Integration](https://reader034.vdocument.in/reader034/viewer/2022042607/555145ceb4c905c6268b4d47/html5/thumbnails/20.jpg)
Speculative Loading
Loads documents, scripts and style-info
ahead of time
Snappier Internet Experience
20
![Page 21: Developments in the Qt WebKit Integration](https://reader034.vdocument.in/reader034/viewer/2022042607/555145ceb4c905c6268b4d47/html5/thumbnails/21.jpg)
Faster JavaScript
New ARM v5 and v7 JITs
Fast JavaScript on more platforms!
ARM v5 JIT sponsored by Nokia and ARM
21
![Page 22: Developments in the Qt WebKit Integration](https://reader034.vdocument.in/reader034/viewer/2022042607/555145ceb4c905c6268b4d47/html5/thumbnails/22.jpg)
We have not been sleeping either!
22
![Page 23: Developments in the Qt WebKit Integration](https://reader034.vdocument.in/reader034/viewer/2022042607/555145ceb4c905c6268b4d47/html5/thumbnails/23.jpg)
Apart from new features provided by WebKit itself, Qt developers and open source contributors have been hard at work, adding new features to our Qt API
23
![Page 24: Developments in the Qt WebKit Integration](https://reader034.vdocument.in/reader034/viewer/2022042607/555145ceb4c905c6268b4d47/html5/thumbnails/24.jpg)
Out top feature request
We are proud to present to you
Out most requested feature request!
24
![Page 25: Developments in the Qt WebKit Integration](https://reader034.vdocument.in/reader034/viewer/2022042607/555145ceb4c905c6268b4d47/html5/thumbnails/25.jpg)
Introducing the QWebElement
25
![Page 26: Developments in the Qt WebKit Integration](https://reader034.vdocument.in/reader034/viewer/2022042607/555145ceb4c905c6268b4d47/html5/thumbnails/26.jpg)
Introducing the QWebElement
• Easy and advanced DOM manipulation
• jQuery like API
• Just one single class, lots of possibilities
• Represents a tree-like structure of DOM elements
26
![Page 27: Developments in the Qt WebKit Integration](https://reader034.vdocument.in/reader034/viewer/2022042607/555145ceb4c905c6268b4d47/html5/thumbnails/27.jpg)
CSS Selectors
QWebElement document = frame>documentElement();
/* Assume the document has the following structure:
<p class=intro>
<span>Intro</span>
<span>Snippets</span>
</p>
<p>
<span>Content</span>
<span>Here</span>
</p>
*/
QList<QWebElement> allSpans = document.findAll("span");
QList<QWebElement> introSpans = document.findAll("p.intro span");
27
![Page 28: Developments in the Qt WebKit Integration](https://reader034.vdocument.in/reader034/viewer/2022042607/555145ceb4c905c6268b4d47/html5/thumbnails/28.jpg)
Easy traversal
28
frame>setHtml("<html><body><p>First Paragraph</p><p>Second Paragraph</p></body></html>");
QWebElement doc = frame>documentElement();
QWebElement body = doc.firstChild();
QWebElement firstParagraph = body.firstChild();
QWebElement secondParagraph = firstParagraph.nextSibling();
![Page 29: Developments in the Qt WebKit Integration](https://reader034.vdocument.in/reader034/viewer/2022042607/555145ceb4c905c6268b4d47/html5/thumbnails/29.jpg)
Plugin Management
Introducing the QWebPluginDatabase
Provides access to plugin information
Specifies plugin precidence
Enable/disable plugins as you see fit
29
![Page 30: Developments in the Qt WebKit Integration](https://reader034.vdocument.in/reader034/viewer/2022042607/555145ceb4c905c6268b4d47/html5/thumbnails/30.jpg)
QtScript
This one is big! API re-implemented ontop of JavaScriptCore
Super fast QtScript execution with JIT Support
More standard compliant
Will power the future Qt declarative UI format
Works on all platforms that supports QtScript in Qt 4.5
30
![Page 31: Developments in the Qt WebKit Integration](https://reader034.vdocument.in/reader034/viewer/2022042607/555145ceb4c905c6268b4d47/html5/thumbnails/31.jpg)
Symbian Series 60 support
Bringing Qt and WebKit to your second favorite phone ;-)
Experimental support, almost there
Committed to S60 support for Qt 4.6 final
31
![Page 32: Developments in the Qt WebKit Integration](https://reader034.vdocument.in/reader034/viewer/2022042607/555145ceb4c905c6268b4d47/html5/thumbnails/32.jpg)
Flexibility, future direction
Qt WebKit is very flexible
Allows for substituting network access, for instance
accessing data in a zip file as it was a network connection
All building on top of the Qt framework
32
![Page 33: Developments in the Qt WebKit Integration](https://reader034.vdocument.in/reader034/viewer/2022042607/555145ceb4c905c6268b4d47/html5/thumbnails/33.jpg)
Rich interfaces for embedded
Qt's answer is the Graphics View
• Allows for rich interfaces
• Custom widgets
• Animation and rotation
• And soon, a declarative UI format, built ontop of the Graphics View.
33
![Page 34: Developments in the Qt WebKit Integration](https://reader034.vdocument.in/reader034/viewer/2022042607/555145ceb4c905c6268b4d47/html5/thumbnails/34.jpg)
It all looks so bright
Everything is great! ....
...until you want to use WebKit
34
![Page 35: Developments in the Qt WebKit Integration](https://reader034.vdocument.in/reader034/viewer/2022042607/555145ceb4c905c6268b4d47/html5/thumbnails/35.jpg)
Graphics View integration
Qt WebKit doesn't provide a way to easily use it with the
Graphics View.
Actually, it is very tied to the QWidget way of life
35
![Page 36: Developments in the Qt WebKit Integration](https://reader034.vdocument.in/reader034/viewer/2022042607/555145ceb4c905c6268b4d47/html5/thumbnails/36.jpg)
That is now part of the past!
Introducing the QGraphicsWebView
36
![Page 37: Developments in the Qt WebKit Integration](https://reader034.vdocument.in/reader034/viewer/2022042607/555145ceb4c905c6268b4d47/html5/thumbnails/37.jpg)
Introducing the QGraphicsWebView
• A feature-full brother of the QWebView
• A QGraphicsWidget with fast scrolling
• Similar API as QWebView, but modified to fit better
with the Graphics system and with scripting
37
![Page 38: Developments in the Qt WebKit Integration](https://reader034.vdocument.in/reader034/viewer/2022042607/555145ceb4c905c6268b4d47/html5/thumbnails/38.jpg)
Introducing the QGraphicsWebView
It will be highly customizable
• Draw ontop of whatever you want
• Clip the corners, make them rounded
• Use a different handler for “Browse files”, combo boxes
etc, via the use of delegates
38
![Page 39: Developments in the Qt WebKit Integration](https://reader034.vdocument.in/reader034/viewer/2022042607/555145ceb4c905c6268b4d47/html5/thumbnails/39.jpg)
Introducing the QGraphicsWebView
We are committed to improving this and respond to most
common customer demands
“Only your imagination will be the limit” ;-)
39
![Page 40: Developments in the Qt WebKit Integration](https://reader034.vdocument.in/reader034/viewer/2022042607/555145ceb4c905c6268b4d47/html5/thumbnails/40.jpg)
Web Developers have not been forgotten
40
![Page 41: Developments in the Qt WebKit Integration](https://reader034.vdocument.in/reader034/viewer/2022042607/555145ceb4c905c6268b4d47/html5/thumbnails/41.jpg)
More compliant!
We now have the layout testing infrastructure up and
running, resulting in less buggy and more comformant
WebKit port.
This has already resulted in many fixes to font spacing, shadows, etc.
41
![Page 42: Developments in the Qt WebKit Integration](https://reader034.vdocument.in/reader034/viewer/2022042607/555145ceb4c905c6268b4d47/html5/thumbnails/42.jpg)
Web Inspector
A great tool for developers to introspect and modify the DOM
of a web page
Now we provide a class for controlling the inspector from C++. It can be
used as a QWidget and is easy embeddable
42
![Page 43: Developments in the Qt WebKit Integration](https://reader034.vdocument.in/reader034/viewer/2022042607/555145ceb4c905c6268b4d47/html5/thumbnails/43.jpg)
43
How to contact us• IRC channel #qtwebkit on freenode
• Bug reporting at http://bugs.webkit.org
• Talk with me here at the conference!
![Page 44: Developments in the Qt WebKit Integration](https://reader034.vdocument.in/reader034/viewer/2022042607/555145ceb4c905c6268b4d47/html5/thumbnails/44.jpg)
44
TIME FOR
QUESTIONS?