Invisible buttons are still functioning

[vishnu]

Let say I have 3 different views each in different QML files. In my main.qml. I have done switching between different view using states and visible properties. Suppose If i am in 2nd state, thought the Button in 1st state is invisible If i press on that area It is still functioning. Even I tried with StackView but no use. Also, Can any one tell me how to implement backbutton goes morethan 2 levels. I did with states but only front and back.Moreover If I make my 2nd View(DetailedView) parent as Item instead of reactangel I can clearly see the Buttons from 1st View (Main.qml). what is the mistake and best practise to implement different views.Thanks a lot :)
Main.qml

import QtQuick 2.3
import QtQuick.Window 2.2
import QtQuick.Controls 1.3

Window{
    id:window
    width: Screen.width
    height: Screen.height
    visible: true
    Item{
        id:mainview
        anchors.fill: parent

        states: [
            State {
                name: "Mainview"
                PropertyChanges {
                    target: detailedView;visible:false}
            },
            State {
                name: "DetailedView"
                PropertyChanges {
                    target: detailedView;visible:true;}
            }
        ]
        Column{
            spacing: 40
            anchors.centerIn: parent
            Button{
                id:openDetailedview
                text:"Detailed View"
            }
            Button{
                id:homingButton
                text:"Homing"
            }
            Button{
                id:joggingButton
                text:"Jogging"
            }
        }
        Connections{
            target:openDetailedview
            onClicked:{
                mainview.state="DetailedView"
            }
        }
        Connections{
            target:detailedView
            onHomeButtonClicked:{
                mainview.state="Mainview"
            }
        }
    }
    DetailedView{
        id:detailedView
        anchors.fill:parent
        visible: false
    }
}

Note: DetailedView.qml also consists of states.
Detailview.qml

