Налаштовування і перші кроки

Готуємося до створення нашої першої програми Kirigami

Встановлення потрібних пакунків

Перш ніж починати щось робити, нам слід дещо встановити. Нам знадобиться компілятор C++, пакунки для розробки Qt та Kirigami.

В Ubuntu, Debian та Neon ми можемо встановити ці пакунки за допомогою APT:

sudo apt install build-essential extra-cmake-modules cmake qtbase5-dev qtdeclarative5-dev libqt5svg5-dev qtquickcontrols2-5-dev qml-module-org-kde-kirigami2 kirigami2-dev libkf5i18n-dev gettext libkf5coreaddons-dev qml-module-qtquick-layouts

У заснованих на Arch дистрибутивах (зокрема Manjaro) ми можемо скористатися Pacman:

sudo pacman -Syu base-devel extra-cmake-modules cmake kirigami2 kde-sdk-meta gettext

У Fedora ми користуємося DNF:

sudo dnf groupinstall "Development Tools" "Development Libraries"
sudo dnf install extra-cmake-modules cmake qt5-qtbase-devel qt5-qtdeclarative-devel qt5-qtquickcontrols2-devel kf5-kirigami2 kf5-kirigami2-devel kf5-ki18n-devel kf5-kcoreaddons-devel gettext

Подальші відомості для інших дистрибутивів наведено тут.

Структура проєкту

Хоча існують інструменти, за допомогою яких можна просто налаштувати наші файли, ми створимо їх вручну. Це надасть нам змогу краще зрозуміти частини, з яких буде створено нашу нову програму.

Спочатку ми створимо теку нашого проєкту. Назвемо цю теку «helloworld».

helloworld
├── CMakeLists.txt
└── src
    ├── CMakeLists.txt
    ├── contents
    │   └── ui
    │       └── main.qml
    ├── main.cpp
    └── resources.qrc

У цій теці ми створимо теку src і файл CMakeLists.txt. Зазвичай, вважається за правило розташовувати усі файли основного коду у теці src. У нашій теці src міститиметься тека contents, яка міститиме теку із назвою ui. Там ми створимо наші файли QML.

Це загальні угоди KDE, але ця структура використовується не в усіх проєктах KDE. Ви можете скомпонувати ваші частини програми інакше, але це слід взяти до уваги при створенні ваших файлів CMakeLists.txt і resources.qrc.

main.qml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// Includes relevant modules used by the QML
import QtQuick 2.6
import QtQuick.Controls 2.0 as Controls
import QtQuick.Layouts 1.2
import org.kde.kirigami 2.13 as Kirigami

// Base element, provides basic features needed for all kirigami applications
Kirigami.ApplicationWindow {
    // ID provides unique identifier to reference this element
    id: root

    // Window title
    // i18nc is useful for adding context for translators, also lets strings be changed for different languages
    title: i18nc("@title:window", "Hello World")

    // Initial page to be loaded on app load
    pageStack.initialPage: Kirigami.Page {

        Controls.Label {
            // Center label horizontally and vertically within parent element
            anchors.centerIn: parent
            text: i18n("Hello World!")
        }
    }
}

Тут ми працюватимемо із оболонкою нашої програми.

Якщо ви трохи знаєте Javascript, більша частина QML видасться вам знайомою (хоча тут є свої особливості). У документації до Qt є багато матеріалу щодо цієї мови, якщо вам захочеться спробувати щось самостійно. Вивчаючи курс підручника, ми зосередимося на нашому коді QML, де ми використовуватимемо Kirigami, щоб отримати максимальні переваги від цього.

Тепер зосередимо увагу на main.qml. Спочатку ми імпортуємо декілька важливих модулів:

QtQuick, стандартну бібліотеку, яку використовують програми QML.
QtQuick Controls, які забезпечують роботу декількох стандартних засобів керування, якими ми можемо скористатися для того, щоб зробити наші програми інтерактивними.
QtQuick Layouts, які містять інструменти для розташовування компонентів у вікні програм.
Kirigami, яка містить декілька компонентів, які пристосовано для створення програм, що можуть працювати на різних пристроях і екранах з різними формами та розмірами.

