Qt and Web Content

Tags: Programming, Qt

Qt is a really nice framework to develop applications that need to be cross platform, and where you have the raw power of C++ (or even optimised C/Assembly libraries) at your fingertips. However, more and more we see web applications and web languages taking over from the traditional desktop applications. Often though, what you really need is a mix between the two: the raw power and responsiveness that a desktop application provides, while interacting with web API's and displaying web content as part of the desktop application. Good thing then that Qt allows just that... 

Some people might think that Qt is aimed at mobile applications since it was purchased by Nokia some time ago from TrollTech. In the mean time, Nokia went with Windows Phone as its smartphone platform and developers from the Maemo, (no wait Meego, or is it Tizen?) community were left without a clear path for their platform of choice. Not only that, but Nokia basically killed the Symbian platform. Thing is, the original plan Nokia had for Qt was really cool: use Qt across all Nokia devices as a unified environment for application development. In other words, the aim was to be able to build applications ranging from entry level Symbian devices to high end MeeGo devices all using the same tool. Even more, it would allow for applications to be portable between different vendors and different non-Nokia operating systems. You can find some videos demonstrating this at the following links, among others:

http://www.youtube.com/watch?v=Qhba1lhBllM
http://www.youtube.com/watch?v=bjNeWwsNNEg

In any case, Qt is not limited to mobile platforms. It started its life as a cross platform toolkit, and keeps doing that today resulting in an extensive number of software applications. Together with a nice IDE called QtCreator, it is a powerful tool that allows one to build cross platform applications with rich graphical interfaces and the integration of various technologies such as database access, networking, XML, Multimedia, GL, and much more - and indeed, web content integration. 

As an example, let's develop a simple application (see screenshot below) that could form the base of a GPS tracking client, just like the one I wrote a while back.

The application needs to support a certain set of actions:

• Display a map (e.g., a Google Map, combination of HTML and JavaScript) into part of its main window
• Allow clicking on the map to get latitude and longitude coordinates (the numbers in the textboxes)
• Allow actions on the map, in this case placing markers, from the Qt buttons
• Clicking on a marker generates an info balloon with some information generated from the Qt side

In other words, the C++ code needs to interact with the JavaScript API of Google Maps, and data needs to be transferred from the JavaScript side to the C++ side and vice versa. To do this, Qt allows one to embed a C++ object in the JavaScript code and can also execute JavaScript functions from within the C++ code. I'll briefly show how this is done, and you can check it out in detail with the attached source code (and project to open in QtCreator).

Let's start with a couple of functions from the JavaScript side. These are present in the index.html file in the attached source. The index.html file is later on loaded into the QWebView element and displayed, and is responsible for initialising the Google Maps API among others. You could also load a URL into QWebView from a web server, or compile the iindex.html into your application by turning it into a resource.

The init() function is responsible to initialize the map and adding an event listener for clicks on the map. If we click on a marker, the info window is opened and a message is displayed (see screenshot above). Should we click anywhere else on the map, the coordinate (latitude and longitude) are set in myObject. Here, myObject comes from the C++ side - we will see how we get that one there in a little while.

This second function markers() will be called from the C++ side every time we want to add a marker to a set coordinate with the "Add Marker" button. The message could be any text string one wants to put into the info balloon. Similarly, the third function removemarkers() will clear the map from the markers and is called when the "Clear Markers" button.

Time to look at some of the C++ code. First thing we want to do is load the index.html file into the QWebView widget.

As said, it would be better to turn the index.html into a resource since it provides a more platform independent mechanism for storing files. I'll leave that as an exercise for the reader. The ui->webView is the QWebView widget which we added with the design component of QtCreator and named webView. We set some of its properties to disable scroll bars to make it look better.

We then have to add an object to the JavaScript side to facilitate data exchange between the two environments. This is done using the addToJavaScriptWindowObject() method. The first argument to this method is the name under which it will be available on the JavaScript side, the second is the actual C++ object you want to embed.

The JavaScriptObject is a simple object used to provide an interface to both sides of the application. It contains a QPointF variable where latitude and longitude are stored together with a method to return these to the main application as well as the set() method we've seen before which will invoke a method on the C++ side to update the two QLineEdit widgets displaying the latitude and longitude values in the user interface.

Finally, we have to be able to execute the JavaScript functions when the Qt buttons are pressed. This is done as follows:

As you can see, the QWebView widget contains a method called evaluateJavaScript() which allows us to do just that. All we have to do is build up a string with the required arguments and name of the JavaScript functions we want to call and pass these to the evaluateJavaScript() function. While we set the message that will appear in the info balloon here as a constant, we could just as well get the required text from another QLineEdit widget.

That's it! Have a look at the attached code and have fun building your own mixed applications. Be aware that the code is deliberately kept simple and certain things could be done better by using other Qt features such as signals and slots, etc.

EDIT: the Google Maps API has undergone some changes since this entry was written. I've attached a new version of the index.html code to reflect those changes. Just replace the original one in the archive with the updated one and things should work again. 

Attachments

QtJavaScript.zip

QtJavaScript.zip 4.27 KB

index.html

index.html 1.81 KB