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

Doc: Rename and restructure Editing QML Files in Design Mode topic

Browse Source 
Add a table that lists the views and links to their documentation
and to the documentation for the tasks that users can perform in
the views.

Change-Id: I96748b62163613aff1bb5f71782af007299b02ce
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>
This commit is contained in:
Leena Miettinen
2021-02-22 18:21:47 +01:00
parent c22ed5528d
commit e34bdf8c4d
10 changed files with 116 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
doc/qtcreator/src/howto/creator-ui.qdoc
View File

@@ -99,7 +99,7 @@
\else
You can use the \l{Selecting Modes}{mode selector} to switch to the
\l{Editing QML Files in Design Mode}{Design mode} (1), where you will do
\l{Design Views}{Design mode} (1), where you will do
most of your work and the \l{Using the Help Mode}{Help} (2) mode, where
you can read the product documentation. The other modes are for more
advanced use, and you are likely to need them less often.
@@ -312,7 +312,7 @@
mode for designing and developing application user interfaces.
This mode is available for UI files.
\else
\li \uicontrol{\l{Editing QML Files in Design Mode}{Design}}
\li \uicontrol{\l{Design Views}{Design}}
mode for designing and developing application user interfaces.
As a designer, you'll do most of your work in this mode.
\endif

2
doc/qtcreator/src/howto/creator-views.qdoc
View File

@@ -72,7 +72,7 @@
\endif
For more information about views that are only available when editing QML
files in the Design mode, see \l{Editing QML Files in Design Mode}.
files in the Design mode, see \l{Design Views}.
The additional options in each view are described in the following
sections.

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

@@ -90,8 +90,7 @@
\li \l{Developing Qt Quick Applications}
\list
\li \l {Creating Qt Quick Projects}
\li \l {Editing QML Files in Design Mode}
\li \l {Design Views}
\list
\li \l{Form Editor}
\li \l{Library}

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

@@ -42,7 +42,7 @@
You can use wizards to create Qt Quick projects.
\li \l {Editing QML Files in Design Mode}
\li \l {Design Views}
You can use several different editors and views in the
Design mode to develop Qt Quick applications.

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

@@ -1,6 +1,6 @@
/****************************************************************************
**
** Copyright (C) 2020 The Qt Company Ltd.
** Copyright (C) 2021 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the Qt Creator documentation.
@@ -39,86 +39,103 @@
\nextpage quick-uis.html
\endif
\title Editing QML Files in Design Mode
\title Design Views
\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 views"
\image studio-design-mode.png "Design mode"
The Design mode contains different views for designing UIs. To open the
following views, select \uicontrol View > \uicontrol Views:
\list
\li \uicontrol {Form Editor} (1) provides a canvas for designing
2D UIs. For more information, see \l {Editing 2D Content}.
When you are editing 3D scenes, the \uicontrol {Form Editor} is
used as a canvas for the 3D scene projected by the camera.
\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 {Connection View} (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} (6) shows a list of projects open in the
current session. For more information, see
\l{Viewing Project Files}.
\li \uicontrol {States} 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 {Transition Editor} enables you to make movement between
states smooth by animating the changes between states. For more
information, see \l{Animating Transitions Between 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}.
\li \uicontrol {Curve Editor} 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. You can modify the
appearance of the curve in the style editor. For more information,
see \l {Editing Animation Curves}.
\endlist
\QDS contains views for designing UIs. To open them, select
\uicontrol View > \uicontrol Views.
You can move the views anywhere on the screen and save them as
\e workspaces, as instructed in \l {Managing Workspaces}.
Watch a video about using the Design mode views:
Watch a video about using the design views:
\youtube RfEYO-5Mw6s
\section1 Summary of Design Views
\table
\header
\li View
\li Purpose
\li Read More
\row
\li \l{Form Editor}
\li Provides a working area for designing 2D UIs.
When you are editing 3D scenes, the \uicontrol {Form Editor} is
used as a canvas for the 3D scene projected by the camera.
\li \l{Form Editor}
\row
\li \l{Working in 3D Editor}{3D Editor}
\li Provides an editor for files you created using 3D graphics
applications and stored in one of the supported formats.
\li \l{Editing 3D Scenes}
\row
\li \l Library
\li Contains the building blocks that you can use to design
applications: preset components, your own components, and
assets.
\li \l {Creating Components}
\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 \l Navigator
\row
\li \l Properties
\li Enables you to modify the properties of the selected component.
\li \l {Specifying Component Properties}
\row
\li \l{Adding Connections}{Connection View}
\li Enables you to add functionality to the UI by creating
connections between objects, signals, and object properties.
\li \l{Adding Connections}
\row
\li \l{Adding States}{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 \l{Adding States}
\row
\li \l{Animating Transitions Between States}{Transition Editor}
\li Enables you to make movement between states smooth by animating
the changes between states.
\li \l{Animating Transitions Between States}
\row
\li \l{Creating Animations}{Timeline}
\li Provides a timeline and keyframe based editor for animating
the properties of components.
\li \l{Creating Animations}
\row
\li \l{Editing Animation Curves}{Curve Editor}
\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. You can modify the appearance of
the curve in the style editor.
\li \l {Editing Animation Curves}
\row
\li \l{Working in Edit Mode}{Text Editor}
\li Provides a code editor for viewing and modifying the code
generatedby the visual editors.
\li \l {Working in Edit Mode}
\row
\li \l{Viewing Project Files}{Projects}
\li Shows a list of open projects and the files they contain.
\li \l{Viewing Project Files}
\row
\li \l{Viewing the File System}{File System}
\li Shows all files in the currently selected directory.
\li \l{Viewing the File System}
\row
\li \l{Viewing Open Documents}{Open Documents}
\li Shows currently open files.
\li \l{Viewing Open Documents}
\endtable
*/

