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

Doc: Add a separate topic for the States view

Browse Source 
Replace occurrences of "item", "object", or "type" with "component"

Task-number: QDS-3771
Change-Id: I92a78c0a714615cd51ada5459a9f4c1722103abd
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>
This commit is contained in:
Leena Miettinen
2021-03-04 13:24:10 +01:00
parent 706b9ceedb
commit 47b569afa6
5 changed files with 142 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -97,6 +97,7 @@
\li \l{Navigator}
\li \l{Properties}
\li \l{Connection View}
\li \l{States}
\li \l{Transition Editor}
\li \l{Timeline}
\li \l{Curve Editor}

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

@@ -94,7 +94,7 @@
connections between components, signals, and component properties.
\li \l{Adding Connections}
\row
\li \l{Adding States}{States}
\li \l States
\li Displays the different states that can be applied to a component.
Typically, states describe UI configurations, such as the
visibility and behavior of components and the available user

103
doc/qtcreator/src/qtquick/qtquick-states-view.qdoc Normal file
View File

@@ -0,0 +1,103 @@
/****************************************************************************
**
** Copyright (C) 2021 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.
**
****************************************************************************/
/*!
\page qtquick-states-view.html
\previouspage qtquick-connection-view.html
\nextpage qtquick-transition-editor.html
\title States
The \uicontrol States view displays the different \l{Adding States}{states}
of a UI.
\image qmldesigner-transitions.png "States view"
To open the \uicontrol States view, select \uicontrol View >
\uicontrol Views > \uicontrol States.
To collapse or expand the \uicontrol States view, select:
\list
\li Select \uicontrol View > \uicontrol Views >
\uicontrol {Toggle States}.
\li Press \key {Ctr+Alt+S} on Windows or \key {Cmd+Option+S} on \macOS.
\li Right-click the view and select \uicontrol Collapse or
\uicontrol Expand.
\endlist
Initially, \uicontrol States displays a \e {base state} that shows the
selected \l{glossary-component}{component} in its initial state. To add
states, select \uicontrol {Create New State}.
For more information, watch the following video:
\youtube FzmLuRHQXaw
\section1 Summary of States View Actions
To open the \uicontrol Actions menu, select
\inlineimage icons/action-icon.png
. The actions available in the menu depend on the current context. For
example, the option for editing an annotation becomes available after
you add an annotation.
\table
\header
\li Action
\li Purpose
\li Read More
\row
\li \uicontrol {Set when Condition}
\li Determines when a state should be applied.
\li \l{Applying States}
\row
\li \uicontrol {Reset when Condition}
\li Removes \c when condition for the state.
\li \l{Applying States}
\row
\li \uicontrol {Set as Default}
\li Sets the current state as the startup state of the application.
\li \l{Setting the Default State}
\row
\li\uicontrol {Reset Default}
\li Resets the current state as the default state.
\li \l{Setting the Default State}
\row
\li \uicontrol {Add Annotation}
\li Opens the \uicontrol {Annotation Editor} when you can add an
annotation for the states that you create.
\li \l{Annotating Designs}
\row
\li \uicontrol {Edit Annotation}
\li Opens the \uicontrol {Annotation Editor} where you can edit the
annotation for the state.
\li \l{Annotating Designs}
\row
\li \uicontrol {Add Annotation}
\li Removes the annotation for the state.
\li \l{Annotating Designs}
\endtable
*/

