Log In UI - Part 1

Illustrates how to use wizard templates to create a simple UI that contains a text label, push buttons, and a logo.

Log In UI - Part 1 is the first 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 fields. Part 1 describes how to use Qt Design Studio wizard templates to create a Qt Quick project and a button UI control, and how to modify the files generated by the wizard templates to design your own UI.

The Learn Qt Quick sections provide additional information about the tasks performed by the wizards and about the basics of QML and Qt Quick.

Creating the UI Project

For the purposes of this example, you will use the empty wizard template. Wizard templates are available also for creating UIs that are optimized for mobile platforms and for launcher applications. For more information about the options you have, see Creating Projects.

To create a project:

  1. Select File > New File or Project > General > Qt Quick Application - Empty > Choose.
  2. In the Name field, enter loginui1.
  3. In the Create in field, enter the path for the project files
  4. Select Next (or Continue on macOS) to continue to the Define Project Details page.
  5. In the Screen resolution field, select 640 x 480.
  6. Select Finish (or Done on macOS) to create the project.

Your project should now look something like this in the Design mode:

"Log In UI project in the Design mode"

The UI is built using a Rectangle QML type that forms the background and a Text type that displays some text.

Learn Qt Quick - Projects and Files

Qt Design Studio creates a set of boilerplate files and folders that you need to create a UI using Qt Quick and QML. The files are listed in the Projects view. For more information, see Viewing Project Files.

  • The loginui1.qmlproject project file defines that all QML, JavaScript, and image files in the project folder belong to the project. Therefore, you do not need to individually list new files when you add them to the project.
  • The loginui1.qml file defines the functionality of the UI. For the time being, it does not do anything.
  • The Screen01.ui.qml file defines the appearance of the UI. For more information, see Qt Quick UI Forms.
  • The qtquickcontrols2.conf file specifies the selected UI style and some style-specific arguments.
  • The imports folder contains a Constants.qml file that specifies a font loader for the Arial font and a qmldir module definition file that declares the Constant QML type. For more information, see Module Definition qmldir Files. In addition, the QtQuick subfolder contains the Studio components and effects QML types. You can ignore the subfolder for now, because it is not used in this example.

QML files define a hierarchy of objects with a highly-readable, structured layout. Every QML file consists of two parts: an imports section and an object declaration section. The QML types and functionality most common to UIs are provided in the QtQuick import. You can view the QML code of an ui.qml file in the Text Editor view.

For more information about creating a QML file from scratch, see First Steps with QML.

Next, you will edit the properties of the UI elements to create the main page of the UI.

Creating the Main Page

You will now change the properties of the Rectangle type to turn the UI background white and those of the Text type to change the text and to use a larger font size. In addition, you will use the Image type to add the Qt logo to the page.

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

The Screen01.ui.qml file that the wizard template created for you should be open in the Design mode. If it is not, you can double-click it in the Projects view to open it.

Note: The visibility of views depends on the selected workspace. To open hidden views, select View > Views in the Design mode. For more information, see Managing Workspaces.

To modify Screen01.ui.qml in Form Editor:

  1. Select Rectangle in the Navigator view to display its properties in Properties.
  2. In the Color field, select the (Actions) menu, and then select Reset to reset the rectangle background to the default color, white.
  3. Select Text in Navigator.
  4. In the id field, enter the id pageTitle.
  5. In the Text field, enter Qt Account.
  6. In the Font group, Size field, set the font size to 24 pixels.
  7. Drag and drop an Image type from Library > QML Types > Qt Quick Basic to the top-left corner of the rectangle.
  8. In the id field, change the id of the image to logo.
  9. In the Source field, select the (Browse) button to locate the Qt logo image file. Click 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.
  10. Select File > Save or press Ctrl+S to save your changes.

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

"Modified UI in the Design mode"

Learn Qt Quick - QML Types

The Qt Quick module provides all the basic types necessary for creating UIs. It provides a visual canvas and includes types for creating and animating visual components, receiving user input, and creating data models and views.

To be able to use the functionality of Qt Quick types, the wizard template adds the following import statements to the QML files that it creates:

import QtQuick 2.12
import loginui1 1.0

The Library view lists the QML types in each Qt module that are supported by Qt Design Studio. You can use the basic types to create your own QML types, and they will be listed under My QML Components. This section is only visible if you have created custom QML components.

For more information about the Rectangle and Image types used in this example, see Use Case - Visual Elements In QML. For descriptions of all QML types, see All QML Types in the Qt reference documentation.

Creating a Push Button

You can use another wizard template to create a push button and to add it to the project. The wizard template creates a reusable button component that appears under My QML Components in Library. You can drag and drop it to Form Editor and modify its properties in 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 Creating Buttons and Creating Scalable Buttons and Borders.

