October 25, 2010

kyleplattner kyleplattner
Lab Rat
242 posts

Separating Design from UI Elements

 

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

15 replies

October 25, 2010

Denis Kormalev Denis Kormalev
Lab Rat
1654 posts

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.

October 25, 2010

kyleplattner kyleplattner
Lab Rat
242 posts

There is no CSS like file yet?

October 25, 2010

kyleplattner kyleplattner
Lab Rat
242 posts

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

October 26, 2010

2beers 2beers
Lab Rat
149 posts

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.

October 26, 2010

Andre Andre
Robot Herder
6419 posts

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.

October 26, 2010

2beers 2beers
Lab Rat
149 posts

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

  1. QMLPushButton{
  2. class: redClass
  3. }

and

  1. QMLPushButton{
  2. class: blueClass
  3. }

and then define the classes separate from the Components

October 26, 2010

Gustavo H Montesião de Sousa Gustavo H Montesião de Sousa
Lab Rat
28 posts

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.

October 27, 2010

mbrasser mbrasser
Lab Rat
452 posts

I’ve added a (very basic) QML Styling [developer.qt.nokia.com] wiki page with some of the common approaches to styling in QML, if you are interested in having a look.

October 28, 2010

Fuzzbender Fuzzbender
Lab Rat
71 posts

Excellent starting point, mbrasser!

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

October 29, 2010

mbrasser mbrasser
Lab Rat
452 posts
Fuzzbender wrote:
Minor nag: last example has a typo on line 19 (syle vs. style). :)

Thanks, fixed now.

Michael

October 29, 2010

skolibri skolibri
Lab Rat
4 posts

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

November 1, 2010

mbrasser mbrasser
Lab Rat
452 posts
skolibri wrote:
Another small typo: Approach 3 instead of Approach 2 ;)

Also fixed now, thanks!

Michael

January 13, 2011

Peter Hewat Peter Hewat
Lab Rat
4 posts
mbrasser wrote:
I’ve added a (very basic) QML Styling [developer.qt.nokia.com] wiki page with some of the common approaches to styling in QML, if you are interested in having a look.

Hi Michael,

Thank you for your wiki entry on styling.

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

January 14, 2011

mbrasser mbrasser
Lab Rat
452 posts
y4h0oo wrote:
Is there a way to dynamicly change styling with this methode?

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

Michael

January 17, 2011

skolibri skolibri
Lab Rat
4 posts
mbrasser wrote:
y4h0oo wrote:
Is there a way to dynamicly change styling with this methode?
Yes, to some extent. If you use approach (2) or (3), changing the properties of the style object should effectively change the style. Michael

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:

  1. Rectangle {
  2.         id: rect
  3.  
  4.         property alias buttonColor: rect.color
  5.         property alias buttonLabel: label.text
  6.         property alias buttonWidth: rect.width
  7.         property alias buttonHeight: rect.height
  8.         property alias buttonRadius: rect.radius
  9.  
  10.         color: "grey"
  11.  
  12.         Text {
  13.             id: label
  14.             anchors.centerIn: parent
  15.         }

and you have in ../styles/blue/Button.qml

  1. import "../../components"
  2.  
  3. Button {
  4.     buttonColor: "blue"
  5.     buttonRadius: 5
  6. }

in use:

  1. import "current"
  2.  
  3. Rectangle {
  4.     width: 320
  5.     height: 120
  6.  
  7.     Button {
  8.         id: button1
  9.  
  10.         buttonWidth: 140
  11.         buttonHeight: 48
  12.         buttonLabel: "Button1"
  13.     }

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

 
  ‹‹ [Solved] QML Video on the desktop      qmake, how to manage QML install files? ››

You must log in to post a reply. Not a member yet? Register here!