Update ToolBar Button state in QML

Question

I am trying to enable/disable toolbar buttons (any UI state) based on state/function of the active tab.

So say we have a toolbar with a Save (file) button and the first tab reports being able to save a file (or whatever) so the Save button is enabled but switching to the second tab should disable the Save button because it reports not being able to save a file.

This reporting is done with additional properties/functions on the Tab objects themselves in QML.

Implementing the onCurrentIndexChanged on the TabView does give an opportunity to set the initial state of the buttons. But the thing is, the user can -for instance- select something in that 2nd tab that makes it being able to save the file anyway - this should (re)enable the Save button in the toolbar.

Here is some skeleton code we can use as a common basis. Main.qml

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: "Update UI Test"

    header: ToolBar {
        ToolButton {
            id: toolButton
            text: "?"
        }
    }

    TabView {
        id: tabView
        anchors.fill: parent

        Tab {
            title: "Tab 1"
            PageTest {
            }
        }

        Tab {
            title: "Tab 2"
            PageTest {
            }
        }
    }
}

PageTest.qml

Page {
    property alias checked: checkBox.checked

    CheckBox {
        id: checkBox
        x: 200
        y: 100
        text: "Enable"
    }
}

I have no idea how to connect the dots in order to get this working.

obiwanjacobi obiwanjacobi · Accepted Answer · 2017-11-19T09:05:45

Answering my own question in the hope this might be useful for others some day.

Here is the code of how I got this working. Of course my real scenario is more complicated but isolating this problem did bring new knowledge.

On each page you have to declare the same interface (properties/methods/signals) in order for the main calling page to treat all pages as the same type.

I have chosen to pass the object itself in the signal I defined on the page. This allows any connected slot to access that interface of properties and methods (in this case the 'checked' -alias- property).

Then I made a function in a central place that knows how to update the UI - the updateUI function on the main window- and connect that to each of the signal's -each page has one- when the Tab is finished loading. I did not know of any other location to connect these.

Finally an onCurrentIndexChanged handler makes sure the UI is update to the state of the newly selected page when tabs are switched.

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: "Update UI Test"

    function updateUI(page) {
        toolButton.enabled = page.checked
    }

    header: ToolBar {
        ToolButton {
            id: toolButton
            text: "?"
        }
    }

    TabView {
        id: tabView
        anchors.fill: parent

        Tab {
            title: "Tab 1"
            PageTest {
                Component.onCompleted: {
                    changed.connect(updateUI)
                }
            }
        }

        Tab {
            title: "Tab 2"
            PageTest {
                Component.onCompleted: {
                    changed.connect(updateUI)
                }
            }
        }

        onCurrentIndexChanged: {
            updateUI(tabView.getTab(tabView.currentIndex).children[0])
        }
    }
}


Page {
    id: page
    property alias checked: checkBox.checked

    signal changed(variant page)

    CheckBox {
        id: checkBox
        x: 200
        y: 100
        text: "Enable"

        onCheckStateChanged: {
            changed(page)
        }
    }
}

Update ToolBar Button state in QML

1 Answers