Example of wrapping a web application into QML

On the MeeGo 1.2 Harmattan platform, the recommended and most effortless way to control rotation in web applications is wrapping the application into a minimal Qt Quick Components application. When you use a QML wrapper, your web application behaves like a true Harmattan application, for example, when the user physically rotates the Harmattan device. For more reasons for using a QML wrapper, see the Application development framework section.

To wrap an application into a Qt Quick Components application:

1. Create a new project with the Qt Quick Application template. For instructions, see Creating and running a Hello World application with Qt SDK.

   Note: When creating the project, verify that the Make application boostable check box is selected.

2. Edit the main.cpp file accordingly.
3. Edit the main.qml file accordingly.

Note: You can also use the same approach in QGraphicsView applications.

Example web application

This example illustrates how to wrap an existing web application into a minimal Qt Quick Components application. The example application allows you to view the Google main page (http://www.google.com). It is based on the Qt Quick Application template provided by the Qt SDK. To create the example layout, modify the following files:

• main.cpp
• main.qml

main.cpp

This is the main.cpp file of the example web application. In addition to defining the orientation, the example also illustrates how to use the event filter in the application. You only need the event filter to make the virtual keyboard behave properly inside the web application. For more information, see Developing plain Qt and Qt WebKit applications for Harmattan. The example is as follows:

#include <QtGui/QApplication>
#include "qmlapplicationviewer.h"
#include <QInputContext>

class EventFilter : public QObject
{
protected:
    bool eventFilter(QObject *obj, QEvent *event) {
        QInputContext *ic = qApp->inputContext();
        if (ic) {
            if (ic->focusWidget() == 0 && prevFocusWidget) {
                QEvent closeSIPEvent(QEvent::CloseSoftwareInputPanel);
                ic->filterEvent(&closeSIPEvent);
            } else if (prevFocusWidget == 0 && ic->focusWidget()) {
                QEvent openSIPEvent(QEvent::RequestSoftwareInputPanel);
                ic->filterEvent(&openSIPEvent);
            }
            prevFocusWidget = ic->focusWidget();
        }
        return QObject::eventFilter(obj,event);
    }

private:
    QWidget *prevFocusWidget;
};


Q_DECL_EXPORT int main(int argc, char *argv[])
{
    QScopedPointer<QApplication> app(createApplication(argc, argv));
    QScopedPointer<QmlApplicationViewer> viewer(new QmlApplicationViewer());

    viewer->setOrientation(QmlApplicationViewer::ScreenOrientationAuto);
    viewer->setMainQmlFile(QLatin1String("qml/webqml/main.qml"));

    viewer->showExpanded();

    EventFilter ef;
    viewer->installEventFilter(&ef);

    return app->exec();
}

main.qml

This is the main.qml file of the example web application. See the code comments below for more options.

import QtQuick 1.1
import com.nokia.meego 1.0
import QtWebKit 1.0

PageStackWindow {
    id: appWindow

    initialPage: mainPage

    // Uncomment this if you want to show in full-screen, without status bar
    //showStatusBar: false

    Page {
        id: mainPage

        // Uncomment this if you want to lock to portrait
        //orientationLock: lockInPortrait

        WebView {
            id: web
            anchors.fill: parent
            preferredHeight: screen.currentOrientation == Screen.Portrait ? (appWindow.showStatusBar ? 819 : 854) :
                                                                            (appWindow.showStatusBar ? 445 : 480)
            preferredWidth: screen.currentOrientation == Screen.Portrait ? 480 : 854
            url: "http://www.google.com"
        }
    }
}