Далі, ми перейдемо до нашого базового елемента, Kirigami.ApplicationWindow , який надає певні базові можливості, потрібні для усіх програм Kirigami. Це вікно, які міститиме усі наші сторінки, основні розділи нашого інтерфейсу користувача.

Далі, ми встановимо для властивості id Kirigami.ApplicationWindow значення 'root'. Ідентифікатори є корисними, оскільки за їх допомогою ми отримуємо унікальну прив'язку до компонента, навіть коли у нас є декілька компонентів одного типу.

Ми також встановимо для властивості вікна title значення «Hello World». Ми зауважимо, що рядок «Hello World» огорнуто у функцію із назвою i18nc. У цій функції ми деталізуємо контекст рядка, а також вказуємо сам рядок.

Нотатка

Функції i18n() роблять вашу програму придатною до перекладу, оскільки вони повертають версію переданого їм рядка мовою користувача (якщо вашу програму перекладено відповідною мовою). Користувач із англійською мовою інтерфейсу бачитиме заголовок вікна «Hello World», а користувач із іспанською мовою інтерфейсу — «Hola Mundo».

i18nc() побудовано на основі функції i18n(). Ця функція уможливлює для розробників надання перекладачам, які працюватимуть над перекладом програми, певного контексту. Ось чому ми включили рядок «@title» перед рядком «Hello World».

Далі, ми визначаємо першу сторінку нашого стосу сторінок. Більшість програм Kirigami упорядковано як стос сторінок — кожну сторінку призначено для виконання окремого завдання. У нашому прикладі ми створимо простий стос, який складатиметься із однієї сторінки. За допомогою pageStack.initialPage: Kirigami.Page{...} ми задаємо для першої сторінки, яку буде показано після завантаження програми, значення Kirigami.Page. Відповідна сторінка міститиме усі наші дані.

Нарешті, ми включаємо до нашої сторінки Controls.Label, яка надасть нам змогу розмістити на нашій сторінці текст. Ми використовуємо anchors.centerIn: parent для центрування нашої мітки горизонтально і вертикально у нашому батьківському елементі. У цьому випадку батьківським для компонента Controls.Label буде компонент Kirigami.Page. Нарешті, ми маємо встановити для мітки текст: text: i18n("Hello World!").

main.cpp

main.cpp обробляє «ділову логіку» нашої програми. Мова C++ є зручною для цього, оскільки вона є гнучкою і швидкою, хоча і потребує більше знань, ніж деякі інші мови програмування.

main.cpp є також вхідним пунктом нашої програми. Тут налаштовуються і запускаються обидві частини нашого проєкту — модуль обробки і інтерфейс користувача.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
#include <QApplication>
#include <QQmlApplicationEngine>
#include <QtQml>
#include <QUrl>
#include <KLocalizedContext>
#include <KLocalizedString>

int main(int argc, char *argv[])
{
    QGuiApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    QApplication app(argc, argv);
    KLocalizedString::setApplicationDomain("helloworld");
    QCoreApplication::setOrganizationName(QStringLiteral("KDE"));
    QCoreApplication::setOrganizationDomain(QStringLiteral("kde.org"));
    QCoreApplication::setApplicationName(QStringLiteral("Hello World"));

    QQmlApplicationEngine engine;

    engine.rootContext()->setContextObject(new KLocalizedContext(&engine));
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

    if (engine.rootObjects().isEmpty()) {
        return -1;
    }

    return app.exec();
}

До цього моменту у нас не було потреби заглиблюватися у подробиці дій, які виконує код нашого main.cpp, але його роль значно зросте, якщо ми вирішимо додати складні функціональні можливості до нашої програми у майбутньому. Якщо ви вирішите продовжити, ви можете дізнатися більше щодо того, як працює цей main.cpp, з цієї сторінки.

resources.qrc

resources.qrc містить список усіх файлів QML, а також усіх інших файлів (зокрема нетипових піктограм), які буде включено до виконуваного файла.

1
2
3
4
5
<RCC>
    <qresource prefix="/">
        <file alias="main.qml">contents/ui/main.qml</file>
    </qresource>
</RCC>

Зауважте рядок <file alias="main.qml">contents/ui/main.qml</file>. Цей рядок вказує, які файли QML буде включено у процесі компіляції. У нашому випадку ми використовуємо лише main.qml, але якщо б нам захотілося додати до нашого коду інші файли QML, нам довелося б включити їх до resources.qrc додаванням подібних рядків.

