Qt5 C++ GUI Programming Cookbook
Practical recipes for building cross-platform GUI applications, widgets, and animations with Qt 5, 2nd Edition
- 428 pages
- English
- ePUB (mobile friendly)
- Available on iOS & Android
Qt5 C++ GUI Programming Cookbook
Practical recipes for building cross-platform GUI applications, widgets, and animations with Qt 5, 2nd Edition
About This Book
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.
Frequently asked questions
Information
Look-and-Feel Customization with Qt Designer
- 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
Technical requirements
Using style sheets with Qt Designer
How to do it...
- 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.
- Select Application under the Projects window, and select Qt Widgets Application.
- Click the Choose... button at the bottom. A window will pop out and ask you to insert the project name and its location.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- Click Add Color and choose a color.
- Pick a random color from the color picker window; let's say, a pure red color. Then click OK.
- 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);
- Click the OK button and the text on your push button should have changed to red.
How it works...
- 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.
- 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.
- 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.
- 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.
- 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.
- 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...
Table of contents
- Title Page
- Copyright and Credits
- Packt Upsell
- Contributors
- Preface
- Look-and-Feel Customization with Qt Designer
- Event Handling - Signals and Slots
- States and Animations with Qt and QML
- QPainter and 2D Graphics
- OpenGL Implementation
- Using Network and Managing Large Documents
- Threading Basics - Asynchronous Programming
- Building a Touch Screen Application with Qt5
- XML Parsing Made Easy
- Conversion Library
- Accessing Databases with SQL Driver and Qt
- Develop Web Applications using Qt WebEngine
- Performance Optimization
- Other Books You May Enjoy