Configuración y primeros pasos

Instalación de los paquetes necesarios

Antes de empezar, debemos instalar varias cosas. Necesitamos un compilador de C++, los paquetes de desarrollo de Qt y Kirigami.

En Ubuntu, Debian y Neon podemos instalarlos con 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

En distribuciones basadas en Arch (como Manjaro) podemos usar Pacman:

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

En Fedora usamos 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

Puede encontrar más información para otras distribuciones aquí.

Estructura del proyecto

Si bien existen herramientas que pueden configurar fácilmente nuestros archivos, los crearemos manualmente. Esto nos permitirá comprender mejor las piezas que compondrán nuestra nueva aplicación.

Primero creamos nuestra carpeta de proyecto. Vamos a llamar a la nuestra 'holamundo'.

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

Dentro de esta carpeta vamos a crear la carpeta src y CMakeLists.txt. Se suele considerar una buena práctica situar todos los archivos de código fuente principales en una carpeta src. Nuestra carpeta src, en cambio, va a contener otra carpeta llamada contents, que a su vez contiene una carpeta llamada ui. Ahí es donde vamos a crear nuestros archivos QML.

Esta es una convención de KDE, pero no todos los proyectos de KDE usan esta estructura. Usted es libre de configurar las cosas de una manera diferente, pero deberá tener esto en cuenta al crear los archivos CMakeLists.txt y 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!")
        }
    }
}

Aquí es donde manejaremos la interfaz de nuestra aplicación.

Si sabe algo de JavaScript, gran parte de QML le será familiar (aunque tiene sus propias peculiaridades). La documentación de Qt dispone de gran cantidad de material sobre este lenguaje si tiene ganas de probar cosas por su cuenta. A lo largo del curso de estos tutoriales nos vamos a centrar en nuestro código QML, donde podemos usar Kirigami para sacar el máximo provecho del mismo.

Por ahora, centrémonos en main.qml. Primero importamos cierto número de importantes módulos:

• QtQuick, la biblioteca estándar que usan las aplicaciones en QML.
• QtQuick Controls, que proporciona cierto número de controles estándares que podemos usar para hacer que nuestras aplicaciones sean interactivas.
• QtQuick Layouts, que proporciona herramientas para situar componentes dentro de la ventana de la aplicación.
• Kirigami, que proporciona cierto número de componentes adecuados para crear aplicaciones que funcionan en dispositivos de diferentes formas y tamaños.

Luego llegamos a nuestro elemento base, Kirigami.ApplicationWindow , que proporciona algunas funcionalidades básicas que son necesarias para todas las aplicaciones de Kirigami. Esta es la ventana que contendrá todas nuestras páginas, las secciones principales de nuestra interfaz de usuario.

Luego definimos la propiedad id de Kirigami.ApplicationWindow a 'root'. Los identificadores son útiles porque nos permiten hacer referencia a componentes de una forma única, incluso si tenemos varios del mismo tipo.

También definimos la propiedad title de la ventana con el valor 'Hola mundo'. Notará que hemos encerrado la cadena "Hola mundo" en una función llamada i18nc, donde detallamos el contexto de la cadena así como la propia cadena de texto.

Luego definimos la primera página de nuestra pila de páginas. La mayoría de las aplicaciones de Kirigami están organizadas como una pila de páginas, cada página contiene componentes relacionados adecuados para una tarea específica. Por ahora, la mantendremos simple y nos ceñiremos a una sola página. Con pageStack.initialPage: Kirigami.Page{...} asignamos la primera página que se muestra cuando se carga la aplicación a una Kirigami.Page, que contendrá todo nuestro contenido.

Finalmente, incluimos en nuestra página una Controls.Label que nos permite colocar un texto. Usamos anchors.centerIn: parent para centrar la etiqueta horizontal y verticalmente dentro del elemento padre. En este caso, el componente padre de Controls.Label es Kirigami.Page. Lo último que tenemos que hacer es asignar el texto text: i18n("¡Hola mundo!").

main.cpp

main.cpp maneja la 'lógica cliente' de nuestra aplicación. C ++ es útil porque es flexible y rápido, incluso aunque sea más complicado que otros lenguajes de programación.

main.cpp también es el punto de entrada de nuestra aplicación. Las dos partes de nuestro proyecto, el motor y la interfaz del usuario, se configuran y se inician aquí.

 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();
}

Por ahora, no necesitamos entrar en demasiados detalles con respecto a lo que hace nuestro código de main.cpp, pero su función será significativamente más importante cuando decidamos añadir una funcionalidad más compleja a nuestra aplicación en el futuro. Si quiere seguir adelante, puede leer más sobre cómo funciona este main.cpp en esta página.

resources.qrc

resources.qrc contiene la lista de todos los archivos QML, así como otros archivos (como los iconos personalizados) que se incluirán en el binario.

1
2
3
4
5

<RCC>
    <qresource prefix="/">
        <file alias="main.qml">contents/ui/main.qml</file>
    </qresource>
</RCC>

Fíjese en la línea <file alias="main.qml">contents/ui/main.qml</file>. En ella se detallan los archivos QML que se van a incluir en el proceso de compilación. En nuestro caso solo usamos main.qml, pero si necesitamos añadir otro archivo QML a nuestro código, deberíamos asegurarnos de que lo incluimos en el archivo resources.qrc añadiendo otra línea semejante a esta.

Puede leer más sobre los detalles de cómo funciona el sistema de recursos de Qt en la documentación de Qt.

CMakeLists.txt

Los archivos CMakeLists.txt son necesarios para usar el sistema de compilación de elección de KDE, CMake. El archivo CMakeLists.txt de nuestra carpeta superior va a especificar algunas de las características de nuestra aplicación. También incluye algunas de las dependencias que necesitamos compilar.

 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)

El CMakeLists.txt define cómo se compilan los proyectos. La mayor parte de su contenido es solo para iniciar el proyecto. Puede leer una explicación detallada, línea por línea, de lo que hace este archivo CMakeLists.txt aquí.

Lo más importante a tener en cuenta es que las dependencias de Qt y de KDE Frameworks se gestionan con find_package. Deberá modificar estas líneas e incluir cualquier componente adicional que decida usar durante el desarrollo de su aplicación.

La línea final, add_subdirectory(src), hace que CMake apunte al directorio 'src', donde se encuentra nuestro código fuente. Profundicemos en el archivo CMakeLists.txt que hay allí.

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)

¡Este es mucho más corto! Repasemos lo que hace:

• add_executable crea un ejecutable a partir de los archivos de código indicados.
• target_link_libraries enlaza las bibliotecas usadas en el código fuente con nuestro ejecutable.

Ahora que nos hemos encargado de CMake, veamos los archivos a los que vamos a dedicar la mayor parte de nuestro tiempo de trabajo.

Compilar y ejecutar la aplicación

Ya casi hemos llegado a la línea de meta. Lo último que tenemos que hacer es construir y compilar nuestra aplicación. Para ello, necesitamos entrar en nuestra carpeta 'helloworld' en nuestra aplicación de terminal favorita y ejecutar la siguiente orden:

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

Y lo ejecutamos con:

./build/bin/<project_name>

¡Ya está! Ahora verá su primera aplicación en Kirigami aparecer delante de sus ojos.