How to link pages in qml

imrrk

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

tobias.hunger

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

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

imrrk

hi tobias...what do u mean

tomjanssens

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

imrrk

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

goetz

[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...

imrrk

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

ngocketit

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"
        }
    }
]

}@

imrrk

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

imrrk

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]

Dolphin

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);
            }

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