---
title: 3. Writing your first application
layout: docs
---

:doctitle: 3. Writing your first application
:notitle:

== 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:

[source,shell]
....
$ 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:

[source,shell]
....
$ cmake .. -DCMAKE_PREFIX_PATH=/path/to/qt
....

or

[source,shell]
....
$ /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
[source]
....
#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
[source,cmake]
....
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:

[source,shell]
....
$ 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 ):

[source,shell]
....
$ 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
[source, 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:

image::../images/writing-first-application.png[An app showing 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.