First, it's helpful to understand the following:
The QML language is designed by Qt engineers, specifically for Qt applications.
However, the JavaScript language is designed by people that are completely unrelated to the Qt Project. JavaScript is far older than QML, and it is widely used outside of QML.
JavaScript is an imperative language.
QML is a hybrid language. It consists of imperative parts (which are JavaScript expressions) and declarative parts. In other words, QML contains JavaScript plus other things.
If you don't know the difference between declarative and imperative programming, do some "extra reading":http://stackoverflow.com/questions/1784664/what-is-the-difference-between-declarative-and-imperative-programming
Secondly, make sure you understand how a "JavaScript conditional operator":https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator works.
Ok, now to address your questions and observations.
To specify a property and a signal handler in a QML component, you need the following format:
@
<COMPONENT> {
<PROPERTY>: <JAVASCRIPT_EXPRESSION>
<SIGNAL_HANDLER>: <JAVASCRIPT_STATEMENT>
}
@
Examine the snippet above: The colon "assigns" JavaScript code to a QML component's attribute.
Note that a property's JS code is used differently from a signal handler's JS code:
The JAVASCRIPT_EXPRESSION associated with a PROPERTY is evaluated every time a variable in the JAVASCRIPT_EXPRESSION changes value.
The JAVASCRIPT_STATEMENT associated with a SIGNAL_HANDLER is evaluated every time the corresponding signal is emitted.
[quote author="Binary91" date="1419677212"]when I use this line outside of the js statement using the colon ":", the binding works perfectly:
@{
image.source: mousearea.pressed ? "imgPressed.png" : "img.png"
mousearea.onClicked:
{
}
}@
[/quote]
The QML attribute is image.source (a property)
Your JavaScript expression is mousearea.pressed ? "imgPressed.png" : "img.png"
[quote author="Binary91" date="1419677212"]I don't understand why the following line in a js statement is a static assignment and not a property binding:
@Button
{
mousearea.onClicked:
{
image.source = mousearea.pressed ? "imgPressed.png" : "img.png"
}
}@
[/quote]
The QML attribute is mousearea.onclicked (a signal handler)
Your JavaScript statement is image.source = mousearea.pressed ? "imgPressed.png" : "img.png"
Remember, this statement is evaluated whenever the clicked signal is emitted.
** Every time you release the mouse button, the QML engine checks the value of mousearea.pressed, and then chooses a URL, and then assigns that URL to image.source
** mousearea.pressed is always false when you release the mouse button, so the same URL is chosen every time this statement is evaluated. That's why it feels like nothing is happening.
[quote author="Binary91" date="1419677212"]when I try to use the colon ":" in the js statement like this:
@{
mousearea.onClicked:
{
image.source: mousearea.pressed ? "imgPressed.png" : "img.png"
}
}@
, then QtCreator throws an error and doesn't compile my code...[/quote]
The QML attribute is mousearea.onclicked (a signal handler)
You attempted to use image.source: mousearea.pressed ? "imgPressed.png" : "img.png" as the JavaScript statement. However, this is illegal JavaScript code.
Remember, QML needs to follow the rules of JavaScript
Is this understandable? If not, please let me know and I'll try to explain differently.
