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



  • 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?



  • 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.



  • Great thanks - any pointers where to dig??



  • 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.



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



  • 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.



  • 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 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.



  • 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
    @



  • 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;
    }

    @



  • 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
    @



  • Both - mobile and flexibility



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



  • 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).



  • [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?



  • 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.



  • Thanks



  • 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


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.