import QtQuick 2.3
import QtQuick.Window 2.2
import QtQuick.Controls 1.3
Rectangle{
    id:mainUI
    anchors.fill: parent
    signal homeButtonClicked()
    Header{
        id:header
    }
    CentralView{
        id:centralView
        anchors.top: header.bottom
        anchors.bottom: footer.top
    }
    //Model
    SetTable{
        id:setTable
        anchors.top: header.bottom
        anchors.bottom: footer.top
        visible: false
    }
    Footer {
        id: footer
        anchors.bottom: parent.bottom
    }
    states: [
        State {
            name: "MainView"
            PropertyChanges {target: centralView;cycRegVisible:false; ctrlReg1Visible:false;ctrlReg2Visible:false;cmodeRegVisible:false;directModeRegVisible:false}
            PropertyChanges {target: footer;backButtonvisible:false; forwardButtonvisible:true}
        },
        //setTable view state
        State {
            name: "SetTableView"
            PropertyChanges {target: centralView;centralViewVisible:false;}
            PropertyChanges {target: setTable;visible:true;}
            PropertyChanges {target: footer;backButtonvisible:true}
        },
        State {
            name: "CyclicRegisterView"
            PropertyChanges {target: centralView;cycRegVisible:true }
            PropertyChanges {target: footer;backButtonvisible:true}
            PropertyChanges {target: centralView;ctrlReg1Visible:false }
            PropertyChanges {target: centralView;ctrlReg2Visible:false }
            PropertyChanges {target: centralView;cmodeRegVisible:false }
            PropertyChanges {target: centralView;directModeRegVisible:false }
            PropertyChanges {target: centralView;trackingModeRegVisible:false }
            PropertyChanges {target: centralView;displayViewVisible:false }
        },
        State {
            name: "ControlRegister1View"
            PropertyChanges {target: centralView;cycRegVisible:false;ctrlReg1Visible:true;ctrlReg2Visible:false;cmodeRegVisible:false;directModeRegVisible:false}
            PropertyChanges {target: centralView;trackingModeRegVisible:false }
            PropertyChanges {target: footer;backButtonvisible:true; }
            PropertyChanges {target: centralView;displayViewVisible:false }
        },
        State {
            name: "ControlRegister2View"
            PropertyChanges {target: centralView;cycRegVisible:false;ctrlReg1Visible:false;ctrlReg2Visible:true;cmodeRegVisible:false;directModeRegVisible:false}
            PropertyChanges {target: centralView;trackingModeRegVisible:false }
            PropertyChanges {target: footer;backButtonvisible:true; }
            PropertyChanges {target: centralView;displayViewVisible:false }
        },
        State {
            name: "OperationModeRegisterView"
            PropertyChanges {target: centralView;cycRegVisible:false;ctrlReg1Visible:false;ctrlReg2Visible:false;cmodeRegVisible:true;directModeRegVisible:false }
            PropertyChanges {target: centralView;trackingModeRegVisible:false ;homingModeRegVisible:false}
            PropertyChanges {target: footer;backButtonvisible:true; }
            PropertyChanges {target: centralView;displayViewVisible:false }
        },
        State {
            name: "DirectModeRegisterView"
            PropertyChanges {target: centralView;cycRegVisible:false;ctrlReg1Visible:false;ctrlReg2Visible:false;cmodeRegVisible:false;directModeRegVisible:true}
            PropertyChanges {target: centralView;trackingModeRegVisible:false ;homingModeRegVisible:false}
            PropertyChanges {target: footer;backButtonvisible:true; }
            PropertyChanges {target: centralView;displayViewVisible:false }
        },
        State {
            name: "SetTableModeRegisterView"
            PropertyChanges {target: centralView;cycRegVisible:false;ctrlReg1Visible:false;ctrlReg2Visible:false;cmodeRegVisible:false;directModeRegVisible:false}
            PropertyChanges {target: centralView;setTableModeRegVisible:true;trackingModeRegVisible:false;homingModeRegVisible:false}
            PropertyChanges {target: footer;backButtonvisible:true; }
            PropertyChanges {target: centralView;displayViewVisible:false }
        },
        State {
            name: "TrackingModeRegisterView"
            PropertyChanges {target: centralView;cycRegVisible:false;ctrlReg1Visible:false;ctrlReg2Visible:false;cmodeRegVisible:false;directModeRegVisible:false}
            PropertyChanges {target: centralView;setTableModeRegVisible:false;trackingModeRegVisible:true;homingModeRegVisible:false}
            PropertyChanges {target: footer;backButtonvisible:true; }
            PropertyChanges {target: centralView;displayViewVisible:false }
        },
        State {
            name: "HomingModeRegisterView"
            PropertyChanges {target: centralView;cycRegVisible:false;ctrlReg1Visible:false;ctrlReg2Visible:false;cmodeRegVisible:false;directModeRegVisible:false}
            PropertyChanges {target: centralView;setTableModeRegVisible:false;trackingModeRegVisible:false;homingModeRegVisible:true}
            PropertyChanges {target: footer;backButtonvisible:true; }
            PropertyChanges {target: centralView;displayViewVisible:false }
        },
        State {
            name: "JoggingModeRegisterView"
            PropertyChanges {target: centralView;cycRegVisible:false;ctrlReg1Visible:false;ctrlReg2Visible:false;cmodeRegVisible:false;directModeRegVisible:false}
            PropertyChanges {target: centralView;setTableModeRegVisible:false;trackingModeRegVisible:false;homingModeRegVisible:false;jogginModeRegVisible:true}
            PropertyChanges {target: footer;backButtonvisible:true; }
            PropertyChanges {target: centralView;displayViewVisible:false }
        },
        State {
            name: "SAcyclicRegisterView"
            PropertyChanges {target: centralView;cycRegVisible:false;ctrlReg1Visible:false;ctrlReg2Visible:false;cmodeRegVisible:false;directModeRegVisible:false}
            PropertyChanges {target: centralView;setTableModeRegVisible:false;trackingModeRegVisible:false;homingModeRegVisible:false;jogginModeRegVisible:false}
            PropertyChanges {target: footer;backButtonvisible:true; }
            PropertyChanges {target: centralView;displayViewVisible:true;controlViewVisible:false;sAcycRegVisible:true }
        },
        State {
            name: "StatusRegister1View"
            PropertyChanges {target: centralView;cycRegVisible:false;ctrlReg1Visible:false;ctrlReg2Visible:false;cmodeRegVisible:false;directModeRegVisible:false}
            PropertyChanges {target: centralView;setTableModeRegVisible:false;trackingModeRegVisible:false;homingModeRegVisible:false;jogginModeRegVisible:false}
            PropertyChanges {target: footer;backButtonvisible:true; }
            PropertyChanges {target: centralView;displayViewVisible:true;controlViewVisible:false;sAcycRegVisible:false;statusReg1Visible:true }
        },
        State {
            name: "StatusRegister2View"
            PropertyChanges {target: centralView;cycRegVisible:false;ctrlReg1Visible:false;ctrlReg2Visible:false;cmodeRegVisible:false;directModeRegVisible:false}
            PropertyChanges {target: centralView;setTableModeRegVisible:false;trackingModeRegVisible:false;homingModeRegVisible:false;jogginModeRegVisible:false}
            PropertyChanges {target: footer;backButtonvisible:true; }
            PropertyChanges {target: centralView;displayViewVisible:true;controlViewVisible:false;sAcycRegVisible:false;statusReg2Visible:true }
        },
        State {
            name: "StatusRegister3View"
            PropertyChanges {target: centralView;cycRegVisible:false;ctrlReg1Visible:false;ctrlReg2Visible:false;cmodeRegVisible:false;directModeRegVisible:false}
            PropertyChanges {target: centralView;setTableModeRegVisible:false;trackingModeRegVisible:false;homingModeRegVisible:false;jogginModeRegVisible:false}
            PropertyChanges {target: footer;backButtonvisible:true; }
            PropertyChanges {target: centralView;displayViewVisible:true;controlViewVisible:false;sAcycRegVisible:false;statusReg3Visible:true }
        },
        State {
            name: "SOperationModeRegisterView"
            PropertyChanges {target: centralView;cycRegVisible:false;ctrlReg1Visible:false;ctrlReg2Visible:false;cmodeRegVisible:false;directModeRegVisible:false}
            PropertyChanges {target: centralView;setTableModeRegVisible:false;trackingModeRegVisible:false;homingModeRegVisible:false;jogginModeRegVisible:false}
            PropertyChanges {target: footer;backButtonvisible:true; }
            PropertyChanges {target: centralView;displayViewVisible:true;controlViewVisible:false;sAcycRegVisible:false;sOperationRegVisible:true }
        },
        State {
            name: "SDirectModeRegisterView"
            PropertyChanges {target: centralView;cycRegVisible:false;ctrlReg1Visible:false;ctrlReg2Visible:false;cmodeRegVisible:false;directModeRegVisible:false}
            PropertyChanges {target: centralView;setTableModeRegVisible:false;trackingModeRegVisible:false;homingModeRegVisible:false;jogginModeRegVisible:false}
            PropertyChanges {target: footer;backButtonvisible:true; }
            PropertyChanges {target: centralView;displayViewVisible:true;controlViewVisible:false;sAcycRegVisible:false;sDirectModeRegVisible:true }
        },
        State {
            name: "SSetTableModeRegisterView"
            PropertyChanges {target: centralView;cycRegVisible:false;ctrlReg1Visible:false;ctrlReg2Visible:false;cmodeRegVisible:false;directModeRegVisible:false}
            PropertyChanges {target: centralView;setTableModeRegVisible:false;trackingModeRegVisible:false;homingModeRegVisible:false;jogginModeRegVisible:false}
            PropertyChanges {target: footer;backButtonvisible:true; }
            PropertyChanges {target: centralView;displayViewVisible:true;controlViewVisible:false;sAcycRegVisible:false;sSetTableModeRegVisible:true }
        },
        State {
            name: "STrackingModeRegisterView"
            PropertyChanges {target: centralView;cycRegVisible:false;ctrlReg1Visible:false;ctrlReg2Visible:false;cmodeRegVisible:false;directModeRegVisible:false}
            PropertyChanges {target: centralView;setTableModeRegVisible:false;trackingModeRegVisible:false;homingModeRegVisible:false;jogginModeRegVisible:false}
            PropertyChanges {target: footer;backButtonvisible:true; }
            PropertyChanges {target: centralView;displayViewVisible:true;controlViewVisible:false;sAcycRegVisible:false;sTtrackingModeRegVisible:true }
        },
        State {
            name: "SHomingRegisterView"
            PropertyChanges {target: centralView;cycRegVisible:false;ctrlReg1Visible:false;ctrlReg2Visible:false;cmodeRegVisible:false;directModeRegVisible:false}
            PropertyChanges {target: centralView;setTableModeRegVisible:false;trackingModeRegVisible:false;homingModeRegVisible:false;jogginModeRegVisible:false}
            PropertyChanges {target: footer;backButtonvisible:true; }
            PropertyChanges {target: centralView;displayViewVisible:true;controlViewVisible:false;sAcycRegVisible:false;sHomingModeRegVisible:true }
        },
        State {
            name: "SJoggingRegisterView"
            PropertyChanges {target: centralView;cycRegVisible:false;ctrlReg1Visible:false;ctrlReg2Visible:false;cmodeRegVisible:false;directModeRegVisible:false}
            PropertyChanges {target: centralView;setTableModeRegVisible:false;trackingModeRegVisible:false;homingModeRegVisible:false;jogginModeRegVisible:false}
            PropertyChanges {target: footer;backButtonvisible:true; }
            PropertyChanges {target: centralView;displayViewVisible:true;controlViewVisible:false;sAcycRegVisible:false;sJogginModeRegVisible:true }
        }
    ]
    state: "MainView"
    Connections{
        target: centralView;
        onAcyclicButtonClicked:{
            //                console.log("switching to CyclicRegisterView")
            mainUI.state="CyclicRegisterView"

        }
        onControlRegister1ButtonClicked:{
            //                console.log("switching to Control Register1View")
            mainUI.state="ControlRegister1View"
        }
        onControlRegister2ButtonClicked:{
            //                console.log("switching to Control Register2View")
            mainUI.state="ControlRegister2View"
        }
        onOperationModeRegisterClicked:{
            //                console.log("switching to CMODE or operation mode register view")
            mainUI.state="OperationModeRegisterView"
        }
        onDirectModeRegisterClicked:{
            //                console.log("switching to direct mode register view")
            mainUI.state="DirectModeRegisterView"
        }
        onSetTableModeRegisterClicked:{
            //                console.log("switching to settable mode register view")
            mainUI.state="SetTableModeRegisterView"
        }
        onTrackingModeRegisterClicked:{
            //                console.log("switching to trakingmode register view")
            mainUI.state="TrackingModeRegisterView"
        }
        onHomingModeRegisterClicked:{
            //                console.log("switching to homing register view")
            mainUI.state="HomingModeRegisterView"
        }
        onJoggingModeRegisterClicked:{
            //                console.log("switching to joggin register view")
            mainUI.state="JoggingModeRegisterView"
        }
        onSAcyclicButtonClicked:{
            //                console.log("switching to display acyclic register view")
            mainUI.state="SAcyclicRegisterView"
        }
        onSStatusRegister1ButtonClicked:{
            mainUI.state="StatusRegister1View"
        }
        onSStatusRegister2ButtonClicked:{
            mainUI.state="StatusRegister2View"
        }
        onSStatusRegister3ButtonClicked:{
            mainUI.state="StatusRegister3View"
        }
        onSOperationModeRegisterClicked:{
            mainUI.state="SOperationModeRegisterView"
        }
        onSDirectModeRegisterClicked:{
            mainUI.state="SDirectModeRegisterView"
        }
        onSSetTableModeRegisterClicked:{
            mainUI.state="SSetTableModeRegisterView"
        }
        onSTrackingModeRegisterClicked:{
            mainUI.state="STrackingModeRegisterView"
        }
        onSHomingModeRegisterClicked:{
            mainUI.state="SHomingRegisterView"
        }
        onSJoggingModeRegisterClicked:{
            mainUI.state="SJoggingRegisterView"
        }
    }
    Connections{
        target: footer
        onBackButtoncliked:{
//            console.log("switching to MainView")
            mainUI.state="MainView"
        }
        onForwardButtonClicked:{
            mainUI.state="SetTableView"
        }
        onHomeButtonClicked:{
            homeButtonClicked()
        }
    }
}
//}

