Petri Niemi, Qt Web Kit, 6.3.2010, Hagenberg

1. QtWebKit
1

2. Contents
• Classes
• Features
• Exposing Widgets
• W ki with J
Working i h JavaScript
S i
2

3. WebKit
• Provides a Web browser engine
• Easy to embed WWW content into an application
• Content may be enhanced with native controls
• QtWebKit module provides facilities for rendering of
• HyperText Markup Language (HTML),
• Extensible HyperText Markup Language (XHTML) and
• Scalable Vector Graphics (SVG) documents,
• Styled using Cascading Style Sheets (CSS) and scripted with JavaScript
• Based on the Open Source WebKit engine
• www.webkit.org
ebkit org
3

4. High-Level Architecture
QWebView,
QW bVi
QtWebKit API QWebPage,
QWebFrame, …
WebCore
WebKit Engine
JavaScript Core
Platform/Network QtCore, QtXml,
Adaptation QtNetwork
4

5. QWebView and QWebPage Classes
• QWebView inherited from QWidget QWebView
• R d
Renders th contents of a QWebPage
the t t f
• Easy to embed wherever a widget could be used QWebPage
QWebView *view = new QWebView( parent ); QWebFrame
view->load(QUrl(“http://www.nokia.com”));
view >show();
view->show();
• QWebPage provides access to the document structure in a page
• F
Frames
• Navigation history
• Undo/redo stack for editable content
• Each QWebPage has one QWebFrame object as its main frame
• HTML documents can be nested using multiple frames
5

6. QWebView
• All
Allows viewing and editing of Web documents
i i d diti fW bd t
• view.back(); view.forward(); view.reload();
• Easy to embed Web content anywhere
y y
• Three essential signals
• loadStarted()
• loadProgress() – emits a value b t
it l between 0 100
0…100
• loadFinished() – view loaded completely
• Settings can be specified with QWebSettings
g p Q g
• Font, is JavaScript enabled, are plugins enabled, auto load images, etc.
• Use QWebSettings::globalSettings() to modify global settings, and
QWebPage::settings() to modify page specific settings (overrides
• QW bP tti () modif page-specific (o errides
global settings for the given page)
6

7. QGraphicsWebView
• Counterpart of QWebView in the Graphics View Framework
• Enables displaying web content in a graphics view
• Many of the functions and signals are the same as in QWebView
• M k porting existing QWebView-using code t QGraphicsWebView easy
Makes ti i ti b i i d to hi b i
• Classes like QWebPage, QWebFrame etc. are used in the background here as well
7

8. Basic Services - Examples
• HTML to PDF
QPrinter p(QPrinter::HighResolution);
p.setOutputFormat(QPrinter::PdfFormat);
p.setOutputFileName(outputFile);
webview->print(&p);
• HTML to image
QImage img(size(), QImage Fo mat ARGB32)
img(si e() QImage::Format_ARGB32);
img.fill(Qt::transparent);
QPainter p(&img);
webview->page()->mainFrame()->render(&p);
img.scale(0.5, 0.5);
8

9. Exposing Widgets – 1(3)
• QtWebKit can place QWidgets and QGraphicsWidgets in the Web
environment
i t
• Use HTML/JavaScript to control UI and infrastructure
• Approaches
• Host widget inside Web environment
• Expose a C++ object to JavaScript environment
• …or execute JavaScript from C++ side
• Why would you want to do this?
• Simple updates (redeploy a script file)
• Easy to reuse Web design for Look & Feel
• Easier interaction with web services
9

10. Exposing Widgets – 2(3)
• QWidgets can be exposed to the Web environment by
• Using the HTML tag <object> with a specific MIME-type in the Web page, and
• Subclassing QWebPage and implementing QWebPage::createPlugin()
<!-- mywebsite html -->
mywebsite.html
<object type="application/x-qt-plugin"
classid="mylabel“ width="300" height=“300“/>
// mywebpage.cpp
QObject* MyWebPage::createPlugin(const QString& classid,
const QU l& url, const QSt i Li t& paramNames,
t QUrl& l t QStringList& N
const QStringList& paramValues )
{
if (classid == “mylabel”) return new QLabel(“Test Label”);
mylabel ) QLabel( Test Label );
return 0;
}
10

11. Exposing Widgets – 3(3)
• The same effect as in the previous slide can also be achieved by
• Using the HTML tag <object> with any custom MIME-type, and
• Subclassing QWebPluginFactory and implementing functions create() and
plugins()
• Note that in this case there is no need to subclass QWebPage!
• Just tell the page which factory to use:
QWebPage::setPluginFactory()
• The same plugin can be reused with multiple QWebPages
• N t also that plugins() i currently only called when J
Note l th t is tl l ll d h JavaScript programs
S i t
access global plugins or mimetypes objects
• Still, implement it p p y to g
, p properly guarantee compatibility in the future
p y
11

12. Working with Exposed Objects 1(2)
• QObjects can expose meta-object information to the JavaScript environment
• P
Properties can b read and altered
ti be d d lt d
• Slots can be called
• Connect statements can be made
• Use QWebFrame::addToJavaScriptWindowObject() to make your object
accessible from JavaScript
• This should be done each time the JavaScript context is cleared, i.e. just before a
new URL is loaded
• A useful signal t monitor:
f l i l to it
QWebFrame::javaScriptWindowObjectCleared()
12

13. Working with Exposed Objects 2(2)
// SomeFile.cpp
pp
// MyTwitObject derives from Qobject and has a slot function
// called updateStatus(QString s)
MyTwitObject* myTwit = new MyTwitObject();
frame->addToJavaScriptWindowObject(“twit”, myTwit);
// MyWebSite.html
<script type=”text/javascript”>
function setStatus() {
twit.updateStatus(“Some status”); // Slot function call
}
</script>
13

14. Interoperating with JavaScript
• We already know that each Web frame has a JavaScript context
• JavaScript code can be executed from C++ using
QWebFrame::evaluateJavaScript()
• Returns a QVariant
• Can be used to dynamically manipulate the contents of a Web page!
// A simple calculation, result.toInt() == 2
QVariant result = frame->evaluateJavaScript(“1+1;”);
// Parse information from an HTML element on a Web page,
p g
// userName.toString() == ”Bugs Bunny”
QWebFrame *frame = view->currentFrame();
QVariant userName = frame->evaluateJavaScript(
“document.getElementById(“userName”).value”);
14

15. QWebElement
• A convenience class for accessing and traversing DOM elements in a
QWebFrame
• Provides pretty much the same functionality as JavaScript functions such as
getElementById() etc.
• G t a reference to a QWebElement i t
Get f t instance using
i
QWebFrame::documentElement() in your code
• Contains plenty of useful functions: firstChild(), nextSibling(),
findAll()…
i
• Argument to findAll() is a CSS selector statement
• Convenience class QWebElementCollection can also be used; simply a list class
; py
that contains QWebElements
QWebElement document = frame->documentElement();
// Find all <span> elements
QWebElementCollection allSpans = document.findAll("span");
// Find all <span> elements within a <p class=intro> element
QWebElementCollection introSpans = document.findAll( p.intro span");
document findAll("p intro span );
15

16. Summary
• QtWebKit enables full AJAX application functionality and embedding Web content
anywhere i th Qt application
h in the li ti
• Exposing custom Qt GUI components is easy
• QObjects can be exposed too!
exposed,
16