920f7e24d6
... by making the references absolute. Now they should work both on github and on the homepage. Resolves #414
165 lines
3.7 KiB
Plaintext
165 lines
3.7 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 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::/doc/tutorials/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.
|