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

The Learn More sections provide additional information about the tasks performed by the wizards and about other basic tasks and concepts.

Creating the UI Project

For the purposes of this tutorial, 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 the project name: loginui1. When naming your own projects, keep in mind that they cannot be easily renamed later.
  3. In the 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.
  4. Select Next (or Continue on macOS) to continue to the Define Project Details page.
  5. In the Screen resolution field, select the initial size of the UI. In this tutorial, we use the smallest predefined size, 640 x 480. You can easily change the screen size later in Properties.
  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 wizard constructs the Screen01 component using instances of a Rectangle component that forms the background and a Text component that displays some text.

Note: The visibility of views depends on the selected workspace, so your Qt Design Studio might look somewhat different from the above image. To open hidden views, select View > Views in the Design mode. For more information about moving views around, see Managing Workspaces.

Learn More - Projects and Files

Qt Design Studio creates a set of boilerplate files and folders that you need to create a UI. The files are listed in the Projects view.

  • The loginui1.qmlproject project file defines that all component, 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 is a custom component created by the wizard template. For more information, see UI Files.
  • 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 component. For more information, see Module Definition qmldir Files. The EventListModel.qml and EventListSimulator.qml files are not used in this example, so you can ignore them for now.

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

Next, you will edit the values of the properties of the component instances to create the main page of the UI.

Creating the Main Page

You will now change the values of the properties of the Rectangle component instance to add a gradient to the UI background and those of the Text component instance 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 add an image to your UI, you should first click here to open the Qt logo in a browser and save it as a file on your computer. Next, you need to add the image to Library:

  1. Select Library > Assets > .
  2. Select the image file, and then select Open.
  3. Select the location where the image will be saved in the Add Resources dialog.
  4. Select OK.

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.

