diff --git a/doc/qtdesignstudio/examples/doc/loginui1.qdoc b/doc/qtdesignstudio/examples/doc/loginui1.qdoc index a33f9862006..ebf66aa0aa6 100644 --- a/doc/qtdesignstudio/examples/doc/loginui1.qdoc +++ b/doc/qtdesignstudio/examples/doc/loginui1.qdoc @@ -136,24 +136,24 @@ hidden views, select \uicontrol Window > \uicontrol Views in the Design mode. For more information, see \l {Managing Workspaces}. - To modify \e Screen01.ui.qml in the \uicontrol {Form Editor}: + To modify \e Screen01.ui.qml in \uicontrol {Form Editor}: \list 1 \li Select \e Rectangle in the \uicontrol Navigator view to display its - properties in the \uicontrol Properties view. + 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 the \uicontrol Navigator. - \li In the \uicontrol id field, change its id to \e pageTitle. + \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. - \li In the \uicontrol id field, change its id to \e logo. + \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} @@ -186,8 +186,8 @@ The \uicontrol Library view lists the QML types in each Qt module that are supported by \QDS. You can use the basic types to create your own QML - types, and they will be listed in the \uicontrol {My QML Components} tab. - The tab is only visible if you have created custom QML components. + 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 @@ -196,10 +196,10 @@ \section1 Creating a Push Button You can use another wizard to create a push button and to add it to the - project. The wizard creates a reusable button component that appears in - the \uicontrol {My QML Components} tab in the \uicontrol Library. You can - drag and drop it to the \uicontrol {Form Editor} and modify its properties - in the \uicontrol Properties view to change its appearance and functionality. + project. The wizard creates a reusable button component that appears under + \uicontrol {My QML Components} in \uicontrol Library. You can + 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 to create the kind of push button that you want, you can create your button from scratch using basic @@ -271,8 +271,8 @@ \li On the toolbar, select \uicontrol Master > \uicontrol buttonBackground to move into the button background component. - \li Select the button background in the \uicontrol {Form Editor} or - in the \uicontrol Navigator to display its properties in the + \li Select the button background in \uicontrol {Form Editor} or + \uicontrol Navigator to display its properties in the \uicontrol Properties view. \li In the \uicontrol Color field, select \inlineimage icons/action-icon.png @@ -306,7 +306,7 @@ An object's property can be assigned a static value which stays constant until it is explicitly assigned a new value. In this example, the color - values you set in the \uicontrol {Binding Editor} are static. + values you set in \uicontrol {Binding Editor} are static. However, to make the fullest use of QML and its built-in support for dynamic object behavior, you can use property bindings that specify relationships @@ -330,13 +330,13 @@ You will now add two button instances to the UI and modify their labels. \list 1 - \li Double-click \e Screen01.ui.qml in the \uicontrol Projects - view to open it in the \uicontrol {Form Editor}. - \li Drag and drop two instances of the PushButton type from the - \uicontrol Library to the \uicontrol {Form Editor}. + \li Double-click \e Screen01.ui.qml in \uicontrol Projects + 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" - \li Select one of the buttons in the \uicontrol Navigator to modify - its id and text label in the \uicontrol Properties 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. \li In the \uicontrol Text field, enter \e {Log In} and select \uicontrol tr to mark the text diff --git a/doc/qtdesignstudio/examples/doc/loginui2.qdoc b/doc/qtdesignstudio/examples/doc/loginui2.qdoc index cbc66af9de9..97ca6a2cdd4 100644 --- a/doc/qtdesignstudio/examples/doc/loginui2.qdoc +++ b/doc/qtdesignstudio/examples/doc/loginui2.qdoc @@ -53,7 +53,7 @@ \section1 Anchoring UI Components - First, you will add a new rectangle to the \uicontrol {Form Editor} and move + 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), @@ -71,25 +71,26 @@ To anchor components on a page: \list 1 - \li Open \e {Screen01.ui.qml} for editing in the Design mode - \uicontrol {Form Editor}. + \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, and change its id to \e root 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 - to \e root, and change its id to \e loginPage. - \li In the \uicontrol Layout view, select the \inlineimage anchor-fill.png + 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 the + \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 the \uicontrol Navigator. + \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 (the \e loginPage) with 10-pixel margins. - \li Select \e pageTitle in the \uicontrol Navigator. + corner of its parent (\e loginPage) 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 anchor, and then select the \uicontrol Top button to anchor the @@ -132,32 +133,29 @@ \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 the \uicontrol {Form Editor}. - \li Select one of the text fields in the \uicontrol Navigator, and - change its id to \e usernameField in the \uicontrol Properties view. + 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. \image loginui2-field-properties.png "Text field properties" - \li In the \uicontrol Text field, delete the default text to make the - placeholder text visible on the \uicontrol {Form Editor}. The text - value always takes precedence over the placeholder text value. \li Select the other text field, and change its id to \e passwordField, placeholder text to \e Password, - and width to \e 300 pixels. Also remove the default text. + and width to \e 300 pixels. \endlist You will now position the fields and buttons as columns: \list 1 - \li Select \e usernameField and \e passwordField in the + \li Select \e usernameField and \e passwordField in \uicontrol Navigator, and right-click on either item to open a context menu. \li Select \uicontrol Position > \uicontrol {Position in Column} - to position the fields on top of each other in the + to position the fields on top of each other in \uicontrol {Form Editor}. - \li Select the column in the \uicontrol Navigator and change its id + \li Select the column in \uicontrol Navigator and change its id to \e fieldColumn in \uicontrol Properties. \li In the \uicontrol Spacing field, set the spacing between the fields to 5 pixels. @@ -172,14 +170,14 @@ You will now anchor the field and button columns to the page: \list 1 - \li Select \e fieldColumn in the \uicontrol Navigator. + \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. \li Select the \inlineimage anchor-horizontal-center.png (\uicontrol {Horizontal Center}) button to center the field column horizontally on the page. - \li Select \e buttonColumn in the \uicontrol Navigator. + \li Select \e buttonColumn in \uicontrol Navigator. \li In \uicontrol Properties > \uicontrol Layout, select the \inlineimage anchor-bottom.png (\uicontrol Bottom) button to anchor the bottom of the button diff --git a/doc/qtdesignstudio/examples/doc/loginui3.qdoc b/doc/qtdesignstudio/examples/doc/loginui3.qdoc index b09e9d9a0ab..84e5d06779f 100644 --- a/doc/qtdesignstudio/examples/doc/loginui3.qdoc +++ b/doc/qtdesignstudio/examples/doc/loginui3.qdoc @@ -69,30 +69,27 @@ To add the text field and a back button needed on the registration page: \list 1 - \li Open \e {Screen01.ui.qml} in the Design mode - \uicontrol {Form Editor} for editing. + \li Open \e {Screen01.ui.qml} in \uicontrol {Form Editor} for editing. \li Drag and drop a \uicontrol {Text Field} from \uicontrol Library > \uicontrol {QML Types} > \uicontrol {Qt Quick Controls 2} to - \e fieldColumn in the \uicontrol Navigator. + \e fieldColumn in \uicontrol Navigator. \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. \li In the \uicontrol Placeholder field, set the placeholder text to - \e {Verify password}. - \li In the \uicontrol Text field, delete the default text to make the - placeholder text visible in the \uicontrol {Form Editor}. - \li Drag and drop a PushButton type from the \uicontrol Library, - \uicontrol {My QML Components} tab, to \e loginPage in the + \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 Navigator. - \li Select the button in the \uicontrol Navigator and change its id to + \li Select the button in \uicontrol Navigator and change its id to \e backButton in \uicontrol Properties. \li In the \uicontrol Geometry group, \uicontrol Size field, set the button width to \e 40 pixels. \li In the \uicontrol Text field, enter \e <. \li In the \uicontrol Font group, \uicontrol Size field, set the font size to \e 24 pixels. - \li In the \uicontrol Layout tab, select the \inlineimage anchor-top.png + \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- @@ -127,16 +124,13 @@ the login state. \image loginui3-visibility.png \li Repeat the above step for \e backButton. - \li In the \uicontrol {Text Editor}, add the following line to the - definition of \e root to specify that the application should start - in \e loginState: - \quotefromfile loginui3/Screen01.ui.qml - \skipto Rectangle { - \printuntil state: "loginState" - \li Add another state and name it \e registerState. - \li In this state, reselect the \uicontrol Visibility check box in - \e verifyPasswordField and \e backButton properties to show them - again. + \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 + is applied when the application starts. + \li With the base state selected, add another state and name it + \e registerState. This state should now look identical to the base + state. \li Select \e loginButton in the \uicontrol Navigator, and deselect the \uicontrol Visibility check box to hide the login button in the registration state. @@ -195,8 +189,10 @@ to \e loginState: \list 1 + \li Select \uicontrol Window > \uicontrol Views > + \uicontrol {Connection View} to open the \uicontrol Connection view. \li Select \e registerButton in the \uicontrol Navigator. - \li In the \uicontrol Connections view, select the \inlineimage plus.png + \li In the \uicontrol Connection view, select the \inlineimage plus.png button to add the action that the \c onClicked signal handler of \e registerButton should apply. \li Double-click the value \uicontrol Action column and select diff --git a/doc/qtdesignstudio/examples/doc/loginui4.qdoc b/doc/qtdesignstudio/examples/doc/loginui4.qdoc index 95f8d5819e7..3566eea72b0 100644 --- a/doc/qtdesignstudio/examples/doc/loginui4.qdoc +++ b/doc/qtdesignstudio/examples/doc/loginui4.qdoc @@ -62,8 +62,6 @@ simulate changing pages. To make sure that those changes won't interfere with the changes to the opacity property you will make in Part 4, you will first remove the states. - In addition, you will need to remove the line that sets the default state - from the \e Screen01.ui.qml file in the \uicontrol {Text Editor}. Then, you will add a timeline and insert keyframes for the opacity property to hide the password verification field and back button on the login page @@ -83,23 +81,19 @@ First, you will prepare the page for adding animation: \list 1 - \li Open \e {Screen01.ui.qml} in the Design mode for editing. + \li Open \e {Screen01.ui.qml} in \uicontrol {Form Editor} for editing. \li In the \uicontrol States view, select the \inlineimage close.png (\uicontrol Close) button in \e loginState and \e registerState to remove the states. - \li In the \uicontrol {Text Editor}, remove the following line: - \code - {state: "loginState"} - \endcode - \li Select the fields in \e fieldColumn in the \uicontrol Navigator + \li Select the fields in \e fieldColumn in \uicontrol Navigator and drag and drop them to \e loginPage. - \li Select \e fieldColumn in the \uicontrol Navigator and press + \li Select \e fieldColumn in \uicontrol Navigator and press \key Delete to delete it. - \li Select \e usernameField in the \uicontrol Navigator. + \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 (the \e loginPage). \QDS will suggest an appropriate + of its parent (\e loginPage). \QDS will suggest an appropriate margin based on the current Y-position of the field. \li Select the \inlineimage anchor-horizontal-center.png (\uicontrol {Horizontal Center}) button to anchor @@ -112,7 +106,7 @@ \li Select the \uicontrol {Horizontal Center} button to anchor the horizontal center of \e passwordField to that of \e usernameField. \li Repeat the above steps to anchor the top of \e verifyPasswordField - to the bottom of the \e passwordField with a 5-pixel margin and to + to the bottom of \e passwordField with a 5-pixel margin and to anchor its horizontal center to that of \e passwordField. \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S} to save your changes. @@ -140,11 +134,12 @@ To add a timeline with settings for running the animation: - \image loginui4-timeline-settings.png - \list 1 - \li In the \uicontrol Timeline view, select \inlineimage plus.png + \li Select \uicontrol Window > \uicontrol Views > + \uicontrol Timeline to open the \uicontrol Timeline view. + \li In \uicontrol Timeline, select \inlineimage plus.png to add a 1000-frame timeline and settings for running the animation. + \image loginui4-timeline-settings.png \li In the \uicontrol {Animation ID} field, enter \e toLoginState. \li Deselect the \uicontrol {Running in base state} check box, because you want the animation to run only after the user clicks the @@ -161,15 +156,15 @@ to save the timeline and the animation settings. \endlist - Next, you will record the animation in the \uicontrol Timeline view. + Next, you will record the animation in \uicontrol Timeline. \section2 Inserting Keyframes - You will now insert keyframes and record property changes in the - \uicontrol Timeline view: + You will now insert keyframes and record property changes in + \uicontrol Timeline: \list 1 - \li Select \e backButton in the \uicontrol Navigator. + \li Select \e backButton in \uicontrol Navigator. \li In \uicontrol Properties > \uicontrol Opacity > \uicontrol Settings, select \uicontrol {Insert Keyframe} to insert a keyframe for the opacity property of the button. @@ -185,11 +180,11 @@ \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. - \li Select \e verifyPasswordField in the \uicontrol Navigator, + \li Select \e verifyPasswordField in \uicontrol Navigator, and repeat the above steps to insert a keyframe for the \uicontrol opacity property of the field and to record changes for it. - \li Select the \e loginButton in the \uicontrol Navigator, and repeat + \li Select \e loginButton in \uicontrol Navigator, and repeat the above steps to insert a keyframe for the \uicontrol opacity property of the button and to record changes for it. However, this time the opacity value needs to be 1 in frame 0 and 0 in frame 1000. @@ -208,11 +203,11 @@ To animate the top anchor margin of the verify password field: \list 1 - \li Select \e verifyPasswordField in the \uicontrol Navigator. + \li Select \e verifyPasswordField in \uicontrol Navigator. \li Select \uicontrol Properties > \uicontrol Layout > \uicontrol Margin > \uicontrol {Insert Keyframe} to insert a keyframe for the top anchor margin of \e verifyPasswordField. - \li In the \uicontrol Timeline view, check that the playhead is in + \li In \uicontrol Timeline, check that the playhead is in frame 0, and select the record button for the \e anchors.topMargin property of \e verifyPasswordField. \li In the field next to the property, set a negative value for the @@ -238,7 +233,7 @@ \li Right-click the keyframe marker to open a context menu, and select \uicontrol {Edit Easing Curve} to add an easing curve to the animation. - \li In the \uicontrol {Easing Curve Editor}, select \e easeOutSine. + \li In \uicontrol {Easing Curve Editor}, select \e easeOutSine. \image loginui4-easing-curve.png \li Select \uicontrol OK to close the editor. \endlist @@ -248,7 +243,7 @@ to \inlineimage keyframe_manualbezier_inactive.png . - Your timeline now should look something like this: + Your timeline should now look something like this: \image loginui4-timeline.png "Timeline view with the recorded property changes" @@ -259,14 +254,14 @@ You will now bring back the \l{Adding States}{states} in the \uicontrol States view and bind them to the animation settings - in the \uicontrol Timeline view: + in \uicontrol Timeline: \list 1 - \li In the \uicontrol States view, select the \inlineimage plus.png + \li In \uicontrol States, select the \inlineimage plus.png button twice to add two states called \e loginState and \e registerState. You don't need to make any property changes this time, because you'll bind the states to property animations. - \li In the \uicontrol Timeline view, select the \inlineimage animation.png + \li In \uicontrol Timeline, select the \inlineimage animation.png (\uicontrol {Timeline Settings (S)}) button on the toolbar (or press \key S to open the \uicontrol {Timeline Settings} dialog. \image loginui4-timeline-settings-states.png @@ -309,7 +304,7 @@ All the properties and functions of the QML types from this module are available in the Design mode, and therefore it is enough to learn how to - use the \uicontrol Timeline view, as described in \l {Creating Animations}. + use \uicontrol Timeline, as described in \l {Creating Animations}. \section1 Next Steps