To create a push button:

  1. Select File > New File or Project > Files and Classes > Qt Quick Controls > Custom Button > Choose.
  2. In the Component name field, enter PushButton.
  3. Select Finish (or Done on macOS) to create the button.

Your button should now look something like this in the Design mode:

"Button in the Design mode."

Learn Qt Quick - Qt Quick Controls

The Custom Button wizard template creates a Button QML type that belongs to the Qt Quick Controls 2 module. It is a push-button control that can be pushed or clicked by the user. Buttons are normally used to perform an action or to answer a question. The Button type inherits properties and functionality from another QML type. These enable you to set text, display an icon, react to mouse clicks, and so on.

To be able to use the functionality of the Button type, the wizard template adds the following import statements to the PushButton.ui.qml file:

import QtQuick 2.10
import QtQuick.Templates 2.1 as T
import loginui1 1.0

The Qt Quick Templates 2 module provides the functionality of the Button type. The module is imported as T, and the alias is added to the Button type definition to indicate that the Button type from the Qt Quick Controls 2 module is used, instead of some other type with the same name.

T.Button {
    id: control

    font: Constants.font
    implicitWidth: Math.max(
                       background ? background.implicitWidth : 0,
                       contentItem.implicitWidth + leftPadding + rightPadding)
    implicitHeight: Math.max(
                        background ? background.implicitHeight : 0,
                        contentItem.implicitHeight + topPadding + bottomPadding)
    leftPadding: 4
    rightPadding: 4

    text: "My Button"
    Rectangle {
        id: buttonBackground
        color: "#41cd52"
        implicitWidth: 100
        implicitHeight: 40
        opacity: enabled ? 1 : 0.3
        border.color: "gray"
        border.width: 1
        radius: 2

Next, you will change the appearance of the button by modifying its properties.

Styling the Button

You can now modify the properties of the PushButton type to your liking. To make the changes apply to all the button instances, you must make them in the PushButton.ui.qml file.

The Custom Button wizard template adds a down state to change the button background and text color when the button is clicked. You will now change the colors in both states.

To change the button properties:

  1. Select the button background in Navigator to display its properties in the Properties view.
  2. In the Color field, select (Actions) > Set Binding and set the button background color to #41cd52.
  3. Press Enter or select OK to save the new value.

    "Binding Editor"

  4. Select the text item in Navigator to display its properties in Properties.
  5. In the Text color field, set the button text color to white (#ffffff).
  6. In the States view, select the down state to set the button text color to white and the background color to a darker shade of green (#21be2b).
  7. Select File > Save or press Ctrl+S to save your changes.

Your button should now look something like this:

"Modified button in the Form Editor"

Learn Qt Quick - Property Bindings

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 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 between different object properties. When a property's dependencies change in value, the property is automatically updated according to the specified relationship.

Behind the scenes, the QML engine monitors the property's dependencies (that is, the variables in the binding expression). When it detects a change, it re-evaluates the binding expression and applies the new result to the property.

For more information, see Property Binding.

Next, you will use the PushButton type in the main UI QML file, Screen01.ui.qml to add two instances of the button to the UI and to modify their text labels.

Adding Buttons to the UI

You will now add two button instances to the UI and modify their labels.

  1. Double-click Screen01.ui.qml in Projects to open it in Form Editor.
  2. Drag and drop two instances of the PushButton type from Library to Form Editor.

    "Library view"

  3. Select one of the buttons in Navigator to modify its id and text label in Properties.
  4. In the Id field, enter loginButton.
  5. In the Text field, enter Log In and select tr to mark the text translatable.
  6. Select the other button, and change its id to registerButton and text label to Create Account. Again, mark the text translatable.
  7. When an element is selected, selection handles are displayed in its corners and on its sides. Use the selection handles to resize the buttons so that the text fits comfortably on the button background. In this example, the button width is set to 120 pixels.
  8. Move the cursor on the selected button to make the selection icon appear. You can now drag the button to another position in the Form Editor. Use the guidelines to align the buttons below the page title:

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

The first iteration of your UI is now ready and should now look something like this in the Design mode and live preview:

"The finished UI in the Design mode"

Learn Qt Quick - QML Ids

Each QML type and each instance of a QML type has an id that uniquely identifies it and enables other objects' properties to be bound to it. 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 The id Attribute.

Next Steps

To learn how to add more UI controls and position them on the page using anchors and layouts so that the UI is scalable, see the next tutorial in the series, Log In UI - Part 2.

For a more advanced example of creating a menu button and using it to construct a button bar, see Side Menu.



Available under certain Qt licenses.
Find out more.