Doc: Update custom property documentation

Task-number: QDS-7735
Change-Id: I1f4551e6d5f1319c73bc6e1b05c3c0390feecda9
Reviewed-by: Leena Miettinen <riitta-leena.miettinen@qt.io>
This commit is contained in:
Mats Honkamaa
2022-09-30 11:36:30 +03:00
parent 7d3593fc4a
commit 599c882057
15 changed files with 67 additions and 49 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

View File

@@ -51,7 +51,7 @@
custom properties on the \uicontrol {Properties} tab in the custom properties on the \uicontrol {Properties} tab in the
\l {Connections} view. \l {Connections} view.
\image qmldesigner-dynamicprops.png "Connections View Properties tab" \image qmldesigner-dynamicprops.png "Connections View Properties tab"
For more information, see \l{Specifying Dynamic Properties}. For more information, see \l{Specifying Custom Properties}.
\li To enable users to interact with the component instances, connect \li To enable users to interact with the component instances, connect
the instances to signals on the \uicontrol Connections tab in the the instances to signals on the \uicontrol Connections tab in the
\uicontrol {Connections} view. For example, you can specify what \uicontrol {Connections} view. For example, you can specify what

View File

@@ -63,7 +63,7 @@
\uicontrol Navigator or the \uicontrol {2D} view. \uicontrol Navigator or the \uicontrol {2D} view.
\li Edit component properties in the \uicontrol Properties view. \li Edit component properties in the \uicontrol Properties view.
The available properties depend on the component type. You can The available properties depend on the component type. You can
\l{Specifying Dynamic Properties}{add properties for \l{Specifying Custom Properties}{add properties for
components} on the \uicontrol {Properties} tab in the components} on the \uicontrol {Properties} tab in the
\uicontrol Connections view. \uicontrol Connections view.
\li To change the appearance and behavior of the component instances \li To change the appearance and behavior of the component instances

View File

@@ -136,7 +136,7 @@
\endif \endif
\row \row
\li Adding custom properties for a particular component type \li Adding custom properties for a particular component type
\li \l{Specifying Dynamic Properties} \li \l{Specifying Custom Properties}
\omit \omit
\row \row
\li Adding properties for controlling states \li Adding properties for controlling states

View File

@@ -71,7 +71,7 @@
\li Edit component properties in the \l Properties view. \li Edit component properties in the \l Properties view.
The available properties depend on the component type. You can The available properties depend on the component type. You can
\l{Specifying Dynamic Properties}{add properties for components} on \l{Specifying Custom Properties}{add properties for components} on
the \uicontrol Properties tab in the {Connections} view. the \uicontrol Properties tab in the {Connections} view.
\endlist \endlist

View File

@@ -165,7 +165,7 @@
Navigator to add the properties on the \uicontrol Properties tab in the Navigator to add the properties on the \uicontrol Properties tab in the
\l Connections view. \l Connections view.
See \l {Specifying Dynamic Properties} for a detailed description of how See \l {Specifying Custom Properties} for a detailed description of how
to add a custom property. The name of the property and the data type to add a custom property. The name of the property and the data type
need to match those of the send or receive property of the Simulink model. need to match those of the send or receive property of the Simulink model.

View File

@@ -219,7 +219,7 @@
\li \l{Preset Components} \li \l{Preset Components}
\li \l{Specifying Component Properties} \li \l{Specifying Component Properties}
\li \l{Adding Bindings Between Properties} \li \l{Adding Bindings Between Properties}
\li \l{Specifying Dynamic Properties} \li \l{Specifying Custom Properties}
\endlist \endlist
\section1 Signal \section1 Signal

View File

@@ -144,7 +144,7 @@
\list \list
\li\l{Connecting Components to Signals} \li\l{Connecting Components to Signals}
\li\l{Adding Bindings Between Properties} \li\l{Adding Bindings Between Properties}
\li\l{Specifying Dynamic Properties} \li\l{Specifying Custom Properties}
\endlist \endlist
\li \l{Adding States} \li \l{Adding States}
\endlist \endlist

View File

@@ -217,5 +217,5 @@
\image studio-custom-material-uniform-properties.png "Uniforms as properties in Connections view Properties tab" \image studio-custom-material-uniform-properties.png "Uniforms as properties in Connections view Properties tab"
For more information about adding properties, see For more information about adding properties, see
\l{Specifying Dynamic Properties}. \l{Specifying Custom Properties}.
*/ */

View File