[p3c0]

@vishnu StackView could be of use here IMO. You can directly pop off to an item.

[vishnu]

@p3c0
I tried with an example it still does the same behaviour. If press on the area where buttons are pressed it is changing the views.Moreover with stakeView i know only to and forth .With stakeview how to go to upto 3 indepth views? any smal example would really help me a lot.Also, How to connect properties of one view to another view if I am simply pushing and poping out qml files from Stakeview? Thanks .

import QtQuick 2.3
import QtQuick.Window 2.2
import QtQuick.Controls 1.3

Window {
    visible: true
    width: 360

    Column{
        spacing: 40
        anchors.centerIn: parent
        Button{
            id:openLelyview
            text:"Detailed View"
            onClicked: {
                stackView.push(Qt.resolvedUrl("LelyView.qml"))
            }
        }
        Button{
            id:homingButton
            text:"Homing"
            onClicked: {
                stackView.push(Qt.resolvedUrl("Register.qml"))
            }
        }
        Button{
            id:joggingButton
            text:"Jogging"
            onClicked: {
                stackView.push(Qt.resolvedUrl("LelyView.qml"))
            }
        }
    }

    StackView {
        id: stackView
        anchors.fill: parent
        // Implements back key navigation
        focus: true
    }
}

[BlueMagma]

