// Copyright (C) 2021 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only

/*!
    \page quick-property-bindings.html
    \previouspage quick-signals.html
    \nextpage quick-dynamic-properties.html

    \title Adding bindings between properties

    To dynamically change the behavior of a component, you can create a
    \e binding between the properties of two components. To create a property
    binding, a property is assigned a JavaScript expression that evaluates to
    the desired value. Behind the scenes, the variables in the binding
    expression are monitored. When a change is detected, the binding
    expression is re-evaluated and the new result is applied to the property.

    At its simplest, a binding may be a reference to another property.
    For example, the height of a component can be bound to the height of its
    parent, so that when the parent height changes, the component height is
    adjusted automatically.

    For more information about the use of property bindings, see
    \l{Property Binding}.

    You can create bindings between components in \uicontrol Bindings.

    \image {qmldesigner-bindings.webp} {The Bindings tab in the Connections view.}

    \section1 Creating bindings between component properties

    To bind a property of a component to the property of another component:

    \list 1

        \li Place two components in the \uicontrol {2D} view.

        \image {qmldesigner-components-before-binding.webp} {Two components next to each other in the 2D view.}

        \li Name the first component as \e {viewBox}.
        \li Name the second component as \e {connectBox}.
        \li Apply a thick \e black \uicontrol Border and a \e blue \uicontrol{Color} to the \e {viewBox} component.
        \li Select the \e {connectBox} component.
        \li Select \uicontrol Bindings from the \uicontrol Connections view.
        \li Select the \imageplus
             (\uicontrol Add) button to add a binding to the currently selected
            component.

        \image qmldesigner-updated-bindings-editor.webp {The Add Binding dialog.}

        \li From the pop-up \uicontrol {Bindings editor}, in the \uicontrol From section,
            select \e {viewBox} as the parent component, then select its \uicontrol {border.color}
            property.
        \li In the \uicontrol To section you find the \e {connectBox} component already selected
            as the target component. Select \uicontrol {color} from the \uicontrol {drop-down}
            below to set its affected property.
        \li You see the \uicontrol {border.color} of the \e {viewBox} component
            instantly getting applied to the \uicontrol {color} of the \e {connectBox}
            component.

        \image qmldesigner-components-after-binding.webp {Two components next to each other in the 2D view with the property binding applied.}

    \endlist

    All the \uicontrol Bindings connections have automated JavaScript expression in the
    \uicontrol {Code view}. For more information, see \l{Setting bindings}.

    For examples of creating property bindings, see:

    \list
        \li \l{Using states to change component property values}
        \li \l{Exporting properties}
    \endlist

    \include creator-logical-operators.qdocinc logical operators

*/
