144 lines
3.6 KiB
Plaintext
144 lines
3.6 KiB
Plaintext
---
|
|
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
|
|
QSkinny::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.
|