Doc: Update example docs

- Update screenshots to show the new Properties view
- Update UI text
- Add links to term definitions and topics the describe views
- Add notes about limited support for 2D effects on Qt 6

Task-number: QDS-4561
Change-Id: I0e4a94cafd968f31aae6e540cd636e03dc300cc6
Reviewed-by: Johanna Vanhatapio <johanna.vanhatapio@qt.io>
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

doc/qtcreator/src/qtquick/qtquick-animation-types.qdoc

@@ -94,6 +94,9 @@
 
     \image qtquick-number-animation.gif "Number animation"
 
+    For an example of using property animation to animate the scale and opacity
+    of components, see the \l{Coffee Machine} example.
+
     \section2 Setting Non-Animated Properties
 
     To immediately change a property value during an animation

doc/qtdesignstudio/examples/doc/coffeemachine.qdoc

@@ -38,10 +38,10 @@
     sliders. The progress of the brewing process is displayed as
     an animation. When the coffee is ready, the startup screen appears again.
 
-    The \e {ApplicationFlow.ui.qml} file contains all the screens in the
+    The \e {ApplicationFlowForm.ui.qml} file contains all the screens in the
-    UI. We use states to display the appropriate screen in the
+    UI. We use \l{glossary-state}{states} to display the appropriate screen in
-    viewport and the timeline to animate the transitions between and on
+    the viewport and the timeline to animate the \l{glossary-transition}
-    the screens.
+    {transitions} between and on the screens.
 
     \section1 Application Flow
 
@@ -55,10 +55,10 @@
     \printuntil }
     \dots
 
-    Selecting the coffee type triggers the respective signal handler in
+    Selecting the coffee type triggers the respective \l{glossary-signal}
-    \e {SideBar.qml}, which sets the default mix for the selected coffee type.
+    {signal handler} in \e {SideBar.qml}, which sets the default mix for
-    The following code snippet displays the \c {cappuccinoButton.onClicked()}
+    the selected coffee type. The following code snippet displays the
-    signal handler:
+    \c {cappuccinoButton.onClicked()} signal handler:
 
     \quotefromfile CoffeeMachine/SideBar.qml
     \skipto cappuccinoButton.onClicked
@@ -113,11 +113,11 @@
     \section1 Using Timelines to Animate Transitions
 
     The Coffee Machine application screens for choosing coffee, empty cup, and
-    brewing each use custom components specified in separate component files
+    brewing each use custom components specified in separate \l{UI Files}
-    (.qml).
+    {UI files} (ui.qml).
 
-    We use the \uicontrol Timeline view to animate the transitions between
+    We use the \l Timeline view to animate the transitions between the screens
-    the screens during the application flow in \e {ApplicationFlow.ui.qml}.
+    during the application flow in \e {ApplicationFlowForm.ui.qml}.
 
     \image coffee-machine-timeline.png
 
@@ -132,9 +132,9 @@
     select the \inlineimage recordfill.png
     (\uicontrol {Auto Key (K)}) button (or press \key k).
 
-    At frame 0, we set the X coordinate to 0 in \l Properties > \uicontrol
+    At frame 0, we set the X coordinate to 0 in \l Properties >
-    Geometry > \uicontrol Position. We then move the playhead to 400 frames and
+    \uicontrol {Geometry - 2D} > \uicontrol Position. We then move the
-    set the X coordinate to a negative value.
+    playhead to 400 frames and set the X coordinate to a negative value.
 
     \image coffee-machine-properties.png
 
@@ -146,13 +146,13 @@
 
     \section1 Using States to Move Between Screens
 
-    We use the \uicontrol States view to determine the contents of the
+    We use the \l States view to determine the contents of the
     viewport. The animations are run when moving from one state to another.
 
     \image coffee-machine-states.png
 
     We create the states by moving from viewport to viewport in
-    \e ApplicationFlow.ui.qml and clicking \inlineimage plus.png "Add button"
+    \e ApplicationFlowForm.ui.qml and selecting \uicontrol {Create New State}
     in the \uicontrol States view.
 
     We also create states for animations that are run when moving to the
