# Tutorials {#tutorials}

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

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

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

or

```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**

```
#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
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:

```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 ):

```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**

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

![An app showing two buttons](/doc/tutorials/images/writing-first-application.png)

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.