1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
// 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 will 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 \l{Text Editor} 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 {Form Editor}, locate the property that
should be bound to the simulated values. Select \inlineimage icons/action-icon.png
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
*/
|
