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. onclicked button open "new" form
Forum Updated to NodeBB v4.3 + New Features

onclicked button open "new" form

Scheduled Pinned Locked Moved Solved QML and Qt Quick
25 Posts 2 Posters 11.0k Views 2 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.
  • F Offline
    F Offline
    filipdns
    wrote on last edited by filipdns
    #6

    I was thinking it's easier to have each pages on separate qml but may be not, I don't know, I'm just start with qml to do API for my project

    1 Reply Last reply
    0
    • F Offline
      F Offline
      filipdns
      wrote on last edited by
      #7

      may be I use wrong "word" to be clear, I want multiple pages display in the windows but one by one each time I click on the wanted button, that more clear or not?

      mrjjM 1 Reply Last reply
      0
      • F filipdns

        may be I use wrong "word" to be clear, I want multiple pages display in the windows but one by one each time I click on the wanted button, that more clear or not?

        mrjjM Offline
        mrjjM Offline
        mrjj
        Lifetime Qt Champion
        wrote on last edited by mrjj
        #8

        @filipdns
        Yes, its a normal design.
        Make a new QML default project.
        Its actually structured like that.
        With pages in its own QML file.

        File->New Project->Application->Quick Controls 2 application.

        And run it. That sounds like what you are after. one window. you can switch "pages".

        and please have a look in
        https://qmlbook.github.io/
        also if not already seen.

        1 Reply Last reply
        0
        • F Offline
          F Offline
          filipdns
          wrote on last edited by filipdns
          #9

          that not really what I'm looking for but it's start to give answers.
          I show you a quick sample by picture I just did with paint, may be It will be more clear ;-)
          0_1510687014341_main_page.gif
          after button "page1" clicked the page change to this below:

          0_1510687031461_page1.gif

          1 Reply Last reply
          0
          • mrjjM Offline
            mrjjM Offline
            mrjj
            Lifetime Qt Champion
            wrote on last edited by mrjj
            #10

            Hi
            Well the sample just uses tab buttons, but nothing stopping from using an other type of button in the center
            and still use the SwipeView to manage the pages.

            http://doc.qt.io/qt-5/qml-qtquick-controls-button.html#details

              Page1 {
                        Button {
                            onClicked:{swipeView.currentIndex = swipeView.currentIndex+1}
                            text: "Button"
                        }
                    }
            
            1 Reply Last reply
            0
            • F Offline
              F Offline
              filipdns
              wrote on last edited by
              #11

              ok, cool, I will test that thank you!!

              mrjjM 1 Reply Last reply
              0
              • F filipdns

                ok, cool, I will test that thank you!!

                mrjjM Offline
                mrjjM Offline
                mrjj
                Lifetime Qt Champion
                wrote on last edited by
                #12

                @filipdns
                Np. If you really new to QML, browse over that book gives good hint how QML works.
                QML is very flexible and u can mix most things as you like.

                1 Reply Last reply
                0
                • F Offline
                  F Offline
                  filipdns
                  wrote on last edited by
                  #13

                  Thank you, I'm reading it , to do button and add style like shadow that ok, I understood that, action to change color or else on same page also It's easy. The most difficult for me was to understand how change the complete page with an other with onclick action.
                  I will try your method and I will make feedback here, thanks again

                  mrjjM 1 Reply Last reply
                  0
                  • F filipdns

                    Thank you, I'm reading it , to do button and add style like shadow that ok, I understood that, action to change color or else on same page also It's easy. The most difficult for me was to understand how change the complete page with an other with onclick action.
                    I will try your method and I will make feedback here, thanks again

                    mrjjM Offline
                    mrjjM Offline
                    mrjj
                    Lifetime Qt Champion
                    wrote on last edited by
                    #14

                    @filipdns
                    Well when you want it to stay inside same window. You often use a container like swipeView as its less
                    messy as to have all the QML pages stacked on top and show/hide to flip pages.
                    There are other ways to have multiple pages/screens but swipeView does it with style.

                    Happy programming.

                    1 Reply Last reply
                    0
                    • F Offline
                      F Offline
                      filipdns
                      wrote on last edited by
                      #15

                      Just quick other question, it's not possible to do in the main.qml the action button task and make the form I want for each page?
                      example:
                      main.qml

                      ApplicationWindow {
                          visible: true
                          width: 640
                          height: 480
                       
                      button {
                      id: button1
                      anchors.fill: parent
                                       MouseArea {
                                                             id: mouseArea
                                                             anchors.fill: parent
                                                             onClicked: page2.qml()
                          }
                      button {
                      id: button2
                      anchors.fill: parent
                                       MouseArea {
                                                             id: mouseArea
                                                             anchors.fill: parent
                                                             onClicked: page3.qml()
                          }
                      

                      it's not real code that just to illustrate what I have in my mean ;-)

                      mrjjM 1 Reply Last reply
                      0
                      • F filipdns

                        Just quick other question, it's not possible to do in the main.qml the action button task and make the form I want for each page?
                        example:
                        main.qml

                        ApplicationWindow {
                            visible: true
                            width: 640
                            height: 480
                         
                        button {
                        id: button1
                        anchors.fill: parent
                                         MouseArea {
                                                               id: mouseArea
                                                               anchors.fill: parent
                                                               onClicked: page2.qml()
                            }
                        button {
                        id: button2
                        anchors.fill: parent
                                         MouseArea {
                                                               id: mouseArea
                                                               anchors.fill: parent
                                                               onClicked: page3.qml()
                            }
                        

                        it's not real code that just to illustrate what I have in my mean ;-)

                        mrjjM Offline
                        mrjjM Offline
                        mrjj
                        Lifetime Qt Champion
                        wrote on last edited by mrjj
                        #16

                        @filipdns
                        It is, but you want it to be part of the SwipeView
                        Image the structure being a tree, so we must add them to the SwipeView structure for them to be "in" it

                         SwipeView {
                                id: swipeView
                                anchors.fill: parent
                                currentIndex: tabBar.currentIndex
                        
                                Page1 {
                                    Button {
                                        onClicked:{swipeView.currentIndex = swipeView.currentIndex+1}
                                        text: "Button"
                                    }
                                }
                        
                                Page {
                                    Label {
                                        text: qsTr("Second page")
                                        anchors.centerIn: parent
                                    }
                                }
                            }
                        
                        

                        Else they be under ApplicationWindow and we can not change page. (also swipeview might cover them)

                        F 1 Reply Last reply
                        0
                        • mrjjM mrjj

                          @filipdns
                          It is, but you want it to be part of the SwipeView
                          Image the structure being a tree, so we must add them to the SwipeView structure for them to be "in" it

                           SwipeView {
                                  id: swipeView
                                  anchors.fill: parent
                                  currentIndex: tabBar.currentIndex
                          
                                  Page1 {
                                      Button {
                                          onClicked:{swipeView.currentIndex = swipeView.currentIndex+1}
                                          text: "Button"
                                      }
                                  }
                          
                                  Page {
                                      Label {
                                          text: qsTr("Second page")
                                          anchors.centerIn: parent
                                      }
                                  }
                              }
                          
                          

                          Else they be under ApplicationWindow and we can not change page. (also swipeview might cover them)

                          F Offline
                          F Offline
                          filipdns
                          wrote on last edited by
                          #17

                          @mrjj may be a misunderstanding I don't want swipe at all

                          mrjjM 1 Reply Last reply
                          0
                          • F filipdns

                            @mrjj may be a misunderstanding I don't want swipe at all

                            mrjjM Offline
                            mrjjM Offline
                            mrjj
                            Lifetime Qt Champion
                            wrote on last edited by
                            #18

                            @filipdns
                            Ignore the swipe effect for now.
                            Its to handle the actual page switching. (not to get the animation)
                            Else you would have to hide or show all elements depending on what
                            page you are currently viewing.

                            Alternativ you can use
                            http://doc.qt.io/qt-5/qml-qtquick-controls-stackview.html
                            which have no animation effect as far as i know.

                            1 Reply Last reply
                            0
                            • F Offline
                              F Offline
                              filipdns
                              wrote on last edited by
                              #19

                              oh that feel more than what I was looking for ;-) thank you

                              mrjjM 1 Reply Last reply
                              0
                              • F filipdns

                                oh that feel more than what I was looking for ;-) thank you

                                mrjjM Offline
                                mrjjM Offline
                                mrjj
                                Lifetime Qt Champion
                                wrote on last edited by
                                #20

                                @filipdns
                                yes it should be :)
                                It provides a page handler with the ability to go back and forth.
                                Note, that you could also hide/show the pages your self but
                                its less code to use a premade element designed for such design.

                                1 Reply Last reply
                                0
                                • F Offline
                                  F Offline
                                  filipdns
                                  wrote on last edited by
                                  #21

                                  Yes less code it s better for me 😉

                                  mrjjM 1 Reply Last reply
                                  0
                                  • F filipdns

                                    Yes less code it s better for me 😉

                                    mrjjM Offline
                                    mrjjM Offline
                                    mrjj
                                    Lifetime Qt Champion
                                    wrote on last edited by
                                    #22

                                    @filipdns
                                    That goes for most people :)
                                    Reusing already tested code is just more fun.

                                    1 Reply Last reply
                                    0
                                    • F Offline
                                      F Offline
                                      filipdns
                                      wrote on last edited by
                                      #23

                                      onClicked: stackView.push (Qt.resolvedUrl("SliderPage.qml"))

                                      mrjjM 1 Reply Last reply
                                      0
                                      • F filipdns

                                        onClicked: stackView.push (Qt.resolvedUrl("SliderPage.qml"))

                                        mrjjM Offline
                                        mrjjM Offline
                                        mrjj
                                        Lifetime Qt Champion
                                        wrote on last edited by
                                        #24

                                        @filipdns
                                        Some text would help understand :)

                                        1 Reply Last reply
                                        0
                                        • F Offline
                                          F Offline
                                          filipdns
                                          wrote on last edited by
                                          #25

                                          hello, it's just the way to do what the topic ask ;-)

                                          import QtQuick 2.2
                                          import QtQuick.Controls 1.2
                                          import QtQuick.Controls.Styles 1.1
                                          Item {
                                              width: parent.width
                                              height: parent.height
                                          
                                              Column {
                                                  spacing: 5
                                                      Button {
                                                      anchors.margins: 20
                                                      text: "24"
                                                      onClicked: stackView.push (Qt.resolvedUrl("SliderPage.qml"))
                                                  }
                                          }
                                          
                                          1 Reply Last reply
                                          1

                                          • Login

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