qskinny/doc/tutorials/03-writing-your-first-application.asciidoc

---
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.
As a prerequisite, a recent Qt version (>= 5.15) should be available. On debian bullseye we need to install
these packages `build-essential cmake qtbase5-dev qtbase5-private-dev qtdeclarative5-dev qtdeclarative5-private-dev libqt5svg5-dev`.
On Debian these packages need to be installed for Qt6: `build-essential cmake
qtbase6-dev qtbase6-private-dev qtdeclarative6-dev qtdeclarative6-private-dev libqt6svg-dev qt6-shadertools`.

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 ../ && make # build
$ sudo make install # install
....

To target a specific Qt version simply pass the cmake build variable `QSK_QT_VERSION` during the build step:

[source,shell]
....
$ cmake -DQSK_QT_VERSION=Qt5 ../ && make
....

=== 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 `myapp.pro` 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(Qt5 REQUIRED COMPONENTS Widgets Quick)
find_package(QSkinny REQUIRED)

add_executable(myapp
    src/main.cpp)

target_link_libraries(myapp PRIVATE
    Qt5::Widgets
    Qt5::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-5/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* horizontalBox = new QskLinearBox( Qt::Horizontal );
    auto* button1 = new QskPushButton( "button 1", horizontalBox );
    auto* button2 = new QskPushButton( "button 2", horizontalBox );

    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.