QtWebKit Goes Mobile

Overview

A lot of effort has been put into QtWebKit to make it attractive for use on mobile devices.

The goal of this tutorial is to help you understand the mobile features and how to make the best of them, in other words, how to create a good mobile web view that can be used on touch devices.

If you want to target mobile devices you should consider using QGraphicsWebView instead of QWebView. Since QWebView is based on the QWidget system, it cannot easily support rotation, overlays, hardware accelerated compositing and tiling. If you need a QWidget anyway, you can always construct a QGraphicsView (which is a QWidget) with a QGraphicsWebView inside.

So let's start with a very simple QGraphicsWebView based "browser":

 int main(int argc, char **argv)
 {
     QApplication app(argc, argv);
     const int width = 640;
     const int height = 480;

     QGraphicsScene scene;

     QGraphicsView view(&scene);
     view.setFrameShape(QFrame::NoFrame);
     view.setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
     view.setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);

     QGraphicsWebView webview;
     webview.resize(width, height);
     webview.load(QUrl("http://doc.qt.nokia.com/"));

     scene.addItem(&webview);

     view.resize(width, height);
     view.show();

     return app.exec();
 }

Here we set up a QGraphicsView application and add a QGraphicsWebView to the scene. Notice that we're disabling the scrollbars on the QGraphicsView because QtWebKit handles scrolling and scrollbars automatically. This is to allow scrolling optimizations and to enable web authors to interact with the scrollbars, for instance, to style them differently.

On touch-based mobile devices a feature known as tiling is often used. It is used due to the interaction model (touch) as well as a scrolling optimization. With this optimization we will have to deal with scrolling ourselves, and we will have to disable features like scroll bar styling. This is not usually a problem, since mobile browsers do not usually show scroll bars, but use scroll indicators instead.

Tiling basically means that the contents of the viewport is separated into a grid of tiles, so that when you update an area, instead of just updating the area, you actually update the whole tile or sub-regions of it. This offers a few advantages for scrolling as, when you scroll, you do not need to repaint the new visible area for each scroll step, but you simply update a row of tiles each time; these tiles are often only partly on the screen. This minimizes all the painting calls that we have to do and enables kinetic scrolling.

Loading, rendering, and laying out are blocking operations. Though barely noticeable on desktop machines, these operations can block for a long time on a mobile device, letting the user believe the application has become unresponsive. Additionally, scrolling will also stall when the user uses his fingers to scroll, leading to a bad user experience.

One way to overcome this issue, is to do all loading, laying out and painting (basically all non-UI related work) in another thread or process, and just blit the result from the web process/thread to the UI. There is research in progress to enable this for a future version of QtWebKit, using WebKit2, but for now, freezing the backing store can help when performing a zooming operation, for instance. This will be discussed later, in the Enabling the Tiling section.

When using tiles, you can blit any tile available when scrolling. When no tile is available you can show a checkerboard tile instead, not letting the scrolling wait for the tiles to be updated. This results in a responsive interface, with the only disadvantage that you might see checkerboard tiles from time to time.

The use of tiles also helps with zooming. Repainting at each zoom level change during a zoom animation is basically impossible on a mobile device (or desktop for that matter) and thus, with tiling, you can stop the tiles from being updated and just scale the existing tiles. Then, at the end of the animation, update tiles on top of the scaled ones. For now we will ignore the blocking issue and concentrate on the tiling and the interaction model. More information about Tiling can be found here: http://doc.qt.nokia.com/4.7/qwebsettings.html#WebAttribute-enum (see the entry for TiledBackingStoreEnabled).

 webview.setResizesToContents(true);

 class MobileWebView : public QGraphicsWidget {
     Q_OBJECT
 public:
     MobileWebView(QGraphicsItem *parent = 0);
     ~MobileWebView();

     bool mousePress(const QPoint &value);
     void mouseMove(const QPoint &value);
     void mouseRelease(const QPoint &value);

 private:
     QGraphicsWebView* webView;
 };

 webview.page()->setPreferredContentsSize(QSize(desiredWidth, desiredHeight));

 QWebSettings::globalSettings()->setAttribute(QWebSettings::TiledBackingStoreEnabled, true);

 QWebSettings::globalSettings()->setAttribute(QWebSettings::FrameFlatteningEnable, true);