1. Using QtWebKit in PyQt as a N00b
@tewson
BarcampBangkok 3, Sripathum University 1

2. WebKit
● Open Source Layout Engine
● Safari
● Google Chrome
● WebOS
● Epiphany
● Arora
BarcampBangkok 3, Sripathum University 2

3. Qt
● Open Source Application Framework
● Google Earth
● VLC
● Skype
BarcampBangkok 3, Sripathum University 3

4. QtWebKit lets you...
● Embed a Web browser in an application
● Interact between Document Object Model
and other environment
BarcampBangkok 3, Sripathum University 4

5. Dependencies
sudo apt-get install python-qt4
with libqt4-core and libqt4-webkit?
BarcampBangkok 3, Sripathum University 5

6. Let's Try...
import sys
from PyQt4.QtCore import *
from PyQt4.QtGui import *
from PyQt4.QtWebKit import *
app = QApplication(sys.argv)
web = QWebView()
web.load(QUrl(quot;http://barcampbangkok.orgquot;))
web.show()
sys.exit(app.exec_())
BarcampBangkok 3, Sripathum University 6

7. Create Your Own Web Browser
● Use QtDesigner to Create UI
● Import UI to the Program
● Connect Signals and Slots:
clicked(), urlChanged(), loadProgress(), etc.
● app.show()!
BarcampBangkok 3, Sripathum University 7

8. Run JavaScript
web = QwebView()
frame = web.page().mainFrame()
frame.evaluateJavaScript(quot;alert('Hello, World!');quot;)
BarcampBangkok 3, Sripathum University 8

9. Cross the Border
x = QObject()
x.setObjectName(quot;xquot;)
x.setProperty(quot;fooquot;,QVariant(quot;quot;))
x.setProperty(quot;barquot;,QVariant(quot;quot;))
frame.addToJavaScriptWindowObject(quot;xquot;,x)
frame.evaluateJavaScript(quot;x.foo = 'foo'; x.bar = 5;quot;)
print x.property(“foo”).toString()
print x.property(“bar”).toInt()
BarcampBangkok 3, Sripathum University 9

10. Injecting Firebug Lite
* Use signals and slots to check first
if the page has finished loading. *
frame.evaluateJavaScript(quot;var firebug = document.createElement('script');
firebug.setAttribute('src','http://getfirebug.com/releases/lite/1.2/firebug-lite-
compressed.js'); document.body.appendChild(firebug); (function()
{if(window.firebug.version){firebug.init();} else {setTimeout(arguments.callee);}})();
void(firebug);quot;)
Get this from Firebug Lite bookmarklet.
http://getfirebug.com/lite.html
BarcampBangkok 3, Sripathum University 10

11. Injecting jQuery
It's the same idea as injecting Firebug Lite.
BarcampBangkok 3, Sripathum University 11

12. Many More Interesting Examples at...
http://labs.trolltech.com/blogs
http://riverbankcomputing.com
and Google, of course!
BarcampBangkok 3, Sripathum University 12

13. Thanks
@tewson
tewson.com
BarcampBangkok 3, Sripathum University 13