Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Qt5 C++ GUI Programming Cookbook

You're reading from   Qt5 C++ GUI Programming Cookbook Practical recipes for building cross-platform GUI applications, widgets, and animations with Qt 5

Arrow left icon
Product type Paperback
Published in Mar 2019
Publisher Packt
ISBN-13 9781789803822
Length 428 pages
Edition 2nd Edition
Languages
Tools
Arrow right icon
Authors (2):
Arrow left icon
Lee  Z Eng Lee Z Eng
Author Profile Icon Lee Z Eng
Lee Z Eng
Lee Zhi Eng Lee Zhi Eng
Author Profile Icon Lee Zhi Eng
Lee Zhi Eng
Arrow right icon
View More author details
Toc

Table of Contents (15) Chapters Close

Preface 1. Look-and-Feel Customization with Qt Designer FREE CHAPTER 2. Event Handling - Signals and Slots 3. States and Animations with Qt and QML 4. QPainter and 2D Graphics 5. OpenGL Implementation 6. Using Network and Managing Large Documents 7. Threading Basics - Asynchronous Programming 8. Building a Touch Screen Application with Qt5 9. XML Parsing Made Easy 10. Conversion Library 11. Accessing Databases with SQL Driver and Qt 12. Develop Web Applications using Qt WebEngine 13. Performance Optimization 14. Other Books You May Enjoy

Using resources in style sheets

Qt provides us with a platform-independent resource system that allows us to store any type of files in our program's executable for later use. There is no limit to the types of files we can store in our executable images, audio, video, HTML, XML, text files, binary files, and so on are all permitted.

The resource system is really useful for embedding resource files (such as icons and translation files) into the executable so that it can be accessed by the application at any time. To achieve this, we must tell Qt which files we want to add to its resource system in the .qrc file and Qt will handle the rest during the build process.

How to do it

To add a new .qrc file to our project, go to File | New File or Project. Then, select Qt under the Files and Classes category and select Qt Resources File. After that, give it a name (that is, resources) and click the Next button followed by the Finish button. The .qrc file will now be created and automatically opened by Qt Creator. You don't have to edit the .qrc file directly in XML format as Qt Creator provides you the user interface to manage your resources.

To add images and icons to your project, you need to make sure that the images and icons are being placed in your project's directory. While the .qrc file is opened in Qt Creator, click the Add button, followed by Add Prefix button. The prefix is used to categorize your resources so that they can be better managed when you have a ton of resources in your project:

  1. Rename the prefix you just created to /icons.
  2. Create another prefix by clicking Add, followed by Add Prefix.
  3. Rename the new prefix to /images.
  4. Select the /icon prefix and click Add, followed by Add Files.
  5. A file selection window will appear; use that to select all the icon files. You can select multiple files at a time by holding the Ctrl key on your keyboard while clicking on the files to select them. Click Open once you're done.
  6. Select the /images prefix and click the Add button, followed by the Add Files button. The file-selection window will pop up again, and this time we will select the background image.
  7. Repeat the preceding steps, but this time we will add the logo image to the /images prefix. Don't forget to save once you're done by pressing Ctrl + S. Your .qrc file should now look like this:


  1. Go back to the mainwindow.ui file; let's make use of the resources we have just added to our project. Select the restart button located on the top panel. Scroll down the Property Editor until you see the icon property. Click the little button with a drop-down arrow icon and click Choose Resources from its menu.
  1. The Select Resource window will pop up. Click on the icons prefix on the left panel and select the restart icon on the right panel. Press OK.
  2. A tiny icon will appear on the button. The icon looks very tiny because the default icon size is set to 16 x 16. Change the iconSize property to 50 x 50 and you will see the icon appear bigger. Repeat the preceding steps for the shutdown button, except this time, choose the shutdown icon instead.
  3. The two buttons should now look like this:
  1. Let's use the image we added to the resource file as our logo. Select the logo widget and remove the style sheet that we added earlier to render its outline.
  2. Scroll down the Property Editor until you see the pixmap property.
  3. Click the little drop-down button behind the pixmap property and select Choose Resources from the menu. Select the logo image and click OK. The logo size no longer follows the dimension you set previously; it follows the actual dimension of the image instead. We cannot change its dimension because this is simply how the pixmap property works.
  4. If you want more control over the logo's dimension, you can remove the image from the pixmap property and use a style sheet instead. You can use the following code to apply an image to the icon container:
border-image: url(:/images/logo.png);

  1. To obtain the path of the image, right-click the image's name on the file list window and choose Copy path. The path will be saved to your operating system's clipboard and now you can just paste it into the preceding style sheet. Using this method will ensure that the image fits the dimensions of the widget that you applied the style to. Your logo should now appear like that in the following screenshot:


  1. Apply the wallpaper image to the background using a style sheet. Since the background dimension will change according to the window size, we cannot use pixmap here. Instead, we will use the border-image property in a style sheet. Right-click the main window and select Change styleSheet... to open up the Edit Style Sheet window. We will add a new line under the style sheet of the centralWidget:
#centralWidget {
background: rgba(32, 80, 96, 100);
border-image: url(:/images/login_bg.png);
}
  1. It's really that simple and easy! Your login screen should now look like this:


How it works...

The resource system in Qt stores binary files, such as images and translation files, in the executable when it gets compiled. It reads the resource collection files (.qrc) in your project to locate the files that need to be stored in the executable and include them in the build process. A .qrc file looks something like this:

<!DOCTYPE RCC><RCC version="1.0">
<qresource>
<file>images/copy.png</file>
<file>images/cut.png</file>
<file>images/new.png</file>
<file>images/open.png</file>
<file>images/paste.png</file>
<file>images/save.png</file>
</qresource>
</RCC>

It uses the XML format to store the paths of the resource files, which are relative to the directory that contains them. The listed resource files must be located in the same directory as the .qrc file, or one of its subdirectories.

You have been reading a chapter from
Qt5 C++ GUI Programming Cookbook - Second Edition
Published in: Mar 2019
Publisher: Packt
ISBN-13: 9781789803822
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime
Banner background image