Página acerca de

Información sobre su aplicación

Kirigami.AboutPage le permite tener una página que muestra información sobre el copyright de la aplicación junto a la lista de colaboradores y cierta información sobre la plataforma en la que se está ejecutando.

En primer lugar, vamos a editar nuestro archivo main.cpp de los tutoriales anteriores.

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

#include <QApplication>
#include <QQmlApplicationEngine>
#include <QtQml>
#include <QUrl>
#include <KAboutData>
#include <KLocalizedContext>
#include <KLocalizedString>

int main(int argc, char *argv[])
{
    QCoreApplication::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"));

    if (qEnvironmentVariableIsEmpty("QT_QUICK_CONTROLS_STYLE")) {
        QQuickStyle::setStyle(QStringLiteral("org.kde.desktop"));
    }

    KAboutData aboutData(
        QStringLiteral("helloworld"),
        i18nc("@title", "Hello World"),
        QStringLiteral("1.0"),
        i18n("Hello world application"),
        KAboutLicense::GPL,
        i18n("(c) 2021"));

    aboutData.addAuthor(
        i18nc("@info:credit", "Your name"),
        i18nc("@info:credit", "Author Role"),
        QStringLiteral("your@email.com"),
        QStringLiteral("https://yourwebsite.com"));

    // Set aboutData as information about the app
    KAboutData::setApplicationData(aboutData);

    // Register a singleton that will be accessible from QML.
    qmlRegisterSingletonType(
        "org.kde.example", // How the import statement should look like
        1, 0, // Major and minor versions of the import
        "About", // The name of the QML object
        [](QQmlEngine* engine, QJSEngine *) -> QJSValue {
            // Here we retrieve our aboutData and give it to the QML engine
            // to turn it into a QML type
            return engine->toScriptValue(KAboutData::applicationData());
        }
    );

    // Load an application from a QML file
    QQmlApplicationEngine engine;

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

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

    return app.exec();
}

En el archivo main.cpp incluimos KAboutData, un componente principal de KDE Frameworks que nos permite guardar información sobre nuestra aplicación. Esta información la pueden reutilizar otros componentes de KDE Frameworks. Creamos una instancia de un nuevo objeto aboutData con su constructor predeterminado, que es bastante completo, y añadimos información sobre el autor.

Tras haber definido toda la información necesaria, llamamos a KAboutData::setApplicationData para inicializar las propiedades del objeto QApplication.

A continuación creamos un qmlRegisterSingletonType(). Esto se usa para permitirnos importar el código C++ como un módulo en nuestro main.qml con import org.kde.example 1.0.

Su primer argumento es el URI que se usará para la importación; el segundo y tercer argumentos son, respectivamente, las versiones mayor y menor; el cuarto es el nombre del tipo, el nombre que llamaremos para acceder a nuestro tipo About; y el último es una referencia al objeto de C++ que se expone a QML. En el caso de este último, usamos una lambda para instanciar el aboutData de nuestra aplicación en el mismo lugar.

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls as Controls
import org.kde.kirigami as Kirigami

import org.kde.example 1.0

Kirigami.ApplicationWindow {
    id: root

    title: i18nc("@title:window", "Day Kountdown")

    globalDrawer: Kirigami.GlobalDrawer {
        isMenu: true
        actions: [
            Kirigami.Action {
                text: i18n("Quit")
                icon.name: "gtk-quit"
                shortcut: StandardKey.Quit
                onTriggered: Qt.quit()
            },

            Kirigami.Action { // <==== Action to open About page
                text: i18n("About")
                icon.name: "help-about"
                onTriggered: pageStack.layers.push(aboutPage)
            }
        ]
    }

    Component { // <==== Component that instantiates the Kirigami.AboutPage
        id: aboutPage

        Kirigami.AboutPage {
            aboutData: About
        }
    }

    ListModel {
        id: kountdownModel
    }

    AddEditSheet {
        id: addEditSheet
        onAdded: kountdownModel.append({
            "name": name,
            "description": description,
            "date": Date.parse(kdate)
        });
        onEdited: kountdownModel.set(index, {
            "name": name,
            "description": description,
            "date": Date.parse(kdate)
        });
        onRemoved: kountdownModel.remove(index, 1)
    }

    function openPopulatedSheet(mode, index = -1, listName = "", listDesc = "", listDate = "") {
        addEditSheet.mode = mode
        addEditSheet.index = index;
        addEditSheet.name = listName
        addEditSheet.description = listDesc
        addEditSheet.kdate = listDate

        addEditSheet.open()
    }


    pageStack.initialPage: Kirigami.ScrollablePage {
        title: i18nc("@title", "Kountdown")

        actions: [
            Kirigami.Action {
                id: addAction
                icon.name: "list-add"
                text: i18nc("@action:button", "Add kountdown")
                onTriggered: openPopulatedSheet("add")
            }
        ]

        Kirigami.CardsListView {
            id: layout
            model: kountdownModel
            delegate: KountdownDelegate {}
        }
    }
}

En primer lugar, usamos la importación que definimos en el archivo main.cpp; es decir, org.kde.example. A continuación añadimos una Kirigami.Action a nuestro cajón global, que nos enviará a la página «Acerca de», y creamos un componente con una Kirigami.AboutPage en él, que espera un objeto KAboutData::applicationData(). Ya expusimos precisamente eso en nuestro main.cpp y lo llamamos About, para poder pasarlo aquí.

CMakeLists

 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
28
29

cmake_minimum_required(VERSION 3.16)
project(helloworld)

find_package(ECM REQUIRED NO_MODULE)

set(CMAKE_MODULE_PATH ${ECM_MODULE_PATH})

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

find_package(Qt6 REQUIRED NO_MODULE COMPONENTS
    Core
    Quick
    Test
    Gui
    QuickControls2
    Widgets
)

find_package(KF6 REQUIRED COMPONENTS
    Kirigami2
    I18n
    CoreAddons
)

add_subdirectory(src)

feature_summary(WHAT ALL INCLUDE_QUIET_PACKAGES FATAL_ON_MISSING_REQUIRED_PACKAGES)

En el archivo CMakeLists.txt de nuestra carpeta principal, nos aseguramos de tener CoreAddons en la llamada a find_package(). Es necesario para KAboutData.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

add_executable(helloworld)

target_sources(helloworld PRIVATE
    main.cpp
    resources.qrc
)

target_link_libraries(helloworld
    Qt6::Quick
    Qt6::Qml
    Qt6::Gui
    Qt6::QuickControls2
    Qt6::Widgets
    KF6::Kirigami2
    KF6::I18n
    KF6::CoreAddons
)

En el archivo CMakeLists.txt del directorio src/ no hace falta nada, ya que hemos creado una instancia de aboutData en el lugar.

Ejecución de la aplicación

Ahora, si ejecuta la aplicación y lanza la acción "Acerca de" del cajón global, debería ver nuestra página «Acerca de».

Captura de pantalla de la página acerca de Kirigami

Previous
Conectar modelos a la interfaz de usuario QML
Next
Introducción a los complementos de Kirigami