How to link pages in qml



  • I want to switch between pages in qml..suppose my first page consists of 3 buttons
    1.play
    2.controls
    3.quit..
    so i want to switch to respective page as i click on the above buttons a,d get the user to see his results..

    Regards
    imrrk


  • Moderators

    Hmmm... you seem to be stuck in CAPS LOCK state.

    [Note: The original post was edited to not be all uppercase anymore]



  • hi tobias...what do u mean



  • It is possible, you simply define different states and you use transitions to go from one state to another. You can find an introduction here.

    http://doc.qt.nokia.com/4.7-snapshot/qml-transition.html



  • thanks tom...i have read this...but its not happening as i need..



  • [quote author="imrrk" date="1296212375"]hi tobias...what do u mean[/quote]

    Writing in all uppercase is considered extremely unfriendly in usenet an forums (and mostly interpreted as "shouting out loudly"). Let alone that it is extremely hard to read. You most likely will not get any helpful answers.

    PS: You can edit your own post to clean up the mess. I'll let it to you to find the appropriate edit link...



  • thanks for ur valuable info. volker...i have edited...it...so can u help me out now...



  • Hmm, this can be done easily and in many ways in QML. You can check the sample code below:

    For the main QML file:
    @
    import Qt 4.7

    Rectangle {
    id: container
    width: 640
    height: 480

    Loader {
        id: loader
        anchors.fill: parent
        visible: source != ""
    }
    
    Column {
        spacing: 10
        anchors.centerIn: parent
        visible: !loader.visible
        
        Button { label: "Play"; onClicked: container.state = "play"  }
        Button { label: "Controls"; onClicked: container.state = "control" }
        Button { label: "Quit"; onClicked: Qt.quit(); }
    }
    
    Connections {
        target: loader.source != "" ? loader.item : null
        onClicked: loader.source = ""
    }
    
    states: [
        State {
            name: "play"
            PropertyChanges {
                target: loader
                source: "Play.qml"
            }
        },
        State {
            name: "control"
            PropertyChanges {
                target: loader
                source: "Control.qml"
            }
        }
    ]
    

    }
    @

    Play.qml:
    @import Qt 4.7

    Rectangle {
    width: 640
    height: 480
    color: "red"

    signal clicked
    
    Button {
        label: "Playing..."
        anchors.centerIn: parent
        onClicked: parent.clicked();
    }
    

    }@

    Control.qml:
    @import Qt 4.7

    Rectangle {
    width: 640
    height: 480

    color: "yellow"
    
    signal clicked
    
    Button {
        label: "Controlling..."
        anchors.centerIn: parent
        onClicked: parent.clicked();
    }
    

    }@

    Button.qml:
    @import Qt 4.7

    Rectangle {
    id: main
    width: 200
    height: 80
    radius: 5
    color: "white"
    border { width: 1; color: "blue" }

    property alias label: txt.text
    signal clicked
    
    Text {
        id: txt
        anchors.centerIn: parent
    }
    
    MouseArea {
        id: mouseArea; anchors.fill: parent
        onClicked: parent.clicked();
    }
    
    states: [
        State {
            name: "pressed"; when: mouseArea.pressed
            PropertyChanges {
                target: main
                color: "gray"
            }
        }
    ]
    

    }@



  • hey thanks ngocketit.....you code works fine...



  • hello friends,...I have written code...in which i am able to go to next page by clicking on one of the buttons of the parent page and again reverse...now what i want is their is one more button in parent page..and i want to go to different page by clicking on that button ,,,
    I am pasting my code...please help me out further..
    1.States.qml

    @
    import QtQuick 1.0

    Item {
    id:root

    width: 300
    height: 500
    property string currentScreen: "click"
    

    Switch1{
    id:switch1
    }
    Switch2{
    id:switch2
    }
    //Switch3{
    // id:switch3
    //}

    focus: true
    MouseArea{
    id:mousearea1

    anchors.fill: parent
    onClicked: if(switch1.x == 0)
               {
                   currentScreen="back";
               }
                 else if(switch2.x == 0)
                   {
                       currentScreen="click";
                   }
    
                }
    

    states: [
    State {
    name: "click"
    when: currentScreen =="click"
    PropertyChanges {target: switch1;x:0; y: 0;z:1}
    PropertyChanges {target: switch2;x:root.height;z:0}

        PropertyChanges {
            target: mousearea1
            x: 65
            y: 64
            width: 170
            height: 47
            anchors.leftMargin: 65
            anchors.rightMargin: 65
            anchors.topMargin: 64
            anchors.bottomMargin: 389
        }
    
    
    },
    
    
    
    
    State {
        name: "back"
        when: currentScreen =="back"
        PropertyChanges {target: switch1;x:root.height;z:0}
        PropertyChanges {target: switch2;x:0; y: 0;z:1}
    
        PropertyChanges {
            target: mousearea1
            width: 142
            height: 83
            anchors.rightMargin: 158
            anchors.bottomMargin: 417
        }
    }
    

    ]

    transitions: [
    Transition {
    from: "click"
    to: "back"
    PropertyAnimation{
    target: switch2
    property: "x"
    duration: 600
    }
    },

    Transition {
        from: "back"
        to: "click"
        PropertyAnimation{
            target: switch1
            property: "x"
            duration: 600
        }
    }
    

    ]

    }
    @

    [EDIT: code formatting, please use a single @-tag before and after the complete code, not for every line; Volker]



  • I know these posts were a while back but I have tried the code suggested by ngocketit and the correct qml file loads but it no longer recognises my shortcut keys - shortcut keys were fine, all I have done is load the qml files as above without modifying them. Is this expected???

    The only thing being displayed is a listview, code below is what is in the file being loaded/displayed. The doubleClick on an item still works but pressing a number key to select an item in the listview does not.

    @import QtQuick 2.0

    Rectangle
    {
    id: theMenu
    Component
    {
    id: menuEntryDelegate

        Rectangle
        {
            id: menuItemContainer
            width: menuHolder.width
            height: menuEntry.height * 1.25
            anchors.top: prompts.bottom
    
            state: ListView.isCurrentItem ? "selected" : "notselected"
    
            Text
            {
                id: menuEntry
                font.pointSize: coreMenu.menuFontPointSize
                width: parent.width
                wrapMode: Text.WordWrap
                text: displayText
                clip: true
            }
    

    .......

    }
    
    Rectangle
    {
        id: menuContainer
        width: coreMenu.menuWidth
        height: (50 * 9)
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: prompts.bottom
        color: "purple"
        ListView
        {
            id: menuHolder
            model: menuModel
            anchors.fill: parent
            opacity: 1
    
           header: Rectangle
            {
                width: menuHolder.width
                height: 50
                color: "#2A51A3"
    
    
               Text
                {
                   id: header
                   anchors.centerIn: parent
    
                   text: coreMenu.getMenuTitle()
                   font.pointSize: 20
                   color: "green"
                   width: parent.width
                   wrapMode: Text.WordWrap
                }
            }
    
            delegate: menuEntryDelegate
            focus: true
    
            Keys.onPressed:
            {
                if(event.key === Qt.Key_Home)//go back to Main menu
                {
                    coreMenu.displayMainMenu();
    
                }
                //Ways to select a menu item
                else if((event.key >= Qt.Key_1 && event.key <= Qt.Key_9)
                        || event.key === Qt.Key_Return || event.key === Qt.Key_Enter)
                {
                    if(event.key >= Qt.Key_1 && event.key <= Qt.Key_9)
                    {
                        menuHolder.currentIndex = event.key  - Qt.Key_1;
                    }
                    coreMenu.displayMenu(menuHolder.currentIndex);
                }
    

    ..............
    }@


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.