Stylesheets and QML - widget application being changed to QML, what is the best way to reuse stylesheets?

Dolphin

I am updating a widget application to have a QML front end. From the discussions I have looked at it seems it is not practice to use stylesheets with QML? Am I getting that right (some of the discussions are a little out of date). If I can reuse the stylesheets what is the best way or if I cannot reuse them what direction should I go?

steno

In the near future, when QtDesktop components come out for QML you will be able to use your stylesheets. As for now, I don't think it's really possible too. Not 100% sure on this though.

Dolphin

Great thanks - any pointers where to dig??

Jens

Sorry but I am afraid I have to disappoint you both. We are not planning to support widget style sheets in Qt Quick (even with desktop components due to its heavy use of widgets). There is a different styling mechanism under development though.

If you already have a custom look and feel on your application, using pure Qt Quick should already be feasible. But In 5.1 it should be a bit simpler to create custom styled sliders, buttons etc.

Dolphin

Thanks for the feedback - guess my option is putting the styling with the QML??

Jens

For now it is. Btw, what is the primary reason you are moving an existing application to Qt Quick? Are you going mobile or requiring more flexibility in your layouts? I am just curious to see what kind of use cases people have in mind.

Hostel

Dolphin can you write links to articles where I could read about making Qt C++ application with gui in Qt Quick/QML? Maybe you known about example code?

eliseev

[quote author="Hostel" date="1358898031"]Dolphin can you write links to articles where I could read about making Qt C++ application with gui in Qt Quick/QML? Maybe you known about example code?[/quote]

What's wrong with http://qt-project.org/doc/qt-5.0/qtdoc/gettingstartedqml.html et al.?

If you have any specific issues [that can't be solved by reading docs of googling], create new threads.

[quote author="Jens" date="1358864467"]In 5.1 it should be a bit simpler to create custom styled sliders, buttons etc.[/quote]
That's very valuable information, thank you Jens! Styling now is really a problem when using Desktop Components.

Dolphin

This is the test app I have been playing with (full app far to big for this site) - will give you a menu "Item 1", "Item 2" etc (even though there is a colour value it is not used).

main.cpp
@
#include <QtGui/QGuiApplication>
#include "qtquick2applicationviewer.h"
#include <QQmlContext>
//#include <QDeclarativeContext>
#include "menu.h"

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

QtQuick2ApplicationViewer  viewer;

CMenu menu(&viewer);

viewer.rootContext()->setContextProperty("myMenu", &menu);

//QtQuick2ApplicationViewer viewer;
viewer.setMainQmlFile&#40;QStringLiteral("qml/GuideNext/main.qml"&#41;);

QList<QObject*> dataList;
   dataList.append(new DataObject("Item 1", "red"));
   dataList.append(new DataObject("Item 2", "green"));
   dataList.append(new DataObject("Item 3", "blue"));
   dataList.append(new DataObject("Item 4", "yellow"));

viewer.rootContext()->setContextProperty("myModel", QVariant::fromValue(dataList));
viewer.showExpanded();

return app.exec();

}
@

menu.h
@
#ifndef MENU_H
#define MENU_H

#include <QObject>
#include <QString>

class DataObject : public QObject
{
Q_OBJECT

Q_PROPERTY(QString name READ name WRITE setName /*NOTIFY nameChanged*/)
Q_PROPERTY(QString color READ color WRITE setColor /*NOTIFY colorChanged*/)

public:
DataObject(QString name, QString color);
QString name();
void setName(QString name);
QString color();
void setColor(QString color);

QString m_color, m_name;

};

class CMenu : public QObject
{
Q_OBJECT
public:

CMenu(QObject *parent = 0);
Q_PROPERTY(QString m_text READ getText)

Q_INVOKABLE QString getText();
//Q_INVOKABLE QStandardModel* getModel();

private:
QString m_text;
};

#endif // MENU_H
@

Dolphin

2nd half.......

menu.cpp
@
#include "menu.h"

CMenu::CMenu(QObject *parent) : QObject (parent)
{
m_text = "blah";
}

QString CMenu::getText()
{
return "blah";

}

DataObject::DataObject(QString name, QString color)
{
m_name = name;
m_color = color;
}

QString DataObject::name()
{
return m_name;
}

void DataObject::setName(QString name)
{
m_name = name;
}

QString DataObject::color()
{
return m_color;
}

void DataObject::setColor(QString color)
{
m_color = color;
}

@

Dolphin

main.qml
@
import QtQuick 2.0

