diff --git a/doc/qtcreator/images/icons/navigator-arrowdown.png b/doc/qtcreator/images/icons/navigator-arrowdown.png new file mode 100644 index 00000000000..ff55e005cdd Binary files /dev/null and b/doc/qtcreator/images/icons/navigator-arrowdown.png differ diff --git a/doc/qtcreator/images/icons/navigator-arrowup.png b/doc/qtcreator/images/icons/navigator-arrowup.png new file mode 100644 index 00000000000..a9498573cfa Binary files /dev/null and b/doc/qtcreator/images/icons/navigator-arrowup.png differ diff --git a/doc/qtcreator/src/qtcreator-toc.qdoc b/doc/qtcreator/src/qtcreator-toc.qdoc index 8ccab79a3a0..f2cba727297 100644 --- a/doc/qtcreator/src/qtcreator-toc.qdoc +++ b/doc/qtcreator/src/qtcreator-toc.qdoc @@ -95,6 +95,7 @@ \list \li \l{Form Editor} \li \l{Library} + \li \l{Navigator} \endlist \li \l {Creating UIs} \list @@ -109,7 +110,6 @@ \li \l{Creating Buttons} \li \l{Creating Scalable Buttons and Borders} \endlist - \li \l{Managing Item Hierarchy} \li \l{Specifying Item Properties} \li \l{Positioning Items} \li \l{Using Custom Fonts} diff --git a/doc/qtcreator/src/qtquick/creator-only/qtquick-app-tutorial.qdoc b/doc/qtcreator/src/qtquick/creator-only/qtquick-app-tutorial.qdoc index 41a9593ec67..91159e76bbc 100644 --- a/doc/qtcreator/src/qtquick/creator-only/qtquick-app-tutorial.qdoc +++ b/doc/qtcreator/src/qtquick/creator-only/qtquick-app-tutorial.qdoc @@ -195,7 +195,7 @@ \list \li \l{Creating Components} - \li \l{Managing Item Hierarchy} + \li \l{Navigator} \li \l{Specifying Item Properties} \endlist diff --git a/doc/qtcreator/src/qtquick/qtquick-buttons.qdoc b/doc/qtcreator/src/qtquick/qtquick-buttons.qdoc index f61aeee27d3..d656e9d61e5 100644 --- a/doc/qtcreator/src/qtquick/qtquick-buttons.qdoc +++ b/doc/qtcreator/src/qtquick/qtquick-buttons.qdoc @@ -131,7 +131,7 @@ /*! \previouspage quick-buttons.html \page quick-scalable-image.html - \nextpage qtquick-navigator.html + \nextpage qtquick-properties.html \title Creating Scalable Buttons and Borders diff --git a/doc/qtcreator/src/qtquick/qtquick-component-context-menu.qdocinc b/doc/qtcreator/src/qtquick/qtquick-component-context-menu.qdocinc index 1dc19f288d3..0dff73e4d70 100644 --- a/doc/qtcreator/src/qtquick/qtquick-component-context-menu.qdocinc +++ b/doc/qtcreator/src/qtquick/qtquick-component-context-menu.qdocinc @@ -37,10 +37,10 @@ \li Go To \row \li Arrange - \li \l{Arranging Items} + \li \l{Arranging Components} \row \li Edit - \li \l{Showing and Hiding Items} + \li \l{Showing and Hiding Components} \row \li Anchors \li \l{Setting Anchors and Margins} diff --git a/doc/qtcreator/src/qtquick/qtquick-navigator.qdoc b/doc/qtcreator/src/qtquick/qtquick-navigator.qdoc index 41559a292aa..e6eb7db95fc 100644 --- a/doc/qtcreator/src/qtquick/qtquick-navigator.qdoc +++ b/doc/qtcreator/src/qtquick/qtquick-navigator.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. @@ -25,122 +25,186 @@ /*! \page qtquick-navigator.html - \previouspage quick-scalable-image.html + \previouspage quick-library.html \nextpage qtquick-properties.html - \title Managing Item Hierarchy + \title Navigator - The \uicontrol Navigator view displays the items in the current QML file and - their relationships. Items (1) are listed in a tree structure, below their - parent (2). You can preview items by hovering the mouse over them (3). + The \uicontrol Navigator view displays the components in the current + component file and their relationships. \l{glossary-component}{Components} + (1) are listed in a tree structure, below their parent (2). You can preview + components by hovering the mouse over them (3). - \image qmldesigner-navigator.png "Navigator with item preview" + \image qmldesigner-navigator.png "Navigator with component preview" - You can select items in the \uicontrol Navigator view to edit their - properties in the \uicontrol Properties view. Items can access the - properties of their parent item. To select items in the - \uicontrol {Form Editor} view, right-click an item, and select another - item in the \uicontrol Selection submenu. + You can select components in the \uicontrol Navigator view to edit their + properties in the \uicontrol Properties view. Components can access the + properties of their parent component. To select components in the + \uicontrol {Form Editor} view, right-click a component, and select another + component in the \uicontrol Selection submenu. - Typically, child items are located within the parent item in + Typically, child components are located within the parent component in \uicontrol {Form Editor}. However, they do not necessarily have to - fit inside the parent item. For example, you might want to make a + fit inside the parent component. For example, you might want to make a mouse area larger than the rectangle or image beneath it. \image qmldesigner-element-size.png "Mouse area for a button" - When you copy an item, all its child items are also copied. When - you remove an item, the child items are also removed. + When you copy a component, all its child components are also copied. When + you remove a component, the child components are also removed. - Select context menu commands to apply commands to items. The availability - of the commands depends on the item type. For example, you can change - the source of an Image type by selecting \uicontrol {Change Source URL} in - the context menu. + Select context menu commands to apply commands to components. The + availability of the commands depends on the component type. For example, + you can change the source of an Image component by selecting + \uicontrol {Change Source URL} in the context menu. - \section1 Showing and Hiding Items + \section1 Summary of Navigator Buttons - To show and hide items in \uicontrol {Form Editor} when focusing on + The following table lists the \uicontrol Navigator buttons: + + \table + \header + \li Icon + \li Tooltip + \li Read More + \row + \li \inlineimage arrowleft.png + \li Moves the component one level up in the component tree, so that + it becomes the last sibling of its current parent. + \li \l{Arranging Components} + \row + \li \inlineimage arrowright.png + \li Moves the component one level down in the component tree, so that it + becomes the child of its last sibling. + \li \l{Arranging Components} + \row + \li \inlineimage icons/navigator-arrowdown.png + \li Moves the component down within its parent. + \li \l{Arranging Components} + \row + \li \inlineimage icons/navigator-arrowup.png + \li Moves the component up within its parent. + \li \l{Arranging Components} + \row + \li \inlineimage filtericon.png + \li Shows and hides invisible components in \uicontrol Navigator. + \li \l{Showing and Hiding Components} + \row + \li \inlineimage export_unchecked.png + \li Adds a property alias that you can use from outside of the + component. + \li \l{Adding Property Aliases} + \row + \li \inlineimage icons/visibilityon.png + \li Shows and hide components in \uicontrol {Form Editor}. + \li \l{Showing and Hiding Components} + \row + \li \inlineimage icons/lockon.png + \li Locks components in all views. + \li \l{Locking Components} + \endtable + + \section1 Showing and Hiding Components + + To show and hide components in \uicontrol {Form Editor} when focusing on specific parts of the application, click \inlineimage icons/visibilityon.png in \uicontrol Navigator. - To change the visibility of an item in the application code, select the + To change the visibility of a component in the application code, select the \uicontrol Visibility check box in the \uicontrol Properties view or select \uicontrol Edit > \uicontrol Visibility in the context menu. You can also set the \uicontrol Opacity field to 0 in \uicontrol Properties - to hide items in the UI that you want to apply animation to. + to hide components in the UI that you want to apply animation to. As all properties, visibility and opacity are inherited from the parent - item. To hide or show child items, edit the properties of the parent item. + component. To hide or show child components, edit the properties of the + parent component. - To hide invisible items in \uicontrol Navigator, click + To hide invisible components in \uicontrol Navigator, click \inlineimage filtericon.png (\uicontrol {Filter Tree}) and select \uicontrol {Show only visible items}. - \section1 Locking Items + \section1 Locking Components When designing complex applications, it is easy to accidentally modify - the properties of an item in one of the \QC views in ways that lead to + the properties of a component in one of the \QC views in ways that lead to surprising results. For example, \uicontrol {Form Editor} can become - crowded and other items can get in the way when you are trying to select - or transform a particular item, so that you end up transforming more - items than you wanted to. + crowded and other components can get in the way when you are trying to + select or transform a particular component, so that you end up transforming + more components than you wanted to. - To lock items that you are not currently editing and their children, + To lock components that you are not currently editing and their children, click \inlineimage icons/lockon.png - in \uicontrol Navigator. Locked items cannot be handled in any \QC views. - You can unlock the items when you want to edit them again. + in \uicontrol Navigator. Locked components cannot be handled in any \QC + views. You can unlock the components when you want to edit them again. - \image qtquick-designer-navigator-lock.gif "Locking items in Navigator" + \image qtquick-designer-navigator-lock.gif "Locking components in Navigator" - You cannot select locked items in \uicontrol {Form Editor} or + You cannot select locked components in \uicontrol {Form Editor} or \uicontrol {3D Editor} nor access their properties in \uicontrol Properties. If you attempt to \l{Adding States}{remove a state} that changes the - properties of a locked item, you are prompted to confirm the removal. + properties of a locked component, you are prompted to confirm the removal. If you have \l{Editing Animation Curves}{added easing curves} to keyframe animations, you can lock and unlock them in the \uicontrol {Curve Editor} - view. If you lock the items that contain the easing curves, the lock status - is synchronized between \uicontrol Navigator and \uicontrol {Curve Editor}. + view. If you lock the components that contain the easing curves, the lock + status is synchronized between \uicontrol Navigator and + \uicontrol {Curve Editor}. - \section1 Arranging Items + \section1 Arranging Components - You can view the order of items in a QML file in \uicontrol Navigator - and \uicontrol {Text Editor}. The order of items in the file also + You can view the order of components in a component file in \uicontrol Navigator + and \uicontrol {Text Editor}. The order of components in the file also determines the order in which they are drawn in \uicontrol {Form Editor}. - By default, items that are located at the top of the file are listed at - the bottom of the \uicontrol Navigator tree and behind overlapping items - in \uicontrol {Form Editor}. To list the items in the order in which they - appear in the file, as some other tools do, click \inlineimage filtericon.png + By default, components that are located at the top of the file are listed at + the bottom of the \uicontrol Navigator tree and behind overlapping + components in \uicontrol {Form Editor}. To list the components in the order + in which they appear in the file, as some other tools do, click + \inlineimage filtericon.png (\uicontrol {Filter Tree}), and select \uicontrol {Reverse item order}. - To move an item to the top or bottom of the tree within its parent, + To move a component to the top or bottom of the tree within its parent, right-click it in \uicontrol Navigator or \uicontrol {Form Editor} and select \uicontrol Arrange > \uicontrol {Bring to Front} or - \uicontrol {Send to Back}. To move an item up or down, select + \uicontrol {Send to Back}. To move a component up or down, select \uicontrol {Bring Forward} or \uicontrol {Send Backward}. - To reverse the order of the selected items in \uicontrol Navigator and + To reverse the order of the selected components in \uicontrol Navigator and \uicontrol {Text Editor}, select \uicontrol Arrange > \uicontrol Reverse. - \image qtquick-designer-navigator-arrange.gif "Reversing item order" + \image qtquick-designer-navigator-arrange.gif "Reversing component order" - You can also drag and drop the item to another position in the tree or use - the arrow buttons to move the item in the tree. You can use the left and - right arrow buttons to change the parent of the item. + You can also drag and drop the component to another position in the tree or + use the arrow buttons to move the component in the tree. You can use the + left and right arrow buttons to change the parent of the component. \image qmldesigner-navigator-arrows.png "Navigator buttons" - When you drag and drop instances of QML types to \uicontrol {Form Editor}, - the new item is added as a child of the item - beneath it. When you move the items, it is not possible to determine whether - you want to adjust their position or attach them to a new parent item. - Therefore, the parent item is not automatically changed. To change the - parent of the item, press down the \key Shift key before you drag and drop - the item into a new position. The topmost item under the cursor becomes the - new parent of the item. + When you drag and drop instances of components to \uicontrol {Form Editor}, + the new component is added as a child of the component + beneath it. When you move the components, it is not possible to determine + whether you want to adjust their position or attach them to a new parent component. + Therefore, the parent component is not automatically changed. To change the + parent of the component, press down the \key Shift key before you drag and drop + the component into a new position. The topmost component under the cursor becomes the + new parent of the component. + + \section1 Adding Property Aliases + + A \e {property alias} is a property that you can use from outside the + component. + + You can use the \inlineimage export_unchecked.png + (\uicontrol Export) button in \uicontrol Navigator + to export a component as an alias. + + \image qmldesigner-export-item.png + + You can then use the property alias in other components to + \l{Adding Connections}{create connections} to this component. \section1 Moving Within Components diff --git a/doc/qtcreator/src/qtquick/qtquick-properties.qdoc b/doc/qtcreator/src/qtquick/qtquick-properties.qdoc index f6b8d2153df..5f375c62e61 100644 --- a/doc/qtcreator/src/qtquick/qtquick-properties.qdoc +++ b/doc/qtcreator/src/qtquick/qtquick-properties.qdoc @@ -25,7 +25,7 @@ /*! \page qtquick-properties.html - \previouspage qtquick-navigator.html + \previouspage quick-scalable-image.html \nextpage qtquick-positioning.html \title Specifying Item Properties diff --git a/doc/qtcreator/src/qtquick/qtquick-uis.qdoc b/doc/qtcreator/src/qtquick/qtquick-uis.qdoc index 2461f6468b3..c62d44c23d0 100644 --- a/doc/qtcreator/src/qtquick/qtquick-uis.qdoc +++ b/doc/qtcreator/src/qtquick/qtquick-uis.qdoc @@ -77,7 +77,7 @@ 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 {Navigator} You can manage the items in the current QML file and their relationships in the \uicontrol Navigator view. diff --git a/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc index 6b23964d095..22d92ea81d4 100644 --- a/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc +++ b/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc @@ -60,6 +60,7 @@ \list \li \l{Form Editor} \li \l{Library} + \li \l{Navigator} \endlist \li \l{Managing Workspaces} \li \l{Managing Sessions} @@ -98,7 +99,6 @@ \li \l{Creating Buttons} \li \l{Creating Scalable Buttons and Borders} \endlist - \li \l{Managing Item Hierarchy} \li \l{Specifying Item Properties} \li \l{Positioning Items} \li \l{Using Custom Fonts} diff --git a/doc/qtdesignstudio/src/qtdesignstudio.qdoc b/doc/qtdesignstudio/src/qtdesignstudio.qdoc index 06d140b5b1e..57fdc6d1dec 100644 --- a/doc/qtdesignstudio/src/qtdesignstudio.qdoc +++ b/doc/qtdesignstudio/src/qtdesignstudio.qdoc @@ -63,7 +63,6 @@ \list \li \l{Designing Application Flows} \li \l{Creating Components} - \li \l{Managing Item Hierarchy} \li \l{Specifying Item Properties} \li \l{Positioning Items} \li \l{Annotating Designs} 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 3890327894f..3f443c2eaa2 100644 --- a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-design-mode.qdoc +++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-design-mode.qdoc @@ -59,7 +59,7 @@ Views}. \li \uicontrol {Navigator} (4) displays the items in the current QML file as a tree structure. For more information, see - \l {Managing Item Hierarchy}. + \l {Navigator}. \li \uicontrol {Properties} (5) organizes the properties of the selected item. You can change the properties also in \uicontrol {Text Editor}. For more information, see