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

Doc: Describe changes in the Qt Quick Designer UI

Browse Source 
The canvas area now contains Form Editor and Text Editor tabs.
Further, the Properties view can be split to show any view, so
there are now two sidebars.

Change-Id: Ib921a806178606a76d584440e2308d504a297fcb
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>
Reviewed-by: Tim Jenssen <tim.jenssen@qt.io>
This commit is contained in:
Leena Miettinen
2017-02-07 16:32:09 +01:00
parent 8415a7984c
commit 6f2c120d1c
2 changed files with 36 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
doc/images/qmldesigner-visual-editor.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 29 KiB

doc/src/qtquick/qtquick-designer.qdoc
+36 -27
View File
@@ -38,50 +38,58 @@
\title Using Qt Quick Designer
You can edit \l{Qt Quick UI Forms} (ui.qml files) in \QMLD. \QC opens the
UI forms in the \uicontrol Design mode. It is recommended that you use UI forms
for components that you want to design in \QMLD.
UI forms in the \uicontrol {Form Editor} tab in the \uicontrol Design mode.
It is recommended that you use UI forms for components that you want to
design in \QMLD.
\image qmldesigner-visual-editor.png "Visual editor"
Use the visual editor to manage your project:
Use \QMLD to manage your project:
\list
\li Use the sidebar to select QML types to use in the project and to
\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 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
sidebar in the sidebar menu:
sidebars in the sidebar menu:
\list
\li \uicontrol {Navigator} (1) displays the items in the current QML
file as tree structure.
\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 2 that you import to the
project, and other resources.
\li \uicontrol {Library} (2) displays the building blocks that you can use
to design applications: predefined QML types, your own QML
components, Qt Quick components or Qt Quick Controls 2 that you
import to the project, and other resources.
\li \uicontrol {Navigator} (3) displays the items in the current QML
file as a tree structure.
\li \uicontrol Connections (3) enables you to create connections between
objects, signals, and object properties. For
more information, see \l{Adding Connections}.
\li \uicontrol {Properties} (4) organizes the properties of the
selected item. You can change the properties also in the
\uicontrol {Text Editor}.
\li \uicontrol {Projects} shows a list of projects open in the current
session. For more information, see \l{Viewing Project Files}.
\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} sidebar view 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}.
\endlist
\li \uicontrol Canvas (4) is the working area where you create QML components and
design applications.
\li \uicontrol {Properties} pane (5) organizes the properties of the selected item.
You can change the properties also in the code editor.
\li \uicontrol {State} pane (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
@@ -132,7 +140,7 @@
To view lists of files or projects, instead, select \uicontrol {File System},
\uicontrol {Open Documents}, or \uicontrol Projects in the menu.
To view several types of content at a time, split the sidebar by clicking
To view several types of content at a time, split the sidebars by clicking
the \inlineimage splitbutton_horizontal.png
(\uicontrol Split) button.
@@ -492,7 +500,8 @@
bindings.
To experiment with different component sizes, enter values in the
\uicontrol Height and \uicontrol Width fields (1) on the canvas toolbar. The changes are
\uicontrol {Override Width} and \uicontrol {Override Height} fields (1) on
the canvas toolbar. The changes are
displayed in the \uicontrol State pane (2) and on the canvas (3), but the property
values are not changed permanently in the QML file. You can permanently
change the property values in the \uicontrol Properties pane (4).