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.

Download the code.

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;
    ….
}