feedc0de/qt-creator
1
0
Fork 0
forked from qt-creator/qt-creator
Code Pull Requests Activity

Doc: Move information about using Form Editor to separate topic

Browse Source 
Rewrite information about the Qt Quick Editor to take new
workspace concept and 3D editor into account.

Task-number: QTCREATORBUG-23364
Change-Id: I053685b5e603ad75af3f7314c30e627fac5c6207
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>
This commit is contained in:
Leena Miettinen
2020-04-21 16:18:10 +02:00
parent 10fece1795
commit f21f7e97fc
9 changed files with 163 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
doc/qtcreator/images/qmldesigner-visual-editor.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 54 KiB

2
doc/qtcreator/src/qtcreator-toc.qdoc
View File

@@ -91,10 +91,12 @@
\list
\li \l {Creating Qt Quick Projects}
\li \l {Editing QML Files in Design Mode}
\li \l {Creating UIs}
\list
\li \l {Creating Components}
\list
\li \l{Editing 2D Content}
\li \l{Creating Buttons}
\li \l{Creating Scalable Buttons and Borders}
\endlist

5
doc/qtcreator/src/qtquick/creator-only/qtquick-app-development.qdoc
View File

@@ -46,9 +46,8 @@
\li \l {Editing QML Files in Design Mode}
You can use the \uicontrol {Form Editor} or the
\uicontrol {Text Editor} in the Design mode to
develop Qt Quick applications.
You can use several different editors and views in the
Design mode to develop Qt Quick applications.
\li \l {Creating UIs}

2
doc/qtcreator/src/qtquick/qtquick-annotations.qdoc
View File

@@ -37,7 +37,7 @@
name and one or several comments. The comments have a title, author, and
comment text.
\image qtquick-annotations.png "Annotations displayed in the Form Editor tab"
\image qtquick-annotations.png "Annotations displayed in the Form Editor view"
Annotations are saved in the end of QML files when you save the file. They
do not affect the QML performance in any way.

2
doc/qtcreator/src/qtquick/qtquick-buttons.qdoc
View File

@@ -31,7 +31,7 @@
/*!
\contentspage index.html
\previouspage quick-components.html
\previouspage qtquick-form-editor.html
\page quick-buttons.html
\nextpage quick-scalable-image.html

11
doc/qtcreator/src/qtquick/qtquick-components.qdoc
View File

@@ -37,7 +37,7 @@
\else
\previouspage creator-using-qt-quick-designer.html
\endif
\nextpage quick-buttons.html
\nextpage qtquick-form-editor.html
\title Creating Components
@@ -71,7 +71,7 @@
\section1 Adding Components to Designs
\image qmldesigner-visual-editor.png "Design mode"
\image studio-design-mode.png "Design mode"
\list 1
\li Drag and drop components from the \uicontrol Library (2) to the
@@ -564,11 +564,14 @@
\endlist
The following sections contain examples of how to create some common
components:
The following sections contain more information about how to use the
\uicontrol {Form Editor} to edit 2D content, as well as examples of
how to create some common components using basic QML types:
\list
\li \l{Editing 2D Content}
\li \l{Creating Buttons}
\li \l{Creating Scalable Buttons and Borders}

158
doc/qtcreator/src/qtquick/qtquick-designer.qdoc
View File

@@ -43,150 +43,68 @@
\title Editing QML Files in Design Mode
\QC opens \l{Qt Quick UI Forms}{UI forms} (ui.qml files) in the
\uicontrol {Form Editor} tab in the Design mode. It is
\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.
\if defined(qtcreator)
\image qmldesigner-visual-editor.png "Visual editor"
\else
\image studio-design-mode.png "Design mode"
\endif
To manage your project in the 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 Canvas (1) is the working area where you create QML
components and design applications. In the \uicontrol {Form Editor}
tab, you can use a visual editor to design UIs, and in the
\uicontrol {Text Editor} tab, you can use a code editor to edit the
QML code generated by the visual editor.
\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 Use the sidebars to select QML types to use in the project, to
specify properties for them, and to
view them in a tree structure, as well as to create connections
and browse projects and files. You can select the content of the
sidebars in the sidebar menu:
\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}.
\list
\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 {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 {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 {Properties} (4) organizes the properties of the
selected item. 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 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 {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 {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 {Projects} shows a list of projects open in the
current session. For more information, see
\l{Viewing Project Files}.
\endlist
\li \uicontrol {States} view (6) displays the different states of the item.
\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}.
\if defined(qtdesignstudio)
\li \uicontrol Timeline view (7) provides a timeline and keyframe based
\li \uicontrol Timeline (7) provides a timeline and keyframe based
editor that enables you to animate the properties of UI components.
\endif
For more information, see \l{Creating Animations}.
\endlist
\section1 Snapping to Parent and Sibling Items
You design applications on the canvas by placing items on it.
When you are working on a design, you can use snapping to align
items on the canvas. Click the \inlineimage snapping.png
button to have the items snap to their parent or sibling items. Snapping
lines automatically appear to help you position the items.
Click the \inlineimage snapping_and_anchoring.png
button to anchor the item to the items that you snap to.
Choose \uicontrol Tools > \uicontrol Options > \uicontrol {Qt Quick} >
\uicontrol {\QMLD} to specify settings for snapping. In the
\uicontrol {Parent item padding} field, specify the
distance in pixels between the parent item and the snapping lines. In the
\uicontrol {Sibling item spacing} field, specify the distance in pixels between
sibling items and the snapping lines.
The following image shows the snapping lines (1) when
\uicontrol {Parent item padding} is set to 5 pixels.
\image qmldesigner-snap-margins.png "Snapping lines on canvas"
\section1 Hiding Item Boundaries
The Design mode displays the boundaries of items on the canvas. To hide
the boundaries, click the \inlineimage boundingrect.png
button.
\section1 Selecting Items
When you point the mouse to overlapping items, the frontmost item is
selected by default. However, items that do not have any content, such as
the mouse area, are typically located in front of items that do have
content, such as rectangles or border images. To select items with content
by default, click the
\inlineimage qmldesigner-only-select-items-with-content.png
button.
\section1 Previewing Component Size
The width and height of the root item in a QML file determine the size of
the component. You can reuse components, such as buttons, in different
sizes in other QML files and design UIs for use with different device
profiles, screen resolution, or screen orientation. The component size
might also be zero (0,0) if its final size is determined by property
bindings.
To experiment with different component sizes, enter values in the
\uicontrol {Override Width} and \uicontrol {Override Height} fields (1) on
the canvas toolbar. The changes are displayed on the canvas (2)
and in the \uicontrol States view (3), but the property
values are not changed permanently in the QML file. You can permanently
change the property values in the \uicontrol Properties view (4).
\image qmldesigner-preview-size.png "Canvas width and height"
\section1 Specifying Canvas Size
To change the canvas size, select \uicontrol Tools > \uicontrol Options >
\uicontrol {Qt Quick} > \uicontrol {\QMLD} and
specify the canvas width and height in the \uicontrol Canvas group.
\section1 Refreshing the Canvas
When you open QML files in the Design mode, the items in the file are drawn
on the canvas. When you edit the item properties, the QML file and
the image on the canvas might get out of sync. For example, when you change
the position of an item within a column or a row, the new position might
not be displayed correctly on the canvas.
To refresh the image on the canvas, press \key R or select the
\inlineimage reset.png
(\uicontrol {Reset View}) button.
You can move the views anywhere on the screen and save them as
\e workspaces, as instructed in \l {Managing Workspaces}.
*/

110
doc/qtcreator/src/qtquick/qtquick-form-editor.qdoc Normal file
View File

@@ -0,0 +1,110 @@
/****************************************************************************
**
** 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.
**
****************************************************************************/
/*!
\contentspage index.html
\page qtquick-form-editor.html
\previouspage quick-components.html
\nextpage quick-buttons.html
\title Editing 2D Content
You design applications in the \uicontrol {Form Editor} by placing items
into it.
\section1 Snapping to Parent and Sibling Items
When you are working on a design, you can use snapping to align
items in the \uicontrol {Form Editor}. Click the \inlineimage snapping.png
button to have the items snap to their parent or sibling items. Snapping
lines automatically appear to help you position the items.
Click the \inlineimage snapping_and_anchoring.png
button to anchor the item to the items that you snap to.
Choose \uicontrol Tools > \uicontrol Options > \uicontrol {Qt Quick} >
\uicontrol {\QMLD} to specify settings for snapping. In the
\uicontrol {Parent item padding} field, specify the
distance in pixels between the parent item and the snapping lines. In the
\uicontrol {Sibling item spacing} field, specify the distance in pixels between
sibling items and the snapping lines.
The following image shows the snapping lines (1) when
\uicontrol {Parent item padding} is set to 5 pixels.
\image qmldesigner-snap-margins.png "Snapping lines on canvas"
\section1 Hiding Item Boundaries
The \uicontrol {Form Editor} displays the boundaries of items.
To hide them, select the \inlineimage boundingrect.png
button.
\section1 Selecting Items
When you point the mouse to overlapping items, the frontmost item is
selected by default. However, items that do not have any content, such as
the mouse area, are typically located in front of items that do have
content, such as rectangles or border images. To select items with content
by default, click the
\inlineimage qmldesigner-only-select-items-with-content.png
button.
\section1 Previewing Component Size
The width and height of the root item in a QML file determine the size of
the component. You can reuse components, such as buttons, in different
sizes in other QML files and design UIs for use with different device
profiles, screen resolution, or screen orientation. The component size
might also be zero (0,0) if its final size is determined by property
bindings.
To experiment with different component sizes, enter values in the
\uicontrol {Override Width} and \uicontrol {Override Height} fields (1) on
the canvas toolbar. The changes are displayed in the \uicontrol {Form Editor}
(2) and in the \uicontrol States view (3), but the property
values are not changed permanently in the QML file. You can permanently
change the property values in the \uicontrol Properties view (4).
\image qmldesigner-preview-size.png "Canvas width and height"
\section1 Specifying Canvas Size
To change the canvas size, select \uicontrol Tools > \uicontrol Options >
\uicontrol {Qt Quick} > \uicontrol {\QMLD} and
specify the canvas width and height in the \uicontrol Canvas group.
\section1 Refreshing the Form Editor Contents
When you open QML files in the Design mode, the items in the file are drawn
in the \uicontrol {Form Editor}. When you edit the item properties, the QML
file and the contents of the editor might get out of sync. For example, when
you change the position of an item within a column or a row, the new
position might not be displayed correctly in the \uicontrol {Form Editor}.
To refresh the contents of the \uicontrol {Form Editor}, press \key R or
select the \inlineimage reset.png
(\uicontrol {Reset View}) button.
*/

3
doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc
View File

@@ -1,6 +1,6 @@
/****************************************************************************
**
** Copyright (C) 2019 The Qt Company Ltd.
** Copyright (C) 2020 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the Qt Design Studio documentation.
@@ -70,6 +70,7 @@
\list
\li \l{Creating Components}
\list
\li \l{Editing 2D Content}
\li \l{Creating Buttons}
\li \l{Creating Scalable Buttons and Borders}
\endlist