Hi,
currently I am trying to do my first QML project. I have some nice working code in several QML files that display different pages of my App. My next step was to get theses pages to talk to each other but I just do not understand how that is done. There are several code snippets on the net but I am always getting confused where to put what.
All I managed is to pass on some values using:
onClicked: pageStack.push(Qt.resolvedUrl("CountdownPage.qml"), {onTime: onSlider.value, reciverTime: recoverSlider.value, cycles: cycleSlider.value})
onClicked: pageStack.push(Qt.resolvedUrl("CountdownPage.qml"), {onTime: onSlider.value, reciverTime: recoverSlider.value, cycles: cycleSlider.value})
To copy to clipboard, switch view to plain text mode
I am woking off the basic example provided in Sailfish SDK that looks like this. There is a main.qml
import QtQuick 2.0
import Sailfish.Silica 1.0
import "pages"
ApplicationWindow
{
id: main
initialPage: Component { FirstPage { } }
cover: Qt.resolvedUrl("cover/CoverPage.qml")
}
import QtQuick 2.0
import Sailfish.Silica 1.0
import "pages"
ApplicationWindow
{
id: main
initialPage: Component { FirstPage { } }
cover: Qt.resolvedUrl("cover/CoverPage.qml")
}
To copy to clipboard, switch view to plain text mode
and within the folder pages are all the different pages of the project. If I want to use some variables that should be available in different pages I read that I could import a javascript file that holds these values. But a) I read that this is not a good idea and b) there is always a new instance of the file and if I change the values the other pages do net get the update. So how can I share values over my entire project?
Specifically I am interested in sharing a time value that is updated every second. Currently the timer is located in the CountdownPage.qml that is in the folder pages and looks like this:
Timer {
id: ticker
interval: 1000;
running: true;
repeat: true;
onTriggered: {
time--;
// Setting times
if(time < 0){
animateOpacity.stop()
timer.color = "white" // timer is the text field displaying the value
timer.opacity = 1.0
if(trainOn){
trainOn = false;
time = holdTime;
cycles--;
}else{
trainOn = true;
time = onTime
player.play() // player is a C++ class that I imported
}
if(cycles === 0){
ticker.running = false;
timer.text = qsTr("Finish!")
}
}
// Animations and Sounds
if(time < 6){
timer.color = "red"
animateOpacity.start()
}
if(!trainOn && time === 5)
soundCountdown.play()
if(trainOn && time === 0){
player.pause()
soundGong.play();
}
}
}
Timer {
id: ticker
interval: 1000;
running: true;
repeat: true;
onTriggered: {
time--;
// Setting times
if(time < 0){
animateOpacity.stop()
timer.color = "white" // timer is the text field displaying the value
timer.opacity = 1.0
if(trainOn){
trainOn = false;
time = holdTime;
cycles--;
}else{
trainOn = true;
time = onTime
player.play() // player is a C++ class that I imported
}
if(cycles === 0){
ticker.running = false;
timer.text = qsTr("Finish!")
}
}
// Animations and Sounds
if(time < 6){
timer.color = "red"
animateOpacity.start()
}
if(!trainOn && time === 5)
soundCountdown.play()
if(trainOn && time === 0){
player.pause()
soundGong.play();
}
}
}
To copy to clipboard, switch view to plain text mode
So it anteracts with other elements in that page. But I can change the page and go to cover while the ticker is still active and then I want to display the ticker time in my cover page. I guess it was not a good idea to have the ticker within the page but I do not know how to do it better. I managed to extend QML with a C++ class and use that in the CountdownPage but I also would like to be able to control the player instance(?) from all pages. So can some tell me how a QML project should be structured? What things should go in the QML file and what in c++ or js files and if it is in an external file in which qml file should I import it?
Thanks for reading through all of that =)
Bookmarks