SlideShare a Scribd company logo
Developments in the
Qt WebKit Integration
Introducing even closer integration with Qt
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
What is Qt WebKit?




      To answer that we need to look at WebKit itself




                                                        3
Agenda


   A heads-up introduction to WebKit

   A look at the new goodies in Qt 4.6




                                         4
A heads-up intro to WebKit



                             5
What is WebKit


   WebKit is a contents rendering/editing engine

   It is not a browser;

   though you could make one using it




                                                   6
Industry Acceptance


                                Adobe
    Apple                RIM


               Nokia
                               Sony-Ericsson
    Palm
                      Google

                                               7
Acceptance by Contents Providers


    Powers most mobile pages:

      Android, iPhone, Nokia S60

    The engine behind:

      Google Chrome, Apple Safari



                                    8
Highly Standard Compliant


   It is highly standard compliant



          And it is being developed in the open




                                                  9
There exists many variations




    Qt based, GTK+ based, Google Chrome, Android...


    Most developed in WebKit trunk




                                                      10
Down in the details


    The “engines” that powers WebKit are:

      – WebCore
      – JavaScriptCore (optional)




                                            11
Building blocks


    WebCore serves at a number of building blocks

                                   Painting/rendering
          Network access

                      Text handling
        Parsing
                                 Layouting
                                                    etc...

                                                             12
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
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
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
Reasons for choosing WebKit


   Why choose WebKit for Qt's web contents needs?

     We didn't want a browser, but components for integrating web
     technologies, where we and our customers see fit




                                                                    16
Introducing WebKit in Qt 4.6



                               17
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
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
Speculative Loading


    Loads documents, scripts and style-info

    ahead of time



    Snappier Internet Experience




                                              20
Faster JavaScript


    New ARM v5 and v7 JITs



    Fast JavaScript on more platforms!

    ARM v5 JIT sponsored by Nokia and ARM




                                            21
We have not been sleeping either!




                                    22
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
Out top feature request




    We are proud to present to you

    Out most requested feature request!




                                          24
Introducing the QWebElement




                              25
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
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
Easy traversal


  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();




                                                                 28
Plugin Management


   Introducing the QWebPluginDatabase



   Provides access to plugin information

   Specifies plugin precidence

   Enable/disable plugins as you see fit


                                           29
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
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
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
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
It all looks so bright


    Everything is great! ....



          ...until you want to use WebKit




                                            34
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
That is now part of the past!




               Introducing the QGraphicsWebView




                                                  36
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
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
Introducing the QGraphicsWebView


   We are committed to improving this and respond to most
   common customer demands



   “Only your imagination will be the limit” ;-)




                                                            39
Web Developers have not been forgotten




                                         40
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
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
How to contact us
  • IRC channel #qtwebkit on freenode

  • Bug reporting at http://bugs.webkit.org

  • Talk with me here at the conference!


                                              43
?        TIME FOR


    QUESTIONS

                    44

More Related Content

PDF
Next Generation Hybrid Applications with Qt - presentation for SEE 2009
PDF
GStreamer support in WebKit. what’s new?
PDF
WebKit, HTML5 media and GStreamer on multiple platforms
PDF
Reaching the multimedia web from embedded platforms with WPEWebkit
PDF
PHPIDOL#80: Kubernetes 101 for PHP Developer. Yusuf Hadiwinata - VP Operation...
PDF
Enabling Cloud Native Buildpacks for Windows Containers
PDF
Mihai Criveti - PyCon Ireland - Automate Everything
PDF
OpenShift Virtualization - VM and OS Image Lifecycle
Next Generation Hybrid Applications with Qt - presentation for SEE 2009
GStreamer support in WebKit. what’s new?
WebKit, HTML5 media and GStreamer on multiple platforms
Reaching the multimedia web from embedded platforms with WPEWebkit
PHPIDOL#80: Kubernetes 101 for PHP Developer. Yusuf Hadiwinata - VP Operation...
Enabling Cloud Native Buildpacks for Windows Containers
Mihai Criveti - PyCon Ireland - Automate Everything
OpenShift Virtualization - VM and OS Image Lifecycle