It is probably not the best solution :

You could add "enabled : visible" on the button

[p3c0]

@vishnu Here's an example to pop off an item of any depth. This link clearly explains.
Here's an example I prepared:

//Adds 10 items into StackView and also pops to an item at index 4
import QtQuick 2.4
import QtQuick.Controls 1.3

Rectangle {
    width: 200
    height: 100

    StackView {
        id: stack
        anchors.fill: parent
    }

    Component {
        id: item
        Text { }
    }

    Row {
        anchors.bottom: parent.bottom
        Button {
            text: "Add"
            onClicked: {
                for(var a=0; a<10; a++) {
                    var comp = item
                    stack.push(comp.createObject(stack,{"text": "Item"+a}));
                }
            }
        }

        Button {
            text: "Pop"
            onClicked: {
                var current = stack.get(4)
                stack.pop(current)
            }
        }
    }
}

You will also need to set destroyOnPop to true as documented here to not allow items destroy on pop.

[vishnu]

@p3c0
sorry for late reply. As you said I modified my program from visible concept to StackView. But now the status of the buttons (on/off) is not preserved.Because when i am pushing I am not making destroyOnPop to false. How to do that with this syntax.

Button{
            id:openDetailedview
            text:"Detailed View"
            onClicked: {
                stackView.push(Qt.resolvedUrl("DetailedView.qml"))
            }
        }

