Let's follow these steps to get started:

1. First of all, create a new Qt Quick application project, just like we did in the previous recipe.

2. You will see a QML file in your project resources—main.qml. This is where we implement the logic for our application, but we will also need another QML file where we define our user interface.

3. Let's create the QML UI file by going to File | New File or Project, then select QtQuick UI File under Qt category as shown in the following screenshot:

4. Let's call the Component name Main and Component form name MainForm as follows:

5. Once the MainForm.ui.qml file has been created, it will be opened by Qt Creator. You will see an entirely different user interface editor compared to the one we used in previous chapters. This editor is called the Qt Quick Designer, which is used specifically to design user interface for Qt Quick projects. The components of this editor are described as follows:

• • Library: The Library window displays all the predefined QML types that you can add to your user interface canvas. You can also import custom Qt Quick components from the Import tab and display them here.
  • Navigator: The Navigator window displays the items in the current QML file in a tree structure.
  • Connections: You can use the tools provided in the Connections window to connect objects to signals, specify dynamic properties for objects, and create bindings between the properties of two objects.
  • State: The State window displays the different states of an item. You can add a new state for an item by clicking on the + button on the right of the State window.
  • Canvas: The canvas is where you design your program's user interface. You can drag and drop a Qt Quick component from the Library window onto the canvas and instantly see what it will look like in the program.
  • Properties: This is where you change the properties of a selected item.

6. We're about to make a simple login screen. From the Library window, drag two text widgets onto the canvas.

7. Set the Text properties of both the text widgets to Username: and Password::

8. Drag two rectangles from the Library window to the canvas, then drag two text input widgets onto the canvas and parent each of them to the rectangles you just added to the canvas. Set the Border property of the rectangles to 1 and the Radius to 5. Then, set the echo mode of one of the text fields to Password.
9. Now, we're going to manually create a button widget by combining a mouse area widget with a rectangle and a text widget. Drag a mouse area widget onto the canvas, then drag a rectangle and a text widget onto the canvas and parent them both to the mouse area. Set the color of the rectangle to #bdbdbd, then set its Border property to 1 and its Radius to 5. Then, set the text to Login and make sure the size of the mouse area is the same as the rectangle.
10. After that, drag another rectangle onto the canvas to act as the container for the login form so that it will look neat. Set its Border Color to #5e5858 and its Border property to 2. Then, set its Radius property to 5 to make its corners look a little rounded.
11. Make sure the rectangle that we added in the previous step is positioned at the top of the hierarchy in the Navigator window so that it appears behind all the other widgets. You can arrange the widget positions within the hierarchy by pressing the arrow buttons located at the top of the Navigator window as follows:

12. Next, we will export three widgets – mouse area and the two text input widgets – as alias properties of the root item so that later on we can access these widgets from the main.qml file. The widgets can be exported by clicking on the small icon behind the widget name and making sure the icon changes to the On status.
13. By now, your user interface should look something like this:

14. Now let's open up main.qml. Qt Creator will not open this file in Qt Quick Designer by default – instead, it will be opened with the script editor. This is because all the user interface design-related tasks were done in MainForm.ui.qml, and main.qml is only for defining the logic and functions that will be applied to the UI. You can, however, open it with Qt Quick Designer to preview the user interface by clicking on the Design button located in the side bar on the left of the editor.
15. At the top of the script, add the third line to import the dialog module to main.qml, as shown in the following code:

import QtQuick 2.9
import QtQuick.Window 2.3
import QtQuick.Dialogs 1.2

16. After that, replace the following code with this:

Window {
    visible: true
    width: 360
    height: 360
    MainForm {
        anchors.fill: parent
        loginButton.onClicked: {
            messageDialog.text = "Username is " + userInput.text + " and password is " + passInput.text
            messageDialog.visible = true
        }
    }

17. We continue to define messageDialog as follows:

    MessageDialog {
        id: messageDialog
        title: "Fake login"
        text: ""
        onAccepted: {
            console.log("You have clicked the login button")
            Qt.quit()
        }
    }
}

18. Build and run this program on your PC and you should get a simple program that shows a message box when you click on the Login button: