Using resources in style sheets

Qt provides us with a platform-independent resource system which 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. This is useful if your application always needs a certain set of files (icons, translation files, and so on) and you don't want to run the risk of losing the files. 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 not be created and automatically opened by Qt Creator.

You don't have to edit the .qrc file directly in the XML format as Qt Creator provides you the user interface to manage your resources. To add images and icons to your project, first 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 it can be better managed when you have a ton of resources in your project:

1. Rename the prefix you just created /icons.
2. Then, create another prefix by clicking Add followed by Add Prefix.
3. Rename the new prefix /images.
4. After that, 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. Then, 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:

   
8. After that, open back to our mainwindow.ui file; we will now make use of the resources we have just added to our project. First, we will select the restart button located on the top panel. Then, 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.
9. The Select Resource window will then pop up. Click on the icons prefix on the left panel and then select the restart icon on the right panel. After that, press OK.
10. You will now see a tiny icon appearing on the button. The icon looks very tiny because the default icon size is set at 16x16. Change the iconSize property to 50x50 and you will see the icon appear bigger now.

    Repeat the preceding steps for the shutdown button, except this time we will choose the shutdown icon instead.

11. Once you're done, the two buttons should now look like this:
    
12. Next, we will use the image we added to the resource file as our logo. First, select the logo widget and remove the style sheet that we added earlier to render its outline.
13. Scroll down the property editor until you see the pixmap property.
14. Click the little drop-down button behind the pixmap property and select Choose Resources from the menu. After that, select the logo image and click OK. You will now see the logo size no longer follow the dimension you set previously and follow the actual dimension of the image instead. We cannot change its dimension because this is simply how pixmap works.
15. 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);

16. To obtain the path of the image, right click the image name on the file list window and choose Copy path. The path will be saved to your operating system clipboard and now you can just paste it to the preceding style sheet. Using this method will ensure that the image fits exactly the dimension of the widget that you applied the style to. Your logo should now appear like so:
    
17. Lastly, we will 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 in this case. Instead, we will use the border-image property in a style sheet to achieve this. 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 central widget:

    #centralWidget
    {
      background: rgba(32, 80, 96, 100);
      border-image: url(:/images/login_bg.png);
    }

18. 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, translation files, and so on, 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 into 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 XML format to store the paths of the resource files which are relative to the directory containing it. Do note that the listed resource files must be located in the same directory as the .qrc file, or one of its sub-directories.