To modify the Screen01 component in Form Editor:

  1. Select the Rectangle instance in the Navigator view to display its properties in the Properties view.
  2. In the Color field, select the (Linear Gradient) button to add a linear gradient to the screen background. Click the start point (1) and end point (2) to specify the gradient colors. Drag-and-drop the points along the gradient bar to specify where the gradient starts and ends. In this tutorial, the color changes from white to green (#41cd52), starting mid-screen, at position 0.5. You can use your favorite colors or select a predefined gradient in the Gradient Picker. For more information, see Picking Gradients.

    "Rectangle color properties"

  3. Select Text in Navigator to display its properties in Properties.
    1. In the ID field, enter the ID pageTitle, so that you can easily find the title component in Navigator and other Qt Design Studio views.

      "Text properties"

    2. In the Text field, enter the page title: Qt Account.
    3. In the Font group, Size field, set the font size of the title: 24 pixels.

      "Font properties"

    4. In the Font style field, select the B button to use a strong font.
  4. Drag-and-drop the Qt logo from Library > Assets to the top-left corner of the rectangle.

    "Library view Assets tab"

    Qt Design Studio automatically creates an instance of the Image component for you with the path to the image file set as the value of the Source field in Properties.

    "Image properties"

  5. In the ID field, change the ID of the image to logo.
  6. Select File > Save or press Ctrl+S to save your changes.

Your UI should now look something like this in Form Editor and live preview:

"Modified UI in the Design mode"

Learn More - Components

Qt Design Studio provides preset components for creating UIs, including components for creating and animating visual components, receiving user input, and creating data models and views.

To be able to use the functionality of preset components, the wizard template adds the following import statements to the UI files (.ui.qml) that it creates:

import QtQuick 2.15
import QtQuick.Studio.Components 1.0
import QtQuick.Controls 2.15

You can view the import statements in the Text Editor view.

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

The Rectangle, Text, and Image components used in this tutorial are based on the Item component. It is the base component for all visual elements, with implementation of basic functions and properties, such as component name, ID, position, size, and visibility.

For more information, see Use Case - Visual Elements In QML. For descriptions of all components, see All QML Types in the Qt reference documentation.

Regtangle Properties

The default Rectangle component is used for drawing shapes with four sides and four 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 Rectangle component from the Qt Quick Studio Components module instead of the basic rectangle component. It is available in Library > Components > Qt Quick Studio Components.

Text Properties

The Text component 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 component, such as size in points or pixels, weight, style, and spacing.

To add custom fonts in the list of available fonts in Properties:

  1. Select Library > Assets > .
  2. Browse to the folder that contains the font files and select them, and then select Open.
  3. Select the location where the file will be saved in the Add Resources dialog.
  4. Select OK to save the fonts.

If you want to create a label with a background, use the Label component from the Qt Quick Controls module instead of the Text component.

Image Properties

The Image component 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. To add an image you wish to use in your designs to Library, select Library > Assets > , and then select the image file.

If you need to display animated images, use the Animated Image component, also available in Library > Components > Default Components > Basic.

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 in Library > Components > My Components. You can drag-and-drop it to Form Editor to create button instances and modify their properties in the Properties view to change their appearance and functionality.

If you find that you cannot use the wizard template nor the preset button controls available in Library > Components > Qt Quick Controls to create the kind of push button that you want, you can create your button from scratch using default components. For more information, see Creating Buttons and Creating Scalable Buttons and Borders.

To create a push button by using the wizard template:

  1. Select File > New File or Project > Files and Classes > Qt Quick Controls > Custom Button > Choose.
  2. In the Component name field, enter a name for your button component: 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 More - UI Controls

The Custom Button wizard template creates a button component based on the Button control in the Qt Quick Controls 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 properties and functionality inherited from the Button component 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 control, the wizard template adds the following import statements to the PushButton.ui.qml file:

import QtQuick 2.15
import QtQuick.Controls 2.12

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

Styling the Button

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

The Custom Button wizard template adds a normal state and a down state to change the button background and text color when the button is clicked. You will now change the colors in all states. When you make changes to the button in the base state, they are automatically applied to the other states. However, the property values that have been explicitly changed in the normal or down state are not changed automatically and you have to change them separately in that state.

To change the button property values:

  1. Select the button background in Navigator to display its properties in Properties.
  2. In the Color field, select to use a solid background color (white) instead of transparent.
  3. In the Border Color field, select (Actions) > Set Binding to use the gradient color (#41cd52) as the border color. You can also use the color picker to change the color.

    "Binding Editor"

  4. Press Enter or select OK to save the new value.
  5. In the Radius field, enter 20 to give the button rounded corners.
  6. In the States view, select the normal state and set the background color to white and the border color to green, as instructed above. Repeat for the down state.
  7. Select the base state, and then select the text component in Navigator to display its properties in Properties.
  8. In the Text Color field, select Actions > Reset to reset the text color to the default color, black.
  9. In the Font style field, select the B button to use the strong font.
  10. In the States view, select the down state to set the button text color to the same green as the border.
  11. 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 More - Property Bindings

A component's property can be assigned a static value which stays constant until it is explicitly assigned a new value. In this tutorial, the color values you set in Binding Editor are static.

However, to make the fullest use of the built-in support for dynamic component behavior, you can use property bindings that specify relationships between different component properties. When a property's dependencies change in value, the property is automatically updated according to the specified relationship.

Behind the scenes, the property's dependencies are monitored (that is, the variables in the binding expression). When a change is detected, the binding expression is re-evaluated and the new result is applied to the property.

For more information, see Property Binding.

Next, you will add two instances of the PushButton component to the Screen01 component and modify their text labels.

Adding Buttons to the UI

You will now add two PushButton 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 component from Library > Components > My Components to Form Editor.

    "My Components tab of Library view"

  3. Select one of the PushButton instances 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 PushButton instance, and change its ID to registerButton and text label to Create Account. Again, mark the text translatable.
  7. When a component instance is selected, selection handles are displayed in its corners and on its sides. Use the selection handles to resize the button instances so that the text fits comfortably on the button background. In this tutorial, the button width is set to 120 pixels.
  8. Move the cursor on the selected button instance to make the selection icon appear. You can now drag the button instance to another position in Form Editor. Use the guidelines to align the button instances 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 Form Editor and live preview:

"The finished UI in Form Editor"

Learn More - Component IDs

Each component and each instance of a component has an ID that uniquely identifies it and enables other components' 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.

Files:

Images:

Available under certain Qt licenses.
Find out more.