Rectangle
{
id: guide
width: 800
height: 600

property double scaleFactor: 1.0
property string iconUrl: "Default.png"


Rectangle
{
    id: promptsContainer
    width: parent.width
    height: 100
    color: "#2A51A3"
    anchors.top: parent.top

    Text
    {
        id: prompts
        text: myMenu.getText()
        anchors.centerIn: parent
        color: "white"
        font.pointSize: 22
    }
}

Image
{
    id: icon
    //source: "Default.png"
    width: 256; height: 256
    anchors.bottom: guide.bottom
    anchors.right: guide.right
}

Component
{
        id: menuEntryDelegate
        Rectangle
        {
            id: wrapper
            width: menuHolder.width
            height: 50
            //color: ListView.isCurrentItem ? "#FAFCD9" : "black"
            state: ListView.isCurrentItem ? "selected" : "notselected"

            Text
            {
                id: menuEntry
                anchors.verticalCenter: parent.verticalCenter
                font.pointSize: 20
                text: " " + (index + 1)  + "\t" + name //title
                //color: wrapper.ListView.isCurrentItem ? "black" : "white"
            }

            MouseArea {
                //z: 1
                hoverEnabled: false
                anchors.fill: parent
                onClicked: menuHolder.currentIndex = index
            }

            states: [
                State {
                    name: "selected"
                    PropertyChanges {
                        target: wrapper
                        color: "#FAFCD9"
                    }
                    PropertyChanges {
                        target: icon
                        source: iconUrl
                    }
                    PropertyChanges {
                        target: prompts
                        text: "Press " + (index+1) + " to " + details
                    }
                    PropertyChanges {
                        target: menuEntry
                        color: "black"
                    }
                },

                State {
                    name: "notselected"
                    PropertyChanges {
                        target: wrapper
                        color: "black"
                    }
                    PropertyChanges {
                        target: menuEntry
                        color: "white"
                    }
                }
            ]

        }
    }

Rectangle {

    width: 400; height: (50 * 9)
    anchors.centerIn: parent
    id: menuContainer

    ListView {
    model: myModel
       anchors.fill: parent
       id: menuHolder
       //ListView.currentIndex: 2

        header: Rectangle {
            width: menuHolder.width
            height: 50
            color: "#2A51A3"

            Text {
               id: header
               anchors.centerIn: parent
               text: qsTr("Main Menu")
               font.pointSize: 20
               color: "white"
            }


        }


        //model: MenuModel {}
        //model: myModel {}
        delegate: menuEntryDelegate
        focus: true

        add: Transition {
                NumberAnimation { properties: "x,y" }
            }

        Keys.onPressed: {
            if(event.key === Qt.Key_F2) {
                scaleFactor += 0.1
                menuContainer.scale = scaleFactor
                promptsContainer.scale = scaleFactor
                promptsContainer.z = 1
            } else if(event.key === Qt.Key_F1) {
                scaleFactor -= 0.1
                menuContainer.scale = scaleFactor
                promptsContainer.scale = scaleFactor
                promptsContainer.z = 1
            } else if(event.key === Qt.Key_Right) {
                menuContainer.x +=10
            } else if(event.key === Qt.Key_Left) {
                menuContainer.x -=10
            } else if(event.key === Qt.Key_F5) {
                menuModel.reload()
            } else if(event.key >= Qt.Key_1 && event.key <= Qt.Key_8) {
                menuHolder.currentIndex = event.key - Qt.Key_1
            }

            /*else if(event.key === Qt.Key_Up) {
                y +=10
            } else if(event.key === Qt.Key_Down) {
                y -=10
            }*/

            //menuEntryDelegate.updateIcon()
        }
    }
}

MouseArea
{
    anchors.fill: parent
    onClicked: {
        Qt.quit();
    }
}

}
@

pro file
@

Add more folders to ship with the application, here

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

QT += quick qml core

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

QML_IMPORT_PATH =

SOURCES += main.cpp menu.cpp

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

include(qtquick2applicationviewer/qtquick2applicationviewer.pri)
qtcAddDeployment()

HEADERS += menu.h
@

Dolphin

Both - mobile and flexibility

Hostel

Dolphin - thank you! I will study this code in near future :)

Dolphin

So, if my option is to style in the QML what is my best bet for custom styling? The app is very simple but needs to allow the user to change colour/font/font style/font size and retain those settings. With widgets I was starting with a stylesheet and updating it with a custom block of css added to the bottom of the file so there was no need to write code to create a new file just have the existing one but let the code at the bottom overwrite what came before. So if the stylesheet said background should be white but user wanted it to be blue 'original stylesheet+set background to blue' would be loaded.

The 'zoom' setting also needs to be retained PER SCREEN. It is such a simple application for non technical elderly/visually impaired users that 'zoom' is really just the font size but they need to have the 'zoom' setting per screen - again, in the widget version it was just reloading the stylesheet and applying an font size change each time a new screen was display so minimal data to retain.

PS I am using the word screen to cover the case of a menu change (which is really someone clicking on a Listview causing the data on the Listview to be updated (click on "Letters and documents" and the Lisview is updated to give options "Write a letter", "Find a document" etc) but at the same time the 'zoom' setting is updated for that 'menu page' (i.e. set of Listview data)...... and also the case that the user has gone into a new application (they might want email to be big and letter writing to be small based on the layout of the screen or whatever other preference might apply to them).

steno

[quote author="Jens" date="1358864467"] But In 5.1 it should be a bit simpler to create custom styled sliders, buttons etc.[/quote]

Are there any examples of this in the Qt 5.1.0 rc?

Jens

The docs are available here:
http://doc-snapshot.qt-project.org/qt5-stable/qtquickcontrolsstyles/qtquickcontrolsstyles-index.html

There are also some styling examples in both the gallery and touch example that ships with 5.1 RC, and expect more examples or guides in the future.

steno

Thanks

samdbgt

I am glad that lots of informative stuff is shared here! I am a beginner and in web development and I have some doubts regarding them! Can you suggest the best ways to change the visual layouts? In addition please tell me how style sheets operation change in two mark ups?
http://www.outlookrepairhelp.com