@@ -171,7 +171,7 @@
     the end frame to 200, because we are moving back on the timeline to display
     the selection sidebar.
 
-    In the \uicontrol {Transitions to states} field, we select the state to
+    In the \uicontrol {Transition to state} field, we select the state to
     switch to when the animation ends. In the lower part of the dialog, we
     bind the states that don't have animations to fixed frames.
 */

doc/qtdesignstudio/examples/doc/ebikedesign.qdoc

@@ -34,9 +34,9 @@
     \image ebikedesign.png "Standard screen"
 
     \e {E-Bike Design} is a control center application for electric bikes.
-    The application contains a Standard screen that displays a speedometer,
+    The application contains a \e Standard screen that displays a speedometer,
-    a Trip screen that displays statistics about the current trip, and a
+    a \e Trip screen that displays statistics about the current trip, and a
-    Navigator screen that displays a map.
+    \e Navigator screen that displays a map.
 
     The Trip and Navigator screens display a small animated speedometer that
     the users can select to move back to the Standard screen.
@@ -45,12 +45,13 @@
 
     In the \e {Screen01.ui.qml} file, we place the screens in a row in the
     following order from left to right: Trip, Standard, Navigator. We will
-    use states to show the appropriate screen in the viewport, and the timeline
+    use \l{glossary-state}{states} to show the appropriate screen in the
-    to animate the transitions between and on the screens.
+    viewport, and the timeline to animate the \l{glossary-transition}
+    {transitions} between and on the screens.
 
     \section1 Using Timelines to Animate Transitions
 
-    We use the \uicontrol Timeline view to animate the transitions between
+    We use the \l Timeline view to animate the transitions between
     the screens in \e {Screen01.ui.qml}.
 
     Our viewport contains 1000 frames, so we select the
@@ -67,7 +68,7 @@
     \image ebikedesign-timeline.png "Timeline view"
 
     At frame 0, we set the X coordinate to 0 in \l Properties >
-    \uicontrol Geometry > \uicontrol Position to display the Trip screen.
+    \uicontrol {Geometry - 2D} > \uicontrol Position to display the Trip screen.
     We then move the playhead to frame 1000 and set the X coordinate to
     -1286 to display the Standard screen. We continue by moving the playhead
     to frame 2000 and setting the X coordinate to -2560 to display the
@@ -84,8 +85,8 @@
 
     \image ebikedesign-trip-properties.png "Properties view of the Trip component"
 
-    We set values for the \uicontrol Visibility,
+    We set values for the \uicontrol Scale, \uicontrol Visibility,
-    \uicontrol Opacity, \uicontrol currentFrame, and \uicontrol Scale properties
+    \uicontrol Opacity, and \uicontrol currentFrame properties
     to fade out the current screen when moving to another one and to make the
     speedometer grow and shrink in size depending on its current position.
 
@@ -94,7 +95,7 @@
 
     \section1 Using States to Move Between Screens
 
-    We use the \uicontrol States view to determine the contents of the viewport.
+    We use the \l States view to determine the contents of the viewport.
     The animations are run in a particular state or when moving from one state
     to another.
 

doc/qtdesignstudio/examples/doc/progressbar.qdoc

@@ -39,14 +39,16 @@
     First, we create an empty project, as described in \l {Creating Projects}.
     For the purposes of this example, we call the project \e progressbar.
 
-    In this example, we use two overlapping rectangles and a text label to
+    In this example, we use two overlapping instances of the preset
-    create the progress bar. For another example of a progress bar, see the
+    \l{basic-rectangle}{Rectangle} component and an instance of the preset
-    \l {progress-bar-control}{Progress Bar} component in Qt Quick Controls.
+    \l{Text} component to create the progress bar. There is also a preset
+    \l {progress-bar-control}{Progress Bar} component available in
+    \uicontrol Library > \uicontrol Components > \uicontrol {Qt Quick Controls}.
 
     In the \uicontrol Design mode, we drag-and-drop a \uicontrol Rectangle from
     \l Library > \uicontrol Components > \uicontrol {Default Components} >
     \uicontrol Basic to \l {Form Editor} and modify its size to create the
