Qt5 C++ GUI Programming Cookbook

Practical recipes for building cross-platform GUI applications, widgets, and animations with Qt 5, 2nd Edition

Lee Zhi Eng

• Publisher: Packt Publishing
• Year: 2019
• ISBN:
  9781789802528
• Edition: 2
• Topic: Computer Science
• Subtopic: Computer Science General
• Index: Computer Science

Use Qt 5 to design and build functional, appealing, and user-friendly graphical user interfaces (GUIs) for your applications.

Key Features

• Learn to use Qt 5 to design and customize the look and feel of your application
• Improve the visual quality of an application by using graphics rendering and animation
• Understand the balance of presentation and web content that will make an application appealing yet functional

Book Description

With the growing need to develop GUIs for multiple targets and multiple screens, improving the visual quality of your application becomes important so that it stands out from your competitors. With its cross-platform ability and the latest UI paradigms, Qt makes it possible to build intuitive, interactive, and user-friendly user interfaces for your applications.

Qt5 C++ GUI Programming Cookbook, Second Edition teaches you how to develop functional and appealing user interfaces using the latest version of QT5 and C++.This book will help you learn a variety of topics such as GUI customization and animation, graphics rendering, implementing Google Maps, and more. You will also be taken through advanced concepts like asynchronous programming, event handling using signals and slots, network programming, various aspects of optimizing your application.

By the end of the book, you will be confident to design and customize GUI applications that meet your clients' expectations and have an understanding of best practice solutions for common problems.

What you will learn

• Animate GUI elements using Qt5's built-in animation system
• Draw shapes and 2D images using Qt5's powerful rendering system
• Implement an industry-standard OpenGL library in your project
• Build a mobile app that supports touch events and exports it onto devices
• Parse and extract data from an XML file and present it on your GUI
• Interact with web content by calling JavaScript functions from C++
• Access MySQL and SQLite databases to retrieve data and display it on your GUI

Who this book is for

This intermediate-level book is designed for those who want to develop software using Qt 5. If you want to improve the visual quality and content presentation of your software application, this book is for you. Prior experience of C++ programming is required.

Look-and-Feel Customization with Qt Designer

We will cover the following recipes in this chapter:

• Using style sheets with Qt Designer
• Customizing basic style sheets
• Creating a login screen using style sheets
• Using resources in style sheets
• Customizing properties and sub-controls
• Styling in Qt Modeling Language (QML)
• Exposing the QML object pointer to C++

Introduction

Qt 5 allows us to easily design our program's user interface through a method most people are familiar with. Qt not only provides us with a powerful user interface toolkit, called Qt Designer, which enables us to design our user interface without writing a single line of code, but it also allows advanced users to customize their user interface components through a simple scripting language called Qt Style Sheets.

Technical requirements

The technical requirements for this chapter include Qt 5.11.2 MinGW 32 bit, Qt Creator 4.8.2, and Windows 10.

All the code used in this chapter can be downloaded from the following GitHub repository, at: https://github.com/PacktPublishing/Qt5-CPP-GUI-Programming-Cookbook-Second-Edition/tree/master/Chapter01.

Check out the following video to see the code in action: http://bit.ly/2TqQJ3I

Using style sheets with Qt Designer

In this example, we will learn how to change the look and feel of our program and make it look more professional by using style sheets and resources. Qt allows you to decorate your graphical user interfaces (GUIs) using a style sheet language called Qt Style Sheets, which is very similar to Cascading Style Sheets (CSS), used by web designers to decorate their websites.

How to do it...

Let's get started by learning how to create a new project and get ourselves familiar with the Qt Designer:

1. Open up Qt Creator and create a new project. If this is the first time you have used Qt Creator, you can either click the big button, which reads + New Project, or simply go to File | New File or Project.
2. Select Application under the Projects window, and select Qt Widgets Application.
3. Click the Choose... button at the bottom. A window will pop out and ask you to insert the project name and its location.
4. Click Next several times, and click the Finish button to create the project. We will stick with the default settings for now. Once the project has been created, the first thing you will see is the panel with tons of big icons on the left side of the window, which is called the mode selector panel; we will discuss this more later in the How it works... section.
5. You will see all your source files listed on the sidebar panel which is located next to the mode selector panel. This is where you can select which file you want to edit, which in this case is mainwindow.ui, because we are about to start designing the program's UI.

6. Double-click the mainwindow.ui file, and you will see an entirely different interface appear out of nowhere. Qt Creator actually helped you to switch from the script editor to the UI editor (Qt Designer) because it detected the .ui extension on the file you're trying to open.
7. You will also notice that the highlighted button on the mode selector panel has changed from the Edit button to the Design button. You can switch back to the script editor or change to any other tools by clicking one of the buttons located in the upper half of the mode selector panel.
8. Let's go back to the Qt Designer and look at the mainwindow.ui file. This is basically the main window of our program (as the filename implies) and it's empty by default, without any widget on it. You can try to compile and run the program by pressing the Run button (the green arrow button) at the bottom of the mode selector panel, and you will see an empty window pop up once the compilation is complete.
9. Let's add a push button to our program's UI by clicking on the Push Button item in the Widget Box (under the Buttons category) and dragging it to your main window in the form editor. Keep the push button selected, and now you will see all the properties of this button inside the Property Editor on the right side of your window. Scroll down to the middle and look for a property called styleSheet. This is where you apply styles to your widget, which may or may not inherit to its children or grandchildren recursively, depending on how you set your style sheet. Alternatively, you can right-click on any widget in your UI at the form editor and select Change styleSheet... from the pop-up menu.
10. You can click on the input field of the styleSheet property to directly write the style sheet code, or click on the … button beside the input field to open up the Edit Style Sheet window, which has a bigger space for writing longer code for style sheets. At the top of the window, you can find several buttons, such as Add Resource, Add Gradient, Add Color, and Add Font, that can help you to kickstart your coding if you can't remember the properties' names. Let's try to do some simple styling with the Edit Style Sheet window.
11. Click Add Color and choose a color.
12. Pick a random color from the color picker window; let's say, a pure red color. Then click OK.
13. A line of code has been added to the text field on the Edit Style Sheet window, which in my case is as follows:

color: rgb(255, 0, 0);

14. Click the OK button and the text on your push button should have changed to red.

How it works...

Let's take a bit of time to get familiar with Qt Designer's interface before we start learning how to design our own UI:

The explanation for the preceding screenshot is as follows:

1. Menu bar: The menu bar houses application-specific menus that provide easy access to essential functions such as creating new projects, saving files, undoing, redoing, copying, and pasting. It also allows you to access development tools that come with Qt Creator, such as the compiler, debugger, and profiler.
2. Widget Box: This is where you can find all the different types of widget provided by Qt Designer. You can add a widget to your program's UI by clicking one of the widgets from the Widget Box and dragging it to the form editor.

3. Mode selector: The mode selector is a side panel that places shortcut buttons for easy access to different tools. You can quickly switch between the script editor and form editor by clicking the Edit or Design buttons on the mode selector panel, which is very useful for multitasking. You can also easily navigate to the debugger and profiler tools in the same speed and manner.
4. Build shortcuts: The build shortcuts are located at the bottom of the mode selector panel. You can build, run, and debug your project easily by pressing the shortcut buttons here.
5. Form editor: The form editor is where you edit your program's UI. You can add different widgets to your program by selecting a widget from the Widget Box and dragging it to the form editor.
6. Form toolbar: From here, you can quickly select a different form to edit. Click the drop-down box located on top of the Widget Box and select the file you...