Porting QML Applications to Qt 5 Example

The new version of Qt Quick in Qt 5 brings in some changes to the way QML applications are developed. For the complete list of changes that affect existing QML applications, refer to Porting QML Applications to Qt 5.

This topic will walk through the porting process to make the flickr Qt 4 QML demo work on Qt 5. If you have the SDK based on Qt 4.8 installed, you can find this demo application under <install_dir_root>/Examples/4.x/declarative/demos/.

Follow these step-by-step instructions to port the flickr Qt 4 QML application work to Qt 5:

  1. Open the flickr project using Qt Creator.
  2. Edit all the .qml files and replace the import QtQuick 1.0 statements with import QtQuick 2.3.
  3. Add the additional import QtQuick.XmlListModel 2.0 statement to qml/common/RssModel.qml.

    Note: XmlListModel is part of a submodule under QtQuick and it must be imported explicitly in order to use it.

  4. Make the following changes to qmlapplicationviewer/qmlapplicationviewer.h:
    • Replace the #include <QtDeclarative/QDeclarativeView> with #include <QQuickView>.
    • Replace QDeclarativeView with QQuickView in the class declaration for QmlApplicationViewer.
    • Replace the parameter for QmlApplicationViewer constructor from QWidget to QWindow.
  5. Make the following changes to qmlapplicationviewer/qmlapplicationviewer.cpp:
    • Replace all the QtCore and QtDeclarative include statements with these:
      #include <QCoreApplication>
      #include <QDir>
      #include <QFileInfo>
      #include <QQmlComponent>
      #include <QQmlEngine>
      #include <QQmlContext>
      #include <QDebug>
    • Replace all instances of QWidget with QWindow, and QDeclarativeView with QQuickView.
    • Remove the code between #if defined(Q_OS_SYMBIAN) and #endif macros as Symbian platform is not supported in Qt 5.
    • Remove the code between #if QT_VERSION < 0x040702 and #else, and #endif // QT_VERSION < 0x040702 macros towards the end.
  6. Save changes to the project and run the application.

Once you see the application running, check whether it behaves as expected. Here is a snapshot of the application running on Ubuntu v12.04:

Porting QML Applications to Qt 5