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