Separating Design from UI Elements

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