path: root/doc/src/declarative/propertybinding.qdoc

/****************************************************************************
**
** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies).
** All rights reserved.
** Contact: Nokia Corporation (qt-info@nokia.com)
**
** This file is part of the documentation of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:FDL$
** No Commercial Usage
** This file contains pre-release code and may not be distributed.
** You may use this file in accordance with the terms and conditions
** contained in the Technology Preview License Agreement accompanying
** this package.
**
** GNU Free Documentation License
** 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.
**
** If you have questions regarding the use of this file, please contact
** Nokia at qt-info@nokia.com.
** $QT_END_LICENSE$
**
****************************************************************************/

/*!
\page propertybinding.html
\ingroup qml-features
\contentspage QML Features
\previouspage QML Syntax
\nextpage {QML Basic Types}{Data Types}
\title Property Binding

\section1 Properties

QML property rules coincide with many of JavaScript's property rules.
Properties begin with a lowercase letter (with the exception of
\l{Attached Properties}). \l {JavaScript Reserved Words}{JavaScript reserved words}
are not valid property names.

\section1 Property types

QML supports properties of many types (see \l{QML Basic Types}). The basic types
include int, real, bool, string, color, and lists.

\code
Item {
    x: 10.5             // a 'real' property
    ...
    state: "details"    // a 'string' property
    focus: true         // a 'bool' property
}
\endcode

QML properties are \i type-safe. That is, properties only allow you to assign
a value that matches the property type. For example, the \c x property of item is a real, and if you try to assign
a string to it you will get an error.

\badcode
Item {
    property real value: "hello"  // illegal!
}
\endcode

\section1 The \c id Property

Each object can be given a special unique property called an \c id. No other object within the
same QML component (see \l{QML Documents}) can have the same \c id value. Assigning an id enables the object
to be referred to by other objects and scripts.

The first Rectangle element below has an \c id, "myRect". The second Rectangle element defines its
own width by referring to \tt myRect.width, which means it will have the same \tt width
value as the first Rectangle element.

\code
Item {
    Rectangle {
        id: myRect
        width: 100
        height: 100
    }
    Rectangle {
        width: myRect.width
        height: 200
    }
}
\endcode

Note that an \c id must begin with a lower-case letter or an underscore. The \c id cannot contain characters other than letters, numbers, underscores, and \l {JavaScript Reserved Words}{JavaScript reserved words}.


\section1 List properties

List properties look like this:

\code
Item {
    children: [
        Image {},
        Text {}
    ]
}
\endcode

The list is enclosed in square brackets, with a comma separating the
list elements. In cases where you are only assigning a single item to a
list, you can omit the square brackets:

\code
Image {
    children: Rectangle {}
}
\endcode

Items in the list can be accessed by the \c index. See the \l{list}{list type} documentation
for more details about list properties and their available operations.


\section1 Default Properties

Each object type can specify one of its list or object properties as its default property.
If a property has been declared as the default property, the property tag can be omitted.

For example this code:
\code
State {
    changes: [
        PropertyChanges {},
        PropertyChanges {}
    ]
}
\endcode

can be simplified to:

\code
State {
    PropertyChanges {}
    PropertyChanges {}
}
\endcode

because \c changes is the default property of the \c State type.

\section1 Grouped Properties
\target dot properties

In some cases properties form a logical group and use a 'dot' or grouped notation
to show this.

Grouped properties can be written like this:
\qml
Text {
    font.pixelSize: 12
    font.bold: true
}
\endqml

or like this:
\qml
Text {
    font { pixelSize: 12; bold: true }
}
\endqml

In the element documentation grouped properties are shown using the 'dot' notation.

\section1 Attached Properties
\target attached-properties

Some objects attach properties to another object.  Attached Properties
are of the form \c {Type.property} where \c Type is the type of the
element that attaches \c property.

For example:
\code
Component {
    id: myDelegate
    Text {
        text: "Hello"
        color: ListView.isCurrentItem ? "red" : "blue"
    }
}
ListView {
    delegate: myDelegate
}
\endcode

The \l ListView element attaches the \c ListView.isCurrentItem property
to each delegate it creates.

Another example of attached properties is the \l Keys element which
attaches properties for handling key presses to
any visual Item, for example:

\code
Item {
    focus: true
    Keys.onSelectPressed: console.log("Selected")
}
\endcode
\section1 Property Binding
Property binding is a declarative way of specifying the value of a property.  Binding allows
a property's value to be expressed as an JavaScript expression that defines the value relative
to other property values or data accessible in the application.  The property value is
automatically kept up to date if the other properties or data values change.

Property bindings are created implicitly in QML whenever a property is assigned a JavaScript
expression.  The following QML  code uses two property bindings to connect the size of the rectangle
to that of \c otherItem.

\code
Rectangle {
    width: otherItem.width
    height: otherItem.height
}
\endcode

QML extends a standards compliant JavaScript engine, so any valid JavaScript expression can be
used as a property binding.  Bindings can access object properties, make function calls and even
use built-in JavaScript objects like \c {Date} and \c {Math}.  Assigning a constant value to a
property can even be thought of as a binding - after all, a constant is a valid JavaScript
expression!  Here are some examples of more complex bindings:

\code
Rectangle {
    function calculateMyHeight() {
        return Math.max(otherItem.height, thirdItem.height);
    }

    anchors.centerIn: parent
    width: Math.min(otherItem.width, 10)
    height: calculateMyHeight()
    color: { if (width > 10) "blue"; else "red" }
}
\endcode

While syntactically bindings can be of arbitrary complexity, if a binding starts to become
overly complex - such as involving multiple lines, or imperative loops - it may be better
to refactor the component entirely, or at least factor the binding out into a separate
function.

\section1 Changing Bindings

The \l PropertyChanges element can be used within a state change to modify the bindings on
properties.

This example modifies the \l Rectangle's width property binding to be \c {otherItem.height}
when in the "square" state.  When it returns to its default state, width's original property
binding will have been restored.

\code
Rectangle {
    id: rectangle
    width: otherItem.width
    height: otherItem.height

    states: State {
        name: "square"
        PropertyChanges {
            target: rectangle
            width: otherItem.height
        }
    }
}
\endcode


\section1 Effects of Property Assignment in JavaScript

Assigning a property value from JavaScript does \e not create a property binding.
For example:

\code
Rectangle {

    Component.onCompleted: {
        width = otherItem.width;
    }
}
\endcode

Instead of creating a property binding, this simply sets the \c width of the \l Rectangle
to the value of \c other.width at the time the JavaScript code is invoked.  See
\l {Property Assignment vs Property Binding} for more details.

Also note that assigning a value to a property that is currently bound will remove the previous binding.
A property can only have one value at a time, and if any code explicitly sets
this value, the binding is removed.  The \l Rectangle in the example below will have
a width of 13, regardless of the \c otherItem's width.

\code
Rectangle {
    width: otherItem.width

    Component.onCompleted: {
        width = 13;
    }
}
\endcode

There is no way to create a property binding directly from imperative JavaScript code,
although it is possible to set up a \l Binding object (shown below).


\section1 Binding Element

The implicit binding syntax shown previously is easy to use and works perfectly for most uses
of bindings.  In some advanced cases, it is necessary to create bindings explicitly using the
\l Binding element.

For example, to bind a property exposed from C++ (\c system.brightness) to a value
coming from QML (\c slider.value), you could use the Binding element as follows:
\qml
Binding {
    target: system
    property: "brightness"
    value: slider.value
}
\endqml
*/