Example of rotating a web application manually

This example illustrates how to manually implement orientation control in a web application. On the MeeGo 1.2 Harmattan platform, the recommended approach to control rotation in web applications is to use a Qt Quick Components wrapper. See Example of wrapping a web application into QML for an example of using this method. If you decide not to use the recommended approach, you must control the rotation of the web application yourself. To do this, you must:

• Use the X11 orientation property to notify the system of the application's orientation.
• Rotate the actual content of your application in your own code.

Example web application

This example illustrates how to manually implement orientation control in a web application on the Harmattan platform. The example creates a QGraphicsWebView object that is used to access the Google main page (http://www.google.com). It is based on the Mobile Qt application template provided by the Qt SDK.

In the example, the orientation of the application is locked to the portrait mode. As all plain Qt WebKit and QGraphicsView applications, the example application is shown in the full-screen mode, without the status bar.

To create the example layouts:

1. Create a new project with the Mobile Qt application template.
2. Modify the following files provided by the template:

   • main.cpp
   • mainwindow.h
   • mainwindow.cpp

3. Create the following files with the required content:

   • webviewer.h
   • webviewer.cpp

Note: You can use the same approach in any QGraphicsView application. The web application shown here is just an example.

main.cpp

This is the main.cpp file of the example web application:

#include "mainwindow.h"

#include <QtGui/QApplication>

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);

    MainWindow mainWindow;

    // In Harmattan, we need to show in full screen mode
    mainWindow.showFullScreen();

    return app.exec();
}

mainwindow.h

This is the mainwindow.h file of the example web application:

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QtGui/QMainWindow>

class WebViewer;

class MainWindow : public QMainWindow
{
    Q_OBJECT
public:
    explicit MainWindow(QWidget *parent = 0);
    virtual ~MainWindow();

private:
    WebViewer *webview;
};

#endif // MAINWINDOW_H

mainwindow.cpp

This is the mainwindow.cpp file of the example web application. The following example shows how to use the X11 property to notify the system of the application's orientation:

#include "mainwindow.h"

#include <QtCore/QCoreApplication>
#include <QWidget>
#include <QVBoxLayout>
#include <QLineEdit>
#include "webviewer.h"

#ifdef Q_OS_UNIX
#include <QX11Info>
#include <X11/Xatom.h>
#include <X11/Xlib.h>
#endif

enum ScreenOrientation
{
    Landscape = 0,
    Portrait = 270,
    LandscapeInverted = 180,
    PortraitInverted = 90
};

static void writeX11OrientationAngleProperty(QWidget* widget, ScreenOrientation orientation = Portrait)
{
#ifdef Q_WS_X11
    if (widget) {
        WId id = widget->winId();
        Display *display = QX11Info::display();
        if (!display) return;
        Atom orientationAngleAtom = XInternAtom(display, "_MEEGOTOUCH_ORIENTATION_ANGLE", False);
        XChangeProperty(display, id, orientationAngleAtom, XA_CARDINAL, 32, PropModeReplace, (unsigned char*)&orientation, 1);
    }
#endif
}


MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    // Orientation fixed to portrait
    writeX11OrientationAngleProperty(this, Portrait);

    webview = new WebViewer();
    setCentralWidget(webview);

    webview->setFixedSize(854, 480);
    webview->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
    webview->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
}

MainWindow::~MainWindow()
{
}

webviewer.h

This is the webviewer.h file of the example web application:

#ifndef WEBVIEWER_H
#define WEBVIEWER_H

#include <QGraphicsView>

class QGraphicsScene;
class QGraphicsWebView;

class WebViewer : public QGraphicsView
{
    Q_OBJECT
public:
    explicit WebViewer(QWidget *parent = 0);

signals:

public slots:

private:
    QGraphicsScene *scene;
    QGraphicsWebView *webitem;

};

#endif // WEBVIEWER_H

webviewer.cpp

This is the webviewer.cpp file of the example web application. The following example shows how to rotate the actual content of the application manually:

#include <QGraphicsScene>
#include <QtWebKit/QGraphicsWebView>
#include "webviewer.h"

WebViewer::WebViewer(QWidget *parent) :
    QGraphicsView(parent)
{
    scene = new QGraphicsScene(this);
    scene->setItemIndexMethod(QGraphicsScene::NoIndex);
    scene->setSceneRect(0, 0, 854, 480);
    setScene(scene);
    setCacheMode(CacheBackground);
    setViewportUpdateMode(BoundingRectViewportUpdate);
    setRenderHint(QPainter::Antialiasing);
    setTransformationAnchor(AnchorUnderMouse);
    setResizeAnchor(AnchorViewCenter);

    webitem = new QGraphicsWebView();
    scene->addItem(webitem);

    // Orientation fixed to portrait in this example
    webitem->setGeometry(QRectF(0, 0, 480, 854));
    webitem->setRotation(270);
    webitem->setPos(QPointF(0, 480));

    webitem->setUrl(QUrl("http://www.google.com"));

}