-    background for the progress bar. We change its ID to \e background in
+    background for the progress bar. We change its ID to \e pb_back in
     \l Properties.
 
     We want to be able to control the background rectangle and the text label
@@ -66,7 +68,7 @@
     \image progressbar-rectangle.png "Progress bar background in the Form Editor"
 
     We now drag-and-drop another rectangle on top of the background rectangle in
-    \uicontrol Navigator and change its ID to \e indicator in
+    \uicontrol Navigator and change its ID to \e pb_front in
     \uicontrol Properties.
     We then anchor the left, top, and bottom of the indicator to its parent with
     5-pixel margins. We leave the right side free because its value needs to
@@ -87,8 +89,8 @@
 
     \section2 Adding Color Animation
 
-    First, we add a color animation to the \e root component. We select the
+    First, we add a color animation to the \e root component in the \e Root.qml
-    \inlineimage plus.png
+    file. We select the \inlineimage plus.png
     button to add a 100-frame timeline to root. You can use the default
     values for all other fields.
 
@@ -103,8 +105,9 @@
     We then set the color at frame 0 to green (\e {#8de98d}) in
     \uicontrol Properties > \uicontrol Text > \uicontrol {Text Color}.
     We can either \l{Picking Colors}{pick a color} from the color selector
-    or use the \uicontrol {Set Binding} command in the \inlineimage submenu.png
+    or use the \uicontrol {Set Binding} command in the
-    (\uicontrol Settings) menu to open the \uicontrol {Binding Editor}.
+    \inlineimage icons/action-icon.png
+    (\uicontrol Actions) menu to open the \uicontrol {Binding Editor}.
 
     We then move the playhead to frame 50 and set the text color to red
     (\e {#de4f4f}). Finally, we move the playhead to frame 100 and set
@@ -117,10 +120,11 @@
 
     \section2 Animating the Indicator
 
-    We select \e indicator in \uicontrol Navigator and then select the record
+    We select \e pb_front in \uicontrol Navigator and then select the record
     button again to animate the width of the indicator. At frame 0, we set the
-    width to 0 in \uicontrol Properties > \uicontrol Geometry > \uicontrol Size.
+    width to 0 in \uicontrol Properties > \uicontrol {Geometry - 2D} >
-    We then move the playhead to 100 frames and set the width to 590.
+    \uicontrol Size. We then move the playhead to 100 frames and set the width
+    to 590.
 
     \image progressbar-timeline-indicator.png "Indicator timeline"
 
@@ -160,9 +164,9 @@
     open \e Root.qml in \uicontrol {Form Editor}.
 
     We want to be able to use the keyframe value as the value of the text label,
-    so we will export it as a property alias. We select \e timeline in
+    so we will export it as a \l{Adding Property Aliases}{property alias}. We
-    \uicontrol Navigator and then \uicontrol Properties > \uicontrol Timeline >
+    select \e timeline in \uicontrol Navigator and then \uicontrol Properties >
-    \uicontrol {Current frame} > \uicontrol Settings >
+    \uicontrol Timeline > \uicontrol {Current frame} > \uicontrol Actions >
     \uicontrol {Export Property as Alias}.
 
     \image progressbar-root-export-property.png "Export keyframe group as a property"

doc/qtdesignstudio/examples/doc/sidemenu.qdoc

@@ -29,7 +29,7 @@
 
     \title Side Menu
     \brief Illustrates how to create reusable components and an animated menu
-    for applying effects.
+    for applying 2D visual effects in Qt 5 projects.
 
     \image sidemenu.png "Side menu example application"
 
@@ -41,6 +41,9 @@
     \l {2D Effects}{graphical effects}, such as hue, saturation,
     and blur, to the images.
 
+    \note Only a subset of effects is available if you select
+    \uicontrol {Qt 6} when \l{Creating Projects}{creating the project}.
+
     \section1 Creating Reusable Buttons
 
     We select \uicontrol File > \uicontrol {New File or Project} >
@@ -101,9 +104,9 @@
     We construct the menu bar in the \e {MainFile.ui.qml} file using the
     \l {Form Editor}. The CustomButton component is listed in
     \l Library > \uicontrol Components > \uicontrol {My Components}.
-    We drag-and-drop several instances of the component to the
+    We drag-and-drop several instances of the component to \uicontrol Navigator
-    \uicontrol {Form Editor} and enclose them in a RowLayout component instance
+    or \uicontrol {Form Editor} and enclose them in a \uicontrol {Row Layout}
-    to lay them out as a menu bar.
+    component instance to lay them out as a menu bar.
 
     \image sidemenu-menubar.png
 
@@ -123,20 +126,23 @@
     \section1 Creating a Side Menu
 
     We can now continue to create a side menu that slides open when users
-    click the burger menu. In the \uicontrol {Form Editor}, we use the
+    click the burger menu. We drag-and-drop a \l Text component from
-    \l Text and \l {slider-control}{Slider} components to create separate
+    \uicontrol Library > \uicontrol Components > \uicontrol {Default Components}
+    > \uicontrol Basic and a \l {slider-control}{Slider} component from
+    \uicontrol {Qt Quick Controls} to \uicontrol Navigator to create separate
     submenus for each set of effects we want to apply to the images. We use
     a background image for the menu background and a BurgerMenu custom
     component for the burger menu icon.
 
     \image sidemenu-ui.png "SliderMenu component"
 
-    We add states to the \e {SideMenu.qml} file in the \uicontrol {Form Editor}.
+    We add states to the \e {SideMenu.qml} file in the \uicontrol States view.
     When the application starts, the side menu is in the \e closed state, which
     means that it is hidden. When users click the burger menu, the \c onClicked
-    signal handler triggers the transition to the \e opening state and runs an
+    \l{glossary-signal}{signal handler} triggers the \l{glossary-transition}
-    animation. When the animation finishes, the side menu state changes to
+    {transition} to the \e opening state and runs an animation. When the
-    \e open and the side menu is fully visible.
+    animation finishes, the side menu state changes to \e open and the side
+    menu is fully visible.
 
     When users click the burger menu again, the state changes to \e closing and
     another animation is run that closes the side menu. When the animation
@@ -165,7 +171,7 @@
     (\uicontrol {Auto Key (K)}) button (or press \key k).
 
     At frame 0, we set the X coordinate to -423 in \uicontrol Properties >
-    \uicontrol Geometry > \uicontrol Position. We then move the playhead
+    \uicontrol {Geometry - 2D} > \uicontrol Position. We then move the playhead
     to frame 1000 and set the X coordinate to 0.
 
     When we deselect the record button to stop recording the timeline, the
@@ -175,9 +181,11 @@
 
     We then record the transition of the \e imageBackground image. At frame
     0, we set the X coordinate to -424 again. We then move the playhead to
-    frame 400 and select \uicontrol {Insert Keyframe} in the \uicontrol Settings
+    frame 400 and select \uicontrol {Insert Keyframe} in the
-    menu of the X coordinate. We keep the value of the X coordinate -424. We
+    \inlineimage icons/action-icon.png
-    then move the playhead to frame 1000 and set the X coordinate to 0.
+    (\uicontrol Actions) menu of the X coordinate. We keep the value of the
+    X coordinate -424. We then move the playhead to frame 1000 and set the X
+    coordinate to 0.
 
     We select \inlineimage animation.png "Timeline Settings button"
     to open the \uicontrol {Timeline Settings} dialog. In the
@@ -219,20 +227,21 @@
     We use property bindings to connect the controls in the slider menu to
     \l {2D Effects}{graphical effects}. To have access to the
     properties from all the slider component instances, we export them as
-
+    aliases in \e SliderMenu.ui.qml. We select \uicontrol {Export Property as Alias}
-    in \e SliderMenu.ui.qml. We select \uicontrol {Export Property as Alias}
     in the \uicontrol Settings menu of the \uicontrol Value property in
     \uicontrol Properties > \uicontrol Slider.
 
-    We use the \uicontrol {Form Editor} to create the effect stack in the
+    We open the \e {EffectStack.qml} file, and drag-and-drop components from
-    \e {EffectStack.qml} file:
+    \uicontrol Library > \uicontrol Components >
+    \uicontrol {Qt Quick Studio Effects} to \uicontrol Navigator to create the
+    effect stack.
 
     \image sidemenu-effects-stack.png "Effects stack in the Navigator"
 
-    We use the \l {Images}{Image} component as the last item in the stack to
+    We use an instance of the \l {Images}{Image} component as the last item in
-    display images that we apply the effects to. We export the image source
+    the stack to display images that we apply the effects to. We export the
-    property as an \l{Adding Property Aliases}{alias} to be able to switch
+    image source property as an \l{Adding Property Aliases}{alias} to be able
-    the image inside the stack.
+    to switch the image inside the stack.
 
     For more information about the available graphical effects, see
     \l {2D Effects}.

doc/qtdesignstudio/examples/doc/washingMachineUI.qdoc

@@ -46,8 +46,8 @@
     \endlist
 
     Users select buttons to navigate between the screens.
-    We use \l{Connecting Components to Signals}{connections} to determine which
+    We use \l{glossary-connection}{connections} to determine which
-    screen to open when users select a particular button and \l{Adding States}
+    screen to open when users select a particular button and \l{glossary-state}
     {states} to show the screens. We use the \l{Creating Timeline Animations}
     {timeline} to create progress indicators for buttons and the \e Running
     screen.
@@ -76,9 +76,9 @@
     that we can use to configure and build our example application for running
     it on MCUs.
 
-    \note This example was developed using Qt for MCUs version 1.6. You
+    \note This example has been tested to run using Qt for MCUs versions since
-    cannot run it on older versions, and we cannot make any promises about
+    1.6. You cannot run it on older versions. Also, at the time of writing,
-    newer versions.
+    Qt for MCUs only supports Qt 5.
 
     \section1 Creating Screens
 
@@ -142,10 +142,10 @@
 
     First, we select the initial arc segment, \e arcSegment1, in
     \l Navigator to display its properties in \uicontrol Properties.
-    In the \uicontrol Layout tab, \uicontrol Rotation field, we select
+    In \uicontrol {Geometry - 2D} > \uicontrol Rotation, we select
     \inlineimage icons/action-icon.png
-    , and then select \uicontrol {Insert Keyframe} to insert a keyframe
+    (\uicontrol Actions), and then select \uicontrol {Insert Keyframe} to
-    that we can animate in the \uicontrol Timeline view.
+    insert a keyframe that we can animate in the \uicontrol Timeline view.
 
     \image washingmachineui-insert-keyframe.png "Inserting keyframe for Rotation property"
 
@@ -154,8 +154,8 @@
     (\uicontrol {Auto Key (K)}) button (or press \key k).
 
     First, we set the rotation at frame 0 to -90 in \uicontrol Properties >
-    \uicontrol Layout > \uicontrol Rotation. Next, we move the playhead to
+    \uicontrol {Geometry - 2D} > \uicontrol Rotation. Next, we move the playhead
-    frame 250 and set the rotation to 0.
+    to frame 250 and set the rotation to 0.
 
     When we deselect the record button to stop recording the timeline, the
     new timeline appears in the view.

doc/qtdesignstudio/examples/doc/webinardemo.qdoc

@@ -50,15 +50,15 @@
     We organize our design in Photoshop using artboards as instructed in
     \l{Organizing Assets}.
 
-    \QB automatically proposes identifiers for all groups and layers. The ids
+    \QB automatically proposes identifiers for all groups and layers. The IDs
     will be used as filenames in \QDS. We want to change some of them in the
-    \uicontrol {QML ID} field, so that we can easily find them in \QDS. We
+    \uicontrol ID field, so that we can easily find them in \QDS. We
-    must keep in mind that the ids must be unique, that they must begin with
+    must keep in mind that the IDs must be unique, that they must begin with
     a lower-case letter or an underscore character, and that only letters,
     numbers, and underscore characters are allowed.
 
     Each artboard is exported automatically as a component. That is, a separate
-    QML file that contains all the artwork on the artboard. We determine whether
+    file that contains all the artwork on the artboard. We determine whether
     each group or layer is exported as a component or a child item. Child items
     will be exported as PNG files, with references to them in the component file
     that contains them.
@@ -94,23 +94,27 @@
 
     \image webinardemo-qb-stacklayout.png "Settings for exporting stackLayout artboard"
 
-    For the stackLayoutFrame layer, we want to use a \l StackLayout component,
+    For the \e stackLayoutFrame layer, we want to use a \l StackLayout component,
     which provides a stack of items where only one item is visible at a time.
-    In the \uicontrol {QML Type} field, we enter \e StackLayout.
+    In the \uicontrol Component field, we enter \e StackLayout.
 
     To be able to use the component, we enter the statement that imports the
     Qt Quick Layouts module, which contains the component, in the
-    \uicontrol {Add Imports} field: \c {QtQuick.Layouts 1.3}.
+    \uicontrol Imports field: \c {QtQuick.Layouts 1.3}.
 
     We will add content to the stack layout in \QDS.
 
     \section2 Using Qt Studio Effects
 
+    \note The availability of effects depends on whether you select
+    \uicontrol {Qt 5} or \uicontrol {Qt 6} when creating your project
+    in \QDS.
+
     \image webinardemo-qb-fastblur.png "Settings for exporting blurEffect layer"
 
-    We want to apply the \l {FastBlur} effect to the smallPopup UI control.
+    We want to apply the \l {FastBlur} effect to the \e smallPopup UI control.
-    In the artboard, we have a blurEffect layer that we want to export as a
+    In the artboard, we have a \e blurEffect layer that we want to export as a
-    FastBlurItem component. In the \uicontrol {QML Type} field, we enter
+    \e FastBlurItem component. In the \uicontrol Component field, we enter
     \e FastBlurItem.
 
     To be able to use the component, we added the statement that imports the
@@ -118,8 +122,11 @@
 
     We specify that the component to which we want to apply the effect is a
     child of the effect. We then specify the radius property for the effect,
-    in the \uicontrol {QML Properties} field. We can modify the property in
+    in the \uicontrol Properties field. We can modify the property in \QDS by
-    the \uicontrol Radius field in the \uicontrol Properties view in \QDS.
+    opening the \e {SmallPopup.ui.qml} file and selecting the instance of the
+    \uicontrol {Fast Blur Item} component in \uicontrol Navigator. We can find
+    the property in \l Properties > \uicontrol {Geometry- 2D} >
+    \uicontrol Radius.
 
     \image webinardemo-blureffect.png "FastBlurItem component in Design mode"
 
@@ -162,8 +169,8 @@
     The \e {LayoutReference.ui.qml} file contains a reference image of
     the UI we will create. We use the imported components to create the
     UI in the \e {MainApp.ui.qml} file. The imported components are
-    listed in \uicontrol Library > \uicontrol Components >
+    listed in \l Library > \uicontrol Components > \uicontrol {My Components},
-    \uicontrol {My Components}, and we can drag-and-drop them to \l {Form Editor}.
+    and we can drag-and-drop them to \l {Form Editor}.
 
     \image webinardemo-mainappui.png "Main app UI in Design mode"
 
@@ -172,21 +179,21 @@
     context menu. Any changes we make to a component are immediately visible in
     all the other components where it appears.
 
-    We can view the QML code for each component in \l{Text Editor}.
+    We can view the code for each component in \l{Text Editor}.
 
     We can now use states and the timeline to animate the components in the UI.
 
     \section2 Animating Components
 
-    We open the \e {Largepopup.ui.qml} file in the Design mode to add animation
+    We open the \e {Largepopup.ui.qml} file in the \uicontrol Design mode to add
-    to it. In the \uicontrol States view, we add the \e opening, \e open,
+    animation to it. In the \l States view, we add the \e opening, \e open,
     \e closing, and \e closed states for the popup.
 
     \image webinardemo-states.png "Popup states in the States view"
 
     For more information about using states, see \l {Creating States}.
 
-    We then use the \uicontrol Timeline view to add animations that are run
+    We then use the \l Timeline view to add animations that are run
     when moving from one state to another.
 
     \image webinardemo-timeline.png "Popup animations in the Timeline view"