From e34bdf8c4d4f8feed58ea3c80f28a0a627408316 Mon Sep 17 00:00:00 2001 From: Leena Miettinen Date: Mon, 22 Feb 2021 18:21:47 +0100 Subject: [PATCH] Doc: Rename and restructure Editing QML Files in Design Mode topic 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 --- doc/qtcreator/src/howto/creator-ui.qdoc | 4 +- doc/qtcreator/src/howto/creator-views.qdoc | 2 +- doc/qtcreator/src/qtcreator-toc.qdoc | 3 +- .../creator-only/qtquick-app-development.qdoc | 2 +- .../src/qtquick/qtquick-designer.qdoc | 167 ++++++++++-------- .../src/qtdesignstudio-getting-started.qdoc | 2 +- .../src/qtdesignstudio-toc.qdoc | 17 +- .../src/qtdesignstudio-tutorials.qdoc | 2 +- doc/qtdesignstudio/src/qtdesignstudio.qdoc | 14 +- .../qtdesignstudio-3d-design-mode.qdoc | 2 +- 10 files changed, 116 insertions(+), 99 deletions(-) diff --git a/doc/qtcreator/src/howto/creator-ui.qdoc b/doc/qtcreator/src/howto/creator-ui.qdoc index 61de8f5dc72..8647c66696a 100644 --- a/doc/qtcreator/src/howto/creator-ui.qdoc +++ b/doc/qtcreator/src/howto/creator-ui.qdoc @@ -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 diff --git a/doc/qtcreator/src/howto/creator-views.qdoc b/doc/qtcreator/src/howto/creator-views.qdoc index fc37da94dcf..fcbab35d6b2 100644 --- a/doc/qtcreator/src/howto/creator-views.qdoc +++ b/doc/qtcreator/src/howto/creator-views.qdoc @@ -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. diff --git a/doc/qtcreator/src/qtcreator-toc.qdoc b/doc/qtcreator/src/qtcreator-toc.qdoc index 9f3f201cde0..055a093b302 100644 --- a/doc/qtcreator/src/qtcreator-toc.qdoc +++ b/doc/qtcreator/src/qtcreator-toc.qdoc @@ -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} diff --git a/doc/qtcreator/src/qtquick/creator-only/qtquick-app-development.qdoc b/doc/qtcreator/src/qtquick/creator-only/qtquick-app-development.qdoc index 11403fe79f8..34c5b827484 100644 --- a/doc/qtcreator/src/qtquick/creator-only/qtquick-app-development.qdoc +++ b/doc/qtcreator/src/qtquick/creator-only/qtquick-app-development.qdoc @@ -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. diff --git a/doc/qtcreator/src/qtquick/qtquick-designer.qdoc b/doc/qtcreator/src/qtquick/qtquick-designer.qdoc index 09dd1846d41..b281393a741 100644 --- a/doc/qtcreator/src/qtquick/qtquick-designer.qdoc +++ b/doc/qtcreator/src/qtquick/qtquick-designer.qdoc @@ -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 + + + */ diff --git a/doc/qtdesignstudio/src/qtdesignstudio-getting-started.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-getting-started.qdoc index 27c562bfa5f..2c8a204ea5d 100644 --- a/doc/qtdesignstudio/src/qtdesignstudio-getting-started.qdoc +++ b/doc/qtdesignstudio/src/qtdesignstudio-getting-started.qdoc @@ -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. diff --git a/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc index 6ca647ce293..a0965261c6f 100644 --- a/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc +++ b/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc @@ -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} diff --git a/doc/qtdesignstudio/src/qtdesignstudio-tutorials.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-tutorials.qdoc index b015cc292bb..2e4fd18d70d 100644 --- a/doc/qtdesignstudio/src/qtdesignstudio-tutorials.qdoc +++ b/doc/qtdesignstudio/src/qtdesignstudio-tutorials.qdoc @@ -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 diff --git a/doc/qtdesignstudio/src/qtdesignstudio.qdoc b/doc/qtdesignstudio/src/qtdesignstudio.qdoc index 43cbd060622..071e82d5fc6 100644 --- a/doc/qtdesignstudio/src/qtdesignstudio.qdoc +++ b/doc/qtdesignstudio/src/qtdesignstudio.qdoc @@ -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 diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-design-mode.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-design-mode.qdoc index 8690fe0a336..09d35b7f1ca 100644 --- a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-design-mode.qdoc +++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-design-mode.qdoc @@ -81,5 +81,5 @@ \youtube w1yhDl93YI0 For more information on other views, see - \l {Editing QML Files in Design Mode}. + \l {Design Views}. */