summaryrefslogtreecommitdiffstats
path: root/doc/src/declarative/javascriptblocks.qdoc
diff options
context:
space:
mode:
authorQt Continuous Integration System <qt-info@nokia.com>2010-04-13 02:24:13 (GMT)
committerQt Continuous Integration System <qt-info@nokia.com>2010-04-13 02:24:13 (GMT)
commit3e94b3a77affeef80544e48949e018ced4e0d96e (patch)
tree621251f4fd85ced80d80e15f8d120e90bc095585 /doc/src/declarative/javascriptblocks.qdoc
parente9a0067ef4b272f1893522959dc15561970590ea (diff)
parentff0020481398e7c109973949260a42711c4cdcdc (diff)
downloadQt-3e94b3a77affeef80544e48949e018ced4e0d96e.zip
Qt-3e94b3a77affeef80544e48949e018ced4e0d96e.tar.gz
Qt-3e94b3a77affeef80544e48949e018ced4e0d96e.tar.bz2
Merge branch '4.7' of scm.dev.nokia.troll.no:qt/qt-qml into 4.7-integration
* '4.7' of scm.dev.nokia.troll.no:qt/qt-qml: (147 commits) doc fixes Don't test XmlListModel examples on platforms without QtXmlPatterns More error output for QML_IMPORT_TRACE=1 Fix declarative examples autotest, avoid using native separators Doc: update Rectangle smooth painting screenshot. Add some TextInput properties and methods Remove GraphicsObjectContainer from the documentation. import Qt 4.6 -> import Qt 4.7 Move documentation code to snippet. Test fix. Fix test Fix test on QWS. Fix PathView crash. Make bindings dump more useful Improve font value type documentation. coding conventions Doc fixes Warning Read Maemo orientation at startup Exclude gestures from examples autotest ...
Diffstat (limited to 'doc/src/declarative/javascriptblocks.qdoc')
-rw-r--r--doc/src/declarative/javascriptblocks.qdoc75
1 files changed, 37 insertions, 38 deletions
diff --git a/doc/src/declarative/javascriptblocks.qdoc b/doc/src/declarative/javascriptblocks.qdoc
index c198295..8ffe58c 100644
--- a/doc/src/declarative/javascriptblocks.qdoc
+++ b/doc/src/declarative/javascriptblocks.qdoc
@@ -41,25 +41,25 @@
/*!
\page qdeclarativejavascript.html
-\title Integrating JavaScript
+\title Integrating JavaScript
-QML encourages building UIs declaratively, using \l {Property Binding} and the
+QML encourages building UIs declaratively, using \l {Property Binding} and the
composition of existing \l {QML Elements}. To allow the implementation of more
advanced behavior, QML integrates tightly with imperative JavaScript code.
The JavaScript environment provided by QML is stricter than that in a webbrowser.
In QML you cannot add, or modify, members of the JavaScript global object. It
is possible to do this accidentally by using a variable without declaring it. In
-QML this will throw an exception, so all local variables should be explicitly
+QML this will throw an exception, so all local variables should be explicitly
declared.
-In addition to the standard JavaScript properties, the \l {QML Global Object}
+In addition to the standard JavaScript properties, the \l {QML Global Object}
includes a number of helper methods that simplify building UIs and interacting
with the QML environment.
\section1 Inline JavaScript
-Small JavaScript functions can be written inline with other QML declarations.
+Small JavaScript functions can be written inline with other QML declarations.
These inline functions are added as methods to the QML element that contains
them.
@@ -73,30 +73,31 @@ Item {
return a * factorial(a - 1);
}
- MouseRegion {
+ MouseArea {
anchors.fill: parent
onClicked: print(factorial(10))
}
}
\endcode
-As methods, inline functions on the root element in a QML component can be
+As methods, inline functions on the root element in a QML component can be
invoked by callers outside the component. If this is not desired, the method
can be added to a non-root element or, preferably, written in an external
JavaScript file.
\section1 Separate JavaScript files
-Large blocks of JavaScript should be written in separate files. Like element
-types, external JavaScript files are \c {import}'ed into QML files.
+Large blocks of JavaScript should be written in separate files. These files
+can be imported into QML files using an \c import statement, in the same way
+that \l {Modules}{modules} are imported.
-The \c {factorial()} method used in the \l {Inline JavaScript} section could
-be refactored into an external file, and accessed like this.
+For example, the \c {factorial()} method in the above example for \l {Inline JavaScript}
+could be moved into an external file named \c factorial.js, and accessed like this:
\code
import "factorial.js" as MathFunctions
Item {
- MouseRegion {
+ MouseArea {
anchors.fill: parent
onClicked: print(MathFunctions.factorial(10))
}
@@ -107,24 +108,24 @@ Both relative and absolute JavaScript URLs can be imported. In the case of a
relative URL, the location is resolved relative to the location of the
\l {QML Document} that contains the import. If the script file is not accessible,
an error will occur. If the JavaScript needs to be fetched from a network
-resource, the QML document will remain in the
-\l {QDeclarativeComponent::status()}{waiting state} until the script has been
+resource, the QML document has a "Loading"
+\l {QDeclarativeComponent::status()}{status} until the script has been
downloaded.
-Imported JavaScript files are always qualified using the "as" keyword. The
+Imported JavaScript files are always qualified using the "as" keyword. The
qualifier for JavaScript files must be unique, so there is always a one-to-one
mapping between qualifiers and JavaScript files.
\section2 Code-Behind Implementation Files
-Most JavaScript files imported into a QML file are stateful, logic implementations
-for the QML file importing them. In these cases, for QML component instances to
-behave correctly each instance requires a separate copy of the JavaScript objects
+Most JavaScript files imported into a QML file are stateful, logic implementations
+for the QML file importing them. In these cases, for QML component instances to
+behave correctly each instance requires a separate copy of the JavaScript objects
and state.
The default behavior when importing JavaScript files is to provide a unique, isolated
-copy for each QML component instance. The code runs in the same scope as the QML
-component instance and consequently can can access and manipulate the objects and
+copy for each QML component instance. The code runs in the same scope as the QML
+component instance and consequently can can access and manipulate the objects and
properties declared.
\section2 Stateless JavaScript libraries
@@ -133,8 +134,8 @@ Some JavaScript files act more like libraries - they provide a set of stateless
helper functions that take input and compute output, but never manipulate QML
component instances directly.
-As it would be wasteful for each QML component instance to have a unique copy of
-these libraries, the JavaScript programmer can indicate a particular file is a
+As it would be wasteful for each QML component instance to have a unique copy of
+these libraries, the JavaScript programmer can indicate a particular file is a
stateless library through the use of a pragma, as shown in the following example.
\code
@@ -161,15 +162,13 @@ parameters.
It is occasionally necessary to run some imperative code at application (or
component instance) "startup". While it is tempting to just include the startup
script as \e {global code} in an external script file, this can have severe limitations
-as the QML environment may not have been fully established. For example, some objects
+as the QML environment may not have been fully established. For example, some objects
might not have been created or some \l {Property Binding}s may not have been run.
-\l {QML Script Restrictions} covers the exact limitations of global script code.
+\l {QML JavaScript Restrictions} covers the exact limitations of global script code.
The QML \l Component element provides an \e attached \c onCompleted property that
can be used to trigger the execution of script code at startup after the
-QML environment has been completely established.
-
-The following QML code shows how to use the \c Component::onCompleted property.
+QML environment has been completely established. For example:
\code
Rectangle {
@@ -182,24 +181,24 @@ Rectangle {
\endcode
Any element in a QML file - including nested elements and nested QML component
-instances - can use this attached property. If there is more than one onCompleted
+instances - can use this attached property. If there is more than one \c onCompleted()
handler to execute at startup, they are run sequentially in an undefined order.
-\section1 QML JavaScript Restrictions
+\section1 QML JavaScript Restrictions
QML executes standard JavaScript code, with the following restrictions:
\list
\o JavaScript code cannot modify the global object.
-In QML, the global object is constant - existing properties cannot be modified or
+In QML, the global object is constant - existing properties cannot be modified or
deleted, and no new properties may be created.
-Most JavaScript programs do not intentionally modify the global object. However,
+Most JavaScript programs do not intentionally modify the global object. However,
JavaScript's automatic creation of undeclared variables is an implicit modification
of the global object, and is prohibited in QML.
-Assuming that the \c a variable does not exist in the scope chain, the following code
+Assuming that the \c a variable does not exist in the scope chain, the following code
is illegal in QML.
\code
@@ -217,18 +216,18 @@ for (var ii = 1; ii < 10; ++ii) a = a * ii;
console.log("Result: " + a);
\endcode
-Any attempt to modify the global object - either implicitly or explicitly - will
-cause an exception. If uncaught, this will result in an warning being printed,
+Any attempt to modify the global object - either implicitly or explicitly - will
+cause an exception. If uncaught, this will result in an warning being printed,
that includes the file and line number of the offending code.
\o Global code is run in a reduced scope
During startup, if a QML file includes an external JavaScript file with "global"
code, it is executed in a scope that contains only the external file itself and
-the global object. That is, it will not have access to the QML objects and
+the global object. That is, it will not have access to the QML objects and
properties it \l {QML Scope}{normally would}.
-Global code that only accesses script local variable is permitted. This is an
+Global code that only accesses script local variable is permitted. This is an
example of valid global code.
\code
@@ -242,8 +241,8 @@ Global code that accesses QML objects will not run correctly.
var initialPosition = { rootObject.x, rootObject.y }
\endcode
-This restriction exists as the QML environment is not yet fully established.
-To run code after the environment setup has completed, refer to
+This restriction exists as the QML environment is not yet fully established.
+To run code after the environment setup has completed, refer to
\l {Running JavaScript at Startup}.
\endlist