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?

Namhoi

Answer 1

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.

Genera

I logged in to +1 this. I scoured the internet for an example just on how to get a QML file loaded into a Qt application for about 20 minutes until I happened to find this. Maybe I need to learn how to use Google better. Anyway, thank you so much! – Panda

Answer 2

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.

Establishmentarian

Worked well for me, but note that there is a bug which makes fullscreen QtQuick MenuBars not work correctly (at least on Windows). – Oloroso

To use the window maximized, you can use: height: Screen.height; width: Screen.width – Farley

There's also enums available, instead of those strings, Window.FullScreen, etc. In Qt 5.11 this also matches the value you read back from the property (ie, dont try to test against "Windowed" as a value, itll never happen) – Manque

Answer 3

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

Encouragement

Answer 4

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
}

Transact

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.

Irrecoverable

I need that tut actually, but it's not reachable for me. Is there a problem with the link please? – Bewley

Meego wiki looks dead. Try to find something there wiki.qt.io/QtDesktopComponents – Irrecoverable

Answer 6

hello friend i know that its late for 10 years but i hope to help some one. for set windows to be Full Screen at android and others in QML/quick you can use this Code:

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.12

ApplicationWindow {
id: root
width: Screen.width
height: Screen.height
visibility:Window.FullScreen
Component.onCompleted: {
    console.log(width+":"+height)
}
visible: true
title: qsTr("Hello World")
}

Aileenailene