[solved]Appearance difference

qmlLearner

Possibly another beginner question:
When I build the qml example 'gallery' on a windows machine, it looks like this:
!http://blog.qt.digia.com/wp-content/uploads/2012/08/native-text-widgets.png(image original look)!
The look is the typical Windows look for me.
However, if I create a own applicationwindow with menus and tabs (using the QQmlApplicationEngine and QtQuick.Controls) , the style looks quite different...somewhat similar to:
!http://www.ics.com/sites/default/files/snapshot2.png(image other look)!
I wasn't able to figure out, why there is this style difference. I there something where you can specify it?
Thank you very much!

Jens

Yes. The main difference is that the QStyle used for native look and feel requires linking against and using the widget library. If you replace QGuiApplication with QApplication you will get the same appearance as with qmlscene.

qmlLearner

Great, thank you for the explanation!
Unfortunately, I haven't managed to change the look with your advice. I did the following:
*main.cpp:
@
//#include <QtGui/QGuiApplication> // commented
#include <QApplication> // added

#include <QQmlApplicationEngine>
#include <QQuickWindow>

#include <QtQml>
// #include <cppadder.h>

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

// qmlRegisterType<CppAdder>("CppAdder",1,0,"CppAdder");

QQmlApplicationEngine engine;
engine.load(QUrl("qml/tab01/main.qml"));
QObject *topLevel = engine.rootObjects().value(0);
QQuickWindow *window = qobject_cast<QQuickWindow *>(topLevel);
window->show();
return app.exec&#40;&#41;;

}
@

tab01.pro:
@

Add more folders to ship with the application, here

folder_01.source = qml/tab01
folder_01.target = qml
DEPLOYMENTFOLDERS = folder_01

Additional import path used to resolve QML modules in Creator's code model

QML_IMPORT_PATH =

The .cpp file which was generated for your project. Feel free to hack it.

SOURCES += main.cpp

Installation path

target.path =

Please do not modify the following two lines. Required for deployment.

include(qtquick2applicationviewer/qtquick2applicationviewer.pri)
qtcAddDeployment()

OTHER_FILES +=
qml/tab01/MyButton.qml

added for #include <QApplication>

QT +=widgets
@

These modifications apparently weren't enough. What else do I need to change?
Thank you very much for your help!

PS: Would you recommend to stick to the QtGuiApplication? Is it lighter in the end?

Jens

You also need to change line 12 in main.cpp ( QGuiApplication to QApplication ). Unless you are developing for a constrained mobile platform, I don't think you need to be concerned about the resource usage of depending on widgets in your app.

qmlLearner

Hi Jens, thank you for your quick reply. I tried your suggestion and it looks closer now, but it is not identical yet.

Look of the qt quick controls - basic layouts example:

!http://www.freeimagehosting.net/newuploads/6b95n.png(basic layouts from example)!

and this is the look I get with the code below:
!http://www.freeimagehosting.net/newuploads/oxell.png(basic layouts own build)!

The code to create the second look above is more or less copied from the example on the top:
main.cpp
@

#include <QtQml>
#include <QtQuick/QQuickView>
//#include <QtCore/QString>

#ifdef QT_WIDGETS_LIB
#include <QtWidgets/QApplication>
#else
#include <QtGui/QGuiApplication>
#endif

QT_BEGIN_NAMESPACE

#ifdef QT_WIDGETS_LIB
#define Application QApplication
#else
#define Application QGuiApplication
#endif

#define QT_QUICK_CONTROLS_EXAMPLE_MAIN(url)
int main(int argc, char *argv[])
{
Application app(argc, argv);
QQmlApplicationEngine engine;
engine.load(QUrl("qml/tab02/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();
}

QT_END_NAMESPACE
@

main.qml:
@
import QtQuick 2.1
import QtQuick.Controls 1.1
import QtQuick.Layouts 1.0

ApplicationWindow {
title: "Basic layouts"
property int margin: 11
width: mainLayout.implicitWidth + 2 * margin
height: mainLayout.implicitHeight + 2 * margin
minimumWidth: mainLayout.Layout.minimumWidth + 2 * margin
minimumHeight: mainLayout.Layout.minimumHeight + 2 * margin

ColumnLayout {
    id: mainLayout
    anchors.fill: parent
    anchors.margins: margin
    GroupBox {
        id: rowBox
        title: "Row layout"
        Layout.fillWidth: true

        RowLayout {
            id: rowLayout
            anchors.fill: parent
            TextField {
                placeholderText: "This wants to grow horizontally"
                Layout.fillWidth: true
            }
            Button {
                text: "Button"
            }
        }
    }

    GroupBox {
        id: gridBox
        title: "Grid layout"
        Layout.fillWidth: true

        GridLayout {
            id: gridLayout
            rows: 3
            flow: GridLayout.TopToBottom
            anchors.fill: parent

            Label { text: "Line 1" }
            Label { text: "Line 2" }
            Label { text: "Line 3" }

            TextField { }
            TextField { }
            TextField { }

            TextArea {
                text: "This widget spans over three rows in the GridLayout.\n"
                    + "All items in the GridLayout are implicitly positioned from top to bottom."
                Layout.rowSpan: 3
                Layout.fillHeight: true
                Layout.fillWidth: true
            }
        }
    }
    TextArea {
        id: t3
        text: "This fills the whole cell"
        Layout.minimumHeight: 30
        Layout.fillHeight: true
        Layout.fillWidth: true
    }
}

}
@

tab02.pro:
@
QT += widgets

Add more folders to ship with the application, here

folder_01.source = qml/tab02
folder_01.target = qml
DEPLOYMENTFOLDERS = folder_01

Additional import path used to resolve QML modules in Creator's code model

QML_IMPORT_PATH =

The .cpp file which was generated for your project. Feel free to hack it.

SOURCES += main.cpp

Installation path

target.path =

Please do not modify the following two lines. Required for deployment.

include(qtquick2applicationviewer/qtquick2applicationviewer.pri)
qtcAddDeployment()
@

Do you have an idea why there is still this difference in the look? Sorry for the huge post :)

Jens

I am a bit puzzeled as that should really just work. I presume this is copied from the included qt quick examples. Does the same apply when you compile the gallery directly from there?

Perhaps you simply need to re-run qmake or qmake -r in order for the project to be updated properly.

qmlLearner

Weird, I did it once again from scratch...and now it works! Nice, thank you!
However, I recognized a funny behavior: If I now use the QApplication look and set a 'TabViewStyle' inside a TabView, the look automatically reverts back to the QGuiApplication look. Is that intended? Or is it not possible to specify any styles in QApplication?

Looking forward to you answer!

btw: awesome forum and help!!!

Jens

That is intended. Custom styles are all based on the same cross platform look to keep things a bit predictable. We are considering adding some style hints to allow customisation of platform styles but for the moment you cannot tweak the native styles a lot.

qmlLearner

Alright, so I will probably stick to the cross platform look!
Thank you very much for answering all my questions!