/****************************************************************************
**
** 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 {Tutorials}
    \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 Window > \uicontrol Views:

    \list
        \li \uicontrol {Form Editor} (1) provides a canvas for designing 2D UIs.
            For more information, see \l {Editing 2D Content}.

        \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 Connections (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} shows a list of projects open in the
            current session. For more information, see
            \l{Viewing Project Files}.

        \li \uicontrol {States} (6) 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 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}.

    \endlist

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

*/
