First off, I've only ever really coded in C and Qml feels like both the coolest and most damn frustrating language. Also, having only written C, I am not entirely fluent in the Qml terminology so please bear with me.
I have a project where a main qml file has different states which bring up different "pages". So a "page" is defined in a separate Qml file, an instance of that page is created in main.qml and that instance will be visible depending on the state of main.qml. I would like global variables that can be shared/updated between these pages because what one page displays will be dependent on variables that change in another page (eg. button press). The first page would have multiple buttons for different options, and the second page would display the same formatting, but with the information that corresponds to the option selected. I have been trying to achieve this by using a JavaScript library as discussed here and I am generally able to maipulate and reference the variable within the individual files but the changes do not seem to transfer to the other files. I suspect each file is importing a unique "instance" of the library. How can I make this library function like a C header file in Qml?
Some simple sample code:
Var.js
//Var.js
.pragma library
var option = 1
main.qml
//main.qml
import QtQuick 2.0
import "Var.js" as Var
Rectangle {
id: page
state: "HOME_PAGE"
...
Home_page{
id: home_page
objectName: "home_page"
visible: true
...
}
Option_page{
id: option_page
objectName: "option_page"
visible: false
...
}
states: [
State {
name: "HOME_PAGE"
PropertyChanges { target: home_page; visible: true}
PropertyChanges { target: option_page; visible: false}
},
State {
name: "OPTION_PAGE"
PropertyChanges { target: home_page; visible: false}
PropertyChanges { target: option_page; visible: true}
}
]
home_page.qml
//home_page.qml
import QtQuick 2.0
import QtQuick.Controls 1.0
import QtQuick.Controls.Styles 1.0
import "Var.js" as Var
Rectangle {
id: home_page
objectName: "home_page"
...
Button {
id: option1_button
...
onClicked: {
Var.option = 1
page.state = "OPTION_PAGE"
}
}
Button {
id: option2_button
...
onClicked: {
Var.option = 2
page.state = "OPTION_PAGE"
}
}
etc...
}
option_page.qml
//option_page.qml
import QtQuick 2.0
import "Var.js" as Var
Rectangle {
id: option_page
objectName: "option_page"
...
Text {
...
text: "Option " + Var.option
}
}
I tried the singleton method mentioned in the link above but could not get it to work. I have also tried making a JS function in the library to manipulate the variables, which is then called from Qml, but to no avail.
If it helps I have also be having trouble with the JS global variable from within the individual files. I have been using a third party qml object for a list of buttons and I want a global variable updated depending on which button is pressed. When I display the variable, via text object, it does not update on button press, but if I also display it with the original property is was being updated with, then it does update.
i.e.
This does not update the global variable
Text {
...
text: "Option " + Var.button_pressed
}
ThirdPartyButtonList {
id:button_list
...
onIndexChanged:{
Var.button_pressed = index
}
}
but this does
Text {
...
text: "Option " + Var.button_pressed + " " + button_list.index
}
ThirdPartyButtonList {
id: button_list
...
onIndexChanged:{
Var.button_pressed = index
}
}
