3. Writing your first application - The QSkinny UI framework

Writing your first application

Building the QSkinny repository

In this chapter we will write a simple QSkinny application on Linux from scratch in C++ with Qt6. As a prerequisite, a supported Qt6 version should be available.

On debian bullseye we need to install these packages build-essential cmake qtbase6-dev qtbase6-private-dev qtdeclarative6-dev qtdeclarative6-private-dev libqt6svg-dev qt6-shadertools.

Optional packages for the virtual keyboard are libhunspell-dev libimepinyin-dev

Then we can build and install QSkinny to /opt/qskinny with the following commands:

$ git clone https://github.com/uwerat/qskinny.git # clone
$ cd qskinny
$ mkdir build && cd build
$ cmake ..
$ cmake --build .
$ sudo cmake --install . --prefix "/opt/qskinny"

Considering that you want to use a specific Qt version that is installed below "/path/to/qt" you have 2 options:

$ cmake .. -DCMAKE_PREFIX_PATH=/path/to/qt

$ /path/to/qt/bin/qt-cmake ..

Compiling our first app

As a next step, we need to write our app. Let’s start with a simple main.cpp file in a directory myapp:

main.cpp

#include <QskWindow.h>
#include <QGuiApplication>

int main( int argc, char* argv[] )
{
    QGuiApplication app( argc, argv );

    QskWindow window;
    window.show();

    return app.exec();
}

For now this will just create an empty window (the QskWindow) without any controls. Next, we need to create a CMakeLists.txt file in our myapp directory.

CMakeLists.txt

cmake_minimum_required(VERSION 3.27)

project(myapp
    VERSION 1.0.0
    LANGUAGES CXX)

set(CMAKE_CXX_STANDARD 17)
set(CMAKE_CXX_STANDARD_REQUIRED ON)

set(CMAKE_AUTOMOC ON)
set(CMAKE_AUTORCC ON)
set(CMAKE_AUTOUIC ON)

find_package(Qt6 REQUIRED COMPONENTS Quick)
find_package(QSkinny REQUIRED)

add_executable(myapp
    src/main.cpp)

target_link_libraries(myapp PRIVATE
    Qt6::Quick
    Qsk::QSkinny)

Now we can compile our app:

$ cd myapp
$ mkdir build && cd build
$ cmake ../ && make

When running myapp it needs to find the skin plugins. Setting QT_PLUGIN_PATH is one option ( see https://doc.qt.io/qt/deployment-plugins.html ):

$ QT_PLUGIN_PATH=/opt/qskinny/plugins ./myapp

This should show just an empty window.

Adding UI controls

Now that we have our app running, we can add some UI controls to it by extending the main.cpp file we created earlier. We will add some additional include directives, and then create a horizontal layout containing two push buttons. The layout with the two buttons will be shown in the window. Below is the complete updated source file:

main.cpp

#include <QskWindow.h>
#include <QskLinearBox.h>
#include <QskPushButton.h>

#include <QGuiApplication>

int main( int argc, char* argv[] )
{
    QGuiApplication app( argc, argv );

    auto box = new QskLinearBox( Qt::Horizontal );

    /*
        some design systems work with transparencies ( f.e Fluent2 )
        and we need to have a control providing a solid base color
        as bottom layer.
     */
    box->setPanel( true );

    (void) new QskPushButton( "Button 1", box );
    (void) new QskPushButton( "Button 2", box );

    QskWindow window;
    window.addItem( horizontalBox );
    window.show();

    return app.exec();
}

Now the app is displaying the two buttons:

That’s it; you just created a QSkinny application from scratch.

For information on how the controls and layouts above behave, see the next chapters.