| /**************************************************************************** |
| ** |
| ** Copyright (C) 2016 The Qt Company Ltd. |
| ** Contact: https://www.qt.io/licensing/ |
| ** |
| ** 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 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. |
| ** $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 qmlapp/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 qmlapp/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 qmlapp/usecases/integratingjs.qml 0 |
| |
| \image qmlapp/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 \l {JavaScript Expressions in QML Documents}. |
| */ |