136 lines
3.2 KiB
Plaintext
136 lines
3.2 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.6) should be available. On debian bullseye we need to install
|
|
these packages `build-essential qtbase5-dev qtbase5-private-dev
|
|
qtdeclarative5-dev qtdeclarative5-private-dev libqt5svg5-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
|
|
$ cd qskinny
|
|
$ mkdir build && cd build
|
|
$ cmake ../ && make
|
|
$ sudo make install
|
|
....
|
|
|
|
=== 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(kue 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.
|