78
doc/qtcreator/src/qtquick/qtquick-states.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.
@@ -34,13 +34,13 @@
\title Adding States
User interfaces are designed to present different interface configurations
in different scenarios, or to modify their appearances in response to user
UIs are designed to present different UI configurations in different
scenarios, or to modify their appearances in response to user
interaction. Often, there are a set of changes that are made concurrently,
such that the interface could be seen to be internally changing from one
such that the UI could be seen to be internally changing from one
\e state to another.
This applies generally to interfaces regardless of their complexity. A photo
This applies generally to UIs regardless of their complexity. A photo
viewer may initially present images in a grid, and when an image is clicked,
change to a detailed state where the individual image is expanded and the
interface is changed to present new options for image editing. At the other
@@ -48,16 +48,16 @@
\e pressed state in which its color and position are modified so that it
appears to be pressed down.
In QML, any item can change between different states to apply sets of
changes that modify the properties of relevant items. Each state can
Any component can change between different states to apply sets of
changes that modify the properties of relevant components. Each state can
present a different configuration that can, for example:
\list
\li Show some UI items and hide others.
\li Show some UI components and hide others.
\li Present different available actions to the user.
\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 Change a property value for a particular component.
\li Show a different view.
\endlist
@@ -65,24 +65,17 @@
\section1 Creating States
To open the \uicontrol States view, select \uicontrol View >
\uicontrol Views > \uicontrol States. To collapse or expand
the open view, select \uicontrol {Toggle States} or press
\key {Ctr+Alt+S}. You can also right-click the view and select
\uicontrol Collapse or \uicontrol Expand.
The \uicontrol States view displays the different \l{State}{states}
of a UI, beginning with a \e {base state}.
You can create states in the \l States view, by selecting
\uicontrol {Create New State}.
\image qmldesigner-transitions.png "States view"
To add states, select \uicontrol {Create New State}. Click the new state to
switch to it in \uicontrol {Form Editor}, and then modify the properties of
components in \uicontrol Properties.
Click the new state to switch to it in \l {Form Editor}, and then modify the
properties of components in \l Properties.
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 view,
you can change the position of an object in \uicontrol {Form Editor}
you can change the position of a component in \uicontrol {Form Editor}
and then add animation to the change between the states.
The properties that you change in a state are highlighted with blue color.
@@ -92,9 +85,8 @@
\image qmldesigner-states.png "States and Properties views"
\note If you have \l{Locking Components}{locked a component} in
\uicontrol Navigator, and you attempt to remove states where you
change the values of its properties, you are prompted to confirm
the removal.
\l Navigator, and you attempt to remove states where you change the
values of its properties, you are prompted to confirm the removal.
For more information, watch the following video:
@@ -170,18 +162,18 @@
\section1 Using States
To keep the QML code clean, you should create a base state that contains all
the types you will need in the application. You can then create states,
in which you hide and show a set of items and modify their properties.
To keep the code clean, you should create a base state that contains all
the components you will need in the application. You can then create states,
in which you hide and show a set of components and modify their properties.
This allows you to:
\list
\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.
\li Align components on different views with each other.
\li Avoid excessive property changes. If a component is invisible in
the base state, you must define all changes to its child components
as property changes, which leads to complicated code.
\li Minimize the differences between the base state and the other states
to keep the QML code short and readable and to improve performance.
to keep the code short and readable and to improve performance.
\li Avoid problems when using transitions and animation when changing
states.
\endlist
@@ -191,18 +183,20 @@
\image qmldesigner-screen-design.png "Designing views"
\list 1
\li In the base state, add all items you will need in the application
(1). While you work on one view, you can click the
\li In the base state, add all components you will need in the
application (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 view.
\li In \uicontrol States, click the empty slot to create a
new state and give it a name. For example, \c Normal.
\li In \uicontrol Properties (2), deselect the \uicontrol Visibility
check box or set \uicontrol Opacity to 0 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.
icon in \l Navigator to hide components on the canvas that are
not part of a view.
\li In \uicontrol States, select \uicontrol {Create New State} to create
a new state and give it a name. For example, \c Normal.
\li In \l Properties (2), deselect the \uicontrol Visibility
check box or set \uicontrol Opacity to 0 for each component that
is not needed in this view. If you specify the setting for the
parent component, all child components inherit it and are also
hidden.
\li Create additional states for each view and set the visibility
or opacity of the items in the view.
or opacity of the components in the view.
\li To determine which state is applied when the application starts,
select \uicontrol Actions > \uicontrol {Set as Default}.
\endlist

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

@@ -63,6 +63,7 @@
\li \l{Navigator}
\li \l{Properties}
\li \l{Connection View}
\li \l{States}
\li \l{Transition Editor}
\li \l{Timeline}
\li \l{Curve Editor}