Qt Forum

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

    Complex QML UI questions

    QML and Qt Quick
    5
    37
    17667
    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

      We are beginning the creation of a fairly complex user interface and would like to accomplish the following:

      In order to avoid the entire UI being placed in one QML file with an unreasonable amount of "states" we would like to embed QML elements into a larger QML file where each item is a separate document. For instance, if we were creating an automotive dashboard we would have a speedometer QML file that controlled all the UI elements relating to the speedometer. This would sit in the larger dashboard UI along with the odometer qml file, etc.

      Does this make sense? What code will accomplish this?

      Also, how can I navigate between different QML UI pages? For instance in the dashboard example the setup pages would link to one another as the menu system is traversed.

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

        Yes, it makes sense. If you will split elements in different files you can work with them like with standard qml components and reuse them as many times as you want.
        Navigation between qml pages can be done via flippable or via moving old page off the screen and moving new page to screen.

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

          Could you provide more code detail. I am not surprised that it is possible, but I am at a loss for how to begin implementing both of these features.

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

            Both of them are well described in qml examples and demos. Just take twitter demo and look into it. Both techniques are used there.

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

              So I am looking at the twitter example and I am trying to figure out how they embedded qml files into the larger qml document.

              In twitter.qml is the "import "TwitterCore" 1.0 as Twitter" used to identify the folder? What is the 1.0?

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

                1.0 is version.
                TwitterCore here is folder and Twitter is alias for qmls in this folder. This alias is used in twitter.qml.

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

                  So I tried creating my own folder and naming in a similar structure but it doesn't seem to work. I guess I will keep experimenting.

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

                    have you created qmldir file?

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

                      maybe this will help you: "http://doc.qt.nokia.com/4.7/qdeclarativedocuments.html":http://doc.qt.nokia.com/4.7/qdeclarativedocuments.html

                      but like Denis said you should look at flickr, twitter demos

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

                        "http://doc.qt.nokia.com/4.7/qdeclarativemodules.html":http://doc.qt.nokia.com/4.7/qdeclarativemodules.html is a good place to start for the import statement. In general, reading through the overviews at "http://doc.qt.nokia.com/4.7/qtquick.html":http://doc.qt.nokia.com/4.7/qtquick.html should give you a good introduction to QML.

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

                          Isn't the qmldir part of the .qmlproject file?

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

                            What I cannot figure out in any example is whether I can navigate from something like a mainpage.qml to a settings.qml and keep them wholly separate. Is this possible?

                            I look forward to a book or other resource where I can learn from ground up. Combing through examples has not proved to be super helpful yet.

                            Thanks,

                            Kyle

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

                              I just found the qmldir file in the Twitter example. It is only visible in the project directory and not in Qt Creator at all.

                              1 Reply Last reply Reply Quote 0
                              • T
                                tobias.hunger last edited by

                                kyleplattner: I am no quick expert, but I think I remember the filenames being case sensitive. So if you have a Button, then that should go into a Button.qml, not in button.qml.

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

                                  Tobias,
                                  That solved one of my issues. Thanks,

                                  Kyle

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

                                    I still am sketchy on how to cleanly navigate between separate qml documents.

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

                                      OK. let me know if this works for you. I also started using qml so I'm at a very rookie level , if anyone has a better solution can correct me any time.

                                      you have 3 files: main.qml, Page1.qml, Page2.qml

                                      If I understand correct you want to move from page1 to page2. when you press the rectangle from page1 you will go to page 2 and the same way around. You can also use "transitions":http://doc.qt.nokia.com/4.7/qdeclarativeanimation.html#transitions for a more animated effect

                                      here is the code:

                                      main.qml

                                      @import Qt 4.7

                                      Rectangle {
                                      id:main_rectangle
                                      width: 360
                                      height: 640

                                      Page1{
                                          id:page1
                                      }
                                      
                                      Page2{
                                          id:page2
                                      }
                                      
                                      states: [
                                          State {
                                              name: "page2"
                                              PropertyChanges { target: page1; visible:false; }
                                              PropertyChanges { target: page2; visible:true; }
                                          },
                                          State {
                                              name: "page1"
                                              PropertyChanges { target: page2; visible:false; }
                                              PropertyChanges { target: page1; visible:true; }
                                          }
                                      
                                      ]
                                      

                                      }
                                      @

                                      Page1.qml

                                      @import Qt 4.7

                                      Rectangle {

                                      width: 360
                                      height: 640
                                      
                                      Text {
                                          id: myText
                                          x: 93
                                          y: 152
                                          width: 80
                                          height: 20
                                          text: "page 1"
                                      }
                                      
                                      Rectangle {
                                          id: rectangle1
                                          x: 93
                                          y: 216
                                          width: 100
                                          height: 100
                                          color: "#912121"
                                      
                                          MouseArea {
                                              id: mouse_area1
                                              anchors.fill: parent
                                              onClicked: main_rectangle.state="page2"
                                          }
                                      }
                                      

                                      }
                                      @

                                      Page2.qml

                                      @import Qt 4.7

                                      Rectangle {
                                      width: 360
                                      height: 640
                                      visible: false;

                                      Text {
                                          id: myText
                                          x: 93
                                          y: 152
                                          width: 80
                                          height: 20
                                          text: "page 2"
                                      }
                                      
                                      Rectangle {
                                          id: rectangle1
                                          x: 93
                                          y: 216
                                          width: 100
                                          height: 100
                                          color: "#912121"
                                      
                                          MouseArea {
                                              id: mouse_area1
                                              anchors.fill: parent
                                              onClicked: main_rectangle.state="page1"
                                          }
                                      }
                                      

                                      }
                                      @

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

                                        Thanks so much, I look forward to trying this. This ran fine on your end?

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

                                          [quote author="kyleplattner" date="1287845568"]Thanks so much, I look forward to trying this. This ran fine on your end?[/quote]

                                          yes. it runs ok on my side. you load the main.qml file and click the rectangle

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

                                            You are very helpful. Let me know if you find any great QML resources for learning.

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