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(QStringLiteral("qml/GuideNext/main.qml")); 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_OBJECTQ_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.0Rectangle
{
id: guide
width: 800
height: 600property 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_01QT += 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.htmlThere 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
