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

Doc: Add info about supported property types

Browse Source 
Also describe that custom properties are visible in the
Properties view, where their values can be set.

Change-Id: Ie82975116ae4de0ebb92050e7e2190315521ff8b
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>
This commit is contained in:
Leena Miettinen
2020-08-17 14:18:36 +02:00
parent 4d3b34b4b0
commit 52622a036b
4 changed files with 99 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
doc/qtcreator/images/qmldesigner-dynamicprops.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 7.1 KiB

BIN
doc/qtcreator/images/qtquick-custom-properties.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

81
doc/qtcreator/src/qtquick/qtquick-connection-editor-properties.qdoc
View File

@@ -30,8 +30,8 @@
\title Specifying Dynamic Properties
In addition to the properties predefined for QML types, you can specify
\e {dynamic properties} to add properties that would not otherwise
Each predefined QML type has a set of predefined properties that you can
specify values for. You can add custom properties that would not otherwise
exist for a particular type. You bind the properties to dynamic expressions
to define global properties for an object that can be read by other objects.
For example, you can specify global properties for the root object that you
@@ -42,18 +42,19 @@
and then use bindings to refer to the value of the margin property from
other objects.
Similarly, you can add dynamic properties at component level.
Similarly, you can add custom properties for your own QML types that are
based on the predefined types.
You can specify dynamic properties for objects in the
\uicontrol Connections view.
You can add properties for objects in the \uicontrol Connections view,
\uicontrol Properties tab.
\image qmldesigner-dynamicprops.png
\image qmldesigner-dynamicprops.png "Custom properties in Connection View Custom Properties tab"
To specify dynamic properties for an object:
To add properties for an object:
\list 1
\li In the \uicontrol {Connections} view, select the
\uicontrol {Properties} tab.
\li Select \uicontrol View > \uicontrol Views >
\uicontrol {Connections View} > \uicontrol {Properties}.
\li Select the \inlineimage plus.png
(\uicontrol Add) button to add a dynamic property for the currently
selected item. The item ID is displayed in the \uicontrol Item
@@ -61,9 +62,67 @@
\li Double-click the value in the \uicontrol Property column to give a
name to the property.
\li Double-click the value in the \uicontrol {Property Type} column to
specify the type of the property.
specify the \l{Supported Property Types}{type of the property}.
\li Double-click the value in the \uicontrol {Property Value} column
to specify a dynamic expression as the value of the property.
to specify the value of the property.
\endlist
The properties you add for a QML type are displayed in the
\uicontrol Properties view when you select a component of
that type in \uicontrol Navigator or \uicontrol {Form Editor}.
\image qtquick-custom-properties.png "Custom properties in Properties view"
For more information about setting property values in the
\uicontrol Properties view, see \l{Specifying Item Properties}.
For an example of using custom properties in an application, see
\l{Creating a Mobile Application}.
\section1 Supported Property Types
The following table describes the supported property types:
\table
\header
\li Type
\li Description
\row
\li alias
\li \l{Property Aliases}{Property alias} that holds a reference to
another property
\row
\li bool
\li Binary \c true or \c false value
\row
\li color
\li Color value that can be specified by using an SVG color name, such
as "red", "green", or "lightsteelblue", or a hexadecimal triplet or
quad in the form "#RRGGBB" and "#AARRGGBB", respectively. For
example, the color red corresponds to a triplet of "#FF0000" and
a slightly transparent blue to a quad of "#800000FF".
In addition, you can use the following Qt functions: \l{Qt::rgba()}
{Qt.rgba()}, \l{Qt::hsva()}{Qt.hsva()}, \l{Qt::hsla()}{Qt.hsla()},
\l{Qt::darker()}{Qt.darker()}, \l{Qt::lighter()}{Qt.lighter()}, and
\l{Qt::tint()}{Qt.tint()}.
\row
\li int
\li Whole integer number, such as 0, 10, or -20
\row
\li real
\li Number with a decimal point
\row
\li string
\li Free form text string
\row
\li url
\li Resource locator, such as a file name. It can be either absolute,
(\c http://qt-project.org), or relative (\c pics/logo.png). A
relative URL is resolved relative to the URL of the parent
component.
\row
\li variant
\li Generic property type. For example, variant properties can store
numbers, strings, objects, arrays, and functions.
\endtable
*/

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

@@ -32,25 +32,30 @@
The \uicontrol Properties view displays all the properties of the selected
item. The properties are grouped by type. The top part of the view displays
properties that are common to all QML types, such as position, size, and
visibility.
properties that are common to all QML types, such as type, id, position,
size, and visibility.
The bottom part of the view displays properties that are specific to each
QML type. For example, the following image displays the properties you can
set for \uicontrol Rectangle and \uicontrol Text items.
The bottom part of the view displays properties that have been defined for
the QML type. For example, the following image displays the predefined
properties you can set for \uicontrol Rectangle and \uicontrol Text items.
\image qmldesigner-element-properties.png
To change the item type, double-click the \uicontrol Type field in the
\uicontrol Properties view, and enter the name of another QML type in the
field. If you have specified properties for the item that are not supported
for the new type, the type cannot be changed and an error message is
displayed. Select the \inlineimage icons/action-icon.png
When you create a component using a QML type, the component has all the
properties of the type you used. If you realize later that another
QML type with another set of predefined properties would be more suitable
for your purposes, you can change the component type by double-clicking the
\uicontrol Type field in the \uicontrol Properties view. Enter the name of
another QML type in the field.
If you have specified values for properties that are not supported by
the new type, \QC offers to remove them for you. If you'd rather do
this yourself, you can select the \inlineimage icons/action-icon.png
(\uicontrol Actions) menu next to the property name, and then select
\uicontrol Reset to remove the property values before trying again.
To modify the common properties of multiple items simultaneously, select
them in the \uicontrol Navigator or on the canvas:
To modify the values of common properties of multiple items simultaneously,
select the items in the \uicontrol Navigator or on the canvas:
\list
\li On Windows, press and hold \key Ctrl and \key Shift, and then click
@@ -71,6 +76,18 @@
For more information on the properties available for an item, press
\key {F1}.
\section1 Specifying Custom Properties
Each predefined QML type has a set of properties that you can extend by
defining additional properties for your own QML components. For more
information, see \l{Specifying Dynamic Properties}.
The properties you add for a QML type are displayed in the
\uicontrol Properties view when you select a component
of that type in \uicontrol Navigator or \uicontrol {Form Editor}.
\image qtquick-custom-properties.png "Custom properties in Properties view"
\section1 Viewing Changes in Properties
The default values of properties are displayed in white color, while the