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

/*!
    \page studio-terms.html
    \previouspage studio-use-cases.html
    \nextpage {Examples}

    \title Concepts and Terms

    This topic describes main \QDS concepts and terms:

    \list
        \li \l{glossary-asset}{Asset}
        \li \l{glossary-binding}{Binding}
        \li \l{glossary-component}{Component}
        \li \l{glossary-connection}{Connection}
        \li \l{glossary-device}{Device}
        \li \l{glossary-mode}{Mode}
        \li \l{glossary-project}{Project}
        \li \l{glossary-property}{Property}
        \li \l{glossary-signal}{Signal}
        \li \l{glossary-state}{State}
        \li \l{glossary-transition}{Transition}
    \endlist

    \section1 Asset
    \target glossary-asset

    An \e asset is an image, font file, 3D model, or other supported file that
    you add to your \l{glossary-project}{project}.

    \image qtquick-assets-tab.png "Assets"

    Assets are packaged with \l{glossary-component}{components} for delivery
    to users.

    Read more about assets:

    \list
        \li \l{Assets}
    \endlist

    \section1 Binding
    \target glossary-binding

    A \e binding is a declarative way of specifying the value of a
    \l{glossary-property}{property}. Binding allows a property value
    to be expressed as a JavaScript expression that defines the value
    relative to other property values or data accessible in the
    application. The property value is automatically updated if the
    other properties or data values change.

    At its simplest, a binding may be a reference to another property. For
    example, the height of a \l{glossary-component}{component} can be bound
    to the height of its parent, so that when the parent height changes, the
    component height is adjusted automatically. Similarly, the opacity of a
    component can be bound to the opacity of its parent component.

    \image qtquick-connection-editor-assignment.png "Binding Editor"

    Property bindings are created implicitly whenever a property is assigned a
    JavaScript expression.

    Read more about bindings:

    \list
        \li \l{Adding Bindings Between Properties}
        \li \l{Setting Bindings}
    \endlist

    \section1 Component
    \target glossary-component

    A \e component is a reusable building block for a UI.

    \QDS comes with \e {preset components} that you can use in your UI by
    creating instances of them. These are similar to \e Symbols in Sketch or
    \e Prefab in Unity.

    \image qtquick-components-tab.png "Preset components in Components"

    Some of the \l {Component Types}{preset components} represent simple shapes,
    text, or images, while others represent complex UI controls with full
    functionality, such as spin boxes or sliders. You can also add instances of
    preset \l {3D Components}{3D components} to your UIs. You can find all
    the preset components in \l Components.

    To build \l {Creating Component Instances}{your own components}, you can
    modify the \l{glossary-property}{properties} of the component instances
    and combine them.

    A component is specified within one file (with the file extension
    \e ui.qml or \e .qml). For example, a Button component may be defined
    in Button.ui.qml. Typically, the visual appearance of a component is
    defined in a \e {UI file}. To create component files, you can use
    \l{Creating Components from Scratch}{wizard templates}, or
    \l{Turning Component Instances into Custom Components}
    {move component instances into separate component files}.

    Read more about components:

    \list
        \li \l {Preset Components}
        \li \l {Creating Component Instances}
        \li \l {Creating Custom Components}
    \endlist

    \section1 Connection
    \target glossary-connection

    A \e connection can be created between a \l{glossary-component}{component}
    and \l{glossary-signal}{signal} to determine how the UI should react to
    application events. Another way to create connections between components
    is to create \l{glossary-binding}{bindings} between the values of their
    \l{glossary-property}{properties}.

    \image qmldesigner-connections.png "The Connections view"

    Read more about connections:

    \list
        \li \l{Connections}
        \li \l{Working with Connections}
    \endlist

    \section1 Device
    \target glossary-device

    An embedded device.

    Read more about devices:

    \list
        \li \l{Previewing on Devices}
    \endlist

    \section1 Mode
    \target glossary-mode

    A \e mode adapts the \QDS UI to the different UI design
    tasks at hand. Each mode has its own view that shows only the information
    required for performing a particular task, and provides only the most
    relevant features and functions related to it. As a result, the majority
    of the \QDS window area is always dedicated to the actual task.

    For a designer, the most important modes are \uicontrol Design for the
    actual work, \uicontrol Welcome for opening examples and tutorials, and
    \uicontrol Help for reading documentation. The other modes are mostly
    needed for application development.

    \image studio-design-mode.webp "Design mode"

    The mode selector is hidden by default.

    To show the mode selector, go to \uicontrol Views >
    \uicontrol {Mode Selector Style} and select \uicontrol {Icons and Text}
    or \uicontrol {Icons Only}.

    \section1 Project
    \target glossary-project

    A project is a container for the \l{glossary-component}{components} and
    \l{glossary-asset}{assets} that you use in your UI. You can \e package
    the UI and preview or run it on different operating systems on the desktop
    or a \l{glossary-device}{device}.

    You use templates to create different types of projects according to your
    needs. The templates add preset components to the project by default. For
    example, if you create a 3D project, preset 3D components are added to it.
    You can add more preset components in \uicontrol {Components}.

    \image studio-project-wizards.png "New Project dialog"

    Read more about projects:

    \list
        \li \l{Creating Projects}
    \endlist

    \section1 Property
    \target glossary-property

    A \e property is an attribute of a \l{glossary-component}{component}
    that can be assigned a static value or bound to a dynamic expression.
    A property's value can be read by other components. Generally, it can
    also be modified by another component, unless a particular component
    type has explicitly disallowed this for a specific property.

    \image qtquick-item-properties-common.png "Properties view"

    Read more about properties:

    \list
        \li \l{Properties}
        \li \l{Preset Components}
        \li \l{Specifying Component Properties}
        \li \l{Adding Bindings Between Properties}
        \li \l{Specifying Custom Properties}
    \endlist

    \section1 Signal
    \target glossary-signal

    A \e signal represents an application event, such as a user clicking a
    button or the value of a \l{glossary-property}{property} of a
    \l{glossary-component}{component} changing. The application needs this
    information to perform actions or to relay it to other applications.

    Components have predefined signals that are emitted when users interact with
    the application. For example, the \l {Mouse Area} component has a \c clicked
    signal that is emitted whenever the mouse is clicked within the area. Since
    the signal name is \c clicked, the signal handler for receiving this signal
    is named \c onClicked.

    \image washingmachineui-connections.png "Connections view, Connections tab"

    Further, a signal is automatically emitted when the value of a
    \l{glossary-property}{property} changes.

    Read more about signals:

    \list
        \li \l{Connecting Components to Signals}
        \li \l{Mouse Area}
    \endlist

    \section1 State
    \target glossary-state

    The \e state of a particular visual \l{glossary-component}{component} is
    the set of information that describes how and where the individual parts
    of the component are displayed within it, and all the data associated with
    that state. Most visual components in a UI will have a limited number of
    states, each with well-defined \l{glossary-property}{properties}.

    For example, an element in a list may be either selected or not, and if
    selected, it may either be the currently active single selection or it may
    be part of a selection group. Each of those states may have certain
    associated visual appearance (neutral highlighted, expanded, and so forth).

    Similarly, the appearance of a button can change to indicate a \e pressed
    state.

    \image studio-custom-button.gif "Button states"

    Read more about states:

    \list
        \li \l{States}
        \li \l{Working with States}
    \endlist

    \section1 Transition
    \target glossary-transition

    When a visual \l{glossary-component}{component} transitions from one
    \l{glossary-state}{state} to another, its appearance changes. A
    \e transition is an \e edge between two states. It may trigger other
    events to occur, as other parts of the application may have behavior
    that is triggered when a certain state is entered or left.

    Read more about transitions:

    \list
        \li \l{Transitions}
        \li \l{Animating Transitions Between States}
    \endlist
    \omit

    ## The following terms might or might not come back, but for now, the
    ## descriptions are considered too technical for the designer target group.

    \section1 Deploy Configuration
    \target glossary-deploy-config

    Handles the packaging and copying of the necessary files to a location
    you want to preview the UI at. The files can be copied to a location in
    the file system of the development PC or a \l{glossary-device}{device}.

    \section1 Kit
    \target glossary-buildandrun-kit

    \QDS groups run settings as kits to make cross-platform development easier.
    Each kit consists of a set of values that define one environment, such as a
    \l{glossary-device} {device} to preview the UI on.

   \section1 Run Configuration
    \target glossary-run-config

    Starts the UI in the location where it was copied by the
    \e {deploy configuration}. By default, when you run a project, \QDS
    deploys it to the \l{glossary-device}{device} specified in the
    selected \l{glossary-buildandrun-kit}{kit}, and runs it there. However,
    if you have not made any changes to the project since you last deployed
    it, \QDS simply runs it again.

    \endomit
*/
