Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Stylesheets and QML - widget application being changed to QML, what is the best way to reuse stylesheets?
Forum Updated to NodeBB v4.3 + New Features

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

Scheduled Pinned Locked Moved QML and Qt Quick
18 Posts 6 Posters 11.6k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • D Offline
    D Offline
    Dolphin
    wrote on last edited by
    #1

    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?

    1 Reply Last reply
    0
    • S Offline
      S Offline
      steno
      wrote on last edited by
      #2

      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.

      1 Reply Last reply
      0
      • D Offline
        D Offline
        Dolphin
        wrote on last edited by
        #3

        Great thanks - any pointers where to dig??

        1 Reply Last reply
        0
        • J Offline
          J Offline
          Jens
          wrote on last edited by
          #4

          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.

          1 Reply Last reply
          0
          • D Offline
            D Offline
            Dolphin
            wrote on last edited by
            #5

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

            1 Reply Last reply
            0
            • J Offline
              J Offline
              Jens
              wrote on last edited by
              #6

              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.

              1 Reply Last reply
              0
              • H Offline
                H Offline
                Hostel
                wrote on last edited by
                #7

                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?

                1 Reply Last reply
                0
                • E Offline
                  E Offline
                  eliseev
                  wrote on last edited by
                  #8

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

                  1 Reply Last reply
                  0
                  • D Offline
                    D Offline
                    Dolphin
                    wrote on last edited by
                    #9

                    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
                    @

                    1 Reply Last reply
                    0
                    • D Offline
                      D Offline
                      Dolphin
                      wrote on last edited by
                      #10

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

                      @

                      1 Reply Last reply
                      0
                      • D Offline
                        D Offline
                        Dolphin
                        wrote on last edited by
                        #11

                        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
                        @

                        1 Reply Last reply
                        0
                        • D Offline
                          D Offline
                          Dolphin
                          wrote on last edited by
                          #12

                          Both - mobile and flexibility

                          1 Reply Last reply
                          0
                          • H Offline
                            H Offline
                            Hostel
                            wrote on last edited by
                            #13

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

                            1 Reply Last reply
                            0
                            • D Offline
                              D Offline
                              Dolphin
                              wrote on last edited by
                              #14

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

                              1 Reply Last reply
                              0
                              • S Offline
                                S Offline
                                steno
                                wrote on last edited by
                                #15

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

                                1 Reply Last reply
                                0
                                • J Offline
                                  J Offline
                                  Jens
                                  wrote on last edited by
                                  #16

                                  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.

                                  1 Reply Last reply
                                  0
                                  • S Offline
                                    S Offline
                                    steno
                                    wrote on last edited by
                                    #17

                                    Thanks

                                    1 Reply Last reply
                                    0
                                    • S Offline
                                      S Offline
                                      samdbgt
                                      wrote on last edited by
                                      #18

                                      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

                                      1 Reply Last reply
                                      0

                                      • Login

                                      • Login or register to search.
                                      • First post
                                        Last post
                                      0
                                      • Categories
                                      • Recent
                                      • Tags
                                      • Popular
                                      • Users
                                      • Groups
                                      • Search
                                      • Get Qt Extensions
                                      • Unsolved