QML not changing state

Question

I am creating an application but the state in qml is not changing....here LoginView is a QML file and MessageView is also a QML file i want to change QML files as pages of the application...I am doing something wrong but I am not able to figure out what....please help me

import QtQuick 1.0

Item {
id: main

LoginView {
    id: login
    anchors.fill: parent
    visible: true
    onLoginClicked: main.state="messageView"
}

MessageView {
    id: message
    anchors.fill: parent
    visible: false
}

states: [State {
        name:"messsageView"
        PropertyChanges { target: login; visible: false }
        PropertyChanges { target: message; visible: true }
    },State {
        name:""
        PropertyChanges { target: message; visible: false }
        PropertyChanges { target: login; visible: true }
    }]
}

Answer 1

Shouldn't a change happen when some 'event' occurs. Something like this:

import QtQuick 1.0

Rectangle
{

    id: main
    color: "blue"
    width : 200
    height: 200

Rectangle
{
    id: login
    color: "red"
    anchors.fill: parent
    opacity: 1
}

Rectangle {
    id: message
    color: "green"
    anchors.fill: parent
    opacity: 0
}

// --------------------------- THIS! ---------------------

MouseArea
{
 anchors.fill: parent
 onClicked: parent.state = "messsageView"
}

// -------------------------------------------------------

states: [State {
        name:"messsageView"
        PropertyChanges { target: login; opacity: 0 }
        PropertyChanges { target: message; opacity: 1 }
    },State {
        name:""
        PropertyChanges { target: message; opacity: 0 }
        PropertyChanges { target: login; opacity: 1 }
    }]

}