Configurar i com començar
Instal·lar els paquets necessaris
Abans de començar, hem d'instal·lar algunes coses. Necessitem un compilador C++, els paquets de desenvolupament de les Qt i el Kirigami.
sudo apt install build-essential cmake extra-cmake-modules qtbase5-dev qtdeclarative5-dev qtquickcontrols2-5-dev kirigami2-dev libkf5i18n-dev gettext libkf5coreaddons-dev | |
sudo pacman -S base-devel extra-cmake-modules cmake qt5-base qt5-declarative qt5-quickcontrols2 kirigami2 ki18n kcoreaddons breeze | |
sudo zypper install --type pattern devel_C_C++ sudo zypper install cmake extra-cmake-modules libQt5Core-devel libqt5-qtdeclarative-devel libQt5QuickControls2-devel kirigami2-devel ki18n-devel kcoreaddons-devel qqc2-breeze-style | |
sudo dnf groupinstall "Development Tools" "Development Libraries" sudo dnf install cmake extra-cmake-modules qt5-qtbase-devel qt5-qtdeclarative-devel qt5-qtquickcontrols2-devel kf5-kirigami2-devel kf5-ki18n-devel kf5-kcoreaddons-devel qqc2-breeze-style |
Trobareu més informació sobre les altres distribucions aquí.
Estructura del projecte
Si bé existeixen eines que poden configurar amb facilitat els nostres fitxers, els crearem manualment. Això ens permetrà comprendre millor les peces que compondran la nostra nova aplicació.
Primer crearem la nostra carpeta de projecte. L'anomenarem «helloworld».
helloworld/
├── CMakeLists.txt
└── src/
├── CMakeLists.txt
├── main.cpp
├── resources.qrc
└── contents/
└── ui/
└── main.qml
Dins d'aquesta carpeta crearem una carpeta src/
i un fitxer CMakeLists.txt
. En general, es considera una bona pràctica posar tots els nostres principals fitxers de codi en una carpeta src/
. La nostra carpeta src/
, al seu torn, contindrà una carpeta anomenada contents/
, la qual conté una carpeta anomenada ui/
. Aquí és on crearem els nostres fitxers QML.
Consell
Podeu crear ràpidament aquesta estructura de fitxers amb:
mkdir -p helloworld/src/contents/ui
touch helloworld/CMakeLists.txt
touch helloworld/src/{CMakeLists.txt,main.cpp,resources.qrc}
touch helloworld/src/contents/ui/main.qml
De manera alternativa, és possible que vulgueu utilitzar la plantilla estàndard del Kirigami proporcionada pel KDevelop, l'IDE principal de KDE per a codificar en C++ i QML. El KAppTemplate també està disponible si només necessiteu una plantilla ràpida per a iniciar la codificació en el vostre IDE o editor de text preferit.
Aquesta és una convenció del KDE, però no tots els projectes KDE utilitzen aquesta estructura. Podeu configurar les coses de manera diferent, però ho heu de tenir en compte en crear els fitxers CMakeLists.txt
i resources.qrc
.
main.qml
|
|
Aquí és on manejarem el frontal de la nostra aplicació.
Si coneixeu quelcom de JavaScript, gran part de QML us resultarà familiar (encara que té les seves pròpies peculiaritats). Si teniu ganes de provar alguna cosa pel vostre compte, la documentació de les Qt té una gran quantitat de material sobre aquest llenguatge. Al llarg d'aquestes guies d'aprenentatge, centrarem gran part de la nostra atenció en el codi en QML, on podrem emprar el Kirigami per a aprofitar-lo al màxim.
Per ara, centrem-nos en main.qml
. Primer importarem diversos mòduls importants:
- QtQuick, la biblioteca estàndard utilitzada en les aplicacions QML.
- QtQuick Controls, que proporciona una sèrie de controls estàndard que podem utilitzar perquè les nostres aplicacions siguin interactives.
- QtQuick Layouts, que proporciona eines per a col·locar els components dins de la finestra de l'aplicació.
- El Kirigami , que proporciona una sèrie de components adequats per a crear aplicacions que funcionen en dispositius de formes i mides diferents.
Nota
Posar els QtQuick Controls i les importacions del Kirigami en espais de noms separats utilitzant la paraula clauas
és una millor pràctica que assegura que cap component amb el mateix nom pugui entrar en conflicte. Podreu trobar diferents noms per als controls QtQuick en els textos, com ara «QQC» o «QQC2». Utilitzarem "Controls" en aquesta guia d'aprenentatge per a més claredat.Després arribem al nostre element base, la Kirigami.ApplicationWindow , que proporciona algunes característiques bàsiques necessàries per a totes les aplicacions escrites amb el Kirigami. Aquesta és la finestra que contindrà cadascuna de les nostres pàgines, les seccions principals de la nostra interfície d'usuari.
Després, establim la propietat id
de la finestra a "root". Els ID són útils perquè ens permeten fer referència de forma única a un component, fins i tot si en tenim diversos del mateix tipus.
També establirem la propietat title
de la finestra a "Hello World". Us adonareu que hem embolcallat la nostra cadena "Hello World" amb una funció amb la crida i18nc()
, on detallem el context de la cadena, així com la cadena en si.
Nota
Les funcions i18n() fan que la vostra aplicació sigui traduïble amb més facilitat, ja que retornen una versió de la cadena proporcionada en l'idioma de l'usuari (sempre que l'aplicació estigui localitzada per a aquest idioma). Mentre que un usuari anglès pot veure el títol de la finestra com «Hello World», un usuari català veurà «Hola món».
i18nc() construeix la funció i18n()
que permet als desenvolupadors proporcionar un context als equips de traducció que treballen en l'aplicació. És per això que hem inclòs la cadena "@title:window" abans de "Hello World". Vegeu la Guia del programador Ki18n per a més detalls.
Després establirem la primera pàgina de la nostra pila de pàgines. La majoria de les aplicacions escrites amb el Kirigami estan organitzades com una pila de pàgines, cada pàgina conté els components relacionats adequats per a una tasca específica. Per ara, el mantenim senzill i ens cenyim a una sola pàgina.
pageStack
és una pila inicialment buida de pàgines proporcionades per
Kirigami.ApplicationWindow
, i amb pageStack.initialPage: Kirigami.Page{...}
establim la primera pàgina presentada en carregar l'aplicació a una
Kirigami.Page
. Aquesta pàgina contindrà tot el nostre contingut.
Finalment, incloem en la nostra pàgina un
Controls.Label
que ens permetrà inserir text a la nostra pàgina. Utilitzarem anchors.centerIn: parent
per a centrar la nostra etiqueta horitzontalment i verticalment dins de l'element pare. En aquest cas, el component principal de la nostra etiqueta és
Kirigami.Page
. L'últim que hem de fer és configurar el text: text: i18n("Hello World!")
.
main.cpp
main.cpp
gestiona la «lògica empresarial» de la nostra aplicació. El C++ és útil perquè és flexible i ràpid, encara que és més complicat que altres llenguatges de programació.
main.cpp
també és el punt d'entrada a la nostra aplicació. Les dues parts del nostre projecte, el dorsal i la interfície d'usuari, ambdós es configuren i s'inicien aquí.
|
|
Per ara, no necessitem entrar en massa detalls sobre el que fa el nostre codi de main.cpp
, però la seva funció serà significativament més important una vegada en el futur decidim afegir una funcionalitat més complexa a l'aplicació. Si voleu avançar, podeu llegir més sobre com funciona aquest main.cpp
en aquesta pàgina.
resources.qrc
resources.qrc
és un fitxer de recursos Qt. Conté la llista de tots els fitxers QML, així com altres fitxers (com les icones personalitzades) que s'inclouran en el binari.
|
|
Observeu la línia <file alias="main.qml">contents/ui/main.qml</file>
. Detalla quins fitxers QML s'inclouran en el procés de compilació. En el nostre cas, només estem fent servir main.qml
, però si haguéssim d'afegir més fitxers QML al nostre codi, hauríem d'assegurar-nos incloure'ls en el fitxer resources.qrc
afegint una altra línia com aquesta.
Aquest fitxer de recursos ens permet usar el camí «qrc:» + «/main.qml» en el main.cpp
, en lloc de caldre especificar el camí sencer «contents/ui/main.qml».
CMakeLists.txt
Els fitxers CMakeLists.txt
són necessaris per a utilitzar el sistema de compilació triat pel KDE, CMake. El fitxer CMakeLists.txt
de la carpeta de nivell superior especifica algunes de les característiques de la nostra aplicació. També inclou algunes de les dependències que necessitem per a compilar el projecte.
|
|
El CMakeLists.txt
defineix com construir els vostres projectes. La major part del seu contingut només és per a arrencar el vostre projecte. Aquí podeu llegir una explicació detallada línia a línia del que fa aquest fitxer CMakeLists.
El més important a tenir en compte és que les dependències de les Qt i dels Frameworks del KDE es gestionen amb find_package(). Haureu de modificar aquestes línies i incloure qualsevol component addicional que decidiu utilitzar durant el desenvolupament de la vostra aplicació.
L'última línia, add_subdirectory(src)
, apunta el CMake al directori helloworld/src/
, on es troba el nostre codi font. Allà aprofundirem en el fitxer helloworld/src/CMakeLists.txt
.
|
|
Aquest és molt més curt! Repassem el que fa:
- add_executable() crea un executable a partir dels fitxers font donats.
- target_link_libraries() enllaça dinàmicament les biblioteques utilitzades en el nostre codi amb el nostre executable.
Nota
Cal tenir present que aquestes biblioteques han de coincidir amb els components que incloem en el nostre fitxerCMakeLists.txt
anterior. En cas contrari, aquests components no s'inclouran i la nostra aplicació no compilarà.Ara que hem tingut cura de CMake, vegem els fitxers als quals dedicarem la major part del nostre temps de treball.
Compilar i executar l'aplicació
Estem gairebé a la línia de meta. L'últim que hem de fer és construir i compilar la nostra aplicació. Per a fer això, hem d'entrar a la carpeta helloworld/
amb l'aplicació de terminal i executar les ordres següents:
cmake -B build/
cmake --build build/
I llanceu-la amb:
./build/bin/helloworld
Heus aquí! Ara veureu aparèixer la vostra primera aplicació escrita amb el Kirigami.
Nota
La pròxima vegada que vulgueu crear els fitxers i carpetes necessaris, podreu fer servir KAppTemplate o el KDevelop per a generar automàticament un projecte adequat per a començar. Estan disponibles en els repositoris de cada distribució. Aquestes aplicacions també generaran els fitxers que contenen les metadades d'AppStream i un fitxer .desktop
que conté la informació sobre com s'ha de mostrar l'aplicació en un llançador d'aplicacions del Linux.
Gràcies a la màgia de CMakeLists, també podreu utilitzar un IDE com el KDevelop o el QtCreator per a desenvolupar aquesta aplicació dins d'un entorn còmode, amb un esforç mínim.