(Difference between revisions)

Porting WRT widgets to Qt applications

From Nokia Developer Wiki
Jump to: navigation, search
Forum Nokia KB (Talk | contribs)
seppo_fn (Talk | contribs)

Revision as of 11:53, 10 February 2010



This article provides Web developers with information about porting Web Runtime (WRT) widgets to Qt applications. The IDE used here is Qt Creator, but basic principles should apply to other IDEs, such as NetBeans or Eclipse, as well.

Creating a Qt Application with a QWebView Component

  1. Start the Qt Creator IDE.
  3. Click OK.
  4. Give the project a name and set its location.
  5. Click Next.
  8. Click Next.


#include <QtGui/QApplication>
#include "wrtwidgetwindow.h"
int main(int argc, char *argv[])
QApplication app(argc, argv);
WRTWidgetWindow window;
return app.exec();

Next, open the header file of the main window, wrtwidgetwindow.h (in the Headers folder in the Projects view), and modify it to look like this:

#include <QtCore/QPointer>
#include <QtGui/QMainWindow>
class QWebView;
class WRTWidgetWindow : public QMainWindow
WRTWidgetWindow(QWidget *parent = 0);
void setupUI();
QWebView* createWebView();
QPointer<QWebView> webView;

The class, which was declared above, represents the main window of the application. It contains one Qt widget, QWebView (webView), which is used for showing the web content (HTML, CSS, JavaScript) on Qt. Next, open the implementation for the class (wrtwidgetwindow.cpp) and modify it so that it looks like this:

#include "wrtwidgetwindow.h"
#include <QtGui/QFrame>
#include <QtGui/QVBoxLayout>
#include <QtWebKit/QWebView>
WRTWidgetWindow::WRTWidgetWindow(QWidget *parent)
: QMainWindow(parent)
void WRTWidgetWindow::setupUI()
QFrame* cw = new QFrame(this);
QVBoxLayout* layout = new QVBoxLayout(cw);
webView = createWebView();
QWebView* WRTWidgetWindow::createWebView()
QWebView* view = new QWebView(this);
return view;

After this, the application can be compiled and run. You can try this, even though the application doesn't do much yet; there's only an empty QWebView component on the screen.

Showing the web content from Qt

Let's add your existing WRT widget to the project (if you don't have one, grab one from here, for example: Web Runtime Stub). Copy the HTML, CSS, JavaScript, and resource files (such as graphic files) into your Qt project. It is most easily done by using the file manager and copying the respective folders into your project's root directory as a whole (you have the web content in separate folders, don't you?). The directory structure of your widget could look like this, for example:

html/   (HTML files)
style/ (CSS files)
script/ (JavaScript files)
gfx/ (graphics)


<RCC version="1.0">
<!-- HTML files -->
<!-- CSS files -->
<!-- JavaScript files -->
<!-- Graphics -->





Change all the paths in the HTML files (this doesn't concern the CSS files, they work like before) as instructed above, and make this final change before you can try out your widget: Open the wrtwidgetwindow.cpp file again and load the main HTML file into the QWebView component with the following code:

QWebView* WRTWidgetWindow::createWebView()
QWebView* view = new QWebView(this);
return view;


Porting Considerations

It was assumed above that the HTML file of the widget is relatively simple (such as the one in the WRT Stub application). More often than not, this is not the case. This chapter presents several issues to consider when porting WRT widgets to Qt applications.

Web Runtime API

In addition to the standard JavaScript objects, there are extension APIs in WRT that allow widgets to access system properties, for example. For a list of these objects, see Web Runtime API reference in Web Developer's Library. Because these objects are WRT-specific, they won't be understood by Qt. For example, the code that hides the softkeys looks like this:



WRTWidgetWindow widget;

S60 Platform Services

WRT provides several JavaScript service APIs for accessing S60 Platform Services. As the name suggests, these APIs are S60-specific (and WRT-specific), so they won't be understood by Qt. In a QtWebKit application, there will be two alternatives for Platform services. For C++ developers, Qt Mobility APIs are a good choice. They are being developed and will eventually offer the same kind of functionality. Also, the Qt hybrid application framework that Nokia is developing will provide that kind of functionality. The benefit of the latter one is that the underlying services can be accessed using pure web technologies.

Dynamic Scalability

Handling orientation changes dynamically is important when designing usable mobile applications. The technique presented in the snippets "CS001498 - Detecting orientation changes in WRT" and "CS001499 - Reacting to the changes in screen size in WRT" works fine in Qt, because the JavaScript event onresize can be used also from within the QWebKit component to take care of the scalability. The only thing that you may want to take into account is to set the resolution to a fixed value on platforms that don't support orientation changes (for example, desktop Windows and Linux). Here is the code that accomplishes this:

WRTWidgetWindow widget;
#if defined Q_OS_SYMBIAN || defined Q_WS_HILDON
#elif defined Q_OS_WIN32 || defined Q_OS_LINUX
widget.setFixedSize(800, 480);

Calling Qt Code from JavaScript

At some point, there may be a need to call Qt code from JavaScript. One such case is closing the application. The JavaScript code "window.close()", which would normally close the window, cannot be used to close a window in Qt. For that, you will need to write some Qt code and call it from JavaScript. Here's the Qt function that exits the application:

#include <QtGui/QApplication>
void WRTWidgetWindow::close()

In order to call this function from JavaScript, you will need to make the Qt class available to 'the JavaScript side' (or in more technical terms, from within QWebFrame's JavaScript context). Add the following function to the class:

#include <QtWebKit/QWebFrame>
void WRTWidgetWindow::addJavaScriptObject()
// Make the WRTWidgetWindow available from within the QWebFrame's
// JavaScript context (as variable "clientApp")


QWebView* WRTWidgetWindow::createWebView()
QWebView* view = new QWebView(this);
// Call the addJavaScriptObject slot when the javaScriptWindowObjectCleared
// starts
this, SLOT(addJavaScriptObject()));
return view;

Also add the necessary function declarations into the header file:

void close();
private slots:
void addJavaScriptObject();

After these steps, you can write a JavaScript function which calls WRTWidgetWindow's close() function .

// Exits the application
function exit() {

Finally, call the JavaScript function. From HTML, for example:


Example project


The first version of the ported application is available at File:BetaLabsClientQtWebKit.zip

Related documentation

For more information, refer to the following code snippets:

85 page views in the last 30 days.