Port Qt and QML to qt5 and qt quick 2.1

Question

Recently my leader assign me one Qt and qml port work. Our old project is work on Qt 4.8 and using Qt quick 1.0. At Qt4 QML natively does not provide any default GUI controls to be utilized in interface creation for any operating system it supports. To save on creating owner-drawn controls, we chose to use Qt Components for Desktop project as base for all our GUI to create OS-standard (and depended) look and feel on Qt4.8. Qt Components are renamed to Qt Quick Controls and are developed for Qt5.x. The Qt Components provide the menu , toolbar, button. So I remove the Qt Components because Qt5.x have the ApplicationWindow.

main.qml file:

import QtQuick.Controls 1.0

ApplicationWindow {
    title: "My Application"

    Button {
        text: "Push Me"
        anchors.centerIn: parent
    }
}

Main.cpp file:

#include <QApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    QQmlApplicationEngine engine("main.qml");
    QObject *topLevel = engine.rootObjects().value(0);
    QQuickWindow *window = qobject_cast<QQuickWindow *>(topLevel);
    if ( !window ) {
        qWarning("Error: Your root item has to be a Window.");
        return -1;
    }
    window->show();
    return app.exec();
}

But in our old project, in the main function, we have one MainWindow which implements main window, locates main.qml and creates QDeclarativeView with main.qml as source.

#include <QApplication>
#include <QQmlApplicationEngine>

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

    MainWindow w;
    w.show();
    ……
}

In the constructor of MainWindow:

#include <QApplication>
#include <QQmlApplicationEngine>

MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
{
    ……
    DeclarativeView* pView = new DeclarativeView;
    setCentralWidget(pView);
    ……
}

The Declarativeview implements DeclarativeView class which inherits QDeclarativeView and keeps pointer to its parent QWidget. MainWindow can modify the menu dynamically. When click one menu item, one dialog will be created, the dialog is defined by qml file or Qt ui file.

Now I have finished all the Qml file poring work, replace the Qt Components with QtQuick.Controls 1.0. But I don’t know how I use QQmlApplicationEngine to load my file and modify the menu dynamically, load you qt ui class widget, use QQuickWindow to load new qml file to open the new window.

I think we needn't use the widget in the my new project. Could you give me some help? Thank you all very much.

Simon Warta Simon Warta · Accepted Answer · 2013-12-04T21:37:23

In a typical QtQuick application you do not have any QWidget functionality available. This means QMainWindow, QMenuBar or QMenu can not be used, since they inherit QWidget.

The way to go is to append a QML menu in the ApplicationWindow:

import QtQuick 2.1
import QtQuick.Controls 1.0

ApplicationWindow {
    title: "My Application"
    menuBar: MenuBar {
        Menu {
            id: menuA
            title: "Menu A"

            MenuItem {
                text: "Hello 1"
            }
            MenuItem {
                text: "Hello 2"
            }
        }
        Menu {
            title: "Menu B"

            MenuItem {
                text: "Hello 3"
            }
            MenuItem {
                text: "Hello 4"
            }
        }

        Component.onCompleted: {
            var newMenuItem = menuA.addItem("bla")
        }
    }
}

This example shows a way to dynamically add a MenuItem using Javascript in QML. I just didn't figure out how to set any functionality for the new menu entry, but I think this can be done using the action property of MenuItem.

Port Qt and QML to qt5 and qt quick 2.1

1 Answers