In DetailedView.qml there are many on/off buttons.
Also, It says that qml: Warning: StackView: cannot transition an item that is anchored!.May i know when do we get this kind of error because i even set anchors.fill:parent. Thanks.

[p3c0]

@vishnu

How to do that with this syntax.

stackView.push( { item: Qt.resolvedUrl("DetailedView.qml"), destroyOnPop:false } );

Also, It says that qml: Warning: StackView: cannot transition an item that is anchored!.May i know when do we get this kind of error because i even set anchors.fill:parent

That is the problem. Don't do it.

[vishnu]

@p3c0
stackView.push( { item: Qt.resolvedUrl("DetailedView.qml"), destroyOnPop:false } );
I did like this but still status it not restored. So what i did is instantiate the component and make is invisible.
MainView.qml

 Button{
            id:openDetailedview
            text:"Detailed View"
            onClicked: {
                stackView.push({item:detailedView,destroyOnPop:false})
            }
        }
DetailedView{
        id:detailedView
        visible: false
    }

works perfect like this but still qml: Warning: StackView: cannot transition an item that is anchored! is not solved what should i do?
I even tried replacing
anchors.fill:parent
with
width: parent.width
height: parent.height
anchors.left: parent.left but no use.

[p3c0]

@vishnu qml: Warning: StackView: cannot transition an item that is anchored!
That is what I said don't anchor it. It will fill automatically.

