153 lines
3.6 KiB
Markdown
153 lines
3.6 KiB
Markdown
# 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:
|
||
|
||
|
||
|
||
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.
|