diff options
Diffstat (limited to 'doc')
58 files changed, 687 insertions, 285 deletions
diff --git a/doc/config/qtcreator-project.qdocconf b/doc/config/qtcreator-project.qdocconf index f7659e94d9..db7d38dc39 100644 --- a/doc/config/qtcreator-project.qdocconf +++ b/doc/config/qtcreator-project.qdocconf @@ -19,6 +19,7 @@ imagedirs = ../images \ ../../src/plugins/qmldesigner/components/componentcore/images \ ../../src/plugins/qmldesigner/components/formeditor \ ../../src/plugins/qmldesigner/components/navigator \ + ../../src/plugins/qmldesigner//qmldesignerextension/timelineeditor/images \ ../../src/plugins/scxmleditor/common/images \ ../../src/plugins/texteditor/images \ ../../src/plugins/valgrind/images diff --git a/doc/images/anchor-bottom.png b/doc/images/anchor-bottom.png Binary files differnew file mode 100644 index 0000000000..3a96c98107 --- /dev/null +++ b/doc/images/anchor-bottom.png diff --git a/doc/images/anchor-fill.png b/doc/images/anchor-fill.png Binary files differnew file mode 100644 index 0000000000..a065729bee --- /dev/null +++ b/doc/images/anchor-fill.png diff --git a/doc/images/anchor-horizontal-center.png b/doc/images/anchor-horizontal-center.png Binary files differnew file mode 100644 index 0000000000..984fa0eb68 --- /dev/null +++ b/doc/images/anchor-horizontal-center.png diff --git a/doc/images/anchor-left.png b/doc/images/anchor-left.png Binary files differnew file mode 100644 index 0000000000..9263750235 --- /dev/null +++ b/doc/images/anchor-left.png diff --git a/doc/images/anchor-right.png b/doc/images/anchor-right.png Binary files differnew file mode 100644 index 0000000000..7fa48d4f75 --- /dev/null +++ b/doc/images/anchor-right.png diff --git a/doc/images/anchor-top.png b/doc/images/anchor-top.png Binary files differnew file mode 100644 index 0000000000..12dd0ff3e1 --- /dev/null +++ b/doc/images/anchor-top.png diff --git a/doc/images/anchor-vertical-center.png b/doc/images/anchor-vertical-center.png Binary files differnew file mode 100644 index 0000000000..a82090c1ed --- /dev/null +++ b/doc/images/anchor-vertical-center.png diff --git a/doc/images/creator-git-commit-actions.png b/doc/images/creator-git-commit-actions.png Binary files differindex ad28b3fd71..80b644f0ef 100644 --- a/doc/images/creator-git-commit-actions.png +++ b/doc/images/creator-git-commit-actions.png diff --git a/doc/images/keyframe_linear_inactive.png b/doc/images/keyframe_linear_inactive.png Binary files differnew file mode 100644 index 0000000000..f53c5c25ce --- /dev/null +++ b/doc/images/keyframe_linear_inactive.png diff --git a/doc/images/keyframe_manualbezier_inactive.png b/doc/images/keyframe_manualbezier_inactive.png Binary files differnew file mode 100644 index 0000000000..ab6ced5af0 --- /dev/null +++ b/doc/images/keyframe_manualbezier_inactive.png diff --git a/doc/images/qmldesigner-binding-editor.png b/doc/images/qmldesigner-binding-editor.png Binary files differindex 7c8edfd90d..0fd07427b6 100644 --- a/doc/images/qmldesigner-binding-editor.png +++ b/doc/images/qmldesigner-binding-editor.png diff --git a/doc/images/qmldesigner-set-expression.png b/doc/images/qmldesigner-set-expression.png Binary files differindex bbcbd09442..da93bd2cc6 100644 --- a/doc/images/qmldesigner-set-expression.png +++ b/doc/images/qmldesigner-set-expression.png diff --git a/doc/images/qmldesigner-visual-editor.png b/doc/images/qmldesigner-visual-editor.png Binary files differindex 2affa4ed6a..f78480e0ac 100644 --- a/doc/images/qmldesigner-visual-editor.png +++ b/doc/images/qmldesigner-visual-editor.png diff --git a/doc/images/qtcreator-application-output.png b/doc/images/qtcreator-application-output.png Binary files differindex 1064dd3a6d..05f76b380d 100644 --- a/doc/images/qtcreator-application-output.png +++ b/doc/images/qtcreator-application-output.png diff --git a/doc/images/qtcreator-build-issues.png b/doc/images/qtcreator-build-issues.png Binary files differindex 230572237e..85c42782b3 100644 --- a/doc/images/qtcreator-build-issues.png +++ b/doc/images/qtcreator-build-issues.png diff --git a/doc/images/qtcreator-compile-pane.png b/doc/images/qtcreator-compile-pane.png Binary files differindex 5c9b764733..e7af4fe5e8 100644 --- a/doc/images/qtcreator-compile-pane.png +++ b/doc/images/qtcreator-compile-pane.png diff --git a/doc/images/qtcreator-filesystem-view.png b/doc/images/qtcreator-filesystem-view.png Binary files differindex 407f39a2b2..c94cf6020e 100644 --- a/doc/images/qtcreator-filesystem-view.png +++ b/doc/images/qtcreator-filesystem-view.png diff --git a/doc/images/qtcreator-gerrit-options.png b/doc/images/qtcreator-gerrit-options.png Binary files differindex 9ead8c2b2e..2cade60b9d 100644 --- a/doc/images/qtcreator-gerrit-options.png +++ b/doc/images/qtcreator-gerrit-options.png diff --git a/doc/images/qtcreator-gerrit-push.png b/doc/images/qtcreator-gerrit-push.png Binary files differindex 0a831f2197..40ac931b66 100644 --- a/doc/images/qtcreator-gerrit-push.png +++ b/doc/images/qtcreator-gerrit-push.png diff --git a/doc/images/qtcreator-gerrit.png b/doc/images/qtcreator-gerrit.png Binary files differindex 1ba060be74..e489752b20 100644 --- a/doc/images/qtcreator-gerrit.png +++ b/doc/images/qtcreator-gerrit.png diff --git a/doc/images/qtcreator-image-viewer.png b/doc/images/qtcreator-image-viewer.png Binary files differindex c1160c8a4f..ea3ee88a83 100644 --- a/doc/images/qtcreator-image-viewer.png +++ b/doc/images/qtcreator-image-viewer.png diff --git a/doc/images/qtcreator-mode-selector.png b/doc/images/qtcreator-mode-selector.png Binary files differindex ab52f1094a..e82047cf85 100644 --- a/doc/images/qtcreator-mode-selector.png +++ b/doc/images/qtcreator-mode-selector.png diff --git a/doc/images/qtcreator-search-results.png b/doc/images/qtcreator-search-results.png Binary files differindex bf64f6e3a9..363207038a 100644 --- a/doc/images/qtcreator-search-results.png +++ b/doc/images/qtcreator-search-results.png diff --git a/doc/images/qtcreator-searchresults.png b/doc/images/qtcreator-searchresults.png Binary files differindex 3bdf3fc153..8c0a0b0ebb 100644 --- a/doc/images/qtcreator-searchresults.png +++ b/doc/images/qtcreator-searchresults.png diff --git a/doc/images/qtcreator-sidebar.png b/doc/images/qtcreator-sidebar.png Binary files differindex e0c0da3c29..d7f6dea0f8 100644 --- a/doc/images/qtcreator-sidebar.png +++ b/doc/images/qtcreator-sidebar.png diff --git a/doc/images/qtcreator-task-pane.png b/doc/images/qtcreator-task-pane.png Binary files differnew file mode 100644 index 0000000000..b220751400 --- /dev/null +++ b/doc/images/qtcreator-task-pane.png diff --git a/doc/images/qtcreator-todo-options.png b/doc/images/qtcreator-todo-options.png Binary files differindex acf1a1ee90..9de2315621 100644 --- a/doc/images/qtcreator-todo-options.png +++ b/doc/images/qtcreator-todo-options.png diff --git a/doc/images/qtcreator-todo-pane.png b/doc/images/qtcreator-todo-pane.png Binary files differindex eed8e3deba..21122b96a2 100644 --- a/doc/images/qtcreator-todo-pane.png +++ b/doc/images/qtcreator-todo-pane.png diff --git a/doc/images/qtcreator-vcs-commit.png b/doc/images/qtcreator-vcs-commit.png Binary files differindex a55f92b1d2..79ef8bc53a 100644 --- a/doc/images/qtcreator-vcs-commit.png +++ b/doc/images/qtcreator-vcs-commit.png diff --git a/doc/images/qtcreator-vcs-diff.png b/doc/images/qtcreator-vcs-diff.png Binary files differindex 7500b965eb..59d420cf6b 100644 --- a/doc/images/qtcreator-vcs-diff.png +++ b/doc/images/qtcreator-vcs-diff.png diff --git a/doc/images/qtcreator-vcs-gitbranch.png b/doc/images/qtcreator-vcs-gitbranch.png Binary files differindex b19c0cfeba..aae80201bc 100644 --- a/doc/images/qtcreator-vcs-gitbranch.png +++ b/doc/images/qtcreator-vcs-gitbranch.png diff --git a/doc/images/qtcreator-vcs-pane.png b/doc/images/qtcreator-vcs-pane.png Binary files differindex 62270b796f..cfd60d8b95 100644 --- a/doc/images/qtcreator-vcs-pane.png +++ b/doc/images/qtcreator-vcs-pane.png diff --git a/doc/images/qtcreator-vcs-show.png b/doc/images/qtcreator-vcs-show.png Binary files differindex 610a0f2de0..4b510ca7d3 100644 --- a/doc/images/qtcreator-vcs-show.png +++ b/doc/images/qtcreator-vcs-show.png diff --git a/doc/images/qtquick-designer-stacked-view.png b/doc/images/qtquick-designer-stacked-view.png Binary files differindex 78eb17926e..b3205e517c 100644 --- a/doc/images/qtquick-designer-stacked-view.png +++ b/doc/images/qtquick-designer-stacked-view.png diff --git a/doc/images/studio-curve-picker.png b/doc/images/studio-curve-picker.png Binary files differnew file mode 100644 index 0000000000..37f1af0a39 --- /dev/null +++ b/doc/images/studio-curve-picker.png diff --git a/doc/images/studio-timeline-settings.png b/doc/images/studio-timeline-settings.png Binary files differnew file mode 100644 index 0000000000..eefbc561cd --- /dev/null +++ b/doc/images/studio-timeline-settings.png diff --git a/doc/images/studio-timeline.png b/doc/images/studio-timeline.png Binary files differnew file mode 100644 index 0000000000..e5743e068b --- /dev/null +++ b/doc/images/studio-timeline.png diff --git a/doc/src/debugger/creator-only/creator-debugger.qdoc b/doc/src/debugger/creator-only/creator-debugger.qdoc index 57e49a846b..a8d0d1e093 100644 --- a/doc/src/debugger/creator-only/creator-debugger.qdoc +++ b/doc/src/debugger/creator-only/creator-debugger.qdoc @@ -698,6 +698,11 @@ single instructions, such as \uicontrol {Step Into} and \uicontrol {Step Over}. By default, the \uicontrol Disassembler view is hidden. + To access the \uicontrol Disassembler view, check + \uicontrol Debug > \uicontrol {Operate by Instruction} while the debugger is + running. Alternatively, click the \inlineimage debugger_singleinstructionmode.png + (\uicontrol {Operate by Instruction}) tool button on the debugger tool bar. + \section2 Viewing and Editing Register State The \uicontrol Registers view displays the current state of the CPU registers. diff --git a/doc/src/editors/creator-code-syntax.qdoc b/doc/src/editors/creator-code-syntax.qdoc index bf68f1e41a..e183c20f5e 100644 --- a/doc/src/editors/creator-code-syntax.qdoc +++ b/doc/src/editors/creator-code-syntax.qdoc @@ -38,17 +38,20 @@ structure. \if defined(qtcreator) - \list - \li Syntax errors are underlined in red. + In the following screenshot, \QC points out an error, because a semicolon is + missing at the end of the line: - In the following screenshot, a semicolon is missing at the end - of the line. - \image qtcreator-syntaxerror.png - \li Semantic errors and warnings are underlined in olive. + \image qtcreator-syntaxerror.png - In the following screenshot, the variable is not used. - \image qtcreator-semanticerror.png - \endlist + In the following screenshot, \QC issues a warning, because the variable is + not used: + + \image qtcreator-semanticerror.png + + To modify the colors used for underlining errors and warnings, select + \uicontrol Tools > \uicontrol Options > \uicontrol {Text Editor} > + \uicontrol {Fonts & Colors} > \uicontrol Copy, and select new colors for + \uicontrol Error and \uicontrol Warning. \section1 Viewing Annotations diff --git a/doc/src/howto/creator-only/creator-tips.qdoc b/doc/src/howto/creator-only/creator-tips.qdoc index 8033454497..5e481b42f2 100644 --- a/doc/src/howto/creator-only/creator-tips.qdoc +++ b/doc/src/howto/creator-only/creator-tips.qdoc @@ -1,6 +1,6 @@ /**************************************************************************** ** -** Copyright (C) 2018 The Qt Company Ltd. +** Copyright (C) 2019 The Qt Company Ltd. ** Contact: https://www.qt.io/licensing/ ** ** This file is part of the Qt Creator documentation. @@ -53,7 +53,7 @@ \endlist - For more information about \QC modes, see \l {Modes}. + For more information about \QC modes, see \l {Selecting Modes}. \section1 Moving Between Open Files diff --git a/doc/src/howto/creator-sidebar-views.qdocinc b/doc/src/howto/creator-sidebar-views.qdoc index ff287b4525..d92a1067b5 100644 --- a/doc/src/howto/creator-sidebar-views.qdocinc +++ b/doc/src/howto/creator-sidebar-views.qdoc @@ -24,15 +24,19 @@ ****************************************************************************/ /*! -//! [using sidebar views] + \contentspage index.html + \page creator-sidebar-views.html + \previouspage creator-modes.html + \nextpage creator-output-panes.html - \section1 Browsing Project Contents + \title Browsing Project Contents - A left and right sidebar are available in most \QC modes. The availability - of the sidebars and their contents depend on the mode. + A left and right sidebar are available in most \QC \l{Selecting Modes} + {modes}. The availability of the sidebars and their contents depend on + the mode. - In the \uicontrol Edit mode, you can use the sidebars to browse the project - contents. + In the \uicontrol Edit and \uicontrol Design mode, you can use the sidebars + to browse the project contents. \image qtcreator-sidebar.png @@ -97,11 +101,7 @@ In some views, right-clicking opens a context menu that contains functions for managing the objects listed in the view. -//! [using sidebar views] - -//! [projects view] - - \section2 Viewing Project Files + \section1 Viewing Project Files The sidebar displays projects in a project tree. The project tree contains a list of all projects open in the current session. For each project, the @@ -196,11 +196,7 @@ files, as well as compare the selected file with the currently open file in the diff editor. For more information, see \l{Comparing Files}. -//! [projects view] - -//! [open documents view] - - \section2 Viewing Open Documents + \section1 Viewing Open Documents To see a list of open documents, switch to the \uicontrol {Open Documents} view. By right-clicking an open document, you can: @@ -210,11 +206,7 @@ closed when \uicontrol {Close All} is used. \endlist -//! [open documents view] - -//! [file system view] - - \section2 Viewing the File System + \section1 Viewing the File System If you cannot see a file in the \uicontrol Projects view, switch to the \uicontrol {File System} view, which shows all the files in the file system. @@ -282,11 +274,7 @@ \endlist -//! [file system view] - -//! [outline view] - - \section2 Viewing Defined Types and Symbols + \section1 Viewing Defined Types and Symbols The \uicontrol Outline view shows an overview of defined types and other symbols, as well as their properties and hierarchy in a source file. @@ -298,12 +286,7 @@ editor, deselect \uicontrol {Synchronize with Editor}. \endlist -//! [outline view] - - -//! [class view] - - \section2 Viewing the Class Hierarchy + \section1 Viewing the Class Hierarchy The \uicontrol {Class View} shows the class hierarchy of the currently open projects. To organize the view by subprojects, click @@ -313,22 +296,12 @@ To visit all parts of a namespace, double-click on the namespace item multiple times. -//! [class view] - - -//! [type hierarchy view] - - \section2 Viewing Type Hierarchy + \section1 Viewing Type Hierarchy To view the base classes of a class, right-click the class and select \uicontrol {Open Type Hierarchy} or press \key {Ctrl+Shift+T}. -//! [type hierarchy view] - - -//! [include hierarchy view] - - \section2 Viewing Include Hierarchy + \section1 Viewing Include Hierarchy To view which files are included in the current file and which files include the current file, right-click in the editor and select @@ -336,6 +309,4 @@ To keep the view synchronized with the file currently opened in the editor, select \uicontrol {Synchronize with Editor}. - -//! [include hierarchy view] */ diff --git a/doc/src/howto/creator-ui.qdoc b/doc/src/howto/creator-ui.qdoc index 9d0249251b..2419f499e8 100644 --- a/doc/src/howto/creator-ui.qdoc +++ b/doc/src/howto/creator-ui.qdoc @@ -34,11 +34,10 @@ \page creator-quick-tour.html \if defined(qtdesignstudio) \previouspage qtbridge-ps-using.html - \nextpage creator-using-qt-quick-designer.html \else \previouspage creator-overview.html - \nextpage creator-configuring.html \endif + \nextpage creator-modes.html \title User Interface @@ -64,7 +63,8 @@ \image studio-welcome-mode.png \endif - You can use the mode selector (1) to change to another \QC mode. + You can use the \l{Selecting Modes}{mode selector} (1) to change to another + \QC mode. \if defined(qtcreator) You can use the kit selector (2) to select the @@ -74,18 +74,150 @@ \else You can use the kit selector (2) to select the \l{glossary-buildandrun-kit} {kit} for running (3) or debugging (4) the application. Output from these - actions is displayed in the output panes (5). + actions is displayed in the \l{Viewing Output}{output panes} (5). \endif - You can use the locator (6) to browse through projects, files, classes, - functions, documentation, and file systems. + You can use the \l{Searching with the Locator}{locator} (6) to browse + through projects, files, classes, functions, documentation, and file + systems. \if defined(qtcreator) For a quick tour of the user interface that takes you to the locations of these controls, select \uicontrol Help > \uicontrol {UI Tour}. \endif - \section1 Modes + + The following sections describe some of these controls in more detail: + + \list + \li \l{Selecting Modes}{Mode selector} + \li \l{Browsing Project Contents}{Sidebars} + \li \l{Viewing Output}{Output panes} + \endlist + + \section1 Navigating with Keyboard + + \QC caters not only to developers who are used to using the mouse, + but also to developers who are more comfortable with the keyboard. A wide + range of \l{keyboard-shortcuts}{keyboard} and + \l{Searching with the Locator}{navigation} shortcuts are available to help + speed up the process of developing your application. + + \if defined(qtcreator) + \section1 Useful Features + + For a list of useful \QC features described in other parts of the + documentation, see \l{Tips and Tricks}. + \endif + + \section1 Platform Notes + + This section describes the cases where the behavior of \QC depends on the + operating system it runs on. + + \section2 Location of Functions + + \QC uses standard names and locations for standard features, such as + \e options or \e preferences. In this manual, the names and locations on + Windows and Linux are usually used to keep the instructions short. Here are + some places to check if you cannot find a function, dialog, or keyboard + shortcut on \macos when following the instructions: + + \table + \header + \li For + \li Look In + \row + \li \uicontrol Tools > \uicontrol Options + \li \uicontrol {\QC} > \uicontrol Preferences + \row + \li \uicontrol Help > \uicontrol {About Plugins} + \li \uicontrol {\QC} > \uicontrol {About Plugins} + \row + \li Keyboard shortcuts + \li \uicontrol {\QC} > \uicontrol Preferences > \uicontrol Environment > + \uicontrol Keyboard + \endtable + + \if defined(qtcreator) + \section2 Location of Settings Files + + \QC creates the following files and directories: + + \list + + \li QtCreator.db + + \li QtCreator.ini + + \li qtversion.xml + + \li toolChains.xml + + \li qtcreator + + \li qtc-qmldump + + \endlist + + The location of the above files and directories depends on the platform: + + \list + + \li On Linux and other Unix platforms, the files are located in + \c {~/.config/QtProject} and + \c {~/.local/share/data/QtProject/qtcreator}. + + \li On \macos, the files are located in \c {~/.config/QtProject} and + \c {~/Library/Application Support/QtProject/Qt Creator}. + + \li On Windows XP, the files are located in + \c {%SystemDrive%\Documents and Settings\%USERNAME%\Application Data\QtProject} and + \c {%SystemDrive%\Documents and Settings\%USERNAME%\Local Settings\Application Data\QtProject}. + + \li On Windows 7, the files are located in + \c {%SystemDrive%\Users\%USERNAME%\AppData\Roaming\QtProject} and + \c {%SystemDrive%\Users\%USERNAME%\AppData\Local\QtProject}. + + \endlist + \endif + + \section2 High DPI Scaling + + The operating systems supported by \QC implement high dots-per-inch (DPI) + scaling at varying levels. Therefore, \QC handles high DPI scaling + differently on different operating system: + + \list + + \li On \macos, high DPI scaling is forced, which means that \QC allows + Qt to use the system scaling factor as the \QC scaling factor. + + \li On Windows, if no \l{High DPI Support in Qt} + {scaling environment variables} are set, \QC instructs Qt to detect + the scaling factor and use it for \QC. + + \li On Linux, \QC leaves it to the user to enable high DPI scaling, + because the process varies so much on different distributions + and windowing systems that it cannot be reliably done automatically. + + \endlist + + To override the default approach and always enable high-DPI scaling, select + \uicontrol Tools > \uicontrol Options > \uicontrol Environment > + \uicontrol {Enable high DPI scaling}. The changes will take effect after you + restart \QC. +*/ + +/*! + \contentspage index.html + \page creator-modes.html + \previouspage creator-quick-tour.html + \nextpage creator-sidebar-views.html + + \title Selecting Modes + + \image qtcreator-mode-selector.png The mode selector allows you to quickly switch between tasks such as editing project and source files, designing application UIs, configuring how @@ -111,7 +243,7 @@ \list - \li \uicontrol Welcome mode for opening projects. + \li \uicontrol {\l{User Interface}{Welcome}} mode for opening projects. \li \uicontrol{\l{Coding}{Edit}} mode for editing project and source files. @@ -124,7 +256,12 @@ mode for designing and developing application user interfaces. This mode is available for UI files. - \li \uicontrol{\l{Debugging}{Debug}} mode for inspecting the state of your + \if defined(qtcreator) + \li \uicontrol{\l{Debugging}{Debug}} + \else + \li \uicontrol {\l{Debugging and Profiling}{Debug}} + \endif + mode for inspecting the state of your application while debugging and for using code analysis tools to detect memory leaks and profile C++ or QML code. @@ -145,19 +282,21 @@ Certain actions in \QC trigger a mode change. Clicking on \uicontrol {Debug} > \uicontrol {Start Debugging} > \uicontrol {Start Debugging} automatically switches to \uicontrol {Debug} mode. +*/ - \include creator-sidebar-views.qdocinc using sidebar views - \include creator-sidebar-views.qdocinc projects view - \include creator-sidebar-views.qdocinc open documents view - \include creator-sidebar-views.qdocinc file system view - \include creator-sidebar-views.qdocinc outline view - \if defined(qtcreator) - \include creator-sidebar-views.qdocinc class view - \include creator-sidebar-views.qdocinc type hierarchy view - \include creator-sidebar-views.qdocinc include hierarchy view +/*! + \contentspage index.html + \page creator-output-panes.html + \previouspage creator-sidebar-views.html + \if defined(qtdesignstudio) + \nextpage creator-using-qt-quick-designer.html + \else + \nextpage creator-configuring.html \endif - \section1 Viewing Output + \title Viewing Output + + \image qtcreator-task-pane.png The task pane in \QC can display one of the following panes: @@ -185,9 +324,9 @@ \endlist - Output panes are available in all \l{Modes}{modes}. Click the name of an - output pane to open the pane. To maximize an open output pane, click the - \uicontrol {Maximize Output Pane} button or press \key {Alt+9}. + Output panes are available in all \l{Selecting Modes}{modes}. Click the name + of an output pane to open the pane. To maximize an open output pane, click + the \uicontrol {Maximize Output Pane} button or press \key {Alt+9}. To search within the \uicontrol{Application Output} and \uicontrol{Compile Output} panes, press \key {Ctrl+F} when the pane is active. Enter search criteria in @@ -209,7 +348,7 @@ For more information about the \uicontrol {QML Debugger Console} view, see \l{Executing JavaScript Expressions}. - \section2 Issues + \section1 Issues The \uicontrol{Issues} pane provides lists of following types of issues: @@ -283,7 +422,7 @@ To jump from one issue to the next or previous one, press \key F6 and \key Shift+F6. - \section2 Search Results + \section1 Search Results In the \uicontrol{Search Results} pane, you can search through projects, files on a file system or the currently open files: @@ -301,7 +440,7 @@ For more information about the different search options, see \l {Finding and Replacing}. - \section2 Application Output + \section1 Application Output The \uicontrol{Application Output} pane displays the status of a program when it is executed, and the debug output. @@ -325,7 +464,7 @@ on output when running or debugging applications, to clear old output on a new run, to word-wrap output, and to limit output to the specified number of lines. - \section2 Compile Output + \section1 Compile Output The \uicontrol{Compile Output} pane provides all output from the compiler. The \uicontrol{Compile Output} is a more detailed version of information @@ -349,7 +488,7 @@ button. \if defined(qtcreator) - \section2 To-Do Entries + \section1 To-Do Entries The \uicontrol {To-Do Entries} pane lists the BUG, FIXME, NOTE, TODO, and WARNING keywords from the current file, from all project files, or from a @@ -424,123 +563,10 @@ \endlist - \section2 Exporting SVG Images + \section1 Exporting SVG Images If you receive a freely scalable icon in the SVG format from an UI designer, you can export it to several images of different sizes to create a set of pixmaps. You can then use QIcon::addPixmap() to add the pixmaps to icons in different modes and states. - - \section1 Navigating with Keyboard - - \QC caters not only to developers who are used to using the mouse, - but also to developers who are more comfortable with the keyboard. A wide - range of \l{keyboard-shortcuts}{keyboard} and - \l{Searching with the Locator}{navigation} shortcuts are available to help - speed up the process of developing your application. - - \if defined(qtcreator) - \section1 Useful Features - - For a list of useful \QC features described in other parts of the - documentation, see \l{Tips and Tricks}. - \endif - - \section1 Platform Notes - - This section describes the cases where the behavior of \QC depends on the - operating system it runs on. - - \section2 Location of Functions - - \QC uses standard names and locations for standard features, such as - \e options or \e preferences. In this manual, the names and locations on - Windows and Linux are usually used to keep the instructions short. Here are - some places to check if you cannot find a function, dialog, or keyboard - shortcut on \macos when following the instructions: - - \table - \header - \li For - \li Look In - \row - \li \uicontrol Tools > \uicontrol Options - \li \uicontrol {\QC} > \uicontrol Preferences - \row - \li \uicontrol Help > \uicontrol {About Plugins} - \li \uicontrol {\QC} > \uicontrol {About Plugins} - \row - \li Keyboard shortcuts - \li \uicontrol {\QC} > \uicontrol Preferences > \uicontrol Environment > - \uicontrol Keyboard - \endtable - - \if defined(qtcreator) - \section2 Location of Settings Files - - \QC creates the following files and directories: - - \list - - \li QtCreator.db - - \li QtCreator.ini - - \li qtversion.xml - - \li toolChains.xml - - \li qtcreator - - \li qtc-qmldump - - \endlist - - The location of the above files and directories depends on the platform: - - \list - - \li On Linux and other Unix platforms, the files are located in - \c {~/.config/QtProject} and - \c {~/.local/share/data/QtProject/qtcreator}. - - \li On \macos, the files are located in \c {~/.config/QtProject} and - \c {~/Library/Application Support/QtProject/Qt Creator}. - - \li On Windows XP, the files are located in - \c {%SystemDrive%\Documents and Settings\%USERNAME%\Application Data\QtProject} and - \c {%SystemDrive%\Documents and Settings\%USERNAME%\Local Settings\Application Data\QtProject}. - - \li On Windows 7, the files are located in - \c {%SystemDrive%\Users\%USERNAME%\AppData\Roaming\QtProject} and - \c {%SystemDrive%\Users\%USERNAME%\AppData\Local\QtProject}. - - \endlist - \endif - - \section2 High DPI Scaling - - The operating systems supported by \QC implement high dots-per-inch (DPI) - scaling at varying levels. Therefore, \QC handles high DPI scaling - differently on different operating system: - - \list - - \li On \macos, high DPI scaling is forced, which means that \QC allows - Qt to use the system scaling factor as the \QC scaling factor. - - \li On Windows, if no \l{High DPI Support in Qt} - {scaling environment variables} are set, \QC instructs Qt to detect - the scaling factor and use it for \QC. - - \li On Linux, \QC leaves it to the user to enable high DPI scaling, - because the process varies so much on different distributions - and windowing systems that it cannot be reliably done automatically. - - \endlist - - To override the default approach and always enable high-DPI scaling, select - \uicontrol Tools > \uicontrol Options > \uicontrol Environment > - \uicontrol {Enable high DPI scaling}. The changes will take effect after you - restart \QC. */ diff --git a/doc/src/projects/creator-only/creator-projects-generic.qdoc b/doc/src/projects/creator-only/creator-projects-generic.qdoc index 2a387de1a7..7c1f06ec35 100644 --- a/doc/src/projects/creator-only/creator-projects-generic.qdoc +++ b/doc/src/projects/creator-only/creator-projects-generic.qdoc @@ -133,7 +133,7 @@ \section1 Forwarding Flags to Clang Code Model The \c {.cxxflags} and \c {.cflags} files contain command line flags for the - Clang code model, one flag per line. + Clang code model on a single line. For example, specify the \c {-std=c++11} to set the language version for parsing as C++11. diff --git a/doc/src/qtcreator-toc.qdoc b/doc/src/qtcreator-toc.qdoc index 3f9c7a7df5..c2beb581b8 100644 --- a/doc/src/qtcreator-toc.qdoc +++ b/doc/src/qtcreator-toc.qdoc @@ -35,6 +35,11 @@ \list \li \l{IDE Overview} \li \l{User Interface} + \list + \li \l{Selecting Modes} + \li \l{Browsing Project Contents} + \li \l{Viewing Output} + \endlist \li \l{Configuring Qt Creator} \li \l{Building and Running an Example} \li \l{Tutorials} @@ -86,7 +91,6 @@ \li \l{Developing Qt Quick Applications} \list \li \l {Creating Qt Quick Projects} - \li \l {Qt Quick UI Forms} \li \l {Editing QML Files in Design Mode} \li \l {Creating Components} \list @@ -95,7 +99,7 @@ \endlist \li \l {Managing Item Hierarchy} \li \l {Specifying Item Properties} - \li \l {Editing PathView Properties} + \li \l {Creating Animations} \li \l {Adding Connections} \list \li \l{Connecting Objects to Signals} @@ -104,7 +108,9 @@ \li \l{Managing C++ Backend Objects} \endlist \li \l {Adding States} + \li \l {Editing PathView Properties} \li \l {Browsing ISO 7000 Icons} + \li \l {Qt Quick UI Forms} \li \l {Exporting Designs from Graphics Software} \li \l {Using QML Modules with Plugins} \li \l {Converting UI Projects to Applications} diff --git a/doc/src/qtquick/creator-only/creator-mobile-app-tutorial.qdoc b/doc/src/qtquick/creator-only/creator-mobile-app-tutorial.qdoc index 380192d9dd..6f8b571bf8 100644 --- a/doc/src/qtquick/creator-only/creator-mobile-app-tutorial.qdoc +++ b/doc/src/qtquick/creator-only/creator-mobile-app-tutorial.qdoc @@ -100,7 +100,7 @@ to reference the rectangle from other places. \li Select the \uicontrol Layout tab, and then click - the \inlineimage anchor_fill.png + the \inlineimage anchor-fill.png (\uicontrol {Fill to Parent}) button to anchor the rectangle to the item. diff --git a/doc/src/qtquick/creator-only/qtquick-app-development.qdoc b/doc/src/qtquick/creator-only/qtquick-app-development.qdoc index 698dffa3ae..c1a1abac9a 100644 --- a/doc/src/qtquick/creator-only/qtquick-app-development.qdoc +++ b/doc/src/qtquick/creator-only/qtquick-app-development.qdoc @@ -32,72 +32,137 @@ /*! \contentspage index.html - \previouspage creator-design-mode.html \page creator-visual-editor.html + \if defined(qtdesignstudio) + \previouspage quick-converting-ui-projects.html + \nextpage quick-components.html + \else + \previouspage creator-design-mode.html \nextpage quick-projects.html + \endif \title Developing Qt Quick Applications + \if defined(qtdesignstudio) + When you install \QDS, everything you'll need to design UIs + using \l{Qt Quick} and to preview them on the desktop or on Android or + embedded Linux devices is automatically installed and configured correctly + for you. + \endif + + Qt Quick enables you to build UIs around the behavior of + \e components and how they connect with one another. You + create components using Qt Quick and QML types that are available in + the Design mode. You can specify values for the \e properties of a + component to change its appearance and behavior. All QML types have a + set of predefined properties, some of which control things that are + visible to users, while others are used behind the scene. + + While it is useful to learn the basics of Qt Quick, you can also rely on + \QDS to write the code for you when you drag-and-drop the ready-made + components to the working area and change them to your liking by modifying + their properties in the Design mode. You can always check up details in + the extensive Qt Quick documentation by pressing \key F1. + \list + \if defined(qtcreator) \li \l {Creating Qt Quick Projects} You can use wizards to create Qt Quick projects. - \li \l{Qt Quick UI Forms} - - Some of the wizards create Qt Quick projects that contain UI forms - (.ui.qml files). The forms use a purely declarative subset of the - QML language and you can edit them in the Design mode. - \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. + \endif \li \l {Creating Components} - You can use basic QML types to create your own components that you - can combine with ready-made Qt Quick Controls and Layouts - (available since Qt 5.7). + In addition to your imported artwork, you can use the Design + mode to customize ready-made components or design any custom form + and shape directly as QML types. You can import visual assets in + various formats, such as PNG, JPG, and SVG for use in the + components. - \li \l {Managing Item Hierarchy} + \li \l {Managing Item Hierarchy} You can manage the items in the current QML file and their relationships in the \uicontrol Navigator. \li \l {Specifying Item Properties} - You can specify properties for your components in the + You can specify values for the properties of a component to change + its appearance and behavior. All QML types have a set of predefined + properties. Some properties, such as position, size, and visibility, + are common to all QML types, whereas others are specific to the QML + type. You can specify properties for your components in the \uicontrol Properties pane. - \li \l {Editing PathView Properties} + \li \l {Creating Animations} - You can use a graphical spline editor to specify \l{PathView} paths. - A path view lays out data provided by data models on a \l{Path}. + You can use a timeline and keyframe based editor in the + \uicontrol Timeline view to animate the properties of UI + components. Animating properties enables their values to + move through intermediate values at specified keyframes + instead of immediately changing to the target value. \li \l {Adding Connections} - You can connect objects to signals, specify dynamic properties for - objects, and create bindings between the properties of two objects. + You can create connections between the UI components and + the application to enable them to communicate with each other. For + example, how does the appearance of a button change on a mouse click + and which action does the application need to perform in response to + it. + + You can also create connections between UI components by + binding their properties together. This way, when the value of a + property changes in a parent component, it can be automatically + changed in all the child components, for example. \li \l {Adding States} - You can use states to describe user interface configurations, such - as the UI controls, their properties and behavior, and the available - actions. + Qt Quick allows you to declare various UI states that describe + how component properties change from a base state. Therefore, + states can be a useful way of organizing your UI + logic. You can associate transitions with items to define + how their properties will animate when they change due to a state + change. + \endlist + + \section1 Related Topics + + \list + \if defined(qtdesignstudio) + \li \l {Using Custom Fonts} + + You can load custom fonts to \QDS and use them in your designs. + \endif + + \li \l {Editing PathView Properties} + + You can use a graphical spline editor to specify \l{PathView} paths. + A path view lays out data provided by data models on a \l{Path}. \li \l {Browsing ISO 7000 Icons} - You can add ISO 7000 icons from a library delivered with \QC to Qt - Quick applications and change their color (commercial only). + You can add ISO 7000 icons from a library delivered with \QC to + UIs and change their color. + \li \l{Qt Quick UI Forms} + + Some of the wizards create Qt Quick projects that contain UI forms + (.ui.qml files). The forms use a purely declarative subset of the + QML language and you can edit them in the Design mode. + + \if defined(qtcreator) \li \l {Exporting Designs from Graphics Software} You can export designs from graphics software, such as Adobe Photoshop and GIMP, to QML files. You can then edit QML files in \QC. + \li \l {Using QML Modules with Plugins} QML modules may use plugins to expose components defined in C++ to @@ -105,12 +170,14 @@ details of the contained components, and therefore, the modules must provide extra type information for code completion and the semantic checks to work correctly. + \li \l {Converting UI Projects to Applications} Qt Quick UI projects (.qmlproject) are useful for creating user interfaces. To use them for application development, you have to convert them to Qt Quick Application projects that contain .pro, .cpp, and .qrc files. + \endif \endlist diff --git a/doc/src/qtquick/creator-only/qtquick-app-tutorial.qdoc b/doc/src/qtquick/creator-only/qtquick-app-tutorial.qdoc index 6592b10c45..55fe9f421c 100644 --- a/doc/src/qtquick/creator-only/qtquick-app-tutorial.qdoc +++ b/doc/src/qtquick/creator-only/qtquick-app-tutorial.qdoc @@ -58,7 +58,7 @@ \section1 Creating the Main View The main view of the application displays a Qt logo in the top left corner - of the screen and two empty rectangles. + of the view and two empty rectangles. To use the \e qt-logo.png image in your application, you must copy it from the Qt examples directory to the project directory (same subdirectory as @@ -117,22 +117,24 @@ \li In the \uicontrol {Border color} field, set the border color to \e #808080. - \li Click \uicontrol {Layout}, and then click the top and left - anchor buttons to anchor the rectangle to the top left corner of - the page. - - \image qmldesigner-tutorial-topleftrect-layout.png "Layout tab" + \li Click \uicontrol {Layout}, and then click the + \inlineimage anchor-top.png + (\uicontrol Top) and \inlineimage anchor-left.png + (\uicontrol Left) anchor buttons to anchor the + rectangle to the top left corner of the page. \li In the \uicontrol Margin field, select \e 20 for the top anchor and \e 10 for the left anchor. + \image qmldesigner-tutorial-topleftrect-layout.png "Anchor margins" + \endlist \li Drag and drop a \uicontrol {Mouse Area} type from the \uicontrol Library to \e topLeftRect in the navigator. \li Click \uicontrol {Layout}, and then click the - \inlineimage anchor_fill.png + \inlineimage anchor-fill.png (\uicontrol {Fill to Parent}) button to anchor the mouse area to the rectangle. @@ -147,9 +149,12 @@ \li In the \uicontrol Id field, enter \e middleRightRect. - \li In \uicontrol {Layout}, select the vertical center anchor button and - then the right anchor button to - anchor the rectangle to the middle right margin of the screen. + \li In \uicontrol {Layout}, select the + \inlineimage anchor-vertical-center.png + (\uicontrol {Vertical Center} anchor button and then the + \inlineimage anchor-right.png + (\uicontrol Right) anchor button to anchor the rectangle + to the middle right margin of its parent. \li In the \uicontrol Margin field, select \e 10 for the right anchor and \e 0 for the vertical center anchor. @@ -162,8 +167,11 @@ \li In the \uicontrol Id field, enter \e bottomLeftRect. - \li In \uicontrol {Layout}, select the bottom and left anchor buttons to - anchor the rectangle to the bottom left margin of the screen. + \li In \uicontrol {Layout}, select the + \inlineimage anchor-bottom.png + (\uicontrol Bottom) and \inlineimage anchor-left.png + (\uicontrol Left) anchor buttons to anchor the rectangle + to the bottom left margin of its parent. \li In the \uicontrol Margin field, select \e 20 for the bottom anchor and \e 10 for the left anchor. diff --git a/doc/src/qtquick/creator-only/qtquick-creating.qdoc b/doc/src/qtquick/creator-only/qtquick-creating.qdoc index 90a6e8d4f5..011f57a5c1 100644 --- a/doc/src/qtquick/creator-only/qtquick-creating.qdoc +++ b/doc/src/qtquick/creator-only/qtquick-creating.qdoc @@ -242,7 +242,7 @@ files in the project folder belong to the project. Therefore, you do not need to individually list all the files in the project. - \li .qml file defines an UI item, such as a component, screen, or the + \li .qml file defines an UI item, such as a component or the whole application UI. \li ui.qml file defines a form for the application UI. This file is diff --git a/doc/src/qtquick/creator-only/qtquick-exporting-qml.qdoc b/doc/src/qtquick/creator-only/qtquick-exporting-qml.qdoc index fe48d2bc8b..668bcc877e 100644 --- a/doc/src/qtquick/creator-only/qtquick-exporting-qml.qdoc +++ b/doc/src/qtquick/creator-only/qtquick-exporting-qml.qdoc @@ -1,6 +1,6 @@ /**************************************************************************** ** -** Copyright (C) 2018 The Qt Company Ltd. +** Copyright (C) 2019 The Qt Company Ltd. ** Contact: https://www.qt.io/licensing/ ** ** This file is part of the Qt Creator documentation. @@ -32,7 +32,7 @@ /*! \contentspage index.html - \previouspage qtquick-iso-icon-browser.html + \previouspage creator-quick-ui-forms.html \page quick-export-to-qml.html \nextpage creator-qml-modules-with-plugins.html diff --git a/doc/src/qtquick/qtquick-buttons.qdoc b/doc/src/qtquick/qtquick-buttons.qdoc index 0f7c5f5235..104605a7b8 100644 --- a/doc/src/qtquick/qtquick-buttons.qdoc +++ b/doc/src/qtquick/qtquick-buttons.qdoc @@ -76,7 +76,7 @@ the rectangle and produce rounded corners for the button. \li Select \uicontrol {Layout}, and then select the - \inlineimage anchor_fill.png + \inlineimage anchor-fill.png (\uicontrol {Fill to Parent}) button to anchor the rectangle to the item. @@ -208,7 +208,7 @@ for example button_up.png. \li Click \uicontrol {Layout}, and then click the - \inlineimage anchor_fill.png + \inlineimage anchor-fill.png (\uicontrol {Fill to Parent}) button to anchor the border image to the \uicontrol Item. @@ -258,12 +258,11 @@ \endlist \li Click \uicontrol {Layout}, and then click the - \inlineimage anchor_vertical.png - (\uicontrol {Set Vertical Anchor}) and - \inlineimage anchor_horizontal.png - (\uicontrol {Set Horizontal Anchor}) - buttons to inherit the vertical and horizontal centering from - the parent. + \inlineimage anchor-vertical-center.png + (\uicontrol {Vertical Center}) and + \inlineimage anchor-horizontal-center.png + (\uicontrol {Horizontal Center}) buttons to inherit the + vertical and horizontal centering from the parent. \endlist diff --git a/doc/src/qtquick/qtquick-components.qdoc b/doc/src/qtquick/qtquick-components.qdoc index 090f031b80..36190f8106 100644 --- a/doc/src/qtquick/qtquick-components.qdoc +++ b/doc/src/qtquick/qtquick-components.qdoc @@ -142,14 +142,14 @@ \l{SwipeDelegate}{Swipe Delegate} delegate components are also available in the \uicontrol Library. - \section1 Positioning Items on Screens + \section1 Positioning Items in UIs - The position of an item on the canvas can be either absolute or relative - to other items. If you are designing a static user interface, + The position of an item in the UI can be either absolute or + relative to other items. If you are designing a static UI, \l{Important Concepts In Qt Quick - Positioning#manual-positioning} - {manual positioning} provides the most efficient form of positioning items - on the screen. For a dynamic user interface, you can employ the following - positioning methods provided by Qt Quick: + {manual positioning} provides the most efficient form of positioning + items. For a dynamic UI, you can employ the following positioning + methods provided by Qt Quick: \list \li \l{Setting Bindings} @@ -212,7 +212,7 @@ \image qmldesigner-anchor-buttons.png "Anchor buttons" - For convenience, you can click the \inlineimage anchor_fill.png + For convenience, you can click the \inlineimage anchor-fill.png (\uicontrol {Fill to Parent}) toolbar button to apply fill anchors to an item and the \inlineimage qtcreator-anchors-reset-icon.png (\uicontrol {Reset Anchors}) button to reset the anchors to their saved @@ -264,7 +264,7 @@ the layout managers used with standard Qt widgets, except that they are also containers in their own right. - You can use the following positioners to arrange items on screens: + You can use the following positioners to arrange items in UIs: \list \li \l[QML] {Column} arranges its child items vertically. @@ -283,11 +283,11 @@ \section2 Using Layouts Since Qt 5.1, you can use QML types in the \l{qtquicklayouts-index.html} - {Qt Quick Layouts} module to arrange Qt Quick items on screens. Unlike + {Qt Quick Layouts} module to arrange Qt Quick items in UIs. Unlike positioners, they manage both the positions and sizes of items in a - declarative interface. They are well suited for resizable user interfaces. + declarative interface. They are well suited for resizable UIs. - You can use the following layout types to arrange items on screens: + You can use the following layout types to arrange items in UIs: \list \li \l{Layout} provides attached properties for items pushed onto a @@ -337,7 +337,7 @@ \section2 Organizing Items Since Qt 5.7, you can use the following \l{Qt Quick Controls} types to - organize items on screens: + organize items in UIs: \list \li \l [QtQuickControls]{Frame} places a logical group of controls @@ -357,7 +357,7 @@ \section1 Adding User Interaction Methods You can use the following QML types to add basic interaction methods to - screens: + UIs: \list \li \l{Flickable} @@ -441,7 +441,7 @@ \section1 History of Qt Quick Controls In Qt 4, ready-made Qt Quick 1 Components were provided for creating - screens with a native look and feel for a particular target platform. + UIs with a native look and feel for a particular target platform. In Qt 5.1, Qt Quick Controls, Dialogs, and Layouts were added for creating classic desktop-style user interfaces using Qt Quick 2.1. The Qt Quick Controls Styles could be used to customize Qt Quick Controls. diff --git a/doc/src/qtquick/qtquick-designer.qdoc b/doc/src/qtquick/qtquick-designer.qdoc index ab3102d3dd..df38bf0165 100644 --- a/doc/src/qtquick/qtquick-designer.qdoc +++ b/doc/src/qtquick/qtquick-designer.qdoc @@ -33,7 +33,7 @@ \contentspage index.html \page creator-using-qt-quick-designer.html \if defined(qtdesignstudio) - \previouspage creator-quick-tour.html + \previouspage creator-modes.html \nextpage {Tutorials} \else \previouspage creator-quick-ui-forms.html @@ -157,7 +157,7 @@ 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 screens for use with different device + 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. diff --git a/doc/src/qtquick/qtquick-pathview-editor.qdoc b/doc/src/qtquick/qtquick-pathview-editor.qdoc index 872cd4cd8e..bd4f4bd851 100644 --- a/doc/src/qtquick/qtquick-pathview-editor.qdoc +++ b/doc/src/qtquick/qtquick-pathview-editor.qdoc @@ -1,6 +1,6 @@ /**************************************************************************** ** -** Copyright (C) 2018 The Qt Company Ltd. +** Copyright (C) 2019 The Qt Company Ltd. ** Contact: https://www.qt.io/licensing/ ** ** This file is part of the Qt Creator documentation. @@ -28,11 +28,10 @@ \page qmldesigner-pathview-editor.html \if defined(qtdesignstudio) \previouspage studio-fonts.html - \nextpage qtquick-iso-icon-browser.html \else - \previouspage qtquick-properties.html - \nextpage qmldesigner-connections.html + \previouspage quick-states.html \endif + \nextpage qtquick-iso-icon-browser.html \title Editing PathView Properties diff --git a/doc/src/qtquick/qtquick-properties.qdoc b/doc/src/qtquick/qtquick-properties.qdoc index 41e1086f8a..5f6759b9c4 100644 --- a/doc/src/qtquick/qtquick-properties.qdoc +++ b/doc/src/qtquick/qtquick-properties.qdoc @@ -27,11 +27,7 @@ \contentspage {Qt Creator Manual} \page qtquick-properties.html \previouspage qtquick-navigator.html - \if defined(qtdesignstudio) \nextpage studio-timeline.html - \else - \nextpage qmldesigner-pathview-editor.html - \endif \title Specifying Item Properties diff --git a/doc/src/qtquick/qtquick-states.qdoc b/doc/src/qtquick/qtquick-states.qdoc index c316df4575..2cf0244521 100644 --- a/doc/src/qtquick/qtquick-states.qdoc +++ b/doc/src/qtquick/qtquick-states.qdoc @@ -31,7 +31,7 @@ \nextpage studio-fonts.html \else \previouspage quick-connections-backend.html - \nextpage qtquick-iso-icon-browser.html + \nextpage qmldesigner-pathview-editor.html \endif \title Adding States @@ -60,7 +60,7 @@ \li Start, stop or pause animations. \li Execute some script required in the new state. \li Change a property value for a particular item. - \li Show a different view or screen. + \li Show a different view. \endlist The \uicontrol States pane displays the different \l{State}{states} @@ -73,7 +73,7 @@ To add states, click the \inlineimage plus.png button. Then modify the new state in the editor. For example, to change the appearance of a button, you can hide the button image and show another image - in its place. Or, to add movement to the screen, you can change the position + in its place. Or, to add movement to the view, you can change the position of an object on the canvas and then add animation to the change between the states. @@ -88,7 +88,7 @@ QML states typically describe user interface configurations, such as the UI controls, their properties and behavior and the available actions. For - example, you can use states to create two screens. + example, you can use states to create two views. To add states, click the empty slot in the \uicontrol States pane. Then modify the new state in the \uicontrol {Form Editor} or the @@ -106,7 +106,7 @@ This allows you to: \list - \li Align items on different screens with each other. + \li Align items on different views with each other. \li Avoid excessive property changes. If an item is invisible in the base state, you must define all changes to its child types as property changes, which leads to complicated QML code. @@ -116,13 +116,13 @@ states. \endlist - To create screens for an application by using states: + To create views for an application by using states: \list 1 \li In the base state, add all items you will need in the application - (1). While you work on one screen, you can click the + (1). While you work on one view, you can click the \inlineimage eye_open.png - icon to hide items on the canvas that are not part of a screen. + icon to hide items on the canvas that are not part of a view. \li In the \uicontrol States pane, click the empty slot to create a new state and give it a name. For example, \c Normal. \li In the \uicontrol Properties pane (2), deselect the @@ -130,9 +130,9 @@ for each item that is not needed in this view. If you specify the setting for the parent item, all child items inherit it and are also hidden. - \image qmldesigner-screen-design.png "Designing screens" - \li Create additional states for each screen and set the visibility - or opacity of the items in the screen. + \image qmldesigner-screen-design.png "Designing views" + \li Create additional states for each view and set the visibility + or opacity of the items in the view. \li To determine which view opens when the application starts, use the \uicontrol {Text Editor} to set the state of the root item of the .qml file, as specified by the following code snippet: diff --git a/doc/src/qtquick/qtquick-timeline.qdoc b/doc/src/qtquick/qtquick-timeline.qdoc new file mode 100644 index 0000000000..0904fd908d --- /dev/null +++ b/doc/src/qtquick/qtquick-timeline.qdoc @@ -0,0 +1,322 @@ +/**************************************************************************** +** +** Copyright (C) 2019 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 {Qt Design Studio Manual} + \previouspage qtquick-properties.html + \page studio-timeline.html + \nextpage qmldesigner-connections.html + + \title Creating Animations + + You can use the timeline and keyframe based editor in the + \uicontrol Timeline view to animate the properties of UI components. + Animating properties enables their values to move through intermediate + values instead of immediately changing to the target value. For example, + to move an item in a scene, you can animate the properties that control + the item's position, x and y, so that the item's position changes at + keyframes on the way to the target position. Similarly, you could change + the color and scale properties of the item at keyframes to make it appear + to move closer or farther away. + + Qt Quick allows you to declare various UI states in \l State objects. + These states are comprised of property changes from a base state, and + can be a useful way of organizing your UI logic. Transitions are objects + you can associate with an item to define how its properties will animate + when they change due to a state change. + + You can find a video tutorial about creating timelines and adding keyframes + \l{https://resources.qt.io/development-topic-ui-design/qtdesignstudio-clustertutorial-parttwo} + {here}. + + \if defined(qtcreator) + \section1 Enabling the Timeline Editor + + The \uicontrol Timeline view is not visible in \QC by default. To enable + it, select \uicontrol Tools > \uicontrol Options > \uicontrol {Qt Quick} > + \uicontrol {Qt Quick Designer} > \uicontrol {Enable Timeline editor}. You + need to restart \QC for the \uicontrol Timeline view to appear. + + To be able to create timelines, you also need the Qt Quick Timeline module. + At the time of this writing, the module is not available as a library in + the Qt installer, and therefore you must check out the repository and build + the module yourself using the same Qt version that you used to build \QC. + + You can check out the module from + \l{https://codereview.qt-project.org/#/admin/projects/qt/qtquicktimeline} + {Qt Code Review Tool}. + \endif + + \section1 Creating Timelines + + You specify settings for the timeline and for running the animation in the + \uicontrol {Timeline Settings} dialog. + + \image studio-timeline-settings.png "Timeline Settings dialog" + + To create a timeline to animate a UI component: + + \list 1 + \li In the \uicontrol Navigator, select the item to animate. + \li Select the \uicontrol Timeline tab to open the \uicontrol Timeline + view. + \li Select the \inlineimage plus.png + (\uicontrol {Add Timeline (A)}) button, or press \key {A} to + specify settings for the timeline and running the animation + in the \uicontrol {Timeline Settings} dialog. + \li In the \uicontrol {Timeline ID} field, enter a name that describes + the animated item. + \li In the \uicontrol {End frame} field, set the duration of the + animation. + \li To use bindings to specify the properties, select the + \uicontrol {Expression binding} radio button and enter the binding + in the \uicontrol {Expression binding} field. For more information + about property binding, see \l{Setting Bindings}. + \li To create a timeline animation, select the \uicontrol Animation + radio button. + \li In the \uicontrol timelineAnimation tab, \uicontrol {Animation ID} + field, enter a name for the animation. + \li Select the \uicontrol {Running in Base State} check box to use the + settings in this tab when previewing the UI. Deselect the check box + to use the default settings. + \li In the \uicontrol {Start frame} field, set the first frame of the + animation. + \li In the \uicontrol {End frame} field, set the last frame of the + animation. + \li In the \uicontrol {Duration} field, set the length of the + animation from the start frame to the end frame. If you set a + shorter duration than the number of frames, frames are left out + from the end of the animation when viewing it. + \li Select the \uicontrol Continuous check box to loop the animation + indefinitely. + \li In the \uicontrol Loops field, select the number of times to run + the animation as a loop. The default number of loops is one, which + means that you must restart the animation to see it again + \li Select the \uicontrol {Ping pong} check box to play the animation + backwards back to the beginning when it reaches the end. + \li In the \uicontrol {Transitions to states} field, select the state + to switch to when the animation finishes. + \li Select \uicontrol Close to close the dialog and save the settings. + \endlist + + To create additional timelines, select the \inlineimage plus.png + (\uicontrol {Add Timeline}) button next to the \uicontrol timeline tab. + + To specify settings for running the timeline animations, select the + \inlineimage plus.png + (\uicontrol {Add Animation}) button next to the + \uicontrol {Animation Settings} group. For example, you could create + settings for running a part of the timeline animation between specified + frames or for running the animation backwards from the last frame to the + first. + + To modify the settings, select the \inlineimage animation.png + (\uicontrol {Timeline Settings (S)}) button on the toolbar + (or press \key S) in the \uicontrol Timeline view. + + \section2 Binding Animations to States + + The table at the bottom of the \uicontrol {Timeline Settings} dialog lists + the available states. Double-click the values in the \uicontrol Timeline + and \uicontrol Animation column to bind the states to animations. In the + \uicontrol {Fixed Frame} column, you can bind the states that don't have + animations to fixed frames. + + \section1 Managing Keyframes + + To animate components in the \uicontrol Timeline view, move to a frame + on the timeline and specify changes in the values of a property. \QDS + automatically adds keyframes between two keyframes, and sets their values + evenly to create an appearance of movement or transformation. + + \section2 Navigating the Timeline + + \image studio-timeline.png "Timeline view" + + You can navigate the timeline in the following ways: + + \list + \li Drag the playhead (1) to a frame. + \li Click on the ruler (2) to move to a frame. + \li Select the \uicontrol {To Start (Home)}, \uicontrol {Previous (,)}, + or \uicontrol {Next (.)} buttons (3), or use the keyboard shortcuts + to move to the first, previous, or next frame on the timeline. + \li Enter the number of a frame in the field (4) to move to that frame. + \li Select the \uicontrol Previous and \uicontrol Next buttons next to + a property name on the timeline (5) to move to the previous or next + keyframe for that property. + \endlist + + \section2 Setting Keyframe Values + + You can insert keyframes for all the properties of all the components that + you want to animate first, and then record the changes in their values by + selecting the \inlineimage recordfill.png + (\uicontrol {Per Property Recording}) button for one property at a time. + For example, you can hide and show items by turning their visibility off and + on or by setting their opacity to 0 or 1. + + You can also select the \uicontrol {Auto Key (K)} button (or press \key K) + to record changes in property values, but you need to be more careful about + which property values you are changing to avoid surprises. + + To record the changes of property values: + + \list 1 + \li In the \uicontrol Navigator, select the item to animate. + \li In the \uicontrol Properties view, select \uicontrol Settings > + \uicontrol {Insert Keyframe} for the property that you want to + animate. + \li Select the \uicontrol {Per Property Recording} button to start + recording property changes. + \li Check that the playhead is in frame 0 and enter the value of the + property in the field next to the property name on the timeline. + Press \key Enter to save the value. + \li Move the playhead to another frame on the timeline and specify + the value at that frame. + \li When you have specified as many values as you need, select + \uicontrol {Per Property Recording} again to stop recording. + \endlist + + To remove all the changes you recorded for a property, right-click the + property name on the timeline and select \uicontrol {Remove Property}. + + Keyframes a marked on the timeline by using markers of different colors and + shapes, depending on whether they are active or inactive or whether you have + applied easing curves to them, for example. + + To edit the value of the selected keyframe, select + \uicontrol {Edit Value for Keyframe} in the context menu. + + You can copy the keyframes from the keyframe track for an item and + paste them to the keyframe track of another item. To copy all + keyframes from one item to another one, select an item, and then + select \uicontrol {Copy All Keyframes} in the context menu. Then + select the other item and select \uicontrol {Paste Keyframes} in + the context menu. + + To delete the selected keyframe, select \uicontrol {Delete Keyframe} in the + context menu. + + To delete all keyframes from the selected item, select + \uicontrol {Delete All Keyframes} in the context menu. + + To add keyframes to the keyframe track of an item at the current position + of the playhead select \uicontrol {Add Keyframes at Current Frame}. + + \section1 Viewing the Animation + + You can view the animation on the canvas by moving the playhead along the + timeline. + + \if defined(qtdesignstudio) + To preview the animation, select the \uicontrol {Play (Space)} + button or press \key Space. To preview the whole UI, select the + \inlineimage live_preview.png + (\uicontrol {Show Live Preview}) button on the canvas toolbar + or press \key {Alt+P}. + \endif + + \section1 Editing Easing Curves + + \e Easing specifies the rate of a property value over time, so that + components can appear to pick up speed, slow down, or bounce back at the + end of the animation. By default, the animations you specify on the + timeline are \e linear, which means that they move from the beginning to + the end at a constant speed. You can use the curve picker to edit the + easing curve at a keyframe. + + \image studio-curve-picker.png + + You can use the preset curves or modify them by dragging the curve handlers + around. You can add points to the curve and drag them and the point handlers + to modify the curve. When you are happy with the curve, you can save it as a + custom curve. For more information about easing curve types, see the + documentation for \l [QML] {PropertyAnimation}{easing curves}. + + To zoom into and out of the easing curve editor, use the mouse roller. To + reset the zoom factor, right-click in the editor and select + \uicontrol {Reset Zoom}. + + To select easing curves: + + \list 1 + \li Select a keyframe on the timeline. + \li Select \uicontrol {Curve Picker (C)} on the toolbar, or press + \key C to open the \uicontrol {Easing Curve Editor} dialog. + \li Select an easing curve in the \uicontrol Presets tab. + \li In the \uicontrol {Duration (ms)} field, select the duration of the + easing function in milliseconds. + \li Select \uicontrol Preview to preview the curve. + \li Select \uicontrol OK to attach the easing curve to the keyframe + and to close the curve picker. + \endlist + + When you attach easing curves to keyframes, the shape of the keyframe + marker changes from \inlineimage keyframe_linear_inactive.png + to \inlineimage keyframe_manualbezier_inactive.png + . + + To customize easing curves: + + \list 1 + \li In the \uicontrol {Easing Curve Editor} dialog, select an easing + curve in the \uicontrol Presets tab. + \li Drag the curve handlers to modify the curve. + \li Right-click in the editor, and select \uicontrol {Add Point} to add + points to the curve. + \li Drag the points or the point handlers to modify the curve. If the + curve becomes invalid, it turns red in the editor and the + \uicontrol Save button is disabled. + \li Select \uicontrol Save to save your changes to the curve. + \li In the \uicontrol Name field, enter a name for the custom curve, + and then select \uicontrol OK to save the curve in the + \uicontrol Custom tab. + \endlist + + To paste easing curve definitions to the curve picker as text, select + the \uicontrol Text tab. + + \section1 Rotating Items + + To animate components that rotate around a central point, you can use the + \l Item QML type as a parent for the rotating component. Then create a + timeline for the Item and set the rotation property for the start and end + keyframes. + + \if defined(qtdesignstudio) + \section1 Animating Shapes + + You can use the Studio components to animate the following shapes: + + \list + \li Arc + \li Border + \li Pie + \li Rectangle + \li Triangle + \endlist + \endif +*/ diff --git a/doc/src/qtquick/qtquick-ui-forms.qdoc b/doc/src/qtquick/qtquick-ui-forms.qdoc index fe4f7d5ee4..16ce57a7e7 100644 --- a/doc/src/qtquick/qtquick-ui-forms.qdoc +++ b/doc/src/qtquick/qtquick-ui-forms.qdoc @@ -33,12 +33,11 @@ \contentspage index.html \page creator-quick-ui-forms.html - \if defined(qtdesignstudio) \previouspage qtquick-iso-icon-browser.html + \if defined(qtdesignstudio) \nextpage studio-live-preview.html \else - \previouspage quick-projects.html - \nextpage creator-using-qt-quick-designer.html + \nextpage quick-export-to-qml.html \endif \title Qt Quick UI Forms |
