Using-QtWebKit-and-QML-with-PySide
English French [qt-devnet.developpez.com]
Using QtWebKit and QML with PySide
This PySide tutorial shows you how to integrate Python code and QtWebKit together with QML, so you can have HTML content and program logic inside a QML application while still being able to send messages back and forth between the JavaScript context inside the WebView and the Python world. It uses JSON, alert() and evaluateJavaScript() to exchange arbitrary data structures (values, lists, dictionaries) between Python and JavaScript in the WebView.
WebKitView.py
Importing required modules
The sys module is used to get command line arguments, time is used to get the current time and json is used to en- and decode data structures to/from JSON.
Send and receive helper functions
These two functions send data to the WebView and receive data from the WebView. sendData simply transforms the data into JSON and calls receiveJSON (as defined in the HTML file) via the evaluateJavaScript method to put the data there. receiveData is connected to the alert signal of the WebView object, and gets a string as parameter, which is decoded as JSON and processed. When we want to set the rotation, we simply set the QML property “rotation” on the WebView object, which will rotate it in our view.
Putting it all together
Instantiate a new QApplication, a new QDeclarativeView and load the QML file. We also set the render hints to SmoothPixmapTransform, which makes the rotated WebView content look nicer (if you want more performance, remove this line). We then set the url property of our WebView to our HTML file, and finally make sure that we connect to the alert signal of the WebView, which gets emitted when the JavaScript code inside the WebView executes alert().
WebKitView.qml
This one is relatively unspectacular. Simply import QtWebKit (for this you have to install the libqtwebkit4-declarative package) and create a new WebView. The settings.javascriptEnabled part here is key – without it, JavaScript inside the WebView will not be executed.
WebKitView.html
HTML header
Here’s how we start out with the HTML file:
JavaScript send and receive functions
The sendJSON function will be called by our code (see below), the receiveJSON function will be called from Python by executing JavaScript code on the WebView.
Callbacks for our buttons
We’ll be using the sendJSON method to send data when the buttons are clicked. Here are the functions that generate the messages and then send the data to Python:
The HTML body contents
This is the rest of the HTML file, which simply gives some text, the input field, two buttons and a preformatted text element where we will insert received stuff from Python:
How the example app looks like
Once you have got all three files, start the example app like this: python WebKitView.py
Screenshot of WebKitView inside QML with Python