What's hot (20)

PDF
Development with Qt for Windows CE
PDF
Introduction to Qt programming
PDF
WebKit and GStreamer
PDF
Groovy for Java Devs
PDF
[workshop] The Revolutionary WebRTC
PPTX
Take the Fastest Path to Node.Js Application Development with Bitnami & AWS L...
PPTX
S103 cics cloud and dev ops agility
PPTX
Running Microservices On Docker
PPTX
Qt for beginners part 5 ask the experts
 
PDF
[Webinar] QtSerialBus: Using Modbus and CAN bus with Qt
 
PDF
Network-Connected Development with ZeroMQ
 
PDF
WPEWebKit, the WebKit port for embedded platforms (Linaro Connect San Diego 2...
PDF
Qt App Development - Cross-Platform Development for Android, iOS, Windows Pho...
PDF
11th Docker Switzerland User Group Meetup
PDF
Rami Sayar - Node microservices with Docker
PDF
Best Practices - By Lofi Dewanto
PPTX
Docker Timisoara: Dockercon19 recap slides, 23 may 2019
PPTX
Qt for beginners part 1 overview and key concepts
 
PDF
Docker meetup-20-apr-17-openshit
PDF
Container Technologies and Transformational value
Development with Qt for Windows CE
Introduction to Qt programming
WebKit and GStreamer
Groovy for Java Devs
[workshop] The Revolutionary WebRTC
Take the Fastest Path to Node.Js Application Development with Bitnami & AWS L...
S103 cics cloud and dev ops agility
Running Microservices On Docker
Qt for beginners part 5 ask the experts
 
[Webinar] QtSerialBus: Using Modbus and CAN bus with Qt
 
Network-Connected Development with ZeroMQ
 
WPEWebKit, the WebKit port for embedded platforms (Linaro Connect San Diego 2...
Qt App Development - Cross-Platform Development for Android, iOS, Windows Pho...
11th Docker Switzerland User Group Meetup
Rami Sayar - Node microservices with Docker
Best Practices - By Lofi Dewanto
Docker Timisoara: Dockercon19 recap slides, 23 may 2019
Qt for beginners part 1 overview and key concepts
 
Docker meetup-20-apr-17-openshit
Container Technologies and Transformational value
Ad

Viewers also liked (6)

PDF
WebKit, why it matters (PDF version)
PDF
Qt on Real Time Operating Systems
ODP
PDF
The Future of Qt Widgets
PDF
KDE Plasma for Mobile Phones
PDF
Shipping Mobile Applications Using Qt for Symbian
WebKit, why it matters (PDF version)
Qt on Real Time Operating Systems
The Future of Qt Widgets
KDE Plasma for Mobile Phones
Shipping Mobile Applications Using Qt for Symbian
Ad

Similar to Developments in the Qt WebKit Integration (20)

PDF
Cutest technology of them all - Forum Nokia Qt Webinar December 2009
PDF
Igalia and WebKit: Status update and plans
PDF
The WebKit project
PDF
[Global logic] container runtimes and kubernetes
PDF
Developing for BlackBerry 10 – Tools and SDKs by Luca Filigheddu
PDF
Building Event-Driven Workflows with Knative and Tekton
PDF
Add the power of the Web to your embedded devices with WPE WebKit
PDF
Reconcile Terraform Resources the GitOps Way with Priyanka Ravi
PDF
WebRTC Standards & Implementation Q&A - The Internals of WebRTC Browsers Impl...
PDF
Developing for Industrial IoT with Linux OS on DragonBoard™ 410c: Session 3
PDF
WebKit2 And You (GUADEC 2013)
PDF
Qt Automotive Suite - under the hood // Qt World Summit 2017
PDF
Introduction to QtWebKit
PDF
[Confoo Montreal 2020] Build Your Own Serverless with Knative - Alex Gervais
PPTX
Moby KubeCon 2017
PPTX
DotnetConf - Cloud native and .Net5 announcements
PPTX
JS digest. November 2017
PDF
The path to a serverless-native era with Kubernetes
PDF
WebDriver BiDi in WebKit
PPTX
Migrating from IBM API Connect v5 to v2018
Cutest technology of them all - Forum Nokia Qt Webinar December 2009
Igalia and WebKit: Status update and plans
The WebKit project
[Global logic] container runtimes and kubernetes
Developing for BlackBerry 10 – Tools and SDKs by Luca Filigheddu
Building Event-Driven Workflows with Knative and Tekton
Add the power of the Web to your embedded devices with WPE WebKit
Reconcile Terraform Resources the GitOps Way with Priyanka Ravi
WebRTC Standards & Implementation Q&A - The Internals of WebRTC Browsers Impl...
Developing for Industrial IoT with Linux OS on DragonBoard™ 410c: Session 3
WebKit2 And You (GUADEC 2013)
Qt Automotive Suite - under the hood // Qt World Summit 2017
Introduction to QtWebKit
[Confoo Montreal 2020] Build Your Own Serverless with Knative - Alex Gervais
Moby KubeCon 2017
DotnetConf - Cloud native and .Net5 announcements
JS digest. November 2017
The path to a serverless-native era with Kubernetes
WebDriver BiDi in WebKit
Migrating from IBM API Connect v5 to v2018

More from account inactive (20)

PDF
Scripting Your Qt Application
PDF
Special Effects with Qt Graphics View
PDF
Developments in The Qt WebKit Integration
PDF
Qt Kwan-Do
PDF
Translating Qt Applications
PDF
Qt Creator Bootcamp
PDF
Qt Widget In-Depth
PDF
Qt State Machine Framework
PDF
Mobile Development with Qt for Symbian
PDF
How to Make Your Qt App Look Native
PPT
Animation Framework: A Step Towards Modern UIs
PDF
Using Multi-Touch and Gestures with Qt
PDF
Debugging Qt, Fixing and Contributing a Bug Report (Using Gitorious)
PDF
The Mobility Project
PDF
Copy Your Favourite Nokia App with Qt
PDF
The Next Generation Qt Item Views
PDF
Optimizing Performance in Qt-Based Applications
PDF
Qt Licensing Explained
PDF
Case Study: Using Qt to Develop Advanced GUIs & Advanced Visualization Software
PDF
Case Study: Porting Qt for Embedded Linux on Embedded Processors
Scripting Your Qt Application
Special Effects with Qt Graphics View
Developments in The Qt WebKit Integration
Qt Kwan-Do
Translating Qt Applications
Qt Creator Bootcamp
Qt Widget In-Depth
Qt State Machine Framework
Mobile Development with Qt for Symbian
How to Make Your Qt App Look Native
Animation Framework: A Step Towards Modern UIs
Using Multi-Touch and Gestures with Qt
Debugging Qt, Fixing and Contributing a Bug Report (Using Gitorious)
The Mobility Project
Copy Your Favourite Nokia App with Qt
The Next Generation Qt Item Views
Optimizing Performance in Qt-Based Applications
Qt Licensing Explained
Case Study: Using Qt to Develop Advanced GUIs & Advanced Visualization Software
Case Study: Porting Qt for Embedded Linux on Embedded Processors

Recently uploaded (20)

PPT
Teaching material agriculture food technology
PDF
Univ-Connecticut-ChatGPT-Presentaion.pdf
PDF
Unlocking AI with Model Context Protocol (MCP)
PDF
Getting Started with Data Integration: FME Form 101
PDF
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
PPTX
Machine Learning_overview_presentation.pptx
PDF
Agricultural_Statistics_at_a_Glance_2022_0.pdf
PPTX
Group 1 Presentation -Planning and Decision Making .pptx
PDF
Heart disease approach using modified random forest and particle swarm optimi...
PDF
Encapsulation theory and applications.pdf
PPTX
1. Introduction to Computer Programming.pptx
PDF
Reach Out and Touch Someone: Haptics and Empathic Computing
PDF
Empathic Computing: Creating Shared Understanding
PDF
Assigned Numbers - 2025 - Bluetooth® Document
PDF
NewMind AI Weekly Chronicles - August'25-Week II
PDF
A comparative study of natural language inference in Swahili using monolingua...
PPTX
TLE Review Electricity (Electricity).pptx
PDF
Approach and Philosophy of On baking technology
PDF
Mushroom cultivation and it's methods.pdf
PPTX
A Presentation on Artificial Intelligence
Teaching material agriculture food technology
Univ-Connecticut-ChatGPT-Presentaion.pdf
Unlocking AI with Model Context Protocol (MCP)
Getting Started with Data Integration: FME Form 101
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
Machine Learning_overview_presentation.pptx
Agricultural_Statistics_at_a_Glance_2022_0.pdf
Group 1 Presentation -Planning and Decision Making .pptx
Heart disease approach using modified random forest and particle swarm optimi...
Encapsulation theory and applications.pdf
1. Introduction to Computer Programming.pptx
Reach Out and Touch Someone: Haptics and Empathic Computing
Empathic Computing: Creating Shared Understanding
Assigned Numbers - 2025 - Bluetooth® Document
NewMind AI Weekly Chronicles - August'25-Week II
A comparative study of natural language inference in Swahili using monolingua...
TLE Review Electricity (Electricity).pptx
Approach and Philosophy of On baking technology
Mushroom cultivation and it's methods.pdf
A Presentation on Artificial Intelligence

Developments in the Qt WebKit Integration

  • 1. Developments in the Qt WebKit Integration Introducing even closer integration with Qt
  • 2. 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
  • 3. What is Qt WebKit? To answer that we need to look at WebKit itself 3
  • 4. Agenda A heads-up introduction to WebKit A look at the new goodies in Qt 4.6 4
  • 5. A heads-up intro to WebKit 5
  • 6. What is WebKit WebKit is a contents rendering/editing engine It is not a browser; though you could make one using it 6
  • 7. Industry Acceptance Adobe Apple RIM Nokia Sony-Ericsson Palm Google 7
  • 8. Acceptance by Contents Providers Powers most mobile pages: Android, iPhone, Nokia S60 The engine behind: Google Chrome, Apple Safari 8
  • 9. Highly Standard Compliant It is highly standard compliant And it is being developed in the open 9
  • 10. There exists many variations Qt based, GTK+ based, Google Chrome, Android... Most developed in WebKit trunk 10
  • 11. Down in the details The “engines” that powers WebKit are: – WebCore – JavaScriptCore (optional) 11
  • 12. Building blocks WebCore serves at a number of building blocks Painting/rendering Network access Text handling Parsing Layouting etc... 12
  • 13. 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
  • 14. 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
  • 15. 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
  • 16. Reasons for choosing WebKit Why choose WebKit for Qt's web contents needs? We didn't want a browser, but components for integrating web technologies, where we and our customers see fit 16
  • 18. 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
  • 19. 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
  • 20. Speculative Loading Loads documents, scripts and style-info ahead of time Snappier Internet Experience 20
  • 21. Faster JavaScript New ARM v5 and v7 JITs Fast JavaScript on more platforms! ARM v5 JIT sponsored by Nokia and ARM 21
  • 22. We have not been sleeping either! 22
  • 23. 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
  • 24. Out top feature request We are proud to present to you Out most requested feature request! 24
  • 26. 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
  • 27. 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
  • 28. Easy traversal 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(); 28
  • 29. Plugin Management Introducing the QWebPluginDatabase Provides access to plugin information Specifies plugin precidence Enable/disable plugins as you see fit 29
  • 30. 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
  • 31. 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
  • 32. 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
  • 33. 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
  • 34. It all looks so bright Everything is great! .... ...until you want to use WebKit 34
  • 35. 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
  • 36. That is now part of the past! Introducing the QGraphicsWebView 36
  • 37. 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
  • 38. 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
  • 39. Introducing the QGraphicsWebView We are committed to improving this and respond to most common customer demands “Only your imagination will be the limit” ;-) 39
  • 40. Web Developers have not been forgotten 40
  • 41. 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
  • 42. 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
  • 43. How to contact us • IRC channel #qtwebkit on freenode • Bug reporting at http://bugs.webkit.org • Talk with me here at the conference! 43
  • 44. ? TIME FOR QUESTIONS 44