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

Doc: Add a summary of Navigator icons and the actions they apply

Browse Source 
Change the topic name to Navigator and move the topic under
Design views in the TOC.

Replace occurrences of "item" and "QML type" with "component".

Task-number: QDS-3771
Change-Id: I7dbe9803d88a409c8ba0a0ef074e2bc8a6866dec
Reviewed-by: Leena Miettinen <riitta-leena.miettinen@qt.io>
This commit is contained in:
Leena Miettinen
2021-02-22 17:30:46 +01:00
parent 048a826943
commit 04612e7736
12 changed files with 134 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
doc/qtcreator/images/icons/navigator-arrowdown.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 156 B

BIN
doc/qtcreator/images/icons/navigator-arrowup.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 157 B

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

@@ -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}

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

@@ -195,7 +195,7 @@
\list
\li \l{Creating Components}
\li \l{Managing Item Hierarchy}
\li \l{Navigator}
\li \l{Specifying Item Properties}
\endlist

2
doc/qtcreator/src/qtquick/qtquick-buttons.qdoc
View File

@@ -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

4
doc/qtcreator/src/qtquick/qtquick-component-context-menu.qdocinc
View File

@@ -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}

186
doc/qtcreator/src/qtquick/qtquick-navigator.qdoc
View File

@@ -1,6 +1,6 @@
/****************************************************************************
**
** Copyright (C) 2020 The Qt Company Ltd.
** Copyright (C) 2021 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the Qt Creator documentation.
@@ -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

2
doc/qtcreator/src/qtquick/qtquick-properties.qdoc
View File

@@ -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

2
doc/qtcreator/src/qtquick/qtquick-uis.qdoc
View File

@@ -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.

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

@@ -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}

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

@@ -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}

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

@@ -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