Дізнатися більше про специфіку того, як працює систем ресурсів Qt, можна з документації Qt.

CMakeLists.txt

Для використання вибраної системи збирання KDE, CMake, потрібні файли CMakeLists.txt. Файл CMakeLists.txt у нашій теці верхнього рівня має вказати певні характеристики нашої програми. До цього файла також включено записи певних залежностей, які нам потрібні під час компіляції.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
cmake_minimum_required(VERSION 3.16)
project(helloworld)

set(KF_MIN_VERSION "5.68.0")
set(QT_MIN_VERSION "5.12.0")

find_package(ECM ${KF_MIN_VERSION} REQUIRED NO_MODULE)

set(CMAKE_MODULE_PATH ${ECM_MODULE_PATH})

include(KDEInstallDirs)
include(KDECMakeSettings)
include(KDECompilerSettings NO_POLICY_SCOPE)

find_package(Qt5 ${QT_MIN_VERSION} REQUIRED NO_MODULE COMPONENTS Core Quick Test Gui QuickControls2 Widgets)
find_package(KF5 ${KF_MIN_VERSION} REQUIRED COMPONENTS Kirigami2 I18n CoreAddons)

set(CMAKE_CXX_STANDARD 17)
set(CMAKE_CXX_STANDARD_REQUIRED ON)

add_subdirectory(src)

feature_summary(WHAT ALL INCLUDE_QUIET_PACKAGES FATAL_ON_MISSING_REQUIRED_PACKAGES)

CMakeLists.txt визначає, як збирати ваші проєкти. Більшість даних тут призначено лише для збирання з нуля вашого проєкту. Порядкове глибинне пояснення дій, які описано у цьому файлі CMakeLists, наведено тут.

Найважливішим, про що слід пам'ятати, є те, що залежності від Qt і KDE Frameworks керуються за допомогою find_package. У процесі розробки вашої програми вам слід вносити зміни до цих рядків і включати усі додаткові компоненти, які ви вирішите використовувати.

Останній рядок, add_subdirectory(src), вказує каталог 'src' для CMake, де зберігатиметься наш початковий код. Розгляньмо докладніше файл CMakeLists.txt у цьому каталозі.

1
2
add_executable(helloworld main.cpp resources.qrc)
target_link_libraries(helloworld Qt5::Quick Qt5::Qml Qt5::Gui Qt5::QuickControls2 Qt5::Widgets KF5::Kirigami2 KF5::I18n)

Він набагато коротший! Ознайомимося з його вмістом:

add_executable створює виконуваний файл на основі вказаних початкових файлів.
target_link_libraries пов'язує ціль із бібліотеками, які використовуються у нашому коді для створення виконуваного файла.

Нотатка

Зауважте, що ці бібліотеки мають відповідати компонентам, які ми включили до нашого попереднього файла CMakeLists.txt — інакше ці компоненти не буде включено і нашу програму не можна буде зібрати.

Тепер, коли ми подбали про CMake, погляньмо на файли, з якими ми маємо намір працювати переважний час під час розробки програми.

Збирання і запуск програми

Ми наблизилися до фінішу. Наприкінці процесу нам слід побудувати і зібрати нашу програму. Для цього нам потрібно увійти до нашої теки «helloworld» у програмі-терміналі і віддати таку команду:

cmake -B build/ . && cmake --build build/

І запустити програму такою командою:

./build/bin/<project_name>

Ось і все! Тепер ви бачите перед собою вашу першу програму Kirigami вашими власними очима.

Знімок вікна створеної програми Kirigami

Нотатка

Наступного разу, коли створюватимете потрібні файли і теки, можете скористатися KAppTemplate або KDevelop для автоматичного створення відповідної початкової версії проєкту. Ці програми є у сховищах усіх основних дистрибутивів. Крім того, ці програми створюють файли, що містять метадані AppStream і файл .desktop, який містить дані щодо того, як слід показувати пункт програми у засобах запуску програм Linux.

Завдяки магії CMakeLists, ви також можете скористатися комплексними середовищами розробки, зокрема KDevelop або QtCreator для подальшого написання програми у комфортному середовищі із мінімальними зусиллями.

Пояснення щодо сторінок