diff options
| author | Eike Ziller <eike.ziller@qt.io> | 2020-10-02 10:47:07 +0200 |
|---|---|---|
| committer | Eike Ziller <eike.ziller@qt.io> | 2020-10-02 10:47:07 +0200 |
| commit | 8b031c8c05d68d5154cdbc88b2035c5033c5a0a7 (patch) | |
| tree | 15da073be7c3bdddecd7cf20ecba327a32bb80a4 /doc | |
| parent | 528b634e5a0809060ed598ca2f5dd0a5b93c4128 (diff) | |
| parent | b6b6482c72748b42f2ca0993826d3ff859dc64eb (diff) | |
Merge remote-tracking branch 'origin/4.13' into master
Change-Id: I3f2a6c553819e992da7e9f538dc44b95b482359e
Diffstat (limited to 'doc')
73 files changed, 1603 insertions, 653 deletions
diff --git a/doc/qtcreator/images/qmldesigner-element-properties.png b/doc/qtcreator/images/qmldesigner-element-properties.png Binary files differindex 18239bdf41..84d289378e 100644 --- a/doc/qtcreator/images/qmldesigner-element-properties.png +++ b/doc/qtcreator/images/qmldesigner-element-properties.png diff --git a/doc/qtcreator/images/qtquick-designer-color-picker.png b/doc/qtcreator/images/qtquick-designer-color-picker.png Binary files differindex 541a8a9cac..d5fe52a64f 100644 --- a/doc/qtcreator/images/qtquick-designer-color-picker.png +++ b/doc/qtcreator/images/qtquick-designer-color-picker.png diff --git a/doc/qtcreator/images/qtquick-item-properties-advanced.png b/doc/qtcreator/images/qtquick-item-properties-advanced.png Binary files differnew file mode 100644 index 0000000000..cd9fce22cb --- /dev/null +++ b/doc/qtcreator/images/qtquick-item-properties-advanced.png diff --git a/doc/qtcreator/images/qtquick-item-properties-common.png b/doc/qtcreator/images/qtquick-item-properties-common.png Binary files differnew file mode 100644 index 0000000000..980fef5ea4 --- /dev/null +++ b/doc/qtcreator/images/qtquick-item-properties-common.png diff --git a/doc/qtcreator/images/qtquick-item-properties-layer.png b/doc/qtcreator/images/qtquick-item-properties-layer.png Binary files differnew file mode 100644 index 0000000000..d01df21087 --- /dev/null +++ b/doc/qtcreator/images/qtquick-item-properties-layer.png diff --git a/doc/qtcreator/src/qtcreator-toc.qdoc b/doc/qtcreator/src/qtcreator-toc.qdoc index debfa4cda1..6f647cbf81 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 415a99e10e..526cc001f9 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 0000000000..b620a6e57b --- /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 b356ac9633..02bb87582a 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 - - 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. - - \section2 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 - - \section2 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 - - \section1 Building Transformations on 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. - - For more information on Transform types, see \l{Transform}. + \section1 Specifying Basic Item Properties + + All QML types share a set of properties that you can specify in + \uicontrol Properties. + + \image qtquick-item-properties-common.png "Basic item properties" + + \section2 Type + + 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. + + 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. + + \section2 Id + + 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. + + 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. + + For more information, see \l{The id Attribute}. + + The value of the \uicontrol {Custom id} field specifies the name of an + \l{Annotating Designs}{annotation}. + + \section2 Geometry + + In the \uicontrol Position group, you can set the position of an item on + the x and y axis. + + 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. + + 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. + + The item size and position can also be managed automatically + when \l{Using Layouts}{using layouts}. + + 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}. + + \section2 Visibility + + You can use the properties in the \uicontrol Visibility group to show and + hide items. + + 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. + + 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 3d243c9571..b069337304 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 3905fb06e6..74bc891d71 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 Binary files differindex 1e64ec1b1b..890bf0ce9f 100644 --- a/doc/qtdesignstudio/examples/doc/images/loginui1-align-buttons.png +++ b/doc/qtdesignstudio/examples/doc/images/loginui1-align-buttons.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-background-gradient.png b/doc/qtdesignstudio/examples/doc/images/loginui1-background-gradient.png Binary files differnew file mode 100644 index 0000000000..40564fbb14 --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/images/loginui1-background-gradient.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-binding-editor.png b/doc/qtdesignstudio/examples/doc/images/loginui1-binding-editor.png Binary files differindex abbf16e991..1a053715c7 100644 --- a/doc/qtdesignstudio/examples/doc/images/loginui1-binding-editor.png +++ b/doc/qtdesignstudio/examples/doc/images/loginui1-binding-editor.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-button-styled.png b/doc/qtdesignstudio/examples/doc/images/loginui1-button-styled.png Binary files differindex 5adf709f57..ee8545d6ff 100644 --- a/doc/qtdesignstudio/examples/doc/images/loginui1-button-styled.png +++ b/doc/qtdesignstudio/examples/doc/images/loginui1-button-styled.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-button.png b/doc/qtdesignstudio/examples/doc/images/loginui1-button.png Binary files differindex c0b0cc87d6..a765566fe1 100644 --- a/doc/qtdesignstudio/examples/doc/images/loginui1-button.png +++ b/doc/qtdesignstudio/examples/doc/images/loginui1-button.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-image-properties.png b/doc/qtdesignstudio/examples/doc/images/loginui1-image-properties.png Binary files differnew file mode 100644 index 0000000000..5b7e5e3f68 --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/images/loginui1-image-properties.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-library-assets.png b/doc/qtdesignstudio/examples/doc/images/loginui1-library-assets.png Binary files differnew file mode 100644 index 0000000000..b91d698607 --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/images/loginui1-library-assets.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-library.png b/doc/qtdesignstudio/examples/doc/images/loginui1-library.png Binary files differindex 1183e572cd..6df32f7902 100644 --- a/doc/qtdesignstudio/examples/doc/images/loginui1-library.png +++ b/doc/qtdesignstudio/examples/doc/images/loginui1-library.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-main-page.png b/doc/qtdesignstudio/examples/doc/images/loginui1-main-page.png Binary files differindex 06998bdd51..0cd1558c10 100644 --- a/doc/qtdesignstudio/examples/doc/images/loginui1-main-page.png +++ b/doc/qtdesignstudio/examples/doc/images/loginui1-main-page.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-project-files.png b/doc/qtdesignstudio/examples/doc/images/loginui1-project-files.png Binary files differindex 43a561c54e..bdf136b3f5 100644 --- a/doc/qtdesignstudio/examples/doc/images/loginui1-project-files.png +++ b/doc/qtdesignstudio/examples/doc/images/loginui1-project-files.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-ready.png b/doc/qtdesignstudio/examples/doc/images/loginui1-ready.png Binary files differindex 472dec3001..d02864703e 100644 --- a/doc/qtdesignstudio/examples/doc/images/loginui1-ready.png +++ b/doc/qtdesignstudio/examples/doc/images/loginui1-ready.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-text-properties.png b/doc/qtdesignstudio/examples/doc/images/loginui1-text-properties.png Binary files differnew file mode 100644 index 0000000000..95529fc500 --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/images/loginui1-text-properties.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1.png b/doc/qtdesignstudio/examples/doc/images/loginui1.png Binary files differindex 4971673531..541e8d9b9d 100644 --- a/doc/qtdesignstudio/examples/doc/images/loginui1.png +++ b/doc/qtdesignstudio/examples/doc/images/loginui1.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui2-column-properties.png b/doc/qtdesignstudio/examples/doc/images/loginui2-column-properties.png Binary files differindex 26444afef6..792725e390 100644 --- a/doc/qtdesignstudio/examples/doc/images/loginui2-column-properties.png +++ b/doc/qtdesignstudio/examples/doc/images/loginui2-column-properties.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui2-field-properties.png b/doc/qtdesignstudio/examples/doc/images/loginui2-field-properties.png Binary files differindex cd41dfbe32..f459cb2ae5 100644 --- a/doc/qtdesignstudio/examples/doc/images/loginui2-field-properties.png +++ b/doc/qtdesignstudio/examples/doc/images/loginui2-field-properties.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui2-loginpage-ready.png b/doc/qtdesignstudio/examples/doc/images/loginui2-loginpage-ready.png Binary files differindex af692bf74e..d0bf47b5ad 100644 --- a/doc/qtdesignstudio/examples/doc/images/loginui2-loginpage-ready.png +++ b/doc/qtdesignstudio/examples/doc/images/loginui2-loginpage-ready.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui2-loginpage.png b/doc/qtdesignstudio/examples/doc/images/loginui2-loginpage.png Binary files differindex 0381935b0d..e75a93ddbd 100644 --- a/doc/qtdesignstudio/examples/doc/images/loginui2-loginpage.png +++ b/doc/qtdesignstudio/examples/doc/images/loginui2-loginpage.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui2.png b/doc/qtdesignstudio/examples/doc/images/loginui2.png Binary files differindex 40fae287d4..85025cbf7b 100644 --- a/doc/qtdesignstudio/examples/doc/images/loginui2.png +++ b/doc/qtdesignstudio/examples/doc/images/loginui2.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui3-base-state.png b/doc/qtdesignstudio/examples/doc/images/loginui3-base-state.png Binary files differindex 2966ea7061..202f310d60 100644 --- a/doc/qtdesignstudio/examples/doc/images/loginui3-base-state.png +++ b/doc/qtdesignstudio/examples/doc/images/loginui3-base-state.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui3-connections.png b/doc/qtdesignstudio/examples/doc/images/loginui3-connections.png Binary files differindex 783065d3f4..81886e475b 100644 --- a/doc/qtdesignstudio/examples/doc/images/loginui3-connections.png +++ b/doc/qtdesignstudio/examples/doc/images/loginui3-connections.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui3-login-state.png b/doc/qtdesignstudio/examples/doc/images/loginui3-login-state.png Binary files differindex d738ed3f0f..fe00720aab 100644 --- a/doc/qtdesignstudio/examples/doc/images/loginui3-login-state.png +++ b/doc/qtdesignstudio/examples/doc/images/loginui3-login-state.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui3-states.png b/doc/qtdesignstudio/examples/doc/images/loginui3-states.png Binary files differindex 372c60d6b0..34374504e8 100644 --- a/doc/qtdesignstudio/examples/doc/images/loginui3-states.png +++ b/doc/qtdesignstudio/examples/doc/images/loginui3-states.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui3-visibility.png b/doc/qtdesignstudio/examples/doc/images/loginui3-visibility.png Binary files differindex 858c959942..3b51e10d12 100644 --- a/doc/qtdesignstudio/examples/doc/images/loginui3-visibility.png +++ b/doc/qtdesignstudio/examples/doc/images/loginui3-visibility.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui3.gif b/doc/qtdesignstudio/examples/doc/images/loginui3.gif Binary files differindex f3380d9078..3e4c321e8a 100644 --- a/doc/qtdesignstudio/examples/doc/images/loginui3.gif +++ b/doc/qtdesignstudio/examples/doc/images/loginui3.gif diff --git a/doc/qtdesignstudio/examples/doc/images/loginui4-easing-curve.png b/doc/qtdesignstudio/examples/doc/images/loginui4-easing-curve.png Binary files differindex 8a1eb963ad..3963443bd1 100644 --- a/doc/qtdesignstudio/examples/doc/images/loginui4-easing-curve.png +++ b/doc/qtdesignstudio/examples/doc/images/loginui4-easing-curve.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui4-page.png b/doc/qtdesignstudio/examples/doc/images/loginui4-page.png Binary files differindex 70238a8b85..2743c56b71 100644 --- a/doc/qtdesignstudio/examples/doc/images/loginui4-page.png +++ b/doc/qtdesignstudio/examples/doc/images/loginui4-page.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-opacity.png b/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-opacity.png Binary files differindex de5346276a..c1eda5a125 100644 --- a/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-opacity.png +++ b/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-opacity.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-settings-states.png b/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-settings-states.png Binary files differindex 6085894bf9..6e830752a6 100644 --- a/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-settings-states.png +++ b/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-settings-states.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-settings.png b/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-settings.png Binary files differindex d1affa8d8c..38dbb31de7 100644 --- a/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-settings.png +++ b/doc/qtdesignstudio/examples/doc/images/loginui4-timeline-settings.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui4-timeline.png b/doc/qtdesignstudio/examples/doc/images/loginui4-timeline.png Binary files differindex e983c6f42e..a9fa47c438 100644 --- a/doc/qtdesignstudio/examples/doc/images/loginui4-timeline.png +++ b/doc/qtdesignstudio/examples/doc/images/loginui4-timeline.png diff --git a/doc/qtdesignstudio/examples/doc/images/loginui4.gif b/doc/qtdesignstudio/examples/doc/images/loginui4.gif Binary files differindex 0d51973091..9a28af1fdc 100644 --- a/doc/qtdesignstudio/examples/doc/images/loginui4.gif +++ b/doc/qtdesignstudio/examples/doc/images/loginui4.gif diff --git a/doc/qtdesignstudio/examples/doc/loginui1.qdoc b/doc/qtdesignstudio/examples/doc/loginui1.qdoc index 1f5ab9aa2c..53e76feb66 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 b1ed1e5602..10c43839d2 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 ffdd0546c6..89535b184c 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 c057558d0c..211364cd34 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 cdfd98b3ef..118e83c5ed 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 bdd37b0415..590dcb58c4 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 26a0421c9b..d73cb621b0 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 46f3994cdc..604733f9f8 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 6e013d48cf..ffeaf7181e 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 9995430aaf..3491ac6c96 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 - width: 300 - height: 85 - spacing: 5 - anchors.horizontalCenter: parent.horizontalCenter - anchors.top: parent.top - anchors.topMargin: 200 + 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 + } - TextField { - id: usernameField - width: 300 - placeholderText: qsTr("Username") - font.pointSize: 10 - } + 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: passwordField - width: 300 - placeholderText: qsTr("Password") - font.pointSize: 10 - } + TextField { + id: usernameField + width: 300 + placeholderText: qsTr("Username") + font.pointSize: 10 + } + + TextField { + id: passwordField + width: 300 + placeholderText: qsTr("Password") + font.pointSize: 10 } + } - Column { - id: buttonColumn - anchors.bottom: parent.bottom - anchors.bottomMargin: 50 - spacing: 5 - anchors.horizontalCenter: parent.horizontalCenter + 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: loginButton + width: 120 + text: qsTr("Log In") + } - PushButton { - id: registerButton - width: 120 - text: qsTr("Create Account") - } + 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 b225c50b54..93b247a386 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 2ebf95a89c..9539da8c30 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 - } - - 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 + gradient: Gradient { + GradientStop { + position: 0.5 + color: "#ffffff" } - PushButton { - id: backButton - width: 40 - text: "<" - font.pixelSize: 24 - anchors.right: parent.right - anchors.rightMargin: 10 - anchors.top: parent.top - anchors.topMargin: 20 + GradientStop { + position: 1 + color: "#41cd52" } + } - Column { - id: fieldColumn - 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") - } - } + 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: buttonColumn - anchors.bottom: parent.bottom - anchors.bottomMargin: 50 - spacing: 5 - anchors.horizontalCenter: parent.horizontalCenter - - PushButton { - id: loginButton - width: 120 - text: qsTr("Log In") - } + 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 + } - 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 569a92f2b4..3e2aeef9d1 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 e318223a0b..e57d19c368 100644 --- a/doc/qtdesignstudio/examples/loginui4/Screen01.ui.qml +++ b/doc/qtdesignstudio/examples/loginui4/Screen01.ui.qml @@ -48,135 +48,154 @@ ** $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: backButton - x: 507 - width: 40 - text: "<" + id: loginButton + width: 120 opacity: 1 - anchors.right: parent.right - anchors.rightMargin: 10 - anchors.top: parent.top - anchors.topMargin: 20 - font.pixelSize: 24 + text: qsTr("Log In") } - 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") + PushButton { + id: registerButton + width: 120 + text: qsTr("Create Account") + font.bold: true + + 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 + + Connections { + target: backButton + onClicked: rectangle.state = "loginState" } + } - TextField { - id: passwordField - width: 300 - anchors.horizontalCenter: usernameField.horizontalCenter - anchors.top: usernameField.bottom - anchors.topMargin: 5 - placeholderText: qsTr("Password") - font.pointSize: 10 - } + 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: 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: 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 + startFrame: 0 KeyframeGroup { - target: verifyPasswordField + target: backButton property: "opacity" Keyframe { frame: 0 @@ -184,85 +203,76 @@ Rectangle { } Keyframe { + frame: 1000 value: 1 - frame: 1001 } } KeyframeGroup { - target: loginButton + target: verifyPasswordField property: "opacity" + Keyframe { frame: 0 - value: 1 + value: 0 } Keyframe { frame: 1000 - value: "0" + value: 1 } } KeyframeGroup { - target: verifyPasswordField - property: "anchors.topMargin" - + target: loginButton + property: "opacity" Keyframe { - easing.bezierCurve: [0.39, 0.575, 0.565, 1, 1, 1] - value: 5 - frame: 1001 + frame: 0 + value: 1 } Keyframe { - value: "-40" - frame: 0 + frame: 1000 + value: 0 } } KeyframeGroup { - target: backButton - property: "opacity" + target: verifyPasswordField + property: "anchors.topMargin" Keyframe { frame: 0 - value: 0 + value: -40 } Keyframe { + easing.bezierCurve: [0.39,0.575,0.565,1,1,1] frame: 1000 - value: 1 + value: 5 } } } - - Connections { - target: registerButton - onClicked: { - root.state = "registerState" - } - } - - Connections { - target: backButton - onClicked: { - root.state = "loginState" - } - } 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 Binary files differnew file mode 100644 index 0000000000..744dd71bf4 --- /dev/null +++ b/doc/qtdesignstudio/images/simulink-qt-blockset-receive.png diff --git a/doc/qtdesignstudio/images/simulink-qt-receive-block.png b/doc/qtdesignstudio/images/simulink-qt-receive-block.png Binary files differnew file mode 100644 index 0000000000..c528841c70 --- /dev/null +++ b/doc/qtdesignstudio/images/simulink-qt-receive-block.png diff --git a/doc/qtdesignstudio/images/simulink-qt-send-block.png b/doc/qtdesignstudio/images/simulink-qt-send-block.png Binary files differnew file mode 100644 index 0000000000..7f09551e14 --- /dev/null +++ b/doc/qtdesignstudio/images/simulink-qt-send-block.png diff --git a/doc/qtdesignstudio/images/simulink-qt-send-example-property.png b/doc/qtdesignstudio/images/simulink-qt-send-example-property.png Binary files differnew file mode 100644 index 0000000000..6daf1b5568 --- /dev/null +++ b/doc/qtdesignstudio/images/simulink-qt-send-example-property.png diff --git a/doc/qtdesignstudio/images/studio-binding-editor.png b/doc/qtdesignstudio/images/studio-binding-editor.png Binary files differnew file mode 100644 index 0000000000..9b53435d1f --- /dev/null +++ b/doc/qtdesignstudio/images/studio-binding-editor.png diff --git a/doc/qtdesignstudio/images/studio-connection-view-properties.png b/doc/qtdesignstudio/images/studio-connection-view-properties.png Binary files differnew file mode 100644 index 0000000000..6ce6c3479f --- /dev/null +++ b/doc/qtdesignstudio/images/studio-connection-view-properties.png diff --git a/doc/qtdesignstudio/images/studio-qml-imports-slconnector.png b/doc/qtdesignstudio/images/studio-qml-imports-slconnector.png Binary files differnew file mode 100644 index 0000000000..bfabdc8c52 --- /dev/null +++ b/doc/qtdesignstudio/images/studio-qml-imports-slconnector.png diff --git a/doc/qtdesignstudio/src/qtdesignstudio-advanced.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-advanced.qdoc index afeb074ca7..ab77f1386c 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 d50c6153db..8ef4a01c7f 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 43aed58d93..c9752a0dfe 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 0000000000..109b40d37e --- /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 0000000000..4bed1e63cb --- /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 {<Add Import>} 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 {<id>.<property name>}, 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 41fc8926cf..ee143fc714 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 ae9dda9f96..3c2eba8e2c 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 e89783168b..d9b4e33a50 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 4377402523..8057f8fa5c 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 5f64768056..7a93ea02d0 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 |
