// Copyright (C) 2021 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only

/*!
    \previouspage qtquick-placeholder-data.html
    \page studio-javascript.html
    \nextpage studio-simulink.html

    \title Simulating application logic

    You can use JavaScript to simulate application logic that brings your UI to
    life.

    You need the following files:

    \list
        \li Component file (.qml) that will specify the API of the UI
        \li JavaScript file that generates mock data for the UI.
            For more information about using JavaScript, see
            \l{Integrating QML and JavaScript}.
        \li Module definition file (\e qmldir) that declares the component
            (QML type) you specify in the UI file. For more information, see
            \l {Module Definition qmldir Files}.
    \endlist

    Here, you will create a component based on the QObject class that will
    be registered as a singleton type. This enables the use of global
    property values in the UI.

    To create the necessary files:

    \list 1
        \li In the File Explorer, create a new folder for the mock data
            inside the \e imports folder in your project folder (for example, \e Data).
            \note Make sure to capitalize the \e Data folder name because you
            will need to import it as a component later, and component names must
            be capitalized.
            \note If you place this folder somewhere else in the project, you will
            need to add the path to the list of imports. To do this, in \QDS, open
            the project file (.qmlproject) to add the path to the list of plugin
            directories passed to the QML runtime. For example, if you placed the
            \e Data folder inside another folder called \e backend in the root of
            your project, you would add the following:
            \code
            importPaths: [ "imports", "backend" ]
            \endcode
        \li Select \uicontrol File > \uicontrol {New File} >
            \uicontrol {Qt Quick Files} >
            \uicontrol {Qt Quick File} > \uicontrol Choose to add a Qt
            Quick file that will specify the API of the UI.
        \li Follow the instructions of the wizard to create the Qt Quick file
            in the data folder. In these instructions, the file is called
            \e Values.qml.
            \note Make sure to capitalize the filename because it will become
            a custom component.
        \li Select \uicontrol File > \uicontrol {New File} >
            \uicontrol {JavaScript} >
            \uicontrol {JavaScript File} > \uicontrol Choose to create a
            JavaScript file that generates mock data for the UI.
        \li Follow the instructions of the wizard to create the JavaScript file
            in the Data folder. In these instructions, the file is called
            \e {simulation.js}.
        \li Delete the template text in JavaScript file and save the file.
        \li In a text editor such as Notepad, create a module definition file
            called \e qmldir with the following contents and place it in the
            data directory:
            \code
            singleton Values 1.0 Values.qml
            \endcode
        \li Open \e Values.qml in the \l{Code} view for editing.
        \li Add the following code to the top of the file to register the
            QObject-derived class that you will use to expose the global
            properties as a singleton type:
            \code
            pragma Singleton
            \endcode
        \li Add the following import statement to import the \e {simulation.js}
            file to use the functionality that it provides:
            \code
            import "simulation.js" as JS
            \endcode
        \li Replace the default Item declaration with the following code to
            create a QObject-derived class that will list the global
            properties you want to simulate and their default values:
            \code
            QtObject {
                id: values

                // property values to simulate
                property int name1: 5
                property string name2: "foo"
                property real name3: 2.5

            }
            \endcode
        \li Add the following code to use a \l Timer component to specify a range of
            values for the property:
            \code
            property Timer name1Timer: Timer{
                running: true
                repeat: true
                onTriggered: JS.name1Timer()
                interval: 10
            }
            \endcode
            This will execute the function defined for \c onTriggered every 10 ms.
            Within your javascript functions you can perform the necessary
            actions to simulate the behavior you need. Review
            \l {Importing JavaScript Resources in QML} for more details.
            \note You must add the JavaScript method \c name1Timer()
            to the JavaScript file. You have the option of adding this JavaScript
            code directly within the \c onTriggered handler as well.
        \li Open the .ui.qml file of the Component that will use the simulated data
            and add the following code to the top of the file in order to import
            the Data folder as a QML module:
            \code
            import Data 1.0
            \endcode
        \li Returning to the \uicontrol {2D} view, locate the property that
            should be bound to the simulated values. Select \imageactionicon
            and \uicontrol {Set Binding} for the property and enter the
            simulated Value property. For example, you would set the following
            expression to bind to the example \c name1 property:
            \code
            Values.name1
            \endcode
    \endlist
*/
