Log In UI - States

Log In UI - States is the third in a series of tutorials 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. The third tutorial in the series describes how to use 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 as users if they do not already have an account.

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

The starting point for this tutorial is the completed Log In UI - Positioning project. You can download the project here.

Additionally, you can download the completed project of this tutorial here.

For more information, see Working with states and Signal and Handler Event System.

Adding UI Components

You will add another entry field for verifying the password that users enter to create an account. You are already familiar with the tasks in this section from the previous Login UI tutorials.

To preview the changes that you make, select the Live Preview button or press Alt+P.

To add the entry field needed on the second page to the Screen01 component:

1. Double-click Screen01.ui.qml in Projects to open it in the 2D view.
2. Drag an instance of the EntryField component from Components > My Components to fields in Navigator.
3. Select the EntryField instance in Navigator to modify its ID and text in Properties.
4. In Component > ID, enter repeatPassword.
5. In EntryField > Button Content > Text, enter Repeat Password and select tr to mark the text translatable.

   

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

Screen01 should now look something like this in the 2D view:

Next, you will add states for the login page and the account creation page, where you use the visibility property to hide the Repeat Password field on the login page and the Create Account button on the account creation page.

Using States to Simulate Page Changes

You will now add states to the UI to show and hide UI components in the 2D view, depending on the current page:

1. In the States view, select .
2. Enter login as the state name.

   

3. Select repeatPassword in Navigator to display its properties in Properties.
4. In the Visibility section, clear the Visible checkbox to hide the Repeat Password field in the login state.

   

5. In States, select Default for login to determine that the login state is applied when the application starts.
6. With the base state selected, add another state and name it createAccount. This state should now look identical to the base state.
7. Select the createAccount button in Navigator to display its properties in Properties.
8. In Visibility, clear the Visible checkbox to hide the Create Account button in the account creation 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, login:

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

Connecting Buttons to States

Components have predefined signals that are emitted when users interact with the UI. The PushButton component contains a Mouse Area component 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 the createAccount button to createAccount state:

1. Select View > Views > Connections to open the Connections view.
2. Select createAccount in Navigator.
3. In the Connections tab, select the button to open the connection setup options.
4. Set Signal to clicked, Action to Change State, State Group to rectangle, and State to createAccount in the respective drop-down menus.
5. Select the button to close the connection setup options.

   

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

   Note: Alternatively, right-click the createAccount button in Navigator. Then select Connections > Add new Connection > clicked > Change State to createAccount.

In the live preview, you can now click the Create Account button to go to the account creation page.

Next Steps

To learn how to use a timeline to animate the transition between the login and account creation pages, see the next tutorial in the series, Log In UI - Timeline.

Files:

• Loginui3/Loginui3.qmlproject
• Loginui3/content/Screen01.ui.qml