Interface using by QML pageStack ??

[ssaku]

Hello, I have got a problem. I was trying to create interface using qml with c++ code I have connection between c++ and qml but when I want change a window when somebody push a button in qml interface I have a problem. How to change a qml files in interface is it possible ? Now I'm trying to use a pageStack but it is need to use symbian module is it necessary ? Can you put any examples?

[wysota]

This is the simplest solution I can think of:

// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1
 
Rectangle {
    width: 360
    height: 360
    Rectangle {
        id: stack
        property Item currentPage
 
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.top: parent.top
        height: 300
 
        function push(objId) {
            if(currentPage !== null)
                currentPage.opacity = 0
            currentPage = objId
            objId.opacity = 1
        }
 
        Rectangle {
            opacity: 0
            id: page1
            color: "red"
            anchors.fill: stack
            Behavior on opacity { NumberAnimation {}}
        }
        Rectangle {
            opacity: 0
            id: page2
            color: "blue"
            anchors.fill: stack
            Behavior on opacity { NumberAnimation {}}
        }
    }
 
    Row {
        anchors.bottom: parent.bottom
        anchors.top: stack.bottom
        anchors.left: parent.left
        anchors.right: parent.right
        spacing: 5
 
        Button {
            text: "one"
            onClicked: stack.push(page1)
 
        }
        Button {
            text: "two"
            onClicked: stack.push(page2)
        }
    }
}

// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1

Rectangle {
    width: 360
    height: 360
    Rectangle {
        id: stack
        property Item currentPage

        anchors.left: parent.left
        anchors.right: parent.right
        anchors.top: parent.top
        height: 300

        function push(objId) {
            if(currentPage !== null)
                currentPage.opacity = 0
            currentPage = objId
            objId.opacity = 1
        }

        Rectangle {
            opacity: 0
            id: page1
            color: "red"
            anchors.fill: stack
            Behavior on opacity { NumberAnimation {}}
        }
        Rectangle {
            opacity: 0
            id: page2
            color: "blue"
            anchors.fill: stack
            Behavior on opacity { NumberAnimation {}}
        }
    }

    Row {
        anchors.bottom: parent.bottom
        anchors.top: stack.bottom
        anchors.left: parent.left
        anchors.right: parent.right
        spacing: 5

        Button {
            text: "one"
            onClicked: stack.push(page1)

        }
        Button {
            text: "two"
            onClicked: stack.push(page2)
        }
    }
}

To copy to clipboard, switch view to plain text mode 

Button.qml:

// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1
 
Rectangle {
    id: root
    property string text
    property int textSize: 12
    property color textColor: "white"
    width: txt.width+10
    height: txt.height+5
    color: "#555"
 
    signal clicked()
 
    MouseArea {
        onClicked: root.clicked()
        anchors.fill: parent
    }
    Text {
        id: txt
        text: root.text
        anchors.centerIn: parent
        font.pointSize: textSize
        color: textColor
    }
}

// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1

Rectangle {
    id: root
    property string text
    property int textSize: 12
    property color textColor: "white"
    width: txt.width+10
    height: txt.height+5
    color: "#555"

    signal clicked()

    MouseArea {
        onClicked: root.clicked()
        anchors.fill: parent
    }
    Text {
        id: txt
        text: root.text
        anchors.centerIn: parent
        font.pointSize: textSize
        color: textColor
    }
}

To copy to clipboard, switch view to plain text mode 

It is not as functional as a real stack but it should get you started.