Introduction to Qt Designer

There are two types of GUI applications in Qt, namely Qt Quick Application and Qt Widgets Application. In this book, we will cover mostly the latter, as it is the standard way of designing a GUI for desktop applications, and Qt Quick is more widely used for mobile and embedded systems:

1. The first thing we need to do is to open up Qt Creator and create a new project. You can do so by either going to File | New File or Project, or by clicking the New Project button located at the welcome screen:

2. After that, a new window will pop up and ask you to pick the type of project you want to create. Choose Qt Widgets Application under the Application category and click Choose..., Then, create a name for your project (I have chosen Chapter2 for mine) and select the project directory by clicking the Browse... button:

3. Next, you will be asked to select a kit for your project. If you are running this on a Windows system and you have Microsoft Visual Studio installed, you can pick the relevant kit with the MSVC compiler; otherwise, choose the one running MinGW compiler. Qt normally comes with MinGW compiler pre-installed so you don't need to download it separately. If you're running this on a Linux system, then you will see the GCC kit, or the Clang kit if you're running this on macOS. To learn more about Kits and Builds Settings, please check out Chapter 15, Cross-Platform Development:

4. After that, the new project wizard will ask you to name your main window class. We'll just go with the default settings and click the Next button to proceed:

5. Finally, you will be asked to link your version control tool to your project. By linking a version control tool to your project, you will be able to keep every revision of your code on a remote server and keep track of all the changes being made to the project. This is especially useful if you're working in a team. In this tutorial, however, we will not be using any version control, so let's just proceed by clicking the Finish button:

6. Once you're done with that, Qt Creator will open up your new project and you will be able to see your project directory displayed at the top left corner, like so:

7. Now, open up mainwindow.ui by double-clicking on it on the project directory panel. Qt Creator will then switch to another mode, called Qt Designer, which is essentially a tool used to design widget-based GUIs for your program. Once Qt Designer is activated, you will see a list of widgets available on the left panel and a place for you to design your GUI on the right. Let's take a bit of time to get ourselves familiar with Qt Designer's interface before we start learning how to design our own UI:

The following numbers represent the UI shown in the preceding screenshot:

1. Menu bar: The menu bar is where you find all the basic functions of Qt Creator, such as to create new projects, save files, change compiler settings, and so on.
2. Widget box: The widget box is sort of like a toolbox, where all the different widgets provided by Qt Designer are being displayed and are ready to be used. You can drag-and-drop any of the widgets from the widget box directly onto the canvas in the form editor and they will appear in your program.

3. Mode selector: The mode selector is where you can quickly and easily switch between source code editing or UI design by clicking the Edit or Design buttons. You can also easily navigate to the debugger and profiler tools by clicking on their respective buttons located on the mode selector panel.
4. Build shortcuts: There are three different shortcut buttons being displayed here—Build, Run, and Debug. You can easily build and test run your application by pressing the buttons here instead of doing so on the menu bar.
5. Form editor: This is where you apply your creative idea and design your application's UI. You can drag and drop any of the widgets from the Widget Box onto the canvas in the Form Editor for it to appear in your program.
6. Form toolbar: The form toolbar is where you can quickly select a different form to edit. You can change to a different form by clicking on the drop-down box located above the widget box and selecting the UI file you want to open with Qt Designer. There are also buttons that allow you to switch between different modes for the form editor and layout of your UI.
7. Object inspector: This is where all the widgets in your current .ui file are being listed in a hierarchical fashion. The widgets are being arranged in the tree list in accordance to its parent-child relationship with other widgets. The widgets' hierarchy can be easily re-arranged by moving it in the form editor.
8. Property editor: When you select a widget from the object inspector window (or from the form editor window), the properties of that particular widget will be displayed on the property editor. You can change any of the properties here and the result will instantly show up on the form editor.
9. Action editor and signals and slots editor: Both the action editor and signals and slots editor are located in this window. You can create actions that are linked to your menu bar and toolbar buttons by using the action editor. The signal and slots editor is where you
10. Output panes: The output panes are where you look for issues or debugging information when testing your application. It consists of several windows that display different information, such as Issues, Search Results, Application Output, and so on.

In a nutshell, Qt provides an all-in-one editor called Qt Creator. Qt Creator works hand-in-hand with several different tools that come with Qt, such as the script editor, compiler, debugger, profiler, and UI editor. The UI editor, which you can see in the preceding screenshot, is called Qt Designer. Qt Designer is the perfect tool for designers to design their program's UI without writing any code. This is because Qt Designer adopted the WYSIWYG (what you see is what you get) approach by providing an accurate visual representation of the final result, which means whatever you design with Qt Designer will turn out exactly the same when the program is compiled and run. Do note that each tool that comes with Qt can, in fact, be run individually, but if you're a beginner or just doing a simple project, it's recommended to just use the Qt Creator, which connects all those tools together in one interface.