/****************************************************************************
**
** Copyright (C) 2020 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the Qt Creator documentation.
**
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see https://www.qt.io/terms-conditions. For further
** information use the contact form at https://www.qt.io/contact-us.
**
** GNU Free Documentation License Usage
** 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. Please review the following information to ensure
** the GNU Free Documentation License version 1.3 requirements
** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
**
****************************************************************************/

// **********************************************************************
// NOTE: the sections are not ordered by their logical order to avoid
// reshuffling the file each time the index order changes (i.e., often).
// Run the fixnavi.pl script to adjust the links to the index order.
// **********************************************************************

/*!
    \page creator-using-qt-quick-designer.html
    \if defined(qtdesignstudio)
    \previouspage creator-modes.html
    \nextpage creator-project-managing-workspaces.html
    \else
    \previouspage quick-projects.html
    \nextpage quick-uis.html
    \endif

    \title Editing QML Files in Design Mode

    \QC opens \l{Qt Quick UI Forms}{UI forms} (ui.qml files) in the
    \uicontrol {Form Editor} view in the Design mode. It is
    recommended that you use UI forms for components that you want to
    edit in the Design mode.

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

    The Design mode contains different views for designing UIs. To open the
    following views, select \uicontrol View > \uicontrol Views:

    \list
        \li \uicontrol {Form Editor} (1) provides a canvas for designing
            2D UIs. For more information, see \l {Editing 2D Content}.
            When you are editing 3D scenes, the \uicontrol {Form Editor} is
            used as a canvas for the 3D scene projected by the camera.

        \li \uicontrol {3D Editor} provides an editor for files you created
            using 3D graphics applications and stored in one of the supported
            formats. For more information, see \l{Editing 3D Scenes}.

        \li \uicontrol {Text Editor} provides a code editor for editing the QML
            code generated by the visual editors. For more information, see
            \l {Working in Edit Mode}.

        \li \uicontrol {Library} (2) displays the building blocks that you
            can use to design applications: predefined QML types, your own
            QML components, or Qt Quick Controls that you import to the
            project, and other resources. For more information, see
            \l {Creating Components}.

        \li \uicontrol {Navigator} (3) displays the items in the current QML
            file as a tree structure. For more information, see
            \l {Managing Item Hierarchy}.

        \li \uicontrol {Properties} (4) organizes the properties of the
            selected component. You can change the properties also in the
            \uicontrol {Text Editor}. For more information, see
            \l {Specifying Item Properties}.

        \li \uicontrol {Connection View} (5) enables you to create connections
            between objects, signals, and object properties. For more
            information, see \l{Adding Connections}.

        \li \uicontrol {File System} shows all files in the currently
            selected directory. For more information, see
            \l{Viewing the File System}.

        \li \uicontrol {Open Documents} shows currently open files.

        \li \uicontrol {Projects} (6) shows a list of projects open in the
            current session. For more information, see
            \l{Viewing Project Files}.

        \li \uicontrol {States} displays the different states of the item.
            QML states typically describe user interface configurations, such as
            the UI controls, their properties and behavior and the available
            actions. For more information, see \l{Adding States}.

        \li \uicontrol {Transition Editor} enables you to make movement between
            states smooth by animating the changes between states. For more
            information, see \l{Animating Transitions Between States}.

        \li \uicontrol Timeline (7) provides a timeline and keyframe based
            editor that enables you to animate the properties of UI components.
            For more information, see \l{Creating Animations}.

        \li \uicontrol {Curve Editor} enables you to view and modify the whole
            animation curve by inserting keyframes to the curve and dragging
            them and the point handlers to modify the curve. You can modify the
            appearance of the curve in the style editor. For more information,
            see \l {Editing Animation Curves}.

    \endlist

    You can move the views anywhere on the screen and save them as
    \e workspaces, as instructed in \l {Managing Workspaces}.

    Watch a video about using the Design mode views:

    \youtube RfEYO-5Mw6s
*/
