Results 1 to 6 of 6

Thread: problem: how to navigate to different pages using qt quick

  1. 1st November 2015, 19:17 #1
    Yogesh soni
    Yogesh soni is offline Beginner
    Join Date
    Aug 2015
    Posts
    7
    Qt products
    Qt5
    Platforms
    Windows Android

    Question problem: how to navigate to different pages using qt quick

    this is my gui code can anyone help me how to navigate to different pages on button click for ex: if i click on login page thaan login page display and if click on register button than registration page shoul display

    Qt Code: 
    1. //welcome.qml
    2.  
    3. import QtQuick.Controls 1.2
    4. import QtQuick.Controls.Private 1.0
    5. import QtQuick.Controls.Styles 1.1
    6. import QtQuick 2.4
    7. import QtQuick.Window 2.2
    8. import QtQuick.Layouts 1.1
    9. import QtQuick.Dialogs 1.2
    10.  
    11.  
    12.  
    13. Window {
    14.     visible: true
    15.     id: window1
    16.  
    17.     color: "lightblue"
    18.     ColorAnimation on color { to: "steelblue"; duration: 3000 }
    19.  
    20.  
    21.  
    22.     Image {
    23.         id: img
    24.         width:540
    25.         height: 960
    26.         source: "qrc:/inside.PNG"
    27.     }
    28.  
    29.     Item {
    30.  
    31.         id:item1
    32.         anchors.horizontalCenter: parent.horizontalCenter
    33.         anchors.verticalCenter: parent.verticalCenter
    34.  
    35.         width: 570; height: 170
    36.         anchors.verticalCenterOffset: 190
    37.         anchors.horizontalCenterOffset: 0
    38.  
    39.  
    40.         Column {
    41.             width: 360
    42.             height: 221
    43.             anchors.verticalCenterOffset: 133
    44.             anchors.horizontalCenterOffset: 13
    45.             anchors.horizontalCenter: parent.horizontalCenter
    46.             anchors.verticalCenter: parent.verticalCenter
    47.  
    48.             spacing: 9
    49.  
    50.             Button{
    51.                 text:"Login"
    52.                 style: ButtonStyle{
    53.                     background: Rectangle {
    54.                         implicitWidth: 335
    55.                         implicitHeight: 53
    56.                         radius: 10.0
    57.                         border.width: control.activeFocus ? 2 : 1
    58.                                    border.color: "#888"
    59.                                    gradient: Gradient {
    60.                                        GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#eee" }
    61.                                        GradientStop { position: 1 ; color: control.pressed ? "#aaa" : "#ccc" }
    62.                                    }
    63.                         color:"lightblue"
    64.                         ColorAnimation on color { to: "gold"; duration: 3000 }
    65.  
    66.                     }
    67.                 }
    68.  
    69.             }
    70.  
    71.             Button{
    72.  
    73.                 signal showAppPage;
    74.                     MouseArea{
    75.                         anchors.fill: parent
    76.                         onClicked: showAppPage()
    77.                     }
    78.  
    79.                 id: btn
    80.                 text:"Register"
    81.                 style: ButtonStyle{
    82.                     background: Rectangle {
    83.                         implicitWidth: 335
    84.                         implicitHeight: 53
    85.                         radius: 10.0
    86.                         border.width: control.activeFocus ? 2 : 1
    87.                                    border.color: "#888"
    88.                                    gradient: Gradient {
    89.                                        GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#eee" }
    90.                                        GradientStop { position: 1 ; color: control.pressed ? "#aaa" : "#ccc" }
    91.                                    }
    92.                         color:"gold"
    93.                         ColorAnimation on color { to: "lightblue"; duration: 3000 }
    94.  
    95.                     }
    96.                 }
    97.             }
    98.  
    99.         }
    100.  
    101.     }
    102. }
    To copy to clipboard, switch view to plain text mode 
    Qt Code: 
    1. //login.qml
    2.  
    3. import QtQuick.Controls 1.2
    4. import QtQuick.Controls.Private 1.0
    5. import QtQuick.Controls.Styles 1.1
    6. import QtQuick 2.4
    7. import QtQuick.Window 2.2
    8. import QtQuick.Layouts 1.1
    9. import QtQuick.Dialogs 1.2
    10.  
    11.  
    12.  
    13. Window {
    14.     visible: true
    15.     id: window1
    16.     color:"white"
    17.  
    18.     Image {
    19.         id: img
    20.         width:540
    21.         height: 960
    22.         source: "qrc:/login.png"
    23.     }
    24.  
    25.     Item {
    26.  
    27.         id:item1
    28.         anchors.horizontalCenter: parent.horizontalCenter
    29.         anchors.verticalCenter: parent.verticalCenter
    30.  
    31.         width: 570; height: 170
    32.         anchors.verticalCenterOffset: 117
    33.         anchors.horizontalCenterOffset: 7
    34.  
    35.  
    36.         Column {
    37.             width: 360
    38.             height: 221
    39.             anchors.verticalCenterOffset: -115
    40.             anchors.horizontalCenterOffset: -5
    41.             anchors.horizontalCenter: parent.horizontalCenter
    42.             anchors.verticalCenter: parent.verticalCenter
    43.  
    44.             spacing: 20
    45.  
    46.  
    47.             TextField {
    48.                             placeholderText:"Email or username"
    49.                             style: TextFieldStyle
    50.                             {
    51.                                 textColor: "black"
    52.                                 background: Rectangle {
    53.                                     radius: 2
    54.                                     implicitWidth: 350
    55.                                     implicitHeight: 53
    56.                                     border.color: "#333"
    57.                                     border.width: 1
    58.                                 }
    59.                             }
    60.                         }
    61.  
    62.  
    63.                     TextField {
    64.                         echoMode: TextInput.Password
    65.                         placeholderText:"Password"
    66.                         style: TextFieldStyle
    67.                         {
    68.                             textColor: "black"
    69.                             background: Rectangle {
    70.                                 radius: 2
    71.                                 implicitWidth: 350
    72.                                 implicitHeight: 53
    73.                                 border.color: "#333"
    74.                                 border.width: 1
    75.                             }
    76.                         }
    77.                     }
    78.  
    79.  
    80. Button{
    81.  
    82.  
    83.     id: btn
    84.     text:"Submit"
    85.     style: ButtonStyle{
    86.         background: Rectangle {
    87.             implicitWidth: 350
    88.             implicitHeight: 53
    89.             radius: 10.0
    90.             border.width: control.activeFocus ? 2 : 1
    91.                        border.color: "#888"
    92.                        gradient: Gradient {
    93.                            GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#eee" }
    94.                            GradientStop { position: 1 ; color: control.pressed ? "#aaa" : "#ccc" }
    95.                        }
    96.             color:"gold"
    97.             ColorAnimation on color { to: "lightblue"; duration: 3000 }
    98.  
    99.         }
    100.     }
    101. }
    102.  
    103. Button{
    104.  
    105.  
    106.     id: btn1
    107.     text:"forgot password"
    108.     style: ButtonStyle{
    109.         background: Rectangle {
    110.             implicitWidth: 350
    111.             implicitHeight: 53
    112.             radius: 10.0
    113.             border.width: control.activeFocus ? 2 : 1
    114.                        border.color: "#888"
    115.                        gradient: Gradient {
    116.                            GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#eee" }
    117.                            GradientStop { position: 1 ; color: control.pressed ? "#aaa" : "#ccc" }
    118.                        }
    119.             color:"gold"
    120.             ColorAnimation on color { to: "lightblue"; duration: 3000 }
    121.  
    122.         }
    123.     }
    124. }
    125.  
    126.  
    127.         }
    128.  
    129.     }
    130. }
    To copy to clipboard, switch view to plain text mode 
    Last edited by anda_skoa; 1st November 2015 at 21:28. Reason: missing [code] tags
    Reply With Quote Reply With Quote
  2. 1st November 2015, 19:18 #2
    Yogesh soni
    Yogesh soni is offline Beginner
    Join Date
    Aug 2015
    Posts
    7
    Qt products
    Qt5
    Platforms
    Windows Android

    Question problem: how to navigate to different pages using qt quick

    this is my gui code can anyone help me how to navigate to different pages on button click for ex: if i click on login page thaan login page display and if click on register button than registration page shoul display


    Qt Code: 
    1. //registration.qml
    2.  
    3. import QtQuick.Controls 1.2
    4. import QtQuick.Controls.Private 1.0
    5. import QtQuick.Controls.Styles 1.1
    6. import QtQuick 2.4
    7. import QtQuick.Window 2.2
    8. import QtQuick.Layouts 1.1
    9. import QtQuick.Dialogs 1.2
    10.  
    11.  
    12.  
    13. Window {
    14.     visible: true
    15.     id: window1
    16.     color:"white"
    17.  
    18.     Image {
    19.         id: img
    20.         width:540
    21.         height: 960
    22.         source: "qrc:/registration.png"
    23.     }
    24.  
    25.  
    26.  
    27.     Item {
    28.  
    29.         id:item1
    30.         anchors.horizontalCenter: parent.horizontalCenter
    31.         anchors.verticalCenter: parent.verticalCenter
    32.  
    33.         width: 570; height: 170
    34.         anchors.verticalCenterOffset: 117
    35.         anchors.horizontalCenterOffset: 7
    36.  
    37.  
    38.         Column {
    39.             width: 360
    40.             height: 221
    41.             anchors.verticalCenterOffset: -115
    42.             anchors.horizontalCenterOffset: -5
    43.             anchors.horizontalCenter: parent.horizontalCenter
    44.             anchors.verticalCenter: parent.verticalCenter
    45.  
    46.             spacing: 20
    47.  
    48.  
    49.  
    50.             TextField {
    51.                             placeholderText:"Address"
    52.                             style: TextFieldStyle
    53.                             {
    54.                                 textColor: "black"
    55.                                 background: Rectangle {
    56.                                     radius: 2
    57.                                     implicitWidth: 400
    58.                                     implicitHeight: 53
    59.                                     border.color: "#333"
    60.                                     border.width: 1
    61.                                 }
    62.                             }
    63.                         }
    64.  
    65.  
    66.         TextField {
    67.                         placeholderText:"Username"
    68.                         style: TextFieldStyle
    69.                         {
    70.                             textColor: "black"
    71.                             background: Rectangle {
    72.                                 radius: 2
    73.                                 implicitWidth: 350
    74.                                 implicitHeight: 53
    75.                                 border.color: "#333"
    76.                                 border.width: 1
    77.                             }
    78.                         }
    79.                     }
    80.  
    81.  
    82.     TextField {
    83.                     placeholderText:"Phone number"
    84.                     style: TextFieldStyle
    85.                     {
    86.                         textColor: "black"
    87.                         background: Rectangle {
    88.                             radius: 2
    89.                             implicitWidth: 350
    90.                             implicitHeight: 53
    91.                             border.color: "#333"
    92.                             border.width: 1
    93.                         }
    94.                     }
    95.                 }
    96.  
    97.                     TextField {
    98.                         echoMode: TextInput.Password
    99.                         placeholderText:"Password"
    100.                         style: TextFieldStyle
    101.                         {
    102.                             textColor: "black"
    103.                             background: Rectangle {
    104.                                 radius: 2
    105.                                 implicitWidth: 350
    106.                                 implicitHeight: 53
    107.                                 border.color: "#333"
    108.                                 border.width: 1
    109.                             }
    110.                         }
    111.                     }
    112.  
    113.  
    114. Button{
    115.  
    116.  
    117.     id: btn
    118.     text:"Submit"
    119.     style: ButtonStyle{
    120.         background: Rectangle {
    121.             implicitWidth: 350
    122.             implicitHeight: 53
    123.             radius: 10.0
    124.             border.width: control.activeFocus ? 2 : 1
    125.                        border.color: "#888"
    126.                        gradient: Gradient {
    127.                            GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#eee" }
    128.                            GradientStop { position: 1 ; color: control.pressed ? "#aaa" : "#ccc" }
    129.                        }
    130.             color:"gold"
    131.             ColorAnimation on color { to: "lightblue"; duration: 3000 }
    132.  
    133.         }
    134.     }
    135. }
    136.         }
    137.  
    138.     }
    139. }
    To copy to clipboard, switch view to plain text mode 
    Last edited by anda_skoa; 1st November 2015 at 21:31. Reason: missing [code] tags
    Reply With Quote Reply With Quote
  3. 3rd November 2015, 03:23 #3
    Yogesh soni
    Yogesh soni is offline Beginner
    Join Date
    Aug 2015
    Posts
    7
    Qt products
    Qt5
    Platforms
    Windows Android

    Default Re: problem: how to navigate to different pages using qt quick

    Which code is missing can u correct it or can u tell me which code should i use
    Reply With Quote Reply With Quote
  4. 3rd November 2015, 08:21 #4
    anda_skoa
    anda_skoa is offline Administrator
    Nokia Certified Qt Developer
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,416
    Thanks
    37
    Thanked 1,544 Times in 1,494 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: problem: how to navigate to different pages using qt quick

    Make the visible property of the two windows false or do not set it at all.
    Add one instance each to the welcome.qml

    Instead of emitting a signal, call show() on the respective window.

    Cheers,
    _
    Reply With Quote Reply With Quote
  5. 4th November 2015, 14:56 #5
    Yogesh soni
    Yogesh soni is offline Beginner
    Join Date
    Aug 2015
    Posts
    7
    Qt products
    Qt5
    Platforms
    Windows Android

    Default Re: problem: how to navigate to different pages using qt quick

    Thnx
    can u tell me how to create instance

    Added after 5 minutes:


    Can u tell me how to store data in sqlite on button click in qt quick with example
    Last edited by Yogesh soni; 4th November 2015 at 14:56.
    Reply With Quote Reply With Quote
  6. 5th November 2015, 08:49 #6
    anda_skoa
    anda_skoa is offline Administrator
    Nokia Certified Qt Developer
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,416
    Thanks
    37
    Thanked 1,544 Times in 1,494 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: problem: how to navigate to different pages using qt quick

    Quote Originally Posted by Yogesh soni View Post
    Thnx
    can u tell me how to create instance
    The easiest way is to use filenames starting with an uppercase letter for the two Windows and then just using that file name in your main QML like if it where an element type.

    E.g. if you rename registration.qml to Registration.qml, you can instantiate an object of Registration like this in welcome.qml

    Qt Code: 
    1. Registration {
    2.     id: registrationWindow
    3. }
    To copy to clipboard, switch view to plain text mode 

    Cheers,
    _
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Similar Threads

  1. Using Qt Quick 1 code model instead of Qt Quick 2; Invalid property name 'onNavigatio
    By TheIndependentAquarius in forum Qt Tools
    Replies: 3
    Last Post: 5th July 2016, 16:13
  2. problem with qt quick designer
    By davod in forum Qt Tools
    Replies: 0
    Last Post: 13th March 2014, 19:38
  3. Problem on multi-pages preview with QGraphicsScene
    By lni in forum Qt Programming
    Replies: 1
    Last Post: 31st August 2013, 06:30
  4. Problem with building Qt quick application
    By Taspa in forum Qt Quick
    Replies: 2
    Last Post: 30th November 2010, 23:03
  5. Problem with changing stackedwidget pages by QAction
    By dejvis in forum Newbie
    Replies: 2
    Last Post: 17th May 2009, 21:58

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules

Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide.