QML Tab and State

[DLabonte]

Good afternoon,

I am developing an application using QML (Qt 5.8) where a TabView is used to control the different forms used. To reduce the number of Tab elements, I am using State in some tabs to control minor differences in the visible Tab content (depending on a test result for instance). I do assign a default state in each Tab, with state transitions are based on a Timer (declared in the Tab) or external test result. This approach works well for cases where a Timer (or external test) is started after a Tab is made current, and using onStateChanged().

Note that the TabView.tabsVisible is set to false.

There is however a case that is failing. The external test is executed in the background while Tab A is current. Depending on the test result Tab B becomes current (test passed), otherwise Tab C is selected to be current, with additional items specific to the test failure. The display the additional items is based on State (specific to Tab C). I have included a partial definition of Tab C



Item {
id: sensorIntegrityTest

onEnabledChanged:
{
console.log( "sensorIntegrityTest.Item.onEnabledChanged, visible: ", visible, ", enabled: ", enabled)
}
onVisibleChanged:
{
console.log( "sensorIntegrityTest.Item.onVisibleChanged, visible: ", visible, ", enabled: ", enabled)
}

property int imageShown : 0

states: [
State {
name: "integrity setup"
PropertyChanges { target: sensorIntegrityTestFail; visible: false }
PropertyChanges { target: sensorIntegrityTestPass; visible: false }
},
State {
name: "integrity test"
PropertyChanges { target: sensorIntegrityTestFail; visible: false }
PropertyChanges { target: sensorIntegrityTestPass; visible: false }
},
State {
name: "integrity failed"
PropertyChanges { target: sensorIntegrityTestPass; visible: false }
PropertyChanges { target: sensorIntegrityTestFail; visible: true }
},
State {
name: "integrity passed"
PropertyChanges { target: sensorIntegrityTestFail; visible: false }
PropertyChanges { target: sensorIntegrityTestPass; visible: true }
}

]
onStateChanged:
{
console.log( "sensorIntegrityTest.onStateChanged: state= ", state)
if ("integrity test" === state) {
integrityTestTimer.start()
} else {
integrityTestTimer.stop()
}
}

// Assign the default state
state: "integrity setup"


I am using a JavaScript function to select the current Tab. When Tab C is selected the following content appears in the console log:

qml: sensorIntegrityTest.onStateChanged: state= integrity setup
When trying the read the state property value from the Javascript function using the command

console.log( "state ", tabView.getTab( nextIndex).sensorIntegrityTest.state)
the following error is reported: qrc:/screen.js:208: TypeError: Cannot read property 'state' of undefined

What am I missing? Is it possible to access the state property as currently declared here from a Javascript function?

My last attempt to address this issue, I defined an alias for the state variable in Tab C definition of using the statement

property alias integrityState: sensorIntegrityTest.state
resulting in the following error reported by the Javascript functions: qrc:/screen.js:211: Error: Cannot assign to non-existent property "integrityState"

Regards,
Daniel

[DLabonte]

Hi again,

I got something working and I thought I would share how I proceeded.

In my application, the active/visible Tab is selected programmatically. As stated in the original message, the content of the Tab is dependent on the result/state of an external test. That test might be completed before the Tab is made visible.

So, I first defined a set of enumerators in C++, made available to my QML code by using Q_ENUM macro and used Q_PROPERTY to define a variable in C++ that can be accessed in QML. Let's refer to this variable as testResult.

I also used a set of (internal) State in my QML Tab content (see original post). In the QML file defining the Tab content, I added a Component.onCompleted which is used to the internal State based on the value of testResult. Once the Tab is visible, different controls (BUTTON) are used to let the operator select different operations, repeating the execution of the test for example, setting a new value to the internal State.

Using QML State allows me to take advantage of onStateChange, and consequently set the visible content of the Tab according to the internal State.

Communication between C++ and QML when the value of testResult changes is achieved using an emit notification.

This solution avoids exposing internal QML State values and the variable testResult to the javascript code I am using.

Thanks,
Daniel