Styling Qml desktop components

boomboom2013

Currently I'm working on a desktop application that supports touchscreen display. I use QML on Qt 4.8 and OpenSUSE 13.1 (I can't upgrade either Qt or the OS due to dependencies reason)

Because of the lack of main components, I use "qml desktop component":https://qt.gitorious.org/qt-components/desktop/source/b96e92a936b3fba8622bc721861ec7cbfd3fdb02:. However, I don't find a way to style those conveniently, like use CSS. Something like change the color of the button, change the border... seem complicated

I've read "Qml styling guide":https://qt-project.org/wiki/QmlStyling, "Qml integrating guide":http://qt-project.org/doc/qt-4.8/qml-integration.html but can't find a satisfied answer.

Any ideas are appreciated :)

JKSH

Hi,

If you need to stick to Qt 4.8, then your only options are listed in the "Styling in QML":https://qt-project.org/wiki/QmlStyling article that you've already found.

QML Desktop Components have been renamed to Qt Quick Controls in Qt 5. If you ever get the chance to upgrade, have a look at "Qt Quick Controls Styles":http://qt-project.org/doc/qt-5/qtquickcontrolsstyles-index.html

Good luck!

boomboom2013

I think create a customRectangle.qml from Rectangle is easy, but a customButton.qml from Button is quite complicated, like just change the button color is quite a problem.

I need instructions, even it's workaround :(

[quote author="JKSH" date="1412091591"]Hi,

If you need to stick to Qt 4.8, then your only options are listed in the "Styling in QML":https://qt-project.org/wiki/QmlStyling article that you've already found.

QML Desktop Components have been renamed to Qt Quick Controls in Qt 5. If you ever get the chance to upgrade, have a look at "Qt Quick Controls Styles":http://qt-project.org/doc/qt-5/qtquickcontrolsstyles-index.html

Good luck![/quote]

JKSH

[quote author="boomboom2013" date="1412094722"]I think create a customRectangle.qml from Rectangle is easy, but a customButton.qml from Button is quite complicated, like just change the button color is quite a problem.[/quote]Perhaps you can create a CustomButton by inheriting Rectangle instead of Button.

http://qt-project.org/doc/qt-4.8/gettingstartedqml.html

boomboom2013

You're right, I tried to draw a button by inheriting Rectangle and it was easy to style it. However, my team use qml desktop component, button is just a small case :(

I tried to modify the plugin like this: "qstyleitem.cpp" . I think I can set the style from there but don't know how :p

@ case Button: {
if (!m_styleoption)
m_styleoption = new QStyleOptionButton();

    QStyleOptionButton *opt = qstyleoption_cast<QStyleOptionButton*>(m_styleoption);
    opt->text = text();
    opt->features = (activeControl() == "default") ?
                QStyleOptionButton::DefaultButton :
                QStyleOptionButton::None;
}
    break;@

Another way is "convert" QML to a widget and apply a style for it. But I don't know how to implement it :p

Do you have any comments, ideas ...?

JKSH

Keep in mind that Qt Desktop Components was an experimental module, and it was not properly polished and released until Qt 5.1. In Qt 4.8, it was missing many important features. Are you sure it's a good idea to use it in a large project?

I can't think of a simple way to style QML components in Qt 4.8, sorry. The simplest ones are listed at https://qt-project.org/wiki/QmlStyling

But here's another idea: Use Qt Widgets for the desktop-style components instead of QML. Embed QML components into your widgets using QDeclarativeView.