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. Complex QML UI questions
Forum Updated to NodeBB v4.3 + New Features

Complex QML UI questions

Scheduled Pinned Locked Moved QML and Qt Quick
37 Posts 5 Posters 21.7k Views 1 Watching
  • 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.
  • 2 Offline
    2 Offline
    2beers
    wrote on last edited by
    #9

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

      "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
      0
      • K Offline
        K Offline
        kyleplattner
        wrote on last edited by
        #11

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

        1 Reply Last reply
        0
        • K Offline
          K Offline
          kyleplattner
          wrote on last edited by
          #12

          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
          0
          • K Offline
            K Offline
            kyleplattner
            wrote on last edited by
            #13

            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
            0
            • T Offline
              T Offline
              tobias.hunger
              wrote on last edited by
              #14

              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
              0
              • K Offline
                K Offline
                kyleplattner
                wrote on last edited by
                #15

                Tobias,
                That solved one of my issues. Thanks,

                Kyle

                1 Reply Last reply
                0
                • K Offline
                  K Offline
                  kyleplattner
                  wrote on last edited by
                  #16

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

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

                    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
                    0
                    • K Offline
                      K Offline
                      kyleplattner
                      wrote on last edited by
                      #18

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

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

                        [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
                        0
                        • K Offline
                          K Offline
                          kyleplattner
                          wrote on last edited by
                          #20

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

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

                            Also a better example is to create, destroy the QML objects instead of make them not visible.

                            @function loadPage1() {
                            var component = Qt.createComponent("Page1.qml");
                            if (component.status == Component.Ready) {
                            var page = component.createObject(main_rectangle);
                            }
                            }

                            @

                            and on MouseArea you do something like this:

                            @ onClicked: loadPage1();@

                            1 Reply Last reply
                            0
                            • K Offline
                              K Offline
                              kyleplattner
                              wrote on last edited by
                              #22

                              When I do the later example I return a "ReferenceError: Can't find variable: loadPage1" error. Do I need to make a qmldir file? Will Qt creator auto-generate one for me?

                              Kyle

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

                                you need to put the mousearea on main.qml and you don't need to create the 2 objects Page1 and Pgae2. you will create after the button is pushed

                                1 Reply Last reply
                                0
                                • K Offline
                                  K Offline
                                  kyleplattner
                                  wrote on last edited by
                                  #24

                                  In this example, if I wanted to make a button that loaded from a separate QML file as button.qml, why can't I do something like this:

                                  @import Qt 4.7

                                  Rectangle {
                                  property alias text: textItem.text
                                  var page = "page2"

                                  if (page2.visible == true)
                                  {
                                  
                                  page = "page1"
                                  
                                  }
                                  
                                   width: 100; height: 30
                                   border.width: 1
                                   radius: 5
                                   smooth: true
                                  
                                   gradient: Gradient {
                                       GradientStop { position: 0.0; color: "lightGray" }
                                       GradientStop { position: 0.5; color: "gray" }
                                       GradientStop { position: 1.0; color: "lightGray" }
                                   }
                                  
                                   Text {
                                       id: textItem
                                       anchors.centerIn: parent
                                       font.pointSize: 20
                                       color: "white"
                                       font.family: "Helvetica Neue"
                                   }
                                  
                                   MouseArea {
                                       id: mouse_area_button
                                       anchors.fill: parent
                                       onClicked: main_rectangle.state = page
                                   }
                                  

                                  }
                                  @

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

                                    you example is for button.qml ? or for the main.qml?

                                    1 Reply Last reply
                                    0
                                    • K Offline
                                      K Offline
                                      kyleplattner
                                      wrote on last edited by
                                      #26

                                      button.qml

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

                                        ok so do you receive any error? you defined the page2 in main.qml?

                                        1 Reply Last reply
                                        0
                                        • K Offline
                                          K Offline
                                          kyleplattner
                                          wrote on last edited by
                                          #28

                                          I am trying to figure out a way for the button to know what page should be navigated to based on what page it is currently on. For instance, if it is on page 1 then it should navigate to page 2 and if it is on page 2 it should navigate to page 1. That is what I was trying to accomplish but it threw me errors.

                                          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