1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
|
/****************************************************************************
**
** 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}.
*/
|
