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. A basic Question

A basic Question

Scheduled Pinned Locked Moved Solved QML and Qt Quick
qmlstyesheet
30 Posts 5 Posters 11.0k 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.
  • M mrjj
    25 Sept 2017, 08:09

    Oh yes lots of those moments :)
    Aha, so if u set to a constant value it wont auto update.
    What if multiple objects are using the same binding?
    Is it then disabled for all or only for that mouse area or is it globally?

    S Offline
    S Offline
    sierdzio
    Moderators
    wrote on 25 Sept 2017, 08:29 last edited by
    #12

    @mrjj said in A basic Question:

    What if multiple objects are using the same binding?

    Each binding is used by single object. They are declared on the "receiving end", so to speak. Example:

    Item { height: someObj.height + 15 }
    Item { height: someObj.height + 15 }
    Item { height: someObj.height + someObj.height }
    

    These are 3 separate bindings. If you overwrite the height value in first Item with some constant, remaining 2 will still work and update automatically.

    (Z(:^

    M 1 Reply Last reply 25 Sept 2017, 08:39
    1
    • S sierdzio
      25 Sept 2017, 08:29

      @mrjj said in A basic Question:

      What if multiple objects are using the same binding?

      Each binding is used by single object. They are declared on the "receiving end", so to speak. Example:

      Item { height: someObj.height + 15 }
      Item { height: someObj.height + 15 }
      Item { height: someObj.height + someObj.height }
      

      These are 3 separate bindings. If you overwrite the height value in first Item with some constant, remaining 2 will still work and update automatically.

      M Offline
      M Offline
      mrjj
      Lifetime Qt Champion
      wrote on 25 Sept 2017, 08:39 last edited by
      #13

      @sierdzio
      Super. Then its all clear.
      Also the global nature of it was escaping me.
      like you can use
      MyButton {
      id: myButton
      m_connected: true
      }
      with out any extern/include/add to scope extras.

      Thank you.

      S 1 Reply Last reply 25 Sept 2017, 08:53
      0
      • M mrjj
        25 Sept 2017, 08:39

        @sierdzio
        Super. Then its all clear.
        Also the global nature of it was escaping me.
        like you can use
        MyButton {
        id: myButton
        m_connected: true
        }
        with out any extern/include/add to scope extras.

        Thank you.

        S Offline
        S Offline
        sierdzio
        Moderators
        wrote on 25 Sept 2017, 08:53 last edited by
        #14

        @mrjj said in A basic Question:

        with out any extern/include/add to scope extras.

        Yes, although there are some rules here. Only top-level properties (defined in root element of any given QML file) are visible outside of the component. Also, no IDs are accessible outside of current QML file (with a few tiny exceptions). So:

        /// Some other qml file
        MyButton {
          m_connected: true // Works fine
          mouseArea.hoverEnabled: false // Error. The ID 'mouseArea' is not visible outside of MyButton.qml file,
          // and additionally hoverEnabled is not a top-level property
        }
        

        (Z(:^

        M 1 Reply Last reply 25 Sept 2017, 08:58
        0
        • S sierdzio
          25 Sept 2017, 08:53

          @mrjj said in A basic Question:

          with out any extern/include/add to scope extras.

          Yes, although there are some rules here. Only top-level properties (defined in root element of any given QML file) are visible outside of the component. Also, no IDs are accessible outside of current QML file (with a few tiny exceptions). So:

          /// Some other qml file
          MyButton {
            m_connected: true // Works fine
            mouseArea.hoverEnabled: false // Error. The ID 'mouseArea' is not visible outside of MyButton.qml file,
            // and additionally hoverEnabled is not a top-level property
          }
          
          M Offline
          M Offline
          mrjj
          Lifetime Qt Champion
          wrote on 25 Sept 2017, 08:58 last edited by mrjj
          #15

          @sierdzio
          oh
          so only first level of scope ?
          Item {
          can_be_seen
          Item2 {
          all here is private?
          }
          }

          well maybe its good IDs are not global visible or one could make some crazy spaghetti code very easy.

          S 1 Reply Last reply 25 Sept 2017, 09:02
          0
          • M mrjj
            25 Sept 2017, 08:58

            @sierdzio
            oh
            so only first level of scope ?
            Item {
            can_be_seen
            Item2 {
            all here is private?
            }
            }

            well maybe its good IDs are not global visible or one could make some crazy spaghetti code very easy.

            S Offline
            S Offline
            sierdzio
            Moderators
            wrote on 25 Sept 2017, 09:02 last edited by
            #16

            @mrjj said in A basic Question:

            @sierdzio
            oh
            so only first level of scope ?

            Yes, only first level, unless I am mistaken ;-) Writing from memory now. And this applies to using the component somewhere else (in a different QML file). Within single file, there are no such strict visibility restrictions.

            well maybe its good IDs are not global visible or one could make some crazy spaghetti code very easy.

            Yea, it can be a bit annoying in the beginning, but enforces some rather good practices in the long run.

            (Z(:^

            E 1 Reply Last reply 25 Sept 2017, 09:38
            0
            • S sierdzio
              25 Sept 2017, 09:02

              @mrjj said in A basic Question:

              @sierdzio
              oh
              so only first level of scope ?

              Yes, only first level, unless I am mistaken ;-) Writing from memory now. And this applies to using the component somewhere else (in a different QML file). Within single file, there are no such strict visibility restrictions.

              well maybe its good IDs are not global visible or one could make some crazy spaghetti code very easy.

              Yea, it can be a bit annoying in the beginning, but enforces some rather good practices in the long run.

              E Offline
              E Offline
              Eeli K
              wrote on 25 Sept 2017, 09:38 last edited by
              #17

              @sierdzio said in A basic Question:

              well maybe its good IDs are not global visible or one could make some crazy spaghetti code very easy.

              Yea, it can be a bit annoying in the beginning, but enforces some rather good practices in the long run.

              I agree. Otherwise there's no private/public distinction in QML (and you can bypass even this visibility restriction runtime if you really want to) but I think it's reasonable to hide those inside IDs because otherwise it would encourage messy programming style with no real components. Now we at least have a possibility to have real "implementation details", some kind of data hiding. So sometimes it feels annoying but in the long run it's better.

              About the original problem, here's another possible solution. Not as nice and tidy as @sierdzio's but in some cases might it be clearer not to use nested if-elses, and if you have to change several properties based on the same conditions you would have to duplicate those conditions. Here you can just add another property to PropertyChanges.
              (changed image to rect to save some work...)

              import QtQuick 2.6
              import QtQuick.Controls 2.2
              import QtQuick.Layouts 1.1
              
              ApplicationWindow {
                  visible: true
                  width: 640
                  height: 480
              
                  ColumnLayout {
                      id: columnLayout
                      anchors.fill: parent
                      Button{onClicked: root.isConnected=!root.isConnected}
                      Item {
                          id: root
                          property bool isConnected: false
                          Layout.fillHeight: true
                          Layout.fillWidth: true
                          Rectangle {
                              id: mainImg
                              anchors.fill:parent
                              
                              states:[
                                  State{
                                      name:"conn_mouse"
                                      when:root.isConnected && mouseArea.containsMouse
                                      PropertyChanges {
                                          target:mainImg
                                          color:"red"
                                      }
                                  },
                                  State{
                                      name:"conn_no_mouse"
                                      when:root.isConnected&&!mouseArea.containsMouse
                                      PropertyChanges {
                                          target:mainImg
                                          color:"green"
                                      }
                                  },
                                  State{
                                      name:"noconn_mouse"
                                      when:!root.isConnected&&mouseArea.containsMouse
                                      PropertyChanges {
                                          target:mainImg
                                          color:"blue"
                                      }
                                  },
                                  State{
                                      name:"noconn_nomouse"
                                      when:!root.isConnected&&!mouseArea.containsMouse
                                      PropertyChanges {
                                          target:mainImg
                                          color:"yellow"
                                      }
                                  }
                              ]
                          }
              
                          MouseArea {
                              id: mouseArea
                              hoverEnabled: true
                              anchors.fill:parent
                              onClicked: console.log("clicked")
                          }
                      }
                  }
              }
              
              1 Reply Last reply
              3
              • M Offline
                M Offline
                mrjj
                Lifetime Qt Champion
                wrote on 25 Sept 2017, 09:47 last edited by
                #18

                hi
                yes it might be annoying at first. Like UI of widgets being private but
                save you from pain down the road.

                states

                Oh that is a nice class. So that would be better if m_connected state were more complex
                or more than source property we wanted to changed on the clicked etc.

                ¨Thank you for sharing.

                1 Reply Last reply
                0
                • E Offline
                  E Offline
                  Eeli K
                  wrote on 25 Sept 2017, 21:20 last edited by
                  #19

                  Just one stylistic note... Quick Controls 2 standard library qml code uses this extensively so it may be at least good to know even if you don't want to use it. It's alternative syntax for nested if-else. Modifying my own code, just set the rectangle color (or in sierzio's code the image source):

                  color: root.isConnected ? (mouseArea.containsMouse ? "red" : "green") :
                         (mouseArea.containsMouse ? "blue" : "yellow")
                  

                  This is from the Material style's Button.qml:

                  color: !control.enabled ? control.Material.hintTextColor :
                              control.flat && control.highlighted ? control.Material.accentColor :
                              control.highlighted ? control.Material.primaryHighlightedTextColor : control.Material.foreground
                  
                  1 Reply Last reply
                  1
                  • S Offline
                    S Offline
                    sierdzio
                    Moderators
                    wrote on 26 Sept 2017, 04:11 last edited by
                    #20

                    Heh, actually the first version of my snipped used the question mark notation, but I changed it to if-else because I thought it would be more readable.

                    It is definitely a good approach, and for simple cases I would recommend it - QML engine can optimize the question mark operator more heavily than if-else.

                    (Z(:^

                    1 Reply Last reply
                    1
                    • M Offline
                      M Offline
                      mrjj
                      Lifetime Qt Champion
                      wrote on 26 Sept 2017, 06:21 last edited by
                      #21

                      hi
                      oh my gosh, is that like a c++ ternary operator that can be nested ?
                      But its not super readable unless really short.

                      1 Reply Last reply
                      0
                      • G Offline
                        G Offline
                        GrecKo
                        Qt Champions 2018
                        wrote on 26 Sept 2017, 07:10 last edited by
                        #22

                        It's the same, a c++ ternary operator can be nested.

                        M 1 Reply Last reply 26 Sept 2017, 07:17
                        0
                        • G GrecKo
                          26 Sept 2017, 07:10

                          It's the same, a c++ ternary operator can be nested.

                          M Offline
                          M Offline
                          mrjj
                          Lifetime Qt Champion
                          wrote on 26 Sept 2017, 07:17 last edited by
                          #23

                          @GrecKo
                          Yep, i realized that after asking but I think i never saw one in c++
                          like
                          !m_seedsfilter ? good=true : m_seedsfilter==1 ? good=newClusters(Sp) : good=newSeed(Sp);

                          (ugly as hell)

                          1 Reply Last reply
                          0
                          • G Offline
                            G Offline
                            GrecKo
                            Qt Champions 2018
                            wrote on 26 Sept 2017, 07:22 last edited by
                            #24

                            Off-topic but it would be good = !m_seedsfilter? true : m_seedsfilter == 1 ? newClusters(Sp) : newSeed(Sp);, it's the same notation in Js and in c++

                            1 Reply Last reply
                            1
                            • M Offline
                              M Offline
                              mrjj
                              Lifetime Qt Champion
                              wrote on 26 Sept 2017, 07:27 last edited by
                              #25

                              Thanks
                              but was just live sample from
                              https://stackoverflow.com/questions/18237432/how-to-rewrite-complicated-lines-of-c-code-nested-ternary-operator/18237507
                              But back to topic a bit.

                              Do you know how much of JS that is supported in QML ?
                              Can i include .js stuff ?

                              S 1 Reply Last reply 26 Sept 2017, 07:38
                              0
                              • M mrjj
                                26 Sept 2017, 07:27

                                Thanks
                                but was just live sample from
                                https://stackoverflow.com/questions/18237432/how-to-rewrite-complicated-lines-of-c-code-nested-ternary-operator/18237507
                                But back to topic a bit.

                                Do you know how much of JS that is supported in QML ?
                                Can i include .js stuff ?

                                S Offline
                                S Offline
                                sierdzio
                                Moderators
                                wrote on 26 Sept 2017, 07:38 last edited by
                                #26

                                @mrjj said in A basic Question:

                                Do you know how much of JS that is supported in QML ?
                                Can i include .js stuff ?

                                I think V4 engine implements full ECMA 5.1 specs, so you can run any JavaScript there, unless it uses newer features.

                                (Z(:^

                                M 1 Reply Last reply 26 Sept 2017, 07:46
                                0
                                • S sierdzio
                                  26 Sept 2017, 07:38

                                  @mrjj said in A basic Question:

                                  Do you know how much of JS that is supported in QML ?
                                  Can i include .js stuff ?

                                  I think V4 engine implements full ECMA 5.1 specs, so you can run any JavaScript there, unless it uses newer features.

                                  M Offline
                                  M Offline
                                  mrjj
                                  Lifetime Qt Champion
                                  wrote on 26 Sept 2017, 07:46 last edited by
                                  #27

                                  @sierdzio said in A basic Question:

                                  ECMA 5.1 specs

                                  so that is pretty old ?
                                  5.1 Edition / June 2011
                                  https://www.ecma-international.org/ecma-262/5.1/

                                  So most from
                                  https://www.javascripting.com/

                                  might not work as 6 years in Web tech is a decade ?

                                  1 Reply Last reply
                                  0
                                  • S Offline
                                    S Offline
                                    sierdzio
                                    Moderators
                                    wrote on 26 Sept 2017, 07:51 last edited by
                                    #28

                                    It is old, indeed. But a lot of projects like node.js, charts.js etc. seem to be working (or used to work 1-2 years back).

                                    There is a ticket for upgrading the engine, but it lays dormant since years https://bugreports.qt.io/browse/QTBUG-47735

                                    (Z(:^

                                    M 1 Reply Last reply 26 Sept 2017, 08:54
                                    1
                                    • S sierdzio
                                      26 Sept 2017, 07:51

                                      It is old, indeed. But a lot of projects like node.js, charts.js etc. seem to be working (or used to work 1-2 years back).

                                      There is a ticket for upgrading the engine, but it lays dormant since years https://bugreports.qt.io/browse/QTBUG-47735

                                      M Offline
                                      M Offline
                                      mrjj
                                      Lifetime Qt Champion
                                      wrote on 26 Sept 2017, 08:54 last edited by
                                      #29

                                      @sierdzio

                                      Ok sounds pretty good. even if older.

                                      It is odd that its not been updated since lots of activities on QML.

                                      Thank you for all the info :)

                                      S 1 Reply Last reply 26 Sept 2017, 09:14
                                      0
                                      • M mrjj
                                        26 Sept 2017, 08:54

                                        @sierdzio

                                        Ok sounds pretty good. even if older.

                                        It is odd that its not been updated since lots of activities on QML.

                                        Thank you for all the info :)

                                        S Offline
                                        S Offline
                                        sierdzio
                                        Moderators
                                        wrote on 26 Sept 2017, 09:14 last edited by
                                        #30

                                        @mrjj said in A basic Question:

                                        It is odd that its not been updated since lots of activities on QML.

                                        There was a discussion about it on the mailing list once. If I recall it correctly, the priority for Qt devs working on QML was to keep the engine fast, and make it work 100% reliable in common QML use cases (and the most common uses are: small bindings/ assignments and short functions) - so they did not feel pressure to implement newer features.

                                        (Z(:^

                                        1 Reply Last reply
                                        0

                                        21/30

                                        26 Sept 2017, 06:21

                                        • Login

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