Separating Design from UI Elements

kyleplattner

How can I create an architecture similar to that of CSS where I can skin my application fairly easily and change the look/feel with a simple global attribute file?

Thanks,

Kyle

DenisKormalev

You can create component with bunch of properties and use them in all places where you need customization. So you can change all style-aware things in one place.

kyleplattner

There is no CSS like file yet?

kyleplattner

Wouldn't that be difficult to set up menu-wise?

2beers

I'm not sure there is a need for a css concept. Like Denis said , you create the components in separate files, and if you want to change the look and feel you just change that file.
For example you have a file Button.qml and then in you application you create Button {} components. If you want to change the look of the button you just change the Button.qml file.

andre

According to the Components talk on the dev days, this is a work in progress. It will probably not take the shape of using CSS, but of a set of modifyable components that keep their API but allow you to change the appearance.

For me, that is unfortunate really. While the QML way to do things seems quite powerful, it is yet another way of styling to learn. I thought the style sheet approach that has been introduced into Qt is quite powerful, though still a bit incomplete here and there. I think a CSS for QML would be very nice, and would fit the declarative aproach quite well. However, I do see the difficulties associated with it.

2beers

On a second thinking I think it will be a great idea, specially when Qt components will be introduced. because you will probably have a QMLPushButton and you will need something like this

@QMLPushButton{
class: redClass
}@

and

@QMLPushButton{
class: blueClass
}@

and then define the classes separate from the Components

gustavo

I think an idea that would be interesting for QML is the approach used by EFL (from Enlightenment) with its Edje library (the first declarative language for design of applications' interface I've known). They have a program (edje_cc) that takes an interface file written in Edje and all image files referenced by it, and generates a single binary file (a .edj file) that you can distribute independently of the application itself, import in your application, and of course change from one .edj file to another, easily changing your application's appearance.

With QML, on the other hand, if our application's interface is spplited among several .qml files and we want our application to be skinnable, we have to deliver every single .qml file and every single image file, and tell the application which .qml file is the main file to be loaded. So, I thing the Edje approach is better in this sense of delivering one single binary file.

mbrasser

I've added a (very basic) "QML Styling":http://developer.qt.nokia.com/wiki/QmlStyling wiki page with some of the common approaches to styling in QML, if you are interested in having a look.

Fuzzbender

Excellent starting point, mbrasser!

Minor nag: last example has a typo on line 19 (syle vs. style). :)

mbrasser

[quote author="Fuzzbender" date="1288252672"]Minor nag: last example has a typo on line 19 (syle vs. style). :)[/quote]

Thanks, fixed now.

Michael

skolibri

Thanks for that page, mbrasser!
Another small typo: Approach 3 instead of Approach 2 ;)

mbrasser

[quote author="skolibri" date="1288359094"]Another small typo: Approach 3 instead of Approach 2 ;)[/quote]

Also fixed now, thanks!

Michael

phewat

[quote author="mbrasser" date="1288139056"]I've added a (very basic) "QML Styling":http://developer.qt.nokia.com/wiki/QmlStyling wiki page with some of the common approaches to styling in QML, if you are interested in having a look.[/quote]

Hi Michael,

Thank you for your wiki entry on styling.

Is there a way to dynamicly change styling with this methode?

mbrasser

[quote author="y4h0oo" date="1294935687"]Is there a way to dynamicly change styling with this methode?[/quote]

Yes, to some extent. If you use approach (2) or (3), changing the properties of the style object should effectively change the style.

Michael

skolibri

[quote author="mbrasser" date="1294965822"][quote author="y4h0oo" date="1294935687"]Is there a way to dynamicly change styling with this methode?[/quote] Yes, to some extent. If you use approach (2) or (3), changing the properties of the style object should effectively change the style. Michael [/quote]

Yes, one could use a C++ class interface with a provided method that is called from the QML code if you want to change your style (or similar implementation in javascript).
Another approach, which i've been thinking of, is to overload your custom components in your application by changing the current path to the component location. For example,
you have in ../components/Button.qml:
@Rectangle {
id: rect

    property alias buttonColor: rect.color
    property alias buttonLabel: label.text
    property alias buttonWidth: rect.width
    property alias buttonHeight: rect.height
    property alias buttonRadius: rect.radius

    color: "grey"

    Text {
        id: label
        anchors.centerIn: parent
    }

@

and you have in ../styles/blue/Button.qml
@
import "../../components"

Button {
buttonColor: "blue"
buttonRadius: 5
}
@

in use:
@
import "current"

Rectangle {
width: 320
height: 120

Button {
    id: button1

    buttonWidth: 140
    buttonHeight: 48
    buttonLabel: "Button1"
}

@

Suppose the "current" from the import statement points somehow to the ../components. If you "bend" it to the ../style/blue you will get a styled button. However, you have to restart your application to make the changes visible...
In this way you could have several different styles of existing components defined in another location and just "point" the current import statement to the required one.
Michael, what do you think? would appriciate your opinion (and others as well, of course :))