2
doc/qtdesignstudio/src/qtdesignstudio-getting-started.qdoc
View File

@@ -74,7 +74,7 @@
\li \l {User Interface}
Describes the parts and basic features of \QDS.
\li \l{Editing QML Files in Design Mode}
\li \l{Design Views}
Describes the views and basic features of the Design mode.
This is where you'll do most of your work.

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

@@ -1,6 +1,6 @@
/****************************************************************************
**
** Copyright (C) 2020 The Qt Company Ltd.
** Copyright (C) 2021 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the Qt Design Studio documentation.
@@ -56,13 +56,13 @@
\li \l{User Interface}
\list
\li \l{Selecting Modes}
\li \l{Editing QML Files in Design Mode}
\list
\li \l{Form Editor}
\li \l{Library}
\li \l{Navigator}
\li \l{Properties}
\endlist
\li \l{Design Views}
\list
\li \l{Form Editor}
\li \l{Library}
\li \l{Navigator}
\li \l{Properties}
\endlist
\li \l{Managing Workspaces}
\li \l{Managing Sessions}
\endlist
@@ -145,7 +145,6 @@
\endlist
\li \l{Advanced Topics}
\list
\li \l{Supported Platforms}
\li \l{Keyboard Shortcuts}
\li \l{Coding}

2
doc/qtdesignstudio/src/qtdesignstudio-tutorials.qdoc
View File

@@ -43,7 +43,7 @@
Before you start, take a look at the following topics to familiarize
yourself with the parts of \QDS in general, and the Design mode in
particular: \l{User Interface} and \l{Editing QML Files in Design Mode}.
particular: \l{User Interface} and \l{Design Views}.
In addition to these entry-level tutorials, \QDS comes with examples
and video tutorials that you can open from the \uicontrol Examples and

14
doc/qtdesignstudio/src/qtdesignstudio.qdoc
View File

@@ -1,6 +1,6 @@
/****************************************************************************
**
** Copyright (C) 2019 The Qt Company Ltd.
** Copyright (C) 2021 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the Qt Design Studio documentation.
@@ -29,10 +29,12 @@
\title Qt Design Studio Manual
\QDS is a UI design and development environment for creating animated UIs
and previewing them on the desktop or on Android and embedded Linux devices.
It provides you with tools for accomplishing your tasks throughout the whole
process, from design to production.
Define the look and feel of the UI from wireframe to final implementation
with preset UI components. Import UI design files from 2D and 3D tools to
\QDS, which can turn them into code for developers. \QDS prototyping
features bring your designs to life and simulate and validate interactions
and dynamic behavior. You can test, preview, and fine-tune your designs to
pixel-perfection live on the desktop or target device.
\table
\row
@@ -47,7 +49,7 @@
\list
\li \l{Exporting from Design Tools}
\li \l{User Interface}
\li \l{Editing QML Files in Design Mode}
\li \l{Design Views}
\li \l{Tutorials}
\li \l{Qt Quick Best Practices}
\endlist

2
doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-design-mode.qdoc
View File

@@ -81,5 +81,5 @@
\youtube w1yhDl93YI0
For more information on other views, see
\l {Editing QML Files in Design Mode}.
\l {Design Views}.
*/