Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Separating Design from UI Elements

    QML and Qt Quick
    9
    16
    6932
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • K
      kyleplattner last edited by

      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

      1 Reply Last reply Reply Quote 0
      • D
        DenisKormalev last edited by

        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.

        1 Reply Last reply Reply Quote 0
        • K
          kyleplattner last edited by

          There is no CSS like file yet?

          1 Reply Last reply Reply Quote 0
          • K
            kyleplattner last edited by

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

            1 Reply Last reply Reply Quote 0
            • 2
              2beers last edited by

              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.

              1 Reply Last reply Reply Quote 0
              • A
                andre last edited by

                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.

                1 Reply Last reply Reply Quote 0
                • 2
                  2beers last edited by

                  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

                  1 Reply Last reply Reply Quote 0
                  • G
                    gustavo last edited by

                    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.

                    1 Reply Last reply Reply Quote 0
                    • M
                      mbrasser last edited by

                      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.

                      1 Reply Last reply Reply Quote 0
                      • F
                        Fuzzbender last edited by

                        Excellent starting point, mbrasser!

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

                        1 Reply Last reply Reply Quote 0
                        • M
                          mbrasser last edited by

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

                          Thanks, fixed now.

                          Michael

                          1 Reply Last reply Reply Quote 0
                          • S
                            skolibri last edited by

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

                            1 Reply Last reply Reply Quote 0
                            • M
                              mbrasser last edited by

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

                              Also fixed now, thanks!

                              Michael

                              1 Reply Last reply Reply Quote 0
                              • P
                                phewat last edited by

                                [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?

                                1 Reply Last reply Reply Quote 0
                                • M
                                  mbrasser last edited by

                                  [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

                                  1 Reply Last reply Reply Quote 0
                                  • S
                                    skolibri last edited by

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

                                    1 Reply Last reply Reply Quote 0
                                    • First post
                                      Last post