Creating a Kirigami application, the easy way

Νοε 11 2019

Interested in getting started with Kirigami development in a few minutes? Since version 5.63 of the Kirigami framework, there is an easy way to do so: an application template. The template facilitates the creation of a new application, using CMake as the build system, and linking to Kirigami dynamically as a plugin at runtime.

Let's see how it works. As a starting point, we will use a virtual environment running the latest KDE Neon User edition. This is by no means a requirement, any Linux distribution with Kirigami 5.63 or later perfectly fits our needs. KDE Neon has been chosen just because it provides -by design- the latest Qt, KDE frameworks and applications. Moreover, a virtual machine will let us play fearlessly with the system directories.

At first, we install the packages required:

sudo apt install qtbase5-dev build-essential git gcc g++ qtdeclarative5-dev qml-module-qtquick-controls libqt5svg5-dev qtmultimedia5-dev automake cmake qtquickcontrols2-5-dev libkf5config-dev libkf5service-dev libkf5notifications-dev libkf5kiocore5 libkf5kio-dev qml-module-qtwebengine gettext extra-cmake-modules libkf5wallet-dev qtbase5-private-dev qtwebengine5-dev libkf5wallet-dev qt5-default kirigami2-dev kdevelop kapptemplate

We are ready to convert the template to a working application. We will do it in two different ways:

  • Using the KAppTemplate tool
  • With KDevelop

The KAppTemplate way

KAppTemplate, the Qt and KDE template generator, consumes templates and generates source code. After launching KAppTemplate, on the second page of the wizard, we select Kirigami Application. The Kirigami template can be found under Qt > Graphical on the leftmost panel. We also provide a project name, e.g. hellokirigami.

Choose your project Choose your project template

On the last page of the wizard, we set the application directory and, optionally, some details about our application.

Project properties Set the project properties

After clicking to Generate, the source code of our application is created; we are ready to start building it.

cd /home/user/src/hellokirigami
mkdir build
cd build
cmake  ..
make -j4
sudo make install

Since the development environment is a virtual one, we are free to install our application in the system directories. Otherwise, in case of working on the host machine, custom install prefixes would be recommended.

Hello Kirigami Hello Kirigami

Using KDevelop

KDevelop is a full-featured IDE that integrates perfectly with application templates. On the Project menu, after clicking to the New From Template menu item, the application template wizard is shown.

New from template Create a KDevelop project from template

We just select the Qt category on the leftmost panel and Kirigami Application on the right one, and set a project name, e.g. hellokirigami2.

Kirigami template Kirigami template on KDevelop

On the last screen of the template wizard, we may also select a version control system, if needed. Not this time.

Back to KDevelop, we may set a custom installation prefix. Since we are not going to to install anything, we just select Debug as Build type and don't bother with installation prefixes.

KDevelop build dir Set the build directory

The Projects pane enables us to examine the source code file hierarchy, while on the right we can see the code of each file. To test our application, we Build and, finally, Execute our application. Both actions can be found on the main toolbar.

KDevelop build exec Build and execute

Having clicked to Execute, on the Launch Configurations dialog, we Add a new configuration, selecting the scr/hellokirigami2 project target.

Configure launch Set application target on KDevelop

To check how the application will run on Plasma Mobile, we have to configure again a little bit our environment. In particular, on the Run menu, we click to the Configure Launches item. The configuration dialog will be displayed.

Configure environment Launch configurations on KDevelop

Then, we add the following to Environment:

  • QT_QUICK_CONTROLS_MOBILE=true
  • QT_QUICK_CONTROLS_STYLE=Plasma

Set environment variables Set mobile environment variables

We are prompted with the mobile version of our application.

Hello Kirigami Hello Kirigami

That's all. It's time to add your own code bits. Happy hacking!