This sample application shows how to create a navigation system with a Loader element, save state with property variables, and create a singleton Style component to use on all application screens. We are using the Loader component to create this demo for an embedded Linux device.
This simple application consists of three GUI screens.
The main menu screen for navigation (mainmenu.qml):
The settings screen to set an interval and a stock symbol (settings.qml):
The graph screen plots stock chart data. The QML in this file retrieves the interval and Stock Symbol properties saved in the mainview.qml file. Then it makes an AJAX call to retrieve historical data from Yahoo.com and plots a line and bar graph using their data (stockgraph.qml):
The mainview.qml file drives the navigation of the application. See the QML code below:
import QtQuick 2.0
import QtMultimedia 5.0
import “.”
/*
mainview.qml is the first QML file that gets loaded. Its purpose is to load subsequent QML files.
*/
Rectangle {
/* keep this ID unique for application use */
id: mainview
width: Style.screenWidth
height: Style.screenHeight
color: Style.bgColor
/* property values that are available to other QML files loaded by the Loader */
property alias stockSymbol: data.stockSymbol
property alias interval: data.interval
property string title: “Stock chart for ” + data.stockSymbol
property string errorMsg: “”
Item{
/* this item is used in case object and property values need to be updated in C++ */
id: data
objectName: “data”
property string interval: “w”
property string stockSymbol: “AAPL”
property string source: “”
onSourceChanged: loadQML(source);
}
Loader{
id: loader
source: “mainmenu.qml”
onStatusChanged:{
/* if there is an error, we will load the error screen and show the error text */
if (status == Loader.Error){
mainview.errorMsg = “Error loading source:\n” + source;
source = “error.qml”;
}
}
}
SoundEffect{
id: sound
source: “audio/beep.wav”
}
/* this function will be available by other QML code loaded by the Loader */
function beep(){
sound.play();
}
/* this function will be available by other QML code loaded by the Loader */
function loadQML(source){
loader.source = source;
}
}
To navigate to other screens, call mainview.loadQML(source) in JavaScript code. Here is a mainmenu.qml example when the “Settings” button is clicked this code runs:
onButtonClick: {
mainview.beep();
mainview.loadQML(“settings.qml”);
}
To persist data between screens, update a property value in mainview.qml. Here is an example, of when the “Save” button is pressed in the setting.qml file:
onButtonClick: {
mainview.interval = interval.value;
mainview.stockSymbol = stockSymbol.value;
mainview.beep();
mainview.qmlloader.source = “mainmenu.qml”
}
To retrieve data, simply read a property from the mainview.qml file. An example can be found in screengraph.qml:
Component.onCompleted: {
stockModel.stockId = mainview.stockSymbol;
stockModel.stockDataCycle = “d”;
stockModel.interval = mainview.interval;
….
}