In this example, we will learn how to use Qt Quick Designer to design our program's user interface.
- First of all, create a new Qt Quick application project, just like we did in the previous recipe. You can also use the previous project files if you wish to.
- You will see two QML files in your project resources—
main.qmlandMainForm.ui.qml. The former is where we implement the logic for our application, and the latter is where we design our user interface. We will start with the UI design, so let's open upMainForm.ui.qml. Once it's been opened by Qt Creator, you will see an entirely different UI editor compared to the one we used in previous chapters. This editor is called the Qt Quick Designer, which is used specifically to design UI 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 UI 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.
- Select everything under the Rectangle object (mouseArea and Text) in the Navigator window and delete them.
- We're about to make a simple login screen. From the Library window, drag two text widgets onto the canvas.
- Set the text properties of both the text widgets to Username: and Password:
- 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
borderproperty of the rectangles to1and theradiusto5. Then, set theecho modeof one of the text fields toPassword. - 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 itsborderproperty to1and itsradiusto5. Then, set thetexttoLoginand make sure the size of the mouse area is the same as the rectangle. - 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 colorto#5e5858and itsborderproperty to2. Then, set itsradiusproperty to5to make its corners look a little rounded. - 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:
- 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.qmlfile. 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:
- By now, your UI should look something like this:
- Now let's open up
main.qml. Qt Creator will not open this file in Qt Quick Designer by default, but instead, it will be opened with the Script Editor. This is because all the UI design-related tasks were done inMainForm.ui.qml, andmain.qmlis 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 UI by clicking on the Design button located in the side bar on the left of the editor. - At the top of the script, add the third line to import the dialog module to
main.qml, like so:import QtQuick 2.5 import QtQuick.Window 2.2 import QtQuick.Dialogs 1.2
- After that, replace the code below it 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 } } MessageDialog { id: messageDialog title: "Fake login" text: "" onAccepted: { console.log("You have clicked the login button") Qt.quit() } } } - 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:
Since Qt 5.4, a new file extension called .ui.qml has been introduced. The QML engine handles it like the normal .qml files, but forbids any logic implementation to be written in it. It serves as the UI definition template, which can be reused in different .qml files. The separation of UI definition and logic implementation improves the maintainability of QML code and creates a better workflow.
All the widgets under Qt Quick – Basic are the most basic widgets that we can use to mix and match and create a new type of widget. In the previous example, we have learned how to put three widgets together—a text, a mouse area, and a rectangle, to form a button widget.
If you're lazy, however, you can import pre-made modules to your Qt Quick project by going to the Imports tab in the Library window and clicking the <Add Import> button. Then, select the module you want to add to your project from the drop-down list. You can also create your own Qt Quick module once you have advanced in both QML scripting and C++ programming:
We imported QtQuick.dialogs module in main.qml and created a message box that displays the user name and password filled in by the user when the Login button is pressed, so that we can prove that the UI function is working. If the widgets are not exported from MainForm.ui.qml, we will not be able to access its properties in main.qml.
At this point, we can export the program to iOS and Android, but the UI may not look accurate on some of the devices that have higher resolution or higher Density-per-Pixel (DPI) unit. We will cover this issue later on in this chapter.