diff options
Diffstat (limited to 'src/quick/doc/src/appdevguide/usecases/integratingjs.qdoc')
-rw-r--r-- | src/quick/doc/src/appdevguide/usecases/integratingjs.qdoc | 41 |
1 files changed, 40 insertions, 1 deletions
diff --git a/src/quick/doc/src/appdevguide/usecases/integratingjs.qdoc b/src/quick/doc/src/appdevguide/usecases/integratingjs.qdoc index 3a261a16d5..d4aef9b0cb 100644 --- a/src/quick/doc/src/appdevguide/usecases/integratingjs.qdoc +++ b/src/quick/doc/src/appdevguide/usecases/integratingjs.qdoc @@ -26,6 +26,45 @@ ****************************************************************************/ /*! \page qtquick-usecase-integratingjs.html -\title Use Case - Integrating JavaScript In QML +\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}. */ |