@@ -31,10 +31,10 @@
\else \else
\nextpage quick-connections-backend.html \nextpage quick-connections-backend.html
\endif \endif
\sa {Specifying Component Properties}
\title Specifying Custom Properties
\title Specifying Dynamic Properties Each \l{Preset Components}{preset component }has a set of preset properties
Each preset \l{glossary-component}{component} has a set of preset properties
that you can specify values for. You can add custom properties that would that you can specify values for. You can add custom properties that would
not otherwise exist for a particular \l{Component Types}{component type}. not otherwise exist for a particular \l{Component Types}{component type}.
You bind the properties to dynamic expressions to define global properties You bind the properties to dynamic expressions to define global properties
@@ -55,50 +55,36 @@
should have an \e int or \e real property for speed to which the UI is should have an \e int or \e real property for speed to which the UI is
bound. bound.
You can add properties for components on the \uicontrol Properties tab in \section1 Adding Properties for a Component
in the \l {Connections} view.
\image qmldesigner-dynamicprops.png "Custom properties in the Connections view Custom Properties tab" To add a custom property for a component:
To add properties for a component:
\list 1 \list 1
\li Go to the \uicontrol Properties tab in the \l Connections view. \li Go to the \uicontrol {Local Custom Properties} section in the
\uicontrol Properties view.
\li Select the \inlineimage icons/plus.png \li Select the \inlineimage icons/plus.png
(\uicontrol Add) button to add a dynamic property for the currently (\uicontrol Add) button to add a custom property for the currently
selected component. The component ID is displayed in the \uicontrol Item selected component.
column. \image add-local-custom-property.png
\li Double-click the value in the \uicontrol Property column to give a \li Set the \uicontrol Name and \uicontrol Type for the property.
name to the property. Property names must begin with a lower case \image add-new-property-dialog.png
letter and can only contain letters, numbers, and underscores. \endlist
JavaScript \e {reserved words} are not valid property names.
\li Double-click the value in the \uicontrol {Property Type} column to \section1 Binding a Property Value
specify the \l{Supported Property Types}{type of the property}.
\li Double-click the value in the \uicontrol {Property Value} column To bind the value of the property to that of another one or to data
to specify the value of the property. accessible in the application.
\list 1
\li In the \uicontrol Properties view, select
\inlineimage icons/action-icon.png
next to the property.
\li Select \uicontrol {Set Binding}.
\image qmldesigner-binding-editor.png "Binding Editor"
\endlist \endlist
Right-click a property and select \uicontrol {Open Binding Editor} in
the context menu to bind the value of the property to that of another one
or to data accessible in the application in \uicontrol {Binding Editor}.
For more information, see \l{Setting Bindings}. For more information, see \l{Setting Bindings}.
\image qmldesigner-binding-editor.png "Binding Editor"
The properties you add for a component are displayed in the \l Properties
view when you select a component of that type in the \l Navigator or
\l {2D} view.
\image qtquick-custom-properties.png "Custom properties in Properties view"
For more information about setting property values in the
\l Properties view, see \l{Specifying Component Properties}.
\if defined(qtcreator)
For an example of using custom properties in an application, see
\l{Creating a Mobile Application}.
\endif
\section1 Supported Property Types \section1 Supported Property Types
The following table describes the supported property types: The following table describes the supported property types:
@@ -134,6 +120,9 @@
\row \row
\li string \li string
\li Free form text string \li Free form text string
\row
\li TextureInput
\li Specifies a texture exposed to the shaders of a CustomMaterial or Effect.
\row \row
\li url \li url
\li Resource locator, such as a file name. It can be either absolute, \li Resource locator, such as a file name. It can be either absolute,
@@ -144,5 +133,14 @@
\li variant \li variant
\li Generic property type. For example, variant properties can store \li Generic property type. For example, variant properties can store
numbers, strings, objects, arrays, and functions. numbers, strings, objects, arrays, and functions.
\row
\li vector2d
\li Refers to a value with x and y attributes.
\row
\li vector3d
\li Refers to a value with x, y, and z attributes.
\row
\li vector4d
\li Refers to a value with x, y, z, and w attributes.
\endtable \endtable
*/ */

View File

@@ -48,7 +48,7 @@
the value of a property changes, the values of any properties that the value of a property changes, the values of any properties that
are bound to it are automatically updated accordingly. are bound to it are automatically updated accordingly.
\li \l{Specifying Dynamic Properties} \li \l{Specifying Custom Properties}
Each preset component has a set of preset properties that you Each preset component has a set of preset properties that you
can specify values for. You can add custom properties that would can specify values for. You can add custom properties that would

View File

@@ -85,7 +85,7 @@
\li \uicontrol Properties \li \uicontrol Properties
\li Add custom properties that would not otherwise exist for a \li Add custom properties that would not otherwise exist for a
particular preset component or your own custom component. particular preset component or your own custom component.
\li \l{Specifying Dynamic Properties} \li \l{Specifying Custom Properties}
\if defined(qtcreator) \if defined(qtcreator)
\row \row
\li \uicontrol Backends \li \uicontrol Backends

View File

@@ -44,6 +44,26 @@
\image qmldesigner-element-properties.png "Rectangle and Text properties" \image qmldesigner-element-properties.png "Rectangle and Text properties"
\section1 Custom Properties
Custom Properties are properties that the user has added to the component.
There are two types of custom properties:
\table
\header
\li Custom Property Type
\li Description
\row
\li Local Custom Property
\li A property that has been added for a \l{Preset Components}{preset component}.
\row
\li Exposed Custom Property
\li A property that has been added inside a component.
\endtable
\image custom-properties.png
\section1 Summary of Properties View Buttons \section1 Summary of Properties View Buttons
The following table lists the \uicontrol Properties view buttons: The following table lists the \uicontrol Properties view buttons: