Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Separating Design from UI Elements
QtWS25 Last Chance

Separating Design from UI Elements

Scheduled Pinned Locked Moved QML and Qt Quick
16 Posts 9 Posters 7.6k Views
  • 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 Offline
    K Offline
    kyleplattner
    wrote on last edited by
    #4

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

    1 Reply Last reply
    0
    • 2 Offline
      2 Offline
      2beers
      wrote on last edited by
      #5

      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
      0
      • A Offline
        A Offline
        andre
        wrote on last edited by
        #6

        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
        0
        • 2 Offline
          2 Offline
          2beers
          wrote on last edited by
          #7

          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
          0
          • G Offline
            G Offline
            gustavo
            wrote on last edited by
            #8

            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
            0
            • M Offline
              M Offline
              mbrasser
              wrote on last edited by
              #9

              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
              0
              • F Offline
                F Offline
                Fuzzbender
                wrote on last edited by
                #10

                Excellent starting point, mbrasser!

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

                1 Reply Last reply
                0
                • M Offline
                  M Offline
                  mbrasser
                  wrote on last edited by
                  #11

                  [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
                  0
                  • S Offline
                    S Offline
                    skolibri
                    wrote on last edited by
                    #12

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

                    1 Reply Last reply
                    0
                    • M Offline
                      M Offline
                      mbrasser
                      wrote on last edited by
                      #13

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

                      Also fixed now, thanks!

                      Michael

                      1 Reply Last reply
                      0
                      • P Offline
                        P Offline
                        phewat
                        wrote on last edited by
                        #14

                        [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
                        0
                        • M Offline
                          M Offline
                          mbrasser
                          wrote on last edited by
                          #15

                          [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
                          0
                          • S Offline
                            S Offline
                            skolibri
                            wrote on last edited by
                            #16

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

                            • Login

                            • Login or register to search.
                            • First post
                              Last post
                            0
                            • Categories
                            • Recent
                            • Tags
                            • Popular
                            • Users
                            • Groups
                            • Search
                            • Get Qt Extensions
                            • Unsolved