[vishnu]

@p3c0
Sorry.Now i removed it but still. the warning is not shown when pushing deatiledView.qml. But inside deatiledView. I have different buttons.upon clicking i am pushing another qml files.here is the problem.In my case when I am pushing the AcyclicRegister.qml I am getting the error
DetailedView.qml

Item {
    id:centralView
//    width: parent.width
//    height: parent.height
 ControlView{

        id:controlview
        height: (centralView.height)
        width: centralView.width/2
        anchors.left: centralView.left
        anchors.leftMargin: festodesign.buttonGap
        Connections{
            onAcyclicButtonClicked: {
            stackView.push({item:acyclicRegister,destroyOnPop:false})
            }
      }
   AcyclicRegister{
        id:acyclicRegister
        visible: false
        property int byteIndex: 1
        onRegisterstatus: {
            tcpCommunicationPort.datafromQml(byteIndex,index,data);//sending to cpp
        }
    }
 DisplayView{
        id: displayView
        height: (centralView.height)
        width: centralView.width/2
        anchors.left: controlview.right
        anchors.leftMargin: festodesign.buttonGap
        anchors.top: parent.top
        Connections{
            onAcyclicButtonClicked: {stackView.push({item:sAcyclicRegister,destroyOnPop:false})}
       }
SAcyclicRegister{
        id:sAcyclicRegister
        visible: false
        property int byteIndex: 1
        onRegisterstatus: {
            //            tcpCommunicationPort.datafromQml(byteIndex,index,-1);//sending to cpp
        }
    }

AcyclicRegister.qml

Register{
    id:acyclicRegister
 //not showing inside text elements
}

Register.qml

Rectangle {
    id: register
 //not showing inside text elements
}

[p3c0]

@vishnu The item that you are pushing should not be anchored. In your case you are pushingAcyclicRegister and it is anchored to its parent. Remove that. It will automatically be filled.

[vishnu]

@p3c0
Ooops.I missed it. Thanks a lot ! works perfect :).
I have a right-arrow button on my footer where i am pushing a qml file upon clicking. when it is loaded how to disable this button on the footer? Also, I don't want to push the same qml file again and again.How can make a check before pushing If that is alread in the stack i don't the push it? I tried like getting the current item but i always get stacknull.
var comp=stackView.get(Stack.index);
console.log("latest stack"+comp)

[p3c0]

@vishnu

I have a right-arrow button on my footer where i am pushing a qml file upon clicking. when it is loaded how to disable this button on the footer?

enabled = false on click

How can make a check before pushing If that is alread in the stack i don't the push it?

2 ways.

var myItem = stackView.push( { item: Qt.resolvedUrl("DetailedView.qml"), destroyOnPop:false } );
//check myItem and store it somewhere
if(myItem) { }

var myItem = stackView.push( { item: Qt.resolvedUrl("DetailedView.qml"), destroyOnPop:false } );
var comp=stackView.get(myItem.Stack.index); //need the item to get its index and not just Stack.index