forked from qt-creator/qt-creator
485aad6e9e
Add links to the new topic. Change-Id: I92640385feba70a56bacfe24497eeba3d8409567 Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>
156 lines
7.2 KiB
Plaintext
156 lines
7.2 KiB
Plaintext
/****************************************************************************
|
|
**
|
|
** Copyright (C) 2021 The Qt Company Ltd.
|
|
** Contact: https://www.qt.io/licensing/
|
|
**
|
|
** This file is part of the Design Studio documentation.
|
|
**
|
|
** Commercial License Usage
|
|
** Licensees holding valid commercial Qt licenses may use this file in
|
|
** accordance with the commercial license agreement provided with the
|
|
** Software or, alternatively, in accordance with the terms contained in
|
|
** a written agreement between you and The Qt Company. For licensing terms
|
|
** and conditions see https://www.qt.io/terms-conditions. For further
|
|
** information use the contact form at https://www.qt.io/contact-us.
|
|
**
|
|
** GNU Free Documentation License Usage
|
|
** Alternatively, this file may be used under the terms of the GNU Free
|
|
** Documentation License version 1.3 as published by the Free Software
|
|
** Foundation and appearing in the file included in the packaging of
|
|
** this file. Please review the following information to ensure
|
|
** the GNU Free Documentation License version 1.3 requirements
|
|
** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
|
|
**
|
|
****************************************************************************/
|
|
|
|
/*!
|
|
\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.
|
|
|
|
You can find a video tutorial about creating JavaScript for generating mock
|
|
data for a UI
|
|
\l{https://resources.qt.io/development-topic-ui-design/qtdesignstudio-clustertutorial-partfour}
|
|
{here}.
|
|
|
|
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 or Project} >
|
|
\uicontrol {Files and Classes} > \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 or Project} >
|
|
\uicontrol {Files and Classes} > \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
|
|
*/
|