Simulating Application Logic

You can use JavaScript to simulate application logic that brings your user interface prototype to life.

You will need the following files:

  • Qt Quick file that will specify the API of the UI
  • JavaScript file that generates mock data for the UI. For more information about using JavaScript, see Integrating QML and JavaScript.
  • Module definition file (qmldir) that declares the QML type you specify in the Qt Quick file. For more information, see Module Definition qmldir Files.

Here, you will need to write some C++ code. Namely, the Qt Quick file will contain a QObject-derived class that is registered with the QML type system as a singleton type. This enables the use of global property values in the user interface prototype.

You can find a video tutorial about creating JavaScript for generating mock data for a UI prototype here.

To create the necessary files:

  1. In the File Explorer, create a folder for the JavaScript files (for example, backend) and another one for the mock data (for example, Data) in your project folder.

    Note: Make sure to capitalize the data folder name, because you will need to import it as a QML type later, and QML type names must be capitalized.

  2. In Qt Design Studio, open the project file (.qmlproject) to add the backend folder to the list of plugin directories passed to the QML runtime:
    importPaths: [ "imports", "backend" ]
  3. Select File > New File or Project > Files and Classes > Qt Quick Files > Qt Quick File > Choose to add a Qt Quick file that will specify the API of the UI.
  4. Follow the instructions of the wizard to create the Qt Quick file in the data folder. In these instructions, the file is called Values.qml.

    Note: Make sure to capitalize the filename, because it will become a custom QML type.

  5. Select File > New File or Project > Files and Classes > JavaScript > JavaScript File > Choose to create a JavaScript file that generates mock data for the UI.
  6. Follow the instructions of the wizard to create the JavaScript file in the data folder. In these instructions, the file is called simulation.js.
  7. Delete the template text in JavaScript file and save the file.
  8. In a text editor such as Notepad, create a module definition file called qmldir with the following contents and place it in the data directory:
    singleton Values 1.0 Values.qml
  9. Open Values.qml in the Text Editor tab for editing.
  10. 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:
    pragma Singleton
  11. Add the following import statement to import the simulation.js file to use the functionality that it provides:
    #import simulation.js as JS
  12. Add the following code to create a QObject-derived class that will list the global properties you want to simulate and their default values:
    QObject {
        id: values
    
        // property values to simulate
        property int name1: default1
        property string name2: default2
        property real name3: default3
    
    }

    Note: You must export the properties as aliases by selecting Export Property as Alias in the Nut menu of the property in the Properties view. Exported properties are listed in Connections > Properties, where you can change their names.

  13. Add the following code to use a Timer type to specify a range of values for the property:
    property Timer name1Timer: Timer{
        running: true
        repeat: true
        onTriggered: JS.name1Timer()
        interval: 10

    Note: You must add the JavaScript method to the JavaScript file.

  14. Open the main UI file of the project and add the following code to import the data folder as a QML module:
    #import Data 1.0 as Data
  15. Select Set Binding in the Nut menu of the property to bind the property value to the value defined in the values file. For example, you would set the following expression for name1:
    Data.Values.name1

Available under certain Qt licenses.
Find out more.