Creating a GUI linked to a core shared library

The gallery-core shared library is now ready. Let's see how to create the desktop GUI project. We will create a Qt Widgets application sub-project called gallery-desktop. Only the first steps differ from a classic Qt Widgets application. Right-click on the main project, and select ch04-gallery-desktop | New subproject | Application | Qt Widgets Application | Choose.

You will get a nice multi-projects hierarchy like this:

It is now time to link this gallery-desktop application to the gallery-core. You can edit the file gallery-desktop.pro yourself or use the Qt Creator wizard like this: right-click on the project and select gallery-desktop | Add library | Internal library | gallery-core | Next | Finish. Here is the updated gallery-desktop.pro:

QT       += core gui 
 
TARGET = desktop-gallery 
TEMPLATE = app 
 
SOURCES += main.cpp 
        MainWindow.cpp 
 
HEADERS  += MainWindow.h 
 
FORMS    += MainWindow.ui 
 
win32:CONFIG(release, debug|release): LIBS += -L$$OUT_PWD/../gallery-core/release/ -lgallery-core 
else:win32:CONFIG(debug, debug|release): LIBS += -L$$OUT_PWD/../gallery-core/debug/ -lgallery-core 
else:unix: LIBS += -L$$OUT_PWD/../gallery-core/ -lgallery-core 
 
INCLUDEPATH += $$PWD/../gallery-core 
DEPENDPATH += $$PWD/../gallery-core

The LIBS variable specifies the libraries to link in this project. The syntax is very simple: you can provide library paths with the -L prefix and library names with the -l prefix.

LIBS += -L<pathToLibrary> -l<libraryName>

By default, compiling a Qt project on Windows will create a debug and release sub-directory. That is why a different LIBS edition is created depending on the platform.

Now that the application is linked to the library gallery-core and knows where to find it, we must indicate where the library header files are located. That is why we must add the gallery-core source path to INCLUDEPATH and DEPENDPATH.

To complete all those tasks successfully, qmake offers some useful variables:

  • $$OUT_PWD: The absolute path to the output directory
  • $$PWD: The absolute path of the current .pro file

To ensure that qmake will compile the shared library before the desktop application, we must update the ch04-gallery-desktop.pro file according the following snippet:

TEMPLATE = subdirs 
 
SUBDIRS +=  
    gallery-core  
    gallery-desktop 
 
gallery-desktop.depends = gallery-core

The depends attribute explicitly indicates that gallery-core must be built before gallery-desktop.

Try to always use the depends attribute instead of relying on  CONFIG += ordered, which only specifies a simple list order. The  depends attribute helps qmake process your projects in parallel, if it can be done.

Instead of rushing into coding blindly, we will take some time to think about the UI architecture. We have a lot of features to implement from the gallery-core library. We should split these features into independent QWidgets. The final application will look like this:

Our future gallery desktop is here!

The exapanded view of a photo will look like this:

Double-click on a thumbnail to display it in full size.

To sum up the main UI components:

  • AlbumListWidget: This component lists all existing albums
  • AlbumWidget: This component shows the selected album and its thumbnails
  • PictureWidget: This component displays the picture in full size

This is how we will organize it:

Each widget has a defined role and will handle specific features:

In the core shared library, we used smart pointers with standard containers (vector). Generally, in GUI projects, we tend to only use Qt containers and their powerful parent-child ownership system. This approach seems more appropriate to us. That is why we will rely on Qt containers for the GUI (and won't use smart pointers) in this chapter.

We can now safely begin to create our widgets; all of them are created from Qt Designer Form Class. If you have a memory lapse.

上一章目录下一章