diff --git a/dist/changes-4.13.2.md b/dist/changes-4.13.2.md new file mode 100644 index 00000000000..051923846fe --- /dev/null +++ b/dist/changes-4.13.2.md @@ -0,0 +1,72 @@ +Qt Creator 4.13.2 +================= + +Qt Creator version 4.13.2 contains bug fixes. + +The most important changes are listed in this document. For a complete +list of changes, see the Git log for the Qt Creator sources that +you can check out from the public Git repository. For example: + + git clone git://code.qt.io/qt-creator/qt-creator.git + git log --cherry-pick --pretty=oneline origin/v4.13.1..v4.13.2 + +Editing +------- + +* Fixed annotation color for dark themes (QTCREATORBUG-24644) + +Projects +-------- + +* Fixed missing removal of replacement kits (QTCREATORBUG-24589) +* Fixed issues with newlines in output windows (QTCREATORBUG-24668) + +### qmake + +* Fixed crash when parsing projects (QTCREATORBUG-23504) +* Fixed crash when re-parsing project (QTCREATORBUG-24683) + +### Python + +* Fixed working directory for run configurations (QTCREATORBUG-24440) + +Qt Quick Designer +----------------- + +* Improved connection editor dialog (QDS-2498, QDS-2495, QDS-2496) +* Fixed list model editing (QDS-2696) +* Fixed state editor updating (QDS-2798) + +Test Integration +---------------- + +### Catch2 + +* Fixed file information on Windows with CMake + +Platforms +--------- + +### Web Assembly + +* Fixed missing C toolchains + +Credits for these changes go to: +-------------------------------- +Aleksei German +Alessandro Portale +Christian Kandeler +Christian Stenger +Corey Pendleton +David Schulz +Eike Ziller +Fawzi Mohamed +Henning Gruendl +Jacek Nijaki +Johanna Vanhatapio +Kai Köhne +Leena Miettinen +Lukasz Ornatek +Marco Bubke +Thomas Hartmann +Venugopal Shivashankar diff --git a/doc/qtcreator/images/qmldesigner-element-properties.png b/doc/qtcreator/images/qmldesigner-element-properties.png index 18239bdf41f..84d289378ed 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/qtquick-designer-color-picker.png b/doc/qtcreator/images/qtquick-designer-color-picker.png index 541a8a9cac0..d5fe52a64fe 100644 Binary files a/doc/qtcreator/images/qtquick-designer-color-picker.png and b/doc/qtcreator/images/qtquick-designer-color-picker.png differ diff --git a/doc/qtcreator/images/qtquick-item-properties-advanced.png b/doc/qtcreator/images/qtquick-item-properties-advanced.png new file mode 100644 index 00000000000..cd9fce22cba Binary files /dev/null and b/doc/qtcreator/images/qtquick-item-properties-advanced.png differ diff --git a/doc/qtcreator/images/qtquick-item-properties-common.png b/doc/qtcreator/images/qtquick-item-properties-common.png new file mode 100644 index 00000000000..980fef5ea4f Binary files /dev/null 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 new file mode 100644 index 00000000000..d01df21087c Binary files /dev/null and b/doc/qtcreator/images/qtquick-item-properties-layer.png differ diff --git a/doc/qtcreator/src/qtcreator-toc.qdoc b/doc/qtcreator/src/qtcreator-toc.qdoc index debfa4cda10..6f647cbf81f 100644 --- a/doc/qtcreator/src/qtcreator-toc.qdoc +++ b/doc/qtcreator/src/qtcreator-toc.qdoc @@ -104,6 +104,7 @@ \li \l{Specifying Item Properties} \li \l{Using Custom Fonts} \li \l{Annotating Designs} + \li \l{Loading Placeholder Data} \li \l{Qt Quick UI Forms} \endlist \li \l {Adding Dynamics} diff --git a/doc/qtcreator/src/qtquick/qtquick-annotations.qdoc b/doc/qtcreator/src/qtquick/qtquick-annotations.qdoc index 415a99e10ea..526cc001f9c 100644 --- a/doc/qtcreator/src/qtquick/qtquick-annotations.qdoc +++ b/doc/qtcreator/src/qtquick/qtquick-annotations.qdoc @@ -26,7 +26,11 @@ /*! \page qtquick-annotations.html \previouspage qtquick-fonts.html + \if defined(qtdesignstudio) \nextpage creator-quick-ui-forms.html + \else + \nextpage qtquick-placeholder-data.html + \endif \title Annotating Designs diff --git a/doc/qtcreator/src/qtquick/qtquick-placeholder-data.qdoc b/doc/qtcreator/src/qtquick/qtquick-placeholder-data.qdoc new file mode 100644 index 00000000000..b620a6e57b0 --- /dev/null +++ b/doc/qtcreator/src/qtquick/qtquick-placeholder-data.qdoc @@ -0,0 +1,123 @@ +/**************************************************************************** +** +** Copyright (C) 2020 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-placeholder-data.html + \if defined(qtdesignstudio) + \previouspage studio-simulation-overview.html + \nextpage studio-javascript.html + \else + \previouspage qtquick-annotations.html + \nextpage creator-quick-ui-forms.html + \endif + + \title Loading Placeholder Data + + The Design mode supports views, models, and delegates, so that when you add + a Grid View, List View, or Path View item, the ListModel and the delegate + item are added automatically. + + However, the missing context of the application presents a challenge. + Specific models defined in C++ are the most obvious case. Often, + the context is missing simple properties, which are either defined in C++, + or in other QML files. A typical example is an item that uses the + properties of its parent, such as \c parent.width. + + \section1 Using Dummy Models + + If you open a file in the Design mode that references a C++ model, you see + nothing on the canvas. If the data in the model is fetched from the + internet, you have no control over it. To get reliable data, \e {dummy data} + was introduced. + + For example, the following code snippet describes the file example.qml that + contains a ListView that in turn specifies a C++ model: + + \qml + ListView { + model: dataModel + delegate: ContactDelegate { + name: name + } + } + \endqml + + Create a directory named \e dummydata in the root directory of the project, + so that it is not deployed to the device. In the \c dummydata directory, + create a QML file that has the same name as the value of \c model: + + \code + qml/exampleapp/example.qml + dummydata/dataModel.qml + \endcode + + Then create the dataModel.qml file that contains the dummy data: + + \qml + import QtQuick 2.0 + + ListModel { + ListElement { + name: "Ariane" + } + ListElement { + name: "Bella" + } + ListElement { + name: "Corinna" + } + } + \endqml + + \section1 Creating Dummy Context + + The following example presents a common pattern in QML: + + \qml + Item { + width: parent.width + height: parent.height + } + \endqml + + This works nicely for applications but the Design mode displays a zero-sized + item. A parent for the opened file does not exist, because the context is + missing. To get around the missing context, the idea of a \e {dummy + context} is introduced. If you place a file with the same name as the + application (here, example.qml) in the \c {dummydata/context} directory, + you can fake a parent context: + + \qml + import QtQuick 2.0 + import QmlDesigner 1.0 + + DummyContextObject { + parent: Item { + width: 640 + height: 300 + } + } + \endqml +*/ diff --git a/doc/qtcreator/src/qtquick/qtquick-properties.qdoc b/doc/qtcreator/src/qtquick/qtquick-properties.qdoc index b356ac9633b..02bb87582a5 100644 --- a/doc/qtcreator/src/qtquick/qtquick-properties.qdoc +++ b/doc/qtcreator/src/qtquick/qtquick-properties.qdoc @@ -32,27 +32,16 @@ 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 type, id, position, - size, and visibility. + properties that are common to all QML types, such as type name, id, + position, size, and visibility. + + \image qtquick-item-properties-common.png "Basic item properties" 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 - - 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. + \image qmldesigner-element-properties.png "Rectangle and Text properties" To modify the values of common properties of multiple items simultaneously, select the items in the \uicontrol Navigator or on the canvas: @@ -149,6 +138,9 @@ You can use either a solid color (3) or a gradient (4). You can select the gradient in the \uicontrol {Gradient Picker} (5). + The gradient stops (6) specify the color used at a given position in a + gradient. Drag them along the slider to set their values. + The \uicontrol Original field displays the original color of the item, whereas the \uicontrol New field displays the current color. The \uicontrol Recent field displays the colors that you have last selected. @@ -203,102 +195,234 @@ You can add other languages later by editing the project file. \endif - \section1 Loading Placeholder Data + \section1 Specifying Basic Item Properties - The Design mode supports views, models, and delegates, so that when you add - a Grid View, List View, or Path View item, the ListModel and the delegate - item are added automatically. + All QML types share a set of properties that you can specify in + \uicontrol Properties. - However, the missing context of the application presents a challenge. - Specific models defined in C++ are the most obvious case. Often, - the context is missing simple properties, which are either defined in C++, - or in other QML files. A typical example is an item that uses the - properties of its parent, such as \c parent.width. + \image qtquick-item-properties-common.png "Basic item properties" - \section2 Using Dummy Models + \section2 Type - If you open a file in the Design mode that references a C++ model, you see - nothing on - the canvas. If the data in the model is fetched from the internet, you have - no control over it. To get reliable data, \e {dummy data} was introduced. + 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 and entering the name of another QML type in the + field. - For example, the following code snippet describes the file example.qml that - contains a ListView that in turn specifies a C++ model: + 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. - \qml - ListView { - model: dataModel - delegate: ContactDelegate { - name: name - } - } - \endqml + \section2 Id - Create a directory named \e dummydata in the root directory of the project, - so that it is not deployed to the device. In the \c dummydata directory, - create a QML file that has the same name as the value of \c model: + Each QML type and each instance of a QML type has an \e id that uniquely + identifies it and enables other items' properties to be bound to it. + You can specify ids for items in the \uicontrol Id field. - \code - qml/exampleapp/example.qml - dummydata/dataModel.qml - \endcode + An id must be unique, it must begin with a lower-case letter or an + underscore character, and it can contain only letters, numbers, and + underscore characters. - Then create the dataModel.qml file that contains the dummy data: + For more information, see \l{The id Attribute}. - \qml - import QtQuick 2.0 + The value of the \uicontrol {Custom id} field specifies the name of an + \l{Annotating Designs}{annotation}. - ListModel { - ListElement { - name: "Ariane" - } - ListElement { - name: "Bella" - } - ListElement { - name: "Corinna" - } - } - \endqml + \section2 Geometry - \section2 Creating Dummy Context + In the \uicontrol Position group, you can set the position of an item on + the x and y axis. - The following example presents a common pattern in QML: + The z position of an item determines its position in relation to its + sibling items in the type hierarchy. You can set it in the \uicontrol Z + field in the \uicontrol Advanced tab. However, you would typically set + it in \uicontrol Navigator by \l{Setting the Stacking Order} + {setting the stacking order} of items. - \qml - Item { - width: parent.width - height: parent.height - } - \endqml + In the \uicontrol Size group, you can set the width and height of + an item. You can also use selection handles to \l{Resizing Items} + {resize items} in \uicontrol {Form Editor}. The values in the + \uicontrol X and \uicontrol Y fields change accordingly. - This works nicely for applications but the Design mode displays a zero-sized - item. A parent for the opened file does not exist, because the context is - missing. To get around the missing context, the idea of a \e {dummy - context} is introduced. If you place a file with the same name as the - application (here, example.qml) in the \c {dummydata/context} directory, - you can fake a parent context: + The item size and position can also be managed automatically + when \l{Using Layouts}{using layouts}. - \qml - import QtQuick 2.0 - import QmlDesigner 1.0 + The width and height of the root item in a QML file determine the + size of a component. The component size might also be zero (0,0) + if its final size is determined by property bindings. For more + information, see \l {Previewing Component Size}. - DummyContextObject { - parent: Item { - width: 640 - height: 300 - } - } - \endqml + \section2 Visibility - \section1 Building Transformations on Items + You can use the properties in the \uicontrol Visibility group to show and + hide items. - The \uicontrol Advanced tab allows you to configure advanced - transformations, such as rotation, scale, and translation. You - can assign any number of transformations to an item. Each - transformation is applied in order, one at a time. + Deselect the \uicontrol {Is visible} check box to hide an item and all its + child items, 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. - For more information on Transform types, see \l{Transform}. + If this property is disabled, the item will no longer receive mouse events, + but will continue to receive key events and will retain the keyboard focus + if it has been set by selecting the \uicontrol Enabled check box in the + \uicontrol Advanced tab. + + 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 item + moves off-screen, or if the opacity changes to 0. + + In the \uicontrol Opacity field, specify the opacity of an item as a number + between 0.0 (fully transparent) and 1.0 (fully opaque). The specified + opacity is also applied individually to child items, sometimes with + surprising effects. + + Changing an item's opacity does not affect whether the item receives user + input events. + + You can \l{Creating Animations}{animate} the opacity value to make items + fade in and out. + + If the \uicontrol Clip check box is selected, the item and its children are + clipped to the bounding rectangle of the item. + + \section1 Managing 2D Transformations + + You can assign any number of transformations, such as rotation and scaling, + to an item 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 item 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. + + \section1 Specifying Developer Properties + + In the \uicontrol Advanced tab of the \uicontrol Properties view, you can + manage the more advanced properties of QML types that are based on the + \l Item type and are mostly used by application developers. + + 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. + + The value of the \uicontrol {Baseline offset} specifies the position of the + item's baseline in local coordinates. The baseline of a Text item is the + imaginary line on which the text sits. Controls containing text usually set + their baseline to the baseline of their text. For non-text items, a default + baseline offset of 0 is used. + + \section2 Managing Mouse and Keyboard Events + + Select the \uicontrol Enabled check box to allow the item to receive mouse + and keyboard events. The children of the item inherit this behavior, unless + you explicitly set this value for them. + + You can enable the \uicontrol Focus check box to specify that the item has + active focus and the \uicontrol {Active focus on tab} check box to add the + item to the \e {tab focus chain}. The tab focus chain traverses elements by + first visiting the parent, and then its children in the order they are + defined. Pressing \key Tab on an item in the tab focus chain moves + keyboard focus to the next item in the chain. Pressing back tab (usually, + \key {Shift+Tab}) moves focus to the previous item. + + \section2 Using Layers + + Qt Quick 2 makes use of a dedicated scene graph that is then traversed and + rendered via a graphics API such as OpenGL ES, OpenGL, Vulkan, Metal, or + Direct 3D. Using a scene graph for graphics rather than the traditional + imperative painting systems, means that the scene to be rendered can be + retained between frames and the complete set of primitives to render is + known before rendering starts. This opens up for a number of optimizations, + such as \l{Batching}{batch rendering} to minimize state changes and + discarding obscured primitives. + + For example, if a user-interface contains a list of ten items where each + item has a background color, an icon and a text. Using the traditional + drawing techniques, this would result in 30 draw calls and a similar + amount of state changes. A scene graph, on the other hand, could reorganize + the primitives to render such that all backgrounds are drawn in one call, + then all icons, then all the text, reducing the total amount of draw calls + to only 3. Batching and state change reduction like this can greatly + improve performance on some hardware. + + You need a basic understanding of how items are rendered in QML + to be able to set layer properties. Rendering is described in + \l {Qt Quick Scene Graph Default Renderer}. + + \image qtquick-item-properties-layer.png "Layer properties" + + Items 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 item 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}. + + When layering is enabled, you can use the item directly as a texture, + in combination with the item you select in the \uicontrol Effect field. + Typically, this item should be a shader effect with a source texture + specified. You can use the effects in the \uicontrol Effects section + of \uicontrol Library that are based on the QML types in the + \l {Qt Graphical Effects} module. + + To enable the item to pass the layer's offscreen surface to the effect + correctly, the \uicontrol {Sampler name} field is set to the source + property of the texture. + + Note that when an item's layer is enabled, the scene graph will allocate + memory in the GPU equal to width x height x 4. In memory constrained + configurations, large layers should be used with care. Also, an item + using a layer cannot be batched during rendering. This means that a + scene with many layered items may have performance problems. + + By default, multisampling is enabled for the entire window if the scenegraph + renderer is in use and the underlying graphics API supports it. By setting + the value in the \uicontrol Samples field, you can request multisampling for + a part of the scene. This way, multisampling is applied only to a particular + subtree, which can lead to significant performance gain. Even then, enabling + multisampling can be potentially expensive regardless of the layer's size, + as it incurs a hardware and driver dependent performance and memory cost. If + support for multisample renderbuffers and framebuffer blits is not + available, the value is silently ignored. + + The value of the \uicontrol Format field specifies the internal OpenGL + format of the texture. Depending on the OpenGL implementation, it might + allow you to save some texture memory. However, use the \uicontrol RGB + and \uicontrol Alpha values with caution, because the underlying hardware + and driver might not support them. + + In the \uicontrol {Texture mirroring} field, specify whether the generated + OpenGL texture should be mirrored by flipping it along the x or y axis. + Custom mirroring can be useful if the generated texture is directly accessed + by custom shaders. If no effect is specified for the layered item, mirroring + has no effect on the UI representation of the item. + + The item 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 items. For mipmapping of single Image items, select the + \uicontrol Mipmap check box in the image properties, instead. + + To use a texture with a size different from that of the item, specify the + width and height of the texture in the \uicontrol {Texture size} field. + + The \uicontrol {Wrap mode} defines the OpenGL wrap modes associated with + the texture. You can clamp the texture to edges or repeat it horizontally + and vertically. Note that some OpenGL ES 2 implementations do not support + the \uicontrol Repeat wrap mode with non-power-of-two textures. \section1 Editing Properties Inline diff --git a/doc/qtcreator/src/qtquick/qtquick-ui-forms.qdoc b/doc/qtcreator/src/qtquick/qtquick-ui-forms.qdoc index 3d243c95713..b069337304b 100644 --- a/doc/qtcreator/src/qtquick/qtquick-ui-forms.qdoc +++ b/doc/qtcreator/src/qtquick/qtquick-ui-forms.qdoc @@ -31,7 +31,11 @@ /*! \page creator-quick-ui-forms.html + \if defined(qtdesignstudio) \previouspage qtquick-annotations.html + \else + \previouspage qtquick-placeholder-data.html + \endif \nextpage qtquick-adding-dynamics.html \title Qt Quick UI Forms diff --git a/doc/qtcreator/src/qtquick/qtquick-uis.qdoc b/doc/qtcreator/src/qtquick/qtquick-uis.qdoc index 3905fb06e68..74bc891d718 100644 --- a/doc/qtcreator/src/qtquick/qtquick-uis.qdoc +++ b/doc/qtcreator/src/qtquick/qtquick-uis.qdoc @@ -101,6 +101,15 @@ You can annotate your designs to provide reviewers or developers with additional information about them. + \if defined(qtcreator) + \li \l {Loading Placeholder Data} + + You can create QML files that contain placeholder data, so that + you can test grid, list, or path views, even though you don't + have access to real data. + + \endif + \if defined(qtdesignstudio) \endlist diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-align-buttons.png b/doc/qtdesignstudio/examples/doc/images/loginui1-align-buttons.png index 1e64ec1b1b3..890bf0ce9fe 100644 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui1-align-buttons.png and b/doc/qtdesignstudio/examples/doc/images/loginui1-align-buttons.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-background-gradient.png b/doc/qtdesignstudio/examples/doc/images/loginui1-background-gradient.png new file mode 100644 index 00000000000..40564fbb14d Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/loginui1-background-gradient.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-binding-editor.png b/doc/qtdesignstudio/examples/doc/images/loginui1-binding-editor.png index abbf16e9913..1a053715c7d 100644 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui1-binding-editor.png and b/doc/qtdesignstudio/examples/doc/images/loginui1-binding-editor.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-button-styled.png b/doc/qtdesignstudio/examples/doc/images/loginui1-button-styled.png index 5adf709f57d..ee8545d6ffb 100644 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui1-button-styled.png and b/doc/qtdesignstudio/examples/doc/images/loginui1-button-styled.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-button.png b/doc/qtdesignstudio/examples/doc/images/loginui1-button.png index c0b0cc87d63..a765566fe19 100644 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui1-button.png and b/doc/qtdesignstudio/examples/doc/images/loginui1-button.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-image-properties.png b/doc/qtdesignstudio/examples/doc/images/loginui1-image-properties.png new file mode 100644 index 00000000000..5b7e5e3f683 Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/loginui1-image-properties.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-library-assets.png b/doc/qtdesignstudio/examples/doc/images/loginui1-library-assets.png new file mode 100644 index 00000000000..b91d698607c Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/loginui1-library-assets.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-library.png b/doc/qtdesignstudio/examples/doc/images/loginui1-library.png index 1183e572cd3..6df32f79028 100644 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui1-library.png and b/doc/qtdesignstudio/examples/doc/images/loginui1-library.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-main-page.png b/doc/qtdesignstudio/examples/doc/images/loginui1-main-page.png index 06998bdd51c..0cd1558c106 100644 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui1-main-page.png and b/doc/qtdesignstudio/examples/doc/images/loginui1-main-page.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-project-files.png b/doc/qtdesignstudio/examples/doc/images/loginui1-project-files.png index 43a561c54e1..bdf136b3f5e 100644 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui1-project-files.png and b/doc/qtdesignstudio/examples/doc/images/loginui1-project-files.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-ready.png b/doc/qtdesignstudio/examples/doc/images/loginui1-ready.png index 472dec3001f..d02864703e9 100644 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui1-ready.png and b/doc/qtdesignstudio/examples/doc/images/loginui1-ready.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-text-properties.png b/doc/qtdesignstudio/examples/doc/images/loginui1-text-properties.png new file mode 100644 index 00000000000..95529fc5007 Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/loginui1-text-properties.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1.png b/doc/qtdesignstudio/examples/doc/images/loginui1.png index 4971673531c..541e8d9b9dc 100644 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui1.png and b/doc/qtdesignstudio/examples/doc/images/loginui1.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui2-column-properties.png b/doc/qtdesignstudio/examples/doc/images/loginui2-column-properties.png index 26444afef60..792725e390f 100644 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui2-column-properties.png and b/doc/qtdesignstudio/examples/doc/images/loginui2-column-properties.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui2-field-properties.png b/doc/qtdesignstudio/examples/doc/images/loginui2-field-properties.png index cd41dfbe329..f459cb2ae56 100644 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui2-field-properties.png and b/doc/qtdesignstudio/examples/doc/images/loginui2-field-properties.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui2-loginpage-ready.png b/doc/qtdesignstudio/examples/doc/images/loginui2-loginpage-ready.png index af692bf74e5..d0bf47b5ad9 100644 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui2-loginpage-ready.png and b/doc/qtdesignstudio/examples/doc/images/loginui2-loginpage-ready.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui2-loginpage.png b/doc/qtdesignstudio/examples/doc/images/loginui2-loginpage.png index 0381935b0d7..e75a93ddbdd 100644 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui2-loginpage.png and b/doc/qtdesignstudio/examples/doc/images/loginui2-loginpage.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui2.png b/doc/qtdesignstudio/examples/doc/images/loginui2.png index 40fae287d4e..85025cbf7b4 100644 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui2.png and b/doc/qtdesignstudio/examples/doc/images/loginui2.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui3-base-state.png b/doc/qtdesignstudio/examples/doc/images/loginui3-base-state.png index 2966ea70610..202f310d608 100644 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui3-base-state.png and b/doc/qtdesignstudio/examples/doc/images/loginui3-base-state.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui3-connections.png b/doc/qtdesignstudio/examples/doc/images/loginui3-connections.png index 783065d3f4a..81886e475b3 100644 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui3-connections.png and b/doc/qtdesignstudio/examples/doc/images/loginui3-connections.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui3-login-state.png b/doc/qtdesignstudio/examples/doc/images/loginui3-login-state.png index d738ed3f0fb..fe00720aabc 100644 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui3-login-state.png and b/doc/qtdesignstudio/examples/doc/images/loginui3-login-state.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui3-states.png b/doc/qtdesignstudio/examples/doc/images/loginui3-states.png index 372c60d6b0b..34374504e8d 100644 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui3-states.png and b/doc/qtdesignstudio/examples/doc/images/loginui3-states.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui3-visibility.png b/doc/qtdesignstudio/examples/doc/images/loginui3-visibility.png index 858c9599427..3b51e10d12d 100644 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui3-visibility.png and b/doc/qtdesignstudio/examples/doc/images/loginui3-visibility.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui3.gif b/doc/qtdesignstudio/examples/doc/images/loginui3.gif index f3380d90786..3e4c321e8a5 100644 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui3.gif and b/doc/qtdesignstudio/examples/doc/images/loginui3.gif differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui4-easing-curve.png b/doc/qtdesignstudio/examples/doc/images/loginui4-easing-curve.png index 8a1eb963adc..3963443bd1b 100644 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui4-easing-curve.png and b/doc/qtdesignstudio/examples/doc/images/loginui4-easing-curve.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui4-page.png b/doc/qtdesignstudio/examples/doc/images/loginui4-page.png index 70238a8b85b..2743c56b713 100644 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui4-page.png and b/doc/qtdesignstudio/examples/doc/images/loginui4-page.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-opacity.png b/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-opacity.png index de5346276a3..c1eda5a125e 100644 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-opacity.png and b/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-opacity.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-settings-states.png b/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-settings-states.png index 6085894bf96..6e830752a6b 100644 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-settings-states.png and b/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-settings-states.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-settings.png b/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-settings.png index d1affa8d8ca..38dbb31de74 100644 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-settings.png and b/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-settings.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui4-timeline.png b/doc/qtdesignstudio/examples/doc/images/loginui4-timeline.png index e983c6f42e9..a9fa47c4381 100644 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui4-timeline.png and b/doc/qtdesignstudio/examples/doc/images/loginui4-timeline.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/loginui4.gif b/doc/qtdesignstudio/examples/doc/images/loginui4.gif index 0d519730915..9a28af1fdca 100644 Binary files a/doc/qtdesignstudio/examples/doc/images/loginui4.gif and b/doc/qtdesignstudio/examples/doc/images/loginui4.gif differ diff --git a/doc/qtdesignstudio/examples/doc/loginui1.qdoc b/doc/qtdesignstudio/examples/doc/loginui1.qdoc index 1f5ab9aa2c4..53e76feb661 100644 --- a/doc/qtdesignstudio/examples/doc/loginui1.qdoc +++ b/doc/qtdesignstudio/examples/doc/loginui1.qdoc @@ -58,12 +58,18 @@ \li Select \uicontrol File > \uicontrol {New File or Project} > \uicontrol General > \uicontrol {Qt Quick Application - Empty} > \uicontrol Choose. - \li In the \uicontrol Name field, enter \e {loginui1}. - \li In the \uicontrol {Create in} field, enter the path for the project - files + \li In the \uicontrol Name field, enter the project name: \e {loginui1}. + When naming your own projects, keep in mind that they cannot be + easily renamed later. + \li In the \uicontrol {Create in} field, enter the path to the folder + where you want to store the project files. You can move project + folders later without problems. \li Select \uicontrol Next (or \uicontrol Continue on \macos) to continue to the \uicontrol {Define Project Details} page. - \li In the \uicontrol {Screen resolution} field, select \e {640 x 480}. + \li In the \uicontrol {Screen resolution} field, select the initial + size of the UI. In this example, we use the smallest predefined + size, \e {640 x 480}. You can easily change the screen size later + in \uicontrol Properties. \li Select \uicontrol Finish (or \uicontrol Done on \macos) to create the project. \endlist @@ -113,15 +119,22 @@ For more information about creating a QML file from scratch, see \l{First Steps with QML}. - Next, you will edit the properties of the UI elements to create the main - page of the UI. + Next, you will edit the values of the properties of the UI elements to + create the main page of the UI. \section1 Creating the Main Page - You will now change the properties of the \l Rectangle type to turn the UI - background white and those of the \l Text type to change the text and to use - a larger font size. In addition, you will use the \l Image type to add the - Qt logo to the page. + You will now change the values of the properties of the \l Rectangle + component to add a gradient to the UI background and those of the + \l Text component to set the title text in a larger strong font. In + addition, you will import an image as an asset and add it to the page. + + To be able to use an image in the UI, you must add it to your project + in the \uicontrol Assets tab of \uicontrol Library. Click + \l {https://doc.qt.io/qtdesignstudio/images/used-in-examples/loginui1/qt_logo_green_64x64px.png} + {here} to open the Qt logo in a browser and save it as a file on your + computer. The image is only used for decoration, so you can also use + any other image or just leave it out. To preview the changes that you make to the UI while you make them, select the \inlineimage live_preview.png @@ -142,25 +155,35 @@ \li Select \e Rectangle in the \uicontrol Navigator view to display its properties in \uicontrol Properties. \li In the \uicontrol Color field, select the - \inlineimage icons/action-icon-binding.png - (\uicontrol Actions) menu, and then select \uicontrol Reset to - reset the rectangle background to the default color, white. - \li Select \e Text in \uicontrol Navigator. - \li In the \uicontrol id field, enter the id \e pageTitle. - \li In the \uicontrol Text field, enter \e {Qt Account}. - \li In the \uicontrol Font group, \uicontrol Size field, set the font - size to \e 24 pixels. - \li Drag and drop an \l Image type from \uicontrol Library > - \uicontrol {QML Types} > \uicontrol {Qt Quick Basic} to the - top-left corner of the rectangle. + \inlineimage icon_color_gradient.png + (\uicontrol Gradient) button to add a linear gradient to the + screen background. In this example, the color changes from + white to green (#41cd52), with a stop point set at position 0.5. + You can use your favorite colors or select a predefined gradient + in the \uicontrol {Gradient Picker}. + \image loginui1-background-gradient.png "Rectangle color properties" + \li Select \e Text in \uicontrol Navigator to display its properties in + \uicontrol Properties. + \image loginui1-text-properties.png "Text properties" + \list a + \li In the \uicontrol id field, enter the id \e pageTitle, + so that you can easily find the title component in + \uicontrol Navigator and other \QDS views. + \li In the \uicontrol Text field, enter the page title: + \e {Qt Account}. + \li In the \uicontrol Font group, \uicontrol Size field, + set the font size of the title: \e 24 pixels. + \li In the \uicontrol {Font style} field, select the + \uicontrol B button to use a strong font. + \endlist + \li Drag and drop the Qt logo from the \uicontrol Assets tab of + \uicontrol Library to the top-left corner of the rectangle. + \image loginui1-library-assets.png "Library view Assets tab" + \QDS automatically creates a component of the \l Image type + for you with the path to the image file set as the value of + the \uicontrol Source field in \uicontrol Properties. + \image loginui1-image-properties.png "Image properties" \li In the \uicontrol id field, change the id of the image to \e logo. - \li In the \uicontrol Source field, select the \inlineimage browse-button.png - (\uicontrol Browse) button to locate the Qt logo image file. Click - \l {https://doc.qt.io/qtdesignstudio/images/used-in-examples/loginui1/qt_logo_green_64x64px.png} - {here} to open the Qt logo in a browser and save it as a file in the - folder where you created the project. The image is only used for - decoration, so you can also use any other image or just leave it - out. \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S} to save your changes. \endlist @@ -189,9 +212,53 @@ types, and they will be listed under \uicontrol {My QML Components}. This section is only visible if you have created custom QML components. - For more information about the \l Rectangle and \l Image types used in this - example, see \l{Use Case - Visual Elements In QML}. For descriptions of all - QML types, see \l{All QML Types} in the Qt reference documentation. + The \l [QtQuick] {Rectangle}, \l Text, and \l Image types used in this example are + based on the \l Item type. It is the base type for all visual elements, + with implementation of basic functions and properties, such as type + name, ID, position, size, and visibility. + + For more information, see \l{Use Case - Visual Elements In QML}. For + descriptions of all QML types, see \l{All QML Types} in the Qt reference + documentation. + + \section3 Regtangle Properties + + The basic \l [QtQuick] {Rectangle} QML type is used for drawing shapes + with 4 sides and 4 corners. You can fill rectangles either with a solid + fill color or a gradient. You can specify the border color separately. + By setting the value of the radius property, you can create shapes with + rounded corners. + + If you want to specify the radius of each corner separately, you can + use the \l Rectangle type from the Qt Quick Studio Components module + instead of the basic rectangle type. It is available in the + \uicontrol {Studio Components} tab of \uicontrol Library. + + \section3 Text Properties + + The \l Text type is used for adding static text to the UI, such as titles + and labels. You can select the font to use and specify extensive properties + for each text item, such as size in points or pixels, weight, style, and + spacing. + + To display custom fonts in the list of available fonts in + \uicontrol Properties, add them in the \uicontrol Assets + tab of \uicontrol Library. + + If you want to create a label with a background, use the \l Label type + from the Qt Quick Controls module instead of the Text type. + + \section3 Image Properties + + The \l Image type is used for adding images to the UI in several supported + formats, including bitmap formats such as PNG and JPEG and vector graphics + formats such as SVG. You must add the images to your project in the + \uicontrol Assets tab of \uicontrol Library to be able to use them in + designs. + + If you need to display animated images, use the \l {AnimatedImage} + {Animated Image} type, also available in the \uicontrol {Qt Quick - Basic} + tab of \uicontrol Library. \section1 Creating a Push Button @@ -201,9 +268,11 @@ drag and drop it to \uicontrol {Form Editor} and modify its properties in \uicontrol Properties to change its appearance and functionality. - If you find that you cannot use the wizard template to create the kind of - push button that you want, you can create your button from scratch using - basic QML types. For more information, see \l {Creating Buttons} and + If you find that you cannot use the wizard template nor the ready-made + button controls available in the \uicontrol {Qt Quick Controls 2} tab + in \uicontrol Library to create the kind of push button that you want, + you can create your button from scratch using basic QML types. For more + information, see \l {Creating Buttons} and \l {Creating Scalable Buttons and Borders}. To create a push button: @@ -212,7 +281,8 @@ \li Select \uicontrol File > \uicontrol {New File or Project} > \uicontrol {Files and Classes} > \uicontrol {Qt Quick Controls} > \uicontrol {Custom Button} > \uicontrol Choose. - \li In the \uicontrol {Component name} field, enter \e {PushButton}. + \li In the \uicontrol {Component name} field, enter a name for your + button type: \e {PushButton}. \li Select \uicontrol Finish (or \uicontrol Done on \macos) to create the button. \endlist @@ -269,24 +339,22 @@ properties in the \uicontrol Properties view. \li In the \uicontrol Color field, select \inlineimage icons/action-icon.png - (\uicontrol Actions) > \uicontrol {Set Binding} and set the - button background color to \e #41cd52. - \li Press \key Enter or select \uicontrol OK to save the new value. + (\uicontrol Actions) > \uicontrol Reset to reset the button + background color to the default color, white. + \li In the \uicontrol {Border Color} field, select \uicontrol Actions > + \uicontrol {Set Binding} to use the gradient color (\e #41cd52) as + the border color. You can also use the color picker to change the + color. \image loginui1-binding-editor.png "Binding Editor" - \omit - \li In the \uicontrol {Border Color} field, set the button - border color to \e #21be2b. You could also use the color picker - to change the button color. - \li In the \uicontrol Radius field, enter 6 to give the button + \li Press \key Enter or select \uicontrol OK to save the new value. + \li In the \uicontrol Radius field, enter 20 to give the button rounded corners. - \endomit \li Select the text item in \uicontrol Navigator to display its properties in \uicontrol Properties. - \li In the \uicontrol {Text color} field, set the button text - color to white (\e #ffffff). + \li In the \uicontrol {Font style} field, select the \uicontrol B button + to use the strong font. \li In the \uicontrol States view, select the \e down state to set the - button text color to white and the background color to a darker - shade of green (\e #21be2b). + button text color to the same green as the border. \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S} to save your changes. \endlist @@ -327,7 +395,7 @@ to open it in \uicontrol {Form Editor}. \li Drag and drop two instances of the PushButton type from \uicontrol Library to \uicontrol {Form Editor}. - \image loginui1-library.png "Library view" + \image loginui1-library.png "My QML Components tab of Library view" \li Select one of the buttons in \uicontrol Navigator to modify its id and text label in \uicontrol Properties. \li In the \uicontrol Id field, enter \e loginButton. diff --git a/doc/qtdesignstudio/examples/doc/loginui2.qdoc b/doc/qtdesignstudio/examples/doc/loginui2.qdoc index b1ed1e56029..10c43839d2e 100644 --- a/doc/qtdesignstudio/examples/doc/loginui2.qdoc +++ b/doc/qtdesignstudio/examples/doc/loginui2.qdoc @@ -1,6 +1,6 @@ /**************************************************************************** ** -** Copyright (C) 2019 The Qt Company Ltd. +** Copyright (C) 2020 The Qt Company Ltd. ** Contact: https://www.qt.io/licensing/ ** ** This file is part of the Qt Design Studio documentation. @@ -53,11 +53,9 @@ \section1 Anchoring UI Components - First, you will add a new rectangle to \uicontrol {Form Editor} and move - all the current UI components to it to create a new page. Then, you will - \l {Setting Anchors and Margins}{anchor} the static elements on the - page, that is the logo image (\e logo) and page title (\e pageTitle), to the - page. When you created the project using the new project wizard template + First, you will \l {Setting Anchors and Margins}{anchor} the static page + elements, logo image (\e logo) and page title (\e pageTitle), to the page. + When you created the project using the new project wizard template in Part 1 of this example, the wizard template anchored \e pageTitle to the vertical and horizontal center of the page. Therefore, you will only need to replace the vertical anchor of \e pageTitle with a top anchor @@ -73,23 +71,11 @@ \list 1 \li Open \e {Screen01.ui.qml} for editing in the \uicontrol {Form Editor} view. - \li Select the rectangle that forms the UI background in the - \uicontrol Navigator view, and change its id to \e root in the - \uicontrol Properties view. - \li Drag and drop a \uicontrol Rectangle from the \uicontrol Library - view to \e root in \uicontrol Navigator, and change its id to - \e loginPage in \uicontrol Properties. - \li Under \uicontrol Layout, select the \inlineimage anchor-fill.png - (\uicontrol {Fill Parent Item}) button to anchor the page to the root - item on all sides. - \li Select all the other UI elements below \e root in - \uicontrol Navigator (press the \key Shift key for multiple - selection) and drag them to \e loginPage. \li Select \e logo in \uicontrol Navigator. \li Select the \inlineimage anchor-top.png (\uicontrol Top) and \inlineimage anchor-left.png (\uicontrol Left) anchor buttons to anchor \e logo to the top left - corner of its parent (\e loginPage) with 10-pixel margins. + corner of its parent with 10-pixel margins. \li Select \e pageTitle in \uicontrol Navigator. \li Deselect the \inlineimage anchor-vertical-center.png (\uicontrol {Vertical Center}) button to remove the @@ -132,26 +118,33 @@ \uicontrol {+ \QtQuick.Controls} button to display the \l {Qt Quick Controls 2} types in the tab: \image loginui2-imports.png - \li Drag and drop two instances of the \uicontrol {Text Field} type - to \uicontrol {Form Editor}. + \li Drag and drop two instances of the \uicontrol {Text Field} + type from the \uicontrol {Qt Quick Controls 2} tab to + \uicontrol {Form Editor}. \li Select one of the text fields in \uicontrol Navigator, and change its id to \e usernameField in \uicontrol Properties. - \li In the \uicontrol Geometry group, \uicontrol Size field, set the - width of the field to \e 300 pixels. - \li In the \uicontrol Placeholder field, enter \e Username and select - \uicontrol tr to mark the text translatable. + \li In the \uicontrol Geometry group, \uicontrol Size field, + make the field wide enough to accommodate long user names + by setting its width to \e 300 pixels. + \li In the \uicontrol Placeholder field, set the text to display + inside the field before users type in it to \e Username + \li Select \uicontrol tr to mark the text translatable. \image loginui2-field-properties.png "Text field properties" \li Select the other text field, and change its id to \e passwordField, placeholder text to \e Password, and width to \e 300 pixels. \endlist + The Text Field type has additional properties that you can use to change + its appearance. For example, you can change the color, font, alignment, or + word and letter spacing of the placeholder text. + You will now position the fields and buttons as columns: \list 1 - \li Select \e usernameField and \e passwordField in - \uicontrol Navigator, and right-click on either item - to open a context menu. + \li Select \e usernameField and \e passwordField in \uicontrol Navigator + (press the \key Shift key for multiple selection), and right-click + either of them to open a context menu. \li Select \uicontrol Position > \uicontrol {Position in Column} to position the fields on top of each other in \uicontrol {Form Editor}. @@ -173,7 +166,7 @@ \li Select \e fieldColumn in \uicontrol Navigator. \li In \uicontrol Properties > \uicontrol Layout, select the \uicontrol Top button to anchor the top of the button column to - the top of its parent (the \e loginPage) with a 200-pixel margin. + the top of its parent with a 200-pixel margin. \li Select the \inlineimage anchor-horizontal-center.png (\uicontrol {Horizontal Center}) button to center the field column horizontally on the page. @@ -181,8 +174,7 @@ \li In \uicontrol Properties > \uicontrol Layout, select the \inlineimage anchor-bottom.png (\uicontrol Bottom) button to anchor the bottom of the button - column to the bottom of its parent (the \e loginPage) with a - 50-pixel margin. + column to the bottom of its parent with a 50-pixel margin. \li Select the \uicontrol {Horizontal Center} button to center the button column horizontally on the page. \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S} diff --git a/doc/qtdesignstudio/examples/doc/loginui3.qdoc b/doc/qtdesignstudio/examples/doc/loginui3.qdoc index ffdd0546c61..89535b184c0 100644 --- a/doc/qtdesignstudio/examples/doc/loginui3.qdoc +++ b/doc/qtdesignstudio/examples/doc/loginui3.qdoc @@ -38,7 +38,9 @@ \e{Log In UI - Part 3} is the third in a series of examples that build on each other to illustrate how to use \QDS to create a simple UI with some basic UI components, such as pages, buttons, and entry fields. Part 3 - describes how to use states to add a second page to the UI. + describes how to use \e states to add a second page to the UI. On the + first page, users can enter a username and password to log in. On the + second page, they can register if they do not already have an account. Because the second page will contain most of the same UI elements as the login page, you will use \e states to show and hide UI elements as necessary @@ -59,7 +61,7 @@ You will add another text field for verifying the password that users enter to create an account and a back button for returning to the login page. You are already familiar with the tasks in this section from Part 1 - of this example. + and Part 2 of this example. To preview the changes that you make to the UI while you make them, select the \inlineimage live_preview.png @@ -76,11 +78,12 @@ \li In \uicontrol Properties, change the id of the text field to \e verifyPasswordField. \li In the \uicontrol Geometry group, \uicontrol Size field, set the - width of the field to \e 300 pixels. + width of the field to \e 300 pixels to match the size of the + existing fields. \li In the \uicontrol Placeholder field, set the placeholder text to \e {Verify password} and mark the text translatable. \li Drag and drop a PushButton type from \uicontrol Library > - \uicontrol {My QML Components} to \e loginPage in + \uicontrol {My QML Components} to their parent rectangle in \uicontrol Navigator. \li Select the button in \uicontrol Navigator and change its id to \e backButton in \uicontrol Properties. @@ -92,8 +95,8 @@ \li Under \uicontrol Layout, select the \inlineimage anchor-top.png (\uicontrol Top) and \inlineimage anchor-right.png (\uicontrol Right) anchor buttons to anchor \e backButton to - the top right corner of its parent (the \e loginPage) with 20- - and 10-pixel margins, respectively. + the top right corner of its parent with 20- and 10-pixel margins, + respectively. \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S} to save your changes. \endlist @@ -111,7 +114,7 @@ \section1 Using States to Simulate Page Changes You will now add \l{Adding States}{states} to the UI to show and hide UI - components in the \uicontrol {Form Editor}: + components in the \uicontrol {Form Editor}, depending on the current page: \list 1 \li In the \uicontrol States view, select \uicontrol {Create New State}. @@ -122,7 +125,7 @@ \uicontrol Properties to hide the verify password field in the login state. \image loginui3-visibility.png - \li Repeat the above step for \e backButton. + \li Repeat the above step for \e backButton to hide it, too. \li In \uicontrol States, select \inlineimage icons/action-icon.png for \e loginState to open the \uicontrol Actions menu, and then select \uicontrol {Set as Default} to determine that \e loginState @@ -217,8 +220,8 @@ \section2 Learn Qt Quick - Signal and Event Handlers UI components need to communicate with each other. For example, a button - needs to know that the user has clicked on it. The button may change color - to indicate its state and perform an action. + needs to know that the user has clicked on it. In response, the button may + change color to indicate its state and perform an action. QML has a signal and handler mechanism, where the signal is the event that is responded to through a signal handler. When a signal is emitted, the diff --git a/doc/qtdesignstudio/examples/doc/loginui4.qdoc b/doc/qtdesignstudio/examples/doc/loginui4.qdoc index c057558d0c6..211364cd34c 100644 --- a/doc/qtdesignstudio/examples/doc/loginui4.qdoc +++ b/doc/qtdesignstudio/examples/doc/loginui4.qdoc @@ -86,15 +86,16 @@ (\uicontrol Close) button in \e loginState and \e registerState to remove the states. \li Select the fields in \e fieldColumn in \uicontrol Navigator - and drag and drop them to \e loginPage. + and drag and drop them to their parent rectangle to prepare for + deleting the column component. \li Select \e fieldColumn in \uicontrol Navigator and press \key Delete to delete it. \li Select \e usernameField in \uicontrol Navigator. \li In \uicontrol Properties > \uicontrol Layout, select the \inlineimage anchor-top.png (\uicontrol Top) button to anchor the top of the field to the top - of its parent (\e loginPage). \QDS will suggest an appropriate - margin based on the current Y-position of the field. + of its parent. \QDS will suggest an appropriate margin based on + the current position of the field on the y axis, 200 pixels. \li Select the \inlineimage anchor-horizontal-center.png (\uicontrol {Horizontal Center}) button to anchor the horizontal center of the field to that of its parent. @@ -112,7 +113,7 @@ to save your changes. \endlist - You could also animate the Y-position property of the verify password + You could also animate the y-position property of the verify password field for a similar effect. In that case, you would need to use absolute positioning for the field. This is less flexible if you export your design from a design tool, such as Adobe Photoshop, and decide to change @@ -168,15 +169,20 @@ \li In \uicontrol Properties > \uicontrol Opacity > \uicontrol Settings, select \uicontrol {Insert Keyframe} to insert a keyframe for the opacity property of the button. - \li Check that the playhead is in frame 0, and select the - \inlineimage recordfill.png - (Per Property Recording) button for the \uicontrol opacity property - of \e backButton to start recording property changes. + \li In \uicontrol Timeline, check that the playhead is in + frame 0, and select the \inlineimage recordfill.png + (\uicontrol {Per Property Recording}) button for the + \uicontrol opacity property of \e backButton to start + recording property changes. \image loginui4-timeline-opacity.png "Record button for the opacity property" \li In the field next to the opacity property name on that same line, type 0 to hide the button, and press \key Enter to save the value. \li Move the playhead to frame 1000 and change the opacity value to 1 to show the button. + + To fine-tune the value of a keyframe, you can also right-click the + keyframe marker \inlineimage keyframe_linear_inactive.png + , and select \uicontrol {Edit Keyframe}. \li Select the record button again to stop recording property changes. If you forget this, all the following changes will be recorded, and the results will be unpredictable. @@ -213,9 +219,10 @@ \li In the field next to the property, set a negative value for the top anchor margin, -40, to place \e verifyPasswordField on top of \e passwordField. - \li Move the playhead to frame 1000 and change the top anchor margin to - 5, so that \e verifyPasswordField appears to slide down and settle - below \e passwordField. + \li Move the playhead to frame 1000 and change the top anchor margin + to 5, so that, combined with the change in the opacity value, + \e verifyPasswordField appears to slide down and settle below + \e passwordField. \li Select the record button again to stop recording property changes. \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S} to save your changes. @@ -247,8 +254,8 @@ \image loginui4-timeline.png "Timeline view with the recorded property changes" - Next, you create states for the login and registration pages and bind them - to the animation settings. + Next, you'll create states for the login and registration pages and bind + them to the animation settings. \section1 Binding Animation to States diff --git a/doc/qtdesignstudio/examples/loginui1/PushButton.ui.qml b/doc/qtdesignstudio/examples/loginui1/PushButton.ui.qml index cdfd98b3ef4..118e83c5ed2 100644 --- a/doc/qtdesignstudio/examples/loginui1/PushButton.ui.qml +++ b/doc/qtdesignstudio/examples/loginui1/PushButton.ui.qml @@ -1,33 +1,75 @@ -import QtQuick 2.10 + +/**************************************************************************** +** +** Copyright (C) 2020 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Design Studio. +** +** $QT_BEGIN_LICENSE:BSD$ +** 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. +** +** BSD License Usage +** Alternatively, you may use this file under the terms of the BSD license +** as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of The Qt Company Ltd nor the names of its +** contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ +import QtQuick 2.15 import QtQuick.Templates 2.1 as T import loginui1 1.0 T.Button { id: control + width: 100 + height: 40 font: Constants.font implicitWidth: Math.max( - background ? background.implicitWidth : 0, - contentItem.implicitWidth + leftPadding + rightPadding) + buttonBackground ? buttonBackground.implicitWidth : 0, + textItem.implicitWidth + leftPadding + rightPadding) implicitHeight: Math.max( - background ? background.implicitHeight : 0, - contentItem.implicitHeight + topPadding + bottomPadding) + buttonBackground ? buttonBackground.implicitHeight : 0, + textItem.implicitHeight + topPadding + bottomPadding) leftPadding: 4 rightPadding: 4 text: "My Button" background: buttonBackground - Rectangle { - id: buttonBackground - color: "#41cd52" - implicitWidth: 100 - implicitHeight: 40 - opacity: enabled ? 1 : 0.3 - border.color: "gray" - border.width: 1 - radius: 2 - } contentItem: textItem Text { @@ -35,12 +77,24 @@ T.Button { text: control.text opacity: enabled ? 1.0 : 0.3 - color: "#fdfdfd" + color: "#020202" horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter + font.bold: true elide: Text.ElideRight } + Rectangle { + id: buttonBackground + implicitWidth: 100 + implicitHeight: 40 + opacity: enabled ? 1 : 0.3 + border.color: "#41cd52" + border.width: 1 + anchors.fill: parent + radius: 20 + } + states: [ State { name: "normal" @@ -54,12 +108,12 @@ T.Button { when: control.down PropertyChanges { target: textItem - color: "#fdfdfd" + color: "#41cd52" } PropertyChanges { target: buttonBackground - color: "#21be2b" - border.color: "black" + color: "#ffffff" + border.color: "#41cd52" } } ] diff --git a/doc/qtdesignstudio/examples/loginui1/Screen01.ui.qml b/doc/qtdesignstudio/examples/loginui1/Screen01.ui.qml index bdd37b0415f..590dcb58c4f 100644 --- a/doc/qtdesignstudio/examples/loginui1/Screen01.ui.qml +++ b/doc/qtdesignstudio/examples/loginui1/Screen01.ui.qml @@ -1,46 +1,109 @@ -import QtQuick 2.12 + +/**************************************************************************** +** +** Copyright (C) 2019 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Design Studio. +** +** $QT_BEGIN_LICENSE:BSD$ +** 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. +** +** BSD License Usage +** Alternatively, you may use this file under the terms of the BSD license +** as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of The Qt Company Ltd nor the names of its +** contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ +import QtQuick 2.15 import loginui1 1.0 +import QtQuick.Studio.Components 1.0 +import QtQuick.Controls 2.15 Rectangle { - width: Constants.width - height: Constants.height - color: "#fdfdfd" + color: "#ffffff" + gradient: Gradient { + GradientStop { + position: 0.5 + color: "#ffffff" + } + + GradientStop { + position: 1 + color: "#41cd52" + } + } Text { id: pageTitle + x: 273 + y: 33 text: qsTr("Qt Account") font.pixelSize: 24 - anchors.verticalCenterOffset: -153 - anchors.horizontalCenterOffset: 1 + font.bold: true + font.weight: Font.ExtraBold + anchors.verticalCenterOffset: -180 + anchors.horizontalCenterOffset: 0 anchors.centerIn: parent font.family: Constants.font.family } Image { id: logo - x: 13 - y: 0 - width: 100 - height: 100 + x: 8 + y: 19 source: "qt_logo_green_64x64px.png" fillMode: Image.PreserveAspectFit } PushButton { id: loginButton - x: 262 - y: 343 + x: 260 + y: 352 width: 120 height: 40 - text: qsTr("Log In") + text: "Log In" } PushButton { id: registerButton - x: 262 - y: 389 + x: 260 + y: 398 width: 120 height: 40 - text: qsTr("Create Account") + text: "Create Account" } } diff --git a/doc/qtdesignstudio/examples/loginui1/imports/loginui1/Constants.qml b/doc/qtdesignstudio/examples/loginui1/imports/loginui1/Constants.qml index 26a0421c9b6..d73cb621b0e 100644 --- a/doc/qtdesignstudio/examples/loginui1/imports/loginui1/Constants.qml +++ b/doc/qtdesignstudio/examples/loginui1/imports/loginui1/Constants.qml @@ -2,8 +2,8 @@ pragma Singleton import QtQuick 2.10 QtObject { - readonly property int width: 640 - readonly property int height: 480 + readonly property int width: 1280 + readonly property int height: 720 readonly property FontLoader mySystemFont: FontLoader { name: "Arial" } diff --git a/doc/qtdesignstudio/examples/loginui1/loginui1.qml b/doc/qtdesignstudio/examples/loginui1/loginui1.qml index 46f3994cdc7..604733f9f8d 100644 --- a/doc/qtdesignstudio/examples/loginui1/loginui1.qml +++ b/doc/qtdesignstudio/examples/loginui1/loginui1.qml @@ -1,3 +1,53 @@ +/**************************************************************************** +** +** Copyright (C) 2020 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Design Studio. +** +** $QT_BEGIN_LICENSE:BSD$ +** 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. +** +** BSD License Usage +** Alternatively, you may use this file under the terms of the BSD license +** as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of The Qt Company Ltd nor the names of its +** contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + import QtQuick 2.12 import loginui1 1.0 diff --git a/doc/qtdesignstudio/examples/loginui2/PushButton.ui.qml b/doc/qtdesignstudio/examples/loginui2/PushButton.ui.qml index 6e013d48cf8..ffeaf7181ec 100644 --- a/doc/qtdesignstudio/examples/loginui2/PushButton.ui.qml +++ b/doc/qtdesignstudio/examples/loginui2/PushButton.ui.qml @@ -1,33 +1,75 @@ -import QtQuick 2.10 + +/**************************************************************************** +** +** Copyright (C) 2020 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Design Studio. +** +** $QT_BEGIN_LICENSE:BSD$ +** 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. +** +** BSD License Usage +** Alternatively, you may use this file under the terms of the BSD license +** as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of The Qt Company Ltd nor the names of its +** contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ +import QtQuick 2.15 import QtQuick.Templates 2.1 as T import loginui2 1.0 T.Button { id: control + width: 100 + height: 40 font: Constants.font implicitWidth: Math.max( - background ? background.implicitWidth : 0, - contentItem.implicitWidth + leftPadding + rightPadding) + buttonBackground ? buttonBackground.implicitWidth : 0, + textItem.implicitWidth + leftPadding + rightPadding) implicitHeight: Math.max( - background ? background.implicitHeight : 0, - contentItem.implicitHeight + topPadding + bottomPadding) + buttonBackground ? buttonBackground.implicitHeight : 0, + textItem.implicitHeight + topPadding + bottomPadding) leftPadding: 4 rightPadding: 4 text: "My Button" background: buttonBackground - Rectangle { - id: buttonBackground - color: "#41cd52" - implicitWidth: 100 - implicitHeight: 40 - opacity: enabled ? 1 : 0.3 - border.color: "gray" - border.width: 1 - radius: 2 - } contentItem: textItem Text { @@ -35,12 +77,24 @@ T.Button { text: control.text opacity: enabled ? 1.0 : 0.3 - color: "#fdfdfd" + color: "#020202" horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter + font.bold: true elide: Text.ElideRight } + Rectangle { + id: buttonBackground + implicitWidth: 100 + implicitHeight: 40 + opacity: enabled ? 1 : 0.3 + border.color: "#41cd52" + border.width: 1 + anchors.fill: parent + radius: 20 + } + states: [ State { name: "normal" @@ -54,19 +108,13 @@ T.Button { when: control.down PropertyChanges { target: textItem - color: "#fdfdfd" + color: "#41cd52" } PropertyChanges { target: buttonBackground - color: "#21be2b" - border.color: "black" + color: "#ffffff" + border.color: "#41cd52" } } ] } - -/*##^## -Designer { - D{i:0;autoSize:true;height:480;width:640} -} -##^##*/ diff --git a/doc/qtdesignstudio/examples/loginui2/Screen01.ui.qml b/doc/qtdesignstudio/examples/loginui2/Screen01.ui.qml index 9995430aafd..3491ac6c96d 100644 --- a/doc/qtdesignstudio/examples/loginui2/Screen01.ui.qml +++ b/doc/qtdesignstudio/examples/loginui2/Screen01.ui.qml @@ -2,7 +2,7 @@ /**************************************************************************** ** -** Copyright (C) 2019 The Qt Company Ltd. +** Copyright (C) 2020 The Qt Company Ltd. ** Contact: https://www.qt.io/licensing/ ** ** This file is part of the examples of the Qt Toolkit. @@ -54,80 +54,93 @@ import loginui2 1.0 import QtQuick.Controls 2.3 Rectangle { - id: root width: Constants.width height: Constants.height - - Rectangle { - id: loginPage - color: "#ffffff" - anchors.fill: parent - - Image { - id: logo - width: 100 - height: 100 - anchors.topMargin: 10 - anchors.left: parent.left - anchors.leftMargin: 10 - anchors.top: parent.top - source: "qt_logo_green_64x64px.png" - fillMode: Image.PreserveAspectFit + gradient: Gradient { + GradientStop { + position: 0.50157 + color: "#ffffff" } - Text { - id: pageTitle - width: 123 - height: 40 - text: qsTr("Qt Account") - anchors.horizontalCenter: parent.horizontalCenter - anchors.top: parent.top - anchors.topMargin: 70 - font.pixelSize: 24 + GradientStop { + position: 1 + color: "#41cd52" } + } - Column { - id: fieldColumn + Text { + id: pageTitle + x: 258 + y: 70 + width: 135 + height: 40 + text: qsTr("Qt Account") + anchors.horizontalCenter: parent.horizontalCenter + anchors.top: parent.top + anchors.topMargin: 70 + font.pixelSize: 24 + font.bold: true + } + + Image { + id: logo + x: 10 + y: 10 + width: 100 + height: 100 + anchors.topMargin: 10 + anchors.left: parent.left + anchors.leftMargin: 10 + anchors.top: parent.top + source: "qt_logo_green_64x64px.png" + fillMode: Image.PreserveAspectFit + } + + Column { + id: fieldColumn + x: 170 + y: 200 + width: 300 + height: 85 + spacing: 5 + anchors.horizontalCenter: parent.horizontalCenter + anchors.top: parent.top + anchors.topMargin: 200 + + TextField { + id: usernameField width: 300 - height: 85 - spacing: 5 - anchors.horizontalCenter: parent.horizontalCenter - anchors.top: parent.top - anchors.topMargin: 200 - - TextField { - id: usernameField - width: 300 - placeholderText: qsTr("Username") - font.pointSize: 10 - } - - TextField { - id: passwordField - width: 300 - placeholderText: qsTr("Password") - font.pointSize: 10 - } + placeholderText: qsTr("Username") + font.pointSize: 10 } - Column { - id: buttonColumn - anchors.bottom: parent.bottom - anchors.bottomMargin: 50 - spacing: 5 - anchors.horizontalCenter: parent.horizontalCenter + TextField { + id: passwordField + width: 300 + placeholderText: qsTr("Password") + font.pointSize: 10 + } + } - PushButton { - id: loginButton - width: 120 - text: qsTr("Log In") - } + Column { + id: buttonColumn + x: 260 + y: 345 + anchors.bottom: parent.bottom + anchors.bottomMargin: 50 + spacing: 5 + anchors.horizontalCenter: parent.horizontalCenter - PushButton { - id: registerButton - width: 120 - text: qsTr("Create Account") - } + PushButton { + id: loginButton + width: 120 + text: qsTr("Log In") + } + + PushButton { + id: registerButton + width: 120 + text: qsTr("Create Account") } } } diff --git a/doc/qtdesignstudio/examples/loginui3/PushButton.ui.qml b/doc/qtdesignstudio/examples/loginui3/PushButton.ui.qml index b225c50b542..93b247a386a 100644 --- a/doc/qtdesignstudio/examples/loginui3/PushButton.ui.qml +++ b/doc/qtdesignstudio/examples/loginui3/PushButton.ui.qml @@ -1,33 +1,75 @@ -import QtQuick 2.10 + +/**************************************************************************** +** +** Copyright (C) 2020 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Design Studio. +** +** $QT_BEGIN_LICENSE:BSD$ +** 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. +** +** BSD License Usage +** Alternatively, you may use this file under the terms of the BSD license +** as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of The Qt Company Ltd nor the names of its +** contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ +import QtQuick 2.15 import QtQuick.Templates 2.1 as T import loginui3 1.0 T.Button { id: control + width: 100 + height: 40 font: Constants.font implicitWidth: Math.max( - background ? background.implicitWidth : 0, - contentItem.implicitWidth + leftPadding + rightPadding) + buttonBackground ? buttonBackground.implicitWidth : 0, + textItem.implicitWidth + leftPadding + rightPadding) implicitHeight: Math.max( - background ? background.implicitHeight : 0, - contentItem.implicitHeight + topPadding + bottomPadding) + buttonBackground ? buttonBackground.implicitHeight : 0, + textItem.implicitHeight + topPadding + bottomPadding) leftPadding: 4 rightPadding: 4 text: "My Button" background: buttonBackground - Rectangle { - id: buttonBackground - color: "#41cd52" - implicitWidth: 100 - implicitHeight: 40 - opacity: enabled ? 1 : 0.3 - border.color: "gray" - border.width: 1 - radius: 2 - } contentItem: textItem Text { @@ -35,12 +77,24 @@ T.Button { text: control.text opacity: enabled ? 1.0 : 0.3 - color: "#fdfdfd" + color: "#020202" horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter + font.bold: true elide: Text.ElideRight } + Rectangle { + id: buttonBackground + implicitWidth: 100 + implicitHeight: 40 + opacity: enabled ? 1 : 0.3 + border.color: "#41cd52" + border.width: 1 + anchors.fill: parent + radius: 20 + } + states: [ State { name: "normal" @@ -54,19 +108,13 @@ T.Button { when: control.down PropertyChanges { target: textItem - color: "#fdfdfd" + color: "#41cd52" } PropertyChanges { target: buttonBackground - color: "#21be2b" - border.color: "black" + color: "#ffffff" + border.color: "#41cd52" } } ] } - -/*##^## -Designer { - D{i:0;autoSize:true;height:480;width:640} -} -##^##*/ diff --git a/doc/qtdesignstudio/examples/loginui3/Screen01.ui.qml b/doc/qtdesignstudio/examples/loginui3/Screen01.ui.qml index 2ebf95a89ce..9539da8c30b 100644 --- a/doc/qtdesignstudio/examples/loginui3/Screen01.ui.qml +++ b/doc/qtdesignstudio/examples/loginui3/Screen01.ui.qml @@ -57,97 +57,57 @@ Rectangle { state: "loginState" width: Constants.width height: Constants.height - - Rectangle { - id: loginPage - color: "#ffffff" - anchors.fill: parent - - Image { - id: logo - width: 100 - height: 100 - anchors.topMargin: 10 - anchors.left: parent.left - anchors.leftMargin: 10 - anchors.top: parent.top - source: "qt_logo_green_64x64px.png" - fillMode: Image.PreserveAspectFit + gradient: Gradient { + GradientStop { + position: 0.5 + color: "#ffffff" } - Text { - id: pageTitle - width: 123 - height: 40 - text: qsTr("Qt Account") - anchors.horizontalCenter: parent.horizontalCenter - anchors.top: parent.top - anchors.topMargin: 70 - font.pixelSize: 24 + GradientStop { + position: 1 + color: "#41cd52" } + } - PushButton { - id: backButton - width: 40 - text: "<" - font.pixelSize: 24 - anchors.right: parent.right - anchors.rightMargin: 10 - anchors.top: parent.top - anchors.topMargin: 20 - } + PushButton { + id: backButton + x: 590 + y: 20 + width: 40 + text: "<" + font.pixelSize: 24 + anchors.right: parent.right + anchors.rightMargin: 10 + anchors.top: parent.top + anchors.topMargin: 20 + } - Column { - id: fieldColumn - width: 300 - height: 130 - spacing: 5 - anchors.horizontalCenter: parent.horizontalCenter - anchors.top: parent.top - anchors.topMargin: 200 + Text { + id: pageTitle + x: 258 + y: 70 + width: 123 + height: 40 + text: qsTr("Qt Account") + anchors.horizontalCenter: parent.horizontalCenter + anchors.top: parent.top + anchors.topMargin: 70 + font.pixelSize: 24 + font.bold: true + } - TextField { - id: usernameField - width: 300 - placeholderText: qsTr("Username") - font.pointSize: 10 - } - - TextField { - id: passwordField - width: 300 - placeholderText: qsTr("Password") - font.pointSize: 10 - } - - TextField { - id: verifyPasswordField - width: 300 - visible: true - font.pointSize: 10 - placeholderText: qsTr("Verify password") - } - } - - Column { - id: buttonColumn - anchors.bottom: parent.bottom - anchors.bottomMargin: 50 - spacing: 5 - anchors.horizontalCenter: parent.horizontalCenter - - PushButton { - id: loginButton - width: 120 - text: qsTr("Log In") - } - - PushButton { - id: registerButton - width: 120 - text: qsTr("Create Account") - } - } + Image { + id: logo + x: 10 + y: 10 + width: 100 + height: 100 + anchors.topMargin: 10 + anchors.left: parent.left + anchors.leftMargin: 10 + anchors.top: parent.top + source: "qt_logo_green_64x64px.png" + fillMode: Image.PreserveAspectFit } Connections { @@ -163,6 +123,7 @@ Rectangle { root.state = "loginState" } } + states: [ State { name: "loginState" @@ -179,10 +140,6 @@ Rectangle { }, State { name: "registerState" - PropertyChanges { - target: verifyPasswordField - visible: true - } PropertyChanges { target: loginButton @@ -190,4 +147,66 @@ Rectangle { } } ] + Column { + id: fieldColumn + x: 170 + y: 200 + width: 300 + height: 130 + spacing: 5 + anchors.horizontalCenter: parent.horizontalCenter + anchors.top: parent.top + anchors.topMargin: 200 + + TextField { + id: usernameField + width: 300 + placeholderText: qsTr("Username") + font.pointSize: 10 + } + + TextField { + id: passwordField + width: 300 + placeholderText: qsTr("Password") + font.pointSize: 10 + } + + TextField { + id: verifyPasswordField + width: 300 + visible: true + font.pointSize: 10 + placeholderText: qsTr("Verify password") + } + } + + Column { + id: buttonColumn + x: 260 + y: 345 + anchors.bottom: parent.bottom + anchors.bottomMargin: 50 + spacing: 5 + anchors.horizontalCenter: parent.horizontalCenter + + PushButton { + id: loginButton + width: 120 + text: qsTr("Log In") + } + + PushButton { + id: registerButton + width: 120 + text: qsTr("Create Account") + } + } } + +/*##^## +Designer { + D{i:0;formeditorZoom:0.5} +} +##^##*/ + diff --git a/doc/qtdesignstudio/examples/loginui4/PushButton.ui.qml b/doc/qtdesignstudio/examples/loginui4/PushButton.ui.qml index 569a92f2b47..3e2aeef9d13 100644 --- a/doc/qtdesignstudio/examples/loginui4/PushButton.ui.qml +++ b/doc/qtdesignstudio/examples/loginui4/PushButton.ui.qml @@ -1,33 +1,75 @@ -import QtQuick 2.10 + +/**************************************************************************** +** +** Copyright (C) 2020 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Design Studio. +** +** $QT_BEGIN_LICENSE:BSD$ +** 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. +** +** BSD License Usage +** Alternatively, you may use this file under the terms of the BSD license +** as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of The Qt Company Ltd nor the names of its +** contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ +import QtQuick 2.15 import QtQuick.Templates 2.1 as T import loginui4 1.0 T.Button { id: control + width: 100 + height: 40 font: Constants.font implicitWidth: Math.max( - background ? background.implicitWidth : 0, - contentItem.implicitWidth + leftPadding + rightPadding) + buttonBackground ? buttonBackground.implicitWidth : 0, + textItem.implicitWidth + leftPadding + rightPadding) implicitHeight: Math.max( - background ? background.implicitHeight : 0, - contentItem.implicitHeight + topPadding + bottomPadding) + buttonBackground ? buttonBackground.implicitHeight : 0, + textItem.implicitHeight + topPadding + bottomPadding) leftPadding: 4 rightPadding: 4 text: "My Button" background: buttonBackground - Rectangle { - id: buttonBackground - color: "#41cd52" - implicitWidth: 100 - implicitHeight: 40 - opacity: enabled ? 1 : 0.3 - border.color: "gray" - border.width: 1 - radius: 2 - } contentItem: textItem Text { @@ -35,12 +77,24 @@ T.Button { text: control.text opacity: enabled ? 1.0 : 0.3 - color: "#fdfdfd" + color: "#020202" horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter + font.bold: true elide: Text.ElideRight } + Rectangle { + id: buttonBackground + implicitWidth: 100 + implicitHeight: 40 + opacity: enabled ? 1 : 0.3 + border.color: "#41cd52" + border.width: 1 + anchors.fill: parent + radius: 20 + } + states: [ State { name: "normal" @@ -54,19 +108,13 @@ T.Button { when: control.down PropertyChanges { target: textItem - color: "#fdfdfd" + color: "#41cd52" } PropertyChanges { target: buttonBackground - color: "#21be2b" - border.color: "black" + color: "#ffffff" + border.color: "#41cd52" } } ] } - -/*##^## -Designer { - D{i:0;autoSize:true;height:480;width:640} -} -##^##*/ diff --git a/doc/qtdesignstudio/examples/loginui4/Screen01.ui.qml b/doc/qtdesignstudio/examples/loginui4/Screen01.ui.qml index e318223a0bb..e57d19c368a 100644 --- a/doc/qtdesignstudio/examples/loginui4/Screen01.ui.qml +++ b/doc/qtdesignstudio/examples/loginui4/Screen01.ui.qml @@ -48,176 +48,151 @@ ** $QT_END_LICENSE$ ** ****************************************************************************/ -import QtQuick 2.10 +import QtQuick 2.12 import loginui4 1.0 -import QtQuick.Controls 2.3 +import QtQuick.Controls 2.15 import QtQuick.Timeline 1.0 Rectangle { - id: root + id: rectangle width: Constants.width height: Constants.height - - Rectangle { - id: loginPage - color: "#ffffff" - anchors.fill: parent - - Image { - id: logo - width: 100 - height: 100 - anchors.topMargin: 10 - anchors.left: parent.left - anchors.leftMargin: 10 - anchors.top: parent.top - source: "qt_logo_green_64x64px.png" - fillMode: Image.PreserveAspectFit + color: "#ffffff" + gradient: Gradient { + GradientStop { + position: 0.50125 + color: "#ffffff" } - Text { - id: pageTitle - width: 123 - height: 40 - text: qsTr("Qt Account") - anchors.horizontalCenter: parent.horizontalCenter - anchors.top: parent.top - anchors.topMargin: 70 - font.pixelSize: 24 + GradientStop { + position: 1 + color: "#41cd52" + } + } + + Text { + id: pageTitle + text: qsTr("Qt Account") + anchors.top: parent.top + font.pixelSize: 24 + anchors.topMargin: 70 + anchors.horizontalCenter: parent.horizontalCenter + font.bold: true + font.family: Constants.font.family + } + + Image { + id: logo + anchors.left: parent.left + anchors.top: parent.top + source: "qt_logo_green_64x64px.png" + anchors.topMargin: 10 + anchors.leftMargin: 10 + fillMode: Image.PreserveAspectFit + } + + Column { + id: buttonColumn + anchors.bottom: parent.bottom + anchors.horizontalCenter: parent.horizontalCenter + anchors.bottomMargin: 50 + spacing: 5 + + PushButton { + id: loginButton + width: 120 + opacity: 1 + text: qsTr("Log In") } PushButton { - id: backButton - x: 507 - width: 40 - text: "<" - opacity: 1 - anchors.right: parent.right - anchors.rightMargin: 10 - anchors.top: parent.top - anchors.topMargin: 20 - font.pixelSize: 24 - } + id: registerButton + width: 120 + text: qsTr("Create Account") + font.bold: true - Column { - id: buttonColumn - anchors.bottom: parent.bottom - anchors.bottomMargin: 50 - spacing: 5 - anchors.horizontalCenter: parent.horizontalCenter - - PushButton { - id: loginButton - width: 120 - text: qsTr("Log In") - } - - PushButton { - id: registerButton - width: 120 - text: qsTr("Create Account") + Connections { + target: registerButton + onClicked: rectangle.state = "registerState" } } + } - TextField { - id: usernameField - width: 300 - anchors.horizontalCenter: parent.horizontalCenter - anchors.top: parent.top - anchors.topMargin: 200 - placeholderText: qsTr("Username") - font.pointSize: 10 - } + PushButton { + id: backButton + width: 40 + opacity: 1.2 + text: "<" + anchors.right: parent.right + anchors.top: parent.top + font.pixelSize: 24 + anchors.rightMargin: 10 + anchors.topMargin: 10 + font.bold: true + checked: true - TextField { - id: passwordField - width: 300 - anchors.horizontalCenter: usernameField.horizontalCenter - anchors.top: usernameField.bottom - anchors.topMargin: 5 - placeholderText: qsTr("Password") - font.pointSize: 10 + Connections { + target: backButton + onClicked: rectangle.state = "loginState" } + } - TextField { - id: verifyPasswordField - width: 300 - anchors.horizontalCenter: passwordField.horizontalCenter - anchors.top: passwordField.bottom - anchors.topMargin: 5 - visible: true - font.pointSize: 10 - placeholderText: qsTr("Verify password") - } + TextField { + id: verifyPasswordField + x: 170 + width: 300 + opacity: 1 + anchors.top: passwordField.bottom + anchors.horizontalCenter: passwordField.horizontalCenter + anchors.topMargin: 5 + placeholderText: qsTr("Verify password") + } + + TextField { + id: passwordField + x: 170 + width: 300 + anchors.top: usernameField.bottom + anchors.horizontalCenter: usernameField.horizontalCenter + anchors.topMargin: 5 + placeholderText: qsTr("Password") + } + + TextField { + id: usernameField + x: 170 + width: 300 + text: "" + anchors.top: parent.top + horizontalAlignment: Text.AlignLeft + anchors.horizontalCenter: parent.horizontalCenter + anchors.topMargin: 200 + placeholderText: qsTr("Username") } Timeline { id: timeline animations: [ TimelineAnimation { - id: toRegisterState - running: false + id: toLoginState loops: 1 duration: 1000 + running: false to: 1000 from: 0 }, TimelineAnimation { - id: toLoginState + id: toRegisterState loops: 1 - from: 1000 + duration: 1000 running: false to: 0 - duration: 1000 + from: 1000 } ] enabled: true - startFrame: 0 endFrame: 1000 - - KeyframeGroup { - target: verifyPasswordField - property: "opacity" - Keyframe { - frame: 0 - value: 0 - } - - Keyframe { - value: 1 - frame: 1001 - } - } - - KeyframeGroup { - target: loginButton - property: "opacity" - Keyframe { - frame: 0 - value: 1 - } - - Keyframe { - frame: 1000 - value: "0" - } - } - - KeyframeGroup { - target: verifyPasswordField - property: "anchors.topMargin" - - Keyframe { - easing.bezierCurve: [0.39, 0.575, 0.565, 1, 1, 1] - value: 5 - frame: 1001 - } - - Keyframe { - value: "-40" - frame: 0 - } - } + startFrame: 0 KeyframeGroup { target: backButton @@ -232,37 +207,72 @@ Rectangle { value: 1 } } - } - Connections { - target: registerButton - onClicked: { - root.state = "registerState" + KeyframeGroup { + target: verifyPasswordField + property: "opacity" + + Keyframe { + frame: 0 + value: 0 + } + + Keyframe { + frame: 1000 + value: 1 + } } - } - Connections { - target: backButton - onClicked: { - root.state = "loginState" + KeyframeGroup { + target: loginButton + property: "opacity" + Keyframe { + frame: 0 + value: 1 + } + + Keyframe { + frame: 1000 + value: 0 + } + } + + KeyframeGroup { + target: verifyPasswordField + property: "anchors.topMargin" + Keyframe { + frame: 0 + value: -40 + } + + Keyframe { + easing.bezierCurve: [0.39,0.575,0.565,1,1,1] + frame: 1000 + value: 5 + } } } states: [ State { - name: "registerState" + name: "loginState" PropertyChanges { target: timeline + currentFrame: 0 enabled: true } + PropertyChanges { + target: toLoginState + } + PropertyChanges { target: toRegisterState running: true } }, State { - name: "loginState" + name: "registerState" PropertyChanges { target: timeline @@ -277,11 +287,9 @@ Rectangle { ] } - - - -/*##^## Designer { - D{i:4;anchors_y:28;timeline_expanded:true}D{i:6;timeline_expanded:true}D{i:7;timeline_expanded:true} -D{i:8;anchors_y:200;timeline_expanded:true}D{i:9;anchors_x:170;anchors_y:245}D{i:10;anchors_y:245;timeline_expanded:true} +/*##^## +Designer { + D{i:0;formeditorZoom:0.5}D{i:5}D{i:7}D{i:10}D{i:12}D{i:13}D{i:14}D{i:15} } - ##^##*/ +##^##*/ + diff --git a/doc/qtdesignstudio/images/simulink-qt-blockset-receive.png b/doc/qtdesignstudio/images/simulink-qt-blockset-receive.png new file mode 100644 index 00000000000..744dd71bf45 Binary files /dev/null and b/doc/qtdesignstudio/images/simulink-qt-blockset-receive.png differ diff --git a/doc/qtdesignstudio/images/simulink-qt-receive-block.png b/doc/qtdesignstudio/images/simulink-qt-receive-block.png new file mode 100644 index 00000000000..c528841c70e Binary files /dev/null and b/doc/qtdesignstudio/images/simulink-qt-receive-block.png differ diff --git a/doc/qtdesignstudio/images/simulink-qt-send-block.png b/doc/qtdesignstudio/images/simulink-qt-send-block.png new file mode 100644 index 00000000000..7f09551e149 Binary files /dev/null and b/doc/qtdesignstudio/images/simulink-qt-send-block.png differ diff --git a/doc/qtdesignstudio/images/simulink-qt-send-example-property.png b/doc/qtdesignstudio/images/simulink-qt-send-example-property.png new file mode 100644 index 00000000000..6daf1b55681 Binary files /dev/null and b/doc/qtdesignstudio/images/simulink-qt-send-example-property.png differ diff --git a/doc/qtdesignstudio/images/studio-binding-editor.png b/doc/qtdesignstudio/images/studio-binding-editor.png new file mode 100644 index 00000000000..9b53435d1f4 Binary files /dev/null and b/doc/qtdesignstudio/images/studio-binding-editor.png differ diff --git a/doc/qtdesignstudio/images/studio-connection-view-properties.png b/doc/qtdesignstudio/images/studio-connection-view-properties.png new file mode 100644 index 00000000000..6ce6c3479f5 Binary files /dev/null and b/doc/qtdesignstudio/images/studio-connection-view-properties.png differ diff --git a/doc/qtdesignstudio/images/studio-qml-imports-slconnector.png b/doc/qtdesignstudio/images/studio-qml-imports-slconnector.png new file mode 100644 index 00000000000..bfabdc8c529 Binary files /dev/null and b/doc/qtdesignstudio/images/studio-qml-imports-slconnector.png differ diff --git a/doc/qtdesignstudio/src/qtdesignstudio-advanced.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-advanced.qdoc index afeb074ca75..ab77f1386c6 100644 --- a/doc/qtdesignstudio/src/qtdesignstudio-advanced.qdoc +++ b/doc/qtdesignstudio/src/qtdesignstudio-advanced.qdoc @@ -61,10 +61,12 @@ just as plain text. This enables it to provide you with useful features, such as semantic highlighting, checking code syntax, code completion, and refactoring actions. - \li \l{Simulating Application Logic} + \li \l{Simulating Data Input} - You can use JavaScript to simulate application logic to bring your - UI to life. + \QDS enables you to connect UIs to different forms of data from various + sources, such as QML-based data models, JavaScript files, and backend + services. You can also connect your UI to Simulink to load live data from a + Simulink simulation. \li \l{Debugging and Profiling} \QDS comes with a JavaScript debugger. In the Debug mode, you diff --git a/doc/qtdesignstudio/src/qtdesignstudio-debugging.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-debugging.qdoc index d50c6153db7..8ef4a01c7f9 100644 --- a/doc/qtdesignstudio/src/qtdesignstudio-debugging.qdoc +++ b/doc/qtdesignstudio/src/qtdesignstudio-debugging.qdoc @@ -24,7 +24,7 @@ ****************************************************************************/ /*! - \previouspage studio-javascript.html + \previouspage studio-simulink.html \page studio-debugging.html \nextpage creator-debugging-qml.html diff --git a/doc/qtdesignstudio/src/qtdesignstudio-javascript.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-javascript.qdoc index 43aed58d930..c9752a0dfe8 100644 --- a/doc/qtdesignstudio/src/qtdesignstudio-javascript.qdoc +++ b/doc/qtdesignstudio/src/qtdesignstudio-javascript.qdoc @@ -24,9 +24,9 @@ ****************************************************************************/ /*! - \previouspage creator-editor-options-text.html + \previouspage qtquick-placeholder-data.html \page studio-javascript.html - \nextpage studio-debugging.html + \nextpage studio-simulink.html \title Simulating Application Logic @@ -45,10 +45,9 @@ \l {Module Definition qmldir Files}. \endlist - Here, you will need to write some C++ code. Namely, the Qt Quick file will - contain a QObject-derived class that is registered with the QML type system - as a \e singleton type. This enables the use of global property values in - the UI. + Here, you will create a QML type based on the QObject class that will + be registered as a singleton type. This enables the use of global + property values in the UI. You can find a video tutorial about creating JavaScript for generating mock data for a UI @@ -58,14 +57,17 @@ To create the necessary files: \list 1 - \li In the File Explorer, create a folder for the JavaScript files - (for example, \e backend) and another one for the mock data - (for example, \e Data) in your project folder. - \note Make sure to capitalize the data folder name, because you + \li In the File Explorer, create a new folder for the mock data + inside the \e imports folder in your project folder (for example, \e Data). + \note Make sure to capitalize the \e Data folder name, because you will need to import it as a QML type later, and QML type names must be capitalized. - \li In \QDS, open the project file (.qmlproject) to add the backend - folder to the list of plugin directories passed to the QML runtime: + \note If you place this folder somewhere else in the project, you will + need to add the path to the list of imports. To do this, in \QDS, open + the project file (.qmlproject) to add the path to the list of plugin + directories passed to the QML runtime. For example, if you placed the + \e Data folder inside another folder called \e backend in the root of + your project, you would add the following: \code importPaths: [ "imports", "backend" ] \endcode @@ -83,7 +85,7 @@ \uicontrol {JavaScript File} > \uicontrol Choose to create a JavaScript file that generates mock data for the UI. \li Follow the instructions of the wizard to create the JavaScript file - in the data folder. In these instructions, the file is called + in the Data folder. In these instructions, the file is called \e {simulation.js}. \li Delete the template text in JavaScript file and save the file. \li In a text editor such as Notepad, create a module definition file @@ -102,29 +104,22 @@ \li Add the following import statement to import the \e {simulation.js} file to use the functionality that it provides: \code - #import simulation.js as JS + import "simulation.js" as JS \endcode - \li Add the following code to create a QObject-derived class that will - list the global properties you want to simulate and their default - values: + \li Replace the default Item declaration with the following code to + create a QObject-derived class that will list the global + properties you want to simulate and their default values: \code - QObject { + QtObject { id: values // property values to simulate - property int name1: default1 - property string name2: default2 - property real name3: default3 + property int name1: 5 + property string name2: "foo" + property real name3: 2.5 } \endcode - \note You must export the properties as aliases by selecting - \uicontrol {Export Property as Alias} in the - \inlineimage icons/action-icon.png - (\uicontrol Actions) menu of the property in the - \uicontrol Properties view. Exported properties are listed in - \uicontrol Connections > \uicontrol Properties, where you can - change their names. \li Add the following code to use a \l Timer type to specify a range of values for the property: \code @@ -133,19 +128,28 @@ repeat: true onTriggered: JS.name1Timer() interval: 10 + } \endcode - \note You must add the JavaScript method to the JavaScript file. - \li Open the main UI file of the project and add the following code to - import the data folder as a QML module: + This will execute the function defined for \c onTriggered every 10 ms. + Within your javascript functions you can perform the necessary + actions to simulate the behavior you need. Review + \l {Importing JavaScript Resources in QML} for more details. + \note You must add the JavaScript method \c name1Timer() + to the JavaScript file. You have the option of adding this JavaScript + code directly within the \c onTriggered handler as well. + \li Open the .ui.qml file of the Component that will use the simulated data + and add the following code to the top of the file in order to import + the Data folder as a QML module: \code - #import Data 1.0 as Data + import Data 1.0 \endcode - \li Select \uicontrol {Set Binding} in the \uicontrol Settings menu of the - property to bind the property value to the value defined in the - values file. For example, you would set the following expression for - \e name1: + \li Returning to the \uicontrol {Form Editor}, locate the property that + should be bound to the simulated values. Select \inlineimage icons/action-icon.png + and \uicontrol {Set Binding} for the property and enter the + simulated Value property. For example, you would set the following + expression to bind to the example \c name1 property: \code - Data.Values.name1 + Values.name1 \endcode \endlist */ diff --git a/doc/qtdesignstudio/src/qtdesignstudio-simulation-overview.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-simulation-overview.qdoc new file mode 100644 index 00000000000..109b40d37e8 --- /dev/null +++ b/doc/qtdesignstudio/src/qtdesignstudio-simulation-overview.qdoc @@ -0,0 +1,56 @@ +/**************************************************************************** +** +** Copyright (C) 2020 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio 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 studio-simulation-overview.html + \previouspage creator-editor-options-text.html + \nextpage qtquick-placeholder-data.html + + \title Simulating Data Input + + + \QDS enables you to connect UIs to different forms of data from various + sources, such as QML-based data models, JavaScript files, and backend + services. You can also connect your UI to Simulink to load live data from a + Simulink simulation. + + \list + \li \l{Loading Placeholder Data} + + You can create QML files that contain placeholder data, so that + you can test grid, list, or path views, even though you don't + have access to real data. + + \li \l{Simulating Application Logic} + + You can use JavaScript to generate mock data for your UI. + + \li \l{Simulating Dynamic Systems} + + Use the Simulink connector to connect a Simulink Simulation Model to + your UI. Simulink is a MATLAB-based graphical programming environment + for modeling, simulating, and analyzing multi-domain dynamic systems. + \endlist +*/ diff --git a/doc/qtdesignstudio/src/qtdesignstudio-simulink.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-simulink.qdoc new file mode 100644 index 00000000000..4bed1e63cb5 --- /dev/null +++ b/doc/qtdesignstudio/src/qtdesignstudio-simulink.qdoc @@ -0,0 +1,197 @@ +/**************************************************************************** +** +** Copyright (C) 2020 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio 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. +** +****************************************************************************/ + +/*! + \previouspage studio-javascript.html + \page studio-simulink.html + \nextpage studio-debugging.html + + \title Simulating Dynamic Systems + + Use the Simulink connector to connect simulation to your UI. Simulink is a + MATLAB-based graphical programming environment for modeling, simulating, + and analyzing multi-domain dynamic systems. On Windows, \QDS provides + built-in support for connectivity to Simulink models, which allows them to + send and receive data with applications developed using \QDS. Install + Simulink on your computer and run it simultaneously with \QDS to enable + communication between the applications. + + The information given here is mainly focused on the integration of the + Simulink connector in \QDS. For information on how to use the Simulink + environment, see the \l {https://se.mathworks.com/help/simulink/} + {documentation} provided by MathWorks. + + \section1 The Qt Blockset for Simulink + + Install the Simulink \l {https://git.qt.io/qt-design-studio/simulink-plugin-dependencies} + {Qt Blockset} to your computer in order to connect a Simulink model to your + application. The Qt Blockset installer adds the Simulink blocks needed to + establish connectivity to your application. After installation, the + \uicontrol SLQTLibrary blockset will be added to the Simulink blocks + library. The blocks allow sending and receiving of \uicontrol Property, + \uicontrol Signal, and \uicontrol Slot updates with your application. The + Qt Blockset includes the \uicontrol {Simulink-Qt Client}, \uicontrol + Address, \uicontrol {Qt/QML Send}, and \uicontrol {Qt/QML Receive} blocks. + + \image simulink-qt-blockset-receive.png "The Qt Blockset in a Simulink Model" + + \section2 Simulink-Qt Client + + A \uicontrol {Simulink-Qt Client} block establishes the TCP/IP Client + connection with your application. The block has two inputs and two outputs: + + \list + \li The \uicontrol Address input specifies the machine IP address + of the server to the client block. To ensure the address is + formatted correctly, use the \uicontrol Address block. + \li The \uicontrol Port input specifies the port value for the IP + address, which can be determined by using the \uicontrol Port block + or a valid Simulink integer value. + \li The \uicontrol IsConnected output is a Boolean signal. When true, + specifies the connection to the server has been established. + \li The \uicontrol Socket output sends a signal that presents the + socket ID of the connection. This signal needs to be delivered to + corresponding \uicontrol {Qt/QML Receive} and \uicontrol + {Qt/QML Send} blocks. + \endlist + + \section2 Address and Port + + An \uicontrol Address block delivers the IP address of a server to the + \uicontrol {Simulink-Qt Client} block as a typical IP address string. + A \uicontrol Port block determines the port value for the IP address. For + simulations where the Simulink model and your application are run on the + same machine, use the IP address 127.0.0.1 and any port available. + + \section2 Qt/QML Send + + \image simulink-qt-send-block.png "A Qt/QML Send Block" + + A \uicontrol {Qt/QML Send} block sends a \uicontrol Signal or \uicontrol + Property value change from Simulink. It is used for each property that + Simulink needs to send to your application. The property name of the block + needs to correspond to the name of the property or slot in your application. + + The block has two inputs and one output: + \list + \li The \uicontrol Socket input receives the socket signal from the + \uicontrol {Simulink-Qt Client} block. + \li The \uicontrol Data input receives the data to be sent as a + \uicontrol Signal or \uicontrol Property update. + \li The \uicontrol {Data Out} output outputs the passed-through data + to connect it to other Simulink blocks if needed. + \endlist + + \section2 Qt/QML Receive + + \image simulink-qt-receive-block.png "A Qt/QML Receive Block" + + A \uicontrol {Qt/QML Receive} block receives \uicontrol Signal or + \uicontrol Property value changes from your application. It is used for + each property that Simulink needs to receive from your application. + The property name of the block needs to correspond to the name of the + property or slot in your application. + + The block has one input and two outputs: + + \list + \li The \uicontrol Socket input receives the socket signal from the + \uicontrol {Simulink-Qt Client} block. + \li The \uicontrol Fcn_Call output sends the function-call, which can + either be terminated if idle, or connected to a valid function call + subsystem. + \li The \uicontrol isReceived output emits a scalar Boolean signal + suggesting that a valid \uicontrol Signal or \uicontrol Property + update was acquired from the connection. + \li The \uicontrol Data output signals data payload from a \uicontrol + Signal or \uicontrol Property value. + \endlist + + \section2 Specifying Property Names in Simulink + + Double-click the \uicontrol {Qt/SML Send} or \uicontrol {Qt/QML Receive} + block in Simulink to specify a property name. A pop-up for \uicontrol + {Block Parameters} appears. Type the name of the property in the \uicontrol + {Qt Signal/Property Name} field and click \uicontrol OK. The name, for + example speedProp, needs to match a \uicontrol signal or a \uicontrol + property in \QDS. + + \image simulink-qt-send-example-property.png "Example property of the Qt Send block" + + \section1 Integrating the Simulink Model to \QDS + + \section2 Importing the Simulink Connector + + To integrate the Simulink model into \QDS, you first need to import the + Simulink connector in \uicontrol Library. Click the \uicontrol {QML Imports + Tab}, select the \uicontrol {} drop-down menu, and then select + \uicontrol SimulinkConnector. \QDS is now ready to communicate with the + Simulink model. + + \image studio-qml-imports-slconnector.png "Simulink Connector in the QML Imports list" + + If you need to change the IP address and/or port, you need to select the + \uicontrol SimulinkConnector item in \uicontrol Navigator and set the IP + address and/or port in the \uicontrol Properties view. If you cannot see + \uicontrol SimulinkConnector in \uicontrol Navigator, you need to click + \inlineimage filtericon.png + (\uicontrol {Filter Tree}) and unselect \uicontrol {Show only visible items}. + + To communicate with a specific model in Simulink, you need to create + properties matching the send and receive properties in the root of the + application you are building. Select the root item in \uicontrol + Navigator to add the properties in the \uicontrol Properties tab in + \uicontrol {Connection View}. + + See \l {Specifying Dynamic Properties} for a detailed description of how + 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. + + \image studio-connection-view-properties.png "The Properties tab in Connection View" + + \section2 Creating Bindings + + Next, you need to bind the value of the property you just created to the + desired properties of UI components. + + By binding the root item property to a component property you can use it, + for example, to rotate an component. Binding a root item property of speed + to a component property of rotation would result in the item rotating in the + screen when the simulation is run. + + To bind the root item property to a component property, select the component + either by clicking on it on the canvas or in \uicontrol Navigator. In the + \uicontrol Properties view, find the component property to which you want to + bind the root item property. Select the \inlineimage icons/action-icon.png + (\uicontrol Actions) menu next to a property, and then select + \uicontrol {Set Binding}. In the \uicontrol {Binding Editor}, select the + text field and type in \c {.}, for example + \c rectangle.speedProp. For more information, see \l {Setting Bindings}. + + \image studio-binding-editor.png "The Binding Editor window" + + Run the simulation by first clicking the \uicontrol Run icon in \QDS and + then the \uicontrol Run icon in Simulink. +*/ diff --git a/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc index 41fc8926cf0..ee143fc7148 100644 --- a/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc +++ b/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc @@ -157,7 +157,12 @@ \li \l{Specifying Text Editor Settings} \endlist \endlist - \li \l{Simulating Application Logic} + \li \l{Simulating Data Input} + \list + \li \l{Loading Placeholder Data} + \li \l{Simulating Application Logic} + \li \l{Simulating Dynamic Systems} + \endlist \li \l{Debugging and Profiling} \list \li \l{Debugging Qt Quick Projects} diff --git a/doc/qtdesignstudio/src/qtdesignstudio.qdoc b/doc/qtdesignstudio/src/qtdesignstudio.qdoc index ae9dda9f966..3c2eba8e2c6 100644 --- a/doc/qtdesignstudio/src/qtdesignstudio.qdoc +++ b/doc/qtdesignstudio/src/qtdesignstudio.qdoc @@ -41,7 +41,7 @@ \li \inlineimage front-ui.png \li \inlineimage studio-animation.png \row - \li \l{Getting Started} + \li \b {\l{Getting Started}} \list \li \l{Exporting Artwork from Design Tools} \li \l{User Interface} @@ -96,7 +96,7 @@ \li \l{Supported Platforms} \li \l{Keyboard Shortcuts} \li \l{Coding} - \li \l{Simulating Application Logic} + \li \l{Simulating Data Input} \li \l{Debugging and Profiling} \endlist \li \b {\l{Help}} diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-editor.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-editor.qdoc index e89783168b4..d9b4e33a50c 100644 --- a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-editor.qdoc +++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-editor.qdoc @@ -48,7 +48,7 @@ You can use the toolbar buttons to \e transform 3D objects and manipulate the 3D scene. Transformation refers to moving, rotating, or scaling of an object. The \e pivot of the component is used as the origin for - transformations. You can set a \l{Setting Transform Properties}{local pivot + transformations. You can set a \l{Managing 3D Transformations}{local pivot offset} for an item in \uicontrol Properties to transform the component around a point other than its local origin. A line is drawn in \uicontrol {3D Editor} from the pivot point to the center of the component to provide diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-node.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-node.qdoc index 43774025232..8057f8fa5c2 100644 --- a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-node.qdoc +++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-node.qdoc @@ -50,7 +50,7 @@ show components. It is useful when you want to show a component in a particular state, but hide it in another state, for example. - \section1 Setting Transform Properties + \section1 Managing 3D Transformations The value of the \uicontrol Translation property contains the position translation of the component in the local coordinate space established by diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-texture.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-texture.qdoc index 5f64768056d..7a93ea02d03 100644 --- a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-texture.qdoc +++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-texture.qdoc @@ -108,7 +108,7 @@ rotation. For more information about rotating and pivoting components in the local - coordinate space, see \l {Setting Transform Properties}. + coordinate space, see \l {Managing 3D Transformations}. \section1 Applying Textures to Materials diff --git a/src/libs/languageserverprotocol/lsptypes.cpp b/src/libs/languageserverprotocol/lsptypes.cpp index 04594e54930..c9e44e4c38d 100644 --- a/src/libs/languageserverprotocol/lsptypes.cpp +++ b/src/libs/languageserverprotocol/lsptypes.cpp @@ -403,13 +403,11 @@ Utils::Link Location::toLink() const if (!isValid(nullptr)) return Utils::Link(); - // QUrl::FullyDecoded is not supported by QUrl::toString. // Ensure %xx like %20 are really decoded using fromPercentEncoding // Else, a path with spaces would keep its %20 which would cause failure // to open the file by the text editor. This is the cases with compilers in // C:\Programs Files on Windows. - auto file = uri().toString(QUrl::FullyDecoded | QUrl::PreferLocalFile); - + auto file = uri().toString(QUrl::PrettyDecoded | QUrl::PreferLocalFile); // fromPercentEncoding convert %xx encoding to raw values and then interpret // the result as utf-8, so toUtf8() must be used here. file = QUrl::fromPercentEncoding(file.toUtf8()); diff --git a/src/libs/qmljs/parser/qmljsast_p.h b/src/libs/qmljs/parser/qmljsast_p.h index bf70d245496..f9c77c53f1e 100644 --- a/src/libs/qmljs/parser/qmljsast_p.h +++ b/src/libs/qmljs/parser/qmljsast_p.h @@ -3394,14 +3394,17 @@ public: SourceLocation firstSourceLocation() const override { - if (defaultToken.isValid()) - return defaultToken; - else if (readonlyToken.isValid()) - return readonlyToken; - else if (requiredToken.isValid()) - return requiredToken; + if (requiredToken.isValid()) { + if (defaultToken.isValid() && defaultToken.offset < requiredToken.offset) + return defaultToken; + return requiredToken; + } + if (defaultToken.isValid()) + return defaultToken; + if (readonlyToken.isValid()) + return readonlyToken; - return propertyToken; + return propertyToken; } SourceLocation lastSourceLocation() const override diff --git a/src/libs/qmljs/qmljsbind.cpp b/src/libs/qmljs/qmljsbind.cpp index 5e47353dd84..e405fd3ab59 100644 --- a/src/libs/qmljs/qmljsbind.cpp +++ b/src/libs/qmljs/qmljsbind.cpp @@ -29,6 +29,9 @@ #include "qmljsdocument.h" #include "qmljsmodelmanagerinterface.h" +#include +#include + #include using namespace LanguageUtils; @@ -203,7 +206,12 @@ bool Bind::visit(UiImport *ast) version = ComponentVersion(ast->version->majorVersion, ast->version->minorVersion); if (ast->importUri) { - if (!version.isValid()) { + QVersionNumber qtVersion = QLibraryInfo::version(); + if (ModelManagerInterface *model = ModelManagerInterface::instance()) { + ModelManagerInterface::ProjectInfo pInfo = model->projectInfoForPath(_doc->fileName()); + qtVersion = QVersionNumber::fromString(pInfo.qtVersionString); + } + if (!version.isValid() && qtVersion.majorVersion() < 6) { _diagnosticMessages->append( errorMessage(ast, tr("package import requires a version number"))); } diff --git a/src/libs/qmljs/qmljsmodelmanagerinterface.cpp b/src/libs/qmljs/qmljsmodelmanagerinterface.cpp index 519405aa4c7..3cc8db7e630 100644 --- a/src/libs/qmljs/qmljsmodelmanagerinterface.cpp +++ b/src/libs/qmljs/qmljsmodelmanagerinterface.cpp @@ -129,6 +129,7 @@ ModelManagerInterface::ModelManagerInterface(QObject *parent) m_defaultProjectInfo.qtQmlPath = QFileInfo( QLibraryInfo::location(QLibraryInfo::Qml2ImportsPath)).canonicalFilePath(); + m_defaultProjectInfo.qtVersionString = QLibraryInfo::version().toString(); updateImportPaths(); @@ -607,8 +608,10 @@ ModelManagerInterface::ProjectInfo ModelManagerInterface::projectInfoForPath( ProjectInfo res; const auto allProjectInfos = allProjectInfosForPath(path); for (const ProjectInfo &pInfo : allProjectInfos) { - if (res.qtQmlPath.isEmpty()) + if (res.qtQmlPath.isEmpty()) { res.qtQmlPath = pInfo.qtQmlPath; + res.qtVersionString = pInfo.qtVersionString; + } res.applicationDirectories.append(pInfo.applicationDirectories); for (const auto &importPath : pInfo.importPaths) res.importPaths.maybeInsert(importPath); @@ -1429,8 +1432,10 @@ ViewerContext ModelManagerInterface::getVContext(const ViewerContext &vCtx, info = projectInfoForPath(doc->fileName()); ViewerContext defaultVCtx = defaultVContext(res.language, Document::Ptr(nullptr), false); ProjectInfo defaultInfo = defaultProjectInfo(); - if (info.qtQmlPath.isEmpty()) + if (info.qtQmlPath.isEmpty()) { info.qtQmlPath = defaultInfo.qtQmlPath; + info.qtVersionString = defaultInfo.qtVersionString; + } info.applicationDirectories = Utils::filteredUnique(info.applicationDirectories + defaultInfo.applicationDirectories); switch (res.flags) { diff --git a/src/libs/qmljs/qmljsreformatter.cpp b/src/libs/qmljs/qmljsreformatter.cpp index b71d777dae0..b723f9ff7bd 100644 --- a/src/libs/qmljs/qmljsreformatter.cpp +++ b/src/libs/qmljs/qmljsreformatter.cpp @@ -632,6 +632,8 @@ protected: bool visit(UiPublicMember *ast) override { if (ast->type == UiPublicMember::Property) { + if (ast->isRequired) + out("required ", ast->requiredToken); if (ast->isDefaultMember) out("default ", ast->defaultToken); else if (ast->isReadonlyMember) diff --git a/src/libs/utils/outputformatter.cpp b/src/libs/utils/outputformatter.cpp index eb6e974dff2..6748d881748 100644 --- a/src/libs/utils/outputformatter.cpp +++ b/src/libs/utils/outputformatter.cpp @@ -287,6 +287,7 @@ void OutputFormatter::overridePostPrintAction(const PostPrintAction &postPrintAc void OutputFormatter::doAppendMessage(const QString &text, OutputFormat format) { QTextCharFormat charFmt = charFormat(format); + QList formattedText = parseAnsi(text, charFmt); const QString cleanLine = std::accumulate(formattedText.begin(), formattedText.end(), QString(), [](const FormattedText &t1, const FormattedText &t2) { return t1.text + t2.text; }); @@ -308,8 +309,13 @@ void OutputFormatter::doAppendMessage(const QString &text, OutputFormat format) append(res.newContent.value(), charFmt); return; } - for (const FormattedText &output : linkifiedText(formattedText, res.linkSpecs)) + + const QList linkified = linkifiedText(formattedText, res.linkSpecs); + for (const FormattedText &output : linkified) append(output.text, output.format); + if (linkified.isEmpty()) + append({}, charFmt); // This might cause insertion of a newline character. + for (OutputLineParser * const p : qAsConst(involvedParsers)) { if (d->postPrintAction) d->postPrintAction(p); diff --git a/src/plugins/autotest/boost/boosttestoutputreader.cpp b/src/plugins/autotest/boost/boosttestoutputreader.cpp index d5ce4ab4953..8a1a9cccc81 100644 --- a/src/plugins/autotest/boost/boosttestoutputreader.cpp +++ b/src/plugins/autotest/boost/boosttestoutputreader.cpp @@ -144,6 +144,7 @@ void BoostTestOutputReader::handleMessageMatch(const QRegularExpressionMatch &ma if (m_currentTest.isEmpty() || m_logLevel > LogLevel::UnitScope) m_currentTest = caseFromContent(content); m_result = ResultType::MessageFatal; + ++m_summary[ResultType::MessageFatal]; m_description = content; } else if (content.startsWith("last checkpoint:")) { if (m_currentTest.isEmpty() || m_logLevel > LogLevel::UnitScope) @@ -355,8 +356,9 @@ void BoostTestOutputReader::processOutputLine(const QByteArray &outputLine) sendCompleteInformation(); BoostTestResult *result = new BoostTestResult(id(), m_projectFile, QString()); int failed = match.captured(1).toInt(); + int fatals = m_summary.value(ResultType::MessageFatal); QString txt = tr("%1 failures detected in %2.").arg(failed).arg(match.captured(3)); - int passed = (m_testCaseCount != -1) ? m_testCaseCount - failed : -1; + int passed = qMax(0, m_testCaseCount - failed); if (m_testCaseCount != -1) txt.append(' ').append(tr("%1 tests passed.").arg(passed)); result->setDescription(txt); @@ -364,7 +366,7 @@ void BoostTestOutputReader::processOutputLine(const QByteArray &outputLine) reportResult(TestResultPtr(result)); if (m_reportLevel == ReportLevel::Confirm) { // for the final summary m_summary[ResultType::Pass] += passed; - m_summary[ResultType::Fail] += failed; + m_summary[ResultType::Fail] += failed - fatals; } m_testCaseCount = -1; return; diff --git a/src/plugins/autotest/quick/quicktesttreeitem.cpp b/src/plugins/autotest/quick/quicktesttreeitem.cpp index 7bab504f153..274a4a55cbd 100644 --- a/src/plugins/autotest/quick/quicktesttreeitem.cpp +++ b/src/plugins/autotest/quick/quicktesttreeitem.cpp @@ -400,6 +400,7 @@ QSet QuickTestTreeItem::internalTargets() const void QuickTestTreeItem::markForRemovalRecursively(const QString &filePath) { + TestTreeItem::markForRemovalRecursively(filePath); auto parser = dynamic_cast(framework()->testParser()); const QString proFile = parser->projectFileForMainCppFile(filePath); if (!proFile.isEmpty()) { diff --git a/src/plugins/autotest/testresultmodel.cpp b/src/plugins/autotest/testresultmodel.cpp index 0649ffec3dd..386c22c73c3 100644 --- a/src/plugins/autotest/testresultmodel.cpp +++ b/src/plugins/autotest/testresultmodel.cpp @@ -395,13 +395,10 @@ int TestResultModel::resultTypeCount(ResultType type) const { int result = 0; - for (const auto &resultsForId : m_testResultCount.values()) - result += resultsForId.value(type, 0); - for (const auto &id : m_reportedSummary.keys()) { - if (int counted = m_testResultCount.value(id).value(type)) - result -= counted; - result += m_reportedSummary[id].value(type); + // if we got a result count from the framework prefer that over our counted results + int reported = m_reportedSummary[id].value(type); + result += reported != 0 ? reported : m_testResultCount.value(id).value(type); } return result; } diff --git a/src/plugins/beautifier/beautifierplugin.cpp b/src/plugins/beautifier/beautifierplugin.cpp index 661b41d0165..58e934098e1 100644 --- a/src/plugins/beautifier/beautifierplugin.cpp +++ b/src/plugins/beautifier/beautifierplugin.cpp @@ -218,6 +218,12 @@ QString BeautifierPlugin::msgFormatAtCursor() return tr("&Format at Cursor"); } +QString BeautifierPlugin::msgFormatLines() +{ + //: Menu entry + return tr("Format &Line(s)"); +} + QString BeautifierPlugin::msgDisableFormattingSelectedText() { //: Menu entry diff --git a/src/plugins/beautifier/beautifierplugin.h b/src/plugins/beautifier/beautifierplugin.h index c35ef2ab9a3..b3538820ec9 100644 --- a/src/plugins/beautifier/beautifierplugin.h +++ b/src/plugins/beautifier/beautifierplugin.h @@ -41,6 +41,7 @@ public: static QString msgFormatCurrentFile(); static QString msgFormatSelectedText(); static QString msgFormatAtCursor(); + static QString msgFormatLines(); static QString msgDisableFormattingSelectedText(); static QString msgCommandPromptDialogTitle(const QString &command); static void showError(const QString &error); diff --git a/src/plugins/beautifier/clangformat/clangformat.cpp b/src/plugins/beautifier/clangformat/clangformat.cpp index a0e3a2b3c46..f7a289945fd 100644 --- a/src/plugins/beautifier/clangformat/clangformat.cpp +++ b/src/plugins/beautifier/clangformat/clangformat.cpp @@ -65,6 +65,11 @@ ClangFormat::ClangFormat() menu->addAction(cmd); connect(m_formatFile, &QAction::triggered, this, &ClangFormat::formatFile); + m_formatLines = new QAction(BeautifierPlugin::msgFormatLines(), this); + cmd = Core::ActionManager::registerAction(m_formatLines, "ClangFormat.FormatLines"); + menu->addAction(cmd); + connect(m_formatLines, &QAction::triggered, this, &ClangFormat::formatLines); + m_formatRange = new QAction(BeautifierPlugin::msgFormatAtCursor(), this); cmd = Core::ActionManager::registerAction(m_formatRange, "ClangFormat.FormatAtCursor"); menu->addAction(cmd); @@ -123,6 +128,31 @@ void ClangFormat::formatAtCursor() } } +void ClangFormat::formatLines() +{ + const TextEditorWidget *widget = TextEditorWidget::currentTextEditorWidget(); + if (!widget) + return; + + const QTextCursor tc = widget->textCursor(); + // Current line by default + int lineStart = tc.blockNumber() + 1; + int lineEnd = lineStart; + + // Note that clang-format will extend the range to the next bigger + // syntactic construct if needed. + if (tc.hasSelection()) { + const QTextBlock start = tc.document()->findBlock(tc.selectionStart()); + const QTextBlock end = tc.document()->findBlock(tc.selectionEnd()); + lineStart = start.blockNumber() + 1; + lineEnd = end.blockNumber() + 1; + } + + auto cmd = command(); + cmd.addOption(QString("-lines=%1:%2").arg(QString::number(lineStart)).arg(QString::number(lineEnd))); + formatCurrentFile(cmd); +} + void ClangFormat::disableFormattingSelectedText() { TextEditorWidget *widget = TextEditorWidget::currentTextEditorWidget(); diff --git a/src/plugins/beautifier/clangformat/clangformat.h b/src/plugins/beautifier/clangformat/clangformat.h index 3207f043490..24ce566861d 100644 --- a/src/plugins/beautifier/clangformat/clangformat.h +++ b/src/plugins/beautifier/clangformat/clangformat.h @@ -48,10 +48,12 @@ public: private: void formatFile(); void formatAtCursor(); + void formatLines(); void disableFormattingSelectedText(); TextEditor::Command command(int offset, int length) const; QAction *m_formatFile = nullptr; + QAction *m_formatLines = nullptr; QAction *m_formatRange = nullptr; QAction *m_disableFormattingSelectedText = nullptr; ClangFormatSettings m_settings; diff --git a/src/plugins/coreplugin/outputwindow.cpp b/src/plugins/coreplugin/outputwindow.cpp index 80fb566698b..4c9b162667c 100644 --- a/src/plugins/coreplugin/outputwindow.cpp +++ b/src/plugins/coreplugin/outputwindow.cpp @@ -624,7 +624,7 @@ void Internal::CorePlugin::testOutputFormatter() { const QString input = "B to be handled by B\r\n" - "not to be handled\n" + "not to be handled\n\n\n\n" "A to be handled by A\n" "continuation for A\r\n" "B looks like B, but still continuation for A\r\n" @@ -636,7 +636,7 @@ void Internal::CorePlugin::testOutputFormatter() "B to be handled by B\n"; const QString output = "handled by B\n" - "not to be handled\n" + "not to be handled\n\n\n\n" "handled by A\n" "handled by A\n" "handled by A\n" diff --git a/src/plugins/projectexplorer/project.cpp b/src/plugins/projectexplorer/project.cpp index 1ae6d334709..1a94540ba16 100644 --- a/src/plugins/projectexplorer/project.cpp +++ b/src/plugins/projectexplorer/project.cpp @@ -357,7 +357,8 @@ void Project::setNeedsInitialExpansion(bool needsExpansion) } void Project::setExtraProjectFiles(const QSet &projectDocumentPaths, - const DocGenerator docGenerator) + const DocGenerator &docGenerator, + const DocUpdater &docUpdater) { QSet uniqueNewFiles = projectDocumentPaths; uniqueNewFiles.remove(projectFilePath()); // Make sure to never add the main project file! @@ -371,6 +372,10 @@ void Project::setExtraProjectFiles(const QSet &projectDocumentP Utils::erase(d->m_extraProjectDocuments, [&toRemove](const std::unique_ptr &d) { return toRemove.contains(d->filePath()); }); + if (docUpdater) { + for (const auto &doc : qAsConst(d->m_extraProjectDocuments)) + docUpdater(doc.get()); + } for (const Utils::FilePath &p : toAdd) { if (docGenerator) { std::unique_ptr doc = docGenerator(p); @@ -779,6 +784,7 @@ void Project::createTargetFromMap(const QVariantMap &map, int index) kit->makeReplacementKit(); kit->setup(); }, id); + QTC_ASSERT(k, return); TaskHub::addTask(BuildSystemTask(Task::Warning, tr("Project \"%1\" was configured for " "kit \"%2\" with id %3, which does not exist anymore. The new kit \"%4\" was " "created in its place, in an attempt not to lose custom project settings.") diff --git a/src/plugins/projectexplorer/project.h b/src/plugins/projectexplorer/project.h index 42fd4282c5c..64236a39a26 100644 --- a/src/plugins/projectexplorer/project.h +++ b/src/plugins/projectexplorer/project.h @@ -165,8 +165,10 @@ public: // Set project files that will be watched and by default trigger the same callback // as the main project file. using DocGenerator = std::function(const Utils::FilePath &)>; + using DocUpdater = std::function; void setExtraProjectFiles(const QSet &projectDocumentPaths, - const DocGenerator docGenerator = {}); + const DocGenerator &docGenerator = {}, + const DocUpdater &docUpdater = {}); void setDisplayName(const QString &name); void setProjectLanguage(Utils::Id id, bool enabled); diff --git a/src/plugins/qmakeprojectmanager/qmakeproject.cpp b/src/plugins/qmakeprojectmanager/qmakeproject.cpp index 7d22796d55d..da0df14b706 100644 --- a/src/plugins/qmakeprojectmanager/qmakeproject.cpp +++ b/src/plugins/qmakeprojectmanager/qmakeproject.cpp @@ -126,6 +126,8 @@ public: return true; } + void setPriFile(QmakePriFile *priFile) { m_priFile = priFile; } + private: QmakePriFile *m_priFile; }; @@ -301,15 +303,24 @@ void QmakeBuildSystem::updateDocuments() projectDocuments.insert(n->filePath()); }); - project()->setExtraProjectFiles(projectDocuments, [p = project()](const FilePath &fp) - -> std::unique_ptr { + const auto priFileForPath = [p = project()](const FilePath &fp) -> QmakePriFile * { const Node * const n = p->nodeForFilePath(fp, [](const Node *n) { return dynamic_cast(n); }); - QTC_ASSERT(n, return std::make_unique()); - QmakePriFile * const priFile = static_cast(n)->priFile(); + QTC_ASSERT(n, return nullptr); + return static_cast(n)->priFile(); + }; + const auto docGenerator = [&](const FilePath &fp) + -> std::unique_ptr { + QmakePriFile * const priFile = priFileForPath(fp); QTC_ASSERT(priFile, return std::make_unique()); return std::make_unique(priFile, fp); - }); + }; + const auto docUpdater = [&](Core::IDocument *doc) { + QmakePriFile * const priFile = priFileForPath(doc->filePath()); + QTC_ASSERT(priFile, return); + static_cast(doc)->setPriFile(priFile); + }; + project()->setExtraProjectFiles(projectDocuments, docGenerator, docUpdater); } void QmakeBuildSystem::updateCppCodeModel() diff --git a/src/plugins/qtsupport/qtcreator_tutorials.xml b/src/plugins/qtsupport/qtcreator_tutorials.xml index e4a486efea6..cfb994c4527 100644 --- a/src/plugins/qtsupport/qtcreator_tutorials.xml +++ b/src/plugins/qtsupport/qtcreator_tutorials.xml @@ -195,5 +195,9 @@ qtformcus,mcus,qt,video,NXP IMXRT1050-EVKB,2020 + + + qtformcus,mcus,qt,video,2020 + diff --git a/src/plugins/updateinfo/updateinfoplugin.cpp b/src/plugins/updateinfo/updateinfoplugin.cpp index 0abba718efb..1ca096b07f8 100644 --- a/src/plugins/updateinfo/updateinfoplugin.cpp +++ b/src/plugins/updateinfo/updateinfoplugin.cpp @@ -32,6 +32,7 @@ #include #include #include +#include #include #include #include @@ -159,18 +160,24 @@ void UpdateInfoPlugin::collectCheckForUpdatesOutput(const QString &contents) d->m_collectedOutput += contents; } -static QStringList availableUpdates(const QDomDocument &document) +struct Update +{ + QString name; + QString version; +}; + +static QList availableUpdates(const QDomDocument &document) { if (document.isNull() || !document.firstChildElement().hasChildNodes()) return {}; - QStringList result; + QList result; const QDomNodeList updates = document.firstChildElement().elementsByTagName("update"); for (int i = 0; i < updates.size(); ++i) { const QDomNode node = updates.item(i); if (node.isElement()) { const QDomElement element = node.toElement(); if (element.hasAttribute("name")) - result.append(element.attribute("name")); + result.append({element.attribute("name"), element.attribute("version")}); } } return result; @@ -197,9 +204,14 @@ void UpdateInfoPlugin::checkForUpdatesFinished() Core::ICore::infoBar()->removeInfo(InstallUpdates); startUpdater(); }); - const QStringList updates = availableUpdates(document); + const QList updates = availableUpdates(document); info.setDetailsWidgetCreator([updates]() -> QWidget * { - const QString updateText = updates.join("
  • "); + const QString updateText = Utils::transform(updates, [](const Update &u) { + return u.version.isEmpty() + ? u.name + : tr("%1 (%2)", "Package name and version") + .arg(u.name, u.version); + }).join("
  • "); auto label = new QLabel; label->setText("

    " + tr("Available updates:") + "

    • " + updateText + "

    "); diff --git a/src/plugins/webassembly/webassemblytoolchain.cpp b/src/plugins/webassembly/webassemblytoolchain.cpp index 30c67eb0c55..8369a91675f 100644 --- a/src/plugins/webassembly/webassemblytoolchain.cpp +++ b/src/plugins/webassembly/webassemblytoolchain.cpp @@ -138,7 +138,6 @@ WebAssemblyToolChain::WebAssemblyToolChain() : const CompilerConfiguration configuration = compilerConfiguration(); const QString command = configuration.llvmRoot.toString() + Utils::HostOsInfo::withExecutableSuffix("/clang"); - setLanguage(ProjectExplorer::Constants::CXX_LANGUAGE_ID); setCompilerCommand(Utils::FilePath::fromString(command)); setSupportedAbis({toolChainAbi()}); setTargetAbi(toolChainAbi()); diff --git a/src/shared/proparser/qmakebuiltins.cpp b/src/shared/proparser/qmakebuiltins.cpp index 4084ccd17ed..c74ff4faf0d 100644 --- a/src/shared/proparser/qmakebuiltins.cpp +++ b/src/shared/proparser/qmakebuiltins.cpp @@ -459,8 +459,18 @@ void QMakeEvaluator::runProcess(QProcess *proc, const QString &command) const { proc->setWorkingDirectory(currentDirectory()); # ifdef PROEVALUATOR_SETENV - if (!m_option->environment.isEmpty()) - proc->setProcessEnvironment(m_option->environment); + if (!m_option->environment.isEmpty()) { + QProcessEnvironment env = m_option->environment; + static const QString dummyVar = "__qtc_dummy"; + static const QString notSetValue = "not set"; + const QString oldValue = env.value(dummyVar, notSetValue); // Just in case. + env.insert(dummyVar, "QTCREATORBUG-23504"); // Force detach. + if (oldValue == notSetValue) + env.remove(dummyVar); + else + env.insert(dummyVar, oldValue); + proc->setProcessEnvironment(env); + } # endif # ifdef Q_OS_WIN proc->setNativeArguments(QLatin1String("/v:off /s /c \"") + command + QLatin1Char('"'));