aboutsummaryrefslogtreecommitdiffstats
path: root/src/quick/doc/src/appdevguide/usecases/integratingjs.qdoc
diff options
context:
space:
mode:
Diffstat (limited to 'src/quick/doc/src/appdevguide/usecases/integratingjs.qdoc')
-rw-r--r--src/quick/doc/src/appdevguide/usecases/integratingjs.qdoc41
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}.
*/