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

// **********************************************************************
// 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

    \previouspage creator-quick-tour.html
    \nextpage qtquick-form-editor.html

    \title Design Views

    \QDS contains views for designing UIs. To open them, select
    \uicontrol View > \uicontrol Views. The following images present the
    views that you are likely to use most often while designing UIs.

    \image studio-design-mode.webp "Design views"
    \image studio-design-mode-states-timeline.png "The States and Timeline views"

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

    \section1 Summary of Design Views

    In addition to the summary of design views, the table below includes an MCU
    column that indicates the views which are fully supported on MCU projects.
    For more information, see  \l {\QDS Features on MCU Projects}.

    \table
    \header
        \li View
        \li Purpose
        \li MCU
        \li Read More
    \row
        \li \l {2D}
        \li Provides a working area for designing 2D UIs.
            When you are editing 3D scenes, the \uicontrol {2D} view is
            used as a canvas for the 3D scene projected by the camera.
        \li \image ok.png
        \li \l {2D}
    \row
        \li \l {3D}
        \li Provides an editor for files you created using 3D graphics
            applications and stored in one of the supported formats.
        \li
        \li \l {3D}
    \row
        \li \l {Material Editor and Browser}
        \li In the \uicontrol {Material Editor} and
        \uicontrol {Material Browser} views, you create and manage materials and
        textures.
        \li
        \li \l {Material Editor and Browser}
   \row
        \li \l Components
        \li Contains preset components and your own components, that you can use
            to design you application.
        \li \image ok.png
        \li \l{Using Components}
   \row
        \li \l Assets
        \li Contains assets such as images and fonts that you can use in your
            application.
        \li \image ok.png
        \li \l Assets
    \row
        \li \l Navigator
        \li Displays the composition of the current component file as
            a tree structure. A component file can contain references
            to other components and assets.
        \li \image ok.png
        \li \l Navigator
    \row
        \li \l Properties
        \li Enables you to modify the properties of the selected component.
        \li \image ok.png
        \li \l {Specifying Component Properties}
    \row
        \li \l{Connections}
        \li Enables you to add functionality to the UI by creating
            connections between components, signals, and component properties.
        \li \image ok.png
        \li \l{Working with Connections}
    \row
        \li \l States
        \li Displays the different states that can be applied to a component.
            Typically, states describe UI configurations, such as the
            visibility and behavior of components and the available user
            actions.
        \li \image ok.png
        \li \l{Working with States}
    \row
        \li \l{Transitions}
        \li Enables you to make movement between states smooth by animating
            the changes between states.
        \li \image ok.png
        \li \l{Animating Transitions Between States}
    \row
        \li \l Translations
        \li Provides functionality to add multi-language support to your
        project.
        \li
        \li \l{Translations}
    \row
        \li \l Timeline
        \li Provides a timeline and keyframe based editor for animating
            the properties of components.
        \li \image ok.png
        \li \l{Creating Timeline Animations}
    \row
        \li \l{Curves}
        \li 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.
        \li
        \li \l {Editing Animation Curves}
    \row
        \li \l{Code}
        \li Provides a code editor for viewing and modifying the code
            generated by the visual editors.
        \li \image ok.png
        \li \l {Writing Code}
    \row
        \li \l Projects
        \li Shows a list of open projects and the files they contain.
        \li \image ok.png
        \li \l Projects
     \row
        \li \l{File System}
        \li Shows all files in the currently selected directory.
        \li \image ok.png
        \li \l{File System}
    \row
        \li \l{Open Documents}
        \li Shows currently open files.
        \li \image ok.png
        \li \l{Open Documents}
    \row
        \li \l{Content Library}
        \li The \uicontrol {Content Library} view contains material, texture,
        and environment bundles with assets that you can use in your project.
        \li
        \li \l{Content Library}
    \row
        \li \l{Texture Editor}
        \li In the \uicontrol {Texture Editor} view, you create and manage
        textures.
        \li
        \li \l{Texture Editor}
    \endtable

    \section1 Summary of Main Toolbar Actions

    The top level toolbar in the \uicontrol  Design mode contains shortcuts to
    widely used actions.

    \table
    \header
        \li Button/Field
        \li Action
        \li Keyboard Shortcut
        \li Read More

    \row
        \li \inlineimage icons/home.png
        \li \uicontrol {Home}: opens the welcome page.
        \li
        \li
    \row
      \li \inlineimage icons/start_playback.png
      \li \uicontrol {Play}: runs the application.
      \li
      \li
    \row
      \li \uicontrol {Live Preview}
      \li Shows a preview of the current file or the entire UI. The changes you
          make to the UI are instantly visible to you in the preview.
      \li \key Alt+P (\key Opt+P on \macos)
      \li \l{Validating with Target Hardware}

    \row
        \li Currently open file
        \li Displays the location and filename of the currently open file. You
            can select another file in the list of open files to view it in
            the \uicontrol {2D} and \uicontrol Navigator views.
        \li
        \li \l{Open Documents}
    \row
        \li \inlineimage icons/prev.png
        \li \uicontrol {Go Back}: moves a step backwards in your location history.
            That is, returns the focus to the last location in the last file it
            was on.
        \li \key Alt+< (\key Opt+Cmd+< on \macos)
        \li
    \row
        \li \inlineimage icons/next.png
        \li \uicontrol {Go Forward}: moves a step forward in your location history.
        \li \key Alt+> (\key Opt+Cmd+> on \macos)
        \li
    \row
        \li \inlineimage icons/close.png
        \li \uicontrol {Close Document}: closes the current file.
        \li \key Ctrl+W (\key Cmd+W on \macos)
        \li
    \row
        \li \inlineimage icons/create_component.png
        \li Creates a custom component from the selected item.
        \li
        \li \l{Creating Custom Components}
    \row
        \li \inlineimage icons/edit_component.png
        \li Edits the selected custom component.
        \li
        \li \l{Creating Custom Components}
    \row
        \li Workspace
        \li Displays the currently selected workspace. To switch to another
            workspace, select it in the list.
        \li
        \li \l{Managing Workspaces}
    \row
        \li \inlineimage icons/lockoff.png
        / \inlineimage icons/lockon.png
        \li Toggles the views to locked or movable in \QDS.
        \li
        \li \l{Managing Workspaces}
    \row
        \li \uicontrol Share
        \li Shares the application online using Qt Design Viewer.
        \li
        \li \l{Sharing Applications Online}
    \endtable
*/
