Developing Applications with Qt Widgets

Qt has a long history in cross-platform GUI development. With controls for all aspects of GUI design that closely mimic the native platform's controls (or, in many cases, wrap the native platform's controls), it's a versatile choice for any cross-platform development project. For many people, the best way to get started with Qt Widgets is to fool around in Qt Creator's Designer pane, as we did in Chapter 3, Designing Your Application with Qt Designer. If you're the type that likes to read the documentation before you unpack a new toy, this chapter is for you.

In this chapter, you get a whirlwind tour of GUI programming using Qt Widgets. This isn't an exhaustive introduction, but will orient you with Qt Designer and the Qt documentation, helping you get a high-level understanding of what you can do as you set...

Technical requirements

The technical requirements for this chapter include Qt 5.12.3, MinGW 64-bit, Qt Creator 4.9.0, and Windows 10.

Your main application and its menus

In order to use Qt Widgets, you need to do two things. First, you need to ensure that you include the widgets module in your project by adding the following line in your project's .pro file:

QT += widgets 

Second, any file using Qt Widgets should include the QWidgets header as one of its headers. You might also need to include the header files for individual widgets, such as QButton and QMenuBar:

#include <QWidgets> 

Qt provides the QGuiApplication class (a subclass of QCoreApplication) to manage your application's life cycle, including the event loop required by today's GUI platforms. You've already seen QCoreApplication, which we used for our console application in Chapter 1, Getting Started with Qt Creator.

You probably won't do much with QGuiApplication, but there are two signals it offers that are good for...

Creating simple Qt Widgets

Playing with the widgets in Qt Creator is the best way to get a feel for what's available, but it's worth commenting on a few of the classes you're likely to use the most. We've already talked about menus; next, let's look at buttons, text input, and combo boxes. If you're curious what any of these widgets look like, fire up Qt Designer and make one:

Qt's button classes that implement push-buttons, checkboxes, and radio buttons all inherit from the QAbstractButton class. You can drag out any of the concrete subclasses of QAbstractButton in Qt Creator's Designer or instantiate them programmatically. Through QAbstractButton, all buttons have the following properties:

• checkable: This is a Boolean flag indicating whether the button has a checkbox behavior. By default, the value for this property is false.
• checked...

Managing the widget layout with layouts

Qt Widgets includes a robust layout system to control the presentation of widgets on the display. Layouts are basically similar to widgets; they can be placed on an application, get named, become a parent to other widgets, and many others.

However, unlike widgets, their sole purpose is for managing the widgets and their positions in your application. The following screenshot illustrates the purpose of layouts. Do note that we're only showing one type of layout here (a vertical layout), and there are many other types of layouts that we will talk about later:

In Qt Creator Designer, you can pick from the following layouts:

• QBoxLayout: This lays out its view children horizontally or vertically.
• QHBoxLayout: This lays out its view children horizontally.
• QVBoxLayout: This lays out its view children vertically.
• QFormLayout: This lays out...

Model-View-Controller programming with Qt

Writing software is an exercise in managing abstractions. The more you can reason abstractly about your software system, the better off you are. A key abstraction that's been around in the GUI world since the 1970s is the Model-View-Controller (MVC) paradigm. I'll discuss MVC briefly here, but there's a lot written about it on the web, so if it's new to you, you should definitely head over to your favorite search engine and look it up.

In MVC, you divide the code that concerns your user interface into three logical components:

• Model: This is responsible for storing the data to show to the user. It's a container of some kind and has no knowledge of your user interface, how things should be drawn, or which events or methods should be triggered by the user when they interact with your application.
• View: This is responsible...

Rendering web content with QWebEngineView

Qt includes a port of WebEngine, the popular browser implementation behind Chromium and several open source browsers, in its Qt WebEngine module. Using the Qt WebEngine module, your application can display rich HTML, or even be a full-fledged web browser on its own. It's very easy to create hybrid applications that incorporate both features of native applications and the ability to display web content from local resources, the local filesystem, or the internet.

Do note that the Qt WebEngine module only works on MSVC compilers. You will get an error if you use other compilers.

To use the Qt WebEngine module, you must include it in your application by adding the following to your PRO file:

QT += webenginewidgets 

Any source file that accesses the Qt WebEngine widget's classes should also include the interfaces with the following...

Using the model editor

The model editor is a new addition to Qt's toolset. You can use it to create Universal Modeling Language (UML)-style models to visualize how your application would behave. This is one of the good ways to communicate with your programmers or to present your idea to your team. Currently, the model editor is still in the beta testing phase and will be subject to changes in later versions. At the moment, you need to enable it in Qt Creator before you're able to use it. To do this, try the following steps:

1. Go to Help | About Plugins to open up the Installed Plugins window. Make sure that the ModelEditor option has been checked.

2. After that, you can create a new model file by going to File| New File or Project and select either the Model or Scratch Model options under Files and Classes | Modeling. The other option, State Chart, is for state machine...

Enabling LSP on your Qt Creator

The LSP (short for Language Server Protocol) is one of the latest features added to Qt in recent versions. The LSP makes Qt even more powerful by adding supports for other programming languages other than C++ and QML. By providing a client for the LSP, Qt Creator can provide the following features for programming languages that support the LSP:

• Code autocompletion
• Highlighting a symbol when it has a mouseover event
• Code actions
• Inspecting code by viewing the document outline
• Integrating diagnostics from the language server
• Finding references to a symbol
• Navigate to a symbol definition

This extends the usefulness of Qt Creator and removes the barrier that keeps Qt within the C++ realm. You could even write your Python project using Qt Creator and execute the code directly without leaving Qt! So, to enable LSP in Qt Creators, go to Help | About...

Summary

In this chapter, we took a whirlwind tour of the Qt Widgets module. We learned about some of the basic widgets available, and the signals, slots, and properties they provide. We also learned about Qt's application of the MVC paradigm and how, for complex widgets like such as and tree views, Qt separates concerns into a model and a view, letting us implement new data models for our applications, or create new views based on those data models. Then, we learned about Qt's support for the WebEngine browser, letting us build hybrid applications that incorporate the best of JavaScript and HTML with the best of Qt. Finally, we learned about the new additions to Qt Widgets and how they help in application development and language support.

In the next chapter, we move on from widgets to low-level drawing, which we can use to either implement our own widgets or basic pixel...