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

            ok. but the button where it is build? in main page, page1 or page 2. because if it's build in main page and when you press it you load page1 for example then the button will probably become invisible. if the button is build in page1 or page2 you already know what is the current page. can you post the entire code for every qml page to make a better idea.

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

              It is loaded in each page file:

              main.qml
              @import Qt 4.7

              Rectangle {
              id:main_rectangle
              width: 640
              height: 480

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

              Page1{
                  id:page1
              }
              
              Page2{
                  id:page2
              }
              Page3{
                  id:page3
              }
              Page4{
                  id:page4
              }
              Page5{
                  id:page5
              }
              
              states: [
                  State {
                      name: "page5"
                      PropertyChanges { target: page1; visible:false; }
                      PropertyChanges { target: page2; visible:false; }
                      PropertyChanges { target: page5; visible:true; }
                      PropertyChanges { target: page4; visible:false; }
                      PropertyChanges { target: page3; visible:false; }
                  },
                  State {
                      name: "page4"
                      PropertyChanges { target: page1; visible:false; }
                      PropertyChanges { target: page2; visible:false; }
                      PropertyChanges { target: page5; visible:false; }
                      PropertyChanges { target: page4; visible:true; }
                      PropertyChanges { target: page3; visible:false; }
              
                  },
                  State {
                      name: "page3"
                      PropertyChanges { target: page1; visible:false; }
                      PropertyChanges { target: page2; visible:false; }
                      PropertyChanges { target: page5; visible:false; }
                      PropertyChanges { target: page4; visible:false; }
                      PropertyChanges { target: page3; visible:true; }
              
                  },
                  State {
                      name: "page2"
                      PropertyChanges { target: page5; visible:false; }
                      PropertyChanges { target: page4; visible:false; }
                      PropertyChanges { target: page3; visible:false; }
                      PropertyChanges { target: page1; visible:false; }
                      PropertyChanges { target: page2; visible:true; }
                  },
                  State {
                      name: "page1"
                      PropertyChanges { target: page5; visible:false; }
                      PropertyChanges { target: page4; visible:false; }
                      PropertyChanges { target: page3; visible:false; }
                      PropertyChanges { target: page2; visible:false; }
                      PropertyChanges { target: page1; visible:true; }
                  }
              
              ]
              

              }
              @

              page1.qml
              @import Qt 4.7

              Rectangle {

              width: 640
              height: 480
              
              Button { text: "Page Two"; x:50; y:232; }
              Button { text: "Page Three"; x:200; y:232; }
              Button { text: "Page Four"; x:350; y:232; }
              Button { text: "Page Five"; x:500; y:232; }
              

              }
              @

              button.qml
              @import Qt 4.7

              Rectangle {
              property alias text: textItem.text

              //var page = "page2"
              
              
               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 = "page2"
               }
              

              }
              @

              and every subsequent page (page2.qml, page3.qml, etc) is identical to page 1 with minor logical changes.

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

                I got it to work by placing the mouse_area instructions within each specific page. The next question I have is regarding how I can skin my designs using CSS-like files. Is this possible?

                Kyle

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

                  Also, how can I change the state of my button.qml file from my page1.qml?

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

                    you just create states in your button.qml file and then you use buttonName.state=stateName

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

                      So no qmldir file needed? The page1.qml doesn't seem to know that button exists.

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

                        well didn't you created the button in page1.qml ?? did you gave it an id? you need to pass the button id from page1.qml and not from button.qml

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

                          another approach will be to use "Loader":http://doc.qt.nokia.com/4.7/qml-loader.html

                          Just found out about it. :)

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

                            Can I create a .config file or the equivalent of a .plist file for the settings menu to write to?

                            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