From 795fb5f59db59c2489feaf7ece8a3e18a3a114da Mon Sep 17 00:00:00 2001 From: Leena Miettinen Date: Thu, 7 May 2020 09:24:14 +0200 Subject: Doc: Update info about QML types supported by Qt Quick Designer Update screenshots. Change-Id: If079a93940dc103b4afa283f01c94825d895bfa3 Reviewed-by: Thomas Hartmann --- doc/qtcreator/images/qmldesigner-bindings.png | Bin 3378 -> 4181 bytes .../images/qmldesigner-editing-components.png | Bin 0 -> 34532 bytes .../images/qmldesigner-properties-view.png | Bin 0 -> 29394 bytes .../images/qmldesigner-qml-components.png | Bin 38614 -> 59047 bytes doc/qtcreator/src/qtquick/qtquick-components.qdoc | 83 +++++++++++---------- .../src/qtdesignstudio-components.qdocinc | 9 ++- 6 files changed, 48 insertions(+), 44 deletions(-) create mode 100644 doc/qtcreator/images/qmldesigner-editing-components.png create mode 100644 doc/qtcreator/images/qmldesigner-properties-view.png diff --git a/doc/qtcreator/images/qmldesigner-bindings.png b/doc/qtcreator/images/qmldesigner-bindings.png index c3a90cc3c7..017b22cd23 100644 Binary files a/doc/qtcreator/images/qmldesigner-bindings.png and b/doc/qtcreator/images/qmldesigner-bindings.png differ diff --git a/doc/qtcreator/images/qmldesigner-editing-components.png b/doc/qtcreator/images/qmldesigner-editing-components.png new file mode 100644 index 0000000000..1fe80e23c1 Binary files /dev/null and b/doc/qtcreator/images/qmldesigner-editing-components.png differ diff --git a/doc/qtcreator/images/qmldesigner-properties-view.png b/doc/qtcreator/images/qmldesigner-properties-view.png new file mode 100644 index 0000000000..36c2e9ca15 Binary files /dev/null and b/doc/qtcreator/images/qmldesigner-properties-view.png differ diff --git a/doc/qtcreator/images/qmldesigner-qml-components.png b/doc/qtcreator/images/qmldesigner-qml-components.png index a2b090dd37..46918eee92 100644 Binary files a/doc/qtcreator/images/qmldesigner-qml-components.png and b/doc/qtcreator/images/qmldesigner-qml-components.png differ diff --git a/doc/qtcreator/src/qtquick/qtquick-components.qdoc b/doc/qtcreator/src/qtquick/qtquick-components.qdoc index 3820b01116..ca4a6e6d89 100644 --- a/doc/qtcreator/src/qtquick/qtquick-components.qdoc +++ b/doc/qtcreator/src/qtquick/qtquick-components.qdoc @@ -51,14 +51,15 @@ \image qmldesigner-qml-components.png "QML Components" - The \uicontrol {QML Types} tab displays the QML types grouped by category: - your own QML components, basic types, layouts, positioner types, and views. + The \uicontrol {QML Types} tab displays the QML types grouped by category, + such as your own QML components, basic types, layouts, positioner types, and + views. Sets of UI components with the look and feel of a particular mobile device platform have been defined for Qt Quick 1. Since Qt 5.1, ready-made Qt Quick Controls, Dialogs, and Layouts are available for creating user interfaces using Qt Quick 2. The components and controls are based on - standard QML types. To view the components and controls in the + standard QML types. To view the components and controls in \uicontrol {Library}, import the component sets in \uicontrol {QML Imports}. The \uicontrol {Qt Quick Application} wizards for a particular platform add @@ -70,21 +71,23 @@ \section1 Adding Components to Designs - \image studio-design-mode.png "Design mode" + \image qmldesigner-editing-components.png "Editing QML components in Design mode" \list 1 - \li Drag and drop components from the \uicontrol Library (2) to the - \uicontrol Navigator (3) or \uicontrol {Form Editor} (1). - \li Select components in the \uicontrol Navigator to edit their - properties in the \uicontrol Properties view (4). For more - information, see \l {Specifying Item Properties}. + \li Drag and drop components from \uicontrol Library (1) to + \uicontrol Navigator (2) or \uicontrol {Form Editor} (3). + \li Select components in \uicontrol Navigator to edit their + properties in \uicontrol Properties. + \image qmldesigner-properties-view.png "Properties view" + For more information, see \l {Specifying Item Properties}. \li Connect components to signals or create bindings between components - in the \uicontrol Connections view (5). For more information, see - \l{Adding Connections}. + in the \uicontrol Connections view. + \image qmldesigner-bindings.png "Connections view Bindings tab" + For more information, see \l{Adding Connections}. \li Add states to apply sets of changes to the properties of one or - several components in the \uicontrol States view (6). For more - information, see \l{Adding States}. - \li Animate component properties in the \uicontrol Timeline view (7). + several components in the \uicontrol States view. + For more information, see \l{Adding States}. + \li Animate component properties in the \uicontrol Timeline view. For more information, see \l{Creating Animations}. \endlist @@ -136,12 +139,12 @@ When you add a \l{GridView}{Grid View}, \l{ListView}{List View}, or \l{PathView}{Path View}, the ListModel and the delegate component that creates an instance for each item in the model are added automatically. - You can edit item properties in the \uicontrol Properties view or - in the \uicontrol {Text Editor}. You can also replace the default model and - delegate with other, more complex models and delegates in the + You can edit item properties in \uicontrol Properties or in + \uicontrol {Text Editor}. You can also replace the default model and + delegate with other, more complex models and delegates in \uicontrol {Text Editor}. \l{ItemDelegate}{Item Delegate} and \l{SwipeDelegate}{Swipe Delegate} delegate components are also available - in the \uicontrol Library. + in \uicontrol Library. \section1 Positioning Items in UIs @@ -179,7 +182,7 @@ \image qmldesigner-set-expression.png "Type properties context menu" - In the \uicontrol {Binding Editor}, select an item and a property from + In \uicontrol {Binding Editor}, select an item and a property from lists of available items and their properties. \image qmldesigner-binding-editor.png "Binding Editor" @@ -192,7 +195,7 @@ When a binding is set, the \uicontrol Actions menu icon changes to \inlineimage icons/action-icon-binding - . To remove bindings, select \uicontrol Reset in the \uicontrol Actions menu. + . To remove bindings, select \uicontrol Actions > \uicontrol Reset. You can set bindings also in the \uicontrol Connections view. For more information, see \l {Adding Bindings Between Properties}. @@ -227,7 +230,7 @@ (\uicontrol {Reset Anchors}) button to reset the anchors to their saved state. - You can specify the baseline anchor in the \uicontrol {Text Editor} in the + You can specify the baseline anchor in \uicontrol {Text Editor} in the Design mode. For performance reasons, you can only anchor an item to its siblings @@ -340,8 +343,9 @@ \endlist To position several items in a \uicontrol Column, \uicontrol Row, - \uicontrol Grid, or \uicontrol Flow, select the items on the canvas, and - then select \uicontrol Position in the context menu. + \uicontrol Grid, or \uicontrol Flow, select the items in + \uicontrol {Form Editor}, and then select \uicontrol Position in + the context menu. \section2 Using Layouts @@ -353,8 +357,6 @@ You can use the following layout types to arrange items in UIs: \list - \li \l{Layout} provides attached properties for items pushed onto a - column, row, or grid layout. \li \l{ColumnLayout}{Column Layout} provides a grid layout with only one column. \li \l{RowLayout}{Row Layout} provides a grid layout with only one row. @@ -365,7 +367,7 @@ \endlist To lay out several items in a column, row, grid, or - \uicontrol {Stack Layout}, select the items in the \uicontrol {Form Editor}, + \uicontrol {Stack Layout}, select the items in \uicontrol {Form Editor}, and then select \uicontrol Layout in the context menu. You can also click the \inlineimage column.png @@ -374,9 +376,9 @@ (\uicontrol {Grid Layout}) toolbar buttons to apply layouts to the selected items. - To make an item within a layout as wide as possible while respecting - the given constraints, select the item on the canvas and then select - \uicontrol Layout > \uicontrol {Fill Width} in the context menu. To + To make an item within a layout as wide as possible while respecting the + given constraints, select the item in \uicontrol {Form Editor}, and then + select \uicontrol Layout > \uicontrol {Fill Width} in the context menu. To make the item as high as possible, select \uicontrol {Fill Height}. \section2 Editing Stack Layouts @@ -385,7 +387,7 @@ To add items to a \uicontrol {Stack Layout}, select the \inlineimage plus.png - button next to the type name in the \uicontrol {Form Editor}. To move + button next to the type name in \uicontrol {Form Editor}. To move between items, select the \inlineimage prev.png (\uicontrol Previous) and \inlineimage next.png (\uicontrol Next) buttons. @@ -550,22 +552,22 @@ \endif \uicontrol Choose to create a new .qml file. - \note Components are listed in the \uicontrol {QML Components} section of - the \uicontrol Library only if the filename begins with a capital - letter. + \note Components are listed in the \uicontrol {My QML Components} + tab in the \uicontrol Library view only if the filename begins with + a capital letter. \li Click \uicontrol Design to open the .qml file in the Design mode. - \li Drag and drop a QML type from the \uicontrol Library to the + \li Drag and drop a QML type from \uicontrol Library to \uicontrol Navigator or \uicontrol {Form Editor}. - \li Edit its properties in the \uicontrol Properties view. + \li Edit its properties in \uicontrol Properties. The available properties depend on the QML type. \endlist - The following sections contain more information about how to use the + The following sections contain more information about how to use \uicontrol {Form Editor} to edit 2D content, as well as examples of how to create some common components using basic QML types: @@ -582,10 +584,11 @@ \section1 Moving Within Components Components can consist of several other components. To view the component - hierarchy as a bread crumb path when you edit a component on the canvas, - select \uicontrol {Go into Component} or press \key F2. Click the component - names in the path to navigate to them. You can easily navigate back to the - top level when you are done editing the component. + hierarchy as a bread crumb path when you edit a component in + \uicontrol {Form Editor}, select \uicontrol {Go into Component} or press + \key F2. Click the component names in the path to navigate to them. You + can easily navigate back to the top level when you are done editing the + component. \image qmldesigner-breadcrumbs.png "Go into Component command" */ diff --git a/doc/qtdesignstudio/src/qtdesignstudio-components.qdocinc b/doc/qtdesignstudio/src/qtdesignstudio-components.qdocinc index ad072db594..c9214a35a2 100644 --- a/doc/qtdesignstudio/src/qtdesignstudio-components.qdocinc +++ b/doc/qtdesignstudio/src/qtdesignstudio-components.qdocinc @@ -44,7 +44,7 @@ independently of each other. \li \l Flipable provides a surface that can be flipped. \li \l Group provides an item with the size property. - \li \l Iso adds a container for an ISO 7000 icon. + \li \l {Iso}{Iso Icon} adds a container for an ISO 7000 icon. \li \l Pie adds a pie slice or a pie with a slice missing from it. \li \l Rectangle adds a rectangle with corners that you can shape independently of each other. @@ -60,7 +60,8 @@ You can use the project wizard to create a starting point for a custom \l [QtQuickControls2] {Button}, \l [QtQuickControls2] {Pane}, - \l [QtQuickControls2] {StackView}{Stack View}, or + \l [QtQuickControls2] {StackLayout}{Stacked Layout}, + \l [QtQuickControls2] {SwipeView}{Swipe View}, or \l [QtQuickControls2] {Switch}. \list 1 @@ -68,8 +69,8 @@ \uicontrol {Files and Classes} > \uicontrol {Qt Quick Controls}. \li Select the control to create, and then select \uicontrol Choose. - \note Components are listed in the \uicontrol {QML Components} - section of the \uicontrol Library only if the filename begins + \note Components are listed in the \uicontrol {My QML Components} + tab of the \uicontrol Library only if the filename begins with a capital letter. \li Edit component properties in the \uicontrol Properties view. -- cgit v1.2.3