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
|
/****************************************************************************
**
** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies).
** Contact: http://www.qt-project.org/legal
**
** This file is part of the documentation of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:FDL$
** 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 Digia. For licensing terms and
** conditions see http://qt.digia.com/licensing. For further information
** use the contact form at http://qt.digia.com/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: http://www.gnu.org/copyleft/fdl.html.
** $QT_END_LICENSE$
**
****************************************************************************/
/*!
\page qtquick-usecase-integratingjs.html
\title Use Case - Integrating JavaScript in QML
\brief Example of how to integrate JavaScript code in QML applications
JavaScript code can be easily integrated into QML to provide UI logic, imperative control, or other benefits.
\section1 Using JavaScript Expressions for Property Values
JavaScript expressions can be used in QML as bindings. For example
\code
Item {
width: Math.random()
height: width < 100 ? 100 : (width + 50) / 2
}
\endcode
Note that function calls, like Math.random(), will not be revaluated unless their arguments
change. So binding to Math.random() will be one random number and not revaluated, but if the width is changed in some
other manner, the height binding will be reevaluated to take that into account.
\section1 Adding JavaScript Functions in QML
JavaScript functions can be declared on QML items, like in the below example. This allows you to call the method
using the item id.
\snippet qml/usecases/integratingjs-inline.qml 0
\section1 Using JavaScript files
JavaScript files can be used for abstracting out logic from QML files. To do this, first place your functions inside a
.js file like in the example shown.
\snippet qml/usecases/myscript.js 0
Then import the file into any .qml file that needs to use the functions, like the example QML file below.
\snippet qml/usecases/integratingjs.qml 0
\image qml-uses-integratingjs.png
For further details on the JavaScript engine used by QML, as well as the difference from browser JS, see the full
documentation on \c {Using JavaScript Expressions with QML}.
*/
|
