Log In UI - Part 3

Illustrates how to use states to create a second UI page.

Log In UI - Part 3 is the third in a series of examples that build on each other to illustrate how to use Qt Design Studio 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.

Because the second page will contain most of the same UI elements as the login page, you will use states to show and hide UI elements as necessary when a user selects the Create Account button.

These instructions build on:

The Learn Qt Quick sections provide additional information about the features of QML and Qt Quick that are relevant to the task at hand.

Adding UI Components

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.

To preview the changes that you make to the UI while you make them, select the (Show Live Preview) button on the Form Editor toolbar or press Alt+P.

To add the text field and a back button needed on the registration page:

  1. Open Screen01.ui.qml in the Design mode Form Editor for editing.
  2. Drag and drop a Text Field from Library > QML Types > Qt Quick Controls 2 to fieldColumn in the Navigator.
  3. In Properties, change the id of the text field to verifyPasswordField.
  4. In the Geometry group, Size field, set the width of the field to 300 pixels.
  5. In the Placeholder field, set the placeholder text to Verify password.
  6. In the Text field, delete the default text to make the placeholder text visible in the Form Editor.
  7. Drag and drop a PushButton type from the Library, My QML Components tab, to loginPage in the Navigator.
  8. Select the button in the Navigator and change its id to backButton in Properties.
  9. In the Geometry group, Size field, set the button width to 40 pixels.
  10. In the Text field, enter <.
  11. In the Font group, Size field, set the font size to 24 pixels.
  12. In the Layout tab, select the (Top) and (Right) anchor buttons to anchor backButton to the top right corner of its parent (the loginPage) with 20- and 10-pixel margins, respectively.
  13. Select File > Save or press Ctrl+S to save your changes.

Your page now should look something like this in the Design mode and live preview:

"Login page with new UI components"

Next, you will add states for the login page and the registration page, where you use the visibility property to hide the password verification field and the back button on the login page and the login button on the registration page.

Using States to Simulate Page Changes

You will now add states to the UI to show and hide UI components in the Form Editor:

  1. In the States view, select the button.

    "States view"

  2. Enter loginState as the state name.
  3. Select verifyPasswordField in the Navigator, and deselect the Visibility check box in Properties to hide the verify password field in the login state.

  4. Repeat the above step for backButton.
  5. In the Text Editor, add the following line to the definition of root to specify that the application should start in loginState:
    Rectangle {
        id: root
        state: "loginState"
  6. Add another state and name it registerState.
  7. In this state, reselect the Visibility check box in verifyPasswordField and backButton properties to show them again.
  8. Select loginButton in the Navigator, and deselect the Visibility check box to hide the login button in the registration state.
  9. Select File > Save or press Ctrl+S to save your changes.

You can now see all the states in the States view. The live preview displays the default state, loginState:

"States view"

Learn Qt Quick - States

In Qt Quick, the state of a particular visual item is the set of information which describes how and where the individual component parts of the visual item are displayed within it, and all the data associated with that state. Most visual items in a UI will have a limited number of states, each with well-defined properties.

For example, an element in a list may be either selected or not, and if selected, it may either be the currently active single selection or it may be part of a selection group. Each of those states may have certain associated visual appearance (neutral, highlighted, expanded, and so on).

Qt Quick provides a State type with properties which define its semantics and can be used to trigger behavior or animations. UI components typically have a state property and a default state. The default state contains all of an item's initial property values, and is therefore useful for managing property values before state changes.

UI components can specify additional states by adding new State objects to the state property. Each state within a component has a unique name. To change the current state of an item, the state property is set to the name of the state. State changes can be bound to conditions by using the when property.

For more information, see Qt Quick States.

Next, you will create connections to specify that clicking the Create Account button on the login page triggers a transition to the registration page and that clicking the back button on the registration page triggers a transition to the login page.

Connecting Buttons to States

QML types have predefined signals that are emitted when users interact with the UI. The PushButton QML type contains a MouseArea type that has a clicked signal. The signal is emitted whenever the mouse is clicked within the area.

You will now use the Connections view to connect the clicked signal of registerButton to registerState and that of backButton to loginState:

  1. Select registerButton in the Navigator.
  2. In the Connections view, select the button to add the action that the onClicked signal handler of registerButton should apply.
  3. Double-click the value Action column and select Change state to registerState in the drop-down menu.
  4. Repeat the steps above to connect backButton to loginState by selecting Change state to loginState in the last step.
  5. Select File > Save or press Ctrl+S to save your changes.

You can now see the following connections in the Design mode:

"Connections view"

In the live preview, you can now click the Create Account button to go to the registration page and the back button to return to the login page.

The PushButton type also uses states to change the button background and text color when the button is clicked. Now that clicking buttons performs actions, you will change the background color for the button down state from grey to green to match the color in the normal state that you changed to green in Part 1.

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.

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 corresponding signal handler is invoked. Placing logic such as a script or other operations in the handler allows the component to respond to the event.

For more information, see Signal and Handler Event System.

Next, you will modify the properties of the PushButton type in the text editor.

Changing Button Background Color

You will modify the button background color for the down state of the PushButton type in the PushButton.ui.qml file.

  1. Right-click loginButton in the Navigator and select Go into Component to open PushButton.ui.qml for editing in the Design mode.
  2. Open the Text Editor.
  3. Edit the property values for the down state, to set the button text color to white and the background and border colors to darker shades of green by using the Qt.darker() function:
        states: [
            State {
                name: "normal"
                when: !control.down
                PropertyChanges {
                    target: buttonBackground
                }
            },
            State {
                name: "down"
                when: control.down
                PropertyChanges {
                    target: textItem
                    color: "white"
                }
                PropertyChanges {
                    target: buttonBackground
                    color: Qt.darker("#41cd52", 1.2)
                    border.color: Qt.darker("#21be2b", 1.2)
                }
            }
        ]

    You could also specify all the colors here as fixed values.

  4. Select File > Save or press Ctrl+S to save your changes.

Next Steps

For a more complicated UI, you would typically use QML types that specify a view of items provided by a model, such as a ListView or StackView. For more information, see Using Data Models.

To learn how to use a timeline to animate the transition between the login and registration pages, see the next example in the series, Log In UI - Part 4.

Files:

Images:

Available under certain Qt licenses.
Find out more.