diff --git a/doc/qtcreator/images/icons/action-icon-binding.png b/doc/qtcreator/images/icons/action-icon-binding.png index 8cfd1286391..9f116368c77 100644 Binary files a/doc/qtcreator/images/icons/action-icon-binding.png and b/doc/qtcreator/images/icons/action-icon-binding.png differ diff --git a/doc/qtcreator/images/icons/action-icon.png b/doc/qtcreator/images/icons/action-icon.png index f9a52b2d765..e9f8ccc9b22 100644 Binary files a/doc/qtcreator/images/icons/action-icon.png and b/doc/qtcreator/images/icons/action-icon.png differ diff --git a/doc/qtcreator/images/icons/alias.png b/doc/qtcreator/images/icons/alias.png new file mode 100644 index 00000000000..ebb8f853dfa Binary files /dev/null and b/doc/qtcreator/images/icons/alias.png differ diff --git a/doc/qtcreator/images/icons/lockoff.png b/doc/qtcreator/images/icons/lockoff.png index e88792bc6e2..496c9f7c0da 100644 Binary files a/doc/qtcreator/images/icons/lockoff.png and b/doc/qtcreator/images/icons/lockoff.png differ diff --git a/doc/qtcreator/images/qmldesigner-boolean-false-blue.png b/doc/qtcreator/images/qmldesigner-boolean-false-blue.png index d894a530b22..1d158329bf5 100644 Binary files a/doc/qtcreator/images/qmldesigner-boolean-false-blue.png and b/doc/qtcreator/images/qmldesigner-boolean-false-blue.png differ diff --git a/doc/qtcreator/images/qmldesigner-boolean-false.png b/doc/qtcreator/images/qmldesigner-boolean-false.png index 57c05404ad0..232ecbd225e 100644 Binary files a/doc/qtcreator/images/qmldesigner-boolean-false.png and b/doc/qtcreator/images/qmldesigner-boolean-false.png differ diff --git a/doc/qtcreator/images/qmldesigner-boolean-true-blue.png b/doc/qtcreator/images/qmldesigner-boolean-true-blue.png index 69a4e38d7f6..9a16d19db86 100644 Binary files a/doc/qtcreator/images/qmldesigner-boolean-true-blue.png and b/doc/qtcreator/images/qmldesigner-boolean-true-blue.png differ diff --git a/doc/qtcreator/images/qmldesigner-boolean-true.png b/doc/qtcreator/images/qmldesigner-boolean-true.png index 5a29203db7e..754372a15cb 100644 Binary files a/doc/qtcreator/images/qmldesigner-boolean-true.png and b/doc/qtcreator/images/qmldesigner-boolean-true.png differ diff --git a/doc/qtcreator/images/qmldesigner-element-properties.png b/doc/qtcreator/images/qmldesigner-element-properties.png index 05be05eae92..0a8c4a10412 100644 Binary files a/doc/qtcreator/images/qmldesigner-element-properties.png and b/doc/qtcreator/images/qmldesigner-element-properties.png differ diff --git a/doc/qtcreator/images/qmldesigner-properties-explicit-base.png b/doc/qtcreator/images/qmldesigner-properties-explicit-base.png index 851663231d2..8581e203f01 100644 Binary files a/doc/qtcreator/images/qmldesigner-properties-explicit-base.png and b/doc/qtcreator/images/qmldesigner-properties-explicit-base.png differ diff --git a/doc/qtcreator/images/qmldesigner-properties-explicit-state1.png b/doc/qtcreator/images/qmldesigner-properties-explicit-state1.png index e4561310f4d..a447618e3a0 100644 Binary files a/doc/qtcreator/images/qmldesigner-properties-explicit-state1.png and b/doc/qtcreator/images/qmldesigner-properties-explicit-state1.png differ diff --git a/doc/qtcreator/images/qmldesigner-text-property-tr.png b/doc/qtcreator/images/qmldesigner-text-property-tr.png index 4a80992c4f0..ec34e0c70b1 100644 Binary files a/doc/qtcreator/images/qmldesigner-text-property-tr.png and b/doc/qtcreator/images/qmldesigner-text-property-tr.png differ diff --git a/doc/qtcreator/images/qtquick-annotation-editor.png b/doc/qtcreator/images/qtquick-annotation-editor.png index 9c1864044fd..3cab7f7a1c2 100644 Binary files a/doc/qtcreator/images/qtquick-annotation-editor.png and b/doc/qtcreator/images/qtquick-annotation-editor.png differ diff --git a/doc/qtcreator/images/qtquick-designer-text-edit-properties.png b/doc/qtcreator/images/qtquick-designer-text-edit-properties.png new file mode 100644 index 00000000000..528fd8cda36 Binary files /dev/null and b/doc/qtcreator/images/qtquick-designer-text-edit-properties.png differ diff --git a/doc/qtcreator/images/qtquick-designer-text-input-properties.png b/doc/qtcreator/images/qtquick-designer-text-input-properties.png index 5897a067944..c5de62060c0 100644 Binary files a/doc/qtcreator/images/qtquick-designer-text-input-properties.png and b/doc/qtcreator/images/qtquick-designer-text-input-properties.png differ diff --git a/doc/qtcreator/images/qtquick-designer-text-properties.png b/doc/qtcreator/images/qtquick-designer-text-properties.png index 77d41ab5246..374e68ca9d9 100644 Binary files a/doc/qtcreator/images/qtquick-designer-text-properties.png and b/doc/qtcreator/images/qtquick-designer-text-properties.png differ diff --git a/doc/qtcreator/images/qtquick-item-properties-common.png b/doc/qtcreator/images/qtquick-item-properties-common.png index 1aca536ff68..6311b1ce58b 100644 Binary files a/doc/qtcreator/images/qtquick-item-properties-common.png and b/doc/qtcreator/images/qtquick-item-properties-common.png differ diff --git a/doc/qtcreator/images/qtquick-item-properties-layer.png b/doc/qtcreator/images/qtquick-item-properties-layer.png index d01df21087c..641e1e0e876 100644 Binary files a/doc/qtcreator/images/qtquick-item-properties-layer.png and b/doc/qtcreator/images/qtquick-item-properties-layer.png differ diff --git a/doc/qtcreator/images/qtquick-properties-2D-geometry.png b/doc/qtcreator/images/qtquick-properties-2D-geometry.png new file mode 100644 index 00000000000..0712bbbee5e Binary files /dev/null and b/doc/qtcreator/images/qtquick-properties-2D-geometry.png differ diff --git a/doc/qtcreator/images/qtquick-properties-advanced.png b/doc/qtcreator/images/qtquick-properties-advanced.png new file mode 100644 index 00000000000..884585f2c27 Binary files /dev/null and b/doc/qtcreator/images/qtquick-properties-advanced.png differ diff --git a/doc/qtcreator/images/qtquick-properties-font-extras.png b/doc/qtcreator/images/qtquick-properties-font-extras.png new file mode 100644 index 00000000000..97663e7fb19 Binary files /dev/null and b/doc/qtcreator/images/qtquick-properties-font-extras.png differ diff --git a/doc/qtcreator/images/qtquick-properties-text-extras.png b/doc/qtcreator/images/qtquick-properties-text-extras.png new file mode 100644 index 00000000000..d8710b7304b Binary files /dev/null and b/doc/qtcreator/images/qtquick-properties-text-extras.png differ diff --git a/doc/qtcreator/images/qtquick-properties-text-field.png b/doc/qtcreator/images/qtquick-properties-text-field.png new file mode 100644 index 00000000000..b36420cf91d Binary files /dev/null and b/doc/qtcreator/images/qtquick-properties-text-field.png differ diff --git a/doc/qtcreator/images/qtquick-properties-text-padding.png b/doc/qtcreator/images/qtquick-properties-text-padding.png new file mode 100644 index 00000000000..81d8bb3838f Binary files /dev/null and b/doc/qtcreator/images/qtquick-properties-text-padding.png differ diff --git a/doc/qtcreator/images/qtquick-properties-visibility.png b/doc/qtcreator/images/qtquick-properties-visibility.png new file mode 100644 index 00000000000..163d92ae1b4 Binary files /dev/null and b/doc/qtcreator/images/qtquick-properties-visibility.png differ diff --git a/doc/qtcreator/src/qtquick/creator-only/creator-mobile-app-tutorial.qdoc b/doc/qtcreator/src/qtquick/creator-only/creator-mobile-app-tutorial.qdoc index 1ac155fce53..c2b6ddc96f5 100644 --- a/doc/qtcreator/src/qtquick/creator-only/creator-mobile-app-tutorial.qdoc +++ b/doc/qtcreator/src/qtquick/creator-only/creator-mobile-app-tutorial.qdoc @@ -114,7 +114,7 @@ \image qtquick-mobile-app-tutorial-image.png "Image file in different views" - \li Select the \inlineimage export_unchecked.png + \li Select the \inlineimage icons/alias.png (\uicontrol Export) button in \uicontrol Navigator to export \e mainWindow and \e bubble as properties. diff --git a/doc/qtcreator/src/qtquick/library/qtquick-shapes.qdoc b/doc/qtcreator/src/qtquick/library/qtquick-shapes.qdoc index 0c4f7212474..3c1b7bebf96 100644 --- a/doc/qtcreator/src/qtquick/library/qtquick-shapes.qdoc +++ b/doc/qtcreator/src/qtquick/library/qtquick-shapes.qdoc @@ -54,7 +54,7 @@ {Item} component. Even though it has no visual appearance itself (similarly to a mouse area, for example), it defines all the properties that are common across visual components, such as position, size, and visibility. For - more information, see \l{Specifying Basic Component Properties}. + more information, see \l{Basic Component Properties}. In addition, each component has a set of properties that specify its visual appearance and behavior. You can modify the property values to set fill diff --git a/doc/qtcreator/src/qtquick/library/qtquick-text.qdoc b/doc/qtcreator/src/qtquick/library/qtquick-text.qdoc index 2ecef89f322..8202082341f 100644 --- a/doc/qtcreator/src/qtquick/library/qtquick-text.qdoc +++ b/doc/qtcreator/src/qtquick/library/qtquick-text.qdoc @@ -32,9 +32,9 @@ You can use several different text components to add read-only or editable text to a UI, such as titles or labels and text input fields with - placeholder text. The \l Text component adds formatted text, the \l TextEdit - component adds a multiline line edit, and the \l TextInput component adds a - single editable line field. + placeholder text. The \uicontrol Text component adds formatted text, the + \uicontrol {Text Edit} component adds a multiline line edit, and the + \uicontrol {Text Input} component adds a single editable line field. You can select the font to use and specify extensive properties for each text string, such as size in points or pixels, style name, emphasis, @@ -44,15 +44,19 @@ \youtube yOUdg1o2KJM - To create a label with a background, use the \l Label component from the - Qt Quick Controls module. + To create a label with a background, use the \uicontrol Label + component available in \l Library > \uicontrol Components > + \uicontrol {Qt Quick Controls}. The module also contains components + for creating \uicontrol {Text Field} and \uicontrol {Text Area} controls. + They differ from the basic components in that a common style is applied + to them and that you can specify placeholder text for them. \section1 Using Rich Text - You can use rich text in the \l Text and \l TextInput components. To - open the rich text editor, select the \inlineimage icons/edit.png - (\uicontrol Edit) button next to the \uicontrol Text field in - \uicontrol Properties. + You can use rich text in the \uicontrol Text and \uicontrol {Text Input} + components. To open the rich text editor, select the \inlineimage icons/edit.png + (\uicontrol Edit) button in \uicontrol Properties > \uicontrol Character + > \uicontrol Text. \image qtquick-text-rtf.gif "Editing text in the rich text editor" @@ -71,15 +75,48 @@ \image qtquick-rtf-editor.png "Text formatted as rich text in the editor" - \section1 Typography + \section1 Marking Strings for Translation - For each string that you enter in the \uicontrol Text field, you can - select the font to use in the \uicontrol Font field and specify the - size, emphasis, aligment, and spacing of the text. Specify the font - size in either points or pixels in the \uicontrol Size field. + To support translators, mark the strings that should be translated. + In \uicontrol Properties > \uicontrol Character > \uicontrol Text, select + \uicontrol tr. - \image qtquick-designer-text-properties.png "Text component general properties" - \image qtquick-designer-properties-font.png "Text component font properties" + \image qmldesigner-text-property-tr.png "tr button in Character section" + + By default, the text string is enclosed in a \c qsTr() call. + + \image qml-translate.png "Text marked for translation" + + If you use text IDs instead of plain text, change the default call to + \c qsTrId(). Select \uicontrol Tools > \uicontrol Options > + \uicontrol {Qt Quick} > \uicontrol {Qt Quick Designer}, and then select the + \uicontrol {qsTrId()} radio button in the \uicontrol Internationalization + group. For more information about text ID based translations, see + \l {Qt Linguist Manual: Text ID Based Translations}. + + To preserve the context when editing the text or to change the context + by setting a binding on the text property, change the default call to + \c qsTranslate() by selecting the \uicontrol {qsTranslate()} radio button. + + For more information, see + \l {Internationalization and Localization with Qt Quick}. + + \if defined(qtcreator) + When you \l{Creating Qt Quick Projects}{create a new project}, you can + automatically generate a translation source file (TS) for one language. + You can add other languages later by editing the project file. + \endif + + \section1 Character Properties + + You can set font properties in the \uicontrol Character section + in \uicontrol Properties. For each string that you enter in the + \uicontrol Text field, you can select the font to use in the + \uicontrol Font field and specify the size, emphasis, aligment, + and spacing of the text. Specify the font size in either points + or pixels in the \uicontrol Size field. + + \image qtquick-designer-text-properties.png "Character properties" To display custom fonts in the list of available fonts in the \uicontrol Font field, you need to first add them to \l Library: @@ -94,23 +131,27 @@ \li Select \uicontrol OK. \endlist - You can use the buttons in the \uicontrol {Font style} group to emphasize + In the \uicontrol Weight field, you can select the font weight from a + list of predefined values that range between extra-light and extra-bold. + You can also use the buttons in the \uicontrol Emphasis group to format text by making it bold, italic, underlined, or strikethrough. - Alternatively, select a font variant to use in the \uicontrol {Style name} - field, such as \uicontrol Regular or \uicontrol Bold. + If you set a style name in the \uicontrol {Style name} field, the font is + matched against the style name instead of the values set in the + \uicontrol Weight and \uicontrol Emphasis fields. - The value of the \uicontrol Word field in the \uicontrol Spacing group - changes the default spacing between individual words, whereas the value - of the \uicontrol Letter field changes the spacing between individual + The value of the \uicontrol {Word spacing} field changes the default + spacing between individual words, whereas the value of the + \uicontrol {Letter spacing} field changes the spacing between individual letters in a word. A positive value increases the spacing by a corresponding amount of pixels, while a negative value decreases it. The value of the \uicontrol {Line height} field sets the line height - for the text. In the \uicontrol {Line height mode} field, select - \uicontrol FixedHeight to set the line height in pixels or - \uicontrol ProportionalHeight (default) to set the spacing proportionally - to the line (as a multiplier). For example, set to 2 for double spacing. + for the text. In the \uicontrol {Line height mode} field in the + \uicontrol {Text Extras} section, select \uicontrol FixedHeight to set + the line height in pixels or \uicontrol ProportionalHeight (default) + to set the spacing proportionally to the line (as a multiplier). + For example, set to 2 for double spacing. \section1 Text Alignment @@ -134,16 +175,14 @@ You can set the color of the text itself and a secondary color used by text styles. - The color that you pick in the \uicontrol {Style color} field is used as - the outline color for outlined text, and as the shadow color for raised - or sunken text. You set the font style in the \uicontrol Style field of - the \uicontrol Font section. - For the \uicontrol {Text Edit} and \uicontrol {Text Input} components, you can also set the color of selected text and the text highlight color that is used behind selections in the \uicontrol {Selected text color} and \uicontrol {Selection color} fields. + For the \uicontrol {Text Field} and \uicontrol {Text Area} controls, you + can also set the color of the \l{Placeholder Text}{placeholder text}. + For more information about selecting colors, see \l{Picking Colors}. You can only set solid colors for text components. @@ -152,18 +191,25 @@ The height and width of a text component are determined automatically depending on the values of the properties you set, to accommodate the length of the string that you specify in the \uicontrol Text field and the font size, for - example. + example. You can specify additional properties for formatting text in the + \uicontrol {Text Extras} section. + + \image qtquick-properties-text-extras.png "Text Extras section" + + The value of the \uicontrol {Size mode} field specifies how the font + size of the displayed text is determined. Select \uicontrol FixedSize + to use the size specified in the \uicontrol Size field in the + \uicontrol Character section in pixels or points. - The value of the \uicontrol {Font size mode} field specifies how the font - size of the displayed text is determined. Select \uicontrol FixedSize to - use the size specified in the \uicontrol Size field in pixels or points. Select \uicontrol HorizontalFit or \uicontrol VerticalFit to use the largest size up to the size specified that fits the width or height of the component. Select \uicontrol Fit to use the largest size up to the size specified that fits within the width and height of the component. The font size of fitted text - has a minimum bound specified by the \uicontrol {Minimum size} field and + has a minimum bound specified by the \uicontrol {Min size} field and maximum bound specified by the \uicontrol Size field. + \section3 Wrapping and Eliding Text + In the \uicontrol {Wrap mode} field, you can wrap the text to the text component's width. The text will only wrap if you set an explicit width for the text component. By default, text is not wrapped. Select \uicontrol WordWrap @@ -174,7 +220,7 @@ You can use the \uicontrol Elide property with the \uicontrol Wrap option to fit a single line of plain text to a set width. Select - \uicontrol ElideRight, and set the \uicontrol {Maximum line count} + \uicontrol ElideRight, and set the \uicontrol {Max line count} or the text component height (in the \uicontrol H field). If you set both, the maximum line count will apply unless the lines do not fit in the height allowed. @@ -186,18 +232,7 @@ Multi-length strings are ordered from longest to shortest, separated by the Unicode \e {String Terminator} character \c U009C. - \section1 Advanced Font Properties - - In the \uicontrol {Font weight} field, you can select the font weight from - list predefined values that range between extra-light and extra-bold. - - In the \uicontrol {Font capitalization} field, select \uicontrol MixedCase - for normal text rendering where no capitalization changes are applied. You - can also set the text in all upper or lower case, or use small caps. The - \uicontrol Capitalize option renders the first character of each word as an - uppercase character. - - \section1 Developer Text Properties + \section3 Formatting Text Text can be either in plain text or rich text format, depending on the value you set in the \uicontrol Format field. If you select @@ -206,6 +241,8 @@ described on the \l {Supported HTML Subset}. Note that plain text offers better performance than rich text. + \section3 Rendering Text + In the \uicontrol {Render type} field, you can override the default rendering type for a text component. Select \uicontrol NativeRendering if you prefer text to look native on the target platform and do not @@ -213,20 +250,69 @@ {transformation} of the text. Using rotation or scaling in combination with native rendering leads to poor and sometimes pixelated results. + If you select \uicontrol NativeRendering, you can set the hinting preference + in the \uicontrol Hinting field in the \uicontrol {Font Extras} section: + + \list + \li \uicontrol PreferDefaultHinting uses the default hinting level for + the target platform. + \li \uicontrol PreferNoHinting renders text without hinting the outlines + of the glyphs, if possible. + \li \uicontrol PreferVerticalHinting renders text with no horizontal + hinting, but aligns glyphs to the pixel grid in the vertical + direction, if possible. + \li \uicontrol PreferFullHinting renders text with hinting in both + horizontal and vertical directions. + \endlist + + \note This property only describes a preference, as the full range of + hinting levels are not supported on all of Qt's supported platforms. + + \section1 Advanced Font Properties + + You can specify additional properties for fonts in the + \uicontrol {Font Extras} section. + + \image qtquick-properties-font-extras.png "Font Extras section" + + In the \uicontrol Capitalization field, select \uicontrol MixedCase + for normal text rendering where no capitalization changes are applied. You + can also set the text in all upper or lower case, or use small caps. The + \uicontrol Capitalize option renders the first character of each word as an + uppercase character. + + You can set the font style in the \uicontrol Style field to + \uicontrol Outline, \uicontrol Raised, or \uicontrol Sunken. + The color that you pick in the \uicontrol {Style color} + field is used as the outline color for outlined text, and as + the shadow color for raised or sunken text. + + To use kerning when drawing text with the selected font, select the + \uicontrol {Auto kerning} check box. + + Sometimes, a font will apply complex rules to a set of characters in order + to display them correctly. In some writing systems, such as Brahmic scripts, + this is required in order for the text to be legible but in others, such + as Latin script, it is merely a cosmetic feature. Such features are disabled + by default to improve performance. If they are required, select the + \uicontrol {Prefer shaping} check box. + \target text-edit \section1 Text Input You can use the \uicontrol {Text Edit} and \uicontrol {Text Input} components to add text fields where users can enter text. - The Text Input component displays a single line of editable plain text, - whereas the Text Edit component displays a block of editable, formatted - text. Both components are used to accept text input. + The \uicontrol {Text Input} component displays a single line of editable + plain text, whereas the \uicontrol {Text Edit} component displays a block + of editable, formatted text. Both components are used to accept text input. \image qtquick-designer-text-input-properties.png "Text input field properties" - In the \uicontrol {Mouse selection mode} field, you can specify whether - individual characters or whole words are selected when selecting text. + \section2 Entering Passwords + + You can set properties for \uicontrol {Text Input} components that make + them suitable for entering passwords. In the \uicontrol {Input mask} field, you can create an input mask that contains mask and meta characters and separators between them. When created @@ -241,14 +327,18 @@ platform-dependent password mask characters instead of the actual characters that users enter. Select \uicontrol PasswordEchoOnEdit to display characters as users enter them. The mask character is displayed in the - \uicontrol {Pass. char} field. + \uicontrol {Password character} field. + + \section2 Entering Text + + You can specify how users can enter text into text edit or input fields. In the \uicontrol {Maximum length} field, set the maximum number of characters that users can enter. The value of the \uicontrol {Auto scroll} check box determines whether the text edit or input should scroll when the text is longer than the width of - the input field. + the field. If the \uicontrol {Overwrite mode} check box is selected, existing text is overwritten, character-for-character by new text. Otherwise, new text is @@ -258,7 +348,27 @@ To prevent users from changing the text, select the \uicontrol {Read only} check box. - The value of the \uicontrol {Set active focus on press} check box determines + \section2 Selecting Text + + In the \uicontrol {Selection mode} field, you can specify whether + individual characters or whole words are selected when selecting text + with a pointer device. + + Select the \uicontrol {Select by mouse} check box to enable users to + use the mouse to select text in some platform-specific way. For some + platforms this may not be an appropriate interaction because it may + conflict with how the text needs to behave inside a \uicontrol Flickable + component, for example. + + For a \uicontrol {Text Edit} component, you can select the + \uicontrol {Select by keyboard} check box to enable users to + use the keyboard to select text even if the edit field is + read-only. If this property is set to \c false, users cannot + use the keyboard to select text even if it is editable. + + \section2 Focus + + The value of the \uicontrol {Focus on press} check box determines whether the text edit or input should gain active focus on a mouse press. By default, the cursor becomes visible when the text edit or input gains @@ -270,20 +380,44 @@ If the \uicontrol {Persistent selection} check box is selected, a text edit or input keeps its selection when active focus moves to another component. - To use a pointer device for selecting text, select the - \uicontrol {Select by mouse} check box. + \section2 Tabs and Margins + + You can specify additional properties for formatting a block of text in + a \uicontrol {Text Edit} component. + + \image qtquick-designer-text-edit-properties.png "Text edit properties" + + In the \uicontrol {Tab stop distance} field, set the default distance, in + device units, between tab stops. + + In the \uicontrol {Text margin} field, set the margin around the text in + pixels. \section1 Padding The values of the properties in the \uicontrol Padding section specify the padding around the content. The individual padding properties adopt the - value of the \uicontrol Padding field, unless you set them explicitly. + value of the \uicontrol Global field, unless you set them explicitly. + + \image qtquick-properties-text-padding.png "Padding section" \note If you explicitly set the width or height of a text edit or input, ensure that it is large enough to accommodate the padding values. If the text does not have enough vertical or horizontal space in which to be rendered, it will appear clipped. + \section1 Placeholder Text + + For \uicontrol {Text Field} and \uicontrol {Text Area} controls, you can + specify text to display in a field before users enter text into it. + Specify the text in the \uicontrol {Placeholder text} field and its color + in the \uicontrol {Placeholder color} field. + + \image qtquick-properties-text-field.png "Placeholder text settings" + + Select the \uicontrol Hover check box to enable the text field to accept + hover events. + \section1 Summary of Text Components The following table lists the components that you can use to add text to diff --git a/doc/qtcreator/src/qtquick/library/qtquick-user-interaction-methods.qdoc b/doc/qtcreator/src/qtquick/library/qtquick-user-interaction-methods.qdoc index 80bc3c3828a..1ac117d9e1a 100644 --- a/doc/qtcreator/src/qtquick/library/qtquick-user-interaction-methods.qdoc +++ b/doc/qtcreator/src/qtquick/library/qtquick-user-interaction-methods.qdoc @@ -96,7 +96,7 @@ is ignored. A component has focus when the \uicontrol Focus property in the - \uicontrol Advanced tab is set to \c true. However, for reusable + \uicontrol Advanced section is set to \c true. However, for reusable or imported components, this is not sufficient, and you should use a \uicontrol {Focus Scope} component. diff --git a/doc/qtcreator/src/qtquick/qtquick-annotations.qdoc b/doc/qtcreator/src/qtquick/qtquick-annotations.qdoc index 8cd779c892e..8c493319b9b 100644 --- a/doc/qtcreator/src/qtquick/qtquick-annotations.qdoc +++ b/doc/qtcreator/src/qtquick/qtquick-annotations.qdoc @@ -63,11 +63,13 @@ \list 1 \li Select the component to annotate in \uicontrol Navigator or in \uicontrol {Form Editor}. - \li In \uicontrol Properties, select \uicontrol {Add Annotation}. + \li In \uicontrol Properties, select \uicontrol {Add Annotation} to + open \uicontrol {Annotation Editor}. \image qtquick-annotation-editor.png "Annotation Editor" \li The \uicontrol {Selected Item} field displays the ID of the - component. Enter a name for the annotation in the - \uicontrol {Custom ID} field. + component. + \li In the the \uicontrol Name field, enter a free-form text that + describes the component. \li In the \uicontrol Title field, enter the text to display in the tab for this comment. \li In the \uicontrol Author field, enter the author's name. @@ -82,6 +84,8 @@ (\uicontrol {Remove Comment}) button. To remove the annotation, right-click the annotation icon, and then select \uicontrol {Remove Annotation}. + To view the annotations in table format, select \uicontrol {Table view}. + To edit annotations, select \uicontrol {Edit Annotation} in the context menu of the component. */ diff --git a/doc/qtcreator/src/qtquick/qtquick-buttons.qdoc b/doc/qtcreator/src/qtquick/qtquick-buttons.qdoc index 83e006a658b..d3125d7a016 100644 --- a/doc/qtcreator/src/qtquick/qtquick-buttons.qdoc +++ b/doc/qtcreator/src/qtquick/qtquick-buttons.qdoc @@ -250,7 +250,7 @@ \image qmldesigner-borderimage-bindings.png "Active state when condition" \li Select the text component in \uicontrol Navigator to specify that the text size is scaled up when the button is pressed down. - \li In \uicontrol Properties, select the \uicontrol Advanced tab, and + \li In \uicontrol Properties, select the \uicontrol Advanced section, and increase the value of the \uicontrol Scale property. \li Select \e inactiveButton in \uicontrol Navigator to hide it in the \e active state by changing the value of its diff --git a/doc/qtcreator/src/qtquick/qtquick-navigator.qdoc b/doc/qtcreator/src/qtquick/qtquick-navigator.qdoc index cd699bc8123..3e50256a205 100644 --- a/doc/qtcreator/src/qtquick/qtquick-navigator.qdoc +++ b/doc/qtcreator/src/qtquick/qtquick-navigator.qdoc @@ -90,7 +90,7 @@ \li Shows and hides invisible components in \uicontrol Navigator. \li \l{Showing and Hiding Components} \row - \li \inlineimage export_unchecked.png + \li \inlineimage icons/alias.png \li Adds a property alias that you can use from outside of the component. \li \l{Adding Property Aliases} @@ -227,7 +227,7 @@ below the third level. \endlist - You can use the \inlineimage export_unchecked.png + You can use the \inlineimage icons/alias.png (\uicontrol Export) button in \uicontrol Navigator to export a component as a property alias with a valid alias reference. diff --git a/doc/qtcreator/src/qtquick/qtquick-properties-view.qdoc b/doc/qtcreator/src/qtquick/qtquick-properties-view.qdoc index 01f9b47962d..9f7fb158201 100644 --- a/doc/qtcreator/src/qtquick/qtquick-properties-view.qdoc +++ b/doc/qtcreator/src/qtquick/qtquick-properties-view.qdoc @@ -33,7 +33,7 @@ The \uicontrol Properties view displays all the properties of the selected \l{glossary-component}{component}. The properties are grouped by type. The top part of the view displays properties that are common to all components, - such as type name, ID, position, size, and visibility. + such as component type, ID, name, geometry, and visibility. \image qtquick-item-properties-common.png "Basic component properties" @@ -54,7 +54,7 @@ \li Tooltip \li Read More \row - \li \inlineimage export_unchecked.png + \li \inlineimage icons/alias.png \li Adds a property alias that you can use from outside of the component for the root component. You can use a menu item in the actions menu to add property aliases for property @@ -99,7 +99,7 @@ the current state and which values are derived from the base state. The following images illustrate this. In the base state, the - \uicontrol Position (1) and \uicontrol Size (2) values are explicitly set + \uicontrol Position and \uicontrol Size values are explicitly set and highlighted. \image qmldesigner-properties-explicit-base.png "Explicitly set properties" @@ -141,7 +141,8 @@ \section1 Multiselection To modify the values of common properties of multiple components - simultaneously, select the components in \l Navigator or \l {Form Editor}: + simultaneously, select the components in \l Navigator, \l {Form Editor} + or \uicontrol {3D Editor}: \list \li On Windows, press and hold \key Ctrl and \key Shift, and then click @@ -158,7 +159,7 @@ \list \li For information about setting common component properties, see \l{Specifying Component Properties}. - \li For more information on the properties available for a + \li For more information about the properties available for a component, press \key {F1} or see \l{Component Types} and \l{Scalable Layouts}. \endlist diff --git a/doc/qtcreator/src/qtquick/qtquick-properties.qdoc b/doc/qtcreator/src/qtquick/qtquick-properties.qdoc index 3a55202b9e9..71cbed41f00 100644 --- a/doc/qtcreator/src/qtquick/qtquick-properties.qdoc +++ b/doc/qtcreator/src/qtquick/qtquick-properties.qdoc @@ -34,7 +34,7 @@ \l{glossary-component}{component}. \target basic-item - \section1 Specifying Basic Component Properties + \section1 Basic Component Properties All components share a set of properties that you can specify in the \uicontrol Properties view. @@ -43,7 +43,7 @@ \section2 Type - When you create a component using a \l{Component Types}{preset component}, + When you create an instance of a \l{Component Types}{preset component}, it has all the properties of the preset you used. If you realize later that another preset component with another set of default properties would be more suitable for your purposes, you can change the component type by @@ -68,10 +68,23 @@ For more technical information about IDs, see \l{The id Attribute}. - The value of the \uicontrol {Custom ID} field specifies the name of an - \l{Annotating Designs}{annotation}. + To add a \l{Adding Property Aliases}{property alias} that you can use + from outside of the component, select \inlineimage icons/alias.png + . You can use a menu item in the \uicontrol Actions menu to add property + aliases for property values of child components. - \section2 2D Geometry + \section2 Name + + The value of the \uicontrol {Name} field specifies the component name + used in an \l{Annotating Designs}{annotation}. It is a free-form text + that descibes the component. + + \section1 2D Geometry + + Set the properties in the \uicontrol {Geometry - 2D} section to determine + the position and size of a component. + + \image qtquick-properties-2d-geometry.png "2D Geometry properties" In the \uicontrol Position group, you can set the position of a component on the x and y axis. The position of a component in the UI can be either @@ -80,7 +93,7 @@ In the 2D space, the z position of a component determines its position in relation to its sibling components in the component hierarchy. You can set - it in the \uicontrol Z field in the \uicontrol Advanced tab. + the z position in the \uicontrol {Z stack} field. In the \uicontrol Size group, you can set the width and height of a component. You can also use the resize cursor to \l{Resizing 2D Components} @@ -96,7 +109,7 @@ if its final size is determined by property bindings. For more information, see \l {Previewing Component Size}. - \section3 Resetting Component Position and Size + \section2 Resetting Component Position and Size To return a component to its default position after moving it, select the \inlineimage qtcreator-reset-position-icon.png @@ -105,20 +118,44 @@ \inlineimage qtcreator-reset-size-icon.png (\uicontrol {Reset Size}) button. - \section2 Visibility + \section2 Managing 2D Transformations - You can use the properties in the \uicontrol Visibility group to show and + You can assign any number of transformations, such as rotation and scaling, + to a component. Each transformation is applied in order, one at a time. + + In the \uicontrol Origin field, select the origin point for scaling and + rotation. + + Set the scale factor in the \uicontrol Scale field. A value of less than + 1.0 makes the component smaller, whereas a value greater than 1.0 makes + it larger. A negative value causes the component to be mirrored in + \uicontrol {Form Editor}. + + In the \uicontrol Rotation field, specify the rotation of the component + in degrees clockwise around the origin point. + + Alternatively, you can move, resize, or rotate components by dragging them + in \l{Form Editor}. + + For more information about transforming 3D components, see + \l{Managing 3D Transformations} and \l{3D Editor}. + + \section1 Visibility + + Set the properties in the \uicontrol Visibility section to show and hide components. - Deselect the \uicontrol {Is visible} check box to hide a component and all + \image qtquick-properties-visibility.png "Visibility properties" + + Deselect the \uicontrol Visible check box to hide a component and all its child components, unless they have explicitly been set to be visible. This might have surprise effects when using property bindings. In such cases, it may be better to use the \uicontrol Opacity property instead. If this property is disabled, the component will no longer receive - \l{Mouse Area}{mouse events} but will continue to receive key events - and will retain the keyboard focus events, if it has been set by - selecting the \uicontrol Enabled check box in the \uicontrol Advanced tab. + \l{Mouse Area}{mouse events}. However, it will continue to receive key + events and will retain the keyboard focus events if the \uicontrol Enabled + check box in the \uicontrol Advanced section is selected. The visibility value is only affected by changes to this property or the parent's visible property. It does not change, for example, if this @@ -138,30 +175,8 @@ If the \uicontrol Clip check box is selected, the component and its children are clipped to the bounding rectangle of the component. - \section1 Managing 2D Transformations - - You can assign any number of transformations, such as rotation and scaling, - to a component in the \uicontrol Advanced tab of the \uicontrol Properties - view. Each transformation is applied in order, one at a time. - - \image qtquick-item-properties-advanced.png "Advanced component properties" - - In the \uicontrol Origin field, select the origin point for scaling and - rotation. - - Set the scale factor in the \uicontrol Scale field. A value of less than - 1.0 makes the component smaller, whereas a value greater than 1.0 makes - it larger. A negative value causes the component to be mirrored in - \uicontrol {Form Editor}. - - In the \uicontrol Rotation field, specify the rotation of the component - in degrees clockwise around the origin point. - - Alternatively, you can move, resize, or rotate components by dragging them - in \l{Form Editor}. - - For more information about transforming 3D components, see - \l{Managing 3D Transformations} and \l{3D Editor}. + in the \uicontrol State field, select the \l{Adding States}{state} to + change the value of a property in that state. \section1 Picking Colors @@ -261,48 +276,23 @@ By default, a linear gradient (4) is used, but you can select another supported gradient type in the \uicontrol Properties view. - \section1 Marking Text Components for Translation - - To support translators, mark each text component that should be translated. - In the \uicontrol Properties view, \uicontrol Text field, select \uicontrol tr (1). - - \image qmldesigner-text-property-tr.png "Text properties" - - By default, the text string is enclosed in a \c qsTr() call. - - \image qml-translate.png "Text marked for translation" - - If you use text IDs instead of plain text, change the default call to - \c qsTrId(). Select \uicontrol Tools > \uicontrol Options > - \uicontrol {Qt Quick} > \uicontrol {Qt Quick Designer}, and then select the - \uicontrol {qsTrId()} radio button in the \uicontrol Internationalization - group. For more information about text ID based translations, see - \l {Qt Linguist Manual: Text ID Based Translations}. - - To preserve the context when editing the text or to change the context - by setting a binding on the text property, change the default call to - \c qsTranslate() by selecting the \uicontrol {qsTranslate()} radio button. - - For more information, see - \l {Internationalization and Localization with Qt Quick}. - - \if defined(qtcreator) - When you \l{Creating Qt Quick Projects}{create a new project}, you can - automatically generate a translation source file (TS) for one language. - You can add other languages later by editing the project file. - \endif - \section1 Specifying Developer Properties - In the \uicontrol Advanced tab of the \uicontrol Properties view, you can - manage the more advanced properties of components that are based on the - \l Item component and that are mostly used by application developers. + In the \uicontrol Advanced and \uicontrol Layer sections of the + \uicontrol Properties view, you can manage the more advanced + properties of components that are inherited from the \l Item + component and that are mostly used by application developers. + + \image qtquick-properties-advanced.png "Advanced section in Properties" Select the \uicontrol Smooth check box to activate smooth sampling. Smooth sampling is performed using linear interpolation, while non-smooth sampling is performed using the nearest neighbor. Because smooth sampling has minimal impact on performance, it is activated by default. + Antialiasing is used to make curved lines smoother on the screen. Select + the \uicontrol Antialising check box to turn on antialiasing. + The value of the \uicontrol {Baseline offset} specifies the position of the component's baseline in local coordinates. The baseline of a \l Text component is the imaginary line on which the text sits. Controls containing @@ -316,7 +306,7 @@ behavior, unless you explicitly set this value for them. You can enable the \uicontrol Focus check box to specify that the component - has active focus and the \uicontrol {Active focus on tab} check box to add + has active focus and the \uicontrol {Focus on tab} check box to add the component to the \e {tab focus chain}. The tab focus chain traverses components by first visiting the parent, and then its children in the order they are defined. Pressing \key Tab on a component in the tab focus chain @@ -351,7 +341,7 @@ Components are normally rendered directly into the window they belong to. However, by selecting the \uicontrol Enabled check box in the - \uicontrol Layer group, you can delegate the component and its entire subtree + \uicontrol Layer section, you can delegate the component and its entire subtree into an offscreen surface. Only the offscreen surface, a texture, will then be drawn into the window. For more information, see \l{Item Layers}. @@ -397,9 +387,9 @@ The component will use linear interpolation for scaling if the \uicontrol Smooth check box is selected. To use a mipmap for downsampling, select the \uicontrol Mipmap check box. Mipmapping may improve the visual - quality of downscaled components. For mipmapping of single Image components, - select the \uicontrol Mipmap check box in the \l{Images}{image properties}, - instead. + quality of downscaled components. For mipmapping of single \uicontrol Image + components, select the \uicontrol Mipmap check box in the \l{Images} + {image properties}, instead. To use a texture with a size different from that of the component, specify the width and height of the texture in the \uicontrol {Texture size} field. diff --git a/doc/qtcreator/src/qtquick/qtquick-ui-forms.qdoc b/doc/qtcreator/src/qtquick/qtquick-ui-forms.qdoc index 16bcb47ea13..9d133b3c097 100644 --- a/doc/qtcreator/src/qtquick/qtquick-ui-forms.qdoc +++ b/doc/qtcreator/src/qtquick/qtquick-ui-forms.qdoc @@ -184,7 +184,7 @@ \endcode The property alias exports the button to the code that uses the form. - You can use the \inlineimage export_unchecked.png + You can use the \inlineimage icons/alias.png (\uicontrol Export) button in \l Navigator to export a component as a property: diff --git a/doc/qtdesignstudio/src/qtdesignstudio-app-flows.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-app-flows.qdoc index f66f4b29c2f..62be3301a8a 100644 --- a/doc/qtdesignstudio/src/qtdesignstudio-app-flows.qdoc +++ b/doc/qtdesignstudio/src/qtdesignstudio-app-flows.qdoc @@ -151,7 +151,7 @@ In the \uicontrol Layout tab, you can use \l{Setting Anchors and Margins} {anchors} to position the component. - In the \uicontrol Advanced tab, you can manage the more + In the \uicontrol Advanced section, you can manage the more \l{Specifying Developer Properties}{advanced properties} of components. */ @@ -233,7 +233,7 @@ In the \uicontrol Layout tab, you can use \l{Setting Anchors and Margins} {anchors} to position the component. - In the \uicontrol Advanced tab, you can manage the more + In the \uicontrol Advanced section, you can manage the more \l{Specifying Developer Properties}{advanced properties} of components. */ @@ -305,7 +305,7 @@ In the \uicontrol Layout tab, you can use \l{Setting Anchors and Margins} {anchors} to position the component. - In the \uicontrol Advanced tab, you can manage the more + In the \uicontrol Advanced section, you can manage the more \l{Specifying Developer Properties}{advanced properties} of components. \section1 Flow Action Area Properties