Full-screen desktop application with QML

Question

I have experience with developing rich user interface application with flex and AS3. However the issue is its very hard to use existing c++ business logic with these flex apps. With the advent of QML, I am curious whether its possible to reuse the c++ business logic with QT for rich UI apps.

I want to know whether its possible to develop full screen rich user interface applications(which are becoming more and more common especially in mobile devices) for the desktop. For example(http://blog.flexexamples.com/2007/08/07/creating-full-screen-flex-applications/) Adobe has the Flash Player which can be used in full screen mode and runs content written in AS3. Is it possible to write similar applications using QT/QML?

Answer 1

There is also a QML-only way to go fullscreen. You can use this if you are not using QDeclarativeView but QQmlApplicationEngine, since the latter doesn't inherits QWidget and has not the method showFullScreen().

import QtQuick 2.2
import QtQuick.Controls 1.1

ApplicationWindow {
    id: window
    visible: true
    visibility: "FullScreen"
    width: 640
    height: 480

    Button {
        text: "exit fullscreen"
        onClicked: window.visibility = "Windowed"
    }
}

But it's important to use ApplicationWindow as the root-element and not Rectangle. For ApplicationWindow you have to import QtQuick.Controls.

Answer 2

If you would like to use business logic written on C++ and some QML user interface you can use QDeclarativeView inside your application. It's just a regular Qt widget so it has method showFullScreen(). Actually this class is like "qmlviewer inside your application".

So you'll get something like this:

#include <QtGui/QApplication>
#include <QtDeclarative/QDeclarativeView>
#include <QtCore/QUrl>

int main(int _argc, char * _argv[])
{
    QApplication app(_argc, _argv);

    QDeclarativeView view;
    view.setSource(QUrl("qrc:/MyGui.qml"));    // if your QML files are inside 
                                               // application resources

    view.showFullScreen();    // here we show our view in fullscreen

    return app.exec();
}

You can find more information here.

Answer 3

Here is yet another variation from previous answers, but this uses the (default Qt Quick Application - Empty) Window QML type and a Qt enum:

import QtQuick 2.6
import QtQuick.Window 2.2

Window {
    id: mainWindow
    objectName: "mainWindow"
    visible: true
    flags: Qt.FramelessWindowHint | Qt.Window
    color: "black"
    visibility: Qt.WindowFullScreen // << the solution
}

Answer 4

When using QQmlApplicationEngine in c++ you can do something like this in QML:

main.cpp

#include <QApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>

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

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

    return app.exec();
}

main.qml

import QtQuick 2.7
import QtQuick.Window 2.2

Window {
    id: mainWindow

    Component.onCompleted: {
        mainWindow.showFullScreen();
    }
}

Tested with QT5.8

Answer 5

Qt has qmlviewer.

To run it in fullscreen:

$ qmlviewer -fullscreen -frameless file.qml

Also there is a tutorial of creating fullscreen applications with QML. And components for desktop widgets.